@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/poppins-700.woff2") format("woff2");
}
:root {
  --ink: #142018;
  --ink-soft: #3a4a3e;
  --grey-d: #3a3a3a;
  --muted: #6b7a6e;
  --line: #d8e0d6;
  --paper: #f4f1ea;
  --paper-2: #ebe6db;
  --white: #fffcf7;
  --green: #1b6b45;
  --green-d: #0f3f28;
  --green-l: #e6f2ea;
  --beef: #c53030;
  --beef-d: #9b1c1c;
  --beef-l: #fde8e8;
  --rust: #b4532a;
  --gold: #c4a35a;
  --shadow: 0 18px 50px rgba(20, 32, 24, 0.08);
  --radius: 16px;
  --serif: "Poppins", system-ui, sans-serif;
  --sans: "Poppins", system-ui, sans-serif;
  /* Site-wide responsive containers (HY-30) */
  --hy-gutter: clamp(16px, 3vw, 40px);
  --hy-container: min(1320px, calc(100% - 2 * var(--hy-gutter)));
  --hy-container-cap: 1320px;
  --hy-container-wide: min(1480px, calc(100% - 2 * var(--hy-gutter)));
  --hy-container-narrow: min(760px, calc(100% - 2 * var(--hy-gutter)));
  --hy-container-form: min(820px, calc(100% - 2 * var(--hy-gutter)));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Nov 4 (David t752u): keep layout width steady when a modal locks body scroll (no scrollbar jump). */
  scrollbar-gutter: stable;
}
body { overflow-x: clip; }
html.standalone .app-header {
  padding-top: calc(12px + env(safe-area-inset-top));
}
html.standalone:has(#slow-notice) .app-header { padding-top: 12px; }
html.standalone #site-notice {
  top: calc(66px + env(safe-area-inset-top));
}
html.standalone .app-footer { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 28px;
  background: rgba(255, 252, 247, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

#site-notice {
  position: sticky;
  top: 66px;
  z-index: 39;
  display: block;
}
#site-notice[hidden] { display: none !important; }
.slow-notice {
  margin: 0;
  padding: 7px 16px;
  background: var(--green-l);
  color: var(--green-d);
  border-bottom: 1px solid #d3e6da;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
}
html.standalone .slow-notice {
  padding-top: calc(7px + env(safe-area-inset-top));
}
.site-notice {
  color: #f4f7f4;
  background: #16503c;
  border-bottom: 1px solid rgba(20, 32, 24, 0.18);
}
.site-notice.tone-sale {
  background: linear-gradient(90deg, #1b6b45, #8a6a22);
}
.site-notice.tone-down {
  background: #8a3418;
}
.site-notice-inner {
  max-width: var(--hy-container);
  margin: 0 auto;
  padding: 9px 48px 9px 28px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 42px;
}
.site-notice-msg {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 560;
  line-height: 1.45;
}
.site-notice-msg a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 650;
}
.site-notice-msg a:hover { opacity: 0.88; }
.site-notice-x {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 1.1rem;
  line-height: 28px;
  cursor: pointer;
  padding: 0;
}
.site-notice-x:hover { background: rgba(255,255,255,0.28); }

.notice-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.notice-toolbar button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 620;
  color: var(--ink);
}
.notice-toolbar button:hover { background: var(--green-l); }
.notice-editor {
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 1rem;
  line-height: 1.45;
  outline: none;
}
.notice-editor:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(27,107,69,0.12); }
.notice-editor a { color: var(--green); text-decoration: underline; }
.notice-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
}
.notice-emojis button {
  border: 0;
  background: #f4f1ea;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 1.15rem;
  cursor: pointer;
}
.notice-emojis button:hover { background: var(--green-l); }
.notice-live {
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
}
.notice-live .site-notice { position: static; }

#hy-notices { pointer-events: none; }
#hy-notices > * { pointer-events: auto; }

.hy-pop-back {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(20, 32, 24, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.hy-pop {
  position: relative;
  width: min(440px, 100%);
  background: #fffcf7;
  color: var(--ink);
  border-radius: 20px;
  padding: 28px 24px 22px;
  box-shadow: 0 24px 60px rgba(20, 32, 24, 0.28);
}
.hy-pop h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.45rem; }
.hy-n-body { color: var(--ink-soft); line-height: 1.5; }
.hy-n-body a { color: var(--green); text-decoration: underline; }
.hy-n-cta { display: inline-flex; margin-top: 14px; }
.hy-n-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 32, 24, 0.08);
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 32px;
  padding: 0;
}
.hy-pop-back.tone-sale .hy-pop { box-shadow: 0 24px 60px rgba(138, 106, 34, 0.28); }
.hy-pop-back.tone-down .hy-pop { border-top: 4px solid #8a3418; }

.hy-n-toast, .hy-n-card {
  position: fixed;
  z-index: 89;
  width: min(360px, calc(100vw - 24px));
  background: #142018;
  color: #f4f1ea;
  border-radius: 16px;
  padding: 16px 42px 16px 16px;
  box-shadow: 0 16px 40px rgba(20, 32, 24, 0.28);
}
.hy-n-toast.corner-br, .hy-n-card.corner-br { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
.hy-n-toast.corner-bl, .hy-n-card.corner-bl { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
.hy-n-toast b, .hy-n-card h3 { display: block; margin: 0 0 4px; }
.hy-n-card { width: min(380px, calc(100vw - 24px)); padding: 20px 44px 18px 18px; background: #fffcf7; color: var(--ink); }
.hy-n-card h3 { font-family: var(--serif); font-size: 1.2rem; }
.hy-n-toast .hy-n-x, .hy-n-card .hy-n-x { background: rgba(255,255,255,0.14); color: #fff; }
.hy-n-card .hy-n-x { background: rgba(20,32,24,0.08); color: var(--ink); }
.hy-n-toast.tone-sale { background: linear-gradient(135deg, #1b6b45, #8a6a22); }
.hy-n-toast.tone-down { background: #8a3418; }
.hy-n-card.tone-sale { border-top: 4px solid #c4a35a; }
.hy-n-card.tone-down { border-top: 4px solid #8a3418; }
.hy-n-toast .hy-n-body, .hy-n-toast .hy-n-body a { color: #e8eee9; }

.hy-bubble {
  position: fixed;
  z-index: 88;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  right: 16px;
  transition: opacity 0.28s ease, transform 0.4s ease;
}
.hy-bubble.is-away {
  opacity: 0;
  transform: scale(0.55);
  pointer-events: none;
}
.hy-bubble.corner-bl { right: auto; left: 16px; align-items: flex-start; }
.hy-bubble-orb {
  position: relative;
  width: 86px;
  height: 86px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: #16503c;
  box-shadow: 0 10px 28px rgba(20, 32, 24, 0.32);
}
.hy-bubble-orb video, .hy-bubble-face {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.hy-bubble-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.hy-bubble-face { font-size: 2.2rem; line-height: 86px; text-align: center; }
.hy-bubble-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(27, 107, 69, 0.55);
  animation: hy-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes hy-pulse {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.18); opacity: 0; }
}
.hy-bubble-chip {
  background: #fffcf7;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 620;
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 8px 20px rgba(20, 32, 24, 0.16);
  max-width: 200px;
  line-height: 1.3;
}
.hy-bubble.corner-bl .hy-bubble-chip { border-radius: 14px 14px 14px 4px; }
.hy-bubble-x {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #142018;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 22px;
  padding: 0;
}
.hy-bubble.corner-bl .hy-bubble-x { right: auto; left: -6px; }
.hy-bubble-slot { position: relative; width: 86px; height: 86px; }
.hy-bubble-stage {
  position: fixed;
  z-index: 1300;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 24px));
  transform-origin: 100% 100%;
  transform: scale(0.22);
  opacity: 0;
  border-radius: 80px;
  overflow: hidden;
  transition: transform 0.48s cubic-bezier(0.16, 0.84, 0.24, 1), opacity 0.28s ease, border-radius 0.48s ease;
}
.hy-bubble-stage.corner-bl { right: auto; left: 16px; transform-origin: 0 100%; }
.hy-bubble-stage.is-in {
  transform: scale(1);
  opacity: 1;
  border-radius: 18px;
}
.hy-bubble-card {
  position: relative;
  background: #142018;
  color: #f4f1ea;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(20, 32, 24, 0.45);
}
.hy-bubble-card video {
  width: 100%;
  max-height: min(420px, 62vh);
  background: #000;
  display: block;
}
.hy-bubble-card .hy-n-x { background: rgba(0,0,0,0.5); color: #fff; top: 8px; right: 8px; z-index: 2; }
.hy-bubble-card .hy-bubble-copy { padding: 12px 14px 14px; }
.hy-upload {
  position: fixed;
  z-index: 1400;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 32px));
  background: #142018;
  color: #f4f1ea;
  border-radius: 14px;
  padding: 12px 14px 14px;
  box-shadow: 0 12px 32px rgba(20, 32, 24, 0.35);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.hy-upload.is-done { background: #16503c; }
.hy-upload.is-out { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }
.hy-upload-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; font-weight: 620; }
.hy-upload-track { height: 8px; margin-top: 8px; background: rgba(255,255,255,0.18); border-radius: 99px; overflow: hidden; }
.hy-upload-bar { height: 100%; width: 0; background: #f4f1ea; border-radius: 99px; transition: width 0.15s linear; }
.bubble-editor {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  align-items: start;
}
.bubble-face {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: hidden;
  background: #16503c;
  box-shadow: 0 10px 28px rgba(20, 32, 24, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bubble-face video, .bubble-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bubble-face p { margin: 0; padding: 16px; text-align: center; color: #e8eee9; font-size: 0.85rem; }
.bubble-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 720px) {
  .bubble-editor { grid-template-columns: 1fr; }
}
.hy-bubble-open {
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(320px, calc(100vw - 32px));
  background: #142018;
  color: #f4f1ea;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(20, 32, 24, 0.4);
}
.hy-bubble.corner-bl .hy-bubble-open { right: auto; left: 0; }
.hy-bubble-open video { width: 100%; height: 240px; object-fit: cover; background: #000; display: block; }
.hy-bubble-copy { padding: 12px 14px 14px; }
.hy-bubble-open .hy-n-x { background: rgba(0,0,0,0.45); color: #fff; top: 8px; right: 8px; }
.hy-bubble.is-open .hy-bubble-orb,
.hy-bubble.is-open .hy-bubble-chip,
.hy-bubble.is-open .hy-bubble-x { display: none; }
.hy-bubble.is-open .hy-bubble-open { position: relative; }

body:has(#pwa-install) .hy-bubble,
body:has(#hy-offline-bar:not([hidden])) .hy-bubble,
body:has(#pwa-install) .hy-n-toast,
body:has(#pwa-install) .hy-n-card {
  bottom: calc(100px + env(safe-area-inset-bottom));
}
body.hy-wiz .hy-bubble,
body.hy-wiz .hy-pop-back,
body.hy-wiz .hy-n-toast,
body.hy-wiz .hy-n-card { display: none !important; }

.notice-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 16px 0 22px;
}
.notice-type-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px 12px;
  cursor: pointer;
  color: var(--ink);
}
.notice-type-btn:hover { border-color: var(--green); background: var(--green-l); }
.notice-type-btn b { font-size: 0.95rem; }
.notice-type-btn span { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.notice-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.notice-item .kind {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--green);
  background: var(--green-l);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.notice-item .kind.off { color: var(--muted); background: #eeeae2; }
.notice-live-pop, .notice-live-toast, .notice-live-card {
  position: relative;
  margin-top: 16px;
}
.notice-live-pop { background: rgba(20,32,24,0.08); padding: 24px; border-radius: 16px; }
.notice-live-pop .hy-pop { position: relative; }
.notice-live-bubble { display: flex; justify-content: flex-end; margin-top: 16px; min-height: 120px; }
.notice-live-bubble .hy-bubble { position: relative; bottom: auto; right: auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-size: 1.15rem;
}
.brand img { width: auto; height: 34px; object-fit: contain; background: transparent; }
.foot-logo { height: 32px; width: auto; margin-bottom: 8px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.nav-links a:hover { color: var(--green); }
/* Nov 6: signed-in "My Account" is a normal nav link (hidden until sign-in). Phone menu uses the same [hidden] rule. */
.nav-links a { white-space: nowrap; }
#nav-account[hidden],
.nav-links a[hidden],
#mobile-menu a[hidden] { display: none !important; }
.header-actions { display: flex; gap: 10px; align-items: center; position: relative; }
.header-actions .bell-link[hidden] { display: none !important; }
.review-stars { display: flex; gap: 4px; margin: 8px 0; }
.review-stars button { border: 0; background: transparent; font-size: 1.4rem; cursor: pointer; color: #c4a35a; padding: 0 2px; }
.genetics-buy, .listing-buy { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.listing-buy .buy-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.listing-buy .buy-row input { width: 88px; }
.listing-buy .buy-total { margin-top: 8px; font-weight: 650; }
.pay-toggle {
  width: 100%;
  min-height: 72px;
  margin: 4px 0 8px;
  padding: 0 18px;
  border: 2px solid var(--green);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.12rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  text-align: left;
}
.pay-toggle.on { background: var(--green); color: #fff; }
.pay-toggle .pay-state {
  flex: none;
  min-width: 64px;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 8px 14px;
  background: #e6f2ea;
  color: var(--green);
}
.pay-toggle.on .pay-state { background: rgba(255,255,255,0.2); color: #fff; }
.payout-steps { margin: 0 0 16px; padding-left: 1.2rem; }
.payout-steps li { margin: 0 0 10px; line-height: 1.45; }
.payout-steps li b { display: block; }
.payout-note { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #f4efe4; }
.payouts-onboard { margin-top: 16px; min-height: 640px; }
.payouts-onboard[hidden] { display: none !important; }
.payouts-onboard > * { display: block; width: 100%; min-height: 640px; }


.btn[hidden],
.wiz-nav .btn[hidden] { display: none !important; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 560;
  font-size: 0.92rem;
  transition: 0.15s ease;
}
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--green-l); }
.btn-outline { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-d); }
.btn-light { background: #fff; color: var(--green-d); }
.btn-wide { width: 100%; }
.btn-lg { padding: 13px 22px; font-size: 1rem; }

#app { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); }

.hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 32, 20, 0.35) 0%, rgba(15, 32, 20, 0.55) 70%),
    url("/hero.jpg?v=3")
      center/cover no-repeat;
}
.hero-inner {
  position: relative;
  text-align: center;
  padding: 96px 24px 88px;
  max-width: 860px;
}
.kicker {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.05;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
}
.hero p.lead { font-size: 1.15rem; opacity: 0.92; margin: 0 0 22px; }
.hero-bar { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-go-icon { display: none; width: 20px; height: 20px; }
.hero-search {
  display: flex;
  gap: 8px;
  width: min(520px, 100%);
  margin: 0 auto 12px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 252, 247, 0.96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.hero-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  color: #142018;
  background: transparent;
}
.hero-search .btn { border-radius: 999px; white-space: nowrap; padding: 10px 18px; }
.price-ideas { margin-top: 10px; }
.price-ideas .sub { margin: 6px 0 0; font-size: 0.82rem; }
.price-ideas .hy-chips { margin-top: 0; }
.breed-row { display: flex; gap: 8px; align-items: center; }
.breed-row + .breed-row { margin-top: 8px; }
.breed-pick { position: relative; flex: 1; min-width: 0; }
.breed-pick input { padding-right: 34px; }
.breed-open, .breed-plus {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  font: inherit;
  font-weight: 650;
  line-height: 1;
}
.breed-open {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
}
.breed-plus { width: 42px; height: 42px; flex: none; }
.breed-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20, 32, 24, 0.14);
}
.breed-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: #fff;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
}
.breed-menu button.on, .breed-menu button:hover { background: #e7f2ea; }
.place-pick { position: relative; }
.place-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20, 32, 24, 0.14);
}
.place-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: #fff;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
}
.place-menu button:hover, .place-menu button.on { background: #e7f2ea; }
.age-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.age-head label { margin: 0; }
.age-readout, #age-readout { color: var(--ink); font-weight: 650; font-size: 0.9rem; white-space: nowrap; }
.age-slider { position: relative; height: 50px; margin: 8px 0 4px; width: 100%; min-width: 0; }
.age-track { position: absolute; left: 8px; right: 8px; top: 12px; height: 4px; border-radius: 99px; background: #d8e0d6; }
.age-slider input[type="range"] {
  position: absolute; left: 0; width: 100%; top: 2px; margin: 0; height: 24px;
  background: transparent; pointer-events: none; appearance: none; -webkit-appearance: none;
}
.age-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 2px solid var(--green); box-shadow: 0 1px 4px rgba(20,32,24,.25); cursor: pointer;
}
.age-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 2px solid var(--green); cursor: pointer;
}
.age-mode { display: flex; width: 100%; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 0 0 8px; }
.age-mode button { flex: 1; border: 0; background: transparent; padding: 6px 8px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.age-mode button.on { background: var(--green); color: #fff; }
.age-slider.age-single [name=ageMax] { display: none; }
.age-slider.age-single [name=ageMin] { pointer-events: auto; }
.age-unit { display: flex; width: 100%; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.age-unit button { flex: 1; border: 0; background: transparent; padding: 6px 8px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.age-unit button.on { background: var(--green); color: #fff; }
.form-grid .field { min-width: 0; }
.listing-where { margin-top: 22px; }
.listing-where h3 { margin: 0 0 4px; }
.listing-map { height: 280px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); margin-top: 8px; }
.lot-num { margin: 4px 0 0; color: var(--muted); font-weight: 650; letter-spacing: 0.04em; }
.hy-card-pop .leaflet-popup-content-wrapper { padding: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(20,32,24,.28); }
.hy-card-pop .leaflet-popup-content { margin: 0 !important; width: 300px !important; }
.hy-card-pop .leaflet-popup-close-button {
  top: 10px !important; right: 10px !important; width: 28px !important; height: 28px !important;
  border-radius: 50%; background: #fff !important; color: #222 !important;
  font: 700 18px/28px Poppins, sans-serif !important; text-align: center; padding: 0 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.28);
}
.map-pop { display: block; width: 280px; color: inherit; text-decoration: none; }
.map-pop { overflow: hidden; }
.map-pop img { width: 100%; height: 176px; object-fit: cover; display: block; border-radius: 0; background: #e7f2ea; color: transparent; font-size: 0; line-height: 0; overflow: hidden; }
.map-pop-copy { padding: 12px 14px 14px; line-height: 1.35; }
.map-title { font-weight: 650; font-size: 1rem; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.map-meta { color: var(--ink-soft); font-size: 0.86rem; margin-top: 3px; }
.map-price { margin-top: 8px; font-weight: 700; font-size: 0.98rem; }
.search-hit { display: block; padding: 12px 0; border-bottom: 1px solid var(--line, #e4ece6); color: inherit; text-decoration: none; }
.search-hit b { display: block; }
.search-hit span { color: var(--ink-soft, #5c6b62); font-size: 0.92rem; }
@media (max-width: 720px) {
  .hero-bar { width: 100%; gap: 10px; }
  .hero-search { width: 100%; margin: 0; flex-direction: row; border-radius: 999px; padding: 4px; }
  .hero-search input { padding: 8px 8px 8px 14px; }
  .hero-go-label { display: none; }
  .hero-go-icon { display: block; }
  .hero-search .hero-go { width: 42px; height: 42px; padding: 0; flex: none; }
}
.hero-cta {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: auto;
}
.hero-cta .btn {
  width: auto;
  white-space: nowrap;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 0.98rem;
  font-weight: 600;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 252, 247, 0.85);
}
.hero-cta .btn:hover { background: rgba(255, 252, 247, 0.14); }
@media (max-width: 720px) {
  .hero-cta { width: auto; }
  .hero-cta .btn { width: auto; padding: 10px 16px; font-size: 0.9rem; }
}

.section { padding: 72px var(--hy-gutter); max-width: var(--hy-container); width: 100%; margin: 0 auto; box-sizing: border-box; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.section-head .btn { white-space: nowrap; flex: none; }
.section h2, .page-title {
  font-family: var(--serif);
  font-weight: 560;
  letter-spacing: -0.03em;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0 0 6px;
}
.sub { color: var(--muted); margin: 0; }

.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; min-width: 0; width: 100%; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.listing-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.18s ease;
  height: auto;
  min-width: 0;
  min-height: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.listing-card:hover { transform: translateY(-3px); }
.listing-card .thumb {
  height: 190px;
  background-size: cover;
  background-position: center;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}
.listing-card .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  /* Broken images paint their alt text in the box. Hide that paint; the alt attribute stays. */
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.mine-card .listing-body { padding-right: 16px; }
.mine-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.mine-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  min-width: 0;
}
.mine-actions .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card-x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 32, 24, 0.72);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-x:hover { background: #8b2e1a; }
.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,252,247,0.94);
  color: var(--green-d);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.ranch-chip {
  max-width: calc(100% - 24px);
  display: block;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  padding: 7px 12px;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(20, 32, 24, 0.16);
}
.days {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(20,32,24,0.72);
  color: #fff;
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 999px;
}
.play-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(20,32,24,0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.thumb-video {
  background: #142018;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.listing-title { font-size: 0.95rem; font-weight: 600; margin: 8px 0 0; color: var(--ink); }
.listing-body {
  padding: 14px 16px 16px;
  flex: 0 0 auto;
  min-height: 72px;
  min-width: 0;
  overflow: hidden;
}
.price { font-weight: 650; font-size: 1.12rem; color: var(--green); margin: 0 0 6px; }
.meta { color: var(--muted); font-size: 0.86rem; }
.meta span + span::before { content: " · "; color: #b7c0b6; }
/* Oct 20 (David): card lines separate their parts with " | " ("100 | Angus | Bred"). Each part stays whole; when a
   narrow card can't fit the line, it breaks only after a bar, never inside a part or before a bar. */
.listing-card .meta span + span::before { content: none; }
.listing-card .meta > span { display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.listing-card .meta > span:not(:last-child)::after { content: "|"; color: #b7c0b6; margin: 0 0.35em; }

.band { background: var(--paper-2); }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.stat-num { font-family: var(--serif); font-size: 2.6rem; letter-spacing: -0.03em; margin: 4px 0 16px; }
.label { color: var(--muted); font-size: 0.82rem; margin-bottom: 2px; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; }
.plan.featured { background: var(--green-d); color: #f6f3ea; border-color: var(--green-d); }
.plan h3 { margin: 0 0 4px; font-size: 1.1rem; }
.plan .amt { font-family: var(--serif); font-size: 2.2rem; margin: 10px 0 4px; }
.plan ul { padding: 0; margin: 18px 0 22px; list-style: none; }
.plan li { padding: 7px 0 7px 22px; position: relative; font-size: 0.92rem; }
.plan li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); }
.plan-audience {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 440px;
  margin: 0 0 22px;
  background: #e6eee8;
  border-radius: 12px;
  padding: 4px;
}
.plan-audience button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #3a4a3e;
  font: inherit;
  font-weight: 650;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 9px;
  cursor: pointer;
}
.plan-audience button.on {
  background: #16503c;
  color: #fff;
  box-shadow: 0 1px 4px rgba(20, 32, 24, 0.12);
}
.plan-billing {
  display: inline-flex;
  gap: 0;
  margin: 4px 0 14px;
  background: #e6eee8;
  border-radius: 999px;
  padding: 4px;
}
.plan-billing[hidden] { display: none; }
.plan-billing button {
  border: 0;
  background: transparent;
  color: #3a4a3e;
  font: inherit;
  font-weight: 650;
  font-size: 0.92rem;
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 104px;
}
.plan-billing button.on {
  background: #16503c;
  color: #fff;
  box-shadow: 0 1px 4px rgba(20, 32, 24, 0.12);
}
.plan-audience button:focus-visible,
.plan-billing button:focus-visible { outline: 2px solid #c9a44c; outline-offset: 2px; }
.plan .amt .per { font-family: var(--sans, inherit); font-size: 1rem; opacity: 0.85; }
.plan .sub.billed { font-size: 0.88rem; }
.plan.featured .sub.billed { color: #dfe9e2; }
.plan .plan-save {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(201, 164, 76, 0.22);
  color: #f3e2b4;
  font-size: 0.78rem;
  font-weight: 650;
}
#plan-note { margin: 0 0 22px; }

.browse-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 72px);
  height: calc(100dvh - 72px);
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow: hidden;
}
.filters { background: var(--white); border-right: 1px solid var(--line); padding: 22px 18px; overflow-y: auto; }
.filters h3 { margin: 0 0 14px; font-size: 1rem; }
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 620;
  color: #3a4a3e;
  margin: 4px 0 12px;
  cursor: pointer;
}
.check-row input { width: auto; accent-color: #16503c; }
.price-range-vals {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 650;
  color: #16503c;
  margin-bottom: 6px;
}
.price-range {
  position: relative;
  height: 28px;
}
.price-range-track {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 12px;
  height: 4px;
  background: #d8e0d6;
  border-radius: 99px;
}
.price-range-track i {
  position: absolute;
  top: 0;
  height: 100%;
  background: #16503c;
  border-radius: 99px;
}
.field .price-range input[type="range"] {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.field .price-range input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border: 0;
}
.field .price-range input[type="range"]::-moz-range-track {
  height: 4px;
  background: transparent;
  border: 0;
}
.field .price-range input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16503c;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(20, 32, 24, 0.25);
  cursor: pointer;
  margin-top: -7px;
}
.field .price-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16503c;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(20, 32, 24, 0.25);
  cursor: pointer;
  border: 2px solid #fff;
}
.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--ink);
}
.map-frame { display: contents; }
.map-search { display: none; }
.map-filter-btn {
  width: 48px;
  height: 48px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1c241e;
  box-shadow: 0 2px 12px rgba(20, 24, 20, 0.22);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.browse-tools { display: flex; align-items: center; gap: 8px; }
.browse-layout.filters-collapsed { grid-template-columns: 1fr; }
.browse-layout.filters-collapsed > .filters { display: none; }
.browse-layout:not(.filters-collapsed) .browse-toolbar .map-filter-btn,
.hy-map-page.filters-open .map-filter-btn { background: #16503c; color: #fff; }
.browse-layout:not(.filters-collapsed) .browse-toolbar .map-filter-btn circle,
.hy-map-page.filters-open .map-filter-btn circle { fill: #fff; stroke: #fff; }
@media (min-width: 981px) {
  .hy-map-page:not(.filters-open) .hy-map-page-filters,
  .hy-map-page:not(.filters-open) .hy-map-filters { display: none; }
}
.producers-frame { display: block; }
.producers-frame .map-search {
  display: flex;
  position: static;
  max-width: 420px;
  margin: 0 0 12px;
}
.producers-frame .map-search-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #5c6b62;
}
.producers-frame .map-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
}
.filter-open-btn { display: none; }
@media (max-width: 980px) {
  .filter-open-btn { display: inline-flex; }
  .browse-layout .filters { display: none; }
  .browse-layout.filters-open .filters { display: block; border-bottom: 1px solid var(--line); }
  .prod-filters { display: none; }
  .prod-filters.is-open { display: block; }
}
.browse-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.browse-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  flex: none;
}
.view-toggle { display: flex; gap: 4px; flex: 1; justify-content: flex-end; min-width: 0; }
.view-toggle .btn,
.browse-mobile-toggle .btn {
  box-sizing: border-box;
  border: 1px solid transparent;
}
.view-toggle .btn-outline,
.browse-mobile-toggle .btn-outline {
  border-color: var(--line);
}
.view-toggle .btn {
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.15;
  white-space: nowrap;
}
.view-toggle .label-short { display: none; }
.browse-stage {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.browse-layout.view-split .browse-stage {
  display: grid;
  grid-template-columns: minmax(380px, 1.15fr) minmax(320px, 1fr);
  height: auto;
  max-height: none;
  overflow: hidden;
}
.browse-layout.view-map .browse-stage {
  display: block;
  height: auto;
  max-height: none;
  overflow: hidden;
}
.browse-layout.view-map .listings-grid { display: none; }
.browse-layout.view-map .listings-col { display: none; }
.browse-layout.view-list .map-frame,
.browse-layout.view-list .map-wrap { display: none; }
.browse-layout.view-list .listings-col { flex: 1; min-height: 0; height: auto; }
.map-wrap {
  height: 100%;
  min-height: 0;
  background: #d5e4d4;
  position: relative;
  overflow: hidden;
}
.browse-layout.view-split .map-wrap { min-height: 0; height: 100%; max-height: 100%; }
.listings-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}
.listings-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.listings-sentinel,
.hy-map-results-sentinel { height: 1px; }
.listings-feed-status,
.hy-map-results-status {
  margin: 0;
  padding: 4px 16px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
}
.listings-feed-status[hidden],
.hy-map-results-status[hidden] { display: none; }
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line);
  background: var(--white);
  flex-shrink: 0;
}
.pager .pages { color: var(--muted); font-size: 0.86rem; }
.browse-layout.view-list .listings-grid { display: grid; }
.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 18px;
  overflow: visible;
  height: auto;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
}
.browse-layout.view-split .listings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  height: auto;
  overflow: visible;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
}
.browse-layout.view-split .listing-card .thumb { height: 132px; }
.browse-layout.view-split .listing-body { display: block; padding: 12px 12px 14px; min-height: 78px; }
.browse-layout.view-split .price { font-size: 1.02rem; }
.leaflet-container { height: 100%; width: 100%; background: #dce8d8; position: relative; z-index: 1; }
.hy-pin { background: transparent; border: 0; }
.hy-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: #1b6b45;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.detail {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 28px;
  padding: 28px;
  max-width: var(--hy-container-wide);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: var(--hy-gutter);
  padding-right: var(--hy-gutter);
}
.gallery {
  border-radius: 18px;
  overflow: hidden;
  background: #ccc;
  min-height: 380px;
  height: 420px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.gallery.has-video { background: #142018; }
.gallery video,
.gallery iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: #142018;
}
.thumbs { display: flex; gap: 8px; margin-top: 10px; }
.thumbs button {
  width: 72px;
  height: 56px;
  border: 2px solid transparent;
  border-radius: 8px;
  background-size: cover;
  cursor: pointer;
}
.thumbs button.on { border-color: var(--green); }
.side-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  position: sticky;
  top: 88px;
}
.producer-mini { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.producer-mini img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

.profile-hero,
.ranch-banner {
  width: 100%;
  max-width: var(--hy-container-wide);
  height: 250px;
  margin: 0 auto;
  background: #d7eadc center / cover no-repeat;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.profile-hero::after { display: none; }
@media (min-width: 768px) {
  .profile-hero,
  .ranch-banner {
    height: 400px;
    border-radius: 12px;
  }
}
.ranch-banner-video {
  background-color: #d7eadc;
}
.ranch-banner-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
  background: transparent;
}
.ranch-banner-video video.is-ready {
  opacity: 1;
}
.ranch-banner-edit video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ranch-cover-video-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 18px;
}
.ranch-banner-edit {
  border: 2px dashed #1b6b45;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
  background-color: #e6f2ea;
}
.ranch-banner-label {
  background: rgba(255, 252, 247, 0.94);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 560;
  color: var(--ink);
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
}
.profile-card {
  max-width: var(--hy-container);
  margin: -70px auto 0;
  position: relative;
  background: var(--white);
  border-radius: 18px;
  padding: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
}
.profile-card img.av { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.kpis { display: flex; gap: 22px; text-align: center; }
.kpis b { display: block; font-size: 1.2rem; }

.form-page { max-width: var(--hy-container-form); width: 100%; margin: 0 auto; padding: 40px var(--hy-gutter) 80px; box-sizing: border-box; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.media-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  margin: 4px 0 8px;
}
.media-drop {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 2px dashed #1b6b45;
  background: #e6f2ea;
  border-radius: 16px;
  padding: 16px 18px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  min-height: 56px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 400;
  color: #0f3f28;
  white-space: nowrap;
}
/* HY-40 drag-over highlights */
.media-drop.is-dragover {
  border-color: #0f3f28;
  background: #d5eadc;
  box-shadow: 0 0 0 3px rgba(27, 107, 69, 0.28);
}
.ranch-banner-edit.is-dragover {
  border-color: #0f3f28;
  background-color: #d5eadc;
  box-shadow: inset 0 0 0 4px rgba(27, 107, 69, 0.35);
}
.admin-cover-drop.is-dragover,
.admin-cover-drop.on {
  border-color: #0f3f28;
  background-color: #d7eadc;
  box-shadow: inset 0 0 0 4px rgba(27, 107, 69, 0.35);
}
#avatar-btn.is-dragover,
.admin-avatar-btn.is-dragover {
  outline: 3px solid #1b6b45;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(27, 107, 69, 0.22);
}

.media-drop strong {
  display: inline;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f3f28;
  margin: 0;
  pointer-events: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.media-drop > span,
.media-drop .media-drop-sub {
  display: none;
}
.media-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
  color: transparent;
  background: transparent;
  border: 0;
  padding: 0;
  pointer-events: none;
}
/* Nov 5 (David pt932u): shell holds V2 cutover banner above the white card at the same width. */
.auth-shell {
  max-width: 420px;
  width: calc(100% - 32px);
  margin: 48px auto;
  box-sizing: border-box;
}
.auth-box {
  max-width: none;
  width: 100%;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-sizing: border-box;
}
.social-auth { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.social-btn {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  gap: 10px;
  box-sizing: border-box;
}
.social-btn svg { width: 18px; height: 18px; flex: none; display: block; }
.social-btn:hover { border-color: var(--green); background: var(--green-l); color: var(--green-d); }
.social-btn:focus-visible { outline: 3px solid rgba(27, 107, 69, 0.35); outline-offset: 2px; }
.social-btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: #f7f4ee;
  color: var(--ink);
}
.social-btn[aria-disabled="true"]:hover { border-color: var(--line); background: #f7f4ee; color: var(--ink); }
.social-note { margin: 10px 0 0; }
.social-error {
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8efe6;
  color: #6b3a1f;
}
/* Nov 4 (David t785u): temporary V2 cutover notice on failed sign-ins (remove with signin-cutover-notice.js). */
/* Nov 5 (David pt932u): lives outside .auth-box, same width as the card. */
.signin-cutover-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef4fa;
  color: #1e3a5f;
  font-size: 0.92rem;
  line-height: 1.45;
  box-sizing: border-box;
  width: 100%;
}
.confirm-wait-lead { margin: 0 0 14px; }
.confirm-wait-step {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}
.confirm-wait-hint { margin: 4px 0 0; font-size: 0.88rem; }
.confirm-wait .btn-wide { margin-top: 16px; }
.confirm-wait-back { margin-top: 14px; text-align: center; }

.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;
  color: var(--muted);
  font-size: 0.82rem;
}
.auth-or::before,
.auth-or::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
@media (max-width: 640px) {
  .auth-shell { margin: 24px auto; width: calc(100% - 32px); }
  .auth-box { padding: 22px 18px; }
}

.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 560; }

.app-footer a { color: var(--green); font-weight: 560; }
.app-footer {
  border-top: 1px solid var(--line);
  padding: 40px 28px 28px;
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: 28px 48px;
  align-items: start;
  color: var(--muted);
  font-size: 0.92rem;
  background: var(--white);
  max-width: var(--hy-container-wide);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.foot-brand b {
  display: block;
  color: var(--ink);
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.foot-brand { line-height: 1.45; max-width: 260px; }
.foot-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px 24px;
}
.foot-cols b {
  display: block;
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.foot-cols a {
  display: block;
  padding: 4px 0;
  font-weight: 560;
}
.foot-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 0.82rem;
}
.legal-page { max-width: var(--hy-container-narrow); width: 100%; margin-left: auto; margin-right: auto; }
.legal-page h1 {
  font-family: var(--serif);
  font-weight: 560;
  letter-spacing: -0.03em;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0 0 8px;
}
.legal-page h2 { font-size: 1.15rem; margin: 28px 0 8px; color: var(--ink); }
.legal-page p { color: var(--ink-soft); }
.legal-page a { color: var(--green); font-weight: 560; }
.legal-page a.btn,
.legal-page a.btn:hover { color: #fff; }
.about-page .lead { font-size: 1.15rem; color: var(--ink); margin: 0 0 14px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.about-card h2 { margin-top: 0; }
.about-role {
  margin: -4px 0 10px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.about-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  display: block;
  margin: 0 0 14px;
}
.about-card p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; }
}
.legal-list { margin: 0; padding-left: 1.15rem; color: var(--ink-soft); }
.legal-list li { margin: 0 0 8px; }
.example-banner {
  background: var(--green-l);
  border: 1px solid #cfe0d4;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 22px;
  color: var(--green-d);
}
.example-banner p { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.92rem; }
.sms-optin {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 10px;
  background: #fbfaf6;
  margin-top: 12px;
}
.sms-optin-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}
.sms-optin-row input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.sms-optional-tag {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
}
.sms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.sms-disclose { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; margin: 12px 0 6px; }
.sms-links { margin-top: 0; }
.sms-sample {
  background: #142018;
  color: #f4f1ea;
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-line;
  max-width: 440px;
}
.sms-example-form input[readonly] { background: #f3f0e8; }
.compare-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 10px;
}
.compare-page { max-width: var(--hy-container); width: 100%; margin-left: auto; margin-right: auto; }
.compare-page .lead { font-size: 1.08rem; color: var(--ink); }
.compare-table-wrap {
  overflow-x: auto;
  margin: 22px 0 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: 0.94rem;
}
.compare-table th, .compare-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table thead th {
  background: var(--green-d);
  color: #f4f1ea;
  font-weight: 650;
  font-size: 0.88rem;
}
.compare-table thead th:nth-child(2) { background: var(--green); }
.compare-table tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 28%;
  background: #fbfaf6;
}
.compare-table tbody td:nth-child(2) { color: var(--green-d); font-weight: 560; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
/* Oct 19 (David): ONE toast component site-wide (public/js/toast.js). Old one-off toast styles removed.
   Desktop: lower right, 24px from the right and bottom, stacked upward. Phone: bottom, full width minus 16px margins,
   above the safe area. --hy-toast-lift (set by toast.js) keeps it clear of a sticky price card's action button. */
#toast { display: none !important; } /* legacy element: writes to it are bridged into the stack */
.hy-toast-host {
  position: fixed;
  z-index: 12000;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom) + var(--hy-toast-lift, 0px));
  left: auto;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(400px, calc(100vw - 48px));
  pointer-events: none;
  transition: bottom .2s ease;
}
.hy-toast {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--hy-toast-max, 100%);
  min-width: 0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 32, 24, 0.22);
  font: inherit;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .24s ease, opacity .24s ease;
  overflow: hidden;
  border: 1px solid transparent;
}
.hy-toast.hy-toast-in { transform: translateY(0); opacity: 1; }
.hy-toast.hy-toast-out { opacity: 0; transform: translateY(10px); }
.hy-toast-inner { display: flex; gap: 10px; align-items: center; padding: 12px 8px 12px 14px; }
.hy-toast-icon { flex: none; display: inline-flex; width: 20px; height: 20px; }
.hy-toast-copy { flex: 1; min-width: 0; }
.hy-toast-msg { font-size: 0.95rem; line-height: 1.4; font-weight: 600; word-break: break-word; }
.hy-toast-x {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent;
  color: inherit; opacity: .8; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.hy-toast-x:hover, .hy-toast-x:focus-visible { opacity: 1; background: rgba(127, 127, 127, 0.18); }
/* Three tones, one look. */
.hy-toast-success { background: var(--green, #1b6b45); color: #fff; }
.hy-toast-info, .hy-toast-warn { background: #fffcf7; color: var(--ink, #142018); border-color: var(--line, #d8e0d6); }
.hy-toast-error { background: #b4412f; color: #fff; }
@media (max-width: 760px) {
  .hy-toast-host {
    left: 16px; right: 16px; width: auto;
    bottom: calc(16px + env(safe-area-inset-bottom) + var(--hy-toast-lift, 0px));
    align-items: stretch;
  }
}
/* Zoomed phone: toast.js pins the host to the visual viewport. */
.hy-toast-host-pinned { right: auto; }

.hidden { display: none !important; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }

@media (max-width: 980px) {
  .cards-3, .plans, .quotes, .stats-grid, .detail, .browse-layout, .profile-card, .form-grid {
    grid-template-columns: 1fr;
  }
  .nav-links { display: none; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .browse-layout { display: block; height: auto; max-height: none; overflow: visible; }
  .browse-layout.view-split .browse-stage { display: block; height: auto; max-height: none; }
  .map-wrap { height: 280px; min-height: 280px; max-height: 280px; }
  .listings-col { height: auto; overflow: visible; }
  .kpis { justify-content: flex-start; flex-wrap: wrap; }
}


/* Oct 22: Admin > Dashboard Quotes */
.dq-add { display: flex; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
.dq-add input { flex: 2 1 240px; min-width: 0; border: 1px solid #d8e0d6; background: #f4f1ea; border-radius: 10px; padding: 9px 11px; color: #142018; font: inherit; }
.dq-add #dq-new-by { flex: 1 1 140px; }
.dq-add .btn { flex: none; }
.dq-list { list-style: none; margin: 0; padding: 0; border: 1px solid #e3e8e1; border-radius: 12px; background: #fff; overflow: hidden; }
.dq-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-top: 1px solid #edf0eb; }
.dq-row:first-child { border-top: 0; }
.dq-text { flex: 1; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.dq-attr { color: #5c6f62; }
.dq-row.is-live { background: var(--green-l); box-shadow: inset 3px 0 0 var(--green); }
.dq-live { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--green); color: #fff; font-size: .72rem; font-weight: 700; font-style: normal; letter-spacing: .02em; vertical-align: 2px; }
.dq-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #5c6f62; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.dq-x:hover, .dq-x:focus-visible { background: #f6e3e0; color: #a3271b; }
.dq-x:disabled { opacity: .4; cursor: default; }
.dq-empty { padding: 14px; margin: 0; }
@media (max-width: 640px) { .dq-add .btn { flex: 1 1 100%; } }
/* Oct 22: Dashboard Quote under the News slider. Two lines are reserved so nothing below moves when it arrives. */
.dash-quote {
  margin: -8px 2px 14px;
  min-height: 2.9em;
  font-size: .9rem;
  line-height: 1.45;
  font-style: italic;
  color: #7a7f7c;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  opacity: 0;
  transition: opacity .35s ease;
}
.dash-quote.is-in { opacity: 1; }
/* Phones: room for 3 lines (every seed fits), reserved up front so nothing below moves when it fills in. */
@media (max-width: 640px) { .dash-quote { min-height: 4.35em; -webkit-line-clamp: 3; } }
.dash-quote .dq-by { white-space: nowrap; }
/* David Oct 22 5:03 PM: centre the quote and its attribution on desktop and phone. */
.dash-quote { text-align: center; margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .dash-quote { transition: none; } }
.news-ribbon {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0;
  background: var(--green-d);
  color: #f4f1ea;
  border-radius: 16px;
  overflow: hidden;
  min-height: 58px;
  margin: 6px 0 18px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.news-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #174c3c;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  padding: 10px;
}
.news-window { overflow: hidden; height: 58px; position: relative; min-width: 0; max-width: 100%; }
.news-track {
  display: flex;
  flex-direction: row;
  width: max-content;
  animation: news-roll 90s linear infinite;
}
.news-track:hover,
.news-window.is-held .news-track,
.news-window:focus-within .news-track { animation-play-state: paused; }
.news-item {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  color: #fffcf7;
  white-space: nowrap;
  flex: none;
}
/* Every headline carries its own divider on the right, so all copies are the same width and the loop lands exactly on -50%. */
.news-track .news-item { border-right: 1px solid rgba(255,252,247,.16); }
.news-item .src { color: #c4a35a; font-weight: 650; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
/* Right to left, like the app: 4 copies of the headlines, so -50% shows exactly what 0 showed and the
   loop restarts with no visible jump. Speed unchanged (half the track every 90s). */
@keyframes news-roll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Reduced motion: a plain horizontal scroller with each headline once, no animation. */
@media (prefers-reduced-motion: reduce) {
  .news-window { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .news-window::-webkit-scrollbar { display: none; }
  .news-track { animation: none; transform: none; }
  .news-item.news-dup { display: none; }
}
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  max-width: 800px;
  width: 100%;
  min-width: 0;
}
.dash-kpi {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 0;
  min-height: 88px;
}
.dash-kpi b { display: block; font-size: 1.2rem; color: var(--green-d); line-height: 1.1; }
.dash-kpi span { color: var(--muted); font-size: .68rem; line-height: 1.2; }
.coupon-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .04em; }
.dash-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.dash-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 18px 12px;
  min-height: 220px;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dash-tile h3 { margin: 0 0 12px; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex: 0 0 auto; }
.dash-tile h3 a { color: var(--green); font-size: .8rem; font-weight: 560; }
/* Nov 5 2026 (t793u): home dashboard tiles stay their grid width but become square; body scrolls. */
.dash-sec-tile .dash-tile {
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.dash-tile-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(27, 107, 69, 0.35) transparent;
}
.dash-tile-body::-webkit-scrollbar { width: 6px; }
.dash-tile-body::-webkit-scrollbar-track { background: transparent; }
.dash-tile-body::-webkit-scrollbar-thumb { background: rgba(27, 107, 69, 0.28); border-radius: 8px; }
.dash-tile-body::-webkit-scrollbar-thumb:hover { background: rgba(27, 107, 69, 0.45); }
.dash-tile-body > .dash-mini:first-child { border-top: 0; padding-top: 0; }
.dash-tile-body > .dash-empty:first-child { padding-top: 4px; }
@media (max-width: 980px) {
  /* Single-column: keep square feel without a full-viewport-tall card. */
  .dash-sec-tile .dash-tile {
    aspect-ratio: 1 / 1;
    max-height: min(72vw, 420px);
    width: 100%;
  }
}
.dash-mini {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.dash-mini:first-of-type { border-top: 0; }
.dash-mini img {
  width: 46px; height: 46px; object-fit: cover; border-radius: 10px; background: var(--green-l); flex: none;
  color: transparent; font-size: 0; line-height: 0; overflow: hidden;
}
.dash-mini .grow { min-width: 0; flex: 1; }
.dash-mini .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-empty { color: var(--muted); padding: 18px 4px; }
@media (max-width: 980px) {
  .dash-tiles, .news-ribbon { grid-template-columns: minmax(0, 1fr); }
  .dash-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .news-kicker { justify-content: flex-start; padding-left: 16px; }
}
@media (min-width: 981px) and (max-width: 1280px) {
  #dash-main .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Oct 31 (David): Markets strip. Nov 6: on a new account it sits under Welcome. Public USDA reports; chips scroll sideways on phones. */
.dash-markets { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--white, #fff); padding: 4px 6px 8px 14px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.mk-head { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; }
.mk-kicker { font-weight: 650; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; color: var(--green-d); }
.mk-src { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.mk-gear { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.mk-gear:hover, .mk-gear.is-open { background: var(--green-l); color: var(--green-d); }
.mk-gear:focus-visible, .mk-toggle:focus-visible, .mk-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.mk-row { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 8px 4px 0; scrollbar-width: thin; min-width: 0; }
.mk-chip { flex: 1 0 196px; max-width: 280px; min-height: 44px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf6; color: var(--ink); text-decoration: none; box-sizing: border-box; min-width: 0; }
a.mk-chip:hover { border-color: var(--green); background: var(--green-l); }
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mk-name { font-size: .8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mk-spark { flex: none; width: 64px; height: 22px; color: var(--muted); }
.mk-spark.up { color: var(--green); }
.mk-spark.down { color: #b4532a; }
.mk-val { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: .78rem; min-width: 0; }
.mk-val b { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.mk-unit { color: var(--muted); font-size: .75rem; margin-left: -4px; }
.mk-chg { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.mk-chg.up { color: var(--green); }
.mk-chg.down { color: #b4532a; }
.mk-chg.flat { color: var(--muted); }
.mk-pct { font-weight: 500; }
.mk-meta { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-stale { color: #9a6a00; }
.mk-chip.is-stale { border-style: dashed; }
.mk-chip.is-off { background: transparent; }
.mk-na { color: var(--muted); font-size: .85rem; }
.mk-empty { margin: 0 0 6px; font-size: .85rem; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.mk-pick { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 8px 10px 0; }
.mk-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; max-width: 100%; }
.mk-toggle .mk-tsub { font-weight: 400; color: var(--muted); font-size: .75rem; }
.mk-toggle .mk-tick { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: var(--green-l); color: var(--green-d); flex: none; }
.mk-toggle.is-on { border-color: var(--green); background: var(--green-l); color: var(--green-d); }
.mk-toggle.is-on .mk-tick { background: var(--green); color: #fff; }
.mk-pick-note { flex-basis: 100%; margin: 0; font-size: .75rem; color: var(--muted); }
@media (max-width: 640px) {
  .dash-markets { padding: 2px 4px 8px 12px; }
  .mk-src { display: none; }
  .mk-head { justify-content: space-between; }
  .mk-chip { flex: 0 0 184px; }
  .mk-spark { width: 44px; }
  .mk-toggle .mk-tsub { display: none; }
}
/* Nov 6: map search cards under Markets. Photos keep their aspect (object-fit: cover) so pins stay round. */
.dash-map-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 18px;
  width: 100%;
  min-width: 0;
}
.dash-map-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1088 / 804;
  border-radius: 18px;
  overflow: hidden;
  min-width: 0;
  color: #fffcf7;
  text-decoration: none;
  background: #d7e3d6;
  isolation: isolate;
  container-type: inline-size;
}
.dash-map-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
.dash-map-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(15, 32, 24, 0) 42%, rgba(15, 32, 24, .28) 64%, rgba(15, 32, 24, .78) 100%);
}
.dash-map-copy {
  position: relative;
  z-index: 2;
  padding: 18px 18px 16px;
}
.dash-map-copy b {
  display: block;
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: #fff;
}
.dash-map-copy span {
  display: block;
  margin-top: 4px;
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255, 252, 247, .92);
}
.dash-map-card:hover::after,
.dash-map-card:focus-visible::after {
  background: linear-gradient(to bottom, rgba(15, 32, 24, .06) 28%, rgba(15, 32, 24, .4) 62%, rgba(15, 32, 24, .84) 100%);
}
.dash-map-card:focus-visible { outline: 2px solid #16503c; outline-offset: 3px; }
/* Nov 6 phone: one shorter row. Title and "Open map" each stay on one line so the three cards line up. */
@media (max-width: 980px) {
  .dash-map-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dash-map-card { aspect-ratio: 4 / 5; border-radius: 12px; }
  .dash-map-card::after { background: linear-gradient(to bottom, rgba(15, 32, 24, 0) 18%, rgba(15, 32, 24, .42) 55%, rgba(15, 32, 24, .9) 100%); }
  .dash-map-copy { padding: 8px 4px 6px; width: 100%; }
  .dash-map-copy b,
  .dash-map-copy span { display: block; white-space: nowrap; overflow: hidden; line-height: 1.15; }
  .dash-map-copy b { font-size: clamp(8.5px, 10.4cqw, 15px); letter-spacing: -.045em; }
  .dash-map-copy span { margin-top: 2px; font-size: clamp(8px, 8.4cqw, 12px); letter-spacing: -.02em; }
}


.podcast-strip { margin: 0 0 18px; min-width: 0; width: 100%; }
.podcast-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.podcast-head h3 { margin: 0; font-size: 1.05rem; }
.podcast-head a { color: var(--green); font-weight: 560; font-size: .85rem; }
.podcast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-width: 0; width: 100%; }
.podcast-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.podcast-card:hover { border-color: var(--green); }
.podcast-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #142018 center / cover no-repeat;
}
.podcast-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(20, 32, 24, .72);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}
.podcast-play:after {
  content: "";
  position: absolute;
  left: 17px;
  top: 13px;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #fff;
}
.podcast-dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(20,32,24,.82);
  color: #fff;
  font-size: .72rem;
  font-weight: 650;
  padding: 2px 6px;
  border-radius: 6px;
}
.podcast-card b {
  display: block;
  padding: 10px 12px 12px;
  font-size: .92rem;
  line-height: 1.3;
  color: var(--ink);
}
@media (max-width: 980px) {
  .podcast-grid { grid-template-columns: 1fr; }
}


.producers-map {
  height: 560px;
  min-height: 420px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #d5e4d4;
}
@media (max-width: 980px) {
  .producers-map { height: 420px; min-height: 320px; }
}


.admin-prod-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.admin-prod-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.admin-prod-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.admin-prod-cover {
  height: 72px;
  background: #d7eadc center / cover no-repeat;
}
.admin-prod-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 0 16px 16px;
  margin-top: -28px;
  position: relative;
}
.admin-prod-av {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: #d6dbd4;
  border: 3px solid #fff;
  flex: none;
}
.admin-prod-name {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 1.15rem;
  margin: 28px 0 2px;
}
.admin-prod-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
  color: var(--muted);
  font-size: .82rem;
}
.admin-prod-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 28px;
  flex: none;
}
.admin-cover-drop {
  width: 100%;
  max-width: 1200px;
  height: 250px;
  border: 2px dashed var(--green);
  border-radius: 0;
  margin: 0 0 16px;
  background: #e6f2ea center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .admin-cover-drop {
    height: 400px;
    border-radius: 12px;
  }
}
.admin-cover-label {
  background: #fffcf7;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 560;
}
.admin-avatar-btn {
  width: 88px;
  height: 88px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  background: #d6dbd4 center / cover no-repeat;
}
@media (max-width: 720px) {
  .admin-prod-body { flex-wrap: wrap; }
  .admin-prod-actions { margin-top: 8px; width: 100%; }
  .admin-prod-name { margin-top: 8px; }
}

.admin-prod-tile { cursor: default; }
.admin-prod-tile:hover { transform: translateY(-3px); }
.admin-prod-tile-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.admin-prod-tile-actions .btn { flex: 1; text-align: center; }

.dash-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  max-width: var(--hy-container-wide);
  width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - 64px);
  background: #f7f4ee;
  border-left: 1px solid #d8e0d6;
  border-right: 1px solid #d8e0d6;
  overflow-x: hidden;
}
.dash-aside {
  background: #fffcf7;
  border-right: 1px solid #d8e0d6;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dash-email {
  min-height: 1.35em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-col {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
}
#dash-main {
  padding: 28px 32px 48px;
  min-height: calc(100vh - 64px);
  max-width: 920px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
#dash-main.is-messages { padding: 0; max-width: none; align-self: stretch; overflow: hidden; }
.dash-signout {
  padding: 4px 32px 40px;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
html.hy-messages .dash-signout { display: none; }
/* Traffic opts out of the 920px account column so charts and the funnel fill the pane. */
@media (min-width: 981px) {
  #dash-main.is-traffic {
    max-width: none;
    width: 100%;
    margin: 0;
    align-self: stretch;
  }
}
.dash-mobile-top { display: none; align-self: stretch; width: 100%; }
.dash-mobile-top { display: none; }

.updates-page { max-width: var(--hy-container-narrow); width: 100%; margin-left: auto; margin-right: auto; }
/* Oct 22: a linked update (/updates?v=…) is highlighted; "See page" opens the page it changed. */
.updates-page .update-ver-hit { background: #fff8e1; box-shadow: 0 0 0 2px #f2c94c; border-radius: 10px; padding: 6px 10px; margin-left: -10px; margin-right: -10px; }
.updates-page .update-see { font-size: 0.85em; font-weight: 600; margin-left: 8px; }
.update-list { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.update-day h3 { margin: 0 0 4px; font-size: 1.05rem; }
.update-ver { padding: 12px 0; border-top: 1px solid #e6eee8; }
.update-ver-h { font-weight: 650; color: #16503c; font-size: .92rem; }
.update-ver ul { margin: 8px 0 0; padding-left: 18px; }
.update-ver li { margin: 6px 0; }

.mail-tools {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 16px 0;
}
.mail-tools .field { max-width: 360px; margin: 0; flex: 1; min-width: 180px; }
.mail-log { overflow: hidden; }
.mail-head {
  display: flex;
  gap: 12px;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7a6e;
  font-weight: 650;
  padding: 0 0 8px;
}
.mail-head span:nth-child(1), .mail-to { flex: 1.4; min-width: 0; }
.mail-head span:nth-child(2), .mail-subj { flex: 1.6; min-width: 0; }
.mail-head span:nth-child(3), .mail-status { width: 88px; flex: none; }
.mail-head span:nth-child(4), .mail-when { width: 160px; flex: none; }
.mail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #e6eee8;
}
.mail-to b { word-break: break-word; overflow-wrap: anywhere; }
.mail-status { font-weight: 650; }
.mail-status.is-sent { color: #1b6b45; }
.mail-status.is-error { color: #b4532a; }
.mail-status.is-skipped { color: #6b7a6e; }
.acct-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 16px 0;
}
.acct-tools input,
.acct-tools select {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font: inherit;
}
.acct-tools input { flex: 1; min-width: 0; }
.acct-tools select { flex: none; max-width: 180px; }
.acct-bulk {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 12px 14px;
  background: #f4f7f3;
  border-radius: 12px;
}
.acct-bulk p { margin: 0; color: #5d6b61; font-size: .92rem; flex: 1; min-width: 220px; }
.acct-bulk div { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-list { margin-top: 8px; }
.acct-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.3fr) minmax(140px, .8fr);
  gap: 6px 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid #e6eee8;
}
.acct-card img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  background: #d6dbd4;
  grid-row: span 2;
}
.acct-who b, .acct-meta b { display: block; }
.acct-who .sub, .acct-meta .sub { overflow-wrap: anywhere; }
.acct-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.acct-pill {
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e7eee8;
  color: #3d4d43;
}
.acct-pill.is-admin { background: #16503c; color: #fff; }
.acct-pill.is-live { background: #e5f4ea; color: #14663d; }
.acct-pill.is-off { background: #f3e6df; color: #8a4b32; }
.acct-pill.is-support { background: #e3edf7; color: #1f4f7a; }
.acct-pill.is-beta { background: #f4ecd9; color: #7a5a14; }
/* Oct 23: account roles page (admin-producers.js paintRoles). */
.roles-back { margin: 0 0 6px; }
.roles-title { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 4px; text-align: left; }
.roles-card { margin-top: 18px; border: 1px solid #e3e8e4; border-radius: 14px; background: #fff; max-width: 680px; }
.role-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; }
.role-row + .role-row { border-top: 1px solid #edf1ee; }
.role-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.role-text b { font-size: 1.02rem; }
.role-note { font-size: .8rem; color: #8a4b32; }
.role-switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative;
  width: 46px; height: 28px; margin: 0; border-radius: 999px; background: #cfd8d2; cursor: pointer; transition: background .15s;
}
.role-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s;
}
.role-switch:checked { background: #16503c; }
.role-switch:checked::after { transform: translateX(18px); }
.role-switch:disabled { opacity: .55; cursor: not-allowed; }
.role-switch:focus-visible { outline: 2px solid #16503c; outline-offset: 2px; }
.roles-hint { margin-top: 10px; }
.roles-log-title { margin: 26px 0 8px; font-size: 1.05rem; }
.roles-log { list-style: none; padding: 0; margin: 0; max-width: 680px; }
.roles-log li { padding: 8px 0; border-bottom: 1px solid #edf1ee; }
.acct-actions {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.acct-actions .btn { padding: 7px 12px; }

.acct-traffic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: .92rem;
  color: #3d4d43;
  flex: none;
}
.acct-traffic-toggle input { width: 16px; height: 16px; margin: 0; }
.acct-traffic-note { margin: -4px 0 12px; }
.acct-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
  border: 1px solid #e6eee8;
  border-radius: 12px;
  background: #fff;
}
.acct-traffic-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
  font-size: .92rem;
}
.acct-traffic-table th,
.acct-traffic-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf1ee;
  text-align: left;
  vertical-align: top;
}
.acct-traffic-table th {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5c6f62;
  background: #f4f7f3;
  white-space: nowrap;
}
.acct-traffic-table .acct-sort {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0;
  cursor: pointer;
}
.acct-traffic-table .acct-sort:hover { color: #16503c; }
.acct-traffic-who b { display: block; }
.acct-traffic-pages code {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: #eef3ef;
  font-size: .78rem;
}
.acct-traffic-row .acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.acct-traffic-row .acct-actions .btn { padding: 5px 10px; }
@media (max-width: 720px) {
  .acct-tools { flex-wrap: wrap; }
  .acct-tools select { max-width: none; width: 100%; }
  .acct-traffic-toggle { width: 100%; }
  .acct-card { grid-template-columns: 44px minmax(0, 1fr); }
  .acct-meta { grid-column: 2; }
  .acct-actions { grid-column: 1 / -1; }
}


html.hy-messages,
html.hy-messages body {
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
}
html.hy-messages body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
html.hy-messages .app-footer { display: none; }
html.hy-messages #app {
  flex: 1 1 0;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.hy-messages .dash-shell {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
}
html.hy-messages .dash-aside {
  min-height: 0;
  overflow: auto;
}
html.hy-messages .dash-col {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
html.hy-messages #dash-main.is-messages {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  max-width: none;
}
.inbox-shell {
  display: grid;
  /* Oct 23, 2026 (David 7:19 AM): chats column ~64px wider (was 280px) so more of each name shows. */
  grid-template-columns: clamp(280px, 30vw, 344px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-left: 1px solid #e6eee8;
}
html.hy-messages .inbox-shell {
  flex: 1;
  height: auto;
  min-height: 0;
}
/* Oct 22 (David 10:57 AM): "Find a producer" at the top of Messages; same rounded field as the map search. */
.msg-find { position: relative; flex: none; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e6eee8; border-left: 1px solid #e6eee8; z-index: 5; }
.msg-find-field {
  display: flex; align-items: center; gap: 8px; height: 46px; margin: 0; padding: 0 14px;
  max-width: 560px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #5c6b62;
}
.msg-find-field:focus-within { border-color: #1f5a3d; box-shadow: 0 0 0 3px rgba(31, 90, 61, 0.12); }
.msg-find-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--ink); }
.msg-find-list {
  position: absolute; left: 16px; top: calc(100% - 6px); width: min(560px, calc(100% - 32px)); max-height: 360px; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(20, 24, 20, 0.16); padding: 6px;
}
.msg-find-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
}
.msg-find-row:hover, .msg-find-row.is-on { background: #f3f7f2; }
.msg-find-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-find-row b, .msg-find-row .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-find-row .sub { color: #6b7a6e; font-size: 0.88rem; }
.msg-find-tag { flex: none; font-size: 0.8rem; color: #1f5a3d; font-weight: 600; }
.msg-find-empty { padding: 12px 10px; color: #6b7a6e; }
@media (max-width: 980px) {
  .msg-find { padding: 10px 12px; border-left: 0; }
  .msg-find.in-thread { display: none; }
  .msg-find-list { left: 12px; width: calc(100% - 24px); }
}
.inbox-list {
  border-right: 1px solid #e6eee8;
  display: flex;
  flex-direction: column;
  background: #fffcf7;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.inbox-list-head { padding: 16px 16px 10px; }
.inbox-list-head b { font-size: 1.2rem; }
.inbox-list-body { overflow: auto; flex: 1; min-height: 0; }
.inbox-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.inbox-top { padding: 12px 16px; border-bottom: 1px solid #e6eee8; display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.inbox-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.inbox-who .grow { min-width: 0; overflow: hidden; }
.inbox-who b, .inbox-who .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-back { display: none; }
.inbox-thread {
  flex: 1;
  overflow: auto;
  padding: 16px 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.inbox-foot {
  flex: none;
  padding: 10px 14px 12px;
  border-top: 1px solid #e6eee8;
  background: #fffcf7;
}
.inbox-compose { display: flex; gap: 8px; align-items: center; }
.inbox-compose input {
  flex: 1;
  border: 1px solid #d8e0d6;
  background: #f0f2f5;
  border-radius: 20px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  min-width: 0;
}
.inbox-compose .btn { border-radius: 20px; flex: none; }
/* Oct 22: combined Inbox (admin-only for now): pinned Herd Yard thread, All / Messages / Herd Yard filter, notice cards. */
.inbox-list[data-f] .inbox-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hy-filter select {
  -webkit-appearance: none; appearance: none;
  height: 36px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f3f28' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  font: inherit; font-size: 0.9rem; font-weight: 560; color: var(--green-d); cursor: pointer;
}
.hy-filter select:focus-visible { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(27, 107, 69, 0.15); }
.inbox-list[data-f='messages'] .hy-pin { display: none !important; }
.inbox-list[data-f='herdyard'] .chat-row:not(.hy-pin) { display: none !important; }
.inbox-list[data-f='herdyard'] .inbox-list-body > p.sub { display: none; }
.chat-row.hy-pin { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 10px 12px; background: #f3f7f2; border-bottom: 1px solid #e6eee8; }
.chat-row.hy-pin.on { background: #e7f0ea; }
.hy-pin-face { position: relative; flex: none; display: inline-flex; }
.hy-pin-name { font-size: 0.95rem; color: var(--green-d); }
.hy-pin-tag { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--green-l); color: var(--green); font-size: 0.7rem; font-weight: 600; vertical-align: 1px; }
/* Inbox unread dot only. Map pins are .hy-pin > .hy-dot (styled above and in the map sections); never reuse this name for pins. */
.ibx-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #d93025; box-shadow: 0 0 0 2px #fff; flex: none; }
.hy-pin-face .ibx-dot { position: absolute; top: 0; right: 0; }
.inbox-shell.is-hy .inbox-thread { background: var(--paper); gap: 10px; }
.inbox-shell.is-hy .inbox-top .notif-gear { margin-left: auto; flex: none; }
.hy-day { text-align: center; color: #8a968d; font-size: 0.75rem; margin: 8px 0 0; }
.hy-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; max-width: 620px; width: 100%; box-sizing: border-box; align-self: flex-start; box-shadow: 0 1px 2px rgba(20, 32, 24, 0.04); }
.hy-card.is-new { border-color: #b9d5c3; }
.hy-card.is-target { box-shadow: 0 0 0 3px rgba(27, 107, 69, 0.25); }
.hy-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hy-card-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--green-l); color: var(--green); display: inline-flex; align-items: center; justify-content: center; }
.hy-ico-clock { background: #fdf1dc; color: #9a5b00; }
.hy-card-title { flex: 1; min-width: 0; color: var(--ink); font-size: 0.98rem; line-height: 1.3; }
.hy-card-when { flex: none; font-size: 0.75rem; white-space: nowrap; }
.hy-card-body { margin: 8px 0 0 42px; color: #43524a; line-height: 1.4; }
.hy-card-foot { margin: 12px 0 0 42px; }
.hy-card-act { border-radius: 999px; padding: 8px 16px; font-size: 0.9rem; }
.hy-card-group { margin: 10px 0 0 42px; }
.hy-card-group summary { cursor: pointer; color: var(--green); font-weight: 600; font-size: 0.9rem; }
.hy-card-items { display: flex; flex-direction: column; margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.hy-card-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.hy-card-item:first-child { border-top: 0; }
.hy-card-item:hover { background: #f3f7f2; }
.hy-card-item:target, .hy-card-item.is-target { background: var(--green-l); }
.hy-support { margin: 2px 0; color: var(--muted); font-size: 0.9rem; text-align: center; }
.hy-support a { color: var(--green); font-weight: 600; }
/* Oct 23 (David): replies in the Herd Yard thread and the Support page. Theirs on the right, Herd Yard on the left. */
.hy-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; align-self: flex-start; }
.hy-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.hy-msg-bubble { padding: 9px 13px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); color: var(--ink); line-height: 1.38; min-width: 0; }
.hy-msg.is-hy .hy-msg-bubble { border-bottom-left-radius: 4px; }
.hy-msg.is-mine .hy-msg-bubble { background: var(--green); border-color: var(--green); color: #fff; border-bottom-right-radius: 4px; }
.hy-msg.is-new .hy-msg-bubble { border-color: #b9d5c3; box-shadow: 0 0 0 2px rgba(27, 107, 69, 0.12); }
.hy-msg.is-target .hy-msg-bubble { box-shadow: 0 0 0 3px rgba(27, 107, 69, 0.25); }
.hy-msg-name { display: block; font-size: 0.75rem; color: var(--green); margin-bottom: 2px; }
.hy-msg.is-mine .hy-msg-name { color: rgba(255, 255, 255, 0.85); }
.hy-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.hy-msg-when { font-size: 0.68rem; opacity: 0.75; margin-top: 4px; }
.hy-compose { align-items: flex-end; }
.hy-compose textarea { flex: 1; min-width: 0; resize: none; min-height: 42px; max-height: 160px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 21px; font: inherit; line-height: 1.35; background: var(--white); }
.hy-compose textarea:focus-visible { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(27, 107, 69, 0.15); }
.sup-shell .inbox-thread { background: var(--paper); gap: 10px; }
.sup-sub { margin: 6px 0 0; }
.sup-badge { display: inline-block; min-width: 18px; padding: 1px 7px; border-radius: 999px; background: #d93025; color: #fff; font-size: 0.7rem; font-weight: 650; text-align: center; line-height: 1.5; vertical-align: 1px; }
.inbox-list-head .sup-badge { margin-left: auto; }
.sup-row { text-decoration: none; color: inherit; display: flex; align-items: center; }
.sup-row.on { background: #e7f0ea; }
.sup-ranch { font-weight: 500; font-size: 0.8rem; }
.msg-link .ibx-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; }
/* Oct 22 (Inbox plan match): large "Inbox" page title upper left like the other account pages, then Find a producer,
   then the inbox as a rounded card. Chat rows get an unread count and an "about" line; Herd Yard gets a green brand
   avatar and a small grey dot inside the inbox (the header icon's red .ibx-dot is unchanged). */
.ibx-page-head { flex: none; padding: 28px 40px 12px; }
.ibx-page-head .page-title { margin: 0; }
#dash-main.is-messages .msg-find { padding: 0 40px 14px; background: transparent; border: 0; }
#dash-main.is-messages .msg-find-list { left: 40px; }
.inbox-list-head b { color: var(--ink); }
.hy-brand-av { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green); color: #fff; font-weight: 650; letter-spacing: .02em; line-height: 1; }
.inbox-list .ibx-dot, .inbox-thread .ibx-dot { background: var(--muted); width: 9px; height: 9px; }
.chat-row-mid { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-row-preview { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row.is-unread .chat-row-preview { color: var(--ink); font-weight: 600; }
.chat-row-count { flex: none; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--green); color: #fff; font-size: .7rem; font-weight: 650; text-align: center; line-height: 1.5; }
.chat-row-about { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Oct 23, 2026 (David 7:19 AM): chat list. Name on one line with an ellipsis and the time on the right; taller rows
   with a soft divider between them; clear space under the pinned Herd Yard row. Same on phones. */
.chat-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.chat-row-name, .chat-row-top .hy-pin-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; color: #0f3f28; }
.chat-row.is-filtered { display: none !important; }
.chat-ini { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #e7f0ea; color: #0f3f28; font-weight: 650; flex: none; line-height: 1; letter-spacing: .01em; }
.chat-faces { display: inline-flex; flex: none; }
.chat-faces > * { box-shadow: 0 0 0 2px #fff; }
.chat-faces > * + * { margin-left: -10px; }
.chat-msg-stack { max-width: 72%; min-width: 0; display: flex; flex-direction: column; }
.chat-msg-row.is-sent .chat-msg-stack { align-items: flex-end; }
.chat-sender { font-size: .75rem; font-weight: 650; color: #0f3f28; margin: 8px 4px 2px; }
.chat-sender.is-you { color: #3d5c4a; }
.chat-row-when { flex: none; font-size: .75rem; white-space: nowrap; }
.inbox-list-body .chat-row:not(.hy-pin) { position: relative; min-height: 78px; padding: 14px 14px; gap: 12px !important; }
.inbox-list-body .chat-row:not(.hy-pin) + .chat-row:not(.hy-pin)::before { content: ""; position: absolute; top: 0; left: 66px; right: 14px; border-top: 1px solid #edf1ec; }
.inbox-list-body .chat-row .chat-row-mid { margin-top: 3px; }
.inbox-list-body .chat-row .chat-row-about { margin-top: 2px; }
.chat-row.hy-pin { min-height: 72px; padding: 14px 14px; margin-bottom: 12px; border-bottom: 1px solid #dfe8e1; box-shadow: 0 1px 0 #eef3ef; }
@media (min-width: 981px) {
  #dash-main.is-messages .inbox-shell { margin: 0 40px 24px; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 32, 24, 0.04); }
}
@media (max-width: 980px) {
  .ibx-page-head { padding: 14px 16px 8px; }
  .ibx-page-head.in-thread { display: none; }
  #dash-main.is-messages .msg-find { padding: 0 16px 10px; }
  #dash-main.is-messages .msg-find-list { left: 16px; width: calc(100% - 32px); }
}
@media (max-width: 980px) {
  .hy-card { max-width: none; padding: 12px 14px; }
  .hy-card-body, .hy-card-foot, .hy-card-group { margin-left: 0; }
}

.leaflet-attribution-flag,
.leaflet-control-attribution svg { display: none !important; }

.hy-band { background: #eef4ef; }
.hy-band .section { padding-top: 56px; padding-bottom: 56px; }
.hy-band-title { text-align: center; margin-bottom: 28px; }
.hy-band-title h2 { margin-bottom: 8px; }
.hy-stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
.hy-stat-card {
  background: var(--white);
  border: 1px solid #cfe0d4;
  border-radius: 16px;
  padding: 22px 24px 18px;
  box-shadow: 0 8px 24px rgba(20,32,24,0.05);
}
.hy-stat-label { color: var(--muted); font-size: 0.92rem; margin: 0 0 4px; }
.hy-stat-value {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -0.03em;
}
.hy-stat-sub { font-size: 0.82rem; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 16px 0 8px; }
.hy-stat-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; padding: 3px 0; }
.hy-stat-row b { font-weight: 600; }
.hy-spark { width: 100%; height: 180px; display: block; }
.hy-build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: stretch;
  max-width: var(--hy-container);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.hy-build-copy h2 { margin-bottom: 10px; }
.hy-build-copy > p { font-size: 1.08rem; color: var(--ink-soft); line-height: 1.55; margin: 0 0 22px; }
.hy-check { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; }
.hy-check i {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: #d7eadc;
  color: var(--green);
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 700;
  font-size: 0.85rem;
}
.hy-check b { display: block; color: var(--ink); }
.hy-check span { color: var(--muted); font-size: 0.92rem; }
.hy-build-cta { margin-top: 22px; }
.hy-feature {
  background: linear-gradient(160deg, #e7f3ea 0%, #d4eadb 100%);
  border-radius: 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}
.hy-feature-banner {
  height: 220px;
  position: relative;
  overflow: hidden;
  background: #d7eadc center / cover no-repeat;
}
.hy-feature-banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .hy-feature-banner { height: 280px; }
}
.hy-feature-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px 32px 32px;
}
.hy-feature-kicker { color: var(--green); font-weight: 600; margin-bottom: 6px; }
.hy-feature h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}
.hy-feature-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 20px; text-align: center; }
.hy-feature-kpis b { display: block; color: var(--green); font-size: 1.45rem; }
.hy-feature-kpis span { font-size: 0.78rem; color: var(--muted); }
.hy-quote {
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 28px rgba(20,32,24,0.06);
}
.hy-quote-who { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.hy-quote-who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid #cfe0d4; }
.hy-quote-who b { display: block; }
.hy-quote-who span { color: var(--green); font-weight: 600; font-size: 0.9rem; }
.hy-quote blockquote { margin: 0; font-style: italic; color: var(--ink-soft); line-height: 1.55; }
.hy-trust-title { text-align: center; margin-bottom: 36px; }
.hy-trust-title h2 { margin-bottom: 8px; }
.hy-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.hy-t-card { display: flex; flex-direction: column; gap: 14px; }
.hy-t-card img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #d6dbd4;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(20,32,24,0.08);
}
.hy-t-card blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }
.hy-t-who b { display: block; }
.hy-t-who span { display: block; color: var(--muted); font-size: 0.9rem; }
.hy-t-who a { color: var(--green); font-weight: 600; }
.hy-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.hy-why-photo {
  width: 100%;
  height: 100%;
  max-height: 450px;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  background: #d7eadc;
}
.hy-why-copy p { font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px; }
.hy-why-copy ul { margin: 8px 0 18px 1.2em; padding: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; }
.hy-why-copy li { margin: 0 0 8px; }
.hy-why-copy .hy-why-cta { font-size: 1.08rem; color: var(--ink); }
.hy-why-copy .hy-why-note { font-size: 0.82rem; font-style: italic; color: var(--muted); }
@media (max-width: 980px) {
  .hy-stat-cards, .hy-build, .hy-feature-body, .hy-trust-grid, .hy-why { grid-template-columns: 1fr; }
  .hy-feature-body { padding: 20px 18px 22px; }
  .hy-feature-banner { height: 200px; }
}

.ranch-page { max-width: var(--hy-container-wide); width: 100%; margin: 0 auto; padding: 12px var(--hy-gutter) 72px; box-sizing: border-box; }
.ranch-body { margin-top: 16px; }
.ranch-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
}
.ranch-av {
  width: 112px;
  height: 112px;
  border-radius: 22px;
  object-fit: cover;
  border: 4px solid #fffcf7;
  background: #d6dbd4;
}
.ranch-kicker {
  color: #1b6b45;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  margin: 0 0 4px;
}
.ranch-head-copy h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin: 0 0 6px;
  letter-spacing: -.03em;
}
.ranch-head-meta { margin: 0; }
.ranch-head-assoc { margin: 8px 0 0; }
.ranch-head-actions { display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
.ranch-stats {
  display: flex;
  align-items: flex-start;
  margin-top: 14px;
  padding: 8px 10px;
}
.ranch-stat { flex: 1; min-width: 0; text-align: center; padding: 10px 4px; }
.ranch-stat-label {
  font-size: 0.68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7a6e;
  line-height: 1.2;
}
.ranch-stat-value {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
  margin-top: 2px;
}
.ranch-stat-extra {
  font-size: .75rem;
  color: var(--muted);
  min-height: 1.15em;
  line-height: 1.15;
  margin-top: 2px;
}
@media (max-width: 980px) {
  .ranch-page { padding: 8px 12px 56px; }
  .ranch-head {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .ranch-av { display: none; }
  .ranch-kicker { font-size: 0.8rem; letter-spacing: 0.02em; }
  .ranch-head-copy { min-width: 0; }
  .ranch-head-copy h1 { font-size: 1.7rem; margin: 0 0 4px; }
  .ranch-head-actions { min-width: 0; width: 100%; }
  .ranch-head-actions .btn { width: 100%; }
  .ranch-stats { padding: 10px 4px; }
  .ranch-stat { padding: 8px 2px; }
  .ranch-stat-value { font-size: 1.2rem; }
}

.listing-card { position: relative; }
.listing-card .listing-body { padding-right: 56px; }
.listing-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  flex: 1;
  min-height: 0;
}
.card-actions {
  position: absolute;
  right: 10px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.card-icon {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: rgba(255,252,247,0.96);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--green-d);
  box-shadow: 0 6px 16px rgba(20,32,24,0.12);
}
.card-icon.on { color: #c4922a; border-color: #e6d3a0; background: #fffaf0; }
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-l);
  color: var(--green-d);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.sold-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: #b4532a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.listing-card.is-sold { opacity: 0.88; }
.share-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
#quality-meter,
.quality-meter {
  position: static;
  float: none;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  margin: 16px 0 0;
  background: var(--green-l);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: none;
  transform: none;
}
/* Wizard keeps Listing strength on the last step, directly above Preview. */
.list-wizard:not(.list-flat) #quality-meter:not(.in-step) {
  display: none;
}
.quality-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
}
.quality-top span { color: var(--muted); font-size: 0.88rem; }
.quality-bar {
  height: 8px;
  background: #d8e0d6;
  border-radius: 999px;
  overflow: hidden;
}
.quality-bar i {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 999px;
}
.quality-tips {
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.quality-next { display: none; }
.similar-block { margin-top: 36px; }
.similar-block h3 { margin: 0 0 14px; font-size: 1.15rem; }
.hy-media-sheet {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(20, 32, 24, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.hy-media-sheet[hidden] { display: none !important; }
.hy-media-card {
  width: min(420px, 100%);
  background: #fffcf7;
  border-radius: 18px;
  padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(20, 32, 24, 0.28);
}
.hy-media-card b { font-size: 1.05rem; color: #142018; }
#hy-media-actions { display: flex; flex-direction: column; gap: 8px; }
.hy-media-card .btn { width: 100%; justify-content: center; }
.hy-cam {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.list-wizard .media-actions { display: none; }
.wiz-hide { display: none !important; pointer-events: none !important; }
.wiz-title { margin: 0 0 6px; font-size: 1.35rem; }
.wiz-step { margin-bottom: 8px; }
.wiz-desktop-submit { display: inline-flex; }
.list-kind-toggle {
  display: flex;
  gap: 0;
  margin: 14px 0 0;
  max-width: 520px;
  background: #e6eee8;
  border-radius: 12px;
  padding: 4px;
}
.list-kind-toggle button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #3a4a3e;
  font: inherit;
  font-weight: 650;
  font-size: 0.92rem;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.list-kind-toggle button.on {
  background: #16503c;
  color: #fff;
  box-shadow: 0 1px 4px rgba(20, 32, 24, 0.12);
}
.advanced-toggle { margin-top: 14px; }
#advanced-fields { margin-top: 16px; }
#advanced-fields[hidden], #advanced-toggle[hidden] { display: none !important; }
.lot-sheet { margin: 14px 0 8px; border: 1px solid #d8e0d6; border-radius: 14px; background: #fff; overflow: hidden; }
.lot-sheet-head { margin: 0; padding: 14px 16px 0; font-weight: 700; font-size: 1.12rem; }
.lot-sheet-sub { margin: 4px 0 0; padding: 0 16px 12px; color: #5c6b62; }
.lot-sheet table { width: 100%; border-collapse: collapse; }
.lot-sheet th, .lot-sheet td { text-align: left; padding: 10px 16px; border-top: 1px solid #e6eee8; vertical-align: top; font-weight: 500; }
.lot-sheet th { width: 42%; color: #3a4a3e; font-weight: 650; }
.hy-how-toggle {
  display: flex;
  gap: 0;
  max-width: 320px;
  background: #e6eee8;
  border-radius: 12px;
  padding: 4px;
  margin-top: 6px;
}
.hy-how-toggle button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #3a4a3e;
  font: inherit;
  font-weight: 650;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 9px;
  cursor: pointer;
}
.hy-how-toggle button.on {
  background: #16503c;
  color: #fff;
}
/* HY-104: Genetic Type labels (Full / Pure / Cross) stay on one line. */
.hy-how-toggle.hy-genetics-type {
  width: 100%;
  max-width: 100%;
}
.hy-how-toggle.hy-genetics-type button {
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}
.hy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.hy-chips button {
  border: 1px solid #c5d4c8;
  background: #fff;
  color: #3a4a3e;
  font: inherit;
  font-weight: 620;
  font-size: 0.9rem;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.hy-chips button.on {
  background: #16503c;
  border-color: #16503c;
  color: #fff;
}
.list-form-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-height: 34px;
  margin: 0 0 12px;
}
.list-form-head .wiz-top {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.wiz-mode-btn {
  flex: none;
  min-width: 124px;
  min-height: 40px;
  text-align: center;
  border: 1px solid #c5d4c8;
  background: #fff;
  color: #16503c;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.2;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.wiz-mode-btn:hover { background: #e6f2ea; }
.list-wizard:not(.list-flat) .list-form-head {
  position: sticky;
  top: 64px;
  z-index: 30;
  background: #fff;
  padding: 6px 0;
}
.list-wizard:not(.list-flat) .wiz-mode-btn {
  border-color: #16503c;
  background: #e6f2ea;
}
.list-wizard:not(.list-flat) .wiz-top { display: block; margin: 0; padding-right: 0; }
.list-wizard:not(.list-flat) .wiz-step { display: none; }
.list-wizard:not(.list-flat) .wiz-step.on { display: block; }
.list-wizard:not(.list-flat) .wiz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.wiz-step-error {
  flex: 1 0 100%;
  margin: 0;
  color: #8c2f2f;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.35;
}
.wiz-step-error[hidden] { display: none !important; }
.list-wizard:not(.list-flat) .wiz-nav .btn { flex: 1; }
.list-wizard:not(.list-flat) .wiz-nav #wiz-exit {
  flex: 1 0 100%;
  min-height: 44px;
  border: 1px solid #16503c;
  color: #16503c;
  background: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.list-wizard:not(.list-flat) .wiz-desktop-submit { display: none !important; }
.list-wizard.list-flat .wiz-step { display: block !important; }
.list-wizard.list-flat .wiz-step > .sub { display: none; }
.list-wizard.list-flat .wiz-title { font-size: 1.05rem; margin: 18px 0 8px; }
.list-wizard.list-flat .wiz-top { visibility: hidden; display: block !important; }
.list-wizard.list-flat .wiz-nav { display: none !important; }
/* HY-149: listing form is always flat (no Show Wizard chrome). list-flat still drives step layout. */
.list-wizard .wiz-mode-btn,
.list-wizard .wiz-top,
.list-wizard .wiz-nav,
.list-wizard .list-form-head { display: none !important; }

.owner-live {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: #e6f2ea;
  border-radius: 12px;
  color: #0f3f28;
}
.owner-live a { color: #1b6b45; font-weight: 650; }
.list-preview-banner {
  display: inline-block;
  background: #142018;
  color: #f4f1ea;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 8px;
  margin: 0 0 10px;
}
.list-preview-hero {
  margin: 12px 0 10px;
  border-radius: 18px;
  overflow: hidden;
  background: #142018;
  min-height: 220px;
}
.list-preview-hero img,
.list-preview-hero video {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.list-preview-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 16px;
}
.list-preview-thumbs img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  flex: none;
}
.list-preview-empty {
  color: #c5d0c8;
  text-align: center;
  padding: 64px 16px;
}
.list-preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 40px;
}
.start-banner { margin: 0 0 18px; }
/* Oct 23 (David 7:12 AM): "N drafts from texts" card: two text lines, See drafts on the right, centered. */
.draft-text-card { display: flex; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.draft-text-card .dtc-text { flex: 1 1 auto; min-width: 0; }
.draft-text-card .dtc-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-text-card .dtc-sub { margin: 3px 0 0; }
.draft-text-card .dtc-btn { flex: none; border-radius: 999px; white-space: nowrap; }
@media (max-width: 520px) {
  .draft-text-card { gap: 12px; padding: 12px 14px; }
  .draft-text-card .dtc-sub { font-size: .86rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .draft-text-card .dtc-btn { padding: 8px 14px; font-size: .88rem; width: auto; }
}
.start-form { margin-top: 16px; }
.start-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}
.help-page { max-width: var(--hy-container); width: 100%; margin-left: auto; margin-right: auto; }
.help-page h1 {
  font-family: var(--serif);
  font-weight: 560;
  letter-spacing: -0.03em;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin: 0 0 8px;
}
.help-page h2 { font-size: 1.15rem; margin: 8px 0 12px; }
.help-search { margin: 18px 0 22px; }
.help-search input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
}
.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.help-tile {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 16px;
  padding: 16px 16px 14px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.help-tile:hover { border-color: #9bb6a3; }
.help-tile b { display: block; font-size: 1.02rem; }
.help-tile span { display: block; margin-top: 6px; color: var(--muted); font-size: 0.92rem; }
.help-guide {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px 8px;
  margin: 0 0 14px;
  min-width: 0;
}
.help-guide h3 { margin: 0 0 8px; font-size: 1.05rem; }
/* Player width is the picture's aspect ratio times a large height cap.
   width:100% with max-height stretched the element past the file and
   object-fit:contain painted the dark background as pillarbox bars. */
.help-video-wrap {
  --help-ar: 1.777778;
  width: calc(min(82vh, 900px) * var(--help-ar));
  max-width: 100%;
  margin: 0 0 14px;
  background: #142018;
  border-radius: 14px;
  overflow: hidden;
}
.help-video-wrap.is-tall { --help-ar: 0.462085; }
.help-video-wrap .sub {
  margin: 0;
  padding: 8px 12px 10px;
  color: #c5d4c8;
  background: #142018;
}
.help-video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: var(--help-ar);
  background: #142018;
  object-fit: contain;
}
@media (max-width: 1039px) {
  .help-video-wrap.is-portrait,
  .help-video-wrap.is-tall {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1040px) {
  .help-guide.is-video-side {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(240px, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .help-guide.is-video-side > h3 { grid-column: 1 / -1; }
  .help-guide.is-video-side > .help-video-wrap {
    margin: 0 0 12px;
    justify-self: start;
  }
  .help-guide.is-video-side > .help-steps {
    min-width: 0;
    margin-top: 0;
  }
}
.help-steps { margin: 0 0 12px; padding-left: 20px; }
.help-steps li { margin: 0 0 8px; }
.help-faq details { margin-bottom: 8px; }
.help-contact { margin-top: 28px; }
@media (max-width: 720px) {
  .help-grid { grid-template-columns: 1fr; }
}

/* ===== HY-33 Herd Yard Map ===== */
.hy-map-root, .hy-map-host { position: relative; width: 100%; height: 100%; min-height: 280px; }
.hy-map-chrome { position: relative; width: 100%; height: 100%; min-height: inherit; }
.hy-map-canvas { position: absolute; inset: 0; border-radius: inherit; background: #dce8d8; }
.hy-map-canvas .leaflet-container,
.hy-map-canvas > div { width: 100% !important; height: 100% !important; }
.hy-map-filters {
  position: absolute; z-index: 6; top: 12px; left: 12px; right: 12px;
  display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none;
}
.hy-map-filter {
  pointer-events: auto;
  border: 0; border-radius: 999px; padding: 7px 12px;
  background: #fff; color: #1c241e; font: inherit; font-size: 0.82rem; font-weight: 600;
  box-shadow: 0 2px 10px rgba(20,24,20,.18); cursor: pointer;
}
.hy-map-filter.on { background: #16503c; color: #fff; }
.hy-map-search-area {
  position: absolute; z-index: 6; top: 58px; left: 50%; transform: translateX(-50%);
  border: 0; border-radius: 999px; padding: 10px 16px;
  background: #16503c; color: #fff; font: inherit; font-weight: 650;
  box-shadow: 0 4px 16px rgba(20,32,24,.28); cursor: pointer;
}
.hy-map-locate {
  position: absolute; z-index: 6; right: 12px; bottom: 24px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: #16503c; font-size: 1.2rem;
  box-shadow: 0 2px 12px rgba(20,24,20,.22); cursor: pointer;
}
.hy-map-setup {
  position: absolute; z-index: 5; left: 12px; bottom: 12px; right: 12px;
  max-width: 420px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.94); border: 1px solid #d8e0d6;
  font-size: 0.82rem; color: #3d4a40; box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.hy-map-setup code { font-size: 0.78rem; background: #eef4ef; padding: 1px 5px; border-radius: 4px; }
.hy-map-preview {
  position: absolute; z-index: 7; left: 10px; right: 10px; bottom: 12px;
  border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 12px 36px rgba(20,32,24,.28);
}
.hy-map-card {
  display: block; color: inherit; text-decoration: none; background: #fff;
  border-radius: 16px; overflow: hidden; width: 300px; max-width: 100%;
  box-sizing: border-box;
}
.hy-map-card img { width: 100%; height: 150px; object-fit: cover; display: block; background: #e7f2ea; }
.hy-map-listing-card { width: 300px; }
.hy-map-card-sheet { width: 100%; max-width: none; border-radius: 0; }
.hy-map-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 12px 0 14px;
}
.hy-map-card-head-text { min-width: 0; flex: 1; }
.hy-map-card-lot {
  font-weight: 750; font-size: 1.12rem; letter-spacing: -0.03em; line-height: 1.2; color: #142018;
}
.hy-map-card-ranch {
  display: inline-block; margin-top: 3px; font-size: 0.86rem; font-weight: 600;
  color: #16503c; text-decoration: none; line-height: 1.3;
}
a.hy-map-card-ranch:hover { text-decoration: underline; }
.hy-map-star {
  flex: none; width: 36px; height: 36px; font-size: 1.15rem; color: #16503c;
  border-color: #d5ddd6; background: #fff;
}
.hy-map-star.on { color: #c4922a; border-color: #e6d3a0; background: #fffaf0; }
.hy-map-card-media {
  position: relative; display: block; margin: 10px 12px 0;
  border-radius: 12px; overflow: hidden; background: #e7f2ea;
  aspect-ratio: 16 / 10; text-decoration: none; color: inherit;
}
.hy-map-card-media-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-color: #e7f2ea;
}
.hy-map-card-play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,32,24,.05), rgba(20,32,24,.28));
}
.hy-map-card-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #142018; z-index: 2;
}
.hy-map-card-play span {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20,32,24,.78); color: #fff; font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.28); padding-left: 2px;
}
.hy-map-card-media-tags {
  position: absolute; left: 8px; top: 8px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1;
}
.hy-map-card-body { padding: 12px 14px 14px; line-height: 1.35; }
.hy-map-card-price {
  font-weight: 750; font-size: 1.2rem; letter-spacing: -0.03em; color: #142018; margin: 0 0 6px;
}
.hy-map-card-facts { display: grid; gap: 2px; }
.hy-map-card-line { color: var(--ink-soft, #6b7a6e); font-size: 0.88rem; }
.hy-map-card-loc { margin-top: 2px; }
.hy-map-card-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 12px; min-height: 40px; padding: 0 14px; width: 100%; box-sizing: border-box;
  border-radius: 999px; background: #16503c; color: #fff !important;
  font-weight: 700; font-size: 0.92rem; text-decoration: none !important;
}
.hy-map-card-cta:hover { background: #124532; }
/* HY-74: compact is the same card, slightly tighter for a stacked list (cluster sheet). */
.hy-map-card-compact {
  width: 100%;
  border-radius: 0;
  border-bottom: 1px solid #e4ece6;
}
.hy-map-card-compact .hy-map-card-media { aspect-ratio: 16 / 9; margin: 8px 12px 0; }
.hy-map-card-compact .hy-map-card-head { padding: 10px 10px 0 12px; }
.hy-map-card-compact .hy-map-card-lot { font-size: 1.02rem; }
.hy-map-card-compact .hy-map-card-body { padding: 10px 12px 12px; }
.hy-map-card-compact .hy-map-card-price { font-size: 1.05rem; margin-bottom: 4px; }
.hy-map-card-compact .hy-map-card-cta { margin-top: 10px; min-height: 36px; }
.hy-map-card-producer .hy-map-card-media { margin: 0; border-radius: 0; aspect-ratio: 16 / 9; }
.hy-map-card-producer .hy-map-card-cta {
  background: transparent; color: #16503c !important; width: auto; min-height: 0; padding: 0;
  margin-top: 8px; display: inline;
}
.hy-map-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.hy-map-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: #fff;
}
.hy-map-tag-new { background: #1b6b45; }
.hy-map-tag-sold { background: #b4532a; }
.new-badge {
  position: absolute; left: 12px; bottom: 12px;
  background: #1b6b45; color: #fff; font-size: 0.72rem; font-weight: 650;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}
.listing-card .sold-badge { z-index: 2; }
.listing-card .new-badge { z-index: 2; }
.listing-card .sold-badge ~ .new-badge,
.listing-card .new-badge + .sold-badge { left: auto; right: 12px; }
.hy-dot.new { background: #1b6b45; }
.hy-dot.sold { background: #6b7280; color: #fff; }
.hy-dot.producer { background: #1e3a5f; }
.hy-dot.genetics { background: #6b3fa0; }
.hy-dot {
  display: grid; place-items: center; color: #fff; font-size: 0.62rem; font-weight: 800;
}
.hy-cluster { background: transparent; border: 0; }
.hy-cluster-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: #16503c; color: #fff; font-weight: 750; font-size: 0.85rem;
  display: grid; place-items: center; border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.hy-dot {
  width: 22px; height: 22px; border-radius: 50%; background: #1b6b45;
  border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.35);
  box-sizing: border-box; line-height: 1; white-space: nowrap;
}
.hy-dot.new,
.hy-dot.sold {
  width: auto; min-width: 34px; height: 20px; padding: 0 7px;
  border-radius: 999px; font-size: 0.58rem; letter-spacing: 0.02em;
  text-transform: lowercase;
}
.hy-dot.sold { min-width: 40px; }
.hy-dot.on { box-shadow: 0 0 0 3px #e8b84a, 0 1px 6px rgba(0,0,0,.35); }
.hy-dot.services { background: #0f766e; }
.hy-dot.beef { background: #c53030; }
.hy-map-status {
  position: absolute; z-index: 6; left: 12px; bottom: 12px;
  background: rgba(255,255,255,.94); color: #1c241e; border-radius: 999px;
  padding: 6px 12px; font-size: 0.8rem; font-weight: 650;
  box-shadow: 0 2px 10px rgba(20,24,20,.16); pointer-events: none;
}
.hy-map-page-filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center;
}
.hy-map-page-filters label {
  display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 650; color: #3d4a40;
}
.hy-map-page-filters select, .hy-map-page-filters input {
  font: inherit; font-weight: 500; border: 1px solid var(--line, #d5ddd6); border-radius: 999px;
  padding: 6px 10px; background: #fff; min-height: 36px;
}
.hy-map-page-filters input { width: 8.5rem; }
.hy-map-sheet { position: relative; max-height: min(52vh, 460px); display: flex; flex-direction: column; background: #fff; }
.hy-map-sheet-grab {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 8px 14px 0; flex: none;
}
.hy-map-sheet-pill {
  width: 42px; height: 4px; border-radius: 999px; background: #d5ddd6;
}
.hy-map-sheet-one .hy-map-sheet-x { top: 2px; right: 2px; }
.hy-map-sheet-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px 14px;
  border-bottom: 1px solid #e4ece6;
}
.hy-map-sheet-bar b { font-size: 0.98rem; letter-spacing: -0.02em; }
.hy-map-sheet-bar span { color: #5c6b62; font-size: 0.82rem; }
.hy-map-sheet-x {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; font-size: 1.5rem; line-height: 1;
  color: #1c241e; cursor: pointer;
}
.hy-map-sheet-ranch { display: block; padding: 6px 14px 8px; color: #16503c; font-weight: 700; text-decoration: none; }
.hy-map-sheet-list { overflow: auto; -webkit-overflow-scrolling: touch; }
.hy-map-sheet-list .hy-map-card { width: 100%; border-radius: 0; }
.hy-map-sheet-one .hy-map-card { width: 100%; }
.hy-map-sheet-one { max-height: min(58vh, 520px); overflow: auto; -webkit-overflow-scrolling: touch; }
.hy-map-has-preview .hy-map-locate { bottom: min(46vh, 280px); }

/* HY-61: hide Google InfoWindow close X — outside/map tap closes instead */
.gm-style .gm-style-iw button.gm-ui-hover-effect,
.gm-style-iw-chr button,
.hy-card-pop .leaflet-popup-close-button { display: none !important; }

/* HY-62: full listing overlay on map (desktop modal / mobile fullscreen) */
.hy-map-detail {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: stretch; justify-content: center;
  pointer-events: none;
}
.hy-map-detail[hidden] { display: none !important; }
.hy-map-detail-backdrop {
  position: absolute; inset: 0; border: 0; padding: 0; margin: 0;
  background: rgba(20, 32, 24, 0.42); cursor: pointer; pointer-events: auto;
}
.hy-map-detail-panel {
  position: relative; z-index: 1; pointer-events: auto;
  display: flex; flex-direction: column;
  width: min(560px, calc(100% - 48px));
  max-height: min(86vh, 820px);
  margin: auto;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(20, 32, 24, 0.35);
}
.hy-map-detail-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex: none; padding: 10px 14px; border-bottom: 1px solid #e4ece6; background: #fff;
}
.hy-map-detail-back {
  border: 0; background: transparent; color: #16503c; font: inherit; font-weight: 700;
  font-size: 0.95rem; cursor: pointer; padding: 8px 4px; min-height: 44px;
}
.hy-map-detail-open {
  color: #16503c; font-weight: 650; font-size: 0.9rem; text-decoration: none;
}
.hy-map-detail-body { overflow: auto; -webkit-overflow-scrolling: touch; flex: 1; background: #fff; }
.hy-map-detail-loading { padding: 28px 18px; color: #5c6b62; font-weight: 650; }
.hy-map-detail-hero {
  position: relative; aspect-ratio: 16 / 10;
  background-size: cover; background-position: center; background-color: #e7f2ea;
}
.hy-map-detail-thumbs {
  display: flex; gap: 6px; padding: 10px 12px 0; overflow-x: auto;
}
.hy-map-detail-thumb {
  width: 56px; height: 42px; flex: none; border-radius: 8px;
  background-size: cover; background-position: center; background-color: #e7f2ea;
  outline: 2px solid transparent;
}
.hy-map-detail-thumb.on { outline-color: #16503c; }
.hy-map-detail-copy { padding: 14px 16px 20px; }
.hy-map-detail-desc {
  margin: 12px 0 0; color: #3d4a40; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap;
}
.hy-map-detail-card.kind-beef .hy-map-card-price { color: #c53030; }
.hy-map-has-detail .hy-map-locate { display: none; }
@media (max-width: 980px) {
  .hy-map-detail { align-items: stretch; }
  .hy-map-detail-backdrop { background: #fff; }
  .hy-map-detail-panel {
    width: 100%; max-height: none; height: 100%; margin: 0; border-radius: 0;
    box-shadow: none;
  }
  .hy-map-detail-bar { position: sticky; top: 0; z-index: 2; }
}

@media (max-width: 980px) {
  .hy-cluster-dot { font-size: 13px; }
  .hy-map-preview { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .hy-map-page-filters label { font-size: 0.78rem; }
}


.hy-map-page { display: flex; flex-direction: column; min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); }
.hy-map-page-top { padding: 18px 22px 10px; border-bottom: 1px solid var(--line); background: var(--paper, #fff); }
.hy-map-page-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 12px; }
.hy-map-page-head h1 { margin: 0 0 4px; font-size: 1.55rem; letter-spacing: -0.03em; }
.hy-map-page-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.hy-map-page-cats .hy-map-filter { min-height: 36px; }
.hy-map-page-note {
  flex: none;
  margin: 0;
  padding: 8px 22px 12px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}
.hy-map-page-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hy-map-page-search .map-search-field {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; color: #5c6b62;
}
.hy-map-page-search .map-search-field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem;
}
.hy-map-page-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(300px, 380px) 1fr;
  height: calc(100vh - 248px); max-height: calc(100vh - 248px);
}
.hy-map-page-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--paper, #fff);
}
.hy-map-results-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.hy-map-results-head {
  flex: none;
  background: var(--paper, #fff);
  border-bottom: 1px solid var(--line);
}
.hy-map-page-stage { min-height: 0; position: relative; background: #d5e4d4; }
.hy-map-page-stage .hy-map-host { position: absolute; inset: 0; }
.hy-map-results-head { padding: 14px 16px 8px; color: var(--muted); font-size: 0.88rem; }
.hy-map-results-empty { padding: 28px 18px; color: var(--muted); }
/* HY-74: sidebar listings are the shared map card, sized to the column. */
.hy-map-page-side .hy-map-card,
.hy-map-card-sidebar {
  width: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line, #e4ece6);
  cursor: pointer;
}
.hy-map-page-side .hy-map-listing-card,
.hy-map-card-sidebar.hy-map-listing-card { width: 100%; }
.hy-map-card-sidebar:hover,
.hy-map-card-sidebar.on,
.hy-map-page-side .hy-map-card:hover,
.hy-map-page-side .hy-map-card.on { background: #eef5f0; }
.hy-map-card-sidebar.on,
.hy-map-page-side .hy-map-card.on { box-shadow: inset 3px 0 0 #16503c; }
.hy-map-page-side .hy-map-card.kind-beef.on,
.hy-map-card-sidebar.kind-beef.on { box-shadow: inset 3px 0 0 var(--beef, #c53030); }
.hy-map-mobile-toggle { display: flex; gap: 8px; }
.hy-map-typebar { display: none; }
.browse-mobile-toggle {
  display: none; gap: 8px; padding: 0 12px 8px;
}
.gm-style .hy-map-card { width: 300px; }
.gm-style .gm-style-iw-c { padding: 0 !important; border-radius: 16px !important; }
.gm-style .gm-style-iw-d { overflow: hidden !important; }
/* HY-95: Google's header row is empty once the close control is hidden, but
   .gm-style-iw-ch still pads 17px above the preview card. Lift that row out of
   the flow so the title starts at the top. A tap outside the card still closes it. */
.gm-style .gm-style-iw-chr {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  height: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}
.gm-style .gm-style-iw-ch { display: none !important; padding-top: 0 !important; }
.gm-style .gm-style-iw-chr button { pointer-events: auto; }
/* HY-95: pin preview only. Sidebar rows and the Cards grid keep their spacing. */
.gm-style .hy-map-listing-card .hy-map-card-head,
.hy-card-pop .hy-map-listing-card .hy-map-card-head,
.hy-map-preview .hy-map-listing-card .hy-map-card-head {
  padding: 4px 10px 0 12px;
}
.gm-style .hy-map-listing-card .hy-map-card-media,
.hy-card-pop .hy-map-listing-card .hy-map-card-media,
.hy-map-preview .hy-map-listing-card .hy-map-card-media {
  margin-top: 4px;
}
.hy-map-preview .hy-map-sheet-one .hy-map-sheet-grab {
  min-height: 0;
  padding: 5px 14px 1px;
}

@media (max-width: 980px) {
  .hy-map-page-body { display: block; height: auto; max-height: none; }
  .hy-map-page.is-mobile.mode-map .hy-map-page-side { display: none; }
  .hy-map-page.is-mobile.mode-list .hy-map-page-stage { display: none; }
  .hy-map-page.is-mobile.mode-map .hy-map-page-stage {
    height: calc(100vh - 210px); min-height: 420px; position: relative;
  }
  .hy-map-page.is-mobile.mode-map .hy-map-page-stage .hy-map-host { position: absolute; inset: 0; }
  .hy-map-page-top { padding: 12px 12px 8px; }
  .hy-map-filters { top: 10px; }
  .browse-mobile-toggle { display: flex; }
  .browse-layout.hy-zillow.mode-map .listings-col { display: none !important; }
  .browse-layout.hy-zillow.mode-list .map-frame { display: none !important; }
  .browse-layout.hy-zillow.mode-map .map-frame {
    height: calc(100vh - 168px); min-height: 460px; max-height: none; margin-bottom: 0;
  }
}

/* HY-76: header, filters, and map stay put while cards scroll. */
@media (min-width: 981px) {
  html:has(.browse-layout),
  html:has(.hy-map-page) { height: 100%; }
  html:has(.browse-layout) body,
  html:has(.hy-map-page) body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  html:has(.browse-layout) #app,
  html:has(.hy-map-page) #app {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  html:has(.browse-layout) .browse-layout,
  html:has(.hy-map-page) .hy-map-page {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
  }
  html:has(.hy-map-page) .hy-map-page-body {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0;
  }
  html:has(.browse-layout) .app-footer,
  html:has(.hy-map-page) .app-footer { display: none; }
}
@media (max-width: 980px) {
  html:has(.browse-layout.hy-zillow.mode-list) body,
  html:has(.hy-map-page.is-mobile.mode-list) body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  html:has(.browse-layout.hy-zillow.mode-list) #app,
  html:has(.hy-map-page.is-mobile.mode-list) #app {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  html:has(.browse-layout.hy-zillow.mode-list) .app-footer,
  html:has(.hy-map-page.is-mobile.mode-list) .app-footer { display: none; }
  html:has(.browse-layout.hy-zillow.mode-list) .browse-layout,
  html:has(.hy-map-page.is-mobile.mode-list) .hy-map-page {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
  }
  .browse-layout.hy-zillow.mode-list {
    display: flex;
    flex-direction: column;
  }
  .browse-layout.hy-zillow.mode-list .filters {
    flex: none;
    max-height: 38vh;
    overflow: auto;
  }
  .browse-layout.hy-zillow.mode-list .browse-main {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  .browse-layout.hy-zillow.mode-map .browse-mobile-toggle,
  .browse-layout.hy-zillow.mode-list .browse-mobile-toggle {
    flex: none;
    box-sizing: border-box;
    padding: 0 12px 8px;
  }
  .hy-map-page.is-mobile.mode-list .hy-map-page-top { flex: none; }
  .hy-map-page.is-mobile.mode-list .hy-map-page-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
  }
  .hy-map-page.is-mobile.mode-list .hy-map-page-side {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
}

/* Phone map: filters stay behind a toggle so the map fills the screen. */
@media (max-width: 540px) {
  html:has(.hy-map-page.is-mobile),
  html:has(.hy-map-page.is-mobile) body {
    height: 100%;
  }
  html:has(.hy-map-page.is-mobile) body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  html:has(.hy-map-page.is-mobile) #app {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  html:has(.hy-map-page.is-mobile) .app-footer { display: none; }
  .hy-map-page.is-mobile {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
  }
  .hy-map-page.is-mobile .hy-map-page-top {
    flex: none;
    padding: 10px 14px 12px;
  }
  .hy-map-page.is-mobile .hy-map-page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 0;
  }
  .hy-map-page.is-mobile .hy-map-page-intro { min-width: 0; }
  .hy-map-page.is-mobile .hy-map-page-intro h1 {
    margin: 0;
    font-size: 1.25rem;
  }
  .hy-map-page.is-mobile .hy-map-page-intro .sub {
    margin: 4px 0 0;
    font-size: 0.82rem;
    line-height: 1.35;
    max-width: none;
  }
  .hy-map-page.is-mobile .hy-map-page-cats { margin: 10px 0 0; }
  .hy-map-page.is-mobile .hy-map-page-note { padding: 8px 14px 10px; }
  .hy-map-page.is-mobile .hy-map-page-actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    width: 100%;
    align-items: center;
  }
  .hy-map-page.is-mobile .hy-map-mobile-toggle { display: contents; }
  .hy-map-page.is-mobile .hy-map-mobile-toggle .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 0.92rem;
  }
  .hy-map-page.is-mobile .hy-map-filters-toggle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
  }
  .hy-map-page.is-mobile .hy-map-phone-panel { display: none; }
  .hy-map-page.is-mobile.filters-open .hy-map-phone-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    max-height: none;
    overflow: visible;
  }
  .hy-map-page.is-mobile .hy-map-phone-panel .hy-map-page-search {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .hy-map-page.is-mobile .hy-map-phone-panel .map-search-field {
    flex: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .hy-map-page.is-mobile .hy-map-phone-panel .hy-map-page-search .btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
  }
  .hy-map-page.is-mobile .hy-map-phone-panel .hy-map-page-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    align-items: end;
    margin-top: 0;
    width: 100%;
  }
  .hy-map-page.is-mobile .hy-map-phone-panel .hy-map-page-filters label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    font-size: 0.75rem;
  }
  .hy-map-page.is-mobile .hy-map-phone-panel .hy-map-page-filters label:nth-child(3) {
    grid-column: 1 / -1;
  }
  .hy-map-page.is-mobile .hy-map-phone-panel .hy-map-page-filters select,
  .hy-map-page.is-mobile .hy-map-phone-panel .hy-map-page-filters input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .hy-map-page.is-mobile .hy-map-phone-panel .hy-map-typebar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .hy-map-page.is-mobile .hy-map-phone-panel .hy-map-filter {
    flex: none;
    padding: 8px 14px;
  }
  .hy-map-page.is-mobile .hy-map-filters { display: none; }
  .hy-map-page.is-mobile.mode-map .hy-map-page-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
  }
  .hy-map-page.is-mobile.mode-map .hy-map-page-stage {
    display: block;
    position: relative;
    flex: 1 1 auto;
    height: auto;
    min-height: 38vh;
    max-height: none;
    overflow: hidden;
  }
  html:has(.hy-map-page.is-mobile.filters-open),
  html:has(.hy-map-page.is-mobile.filters-open) body {
    height: auto;
    min-height: 100%;
  }
  html:has(.hy-map-page.is-mobile.filters-open) body {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }
  html:has(.hy-map-page.is-mobile.filters-open) #app,
  .hy-map-page.is-mobile.filters-open {
    overflow: visible;
    height: auto;
  }
  .hy-map-page.is-mobile.filters-open.mode-map .hy-map-page-body,
  .hy-map-page.is-mobile.filters-open.mode-map .hy-map-page-stage,
  .hy-map-page.is-mobile.filters-open.mode-list .hy-map-page-body {
    display: none;
  }
  .hy-map-page.is-mobile.mode-map .hy-map-page-stage .hy-map-host {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100%;
  }
  .hy-map-page.is-mobile.mode-map .hy-map-host,
  .hy-map-page.is-mobile.mode-map .hy-map-root,
  .hy-map-page.is-mobile.mode-map .hy-map-chrome {
    min-height: 0;
    height: 100%;
  }
}


/* HY-44 payment above Preview */
.wiz-pay { margin-top: 18px; margin-bottom: 8px; }
.list-wizard:not(.list-flat) .wiz-pay { display: none; }
.list-wizard:not(.list-flat) .wiz-pay.wiz-pay-show { display: block; }
.list-wizard.list-flat .wiz-pay { display: block; }

/* HY-43 breed type second row label */
.breed-sub-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #3a4a3e;
  margin: 0 0 4px;
  width: 100%;
}
#breed-2-row {
  flex-wrap: wrap;
  align-items: flex-start;
}
#breed-2-row .breed-pick { flex: 1; }

/* HY-45 photo management */
.photo-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 4px;
}
.photo-toolbar .btn { min-height: 36px; padding: 6px 12px; font-size: 0.9rem; }
#photo-preview.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
#photo-preview .shot {
  position: relative;
  width: 112px;
  border-radius: 12px;
  overflow: hidden;
  background: #dce8d8;
  flex: none;
  border: 2px solid transparent;
}
#photo-preview .shot.is-thumb {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.18);
}
#photo-preview .shot.is-selected {
  outline: 2px solid #1b5e20;
  outline-offset: 1px;
}
#photo-preview .shot-img-wrap {
  width: 100%;
  height: 84px;
  overflow: hidden;
  background: #dce8d8;
}
#photo-preview .shot-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#photo-preview .shot-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--green);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  z-index: 2;
}
#photo-preview .shot-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #fff;
  background: rgba(20, 32, 24, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  line-height: 1;
}
#photo-preview .shot.is-selected .shot-check {
  background: var(--green);
  border-color: #fff;
}
#photo-preview .shot-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: #f4f7f2;
}
#photo-preview .shot-actions button {
  border: 0;
  background: transparent;
  color: #1f2a22;
  font-size: 0.68rem;
  font-weight: 650;
  text-align: left;
  padding: 3px 4px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.2;
}
#photo-preview .shot-actions button:hover,
#photo-preview .shot-actions button:focus {
  background: #e4ecdf;
}
#photo-preview .shot-actions button.danger { color: #8b1e1e; }
@media (max-width: 980px) {
  #photo-preview .shot { width: 46%; max-width: 160px; }
  #photo-preview .shot-actions button { font-size: 0.72rem; padding: 5px 4px; }
}

.hy-upgrade-hero { max-width: 720px; margin: 0 0 28px; }
.hy-upgrade-hero .lead { font-size: 1.05rem; color: var(--muted); margin: 10px 0 0; }
.hy-upgrade-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 36px;
}
.hy-upgrade-col {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px 10px;
}
.hy-upgrade-col h3 { margin: 0 0 10px; font-size: 1.05rem; }
.hy-upgrade-col ul { margin: 0; padding: 0; list-style: none; }
.hy-upgrade-col li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: 0.94rem;
  color: var(--ink);
}
.hy-upgrade-col li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--gold);
}
.hy-upgrade-col-paid {
  background: var(--green-d);
  color: #f6f3ea;
  border-color: var(--green-d);
}
.hy-upgrade-col-paid li { color: #f6f3ea; }
.hy-upgrade-col-paid li::before { color: #f0d48a; }
.hy-upgrade-plans { margin: 8px 0 28px; }
.hy-upgrade-plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
}
.hy-upgrade-note { margin: 16px 0 0; }
.hy-upgrade-video {
  margin: 8px 0 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  background: var(--white);
  max-width: 720px;
}
.hy-upgrade-video summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--green-d);
}
.hy-upgrade-video[open] summary { margin-bottom: 10px; }
.hy-upgrade-clip {
  display: block;
  width: 100%;
  max-width: 640px;
  border-radius: 12px;
  background: #0b1f17;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .hy-upgrade-compare,
  .hy-upgrade-plan-grid { grid-template-columns: 1fr; }
}

/* Frozen Genetics Store (HY-36) — match home/browse chrome */
.gx-store { margin: 0 0 48px; }
.gx-store .hero.gx-hero {
  min-height: 0;
  place-items: center;
}
.gx-store .gx-hero .hero-inner {
  padding: 64px 24px 56px;
  max-width: 760px;
}
.gx-store .gx-hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
}
.gx-store .gx-hero .lead {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.gx-store .gx-hero .hero-search {
  margin-bottom: 0;
  width: min(560px, 100%);
}
.gx-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 28px 0;
}
.gx-panel-toggle { display: none; }
.gx-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 22px;
}
.gx-cat {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.gx-cat:hover { border-color: var(--green); transform: translateY(-2px); }
.gx-cat.on {
  border-color: var(--green);
  background: var(--green-l);
  box-shadow: 0 0 0 1px var(--green), var(--shadow);
}
.gx-cat-mark {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.gx-cat-mark-embryo { background: var(--green-d); }
.gx-cat-copy { min-width: 0; flex: 1; }
.gx-cat b { display: block; font-size: 1.05rem; color: var(--ink); }
.gx-cat small { display: block; color: var(--muted); margin-top: 2px; font-size: 0.86rem; }
.gx-cat-go { margin-left: auto; font-size: 1.15rem; color: var(--green); opacity: 0.85; }
.gx-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.gx-filters.filters {
  background: var(--white);
  border: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow);
  overflow: visible;
  height: auto;
  position: sticky;
  top: 84px;
}
.gx-filters-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.gx-filters-head h3 { margin: 0; font-size: 1rem; }
.gx-clear {
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
}
.gx-clear:hover { text-decoration: underline; }
.gx-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 7px 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
}
/* .field label is block-level; keep genetics options as one horizontal row. */
.field label.gx-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 7px 0;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-soft);
}
.gx-check input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #9bb3a1;
  border-radius: 5px;
  background: var(--white);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.gx-check input:checked {
  border-color: var(--green);
  background-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6 2.5 2.5L10 3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}
.gx-check input:focus-visible {
  outline: 3px solid rgba(22, 80, 60, 0.2);
  outline-offset: 2px;
}
.gx-check:hover input:not(:checked) { border-color: var(--green); }
.gx-trait-note { margin-top: 8px; font-size: 0.8rem; }
.gx-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gx-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.gx-sort select {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
  background: var(--white);
  color: var(--ink);
}
.gx-grid.cards-3 {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.gx-grid .listing-card,
.listing-card.gx-card {
  align-self: stretch;
  height: 100%;
}
.gx-grid .listing-card .listing-card-link,
.listing-card.gx-card .listing-card-link {
  height: 100%;
}
.gx-grid .listing-card .listing-body,
.listing-card.gx-card .listing-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 126px;
}
.gx-grid .listing-card .listing-title,
.listing-card.gx-card .listing-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-height: calc(1.3em * 2);
}
.gx-grid .listing-card .meta,
.listing-card.gx-card .meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.producer-mini-bottom {
  margin-top: 28px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.cards-3:has(.gx-card) {
  align-items: stretch;
}
.gx-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  background: var(--white);
  color: var(--ink);
}
.gx-empty .sub { margin: 8px 0 0; }
.gx-empty a { color: var(--green); text-decoration: underline; }
.genetics-detail { margin: 16px 0; }
.genetics-sheet { width: 100%; border-collapse: collapse; }
.genetics-sheet th {
  text-align: left;
  width: 38%;
  padding: 8px 10px 8px 0;
  color: var(--ink-soft);
  font-weight: 600;
  vertical-align: top;
}
.genetics-sheet td { padding: 8px 0; color: var(--ink); vertical-align: top; }
.genetics-disclaimer {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--green-l);
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}
.wiz-subtitle { margin: 8px 0 12px; font-size: 1rem; color: var(--ink); }
.genetics-form-block { margin-top: 8px; }
@media (max-width: 980px) {
  .gx-layout { grid-template-columns: 1fr; }
  .gx-cats { grid-template-columns: 1fr; }
  .gx-filters { position: static; }
  .gx-wrap { padding: 20px 16px 0; }
  .gx-store .gx-hero .hero-inner { padding: 48px 20px 40px; }
}


/* ===== HY-30 site-wide container system ===== */
.hy-container,
.page-shell,
.browse-page,
.home-wrap {
  width: var(--hy-container);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hy-gutter);
  padding-right: var(--hy-gutter);
  box-sizing: border-box;
}
.hy-container-wide { width: var(--hy-container-wide); max-width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--hy-gutter); padding-right: var(--hy-gutter); box-sizing: border-box; }
.hy-container-narrow { width: var(--hy-container-narrow); max-width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--hy-gutter); padding-right: var(--hy-gutter); box-sizing: border-box; }

/* Header/footer track the same container rhythm */
.app-header {
  padding-left: var(--hy-gutter);
  padding-right: var(--hy-gutter);
}
.app-footer .foot-cols,
.app-footer .foot-inner,
.foot-cols {
  max-width: var(--hy-container-wide) !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Fluid cards/grids on large desktops — keep mobile rules intact */
@media (min-width: 1280px) {
  :root {
    --hy-container: min(1360px, calc(100% - 2 * var(--hy-gutter)));
    --hy-container-cap: 1360px;
    --hy-container-wide: min(1520px, calc(100% - 2 * var(--hy-gutter)));
  }
}
@media (min-width: 1440px) {
  :root {
    --hy-container: min(1440px, calc(100% - 2 * var(--hy-gutter)));
    --hy-container-cap: 1440px;
    --hy-container-wide: min(1640px, calc(100% - 2 * var(--hy-gutter)));
  }
  .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-shell { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (min-width: 1920px) {
  :root {
    --hy-gutter: clamp(24px, 2.2vw, 48px);
    --hy-container: min(1600px, calc(100% - 2 * var(--hy-gutter)));
    --hy-container-cap: 1600px;
    --hy-container-wide: min(1800px, calc(100% - 2 * var(--hy-gutter)));
  }
  .cards-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 2560px) {
  :root {
    --hy-container: min(1760px, calc(100% - 2 * var(--hy-gutter)));
    --hy-container-cap: 1760px;
    --hy-container-wide: min(2000px, calc(100% - 2 * var(--hy-gutter)));
  }
}

/* Prevent page-level horizontal scroll from fixed children */
html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; }
.panel, .listing-card, .dash-tile, .form-grid { min-width: 0; }

/* Maps must keep filling their frame when containers widen */
.browse-layout .map-wrap,
.browse-layout .map-frame,
.hy-map-canvas,
.leaflet-container {
  width: 100%;
  min-width: 0;
}

/* Genetics / listing detail: widen without crushing the buy column */
@media (min-width: 1280px) {
  .detail {
    max-width: var(--hy-container-wide);
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  }
}

/* Dashboard tiles breathe on wide screens */
@media (min-width: 1440px) {
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1920px) {
  .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* HY-50 listing detail redesign */
.ld-page {
  display: block;
  max-width: var(--hy-container-wide);
  width: 100%;
  margin: 0 auto;
  padding: 20px var(--hy-gutter) 48px;
  box-sizing: border-box;
  grid-template-columns: unset;
  gap: unset;
}
.ld-page.detail {
  display: block;
  grid-template-columns: unset;
}
.ld-owner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(20, 32, 24, 0.04);
}
.ld-owner-live {
  color: var(--green-d);
  font-weight: 650;
  font-size: 0.92rem;
}
.ld-owner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ld-owner-btn { padding: 8px 14px; min-height: 40px; font-size: 0.88rem; }

.ld-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: 28px;
  align-items: start;
}
.ld-gallery { min-width: 0; }
.ld-hero-media.gallery,
.ld-page .gallery {
  border-radius: 18px;
  overflow: hidden;
  background: #d7e2d8;
  min-height: 420px;
  height: clamp(360px, 48vw, 520px);
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: 0 10px 28px rgba(20, 32, 24, 0.06);
}
.ld-empty-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 280px;
  color: var(--muted);
  font-weight: 600;
  background: linear-gradient(160deg, #e6f2ea, #ebe6db);
}
.ld-fs-btn,
.ld-nav {
  position: absolute;
  z-index: 3;
  border: 0;
  background: rgba(20, 32, 24, 0.55);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  backdrop-filter: blur(4px);
}
.ld-fs-btn { top: 12px; right: 12px; font-size: 1rem; }
.ld-nav.prev { left: 12px; top: 50%; transform: translateY(-50%); }
.ld-nav.next { right: 12px; top: 50%; transform: translateY(-50%); }
.ld-fs-btn:hover,
.ld-nav:hover { background: rgba(15, 63, 40, 0.85); }

.ld-thumbs.thumbs,
.ld-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.ld-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #d7e2d8 center / cover no-repeat;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.ld-thumb.on { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.ld-thumb.thumb-video {
  background: #142018;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ld-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  padding-left: 2px;
}
.ld-thumb-more {
  background: rgba(20, 32, 24, 0.78);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-info { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ld-identity {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow: 0 8px 24px rgba(20, 32, 24, 0.04);
}
.ld-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 6px;
}
.ld-save.on { color: #c4922a; }
.ld-save:hover { color: var(--green); }
.ld-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.2vw, 2.05rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ld-lot {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 650;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
}
.ld-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.ld-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--green-l);
  color: var(--green-d);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ld-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ld-sum-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 550;
}
.ld-sum-ico { opacity: 0.85; }

.ld-purchase {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 20px 18px;
  box-shadow: 0 10px 28px rgba(20, 32, 24, 0.06);
  position: sticky;
  top: 88px;
}
.ld-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.ld-price {
  font-size: clamp(1.7rem, 2.4vw, 2.15rem);
  font-weight: 750;
  color: var(--ink);
  line-height: 1.15;
}
.ld-listed { margin: 6px 0 0; }
.ld-status {
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ld-status.sold { background: #f3e2d8; color: #8a3a1a; }
.ld-status.expired { background: #ece8df; color: #5c6b62; }
.ld-edge { margin: 12px 0; color: var(--ink-soft); font-weight: 550; }
.ld-buy { margin-top: 14px; padding-top: 0; border-top: 0; }
/* Nov 5 (David 9:27 PM PT): listing buy box can lead with the main price; fee copy is muted fine print in cart/order.
   Nov 6: on a wide page the purchase card already shows that price under the PRICE label, so this
   second copy is hidden. Phones (max-width 980px) hide the label price and keep this one. */
@media (min-width: 981px) {
  .ld-purchase .ld-buy > .ld-buy-price { display: none; }
}
.ld-buy .ld-buy-price.ldz-price {
  margin: 0 0 12px;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 750;
  line-height: 1.15;
  color: var(--ink);
}
.ld-beef .ld-buy .ld-buy-price.ldz-price { color: var(--beef-d, #9b1c1c); }
.ld-buy .ld-buy-price .ldz-price-amt,
.ld-buy .ld-buy-price .hy-amt { font-weight: 750; }
.ld-buy .ld-buy-price .ldz-price-unit,
.ld-buy .ld-buy-price .hy-unit {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 4px;
}
.hy-pay-fineprint {
  margin: 10px 0 0;
  padding: 0;
  color: var(--ink-soft, #5b6b5f);
}
.hy-pay-fineprint .hy-pay-fine {
  margin: 0 0 6px;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink-soft, #5b6b5f);
}
.hy-pay-fineprint .hy-pay-fine:last-child { margin-bottom: 0; }
.hy-pay-fineprint .hy-pay-fine-split { font-variant-numeric: tabular-nums; }
.cart-info .hy-pay-fineprint { margin-top: 8px; }
.cart-invoice .hy-pay-fineprint { margin: 0 0 10px; }
.ld-invoice .hy-pay-fineprint,
.hy-buy-checkout .hy-pay-fineprint { margin: 8px 0 12px; }
/* Keep legacy .ld-fee available but unused on the buy box. */
.ld-fee { margin: 0 0 12px; font-size: 0.86rem; }
.ld-qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.ld-qty-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
}
.ld-qty-btn:hover { border-color: var(--green); background: var(--green-l); }
.ld-buy #buy-qty,
.bd-actions #buy-qty {
  width: 72px;
  height: 44px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 650;
}
.ld-avail { color: var(--muted); font-size: 0.9rem; font-weight: 550; margin-left: 4px; }
.ld-min { margin: 8px 0 0; }
.ld-buy .buy-total { margin-top: 10px; font-size: 0.9rem; color: var(--ink-soft); }
.ld-share-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.ld-share-btn { width: 100%; }

.ld-body {
  margin-top: 28px;
  display: grid;
  gap: 16px;
  max-width: 920px;
}
.ld-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 8px 22px rgba(20, 32, 24, 0.04);
}
.ld-h {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.ld-about .ld-h { margin-bottom: 10px; }
.ld-desc {
  white-space: pre-wrap;
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 1.02rem;
}
.ld-desc.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ld-readmore {
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}
.ld-about-tags { margin-top: 14px; }

.ld-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ld-grid-row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #e8eee8;
}
.ld-grid-row:last-child { border-bottom: 0; }
.ld-k {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 550;
}
.ld-v {
  color: var(--ink);
  font-weight: 650;
  font-size: 0.95rem;
  word-break: break-word;
}
.ld-v a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ld-reg-lead { margin: 0 0 10px; font-weight: 650; color: var(--ink-soft); }
.ld-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ld-docs li { display: flex; gap: 12px; align-items: flex-start; }
.ld-doc-ico { font-size: 1.2rem; line-height: 1.4; }
.ld-docs a { color: var(--green); font-weight: 650; }
.ld-disc { margin-top: 12px; }

.ld-loc-line { margin: 0 0 12px; font-weight: 650; display: flex; gap: 8px; align-items: center; }
.ld-map.listing-map,
.ld-page .listing-map {
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.ld-map-btn { display: inline-flex; }

.ld-seller-row { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
.ld-seller-av {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
  background: #d7e2d8;
  flex: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.ld-seller-name { font-size: 1.12rem; font-weight: 750; }
.ld-seller-rating { margin-top: 4px; color: var(--gold); font-size: 0.95rem; }
.ld-reviews { color: var(--muted); font-weight: 550; }
.ld-seller-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.ld-seller-actions .btn { min-height: 44px; }

.ld-related { margin-top: 8px; }
.ld-related .ld-h { margin-bottom: 14px; }

/* Accordion: desktop keeps content open; mobile collapses via mobile.css */
.ld-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  cursor: default;
  text-align: left;
}
.ld-acc-chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
  display: none;
}
.ld-acc.open .ld-acc-chev { transform: rotate(-135deg); }
.ld-acc-body { margin-top: 12px; }

.ld-sticky {
  display: none;
}
.ld-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(10, 16, 12, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
}
.ld-lightbox[hidden] { display: none !important; }
.ld-lb-stage {
  max-width: min(1100px, 100%);
  max-height: 90vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ld-lb-stage img,
.ld-lb-stage video,
.ld-lb-stage iframe {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 12px;
  object-fit: contain;
  background: #142018;
}
.ld-lb-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}
.ld-lightbox .ld-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.14);
}
.ld-lightbox .ld-nav.prev { left: 16px; }
.ld-lightbox .ld-nav.next { right: 16px; }

@media (min-width: 981px) {
  .ld-page.detail {
    display: block;
    grid-template-columns: unset;
    gap: unset;
    padding-left: var(--hy-gutter);
    padding-right: var(--hy-gutter);
  }
  /* Keep listing details visually open on desktop */
  .ld-acc .ld-acc-body { display: block !important; }
  .ld-acc-chev { display: none !important; }
}
@media (min-width: 1280px) {
  .ld-hero {
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.9fr);
    gap: 32px;
  }
}
@media (max-width: 1100px) and (min-width: 981px) {
  .ld-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
    gap: 20px;
  }
  .ld-hero-media.gallery,
  .ld-page .gallery {
    min-height: 340px;
    height: 380px;
  }
  .ld-grid { grid-template-columns: 1fr; }
}


/* HY-64 producer profile edit + public social */
.profile-edit { max-width: 920px; }
.profile-section { margin-bottom: 16px; }
.profile-section-title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: -.02em;
}
.profile-opt { font-weight: 500; color: #6b7a6e; }
.profile-avatar-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
}
.profile-avatar-row #avatar-btn {
  width: 88px;
  height: 88px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-size: 1.8rem;
  color: #6b7a6e;
  background: #e6e2d8 center/cover no-repeat;
  flex: none;
}
.profile-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  align-items: center;
}
.social-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
  margin: 2px 0 14px;
  padding-top: 6px;
}
.social-logo {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ink-soft);
  font: inherit;
}
.social-logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.social-logo-mark svg {
  width: 24px;
  height: 24px;
  display: block;
}
.social-logo-name {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--muted);
  min-height: 2.3em;
}
.social-logo[aria-pressed="true"] .social-logo-name {
  color: var(--green-d);
  font-weight: 700;
}
.social-logo[aria-pressed="true"] .social-logo-mark {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green);
}
.social-logo-check {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  border: 2px solid #fff;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  font-weight: 700;
}
.social-logo[aria-pressed="true"] .social-logo-check { display: block; }
.social-logo:hover .social-logo-mark { transform: translateY(-1px); }
.social-logo:focus-visible { outline: none; }
.social-logo:focus-visible .social-logo-mark {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green-d);
}
.social-logo.web .social-logo-mark { background: #1b6b45; }
.social-logo.fb .social-logo-mark { background: #1877f2; }
.social-logo.ig .social-logo-mark {
  background: radial-gradient(circle at 30% 120%, #feda75 0%, #fa7e1e 28%, #d62976 58%, #962fbf 78%, #4f5bd5 100%);
}
.social-logo.yt .social-logo-mark { background: #ff0033; }
.social-logo.tt .social-logo-mark { background: #111; }
.social-logo.x .social-logo-mark { background: #111; }
.social-logo.sp .social-logo-mark { background: #1db954; }
.social-logo.ap .social-logo-mark { background: #872ec4; }
.social-logo.ot .social-logo-mark { background: #5c6f62; }
.social-picker-hint { margin: 0; }
.social-handles { max-width: 520px; margin-top: 4px; }
.social-handle[hidden] { display: none; }
.social-handle label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
}
.ranch-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.ranch-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: #eef6f0;
  color: #0f3f28;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 650;
  border: 1px solid #d5e5db;
}
.ranch-social-link:hover { background: #e0efe6; }
.ranch-social-link.fb { background: #eef2fb; border-color: #d5dff3; color: #1b3f8b; }
.ranch-social-link.ig { background: #f9eef5; border-color: #efd5e4; color: #8a2a5b; }
.ranch-social-link.yt { background: #fdeeee; border-color: #f0d0d0; color: #a11818; }
.ranch-social-link.tt { background: #f2f2f2; border-color: #ddd; color: #111; }
.ranch-social-link.x { background: #111; border-color: #111; color: #fff; }
.ranch-social-link.sp { background: #e8f8ef; border-color: #c6ebd5; color: #0f7a3a; }
.ranch-social-link.ap { background: #f7eef8; border-color: #e5d0ea; color: #6b2a7a; }
.ranch-info-grid { align-items: start; }
@media (max-width: 980px) {
  .ranch-av {
    display: block !important;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    margin-bottom: 4px;
  }
  .ranch-head {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
  .ranch-head-actions { grid-column: 1 / -1; }
  .ranch-social-link { flex: 1 1 calc(50% - 10px); }
  .profile-actions .btn { flex: 1 1 auto; }
}

/* ===== HY-70 beef visual identity ===== */
/* Cattle keeps existing green; beef listings use brand red across map cards, listing cards, detail, search. */
.hy-map-card.kind-beef .hy-map-card-ranch { color: var(--beef); }
.hy-map-card.kind-beef .hy-map-star { color: var(--beef); }
.hy-map-card.kind-beef .hy-map-card-cta {
  background: var(--beef);
  color: #fff !important;
}
.hy-map-card.kind-beef .hy-map-card-cta:hover { background: var(--beef-d); }
.hy-map-card.kind-beef.hy-map-card-producer .hy-map-card-cta {
  background: transparent;
  color: var(--beef) !important;
}
.hy-map-card.kind-beef .hy-map-card-lot { color: var(--beef-d); }
.hy-map-card.kind-beef .hy-map-card-price { color: var(--beef-d); }
.map-pop.kind-beef .map-title { color: var(--beef-d); }
.map-pop.kind-beef .map-price { color: var(--beef); }

.listing-card.beef-card .price { color: var(--beef); }
.listing-card.beef-card .badge {
  color: var(--beef-d);
  background: rgba(253, 232, 232, 0.96);
}
.listing-card.beef-card .card-icon.on {
  color: var(--beef);
  border-color: #f0c4c4;
  background: #fff5f5;
}

.ld-page.ld-beef .ld-tag {
  background: var(--beef-l);
  color: var(--beef-d);
}
.ld-page.ld-beef .ld-price { color: var(--beef-d); }
.ld-page.ld-beef .btn-primary {
  background: var(--beef);
  color: #fff;
}
.ld-page.ld-beef .btn-primary:hover { background: var(--beef-d); }
.ld-page.ld-beef .ld-v a,
.ld-page.ld-beef .ld-docs a,
.ld-page.ld-beef .ld-seller-name,
.ld-page.ld-beef .ld-readmore { color: var(--beef); }
.ld-page.ld-beef .ld-qty-btn:hover {
  border-color: var(--beef);
  background: var(--beef-l);
}
.ld-page.ld-beef .ld-save:hover { color: var(--beef); }
.ld-page.ld-beef .ld-sticky .btn-primary {
  background: var(--beef);
}
.ld-page.ld-beef .ld-sticky .btn-primary:hover { background: var(--beef-d); }

.search-hit.kind-beef b { color: var(--beef-d); }
.search-hit.kind-beef span { color: var(--beef); }

/* Oct 22 (David 7:18 AM): the listing form's category tabs use the standard on-color for Beef too (no beef tint in the form). */
.list-kind-toggle:not(#list-kind-toggle) button[data-kind="beef"].on {
  background: var(--beef);
  color: #fff;
}

.traffic-dash h2 { margin: 0 0 4px; }
.traffic-dash h3 { margin: 22px 0 10px; font-size: 16px; }
.traffic-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.traffic-range { display: flex; gap: 8px; }
.traffic-range-btn.on, .traffic-quiet-btn.on { background: var(--green-d); color: #fff; border-color: var(--green-d); }
.traffic-quiet-range { margin: 8px 0 4px; }
.traffic-quiet.is-quiet .traffic-account-time b { color: #8a5a1f; }
.traffic-active-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.traffic-active-chip { background: var(--green-l); border-radius: 99px; padding: 6px 10px; font-size: 13px; }
.traffic-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
/* Paid accounts and the customer journey split the row evenly, and the shorter panel stretches to the taller one. */
.traffic-upper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  align-items: stretch;
}
.traffic-paid-panel, .traffic-funnel {
  min-width: 0;
  height: 100%;
  align-self: stretch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 12px;
}
.traffic-paid-panel h3, .traffic-funnel h3 { margin: 0 0 6px; }
.traffic-paid-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.traffic-paid-counts div { background: #fffcf7; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.traffic-paid-counts b { display: block; font-size: 22px; color: var(--green-d); line-height: 1.1; }
.traffic-paid-counts span { color: var(--muted); font-size: 12px; }
.traffic-paid-range { margin: 4px 0 8px; }
.traffic-paid-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; }
.traffic-paid-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.traffic-paid-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.traffic-paid-tag {
  display: inline-block;
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 650;
  background: var(--green-l);
  color: var(--green-d);
}
.traffic-paid-tag.is-sub { background: var(--green-d); color: #fff; }
.traffic-paid-tag.is-client { background: #fff; color: var(--green-d); box-shadow: inset 0 0 0 1px var(--gold); }
.hy-funnel { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hy-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
  background: #fffcf7;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px 10px;
  color: var(--ink);
}
.hy-step-n { font-weight: 700; color: var(--green); }
.hy-step-body b, .hy-step-count b { display: block; }
.hy-step-body span, .hy-step-count span { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }
.hy-step-count { text-align: right; }
.hy-step-count b { color: var(--green-d); font-size: 16px; }
.hy-step.is-empty { background: transparent; border-style: dashed; }
.hy-step.is-empty .hy-step-count b { color: var(--muted); font-size: 13px; font-weight: 650; }
.hy-step.is-mark {
  background: var(--green-d);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 2px var(--gold);
  color: #fff;
}
.hy-step.is-mark .hy-step-n,
.hy-step.is-mark .hy-step-body span,
.hy-step.is-mark .hy-step-count span,
.hy-step.is-mark .hy-step-count b { color: #fff; }
.hy-step.is-mark.is-empty .hy-step-count b { color: var(--gold); }
.hy-paid-split { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 4px; }
.hy-paid-split span {
  flex: 1;
  background: var(--green-l);
  color: var(--green-d);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 650;
}
.hy-paid-split b { font-size: 14px; }
.hy-stuck { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.hy-stuck h4 { margin: 0 0 6px; font-size: 13px; color: var(--green-d); }
.hy-stuck ul { margin: 0; padding-left: 16px; color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.hy-stuck li { margin: 4px 0; }
.traffic-funnel { position: sticky; top: 12px; }
/* Full-width site flow, directly under the paid and journey columns. */
.traffic-flow-visual {
  margin-top: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 12px;
}
.traffic-flow-visual h3 { margin: 0 0 6px; }
.traffic-flow-visual-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.traffic-flow-visual-head .btn { white-space: nowrap; flex: none; }
.traffic-flow-canvas {
  margin-top: 12px;
  overflow-x: auto;
  background: #fffcf7;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.traffic-flow-canvas svg { display: block; height: auto; max-width: none; }
.traffic-flow-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.traffic-flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  background: #fffcf7;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--ink);
}
.traffic-flow-chip .traffic-hop {
  display: inline-block;
  max-width: 200px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-weight: 650;
}
.traffic-flow-chip b { color: var(--green-d); font-size: 13px; }
.traffic-flow-routes { margin-top: 8px; }
.traffic-flow-routes .traffic-journey { padding: 4px 0; }
@media (max-width: 800px) {
  .traffic-flow-visual-head { align-items: stretch; }
  .traffic-flow-visual-head .btn { align-self: flex-start; }
}
.traffic-stat { background: var(--green-l); border-radius: 14px; padding: 14px 16px; }
.traffic-stat b { display: block; font-size: 22px; color: var(--green-d); line-height: 1.2; }
.traffic-stat span { color: var(--muted); font-size: 13px; }
.traffic-list { display: flex; flex-direction: column; gap: 4px; }
.traffic-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.traffic-row-compact { grid-template-columns: minmax(0, 1fr) auto; }
.traffic-row-main { min-width: 0; }
.traffic-row-main b, .traffic-hop { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-row-main span { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-row-meta { text-align: right; min-width: 64px; }
.traffic-row-meta b { display: block; }
.traffic-row-meta span, .traffic-flow-meta { color: var(--muted); font-size: 12px; }
.traffic-bar { height: 8px; background: #e4ece6; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.traffic-bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.traffic-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.traffic-flow .traffic-bar { grid-column: 1 / -1; margin-top: 0; }
.traffic-arrow { color: var(--green); font-weight: 700; }
.traffic-steps { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); }
.traffic-steps li { margin: 6px 0; }
.traffic-foot, .traffic-note { margin-top: 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.traffic-error { background: #fff4f0; color: #7a2e1f; border-radius: 10px; padding: 10px 12px; }
.traffic-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.traffic-legacy { list-style: none; margin: 0; padding: 0; }
.traffic-legacy li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.traffic-foot code { font-size: 12px; }
.traffic-account-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.traffic-account-filter input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font: inherit;
  min-width: 200px;
  flex: 1;
}
.traffic-sources { margin-top: 4px; }
.traffic-source { border-bottom: 1px solid var(--line); }
.traffic-source-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 2px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 650;
}
.traffic-source-summary::-webkit-details-marker { display: none; }
.traffic-source-summary::marker { content: ""; }
.traffic-source-summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 8px;
}
.traffic-source-caret {
  display: inline-block;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin: 0 2px 0 4px;
  border: solid var(--green-d);
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  flex: none;
}
.traffic-source[open] > .traffic-source-summary .traffic-source-caret {
  transform: rotate(45deg);
  margin-top: -3px;
}
.traffic-source-label { min-width: 0; }
.traffic-source-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.traffic-source-body { padding: 0 0 6px 22px; }
.traffic-source-body .traffic-account:last-child { border-bottom: 0; padding-bottom: 8px; }
.traffic-account { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.traffic-account-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.traffic-account-who b { display: block; word-break: break-word; }
.traffic-account-who span, .traffic-account-time span { display: block; color: var(--muted); font-size: 13px; }
.traffic-account-time { text-align: right; }
.traffic-account-time b { display: block; color: var(--green-d); font-size: 18px; }
.traffic-ends { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0; color: var(--ink-soft); font-size: 14px; }
.traffic-ends i { font-style: normal; color: var(--muted); margin-right: 4px; }
.traffic-journey { padding: 8px 0; border-bottom: 1px solid var(--line); }
.traffic-journey-track { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 8px 0; }
.traffic-journey-track .traffic-hop, .traffic-journey .traffic-hop {
  display: inline-block;
  max-width: 240px;
  background: var(--green-l);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.traffic-subhead { margin: 10px 0 0; font-size: 13px; color: var(--muted); font-weight: 650; }
.traffic-account .btn { margin-top: 8px; }
@media (max-width: 900px) {
  .traffic-upper { grid-template-columns: 1fr; }
  .traffic-funnel { order: -1; position: static; }
}
@media (max-width: 800px) {
  .traffic-stats, .traffic-split { grid-template-columns: 1fr 1fr; }
  .traffic-row { grid-template-columns: minmax(0, 1fr) auto; }
  .traffic-row-meta:last-child { grid-column: 2; }
  .traffic-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .traffic-flow-meta { grid-column: 1 / -1; }
  .traffic-account-head { flex-direction: column; }
  .traffic-account-time { text-align: left; }
}
@media (max-width: 560px) {
  .traffic-stats { grid-template-columns: 1fr 1fr; }
}

/* HY-75: full listing overlay above Map + Cards (desktop). Mobile keeps /listing. */
html.hy-listing-overlay-open,
body.hy-listing-overlay-open { overflow: hidden; }
body.hy-listing-overlay-open .hy-map-root,
body.hy-listing-overlay-open .gm-style,
body.hy-listing-overlay-open .leaflet-container { pointer-events: none !important; }
/* Oct 19: the rule above is for the browse map behind the overlay. It also caught the listing's own Pickup &
   Delivery map, so the expanded map was frozen. Expanded, that map takes every gesture; the inline preview
   stays as before so a finger on it still scrolls the page. */
body.hy-listing-overlay-open .ldz-map-wrap.is-expanded .leaflet-container,
body.hy-listing-overlay-open .ldz-map-wrap.is-expanded .gm-style,
body.hy-listing-overlay-open .ldz-map-wrap.is-expanded #listing-map { pointer-events: auto !important; }
.hy-listing-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  box-sizing: border-box;
}
.hy-listing-overlay[hidden] { display: none !important; }
.hy-listing-overlay-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(20, 32, 24, 0.46);
  cursor: pointer;
}
.hy-listing-overlay-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1140px, 88vw);
  height: min(920px, 90vh);
  max-height: 90vh;
  background: var(--paper, #fffcf7);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(20, 32, 24, 0.38);
}
.hy-listing-overlay-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid #e4ece6;
}
.hy-listing-overlay-x {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 999px;
  background: #f4f7f2;
  color: #142018;
  font: inherit;
  font-weight: 750;
  font-size: 0.95rem;
  cursor: pointer;
}
.hy-listing-overlay-x span {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 500;
}
.hy-listing-overlay-x:hover,
.hy-listing-overlay-x:focus-visible { background: #e7f2ea; }
.hy-listing-overlay-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--paper, #fffcf7);
}
.hy-listing-overlay-loading {
  padding: 48px 24px;
  color: #5c6b62;
  font-weight: 650;
}
.hy-listing-overlay .ld-page {
  max-width: none;
  padding: 16px 20px 40px;
}
.hy-listing-overlay .ld-page.detail {
  padding-left: 20px;
  padding-right: 20px;
}
.hy-listing-overlay .ld-hero-media.gallery,
.hy-listing-overlay .ld-page .gallery {
  min-height: 280px;
  height: min(420px, 46vh);
}

/* HY-90: desktop arrows walk the current filtered set. */
.hy-listing-move {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
}
.hy-listing-overlay-bar:has(.hy-listing-move) {
  justify-content: space-between;
}
.hy-listing-overlay-bar .hy-listing-move {
  flex: 1;
  margin: 0;
  justify-content: flex-start;
  gap: 8px;
}
.hy-listing-arrow {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line, #d8e0d6);
  background: #fff;
  color: var(--green-d, #0f3f28);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.hy-listing-arrow:hover:not(:disabled),
.hy-listing-arrow:focus-visible:not(:disabled) {
  background: var(--green-l, #e7f2ea);
}
.hy-listing-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.hy-listing-move-count,
.hy-listing-place {
  color: var(--ink-soft, #3a4a3e);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.hy-listing-move-count { min-width: 4.5rem; text-align: center; }
.hy-listing-place { display: none; margin: 0 0 8px; }
.hy-deck-bar { display: none; }



/* HY-92 genetics listing — volume tiers + storage */
.volume-tiers { margin-top: 4px; }
.volume-tier .field { margin: 0; }
.volume-tier .btn { margin-bottom: 2px; }
.ld-volume { margin: 10px 0 12px; padding: 10px 12px; background: var(--green-l); border-radius: 12px; }
.ld-volume-list { margin: 6px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 0.92rem; }
.ld-volume-list li { margin: 2px 0; }
#genetics-storage-block .sub,
#genetics-volume-block .sub { margin-top: 0; }

/* HY-112: desktop puts Breed 1 and Breed 2 side by side on Cross (all listing types).
   Phones (980px and under) keep them stacked. */
@media (min-width: 981px) {
  .list-wizard #field-breed.breed-dual {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    align-items: end;
  }
  .list-wizard #field-breed.breed-dual > #lbl-breed { grid-column: 1; grid-row: 1; }
  .list-wizard #field-breed.breed-dual > .breed-row:not(#breed-2-row) { grid-column: 1; grid-row: 2; }
  .list-wizard #field-breed.breed-dual > #breed-2-row { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: end; }
}

/* HY-114: no section titles on the cattle listing form. The fields stay. */
.list-wizard:not(.list-beef):not(.list-genetics) .hy-cattle-hide { display: none !important; }

/* HY-115: footer spans the full page width and sits at the bottom of the page.
   The content inside keeps the same centered width as the header. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > #app { flex: 1 0 auto; width: 100%; }
body > .app-header, body > .app-footer { flex-shrink: 0; }
.app-footer {
  max-width: none;
  width: 100%;
  margin: auto 0 0;
  padding-left: max(28px, calc((100% - var(--hy-container-wide)) / 2));
  padding-right: max(28px, calc((100% - var(--hy-container-wide)) / 2));
}

/* Hidden camera / library file inputs: keep them 1px so form field styles
   (width: 100%) never stretch them past the screen edge. */
.list-wizard .hy-cam, .hy-cam {
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  left: 0;
  top: 0;
}
/* HY-116: a hidden Breed 2 row stays hidden (the flex row rule was showing it). */
#breed-2-row[hidden] { display: none !important; }

/* HY-125: marketplace home. Quick links under the search, one card row per market. */
.home-hero .hero-inner { padding-top: 64px; padding-bottom: 56px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.home-hero .hero-bar,
.home-hero .hero-search { min-width: 0; max-width: 100%; box-sizing: border-box; }
.home-hero .hero-search input { min-width: 0; }
.home-quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.home-quick a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 252, 247, 0.14);
  border: 1px solid rgba(255, 252, 247, 0.42);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  backdrop-filter: blur(4px);
}
.home-quick a:hover { background: rgba(255, 252, 247, 0.26); }
.home-row-section { padding-top: 40px; padding-bottom: 8px; }
.home-row-section + .home-row-section { padding-top: 28px; }
.home-row-head { margin-bottom: 16px; align-items: baseline; }
.home-row-head h2 { margin: 0; }
.home-see-all {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.home-see-all:hover { text-decoration: underline; }
.home-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 18px) / 4);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 4px 2px 14px;
  scrollbar-width: thin;
}
.home-row > .listing-card { scroll-snap-align: start; align-self: stretch; }
.home-row > .listing-card:hover { transform: none; }

/* HY-122: genetics store. Same edge-to-edge card grid as browse, Semen / Embryos switch, breed chips. */
.gx-store.gx2 {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px var(--hy-gutter) 48px;
  box-sizing: border-box;
}
.gx2-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.gx2-title h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 560;
  letter-spacing: -0.02em;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}
.gx2-title .sub { font-size: 0.92rem; }
.gx2-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.gx2-switch button {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 9px 22px;
  min-height: 40px;
  border-radius: 999px;
  cursor: pointer;
}
.gx2-switch button.on { background: var(--green); color: #fff; }
.gx2-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 16px 0 18px;
  padding: 2px 0 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.gx2-chip {
  flex: none;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 14px;
  min-height: 38px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.gx2-chip:hover { border-color: var(--green); }
.gx2-chip.on { background: var(--green-d, #0f3f28); border-color: var(--green-d, #0f3f28); color: #fff; }
.gx2-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.gx2-sentinel { height: 1px; }
.gx2 .listings-feed-status { text-align: center; color: var(--muted); margin: 18px 0 0; }
.gx2-card.listing-card { align-self: stretch; height: 100%; }
.gx2-card .thumb { height: auto; aspect-ratio: 4 / 3; }
.gx2-card .listing-body {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  flex: 1 1 auto;
}
.listing-card.gx2-card .listing-body { padding-right: 12px; min-height: 0; }
.listing-card.gx2-card .listing-title {
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}
.gx2-card .gx2-breed,
.gx2-card .gx2-seller {
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gx2-card .price { font-size: 1.02rem; margin-top: 2px; }
.gx2-card .card-actions { top: 8px; right: 8px; bottom: auto; }
.gx2-card .card-icon { width: 32px; height: 32px; }

/* HY-123: cart buttons on genetics cards and the cart link in the top bar. */
.gx-cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 12px 12px;
  position: relative;
  z-index: 3;
}
.listing-card .gx-cart-actions { margin-top: auto; }
.gx-cart-btn.btn {
  min-height: 36px;
  padding: 6px 8px;
  font-size: 0.84rem;
  border-radius: 10px;
  white-space: nowrap;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
}
.cart-link:hover { background: var(--green-l); color: var(--green-d); }
.cart-count {
  position: absolute;
  top: 0;
  left: 22px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b51f1f;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}
.cart-count[hidden] { display: none !important; }
.cart-page { padding-top: 32px; }
.cart-page .page-title { margin-bottom: 4px; }
.cart-empty {
  margin-top: 20px;
  padding: 36px 20px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--white);
  display: grid;
  gap: 10px;
  justify-items: center;
}
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}
.cart-lines { display: grid; gap: 14px; min-width: 0; }
.cart-line {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.cart-thumb {
  display: block;
  position: relative;
  width: 120px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #d7e2d8;
}
.cart-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.cart-info { min-width: 0; display: grid; gap: 4px; }
.cart-title { font-weight: 750; font-size: 1.02rem; color: var(--ink); text-decoration: none; }
.cart-title:hover { color: var(--green); }
.cart-meta { color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.cart-each { font-weight: 650; color: var(--ink-soft); }
.cart-qty { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cart-qty-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}
.cart-qty input {
  width: 64px;
  height: 40px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 650;
}
.cart-avail { color: var(--muted); font-size: 0.85rem; }
.cart-remove {
  justify-self: start;
  border: 0;
  background: transparent;
  color: #a33;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  padding: 4px 0;
  cursor: pointer;
}
.cart-side { display: grid; gap: 10px; justify-items: end; text-align: right; }
.cart-line-total { font-size: 1.2rem; font-weight: 750; }
.cart-checkout.btn { white-space: nowrap; }
.cart-summary {
  position: sticky;
  top: 88px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
}
.cart-sum-row { display: flex; justify-content: space-between; gap: 12px; }
.cart-sum-total { font-size: 1.2rem; border-top: 1px solid var(--line); padding-top: 10px; }
.cart-note { font-size: 0.86rem; }
.cart-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cart-head .page-title { margin: 0; }
.cart-head-count {
  background: #eceae4;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.92rem;
  font-weight: 650;
}
.cart-producers { display: grid; gap: 22px; margin-top: 8px; }
.cart-ranch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.cart-ranch-main {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px 18px 16px;
  min-width: 0;
}
.cart-page { overflow-x: clip; }
.cart-ranch-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  padding: 10px 0 6px;
}
.cart-av-link { grid-column: 1; grid-row: 1 / span 2; display: flex; }
.cart-name-link { grid-column: 2; grid-row: 1; text-decoration: none; color: inherit; min-width: 0; }
.cart-name-link:hover .cart-producer-name { color: var(--green); }
.cart-ranch-sub { display: contents; }
.cart-producer-name { font-weight: 750; font-size: 1.05rem; color: var(--ink); }
.cart-producer-count { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 0.86rem; }
.cart-av, .cart-av-ini {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e7f0ea;
  color: #16503c;
  font-weight: 750;
  font-size: 14px;
  line-height: 1;
}
.cart-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-fee-pill {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e7f6ee;
  color: #1b6b45;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.84rem;
  font-weight: 650;
  white-space: nowrap;
}
.cart-fee-pill svg { flex: none; }
.cart-ranch-main .cart-lines { gap: 0; }
.cart-tools { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cart-ranch-main .cart-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 0;
}
.cart-ranch-main .cart-thumb { width: 76px; height: 76px; aspect-ratio: 1; border-radius: 12px; }
.cart-meta { color: var(--muted); font-size: 0.88rem; }
.cart-each { color: var(--ink); font-weight: 650; font-size: 0.95rem; }
.cart-buy { display: grid; justify-items: center; gap: 4px; }
.cart-ranch-main .cart-qty {
  margin: 0;
  background: #f3f1eb;
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  flex-wrap: nowrap;
}
.cart-ranch-main .cart-qty-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.15rem;
}
.cart-ranch-main .cart-qty input {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 16px;
}
.cart-avail { color: var(--muted); font-size: 0.8rem; text-align: center; }
.cart-ranch-main .cart-line-total { font-size: 1.05rem; font-weight: 750; white-space: nowrap; }
.cart-trash {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8b938c;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cart-trash:hover { background: #f6f3ec; color: #9b1c1c; }
.cart-paybox {
  margin-top: 8px;
  background: #f3faf6;
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--ink-soft);
}
.cart-paybox-title { display: flex; align-items: center; gap: 8px; font-weight: 750; color: var(--ink); margin-bottom: 4px; }
.cart-paybox p { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.cart-ship { margin: 8px 0 0; color: var(--muted); font-size: 0.86rem; }
.cart-error {
  margin-top: 10px;
  border: 1px solid #e7c2b8;
  background: #fff6f3;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cart-error[hidden] { display: none !important; }
.cart-error-msg { margin: 0; color: #7a2e1e; font-weight: 650; }
.cart-summary {
  position: sticky;
  top: 88px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: none;
  display: grid;
  gap: 10px;
}
.cart-summary h2 { margin: 0 0 4px; font-size: 1.25rem; }
.cart-summary .cart-sum-total { font-size: 1.2rem; border-top: 1px solid var(--line); padding-top: 12px; }
.cart-summary .cart-sum-total b { font-size: 1.35rem; }
.cart-fee-free { color: #1b6b45; font-weight: 750; }
.cart-summary .cart-checkout {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  background: var(--green-d);
  border-color: var(--green-d);
  font-size: 1.02rem;
  justify-content: center;
  gap: 8px;
}
.cart-summary .cart-checkout:hover { background: #0c3220; }
.cart-secure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
}
.cart-request { justify-self: start; margin-top: 6px; min-height: 40px; }
.cart-dep { text-align: left; margin: 0; }

/* HY-118: cleaner listing page. Photos on top, then title, price, location, facts, write-up, sections. */
.ld-z .ld-hero { display: block; }
.ld-z .ld-thumbs { display: none; }
.ld-z .ldz-gallery { position: relative; }
.ld-z .ldz-gallery.has-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 8px;
  height: clamp(340px, 42vw, 520px);
}
.ld-z .ldz-gallery.has-tiles .ld-hero-media.gallery {
  height: 100%;
  min-height: 0;
  border-radius: 18px 0 0 18px;
  box-shadow: none;
}
.ldz-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-height: 0;
  border-radius: 0 18px 18px 0;
  overflow: hidden;
}
.ldz-tiles-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ldz-tiles-2 { grid-template-columns: 1fr; }
.ldz-tiles-3 .ldz-tile:first-child { grid-column: 1 / -1; }
.ldz-tile {
  border: 0;
  padding: 0;
  margin: 0;
  background: #d7e2d8 center / cover no-repeat;
  cursor: pointer;
  min-height: 0;
  min-width: 0;
}
.ldz-tile:hover { filter: brightness(0.92); }
.ldz-see-all {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 252, 247, 0.97);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(20, 32, 24, 0.16);
}
.ldz-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  grid-template-areas: "head aside" "body aside";
  gap: 0 36px;
  margin-top: 24px;
  align-items: start;
}
.ldz-head { grid-area: head; min-width: 0; padding-bottom: 6px; }
.ldz-aside { grid-area: aside; position: sticky; top: 88px; min-width: 0; }
.ldz-aside .ld-purchase { position: static; }
.ldz-body { grid-area: body; margin-top: 18px; max-width: none; min-width: 0; }
.ldz-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}
.ldz-title-row .ld-title { min-width: 0; overflow-wrap: anywhere; }
.ldz-head-actions { display: flex; gap: 14px; flex: none; }
.ldz-head-actions .ld-save { margin: 0; }
.ldz-price {
  margin-top: 8px;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 750;
  color: var(--ink);
  line-height: 1.15;
}
.ld-beef .ldz-price { color: var(--beef-d); }
.ldz-loc { margin: 6px 0 0; color: var(--ink-soft); font-weight: 400; overflow-wrap: anywhere; }
.ldz-head .hy-listing-place { margin: 0 0 6px; }
.ldz-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
}
.ldz-fact {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.ldz-fact:last-child { border-right: 0; }
.ldz-fact b { font-size: 1.02rem; color: var(--ink); overflow-wrap: anywhere; }
.ldz-fact span { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 650; }
.ld-sec .ld-h,
.ld-z .ld-about .ld-h { font-size: 1.15rem; }
.ld-z .ld-related { margin-top: 28px; }
.ld-cart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ld-cart-row .btn { width: 100%; justify-content: center; min-width: 0; white-space: nowrap; }
@media (max-width: 1280px) {
  .gx2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-row { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
}
.listing-card:has(.gx-cart-actions) .card-actions { top: 8px; right: 8px; bottom: auto; flex-direction: row; }
.listing-card:has(.gx-cart-actions) .listing-body { padding-right: 16px; }
.listing-card:has(.gx-cart-actions) .days { display: none; }

/* HY-126: home page refresh. Words-only quick links, cleaner stats chart,
   even Build Your Producer Profile and Why Herd Yard columns. */
.home-quick a { gap: 0; padding: 10px 22px; letter-spacing: 0.01em; }
.hy-stat-cards { max-width: 1040px; gap: 24px; align-items: stretch; }
.hy-stat-card {
  display: flex;
  flex-direction: column;
  border-color: #d9e6dc;
  border-radius: 20px;
  padding: 26px 28px 22px;
  box-shadow: 0 1px 2px rgba(20, 32, 24, 0.04), 0 14px 34px rgba(20, 32, 24, 0.06);
}
.hy-stat-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; font-weight: 700; }
.hy-stat-value { margin-bottom: 10px; }
.hy-stat-sub { border-bottom: 0; padding-bottom: 0; margin: 18px 0 8px; font-weight: 650; color: var(--ink-soft); }
.hy-stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 6px 0;
  border-bottom: 1px solid #eef2ee;
}
.hy-stat-row:last-of-type { border-bottom: 0; }
.hy-stat-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 99px; background: #edf3ee; overflow: hidden; }
.hy-stat-bar em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1b8a5a, #5fb88a); }
.hy-chart-wrap { flex: 1; display: flex; align-items: flex-end; min-height: 0; margin: 0 -8px; }
.hy-spark.hy-chart { height: auto; aspect-ratio: 560 / 280; max-height: 300px; }
.hy-chart-wrap { align-items: center; }
.hy-chart-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid #eef2ee; }
.hy-chart-foot span { display: block; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 650; }
.hy-chart-foot b { display: block; margin-top: 2px; font-size: 1.05rem; color: var(--ink); }
.hy-build {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: stretch;
}
.hy-build-copy { display: flex; flex-direction: column; justify-content: flex-start; padding: 8px 0 0; }
.hy-build-copy .hy-build-cta { margin-top: auto; padding-top: 22px; }
.hy-build-copy .hy-build-cta .btn { min-width: 220px; }
.hy-why {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: stretch;
}
.hy-why-media { display: block; min-height: 420px; position: relative; }
.hy-why-media .hy-why-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: 55% 88%;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(20, 32, 24, 0.12);
}
.hy-why-copy { align-self: center; }
.hy-why-copy h2 { margin-top: 0; }
@media (max-width: 980px) {
  .hy-build, .hy-why { grid-template-columns: 1fr; gap: 28px; }
  .hy-build-copy .hy-build-cta { margin-top: 6px; }
  .hy-why-media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* HY-127: genetics store sidebar filters next to the card grid. Breed chips stay above the cards. */
.gx2 .gx2-layout { grid-template-columns: 248px minmax(0, 1fr); gap: 24px; margin-top: 16px; }
.gx2 .gx2-side.filters { top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
.gx2 .gx2-side .field { margin-bottom: 14px; }
.gx2 .gx2-side .field > label { display: block; font-weight: 650; font-size: 0.86rem; margin-bottom: 6px; }
.gx2 .gx2-side input[type="search"],
.gx2 .gx2-side select { width: 100%; box-sizing: border-box; }
.gx2 .gx2-main { min-width: 0; }
.gx2 .gx2-main .gx2-chips { margin-top: 0; }
@media (min-width: 1441px) {
  .gx2 .gx2-main .gx2-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.gx2-chip-n { margin-left: 4px; font-size: 0.78rem; font-weight: 700; opacity: 0.6; }
.gx2-chip.on .gx2-chip-n { opacity: 0.85; }
@media (min-width: 1181px) and (max-width: 1440px) {
  .gx2 .gx2-main .gx2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .gx2 .gx2-main .gx2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .gx2 .gx2-layout { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .gx2 .gx2-side.filters { max-height: none; margin-bottom: 14px; }
  .gx2 .gx-panel-toggle { margin-top: 12px; }
}

/* Oct 22 (David 12:13 PM): Producers uses the Cattle/Beef browse layout and card-v2 cards (shared rules).
   Only producer bits here: dark grey ranch names and dots, the count next to the title, wrap-safe meta. */
.producers-page .prod-card .prod-card-name { color: var(--grey-d); }
.producers-page .prod-card .card-meta { flex-wrap: wrap; }
.producers-page .browse-title .prod-count { margin-left: 10px; font-size: 14px; }
/* The followed star is gold on producer cards everywhere (Producers grid and map popups on any page). */
.prod-card .card-icon.on { color: #b7791f; }
.hy-map-shared-producer .prod-card .prod-card-name { color: var(--grey-d); }
/* Map popups already have the View Ranch Profile button under the card, so the footer shows only what they sell. */
.hy-map-shared-producer .listing-card.prod-card .card-foot-prod { display: none; }
.hy-map-shared-producer .listing-card.prod-card .card-foot { justify-content: flex-start; }
.hy-map-producers .hy-dot.producer { background: var(--grey-d); }

/* HY-128: listing detail sheet over the map. One centered column, map showing in both gutters.
   The sheet is the only thing that scrolls, and only up and down. */
.hy-listing-overlay { padding: 0; align-items: stretch; justify-content: center; overflow: hidden; }
.hy-listing-overlay-backdrop { background: rgba(0, 0, 0, 0.4); }
.hy-listing-overlay-panel {
  width: min(880px, calc(100vw - 112px));
  min-width: min(720px, calc(100vw - 112px));
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(20, 32, 24, 0.08), 0 24px 70px rgba(20, 32, 24, 0.32);
  transition: transform 0.18s ease;
}
.hy-listing-overlay-bar { position: relative; z-index: 2; min-height: 56px; box-sizing: border-box; }
.hy-listing-overlay-scroll { overflow-y: auto; overflow-x: hidden; }
.hy-listing-overlay .ld-page.ld-sheet { max-width: 100%; padding: 16px 24px 48px; box-sizing: border-box; overflow-x: hidden; }
.ld-sheet .ld-hero { display: block; }
.ld-sheet .ldz-gallery { display: block; height: auto; }
.ld-sheet .ldz-gallery .ld-hero-media.gallery,
.hy-listing-overlay .ld-sheet .ld-hero-media.gallery {
  height: clamp(260px, 48vh, 440px);
  min-height: 0;
  border-radius: 16px;
}
.ld-sheet .ld-thumbs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  max-width: 100%;
}
.ld-sheet .ldz-main { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 18px; }
.ld-sheet .ldz-head,
.ld-sheet .ldz-aside,
.ld-sheet .ldz-body { width: 100%; min-width: 0; max-width: 100%; }
.ld-sheet .ldz-aside { position: static; top: auto; }
.ld-sheet .ldz-aside .ld-purchase > .ld-label,
.ld-sheet .ldz-aside .ld-purchase > .ld-price { display: none; }
.ld-sheet .ldz-body { margin-top: 0; display: flex; flex-direction: column; gap: 14px; }
.ld-sheet .ldz-body > * { margin-top: 0; }
.ld-sheet .ld-lot { margin: 4px 0 0; color: var(--muted); font-weight: 600; }
.ld-sheet .ldz-facts { display: flex; flex-wrap: wrap; background: var(--white); }
.ld-sheet .ldz-fact { flex: 1 1 130px; border-right: 1px solid var(--line); }
.ld-sheet .ldz-loc { margin-top: 12px; }
.ld-sheet .ld-grid { max-width: 100%; }
.ld-sheet .ld-seller-actions { flex-wrap: wrap; }
@media (max-width: 760px) {
  .hy-listing-overlay-panel { width: 100vw; min-width: 0; box-shadow: none; }
  .hy-listing-overlay-backdrop { display: none; }
  .hy-listing-overlay .ld-page.ld-sheet { padding: 12px 16px calc(36px + env(safe-area-inset-bottom)); }
  .hy-listing-overlay-bar { padding-top: max(8px, env(safe-area-inset-top)); }
  .hy-listing-overlay-bar::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 99px;
    background: #d3ddd5;
  }
}

/* HY-135: third stats card (sold totals). Three cards side by side, full page width. */
.hy-stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.hy-sold-kpis { display: flex; flex-direction: column; gap: 0; margin-top: 6px; }
.hy-sold-kpi { padding: 16px 0; border-bottom: 1px solid #eef2ee; }
.hy-sold-kpi:last-child { border-bottom: 0; }
.hy-sold-kpi span { display: block; color: var(--muted); font-size: 0.9rem; margin-bottom: 4px; }
.hy-sold-kpi b { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink); letter-spacing: -0.03em; font-weight: 400; overflow-wrap: anywhere; }
@media (max-width: 1100px) and (min-width: 981px) {
  .hy-stat-card { padding: 22px 20px 18px; }
}
@media (max-width: 980px) {
  .hy-stat-cards { grid-template-columns: 1fr; }
}

/* HY-133: home quick links. Hidden on desktop; on phones and tablets they
   spread across the same width as the search bar. */
@media (min-width: 981px) {
  .home-hero .home-quick { display: none; }
}
@media (max-width: 980px) {
  .home-hero .home-quick {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: min(520px, 100%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    gap: 6px;
  }
  .home-hero .home-quick a { flex: 0 1 auto; min-width: 0; padding: 9px 12px; justify-content: center; white-space: nowrap; }
}
@media (max-width: 720px) {
  .home-hero .home-quick { width: 100%; }
}
@media (max-width: 360px) {
  .home-hero .home-quick a { padding: 8px 9px; font-size: 0.86rem; }
}

/* HY-121: cattle listing form in one fixed order. Price, Class, Breed, Category,
   Weight, Head, Age range, Location, Registration details, Association,
   Registration #, Registration link, About. Then title, delivery, and the rest. */
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) { display: flex; flex-direction: column; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) > * { order: 200; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) > input[type="hidden"],
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) > .list-form-head { order: -10; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) > .wiz-step,
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) > .wiz-step > .form-grid { display: contents !important; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) > .wiz-step > * { order: 145; margin-top: 0; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) > .wiz-step > .form-grid > * { order: 145; margin-bottom: 14px; min-width: 0; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) > .wiz-step[data-step="0"] > * { order: 0; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) > .wiz-step[data-step="0"] > .form-grid > * { order: 1; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-breed-type { order: 2; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-price { order: 10; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-klass { order: 20; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-breed { order: 30; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-cattle-category { order: 40; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-weight { order: 50; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-head { order: 60; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-age { order: 70; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-location { order: 80; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-reg-details { order: 90; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-association { order: 100; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-reg-number { order: 110; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-reg-link { order: 120; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-description { order: 130; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-title { order: 135; }
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-how { order: 140; }
/* Oct 19 (David): Show advanced details (and what it reveals) sits directly above Pickup / Delivery. */
.list-wizard.list-flat:not(.list-beef):not(.list-genetics) #field-advanced { order: 138; }
.list-wizard:not(.list-beef):not(.list-genetics) .field .opt,
#listing-edit-form .field .opt { font-weight: 500; color: var(--muted); font-size: 0.86em; }
/* The new fields only apply to cattle. */
.list-wizard.list-beef #field-cattle-category, .list-wizard.list-genetics #field-cattle-category,
.list-wizard.list-beef #field-reg-details, .list-wizard.list-genetics #field-reg-details,
.list-wizard.list-beef #field-association, .list-wizard.list-genetics #field-association,
.list-wizard.list-beef #field-reg-number, .list-wizard.list-genetics #field-reg-number,
.list-wizard.list-beef #field-reg-link, .list-wizard.list-genetics #field-reg-link { display: none !important; }

/* HY-134: Listing Editor */
.le-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.le-head .page-title { margin-bottom: 4px; }
.le-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 16px 0 14px; }
.le-filters input, .le-filters select { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.le-date { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.le-date span { font-size: 0.76rem; color: var(--muted); }
.le-filters > input, .le-filters > select { align-self: end; }
.le-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; }
.le-tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px; font: inherit; font-weight: 650; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.le-tab span { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #eef2ee; font-size: 0.8rem; margin-left: 4px; }
.le-tab.on { color: var(--ink); border-bottom-color: #147a4e; }
.le-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0 12px; }
.le-bulk label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.le-list { display: flex; flex-direction: column; gap: 10px; }
.le-row { display: grid; grid-template-columns: auto 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid #d9e6dc; border-radius: 14px; background: #fff; }
.le-row:not(:has(.le-pick)) { grid-template-columns: 96px minmax(0, 1fr) auto; }
.le-pick input { width: 18px; height: 18px; }
.le-photo img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; display: block; background: #dce8d8; }
.le-main { min-width: 0; }
.le-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-meta { font-size: 0.88rem; color: var(--ink-soft); margin-top: 3px; overflow-wrap: anywhere; }
.le-status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; background: #eef2ee; color: var(--ink); }
.le-st-current { background: #e3f3ea; color: #0f5e3b; }
.le-st-drafts { background: #fbefd9; color: #8a5a10; }
.le-st-expired { background: #f6e1dc; color: #8a2f1f; }
.le-st-sold { background: #e6e9f2; color: #2d3b63; }
.le-flag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #fff3cd; color: #7a5b00; font-size: 0.76rem; font-weight: 700; }
/* Oct 19 (J): phone drafts in the Drafts tab, and the one-line prompt above them. */
.le-card-body .le-local-tag, .le-card-body .le-local-copies { align-self: flex-start; margin-left: 0; }
.le-local-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: #f3ece0; color: #6b4b16; border: 1px solid #e3d4b8; vertical-align: middle; white-space: nowrap; }
.le-local-copies { display: inline-block; margin-left: 4px; font-size: 0.74rem; color: var(--muted, #5b6b60); vertical-align: middle; }
.le-drafts-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 10px 10px 16px; border-radius: 12px; background: #eaf3ec; border: 1px solid #cfe3d5; color: var(--ink, #142018); font-weight: 600; }
.le-drafts-prompt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-drafts-prompt .btn { flex: none; min-height: 38px; padding: 8px 16px; }
@media (max-width: 560px) { .le-drafts-prompt { font-size: 0.9rem; padding-left: 12px; } .le-drafts-prompt span { white-space: normal; } }
.le-more { margin-top: 6px; font-size: 0.86rem; }
.le-more summary { cursor: pointer; color: var(--ink-soft); }
.le-history { list-style: none; margin: 6px 0 0; padding: 0; }
.le-history li { display: flex; gap: 8px; padding: 2px 0; }
.le-history b { font-weight: 650; min-width: 96px; }
.le-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 330px; }
.le-actions .btn, .le-menu-list .btn { padding: 7px 12px; font-size: 0.88rem; }
.le-del { color: #8a2f1f; }
.le-menu { display: none; position: relative; }
.le-menu summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 650; white-space: nowrap; }
.le-menu summary::-webkit-details-marker { display: none; }
.le-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.14); min-width: 160px; }
.le-menu-list .btn { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; }
/* Nov 4 (t764u): Delete is the last menu item, in the danger color, set off by a line; the confirm uses .btn-danger. */
.le-menu-list .le-del { color: #b42318; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; padding-top: 9px; }
.le-menu-list .le-del:hover { background: #fdecea; }
.btn.btn-danger { background: #b42318; border-color: #b42318; color: #fff; }
.btn.btn-danger:hover { background: #912018; border-color: #912018; }
.btn.btn-danger:disabled { opacity: .6; }
.le-del-title { margin: 4px 0 6px; overflow-wrap: anywhere; }
.le-del-err { color: #b42318; margin: 8px 0 0; }
.le-empty { padding: 28px 18px; text-align: center; border: 1px dashed #cfe0d4; border-radius: 14px; }
.le-empty .btn { margin-top: 6px; }
.le-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 25, 18, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.le-modal-card { background: #fff; border-radius: 16px; padding: 20px; width: min(420px, 100%); box-sizing: border-box; }
.le-modal-card h3 { margin: 0 0 6px; }
.le-modal-card .field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.le-modal-card input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.le-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (max-width: 820px) {
  .le-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .le-filters > #le-q { grid-column: 1 / -1; }
  .le-row, .le-row:not(:has(.le-pick)) { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; }
  .le-row:has(.le-pick) { grid-template-columns: auto 72px minmax(0, 1fr) auto; }
  .le-photo img { width: 72px; height: 56px; }
  .le-actions { display: none; }
  .le-menu { display: block; }
}
/* HY-121: same order inside the wizard steps on cattle. */
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-price { order: 10; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-klass { order: 20; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-breed-type { order: 25; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-breed { order: 30; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-cattle-category { order: 40; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-weight { order: 50; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-head { order: 60; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-age { order: 70; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-location { order: 80; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-reg-details { order: 90; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-association { order: 100; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-reg-number { order: 110; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-reg-link { order: 120; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-description { order: 130; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > #field-title { order: 135; }
.list-wizard.list-cattle-order:not(.list-flat) .wiz-step > .form-grid > * { order: 145; }
@media (max-width: 520px) {
  .le-tabs { gap: 0; }
  .le-tab { flex: 1 1 0; padding: 10px 4px; font-size: 0.86rem; text-align: center; }
  .le-tab span { margin-left: 2px; padding: 1px 5px; min-width: 0; }
  .le-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .le-filters > #le-type { grid-column: 1 / -1; }
}

/* HY-140 + HY-146: YouTube link below photo/video thumbs; YouTube-red border. */
.yt-link-field { margin-top: 14px; }
.yt-link-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.yt-link-row { display: flex; gap: 8px; align-items: center; }
.yt-link-row input { flex: 1 1 auto; min-width: 0; border: 1px solid #FF0000; }
.yt-link-row input:focus { border: 1px solid #FF0000; box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.15); outline: none; }
.yt-link-row .yt-link-remove { flex: none; }
.yt-link-msg { margin: 6px 0 0; min-height: 0; }
.yt-link-field.yt-bad .yt-link-msg { color: #a3361c; }
.yt-link-preview { margin-top: 8px; max-width: 320px; }
.yt-link-preview img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #142018; }

/* HY-142: photo preview with controls stacked on the left edge of each photo. */
#photo-preview .shot { width: 150px; }
#photo-preview .shot-img-wrap { height: 138px; }
#photo-preview .shot-img-wrap img { transition: transform 0.2s ease; }
#photo-preview .shot-tools {
  position: absolute; top: 6px; left: 6px; bottom: 6px;
  display: flex; flex-direction: column; gap: 6px; z-index: 3;
}
#photo-preview .shot-tool {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(16, 26, 20, 0.62); color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#photo-preview .shot-tool:hover, #photo-preview .shot-tool:focus-visible { background: rgba(16, 26, 20, 0.82); outline: none; }
#photo-preview .shot-tool:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green); }
#photo-preview .shot-tool-primary.on { background: var(--green); }
#photo-preview .shot-tool-remove:hover { background: #8b1e1e; }
#photo-preview .shot-badge { top: auto; left: auto; bottom: 6px; right: 6px; }
@media (max-width: 980px) {
  #photo-preview .shot { width: calc(50% - 6px); max-width: 190px; }
  #photo-preview .shot-img-wrap { height: 150px; }
  #photo-preview .shot-tool { width: 40px; height: 40px; }
}
body.hy-shoot #photo-preview .shot-img-wrap { height: 100%; }
body.hy-shoot #photo-preview .shot-tools { top: 4px; left: 4px; gap: 3px; }
body.hy-shoot #photo-preview .shot-tool { width: 26px; height: 26px; }
body.hy-shoot #photo-preview .shot-tool svg { width: 13px; height: 13px; }
body.hy-shoot #photo-preview .shot-badge { display: none; }


/* HY-150: public listing page laid out like the Zillow reference. */
.ld-z:not(.ld-sheet) .ldz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.ldz-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; text-decoration: none; min-height: 44px; }
.ldz-back span { font-size: 1.4rem; line-height: 1; }
.ldz-back:hover { text-decoration: underline; }
.ld-z:not(.ld-sheet) .ldz-gallery.has-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; height: clamp(320px, 34vw, 460px); }
.ld-z:not(.ld-sheet) .ldz-gallery.has-tiles .ld-hero-media.gallery { border-radius: 14px 0 0 14px; }
.ld-z:not(.ld-sheet) .ldz-tiles { gap: 6px; border-radius: 0 14px 14px 0; }
.ld-z:not(.ld-sheet) .ldz-see-all { border-radius: 8px; padding: 8px 12px; font-size: 0.86rem; }
.ldz-sum { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 28px; }
.ldz-sum-main { min-width: 0; }
.ldz-status { display: inline-block; font-size: 0.9rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid currentColor; margin-bottom: 4px; }
.ldz-status.off { color: #b4412f; }
.ld-z:not(.ld-sheet) .ldz-price { margin-top: 2px; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.ld-z:not(.ld-sheet) .ldz-head .ld-title { font-size: 1.12rem; font-weight: 600; margin: 4px 0 0; line-height: 1.35; overflow-wrap: anywhere; }
.ld-z:not(.ld-sheet) .ldz-loc { margin-top: 2px; }
.ldz-keys { display: flex; gap: 26px; flex: none; }
.ldz-key { display: flex; flex-direction: column; min-width: 0; }
.ldz-key b { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 750; line-height: 1.15; color: var(--ink); }
.ldz-key span { color: var(--ink-soft); font-size: 0.95rem; }
.ldz-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.ldz-chip { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; background: #f1efe9; border-radius: 8px; min-width: 0; }
.ldz-chip span { font-size: 0.76rem; color: var(--ink-soft); }
.ldz-chip b { font-size: 0.94rem; font-weight: 600; overflow-wrap: anywhere; }
.ld-z:not(.ld-sheet) .ldz-body .ld-card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 26px; border-radius: 0; }
.ld-z:not(.ld-sheet) .ldz-body .ld-seller { border-top: 1px solid var(--line); padding-top: 22px; }
.ldz-special { margin-bottom: 18px; }
.ldz-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ldz-tag { background: #e8e5dd; color: var(--ink); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 9px; border-radius: 4px; }
.ldz-meta { margin: -8px 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.ldz-meta-line { font-weight: 700; margin: 0 0 6px; }
.ldz-meta-line span { color: var(--line); margin: 0 6px; }
.ldz-listed-by { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
.ldz-group-h { font-size: 1.35rem; margin: 0 0 14px; }
.ld-z:not(.ld-sheet) .ldz-body .ld-sec .ld-h { font-size: 1.05rem; }
.ld-z:not(.ld-sheet) .ld-readmore { display: inline-flex; gap: 6px; align-items: center; }
.ld-z:not(.ld-sheet) .ldz-aside .ld-purchase { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 10px rgba(20, 32, 24, 0.06); }

/* HY-151: delivery rate on the listing form and the delivery cost calculator on cattle listings. */
.hy-rate-row { display: flex; align-items: center; gap: 8px; max-width: 260px; }
.hy-rate-row input { flex: 1; min-width: 0; }
.hy-rate-row span { color: var(--ink-soft); font-weight: 600; }
.ldz-dcalc { border: 1px solid var(--line) !important; border-radius: 12px !important; padding: 18px !important; background: var(--white) !important; }
.ldz-dcalc .ld-h { margin-top: 0; }
.ldz-dcalc-rate { margin: 0 0 12px; color: var(--ink-soft); }
.ldz-dcalc-rate b { color: var(--ink); }
.ldz-dcalc-label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; }
.ldz-dcalc-row { display: flex; gap: 8px; }
.ldz-dcalc-row input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; background: var(--white); }
.ldz-dcalc-row input:focus { outline: none; border-color: var(--green, #2f6b3a); box-shadow: 0 0 0 3px rgba(47, 107, 58, 0.15); }
.ldz-dcalc-row .btn { min-height: 44px; flex: none; }
.ldz-dcalc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ldz-dcalc-box { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #f1efe9; border-radius: 8px; min-width: 0; }
.ldz-dcalc-box span { font-size: 0.78rem; color: var(--ink-soft); }
.ldz-dcalc-box b { font-size: 1.25rem; font-weight: 750; overflow-wrap: anywhere; }
.ldz-dcalc-note { margin: 10px 0 0; font-size: 0.85rem; }
.ldz-dcalc-note.err { color: #b4412f; }
.ld-sheet .ldz-dcalc { margin-bottom: 16px; }
@media (max-width: 420px) {
  .ldz-dcalc-row { flex-direction: column; }
  .ldz-dcalc-row .btn { width: 100%; }
}

/* HY-75 + HY-150: Zillow listing layout inside the desktop Map + Cards overlay. */
.hy-listing-overlay .ld-overlay .ldz-gallery.has-tiles { height: clamp(240px, 28vw, 360px); }
.hy-listing-overlay .ld-overlay .ldz-aside { position: sticky; top: 12px; }
.hy-listing-overlay .ld-overlay .ldz-top-overlay { justify-content: flex-end; margin-bottom: 8px; }
.hy-listing-overlay .ld-overlay .ldz-main { margin-top: 16px; gap: 0 24px; }
@media (max-width: 900px) {
  .hy-listing-overlay .ld-overlay .ldz-main {
    display: flex; flex-direction: column; gap: 16px;
  }
  .hy-listing-overlay .ld-overlay .ldz-aside { position: static; }
}

/* Listing cleanup: wider overlay, floating X, photo Save/Share/Follow icons, tighter facts. */
.hy-listing-overlay-panel {
  width: min(1180px, calc(100vw - 48px));
  min-width: min(960px, calc(100vw - 48px));
}
.hy-listing-overlay-bar { display: none !important; }
.hy-listing-overlay-x-float { display: none !important; }
.hy-listing-overlay .ld-page.ld-clean { padding: 12px 22px 36px; }
.ldz-gallery { position: relative; }
.ldz-photo-actions, .ldz-ico { display: none !important; }
.ldz-fact-ico { margin-right: 4px; opacity: 0.85; }
.ldz-key { flex-direction: column; }
.ldz-key .ldz-fact-ico { font-size: 0.95rem; margin: 0 0 2px; }
.ldz-chip { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.ldz-chip .ldz-fact-ico { margin: 0; }
.ld-clean .ldz-top { display: none !important; }
.ld-clean .ld-owner { display: none !important; }
.ld-clean .hy-listing-move { display: none !important; }
.ld-clean .hy-listing-place { display: none !important; }
@media (max-width: 760px) {
  .hy-listing-overlay .ld-page.ld-clean { padding: 8px 14px calc(28px + env(safe-area-inset-bottom)); }
}

/* Desktop listing photos: whole mosaic is a 16:9 surface; tiles cover inside it. Phones keep their own height rules. */
@media (min-width: 981px) {
  .ld-z:not(.ld-sheet) .ldz-gallery.has-tiles,
  .hy-listing-overlay .ld-overlay .ldz-gallery.has-tiles {
    width: 100%;
    height: auto !important;
    max-height: none;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .ld-z:not(.ld-sheet) .ldz-gallery.has-tiles .ld-hero-media.gallery,
  .hy-listing-overlay .ld-overlay .ldz-gallery.has-tiles .ld-hero-media.gallery {
    height: 100% !important;
    min-height: 0;
    max-height: none;
  }
  .ld-z:not(.ld-sheet) .ldz-gallery.has-tiles .ld-hero-media.gallery img,
  .hy-listing-overlay .ld-overlay .ldz-gallery.has-tiles .ld-hero-media.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ld-z:not(.ld-sheet) .ldz-tile,
  .hy-listing-overlay .ld-overlay .ldz-tile {
    background-size: cover;
    background-position: center;
  }
  /* Single-photo gallery (no tiles) also 16:9 on desktop */
  .ld-z:not(.ld-sheet) .ldz-gallery:not(.has-tiles) .ld-hero-media.gallery,
  .hy-listing-overlay .ld-overlay .ldz-gallery:not(.has-tiles) .ld-hero-media.gallery {
    width: 100%;
    height: auto !important;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
  }
  .ld-z:not(.ld-sheet) .ldz-gallery:not(.has-tiles) .ld-hero-media.gallery img,
  .hy-listing-overlay .ld-overlay .ldz-gallery:not(.has-tiles) .ld-hero-media.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* Listing nav header (Zillow-thin) + info layout below photos */
.ldz-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px 12px;
  min-height: 48px;
  padding: 6px 0 10px;
  margin: 0 0 8px;
  border: 0;
  border-bottom: 0;
  box-shadow: none;
  position: sticky;
  top: 0;
  /* Above gallery photos and Leaflet map panes while content scrolls underneath */
  z-index: 1100;
  /* Opaque page/listing paper — same as body / overlay scroll (--paper = #f4f1ea) */
  background: var(--paper);
  background-color: #f4f1ea;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}
.hy-listing-overlay .ldz-nav { top: 0; }

/* Desktop: header paper runs edge to edge; inner content stays in the column. Clipped by overlay panel. */
@media (min-width: 761px) {
  .ldz-nav { isolation: isolate; }
  .ldz-nav::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f4f1ea;
    z-index: -1;
    pointer-events: none;
    box-shadow: none;
    border: 0;
  }
  .ld-page.ld-clean, .hy-listing-overlay .ld-overlay { overflow-x: clip; }
}
@media (max-width: 760px) {
  /* Phones use floating circles; thin nav stays hidden (see phone full-screen rules). */
  .ldz-nav {
    background: transparent;
    background-color: transparent;
    z-index: 8;
  }
}
.ldz-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  color: var(--ink);
  font-weight: 400;
  font-size: 0.92rem;
  text-decoration: none;
  min-height: 40px;
  padding: 4px 2px;
}
.ldz-nav-back span[aria-hidden] { font-size: 1.35rem; line-height: 1; }
.ldz-nav-back:hover { text-decoration: underline; }
.ldz-nav-logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.ldz-nav-logo img { height: 24px; width: auto; display: block; }
.ldz-nav-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.ldz-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.ldz-nav-btn:hover, .ldz-nav-btn:focus-visible { background: #eef2ef; }
.ldz-nav-btn.on { color: #c9a227; }
.ldz-nav-lab { white-space: nowrap; }

.ld-z:not(.ld-sheet) .ldz-info { margin-top: 18px; }
.ld-z:not(.ld-sheet) .ldz-info .ld-title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 750;
  margin: 0 0 4px;
  line-height: 1.25;
}
.ld-z:not(.ld-sheet) .ldz-info .ldz-loc {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 400;
}
.ldz-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0 0 16px;
}
.ld-z:not(.ld-sheet) .ldz-info .ldz-price {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 600;
  color: #1f7a45;
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  flex-wrap: wrap;
}
.ld-z:not(.ld-sheet) .ldz-info .ldz-price-amt { font-weight: 600; }

/* Half-size unit suffixes after prices and big stat numbers (e.g. /head, /yrs, lb). */
.hy-unit {
  font-size: 0.5em;
  font-weight: inherit;
  line-height: 1;
  letter-spacing: 0;
}
.hy-amt { font-weight: inherit; }
.price, .map-price, .hy-map-card-price, .ld-price, .ld-sticky-price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1em;
}
.ldz-stat b {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.08em;
}
.ld-z:not(.ld-sheet) .ldz-info .ldz-price-unit,
.hy-unit.ldz-price-unit {
  font-size: 0.5em;
  font-weight: 600;
  line-height: 1;
}

/* Age box only: value stays same size as other stats; /yrs|/mo ≈ 2/3 of value (value is 50% bigger than unit). */
.ldz-stat-age .hy-unit {
  font-size: 0.667em;
}
.ldz-stat-age b {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.ld-z:not(.ld-sheet) .ldz-info .ldz-price-unit {
  font-weight: 600;
  font-size: 0.5em;
  line-height: 1;
  color: #1f7a45;
}
.ldz-price-sub { color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; }

.ldz-seller-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white, #fff);
  margin: 0 0 14px;
}
.ldz-seller-card-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ldz-seller-card-av {
  width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #e8e5dd; flex: none;
}
.ldz-seller-card-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.ldz-seller-card-name:hover { text-decoration: underline; }
.ldz-seller-card-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; align-items: center; }
.ldz-seller-card-actions #follow-btn { display: inline-flex !important; }
.ldz-seller-btn { min-height: 36px; padding: 6px 12px; font-size: 0.88rem; }

.ldz-stats-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 18px;
}
.ldz-stats {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white, #fff);
  overflow: hidden;
}
.ldz-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 8px;
  text-align: center;
  min-width: 0;
  border-right: 1px solid var(--line);
}
.ldz-stat:last-child { border-right: 0; }
.ldz-stat b { font-size: 1.2rem; font-weight: 750; line-height: 1.15; overflow-wrap: anywhere; }
.ldz-stat > span { font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 650; }

.ldz-market {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white, #fff);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.ldz-market-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ldz-market-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.ldz-market-chip.above { background: #f8e6d8; color: #a14a1a; }
.ldz-market-chip.below { background: #e3f0e8; color: #1f6b45; }
.ldz-market-chip.near { background: #e8eef5; color: #2a4f7a; }
.ldz-market-avg { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.4; }
.ldz-market-avg b { color: var(--ink); }

.ldz-details-sec { margin: 0 0 16px; }
.ldz-sec-h { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; }
.ldz-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white, #fff);
}
.ldz-details-cell {
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.ldz-details-cell:last-child { border-right: 0; }
.ldz-details-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ldz-details-1 { grid-template-columns: minmax(0, 1fr); }
.ldz-details-cell span {
  display: block; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 650; margin-bottom: 4px;
}
.ldz-details-cell b { font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }

.ldz-wt {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 14px;
  background: var(--white, #fff);
}
.ldz-wt-h {
  background: #f1efe9;
  padding: 10px 14px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ldz-wt-table { width: 100%; border-collapse: collapse; }
.ldz-wt-table th, .ldz-wt-table td {
  padding: 12px 14px; text-align: left; border-top: 1px solid var(--line); font-size: 0.95rem;
}
.ldz-wt-table th { font-weight: 500; color: var(--ink); width: 55%; }
.ldz-wt-table td { font-weight: 650; text-align: right; }
.ldz-wt-table tr.ldz-wt-total td { color: #1f7a45; font-weight: 750; }

.ldz-reg {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px;
  background: var(--white, #fff);
}
.ldz-reg span { color: var(--ink-soft); font-size: 0.92rem; }
.ldz-reg b { font-size: 1rem; }
.ldz-reg a { color: var(--ink); }

.ldz-about { border: 1px solid var(--line) !important; border-radius: 12px !important; padding: 16px 18px !important; background: var(--white, #fff) !important; }

.hy-listing-overlay .ld-overlay .ldz-nav { margin: 0 0 6px; padding-left: 0; padding-right: 0; }
.hy-listing-overlay .ld-page.ld-clean { padding-top: 8px; }

@media (max-width: 900px) {
  .ldz-stats-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ldz-nav { min-height: 44px; padding: 4px 0 8px; gap: 4px; }
  .ldz-nav-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ldz-nav-btn { padding: 8px; gap: 0; font-size: 1.05rem; }
  .ldz-nav-back-lab { /* keep short label on phone */ font-size: 0.85rem; }
  .ldz-nav-logo img { height: 20px; }
  .ldz-details-grid, .ldz-details-2, .ldz-details-3 { grid-template-columns: 1fr; }
  .ldz-details-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .ldz-details-cell:last-child { border-bottom: 0; }
  .ldz-seller-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .ldz-nav-back-lab { display: none; }
  .ldz-nav-back span[aria-hidden] { font-size: 1.6rem; }
}

/* Phone listings: true full screen with floating back / save / share / report over photos. Desktop nav unchanged. */
.ldz-float-chrome { display: none; }
@media (max-width: 760px) {
  .ldz-nav { display: none !important; }
  .ldz-float-chrome {
    display: flex;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 7;
    pointer-events: none;
    justify-content: space-between;
    align-items: flex-start;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0;
    box-sizing: border-box;
  }
  .ldz-float-chrome > * { pointer-events: auto; }
  .ldz-float-actions { display: inline-flex; gap: 8px; align-items: center; }
  .ldz-float-btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 32, 24, 0.48);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  }
  .ldz-float-btn.on { color: #f5d76e; }
  .ldz-float-back span { font-size: 1.7rem; font-weight: 400; margin-top: -2px; }

  /* Overlay: edge-to-edge, no panel chrome */
  .hy-listing-overlay { padding: 0; }
  .hy-listing-overlay-panel {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .hy-listing-overlay-backdrop { display: none; }
  .hy-listing-overlay-bar::before { display: none !important; }
  .hy-listing-overlay .ld-page.ld-clean,
  .hy-listing-overlay .ld-page.ld-sheet,
  .hy-listing-overlay .ld-page {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
  }

  /* Genetics (and any full-page listing): hide site chrome, bleed to edges */
  html:has(#app > .ld-page.ld-z) .app-header,
  html:has(#app > .ld-page.ld-z) .app-footer { display: none !important; }
  html:has(#app > .ld-page.ld-z) #app { min-height: 100dvh; }
  #app > .ld-page.ld-z {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Photos flush to the top; no rounded panel */
  .ld-z .ld-hero { margin: 0; padding: 0; display: block; }
  .ld-z .ldz-gallery,
  .ld-z .ldz-gallery.has-tiles,
  .hy-listing-overlay .ld-overlay .ldz-gallery.has-tiles {
    border-radius: 0 !important;
    gap: 0 !important;
    height: min(56vw, 320px) !important;
    min-height: 220px;
  }
  .ld-z .ldz-gallery .ld-hero-media.gallery,
  .ld-z .ldz-gallery.has-tiles .ld-hero-media.gallery,
  .hy-listing-overlay .ld-overlay .ldz-gallery.has-tiles .ld-hero-media.gallery,
  .ld-z .ldz-tiles,
  .ld-z .ldz-tile {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .ld-z .ldz-main {
    padding: 14px 16px 0;
    box-sizing: border-box;
  }
  /* Oct 21 (David 5:25 AM): same corner inset as desktop, equal bottom and right (was margin 8px 16px 0, so 26px right). */
  .ld-z .ldz-see-all { margin: 0; right: 14px; bottom: 14px; }
}

/* Address autocomplete: keep suggestions above sticky buy cards and overlay chrome */
.place-pick { position: relative; }
.ldz-dcalc-row.place-pick .place-menu,
.place-pick .place-menu { z-index: 40; }
.hy-listing-overlay .place-menu { z-index: 20; }


/* Listing r3: pickup/delivery map + weight subtext + bottom seller follow */
.ldz-wt-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.ldz-ship {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white, #fff);
}
.ldz-ship-line { margin: 0 0 10px; color: var(--ink); font-size: 0.98rem; }
.ldz-map-wrap {
  position: relative;
  margin: 0 0 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #e8ebe6;
}
.ldz-ship-map, #listing-map.ldz-ship-map {
  height: 260px;
  width: 100%;
  min-height: 220px;
  border-radius: 0;
  box-shadow: none;
}
.ldz-map-expand {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  min-height: 34px;
  padding: 6px 12px;
  background: rgba(255, 252, 247, 0.94) !important;
  box-shadow: 0 1px 6px rgba(20, 32, 24, 0.18);
}
.ldz-map-wrap.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 1300;
  margin: 0;
  border-radius: 0;
  border: 0;
  height: 100vh;
  height: 100dvh;
}
.ldz-map-wrap.is-expanded .ldz-ship-map,
.ldz-map-wrap.is-expanded #listing-map.ldz-ship-map {
  height: 100% !important;
  min-height: 100%;
}
.ldz-map-wrap.is-expanded .ldz-map-expand {
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
}
body.hy-listing-map-fs { overflow: hidden; }
.ldz-ship .ldz-dcalc { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ldz-ship-h { margin: 0 0 8px; font-size: 1rem; font-weight: 700; }
.ld-seller-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hy-pin-dest .hy-dot-dest { background: #c53030; box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.25); }
@media (max-width: 760px) {
  .ldz-ship-map, #listing-map.ldz-ship-map { height: 220px; }
}

/* Age slider: value under each handle */
.age-tip {
  position: absolute; top: 30px; transform: translateX(-50%);
  font-size: 0.8rem; font-weight: 650; color: var(--ink); white-space: nowrap;
  pointer-events: none; line-height: 1.2;
}
.age-tip[hidden] { display: none; }
.age-tip-min { z-index: 2; }

.ldz-assoc td a { color: var(--ink); text-decoration: underline; }
.ldz-assoc td a.ldz-reg-link { color: #1a5fb4; text-decoration: none; }
.ldz-assoc td a.ldz-reg-link:hover, .ldz-assoc td a.ldz-reg-link:focus-visible { text-decoration: underline; }
.ldz-assoc td { overflow-wrap: anywhere; }


/* Nov 5 (David): photo-overlay cleanup — sticky listing header carries actions; keep float chrome off;
   gallery fullscreen control is a plain ink glyph (same family as header icons), not a dark disc. */
@media (max-width: 760px) {
  .ldz-float-chrome { display: none !important; }
  .ld-z .ld-fs-btn,
  .hy-listing-overlay .ld-fs-btn {
    width: 40px; height: 40px; min-width: 40px; min-height: 40px;
    border: 0; border-radius: 8px; padding: 0;
    background: transparent; box-shadow: none;
    color: var(--green-d);
    font-size: 1.25rem; font-weight: 500;
    text-shadow: 0 0 3px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.25);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .ld-z .ld-fs-btn:hover,
  .hy-listing-overlay .ld-fs-btn:hover { background: transparent; color: var(--green); }
}

/* Phones: thin sticky header like desktop (back · logo · save/share/report icons) instead of floating circles. */
@media (max-width: 760px) {
  .ldz-float-chrome { display: none !important; }
  .ld-z .ldz-nav,
  .hy-listing-overlay .ld-overlay .ldz-nav {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    position: sticky;
    top: 0;
    z-index: 1100;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    min-height: 48px;
    padding: calc(4px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 4px max(10px, env(safe-area-inset-left, 0px)) !important;
    background: #f4f1ea !important;
    background-color: #f4f1ea !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .ld-z .ldz-nav::before { display: none; }
  .ld-z .ldz-nav-back { font-weight: 400; min-height: 40px; min-width: 40px; }
  .ld-z .ldz-nav-btn { font-weight: 400; min-width: 40px; min-height: 40px; justify-content: center; }
  .ld-z .ldz-nav-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ld-z .ldz-nav-logo img { height: 22px; width: auto; }
}
@media (min-width: 381px) and (max-width: 760px) {
  .ld-z .ldz-nav-back-lab { display: inline !important; font-size: 0; }
  .ld-z .ldz-nav-back-lab::after { content: "Back"; font-size: 0.9rem; }
}

/* Phones: header always one row — fixed icon buttons, arrow-only back on narrow, logo shrinks. */
@media (max-width: 760px) {
  .ld-z .ldz-nav,
  .hy-listing-overlay .ld-overlay .ldz-nav {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    column-gap: 6px !important;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .ld-z .ldz-nav-back { flex-shrink: 0; white-space: nowrap; padding: 0 2px; }
  .ld-z .ldz-nav-logo { min-width: 0; overflow: hidden; display: flex; justify-content: center; justify-self: center; max-width: 100%; }
  .ld-z .ldz-nav-logo img { height: 22px; width: auto; max-width: 100%; object-fit: contain; }
  .ld-z .ldz-nav-actions {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 2px !important; flex-shrink: 0; white-space: nowrap; justify-self: end;
  }
  .ld-z .ldz-nav-btn {
    flex: 0 0 34px !important; width: 34px !important; height: 34px !important;
    min-width: 34px !important; min-height: 34px !important; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center; gap: 0 !important;
  }
}
@media (max-width: 380px) {
  .ld-z .ldz-nav-back-lab { display: none !important; }
  .ld-z .ldz-nav-back { min-width: 34px; justify-content: center; }
  .ld-z .ldz-nav-logo img { height: 20px; }
}

/* Phones: logo exactly centered regardless of side widths; back at start, icons at end, one row. */
@media (max-width: 760px) {
  .ld-z .ldz-nav,
  .hy-listing-overlay .ld-overlay .ldz-nav {
    position: sticky;
    grid-template-columns: auto 1fr auto !important;
  }
  .ld-z .ldz-nav-back { grid-column: 1; justify-self: start; }
  .ld-z .ldz-nav-actions { grid-column: 3; justify-self: end; }
  .ld-z .ldz-nav-logo {
    position: absolute !important;
    left: 50%;
    top: calc(50% + env(safe-area-inset-top, 0px) / 2);
    transform: translate(-50%, -50%);
    max-width: calc(100% - 2 * 124px);
    margin: 0 !important;
  }
}
@media (max-width: 380px) {
  .ld-z .ldz-nav-logo { max-width: calc(100% - 2 * 116px); }
}

/* ---- Listing photo gallery (inside listing panel) ---- */
.hyg-gallery { position: absolute; inset: 0; z-index: 1300; background: #f4f1ea; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.hyg-gallery.hyg-fixed { position: fixed; z-index: 3000; }
.hyg-top { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 48px; padding: calc(4px + env(safe-area-inset-top, 0px)) 14px 4px; background: #f4f1ea; }
.hyg-back { justify-self: start; border: 0; background: transparent; font: inherit; font-weight: 400; font-size: 0.95rem; color: var(--ink); cursor: pointer; padding: 8px 4px; display: inline-flex; align-items: center; gap: 4px; }
.hyg-back span[aria-hidden] { font-size: 1.5rem; line-height: 1; }
.hyg-count { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.hyg-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; padding: 4px 14px 24px; align-items: start; }
.hyg-grid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hyg-row { display: grid; gap: 6px; }
.hyg-row.hyg-two { grid-template-columns: 1fr 1fr; }
.hyg-row.hyg-two.hyg-solo { grid-template-columns: 1fr; }
.hyg-tile { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #e3ded2; cursor: zoom-in; overflow: hidden; border-radius: 4px; aspect-ratio: 3 / 2; }
.hyg-row.hyg-one .hyg-tile { aspect-ratio: 16 / 10; }
.hyg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hyg-video { cursor: pointer; background: #111; }
.hyg-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; padding-left: 4px; }
.hyg-rail { position: sticky; top: 56px; display: flex; flex-direction: column; gap: 6px; }
.hyg-price { font-size: 1.35rem; font-weight: 700; color: var(--green); display: inline-flex; align-items: baseline; gap: 0.15em; }
.hyg-sum { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.hyg-loc { font-size: 0.88rem; color: var(--ink-soft); }
.hyg-rail .hyg-cta { margin-top: 8px; width: 100%; }
@media (max-width: 760px) {
  .hyg-body { grid-template-columns: 1fr; padding: 0 0 calc(80px + env(safe-area-inset-bottom, 0px)); }
  .hyg-grid { gap: 4px; }
  .hyg-row { gap: 4px; }
  .hyg-row.hyg-two { grid-template-columns: 1fr; }
  .hyg-tile, .hyg-row.hyg-one .hyg-tile { border-radius: 0; aspect-ratio: 4 / 3; }
  .hyg-back-lab { display: none; }
  .hyg-rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 10px; background: #f4f1ea; border-top: 1px solid var(--line); padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .hy-listing-overlay-panel .hyg-rail { position: sticky; }
  .hyg-rail .hyg-price { font-size: 1.1rem; }
  .hyg-rail .hyg-sum { font-size: 0.8rem; }
  .hyg-rail .hyg-loc { display: none; }
  .hyg-rail .hyg-cta { margin: 0 0 0 auto; width: auto; min-height: 40px; }
}

/* ---- Full-screen viewer ---- */
html.hyg-lock, html.hyg-lock body { overflow: hidden !important; }
.hyg-viewer { position: fixed; inset: 0; z-index: 5000; background: #fff; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; color: var(--ink); }
.hyg-vtop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 6px; }
.hyg-vact { justify-self: end; display: inline-flex; gap: 8px; }
.hyg-vbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.18); font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); padding: 0; }
.hyg-vbtn.on [data-ico] { color: #d4a514; }
.hyg-x { justify-self: start; }
.hyg-vcount { background: #f0f0f0; border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; font-weight: 700; }
.hyg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hyg-stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; user-select: none; }
.hyg-slide { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hyg-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; transition: transform .05s linear; transform-origin: center; }
.hyg-vid { width: min(100%, 1100px); aspect-ratio: 16 / 9; }
.hyg-vid iframe, .hyg-vid video { width: 100%; height: 100%; border: 0; display: block; }
.hyg-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 1px 6px rgba(0,0,0,.2); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2; color: var(--ink); }
.hyg-arrow.prev { left: 12px; } .hyg-arrow.next { right: 12px; }
.hyg-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; justify-content: safe center; scrollbar-width: thin; }
.hyg-thumb { flex: 0 0 auto; width: 72px; height: 50px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: #ddd; cursor: pointer; opacity: .7; }
.hyg-thumb.on { border-color: var(--green); opacity: 1; }
.hyg-thumb.is-video { position: relative; } .hyg-thumb.is-video::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-shadow: 0 1px 3px #000; }
.hyg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hyg-vbar { display: flex; align-items: center; justify-content: center; gap: 4px 16px; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #eee; text-align: center; }
.hyg-vbar .hyg-price { font-size: 1.1rem; color: var(--ink); }
.hyg-vbar .hyg-cta { min-height: 40px; }
@media (max-width: 760px) {
  .hyg-viewer { background: #000; color: #fff; }
  .hyg-vcount { background: rgba(255,255,255,.18); color: #fff; }
  .hyg-stage { touch-action: none; }
  .hyg-arrow { display: none; }
  .hyg-thumbs { justify-content: flex-start; }
  .hyg-thumb { width: 56px; height: 40px; }
  .hyg-vbar { background: #fff; color: var(--ink); justify-content: space-between; text-align: left; }
  .hyg-vbar .hyg-loc { display: none; }
}

/* Pull-down-to-close cue on phones: fills while the pull is held, turns solid when releasing will close. */
.hy-pull-cue { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 64px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.45); z-index: 95; opacity: 0; transition: opacity 0.15s; pointer-events: none; overflow: hidden; }
.hy-pull-cue.on { opacity: 1; }
.hy-pull-cue-bar { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: #fff; }
.hy-pull-cue.armed .hy-pull-cue-bar { background: #2e7d4f; }
.hy-listing-overlay[hidden] .hy-pull-cue { display: none; }

/* Delivery calculator result: unit suffix at half size; steady digits while counting up. */
.ldz-dcalc-box b { font-variant-numeric: tabular-nums; }
.ldz-dcalc-box b .hy-amt { font-size: 1em; color: inherit; font-weight: inherit; text-transform: none; letter-spacing: normal; }
.ldz-dcalc-box b .hy-unit { font-size: 0.5em; color: inherit; font-weight: inherit; text-transform: none; letter-spacing: normal; }

/* Listing form Preview: the real public listing with a small Preview bar on top. */
.list-preview-full { position: fixed; inset: 0; z-index: 110; overflow-y: auto; overscroll-behavior: contain; padding: 0; margin: 0; max-width: none; background: var(--bg, #f5f3ee); }
html.hy-form-preview, html.hy-form-preview body { overflow: hidden; }
.list-preview-bar { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: rgba(250, 248, 243, 0.96); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.list-preview-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: #2e7d4f; border-radius: 999px; padding: 3px 10px; }
.list-preview-note { font-size: 0.85rem; color: var(--ink-soft); flex: 1 1 auto; min-width: 0; }
.list-preview-bar .btn { min-height: 36px; padding: 6px 14px; }
@media (max-width: 760px) {
  .list-preview-bar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 120; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(0, 0, 0, 0.08); border-bottom: 0; }
  .list-preview-note { display: none; }
  .list-preview-bar .btn { flex: 1 1 0; }
  .list-preview-live { padding-bottom: 72px; }
}

/* Producer profile: ranch storefront (cover, overlapping logo, tabs, sale cards, story, program, gallery, connect rail, CTA). */
.rs-page .rs-cover { border-radius: 14px; height: clamp(200px, 30vw, 420px); }
.rs-page .ranch-body.rs-body { margin-top: 0; }
.rs-head { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 24px; align-items: end; padding: 0 clamp(4px, 2vw, 24px); position: relative; }
.rs-logo.ranch-av { width: 148px; height: 148px; border-radius: 50%; margin-top: -74px; border: 5px solid var(--white); box-shadow: 0 10px 30px rgba(20, 32, 24, 0.18); background: var(--white); position: relative; z-index: 2; }
.rs-id { padding-top: 14px; min-width: 0; }
.rs-id h1 { margin: 2px 0 4px; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; overflow-wrap: anywhere; }
.rs-loc { margin: 0; color: var(--ink-soft); }
.rs-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rs-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink); }
.rs-badge-verified { background: var(--green); color: #fff; }
.rs-actions { display: grid; gap: 10px; justify-items: end; padding-top: 14px; }
.rs-actions-main { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rs-actions-icons { display: flex; gap: 6px; }
.rs-actions-other { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rs-actions-other:empty { display: none; }
.rs-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rs-icon:hover, .rs-icon:focus-visible { border-color: var(--green); color: var(--green); }
.rs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 22px 0 0; border: 1px solid var(--line); border-radius: 14px; background: var(--white); overflow: hidden; }
.rs-stats .ranch-stat { padding: 14px 16px; border-left: 1px solid var(--line); }
.rs-stats .ranch-stat:first-child { border-left: 0; }
.rs-tabs { position: sticky; top: var(--hy-header-h, 64px); z-index: 20; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 18px 0 0; padding: 0 4px; background: var(--paper); border-bottom: 1px solid var(--line); }
.rs-tabs::-webkit-scrollbar { display: none; }
.rs-tabs a { flex: none; padding: 14px 14px 12px; font-weight: 600; font-size: 0.92rem; color: var(--ink-soft); text-decoration: none; border-bottom: 3px solid transparent; }
.rs-tabs a.on, .rs-tabs a:hover { color: var(--green-d); border-bottom-color: var(--green); }
.rs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; margin-top: 24px; align-items: start; }
.rs-main { min-width: 0; }
.rs-sec { margin: 0 0 32px; scroll-margin-top: 130px; }
.rs-sec h2 { margin: 0 0 12px; font-size: 1.35rem; }
.rs-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rs-sec-head h2 { margin: 0; }
.rs-cards.cards-3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rs-about-text { margin: 0; white-space: pre-wrap; line-height: 1.65; color: var(--ink-soft); font-size: 1rem; max-width: 70ch; }
.rs-program { padding: 20px 22px; background: var(--green-l); border: 0; }
.rs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.rs-fact { display: grid; gap: 2px; padding: 12px 14px; background: var(--white); border-radius: 10px; }
.rs-fact-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rs-ops { margin-top: 16px; }
.rs-ops h3 { margin: 0 0 6px; font-size: 1rem; }
.rs-ops p { margin: 0; white-space: pre-wrap; color: var(--ink-soft); }
.rs-mtabs { display: inline-flex; gap: 4px; background: var(--paper-2); border-radius: 999px; padding: 3px; }
.rs-mtabs button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.rs-mtabs button.on { background: var(--white); color: var(--green-d); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.rs-mtabs button span { color: var(--muted); font-weight: 500; }
.rs-mgrid { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rs-gallery[data-show="photo"] .rs-mgrid[data-m="photo"], .rs-gallery[data-show="video"] .rs-mgrid[data-m="video"] { display: grid; }
.rs-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.rs-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.rs-tile:hover img { transform: scale(1.04); }
.rs-tile.rs-more { display: none; }
.rs-gallery.rs-all .rs-tile.rs-more { display: block; }
.rs-play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.rs-mall { margin-top: 12px; }
.rs-rail { position: sticky; top: calc(var(--hy-header-h, 64px) + 64px); }
.rs-connect { padding: 20px; display: grid; gap: 10px; scroll-margin-top: 130px; }
.rs-connect h2 { margin: 0 0 4px; font-size: 1.1rem; }
.rs-line { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--ink-soft); font-size: 0.92rem; overflow-wrap: anywhere; }
.rs-line a { color: var(--green-d); }
.rs-connect .btn-wide { width: 100%; justify-content: center; text-align: center; }
.rs-connect .ranch-social { margin: 2px 0 0; }
.rs-map { height: 190px; border-radius: 10px; overflow: hidden; background: var(--paper-2); margin-top: 4px; z-index: 0; }
.rs-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 12px; padding: clamp(22px, 4vw, 40px); border-radius: 16px; background: var(--green-d); color: #fff; }
.rs-cta h2 { margin: 0 0 6px; color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.rs-cta p { margin: 0; color: rgba(255, 255, 255, 0.82); max-width: 56ch; }
.rs-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rs-cta .btn-primary { background: #fff; color: var(--green-d); border-color: #fff; }
.rs-cta .rs-cta-follow { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: transparent; }
@media (max-width: 1080px) {
  .rs-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-rail { position: static; }
  .rs-connect { grid-template-columns: 1fr 1fr; align-items: start; }
  .rs-connect h2, .rs-connect .rs-map { grid-column: 1 / -1; }
  .rs-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rs-head { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 0; }
  .rs-logo.ranch-av { width: 112px; height: 112px; margin-top: -56px; }
  .rs-id { padding-top: 4px; }
  .rs-badges { justify-content: center; }
  .rs-actions { justify-items: center; width: 100%; padding-top: 6px; }
  .rs-actions-main { width: 100%; justify-content: center; }
  .rs-actions-main .btn { flex: 1 1 0; }
  .rs-actions-other { justify-content: center; }
  .rs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-stats .ranch-stat:nth-child(3) { border-left: 0; }
  .rs-stats .ranch-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .rs-tabs { top: var(--hy-header-h, 56px); margin-left: -12px; margin-right: -12px; padding: 0 8px; }
  .rs-connect { grid-template-columns: 1fr; }
  .rs-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .rs-cta-actions .btn { flex: 1 1 0; }
}
.rs-cards .rs-hide { display: none; }
.rs-more-cards { margin-top: 14px; }
/* Storefront v2 header, sections and editor (Oct 2026) */
.rs-logo.ranch-av { box-sizing: border-box; }
.rs-head { align-items: start; }
.rs-id { padding-top: 12px; }
.rs-id h1 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin: 0 0 4px; }
.rs-check { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--green); color: #fff; font-size: 0.5em; vertical-align: middle; }
.rs-loc span { margin-right: 4px; }
.rs-tagline { margin: 6px 0 0; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62ch; }
.rs-badges { margin-top: 8px; }
.rs-actions-main { align-items: flex-start; flex-wrap: nowrap; }
.rs-msg-col { display: grid; gap: 6px; justify-items: center; }
.rs-est { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.rs-icon.on { color: #c8962b; border-color: #c8962b; }
.rs-main { margin-top: 20px; display: grid; gap: 30px; }
.rs-sec { scroll-margin-top: calc(var(--hy-header-h, 64px) + 64px); }
.rs-sold { margin-top: 22px; }
.rs-contact-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.rs-contact-grid.rs-contact-nomap { grid-template-columns: minmax(0, 520px); }
.rs-contact-grid .rs-map { height: 100%; min-height: 280px; margin: 0; border: 1px solid var(--line); }
.rs-connect h3 { margin: 0 0 4px; font-size: 1.1rem; }
.rs-about-video video { width: 100%; max-height: 420px; border-radius: 12px; background: #000; display: block; margin-top: 16px; }
.rs-gal-head { margin-top: 18px; }
.rs-program { margin-top: 16px; }
.profile-subsection { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.profile-sub-title { margin: 0 0 10px; font-size: 1rem; }
.profile-count { display: block; text-align: right; margin-top: 4px; font-size: 0.8rem; }
@media (max-width: 760px) {
  .rs-tagline { white-space: normal; }
  .rs-actions-main { flex-wrap: wrap; }
  .rs-msg-col { flex: 1 1 0; }
  .rs-msg-col .btn { width: 100%; }
  .rs-contact-grid, .rs-contact-grid.rs-contact-nomap { grid-template-columns: 1fr; }
  .rs-contact-grid .rs-map { min-height: 220px; }
}
/* Delivery route strip under the listing map (visual only) */
.ldz-route { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); align-items: start; gap: 4px 14px; margin: 12px 0 4px; padding: 12px 16px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.ldz-route[hidden] { display: none; }
.ldz-route-end { display: grid; gap: 1px; min-width: 0; max-width: 200px; }
.ldz-route-end b { font-size: 0.98rem; line-height: 1.2; overflow-wrap: anywhere; }
.ldz-route-end span { font-size: 0.8rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.ldz-route-to { text-align: right; justify-items: end; }
.ldz-route-mid { min-width: 0; padding-top: 8px; }
.ldz-route-track { position: relative; height: 34px; }
.ldz-route-line { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 2px; background: var(--green-d, #1f5c3b); }
.ldz-route-start { position: absolute; left: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--green-d, #1f5c3b); }
.ldz-route-stop { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; background: var(--green-d, #1f5c3b); }
.ldz-route-truck { position: absolute; bottom: 7px; left: 4px; width: 90px; height: auto; pointer-events: none; }
.ldz-route-truck.go { animation: ldz-truck 3.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
@keyframes ldz-truck { from { left: 4px; } to { left: calc(100% - 104px); } }
.ldz-route-meta { margin: 6px 0 0; text-align: center; font-size: 0.86rem; color: var(--ink-soft); }
.ldz-route-meta span { margin: 0 8px; color: var(--line); }
@media (prefers-reduced-motion: reduce) {
  .ldz-route-truck.go { animation: none; left: calc(100% - 104px); }
}
@media (max-width: 560px) {
  .ldz-route { grid-template-columns: 1fr 1fr; padding: 10px 12px; }
  .ldz-route-mid { grid-column: 1 / -1; grid-row: 2; padding-top: 2px; }
  .ldz-route-truck { width: 66px; }
  .ldz-route-truck.go { animation-name: ldz-truck-sm; }
  @media (prefers-reduced-motion: reduce) { .ldz-route-truck.go { left: calc(100% - 80px); } }
}
@keyframes ldz-truck-sm { from { left: 4px; } to { left: calc(100% - 80px); } }
/* Profile stats overlay on the cover photo */
.rs-page .rs-cover { position: relative; }
.rs-ov { position: absolute; left: auto; right: 16px; bottom: 16px; max-width: calc(100% - 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; padding: 9px 6px; border-radius: 12px; background: rgba(14, 22, 17, 0.58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-size: 0.95rem; line-height: 1; z-index: 1; }
.rs-ov-stat { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; white-space: nowrap; }
.rs-ov-stat + .rs-ov-stat { border-left: 1px solid rgba(255, 255, 255, 0.28); }
.rs-ov-ico { width: 18px; height: 18px; flex: none; opacity: 0.92; }
.rs-ov-label { opacity: 0.92; }
.rs-ov b { font-weight: 700; }
.rs-ov-none { font-weight: 600; opacity: 0.9; }
.rs-ov-stars { position: relative; display: inline-block; font-size: 1.05rem; letter-spacing: 1px; line-height: 1; }
.rs-ov-stars-bg { color: rgba(255, 255, 255, 0.35); }
.rs-ov-stars-fg { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #f5b82e; }
@media (max-width: 760px) {
  .rs-ov { left: 8px; right: 8px; bottom: 64px; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 0; padding: 8px 4px; font-size: 0.8rem; }
  .rs-ov-stat { padding: 0 10px; gap: 5px; }
  .rs-ov-stat + .rs-ov-stat { border-left: 0; }
  .rs-ov-stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.28); }
  .rs-ov-ico { width: 15px; height: 15px; }
  .rs-ov-stars { font-size: 0.82rem; letter-spacing: 0; }
  .rs-ov-stat { padding: 0 8px; min-width: 0; }
}
/* Narrow tablets: compact the cover stats bar so it clears the logo at 16px from the bottom */
@media (min-width: 761px) and (max-width: 960px) {
  .rs-ov { font-size: 0.82rem; padding: 7px 2px; }
  .rs-ov-stat { padding: 0 9px; gap: 5px; }
  .rs-ov-ico { width: 15px; height: 15px; }
  .rs-ov-stars { font-size: 0.85rem; letter-spacing: 0; }
}
/* Lucide map-pin location icons */
.hy-loc-pin { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; stroke-width: 2; }
.hy-loc-pin-wrap { display: inline-flex; align-items: center; margin-right: 4px; }
.meta-loc, .hy-map-card-loc { display: flex; align-items: center; gap: 4px; }
.meta-loc .hy-loc-pin, .hy-map-card-loc .hy-loc-pin { width: 14px; height: 14px; color: var(--ink-soft); }
.ld-sum-ico .hy-loc-pin { width: 15px; height: 15px; }
.map-view-btn .hy-loc-pin { width: 20px; height: 20px; }
/* Full-bleed profile cover: edge to edge at every width (uses the real viewport width so there's no sideways scroll) */
.rs-page .rs-cover { width: var(--hy-vw, 100vw); max-width: none; margin-left: calc(50% - var(--hy-vw, 100vw) / 2); border-radius: 0; height: clamp(220px, 28vw, 520px); background-size: cover; background-position: center; }
.rs-page .rs-cover .ranch-cover-video { object-fit: cover; width: 100%; height: 100%; }
.rs-page { padding-top: 0; }
/* One row of cards per section until View all */
.rs-cards[data-rs-row] .rs-hide { display: none; }
.rs-more-cards[hidden] { display: none; }
/* Stats bar: on the cover for desktop/tablet, under the location line on phones */
.rs-ov-page { display: none; }
.rs-ov-stars-empty .rs-ov-stars-bg { color: rgba(255, 255, 255, 0.8); }
.rs-assoc { margin-top: 16px; }
.rs-assoc h3 { margin: 0 0 8px; font-size: 1rem; }
@media (max-width: 760px) {
  .rs-ov-cover { display: none; }
  .rs-ov.rs-ov-page { display: grid; position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 0; margin: 10px auto 0; padding: 10px 4px; max-width: 340px; width: 100%; box-sizing: border-box; background: var(--white); border: 1px solid var(--line); border-radius: 12px; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); font-size: 0.85rem; text-align: left; }
  .rs-ov-page .rs-ov-stat { padding: 0 12px; }
  .rs-ov-page .rs-ov-stat:nth-child(even) { border-left: 1px solid var(--line); }
  .rs-ov-page .rs-ov-ico { color: var(--green-d, #1f5c3b); opacity: 1; }
  .rs-ov-page .rs-ov-label { opacity: 1; color: var(--ink-soft); }
  .rs-ov-page .rs-ov-stars-bg { color: #cfd6cf; }
  .rs-ov-page .rs-ov-stars-empty .rs-ov-stars-bg { color: #b9c2b9; }
}
/* Save / Share / Report on the cover's top-right corner */
.rs-cover-icons { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; }
.rs-cover-icons .rs-icon { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.88); color: var(--ink, #1c2a21); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: inline-grid; place-items: center; font-size: 1rem; cursor: pointer; }
.rs-cover-icons .rs-icon:hover { background: #fff; }
.rs-cover-icons .rs-icon.on { color: #c8962b; }
.rs-actions { align-content: start; }
@media (max-width: 760px) {
  .rs-cover-icons { top: 16px; right: 16px; gap: 6px; }
  .rs-cover-icons .rs-icon { width: 34px; height: 34px; }
}
/* Profile card rows reuse the home page row; View all opens them as a grid with the same card width */
.rs-cards.home-row.rs-open { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
@media (max-width: 1280px) { .rs-cards.home-row.rs-open { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rs-cards.home-row.rs-open { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
/* Header after Message/Follow moved to the cover icons */
.rs-head .rs-actions { padding-top: 18px; justify-items: end; }
.rs-msg-slot { grid-column: 1 / -1; }
.rs-msg-slot:empty { display: none; }
.rs-cover-icons .rs-icon svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .rs-head .rs-actions { padding-top: 2px; justify-items: center; }
  .rs-cover-icons .rs-icon svg { width: 16px; height: 16px; }
}

/* Producer profile: Cattle, Beef and Genetics are the home page rows (same section, head, See all, row and cards).
   The home rows sit in a .section (container width minus gutters); the profile page is wider, so cap the
   rows at the home content width so cards come out the same size. Vertical rhythm matches the home rows. */
.rs-main > .rs-home-sec.home-row-section {
  padding: 0 0 8px;
  margin: 0;
  width: 100%;
  max-width: calc(min(var(--hy-container-cap, 1320px), var(--hy-vw, 100vw) - 2 * var(--hy-gutter)) - 2 * var(--hy-gutter));
  scroll-margin-top: calc(var(--hy-header-h, 64px) + 64px);
}
.rs-main > .rs-home-sec.home-row-section + .rs-home-sec { margin-top: -2px; padding-top: 0; }
@media (max-width: 980px) {
  /* Home rows here: .section is (100vw - 2 gutters) wide with 16px padding; the profile page has 12px padding. */
  .rs-main > .rs-home-sec.home-row-section {
    padding: 0 0 4px;
    margin-left: calc(var(--hy-gutter) - 12px);
    max-width: none;
    width: calc(var(--hy-vw, 100vw) - 2 * var(--hy-gutter) - 32px);
  }
  .rs-main > .rs-home-sec.home-row-section + .rs-home-sec { margin-top: -16px; padding-top: 0; }
}
.ranch-filter-bar { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; padding: 6px 12px; border-radius: 999px; background: var(--green-l, #e8f1ea); font-size: 0.9rem; }
.ranch-filter-bar a { color: var(--green-d, #1f5c3b); text-decoration: none; }
.ranch-filter-bar .ranch-filter-clear { font-weight: 700; }
.gx2-main > .ranch-filter-bar { margin: 0 0 10px; }
.browse-title .ranch-filter-bar { margin-left: 10px; }

/* Producer profile About + Contact (Oct 19): left 73% Our Story + Our Breeding Program, right 27% Connect card. */
.rs-ac { display: grid; grid-template-columns: minmax(0, 73fr) minmax(0, 27fr); gap: 24px; align-items: start; }
.rs-ac.rs-ac-solo { grid-template-columns: minmax(0, 420px); }
.rs-ac-left { display: grid; gap: 24px; min-width: 0; scroll-margin-top: calc(var(--hy-header-h, 64px) + 64px); }
.rs-ac h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; color: var(--ink, #142018); }
/* Oct 19: the ranch photo stretches to the height of the About text (photo at most 50% wide, text at least 50%). */
.rs-ac-story { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 28px; align-items: stretch; }
.rs-ac-story.rs-ac-nophoto { grid-template-columns: minmax(0, 1fr); }
.rs-ac-story h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.rs-ac-story .rs-about-text { max-width: none; font-size: 0.98rem; line-height: 1.7; }
.rs-ac-details { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 0; color: var(--ink-soft); font-size: 0.92rem; }
.rs-ac-detail { display: inline-flex; align-items: center; gap: 8px; }
.rs-ac-detail .rs-ico { width: 18px; height: 18px; color: var(--ink-soft); }
.rs-ac-dot { color: var(--muted); }
.rs-ac .rs-assoc { margin-top: 14px; }
.rs-ac .rs-assoc h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 0.95rem; }
.rs-ac .rs-assoc h3 .rs-ico { width: 18px; height: 18px; color: var(--green-d, #1f5c3b); }
.rs-ac-photo { position: relative; margin: 0; border-radius: 12px; overflow: hidden; align-self: stretch; height: 100%; min-height: 240px; max-width: 100%; background: var(--paper-2); }
.rs-ac-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.rs-ac-breed { background: #eef1ee; border-radius: 12px; padding: 22px 24px; }
.rs-ac-breed h2 { margin: 0 0 16px; font-size: 1.45rem; }
.rs-ac-attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 0; }
.rs-ac-attr { display: flex; align-items: flex-start; gap: 12px; padding: 2px 18px; border-left: 1px solid rgba(20, 32, 24, 0.14); min-width: 0; }
.rs-ac-attr:first-child { border-left: 0; padding-left: 0; }
.rs-ac-attr-ico.rs-ico { width: 28px; height: 28px; flex: none; color: var(--ink, #142018); }
.rs-ac-attr-label { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 2px; }
.rs-ac-attr b { display: block; font-size: 0.9rem; font-weight: 650; overflow-wrap: anywhere; }
.rs-ac-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 650; font-size: 0.9rem; color: var(--ink, #142018); text-decoration: none; }
.rs-ac-link:hover { color: var(--green-d, #1f5c3b); text-decoration: underline; }
.rs-ac-connect { background: #eef1ee; border-radius: 12px; padding: 20px; display: grid; gap: 12px; align-content: start; min-width: 0; scroll-margin-top: calc(var(--hy-header-h, 64px) + 64px); }
.rs-ac-connect h2 { margin: 0 0 2px; font-size: 1.2rem; line-height: 1.25; overflow-wrap: anywhere; }
.rs-ac-connect .rs-line { align-items: center; font-size: 0.88rem; color: var(--ink-soft); }
.rs-ac-connect .rs-line .rs-ico, .rs-ac-connect .rs-line .hy-loc-pin { width: 18px; height: 18px; flex: none; color: var(--ink, #142018); }
.rs-ac-connect .btn-wide { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.rs-ac-connect .rs-ac-send { background: #10372a; border-color: #10372a; color: #fff; }
.rs-ac-connect .rs-ac-send:hover { background: #0b2a20; border-color: #0b2a20; }
.rs-ac-connect .rs-ac-web { background: var(--white, #fff); }
.rs-ac-connect .btn .rs-ico { width: 18px; height: 18px; }
.rs-ac-connect .rs-map { height: 170px; margin: 2px 0 0; border-radius: 10px; border: 1px solid var(--line); }
.rs-gmap { position: relative; }
.rs-gmap iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.rs-gmap-open { display: none; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: none) and (pointer: coarse) {
  .rs-gmap iframe { pointer-events: none; }
  .rs-gmap-open { display: block; }
}
.rs-ac-connect .rs-ac-link { margin-top: 0; }
.rs-ac-connect .ranch-social { margin: 0; }
@media (max-width: 980px) {
  .rs-ac, .rs-ac.rs-ac-solo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rs-ac-story, .rs-ac-story.rs-ac-nophoto { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rs-ac-story .rs-ac-photo { order: -1; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .rs-ac-breed { padding: 18px 16px; }
  .rs-ac-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .rs-ac-attr { padding: 2px 12px; }
  .rs-ac-attr:nth-child(odd) { border-left: 0; padding-left: 0; }
}
.profile-check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.profile-check input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--green, #1f5c3b); }

/* Oct 19: profile See all expands the row in place; See less collapses to the first 8. */
button.rs-see-all { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--green); cursor: pointer; }
button.rs-see-all[hidden] { display: none; }
.rs-home-sec:not(.rs-open) .home-row > :nth-child(n+9) { display: none; }
.rs-home-sec.rs-open .home-row { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, var(--rs-card-w, minmax(240px, 1fr))); grid-auto-columns: unset; overflow-x: visible; scroll-snap-type: none; }

/* Oct 19, 2026: one listings page. Cattle / Beef / Genetics sections, Card / List toggle. */
.le-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.le-view { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.le-view-btn { border: 0; background: none; font: inherit; font-weight: 650; font-size: 0.9rem; padding: 7px 14px; border-radius: 999px; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.le-view-btn.on { background: #10372a; color: #fff; }
.le-sms-note { margin: 14px 0 0; }
.le-sec { margin: 6px 0 22px; }
.le-sec-h { margin: 0 0 10px; font-size: 1.12rem; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.le-sec-h span { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: #eef2ee; font-size: 0.8rem; font-weight: 650; text-align: center; }
a.le-title { display: block; color: var(--ink); text-decoration: none; }
a.le-title:hover { text-decoration: underline; }
.le-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.le-card { position: relative; display: flex; flex-direction: column; border: 1px solid #d9e6dc; border-radius: 14px; background: #fff; }
.le-card-photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px 14px 0 0; overflow: hidden; background: #dce8d8; }
.le-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.le-card-photo .le-status { position: absolute; left: 10px; top: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.le-card-pick { position: absolute; right: 10px; top: 10px; background: #fff; border-radius: 8px; padding: 4px; line-height: 0; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.le-card-body { padding: 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.le-card-price { font-weight: 700; color: #10372a; }
.le-card-foot { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 10px; }
.le-card-foot > .btn { padding: 7px 14px; font-size: 0.88rem; }
.le-card-menu { display: block; margin-left: auto; }
.le-card-menu summary { padding: 7px 12px; font-size: 0.88rem; }
.le-focus { outline: 2px solid #147a4e; outline-offset: 2px; }
@media (max-width: 520px) {
  .le-head-actions { width: 100%; }
  .le-head-actions .btn { flex: 1 1 auto; text-align: center; }
  .le-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .le-card-body { padding: 10px; }
  .le-card-body .le-meta { font-size: 0.8rem; }
  .le-card-foot { flex-wrap: wrap; }
  .le-card-foot > .btn, .le-card-menu { flex: 1 1 100%; margin-left: 0; text-align: center; }
  .le-card-menu summary { text-align: center; }
  .le-card-menu .le-menu-list { left: 0; right: auto; }
}

/* Oct 19 (cleanup): Profile Editor. Same bones as the public ranch page, at its full width, with one sticky
   Save / Preview bar, one pencil edit hint, inline fields that read like the text they replace, and photo
   controls on the photos. */
#dash-main.is-profile { max-width: none; padding: 0 var(--hy-gutter, 24px) 56px; overflow-x: clip; }
.dash-shell:has(#dash-main.is-profile), .dash-shell:has(#dash-main.is-profile) .dash-col { overflow: visible; overflow-x: clip; }
@media (min-width: 981px) {
  .dash-shell:has(#dash-main.is-profile) { grid-template-columns: minmax(0, 1fr); overflow-x: clip; }
  .dash-shell:has(#dash-main.is-profile) .dash-aside { display: none; }
  .dash-shell:has(#dash-main.is-profile) .dash-signout { display: none; }
}
.pe-bar { position: sticky; top: var(--pe-top, 66px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  margin: 0 calc(-1 * var(--hy-gutter, 24px)) 18px; padding: 12px var(--hy-gutter, 24px); background: rgba(247, 244, 238, 0.96); backdrop-filter: blur(6px); border-bottom: 1px solid #dfe6dc; }
.pe-bar-left { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; min-width: 0; }
.pe-back { color: var(--ink-soft, #4a5a4e); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.pe-back:hover { color: var(--green-d, #1f5c3b); text-decoration: underline; }
.pe-title { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.pe-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.84rem; font-weight: 650; background: #e3f3ea; color: #0f5e3b; }
.pe-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pe-status[data-state="dirty"] { background: #fff1d6; color: #8a5a00; }
.pe-status[data-state="saving"] { background: #e8eef7; color: #2d4f7c; }
.pe-status a { color: inherit; font-weight: 700; }
.pe-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-bar-actions .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
.pe-bar-actions .btn:disabled { opacity: 0.5; cursor: default; }

.pe-wysiwyg { max-width: none; }
.pe-public { background: var(--paper, #f7f4ec); border: 1px solid #dfe6dc; border-radius: 16px; overflow: hidden; }
.pe-cover.ranch-banner-edit { position: relative; width: 100%; max-width: none; height: clamp(200px, 26vw, 380px); min-height: 0; margin: 0; border: 0; border-radius: 0; outline: 0; background-color: #dfe7dc; background-size: cover; background-position: center; cursor: pointer; }
.pe-cover .ranch-cover-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-cover-tools { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; z-index: 3; }
.pe-photo-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(20, 32, 24, 0.72); color: #fff;
  font: inherit; font-size: 0.84rem; font-weight: 650; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.pe-photo-btn:hover, .pe-photo-btn:focus-visible { background: rgba(20, 32, 24, 0.9); outline: none; }
.pe-photo-btn svg { flex: none; }

.pe-head { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 20px; align-items: start; padding: 0 28px 8px; margin-top: -56px; position: relative; z-index: 2; }
.pe-avatar-wrap { position: relative; width: 128px; height: 128px; }
.pe-avatar { width: 128px; height: 128px; border-radius: 50%; border: 4px solid #fff; background: #dce8d8 center/cover no-repeat; color: #10372a; font-size: 2rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); }
.pe-avatar-badge { position: absolute; right: 4px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 32, 24, 0.82); color: #fff; border: 2px solid #fff; pointer-events: none; }
.pe-head-main { min-width: 0; padding-top: 64px; display: grid; gap: 4px; }

.pe-inline { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
.pe-lab { display: inline-flex; align-items: center; gap: 5px; padding-left: 11px; font-size: 0.78rem; font-weight: 650; color: var(--muted, #6b7a6e); }
.pe-pen { color: #9aa89d; flex: none; }
.pe-inline-name .pe-name { flex: 0 1 auto; width: auto; min-width: 10ch; max-width: 100%; field-sizing: content; }
.pe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pe-wysiwyg input, .pe-wysiwyg textarea, .pe-wysiwyg select {
  width: 100%; box-sizing: border-box; min-height: 40px; margin: 0; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent;
  font: inherit; color: var(--ink, #142018); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.pe-wysiwyg input::placeholder, .pe-wysiwyg textarea::placeholder { color: #98a59b; font-style: italic; }
.pe-wysiwyg input:hover, .pe-wysiwyg textarea:hover { background: rgba(255, 255, 255, 0.7); border-color: #d6e2d8; }
.pe-wysiwyg input:focus, .pe-wysiwyg textarea:focus { outline: none; background: #fff; border-color: #147a4e; box-shadow: 0 0 0 3px rgba(20, 122, 78, 0.12); }
.pe-inline-name { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.pe-inline-name .pe-pen { width: 16px; height: 16px; }
.pe-name { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; font-weight: 750 !important; line-height: 1.2; padding: 4px 10px !important; }
.pe-field-wrap { position: relative; display: block; }
.pe-tag { padding-right: 64px !important; color: var(--ink-soft, #4a5a4e) !important; font-size: 1rem; }
.pe-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: #98a59b; pointer-events: none; }
.pe-head-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 4px 16px; margin-top: 6px; }

.pe-main { padding: 20px 28px 28px; }
.pe-main .rs-ac { gap: 28px; }
.pe-main .rs-ac-left { display: grid; gap: 22px; align-content: start; }
.pe-main .rs-ac-story { align-items: stretch; }
.pe-main .rs-ac-story-text { display: grid; gap: 12px; align-content: start; }
.pe-main .rs-ac-story-text h2, .pe-main .rs-ac-breed h2, .pe-connect h2 { margin: 0; }
.pe-about { min-height: 220px; line-height: 1.65; resize: vertical; font-size: 1rem; }
.pe-ranch-photo { position: relative; margin: 0; border-radius: 12px; overflow: hidden; min-height: 240px; background: #e8eee8; }
.pe-ranch-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-ranch-btn { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.pe-ranch-empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 240px; color: #6b7a6e; font-weight: 650; background: #e8eee8; }
.pe-main .rs-ac-breed { display: grid; gap: 14px; }
.pe-breed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.pe-sub { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; }
.pe-connect { gap: 12px; }
.pe-social { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(20, 32, 24, 0.1); }
.pe-social .social-picker { gap: 8px; margin: 0 0 10px; padding: 0; }
.pe-social .social-logo { width: auto; }
.pe-social .social-logo-mark { width: 40px; height: 40px; border-radius: 12px; }
.pe-social .social-logo-mark svg { width: 20px; height: 20px; }
.pe-social .social-logo-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); min-height: 0; }
.pe-social .social-picker-hint { margin: 0 0 8px; font-size: 0.82rem; }
.pe-social .social-handles { display: grid; gap: 8px; }
.pe-social .social-handle { margin: 0; display: grid; gap: 2px; }
.pe-social .social-handle[hidden] { display: none; }
.pe-social .social-handle label { font-size: 0.78rem; font-weight: 650; color: var(--muted, #6b7a6e); margin: 0; padding-left: 11px; }
.pe-social .social-handle input { background: rgba(255, 255, 255, 0.6); }

@media (max-width: 980px) {
  #dash-main.is-profile { padding: 0 12px 40px; }
  .pe-bar { margin: 0 -12px 14px; padding: 10px 12px; }
  .pe-main .rs-ac { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pe-bar-left { width: 100%; justify-content: space-between; }
  .pe-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pe-bar-actions .btn { white-space: nowrap; }
  .pe-bar-actions { width: 100%; }
  .pe-bar-actions .btn { flex: 1 1 0; min-height: 44px; padding-left: 10px; padding-right: 10px; }
  .pe-cover.ranch-banner-edit { height: 190px; }
  .pe-cover-tools { top: 10px; right: 10px; bottom: auto; left: 10px; }
  .pe-head { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 14px 6px; margin-top: -48px; justify-items: start; }
  .pe-avatar-wrap, .pe-avatar { width: 96px; height: 96px; }
  .pe-head-main { padding-top: 0; width: 100%; }
  .pe-head-row, .pe-breed-grid { grid-template-columns: minmax(0, 1fr); }
  .pe-main { padding: 14px 14px 20px; }
  .pe-main .rs-ac-story { grid-template-columns: minmax(0, 1fr); }
  .pe-ranch-photo { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .rs-ac-nophoto .pe-ranch-photo { aspect-ratio: 16 / 7; }
  .pe-ranch-empty { min-height: 0; height: 100%; }
  .pe-wysiwyg input, .pe-wysiwyg textarea { min-height: 44px; font-size: 16px; }
  .pe-name { font-size: 1.45rem !important; }
  .pe-photo-btn { min-height: 40px; }
}

/* Oct 19: owner-only Edit My Profile in the profile header; saved bar in the editor. */
.rs-edit-profile { padding: 7px 14px; font-size: 0.88rem; font-weight: 650; border-radius: 999px; white-space: nowrap; }
.rs-actions:has(.rs-edit-profile) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .rs-actions:has(.rs-edit-profile) { justify-content: center; }
}

/* Oct 19: brand icons for website and social links on ranch profiles. */
.rs-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rs-brand { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid #d9e6dc; color: #10372a; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.rs-brand svg { width: 18px; height: 18px; display: block; }
.rs-brand:hover, .rs-brand:focus-visible { background: #10372a; border-color: #10372a; color: #fff; transform: translateY(-1px); }
.rs-brand-spotify:hover path { stroke: #10372a; }
.rs-brand:focus-visible { outline: 2px solid #147a4e; outline-offset: 2px; }
@media (max-width: 760px) { .rs-brands { gap: 12px; } .rs-brand { width: 44px; height: 44px; } }
/* Oct 19: listing photo limit 10, with a visible "N of 10 photos" counter under the picker. */
.photo-count { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); }
.photo-count.is-full { color: var(--green-d); font-weight: 600; }
/* Oct 19: tighter spacing between major Producer Profile sections (public + editor), about 30% less.
   One shared variable; spacing inside cards and between cards in a row is unchanged. */
:root { --rs-section-gap: 22px; } /* was 32px between sections */
.rs-sec { margin-bottom: var(--rs-section-gap); }
.rs-tabs { margin-top: calc(var(--rs-section-gap) * 0.6); }             /* header -> nav: 18 -> 13 */
.rs-ac { row-gap: calc(var(--rs-section-gap) * 0.75); }                 /* stacked About / Connect: 24 -> 16.5 */
.rs-ac-left { gap: calc(var(--rs-section-gap) * 0.75); }                /* About -> Breeding: 24 -> 16.5 */
.rs-cta { margin-top: calc(var(--rs-section-gap) * 0.4); }              /* last row -> CTA: 12 -> 9 */
.pe-main { padding-top: calc(var(--rs-section-gap) * 0.65); }           /* editor header -> About: 20 -> 14 */
.pe-main .rs-ac { row-gap: calc(var(--rs-section-gap) * 0.9); }         /* editor stacked sections: 28 -> 20 */
.pe-main .rs-ac-left { gap: calc(var(--rs-section-gap) * 0.7); }        /* editor About -> Breeding: 22 -> 15 */
@media (max-width: 980px) {
  .rs-ac, .rs-ac.rs-ac-solo { row-gap: calc(var(--rs-section-gap) * 0.65); } /* phone stacked: 20 -> 14 */
}
@media (max-width: 760px) {
  .pe-main { padding-top: calc(var(--rs-section-gap) * 0.45); }         /* 14 -> 10 */
}

/* Oct 19 fix: About ranch photo on phones. The box used to get its height only from aspect-ratio while the
   image was absolutely positioned (and the empty state used height: 100%), inside a stretched grid row.
   iPhone Safari can collapse that to 0 px, hiding the photo and its button. On narrow screens the image is
   now in normal flow and sets its own height; the empty state has a real minimum height. */
@media (max-width: 980px) {
  .rs-ac-story .rs-ac-photo {
    order: -1; align-self: start; justify-self: stretch; width: 100%; height: auto; min-height: 0; aspect-ratio: auto;
  }
  .rs-ac-story .rs-ac-photo img {
    position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  }
}
@media (max-width: 980px) {
  .pe-main .rs-ac-story .pe-ranch-photo, .pe-main .rs-ac-story.rs-ac-nophoto .pe-ranch-photo {
    order: -1; align-self: start; justify-self: stretch; width: 100%; height: auto; min-height: 0; aspect-ratio: auto;
  }
  .pe-main .pe-ranch-photo img {
    position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  }
  .pe-main .pe-ranch-empty { height: auto; min-height: 150px; aspect-ratio: 16 / 7; }
}
/* Oct 19: on phones, a Producer Profile row opened with See all uses the same card grid as Home's See all
   (/browse list view): one full-width column, edge to edge with 18px side padding and a 16px gap,
   so cards fill the phone width. Still an in-place expand with See less; desktop unchanged. */
@media (max-width: 760px) {
  .rs-home-sec.rs-open .home-row {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: unset;
    gap: 16px;
    box-sizing: border-box;
    width: var(--hy-vw, 100vw);
    max-width: none;
    margin-left: calc(50% - var(--hy-vw, 100vw) / 2);
    margin-right: 0;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Oct 19: the producer name pill on a listing card opens the producer's profile (path.js handles the click),
   and cards no longer show the "days left" badge. Expiry data and the listing page are unchanged. */
.listing-card .badge-ranch { cursor: pointer; z-index: 2; }
@media (hover: hover) { .listing-card .badge-ranch:hover { text-decoration: underline; text-underline-offset: 2px; } }
.listing-card .badge-ranch:focus-visible { outline: 2px solid var(--green-d, #1b6b45); outline-offset: 2px; }
.listing-card .thumb .days { display: none; }
/* Oct 19: listing-card share button uses an iOS-style share icon (box with an up arrow); same 34px button. */
.card-icon .card-share-ico { width: 16px; height: 16px; display: block; margin: 0 auto; pointer-events: none; }

/* Oct 19: every listing card is the same height. The location and price lines keep their space even
   when a listing has no location or says "Contact for Price", and cards stretch to fill their grid row. */
.listings-grid > .listing-card, .home-row > .listing-card, .cards-3 > .listing-card { align-self: stretch; height: auto; }
.listing-card { display: flex; flex-direction: column; }
.listing-card .listing-card-link { flex: 1 1 auto; }
.listing-card .listing-body { flex: 1 1 auto; }
.listing-card .listing-body .price { min-height: 1.45em; line-height: 1.45; }
.listing-card .listing-body .meta-loc,
.listing-card .listing-body > .meta + .meta { min-height: 20px; line-height: 20px; }

/* Oct 19: no controls on top of any map (zoom +/-, locate me, street view, map type, fullscreen).
   Each map turns them off in its options; this is a safety net. Drag, scroll, pinch and double-tap still work,
   and the attribution text stays because the tile and map licenses require it. */
.leaflet-control-zoom, .leaflet-control-fullscreen, .hy-map-locate,
.gm-fullscreen-control, .gm-svpc, .gm-bundled-control { display: none !important; }

/* Oct 19: hovering a listing card highlights its dot on the map (bigger, gold, on top). Desktop hover only. */
.hy-dot.hover { transform: scale(1.45); background: #e8b84a !important; color: #142018 !important; box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(0, 0, 0, 0.4); transition: transform 0.12s ease; }
.leaflet-marker-icon:has(.hy-dot.hover) { z-index: 100000 !important; }
#save-search[hidden] { display: none !important; }
.listings-grid .empty-bounds { grid-column: 1 / -1; padding: 28px 18px; text-align: center; color: var(--muted, #5b6b5f); }

/* Oct 19: green "New Listing" pill in the upper right of the header (replaces the Sell link). */
.header-actions #sell-btn.new-listing-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff; border: 0; border-radius: 999px;
  padding: 9px 18px; min-height: 40px; font-weight: 650; white-space: nowrap; box-shadow: none;
}
.header-actions #sell-btn.new-listing-pill:hover { background: var(--green-d); color: #fff; }
.header-actions #sell-btn.new-listing-pill:focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; }
@media (max-width: 980px) {
  /* An older rule hides #sell-btn on phones; the pill stays in the phone header. */
  .header-actions #sell-btn.new-listing-pill { display: inline-flex !important; padding: 7px 13px; min-height: 36px; font-size: 0.86rem; }
}
@media (max-width: 360px) {
  .header-actions #sell-btn.new-listing-pill { padding: 6px 10px; font-size: 0.8rem; }
}

/* Oct 19 (David): ONE dropdown caret site-wide. Same 14px chevron, same color, vertically centered, 16px in from the
   right edge, 44px right padding so text never runs under it, tap area at least 44px tall. Native selects use it as the
   only background icon (appearance:none, so no second browser arrow); custom dropdowns use .hy-caret / --hy-caret. */
:root { --hy-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.25l4 4 4-4' fill='none' stroke='%233a4a3e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html body select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--hy-caret) !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 14px !important;
  padding-right: 44px !important;
  min-height: 44px;
  text-overflow: ellipsis;
}
html body select:not([multiple]):not([size])::-ms-expand { display: none; }

/* Oct 19: no blinking text caret on text that can't be edited (for example with caret browsing on).
   The caret stays in inputs, text areas, dropdowns and the rich-text editor. Selection and focus outlines are unchanged. */
html, body, body * { caret-color: transparent; }
input, textarea, select,
[contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"],
[contenteditable="true"] *, [contenteditable=""] *, [contenteditable="plaintext-only"] * { caret-color: auto; }

/* Oct 19: no total-listings count in the browse filter panel (display only; API total and paging unchanged). */
aside.filters .filter-count { display: none !important; }

/* Oct 19: the header cart is icon only (aria-label and title "Cart", count badge kept), 44px tap target. */
.header-actions .cart-link { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 10px; box-sizing: border-box; }
.header-actions .cart-link .cart-link-label { display: none; }
/* Oct 22 (David 11:03 AM): page title with an icon button on the right (Notifications -> settings gear). */
/* Nov 5 (t849u): the text-a-photo tile stays off every dashboard width. Text-to-list itself is unchanged. */
.panel.dash-text-card {
  display: none; align-items: flex-start; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 360px; box-sizing: border-box; margin: 0 0 16px; padding: 14px 16px;
}
.dash-text-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-text-main b { font-size: 0.98rem; }
.dash-text-num { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.dash-text-main .sub { margin: 2px 0 0; font-size: 0.9rem; }
.dash-text-how { margin-top: 4px; font-size: 0.88rem; font-weight: 600; color: var(--green-d); }
.dash-text-icons { display: flex; gap: 8px; flex: none; color: #5c6b62; padding-top: 2px; }
@media (hover: hover) and (pointer: fine) { .dash-text-num { pointer-events: none; } }
@media (max-width: 640px) {
  .panel.dash-text-card { display: none; max-width: none; }
  .dash-text-num { text-decoration: underline; text-underline-offset: 2px; min-height: 28px; display: inline-flex; align-items: center; }
  .dash-text-icons { gap: 6px; }
}
.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-head-row .page-title { margin-right: auto; }
.page-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 999px; color: var(--ink); text-decoration: none; box-sizing: border-box;
}
.page-icon-btn:hover { background: var(--green-l); color: var(--green-d); }
.page-icon-btn:focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; }

/* Oct 19: desktop listing overlay. The price / Edit listing card stops 16px below the sticky top bar
   (Back to search, Save, Share) instead of sliding under it, and scrolls inside itself if it is taller than the space. */
@media (min-width: 901px) {
  .hy-listing-overlay { --ldz-nav-h: 56px; }
  .hy-listing-overlay .ld-overlay .ldz-aside {
    top: calc(var(--ldz-nav-h) + 16px);
    max-height: calc(100vh - var(--ldz-nav-h) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Oct 19: back links are the same round back-arrow button the phone uses (dark translucent circle, white ‹),
   40px, aria-label "Back". Same destinations. The text label stays for screen readers only. */
html body .hy-back-circle {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; justify-self: start;
  background: rgba(20, 32, 24, 0.48); color: #fff; text-decoration: none; cursor: pointer; font-size: 1rem; line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
html body .hy-back-circle:hover { background: rgba(20, 32, 24, 0.66); text-decoration: none; color: #fff; }
html body .hy-back-circle:focus-visible { outline: 2px solid var(--green-d, #0f3f28); outline-offset: 2px; }
html body .hy-back-circle span[aria-hidden] { font-size: 1.7rem; font-weight: 400; line-height: 1; margin-top: -2px; color: #fff; }
html body .hy-back-circle .ldz-nav-back-lab,
html body .hy-back-circle .hyg-back-lab {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; font-size: 0.9rem !important; display: inline !important;
}
html body .hy-back-circle { position: relative; }

/* Oct 19: photo gallery info (producer, price, head/weight/age, location) sits in a card that matches the
   listing page's price card. Desktop: sticky 16px below the gallery's top bar, height capped, scrolls inside.
   Phone: a normal card above the photos (no fixed bar, no overflow). */
@media (min-width: 761px) { .hyg-body { grid-template-columns: minmax(0, 1fr) 280px; } }
html body .hyg-rail {
  background: #fffcf7;
  border: 1px solid rgb(216, 224, 214);
  border-radius: 12px;
  padding: 20px 20px 18px;
  box-shadow: 0 2px 10px rgba(20, 32, 24, 0.06);
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
}
.hyg-producer { font-size: 0.9rem; font-weight: 650; color: var(--green-d, #0f3f28); text-decoration: none; align-self: flex-start; }
.hyg-producer:hover { text-decoration: underline; }
.hyg-producer:focus-visible { outline: 2px solid var(--green-d, #0f3f28); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 761px) {
  html body .hyg-rail {
    position: sticky;
    top: calc(var(--hyg-top-h, 56px) + 16px);
    max-height: calc(100vh - var(--hyg-top-h, 56px) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 760px) {
  .hyg-body { padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
  html body .hyg-rail,
  html body .hy-listing-overlay-panel .hyg-rail {
    position: static;
    order: -1;
    margin: 4px 12px 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    padding: 16px;
    border-top: 1px solid rgb(216, 224, 214);
    width: auto;
    max-width: calc(100% - 24px);
  }
  html body .hyg-rail .hyg-loc { display: block; }
  html body .hyg-rail .hyg-cta { margin: 8px 0 0; width: 100%; min-height: 44px; }
  html body .hyg-rail .hyg-price { font-size: 1.25rem; }
  html body .hyg-rail .hyg-sum { font-size: 0.88rem; }
}

/* Oct 19: fullscreen viewer shows each photo 1200px wide (100% wide on smaller screens), natural height, centered.
   Photos are stored at up to 2048px on the long side, so they stay sharp at 1200. Taller images scroll inside the slide. */
html body .hyg-viewer .hyg-slide { overflow-y: auto; overflow-x: hidden; align-items: safe center; justify-content: center; overscroll-behavior: contain; }
html body .hyg-viewer .hyg-img { width: 1200px; max-width: 100%; height: auto; max-height: none; margin: auto; object-fit: contain; }

/* Oct 19: Connect block inside the listing price card (matches the profile's Connect card). */
.ld-purchase .ld-connect { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgb(216, 224, 214); min-width: 0; }
.ld-connect-h { margin: 0 0 2px; font-size: 1.05rem; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.ld-connect-h a { color: var(--ink, #142018); text-decoration: none; }
.ld-connect-h a:hover { text-decoration: underline; }
.ld-cline { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 0.88rem; color: var(--ink-soft); overflow-wrap: anywhere; min-width: 0; }
.ld-cline a { color: var(--green-d, #0f3f28); min-width: 0; overflow-wrap: anywhere; }
.ld-cline .rs-ico, .ld-cline .hy-loc-pin { width: 18px; height: 18px; flex: none; color: var(--ink, #142018); }
.ld-cline .hy-loc-pin-wrap { display: inline-flex; flex: none; }
.ld-connect .btn-wide { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
.ld-connect .ld-connect-send { background: #10372a; border-color: #10372a; color: #fff; }
.ld-connect .ld-connect-send:hover { background: #0b2a20; border-color: #0b2a20; }
.ld-connect .ld-connect-web { background: var(--white, #fff); }
.ld-connect .btn .rs-ico { width: 18px; height: 18px; flex: none; }
/* Desktop page (not the overlay): the taller card still sticks below the header and scrolls inside if needed. */
@media (min-width: 901px) {
  .ldz-aside { max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 760px) {
  /* Phone: the contact-only price card stays hidden except for its Connect block (the price already shows above). */
  html body .ldz-aside .ld-purchase.ld-purchase-contact:has(.ld-connect) { display: block !important; margin: 16px 0 12px; }
  .ld-purchase.ld-purchase-contact:has(.ld-connect) > .ld-label,
  .ld-purchase.ld-purchase-contact:has(.ld-connect) > .ld-price,
  .ld-purchase.ld-purchase-contact:has(.ld-connect) > .ld-listed { display: none; }
  .ld-purchase.ld-purchase-contact .ld-connect { margin-top: 0; padding-top: 0; border-top: 0; }
  .ldz-aside { max-height: none; overflow: visible; position: static; }
  /* Nov 5 (David 9:29 PM PT): clear space so body headings cannot paint over Visit Ranch Website. */
  .ld-z .ldz-aside { margin-bottom: 8px; }
  .ld-z .ldz-body { margin-top: 8px; }
}

/* Oct 19: pin icon before the listing's address line. */
.ldz-loc { display: flex; align-items: center; gap: 6px; }
.ldz-loc .hy-loc-pin-wrap { display: inline-flex; flex: none; }
.ldz-loc .hy-loc-pin { width: 16px; height: 16px; color: var(--ink, #142018); }
/* Oct 19: expanded Pickup & Delivery map: sits above the listing overlay; the map takes every gesture. */
.ldz-map-wrap.is-expanded { z-index: 6100; touch-action: none; }
.ldz-map-wrap.is-expanded .ldz-ship-map, .ldz-map-wrap.is-expanded #listing-map { touch-action: none; cursor: grab; }

/* Oct 19: first-in-area free listing popup and Share with a friend popup. */
.hy-fa-back { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 32, 24, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.hy-fa-card { position: relative; width: min(440px, 100%); background: #fffcf7; color: var(--ink, #142018); border-radius: 18px; padding: 26px 22px 20px; box-shadow: 0 24px 60px rgba(20, 32, 24, 0.28); text-align: center; outline: none; }
.hy-fa-card h2 { margin: 6px 0 8px; font-size: 1.4rem; }
.hy-fa-card p { margin: 0 0 10px; line-height: 1.45; }
.hy-fa-sub { color: var(--muted, #5b6b5f); font-size: 0.92rem; }
.hy-fa-emoji { font-size: 2rem; line-height: 1; }
.hy-fa-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.5rem; cursor: pointer; color: var(--muted, #5b6b5f); border-radius: 999px; }
.hy-fa-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.hy-fa-actions .btn { min-height: 44px; }
.hy-fa-link { display: flex; gap: 8px; margin-top: 8px; }
.hy-fa-link input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--line, #d8e0d6); border-radius: 10px; padding: 0 12px; font: inherit; background: #fff; }
@media (max-width: 480px) {
  .hy-fa-back { align-items: flex-end; padding: 0; }
  .hy-fa-card { border-radius: 18px 18px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .hy-fa-actions .btn { flex: 1 1 40%; }
}

/* Oct 19: Report listing form (modal) and thank-you. Desktop and phone. */
html.hy-rp-open, html.hy-rp-open body { overflow: hidden; }
.hy-rp-back { position: fixed; inset: 0; z-index: 6000; background: rgba(20, 32, 24, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.hy-rp-card { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fffcf7; border: 1px solid rgb(216, 224, 214); border-radius: 14px; box-shadow: 0 12px 40px rgba(20, 32, 24, 0.22); padding: 22px 22px 18px; box-sizing: border-box; }
.hy-rp-card h2 { margin: 0 36px 4px 0; font-size: 1.25rem; }
.hy-rp-what { margin: 0 0 14px; overflow-wrap: anywhere; }
.hy-rp-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); }
.hy-rp-x:hover { background: #eef2ec; }
.hy-rp-reasons { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.hy-rp-reasons legend { font-weight: 650; margin-bottom: 8px; padding: 0; }
.hy-rp-reason { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line, #d8e0d6); border-radius: 10px; background: #fff; cursor: pointer; }
.hy-rp-reason:has(input:checked) { border-color: var(--green, #1b6b45); background: #eef6f0; }
.hy-rp-reason input { width: 18px; height: 18px; margin: 0; accent-color: var(--green, #1b6b45); }
.hy-rp-dlab { display: block; font-weight: 650; margin-bottom: 6px; }
.hy-rp-opt { font-weight: 400; color: var(--ink-soft); }
.hy-rp-card textarea { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; font: inherit; padding: 10px 12px; border: 1px solid var(--line, #d8e0d6); border-radius: 10px; }
.hy-rp-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 0.82rem; min-height: 1.2em; }
.hy-rp-err { color: #b3261e; }
.hy-rp-count { color: var(--ink-soft); white-space: nowrap; margin-left: auto; }
.hy-rp-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.hy-rp-actions .btn { min-height: 44px; }
.hy-rp-done { text-align: center; padding: 10px 4px 4px; }
.hy-rp-done h2 { margin: 8px 0 6px; }
.hy-rp-done .btn { margin-top: 14px; min-height: 44px; min-width: 120px; }
.hy-rp-check { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto; background: #e3f1e7; color: var(--green, #1b6b45); font-size: 1.6rem; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .hy-rp-back { align-items: flex-end; padding: 0; }
  .hy-rp-card { max-width: none; border-radius: 16px 16px 0 0; max-height: calc(100vh - 40px); padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .hy-rp-actions .btn { flex: 1; }
}
/* Admin Reports list */
.rp-list { padding: 4px 16px; }
.rp-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #e6eee8; }
.rp-row:last-child { border-bottom: 0; }
.rp-row.is-resolved { opacity: 0.6; }
.rp-main { flex: 1; min-width: 0; }
.rp-listing { font-weight: 650; overflow-wrap: anywhere; }
.rp-meta { font-size: 0.85rem; color: var(--ink-soft); margin-top: 2px; overflow-wrap: anywhere; }
.rp-reason { font-weight: 650; color: var(--ink); }
.rp-details { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; }
.rp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.rp-status { font-size: 0.78rem; font-weight: 650; padding: 2px 8px; border-radius: 999px; }
.rp-status.open { background: #fdecea; color: #b3261e; }
.rp-status.done { background: #e3f1e7; color: #1b6b45; }
.rp-resolve { min-height: 40px; }
@media (max-width: 760px) {
  .rp-row { flex-direction: column; gap: 8px; }
  .rp-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

/* Oct 19: diesel-based delivery ESTIMATE on pickup-only cattle listings. */
.ldz-est-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #fdf1d8; color: #7a4d00; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; vertical-align: middle; }
.ldz-dcalc.is-estimate .ldz-dcalc-rate { font-size: 0.92rem; }

/* Oct 19 (David): YouTube icon beside the dropzone; paste field opens inline. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.media-drop-row { display: flex; align-items: stretch; gap: 10px; margin-top: 6px; min-width: 0; }
.media-drop-row .media-drop { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.media-drop-row .media-drop strong { overflow: hidden; text-overflow: ellipsis; }
.yt-link-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; min-height: 56px; border: 1px solid var(--line); border-radius: 16px; background: var(--white, #fff); cursor: pointer; padding: 0; }
.yt-link-icon:hover { border-color: #FF0000; }
.yt-link-icon:focus-visible { outline: 3px solid rgba(255, 0, 0, 0.35); outline-offset: 2px; }
.yt-link-icon[aria-expanded="true"], .yt-link-icon.has-link { border-color: #FF0000; box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.12); }
.yt-link-field { margin-top: 10px; }
.yt-link-field.is-collapsed .yt-link-open { display: none; }
.yt-link-row { position: relative; }
.yt-link-row input { padding-right: 44px; min-height: 44px; }
.yt-link-close { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.yt-link-close:hover { background: #f1efe9; color: var(--ink); }
@media (max-width: 760px) { .media-drop-row .media-drop { padding: 14px 12px; } .media-drop-row .media-drop strong { font-size: 1rem; } }

/* Oct 19 (David): redesigned Age control (built by HerdAge.bind). Scoped to .age-v2. */
.age-v2 .age-head { align-items: center; margin-bottom: 8px; }
.age-v2 .age-head label { font-weight: 600; }
.age-v2 .age-unit.age-pill { width: auto; flex: none; border-radius: 999px; background: #f1efe9; border: 1px solid var(--line); padding: 2px; gap: 2px; }
.age-v2 .age-unit.age-pill button { flex: none; padding: 4px 12px; font-size: 0.78rem; border-radius: 999px; min-height: 28px; cursor: pointer; }
.age-v2 .age-unit.age-pill button.on { background: var(--white, #fff); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 32, 24, 0.15); }
.age-v2 .age-row2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.age-v2 .age-mode { width: auto; flex: none; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: #f1efe9; padding: 2px; gap: 2px; }
.age-v2 .age-mode button { flex: none; padding: 4px 12px; font-size: 0.8rem; border-radius: 6px; min-height: 28px; }
.age-v2 .age-mode button.on { background: var(--white, #fff); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 32, 24, 0.15); }
.age-v2 .age-summary { font-weight: 700; font-size: 0.95rem; color: var(--ink); white-space: nowrap; }
.age-v2 .age-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.age-v2.age-is-single .age-nums { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
.age-v2.age-is-single .age-num[data-which="max"] { display: none; }
.age-v2 .age-num { min-width: 0; }
.age-v2 .age-num-label { display: block; font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 4px; }
.age-v2 .age-num-box { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--white, #fff); min-height: 44px; overflow: hidden; }
.age-v2 .age-num-box:focus-within { border-color: var(--green, #2f6b3a); box-shadow: 0 0 0 3px rgba(47, 107, 58, 0.15); }
.age-v2 .age-step { flex: none; width: 40px; min-height: 44px; border: 0; background: transparent; font-size: 1.15rem; line-height: 1; color: var(--ink); cursor: pointer; }
.age-v2 .age-step:hover { background: #f1efe9; }
.age-v2 .age-num-input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0 !important; box-shadow: none !important; outline: none; text-align: right; padding: 0 4px 0 0 !important; font: inherit; font-size: 16px; font-weight: 650; background: transparent; min-height: 0 !important; -moz-appearance: textfield; }
.age-v2 .age-num-input::-webkit-outer-spin-button, .age-v2 .age-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.age-v2 .age-suffix { flex: none; font-size: 0.85rem; color: var(--ink-soft); padding-right: 6px; min-width: 2.2em; }
/* Slim dual slider: 6px track, 24px knobs, 44px touch target, no labels under the knobs. */
.age-v2 .age-slider { height: 44px; margin: 6px 0 0; }
.age-v2 .age-track { left: 12px; right: 12px; top: 19px; height: 6px; }
.age-v2 .age-slider input[type="range"] { top: 0; height: 44px; }
.age-v2 .age-slider input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; border-width: 2px; }
.age-v2 .age-slider input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }
.age-v2 .age-tip { display: none !important; }
@media (max-width: 760px) { .age-v2.age-is-single .age-nums { max-width: none; } }

/* Oct 19: advanced details wrapper above Pickup / Delivery. */
#field-advanced .advanced-toggle { margin-top: 0; }
#field-advanced:has(> #advanced-toggle[hidden]):has(> #advanced-fields[hidden]) { display: none !important; }

/* Oct 19 (David): Listing strength. Desktop: sticky card in a right sidebar beside the form (price-card styling).
   The aside lives inside the form page, so sticky stops before the footer. Phone: inline as before. */
@media (min-width: 981px) {
  .form-page.has-strength-aside { max-width: min(1180px, calc(100% - 2 * var(--hy-gutter))); display: grid; grid-template-columns: minmax(0, 820px) 300px; gap: 0 32px; align-items: start; justify-content: center; }
  .form-page.has-strength-aside > .hy-list-body { min-width: 0; }
  .hy-strength-aside { position: sticky; top: 80px; align-self: start; margin-top: 96px; }
  .hy-strength-aside #quality-meter { margin: 0; background: var(--white, #fff); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 10px rgba(20, 32, 24, 0.06); padding: 20px 20px 18px; display: block !important; }
}
.quality-pct { font-variant-numeric: tabular-nums; }
.quality-miss-h { margin: 12px 0 4px; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.quality-meter .quality-tips { margin-top: 0; }
.quality-meter .quality-ready { margin: 10px 0 0; }

/* Oct 19 (David): custom dropdowns get the same caret as native selects. */
.hy-caret { display: inline-block; width: 14px; height: 14px; flex: none; vertical-align: middle; background: var(--hy-caret) no-repeat center / 14px 14px; }
details[open] > summary .hy-caret { transform: rotate(180deg); }
.le-menu summary { display: inline-flex; align-items: center; gap: 8px; padding-right: 16px; }
/* Breed picker (type or choose): same caret, 16px from the right, 44px padding so text never runs under it. */
.breed-pick input { padding-right: 44px !important; }
.breed-open { right: 0; width: 44px; height: 100%; min-height: 44px; font-size: 0; color: transparent; background: var(--hy-caret) no-repeat right 16px center / 14px 14px !important; border-radius: 0 10px 10px 0; cursor: pointer; }
/* Admin traffic sources: the old rotated-border arrow is replaced by the shared caret. */
.traffic-source-caret { width: 14px; height: 14px; margin: 0 2px 0 4px; border: 0; transform: none; background: var(--hy-caret) no-repeat center / 14px 14px; }
.traffic-source[open] > .traffic-source-summary .traffic-source-caret { transform: rotate(180deg); margin-top: 0; }

/* Oct 19 (David): form Preview uses the site's listing overlay (see .hy-listing-overlay rules). */
.list-preview-overlay { z-index: 110; }
.list-preview-overlay .hy-listing-overlay-panel { outline: none; }
.list-preview-overlay .list-preview-bar { position: relative; flex: none; }
.list-preview-overlay .hy-listing-overlay-scroll { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
@media (max-width: 760px) {
  .list-preview-overlay .list-preview-bar { position: fixed; }
}
.age-v2 .age-slider input[type="range"] { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0; min-height: 0; }
.hy-strength-aside .quality-top { flex-direction: column; align-items: flex-start; gap: 2px; }
.hy-strength-aside .quality-top b { font-size: 1.05rem; }
.hy-strength-aside .quality-pct { color: var(--green); }

/* ===== Oct 19 (item I): edit-in-place listing workzone (listing-zone.js) ===== */
.hz-form > :not(.hz-modal) { display: none !important; }
.form-page.hz-page { max-width: min(1440px, calc(100% - 2 * var(--hy-gutter))); padding-top: 16px; }
@media (min-width: 981px) {
  .form-page.hz-page.has-strength-aside { grid-template-columns: minmax(0, 1fr) 300px; max-width: min(1500px, calc(100% - 2 * var(--hy-gutter))); }
  .form-page.hz-page .hy-strength-aside { margin-top: 72px; }
}
.hz-bar {
  position: sticky; top: var(--hy-header-h, 64px); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 12px 10px 16px; border-radius: 12px;
  background: var(--ink, #142018); color: #fffcf7; box-shadow: 0 6px 20px rgba(20, 32, 24, 0.18);
}
.hz-bar-l { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.hz-bar-l b { font-size: 1rem; }
.hz-bar-dot { width: 10px; height: 10px; border-radius: 50%; background: #f2b84b; flex: none; }
.hz-bar-hint { font-size: 0.86rem; opacity: 0.78; }
.hz-bar-r { display: flex; align-items: center; gap: 14px; }
.hz-classic { color: #fffcf7; opacity: 0.8; font-size: 0.86rem; text-decoration: underline; }
.hz-classic:hover { opacity: 1; }
.hz-bar .hz-done { background: #fffcf7; color: var(--ink, #142018); border-color: #fffcf7; min-height: 40px; padding: 8px 16px; }
.hz-live { position: relative; }
.hz-live .ld-page { position: static !important; inset: auto !important; max-width: none; width: 100%; padding-top: 0; }
.hz-zone { position: relative; }
.hz-edit {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font: inherit; font-weight: 800; letter-spacing: 0.08em;
}
.hz-edit:focus-visible { outline: 3px solid #f2b84b; outline-offset: 2px; }
/* Desktop: dark translucent overlay with a big centered EDIT button on hover / keyboard focus. */
@media (hover: hover) and (min-width: 761px) {
  .hz-zone::after {
    content: ""; position: absolute; inset: -6px; border-radius: 12px; pointer-events: none;
    background: rgba(12, 20, 15, 0.55); opacity: 0; transition: opacity .15s ease; z-index: 4;
  }
  .hz-zone:hover::after, .hz-zone:focus-within::after { opacity: 1; }
  .hz-edit {
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    padding: 14px 30px; border-radius: 999px; font-size: 1.05rem; text-transform: uppercase;
    background: #fffcf7; color: var(--ink, #142018); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    opacity: 0; transition: opacity .15s ease;
  }
  .hz-zone:hover > .hz-edit, .hz-zone:focus-within > .hz-edit, .hz-edit:focus-visible { opacity: 1; }
  .hz-edit-i { display: none; }
}
/* Phone / touch: a small Edit pill that is always there. */
@media (hover: none), (max-width: 760px) {
  .hz-zone { outline: 1px dashed rgba(27, 107, 69, 0.35); outline-offset: 4px; border-radius: 8px; }
  .hz-edit {
    top: 6px; right: 6px; padding: 6px 12px; min-height: 32px; border-radius: 999px; font-size: 0.8rem; letter-spacing: 0.02em;
    background: var(--ink, #142018); color: #fffcf7; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  .ld-hero.hz-zone > .hz-edit { top: 12px; left: 12px; right: auto; }
  .ld-title.hz-zone { padding-right: 76px; }
}
/* Section modal (inside the form so its fields stay form fields). */
.hz-modal[hidden] { display: none !important; }
.hz-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.hz-modal-back { position: absolute; inset: 0; background: rgba(12, 20, 15, 0.55); }
.hz-modal-panel {
  position: relative; display: flex; flex-direction: column; width: min(680px, 100%); max-height: calc(100vh - 48px);
  background: var(--paper, #fffcf7); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow: hidden;
}
.hz-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 22px; border-bottom: 1px solid var(--line, #d8e0d6); }
.hz-modal-head h2 { margin: 0; font-size: 1.2rem; }
.hz-x { width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; font-size: 1.5rem; cursor: pointer; color: inherit; }
.hz-x:hover { background: rgba(0, 0, 0, 0.06); }
.hz-modal-body { padding: 18px 22px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-content: start; }
.hz-modal-body > .field { order: 0 !important; margin: 0; min-width: 0; }
.hz-modal-body > .field.full, .hz-modal-body > .field.age-v2, .hz-modal-body > .hy-advanced-wrap, .hz-modal-body > #genetics-fields,
.hz-modal-body > .hz-empty, .hz-modal[data-zone="description"] .hz-modal-body > .field, .hz-modal[data-zone="location"] .hz-modal-body > .field,
.hz-modal[data-zone="ship"] .hz-modal-body > .field { grid-column: 1 / -1; }
.hz-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px 16px; border-top: 1px solid var(--line, #d8e0d6); background: var(--paper, #fffcf7); }
.hz-modal-foot .btn { min-width: 110px; }
body.hz-modal-open { overflow: hidden; }
@media (max-width: 760px) {
  .hz-modal { padding: 0; align-items: flex-end; }
  .hz-modal-panel { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .hz-modal-body { grid-template-columns: 1fr; padding: 16px; }
  .hz-modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .hz-modal-foot .btn { flex: 1; }
  .hz-bar { top: var(--hy-header-h, 56px); padding: 8px 10px 8px 12px; }
  .hz-bar-hint { display: none; }
  .hz-bar-r { gap: 10px; }
  .form-page.hz-page { padding-left: 12px; padding-right: 12px; max-width: 100%; }
}
/* The listing's own Back/Save/Share/Report bar and the step form's chrome step aside in the workzone
   (their own display rules beat the hidden attribute). */
.hz-live .ldz-nav, .hz-live .ldz-float-chrome, .hz-live .ld-sticky, .hz-live #ld-sticky { display: none !important; }
.hz-page [data-hz-hidden], .hz-page #list-kind-toggle { display: none !important; }
@media (hover: none), (max-width: 760px) {
  .ldz-loc.hz-zone, .ldz-price-row.hz-zone { padding-right: 76px; min-height: 40px; }
  .hz-live .ldz-float-chrome { display: none !important; }
}

/* Oct 19: hovering a listing card (desktop mouse only) lights its producer's dot on the Cattle/Beef map:
   gold, bigger, white ring plus a soft gold glow, drawn above every other dot. A numbered group or
   cluster that holds the dot lights the same way. Phones and touch screens are unchanged. */
@media (hover: hover) and (pointer: fine) {
  .hy-dot.hover { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(232, 184, 74, 0.55), 0 2px 12px rgba(0, 0, 0, 0.45); }
  .hy-cluster-dot.hover { background: #e8b84a !important; color: #142018 !important; transform: scale(1.25); box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(232, 184, 74, 0.55), 0 2px 12px rgba(0, 0, 0, 0.45); transition: transform 0.12s ease; }
  .leaflet-marker-icon:has(.hy-cluster-dot.hover) { z-index: 100000 !important; }
}

/* Oct 19: listing cards show the real lot number (top right) and head count (bottom right) on the photo,
   in solid pills that read over any image. They sit over the photo, so card height does not change. */
.listing-card .thumb .card-pill {
  position: absolute; right: 10px; z-index: 2;
  background: rgba(20, 32, 24, 0.86); color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 1; letter-spacing: 0.01em;
  padding: 6px 9px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); pointer-events: none;
}
.listing-card .thumb .card-pill-lot { top: 12px; }
/* Oct 22 (Mobile App review): the producer card Verified pill sits top-left on the photo, like Demo on Cattle cards. */
.listing-card .thumb .card-pill.card-pill-verified { top: 12px; left: 10px; right: auto; }
/* Oct 22 (David): admin-only links (the /updates footer links) stay hidden for everyone else, whatever the link display rule. */
[data-admin-only][hidden] { display: none !important; }
.listing-card.beef-card .thumb .card-pill { background: rgba(92, 24, 24, 0.86); }
/* Keep a long producer name clear of the Lot pill. */
.listing-card .thumb.has-lot .badge { max-width: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }

/* Oct 19 (card v2): Cattle/Beef listing cards.
   Row 1: price on the left, Favorite + Share side by side on the right, centered on the price row.
   Then the breed/class line and the location line (kept even when empty), a thin full-width divider,
   and a footer: producer on the left, head count on the right. Every card keeps the same rows,
   so cards in a row stay the same height with or without a location or head count. */
.listing-card.card-v2 .card-thumb-link { flex: 0 0 auto; display: block; }
.listing-card.card-v2 .listing-body { position: relative; padding: 0; min-height: 0; overflow: visible; display: flex; flex-direction: column; flex: 1 1 auto; }
.listing-card.card-v2 .card-body-link { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 16px 12px; min-width: 0; }
.listing-card.card-v2 .listing-body .price { min-height: 34px; height: 34px; line-height: 34px; margin: 0 0 6px; padding-right: 78px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing-card.card-v2 .listing-body .price.price-contact { font-size: 0.98rem; }
.listing-card.card-v2 .card-meta { min-height: 20px; line-height: 20px; }
.listing-card.card-v2 .listing-body .meta-loc { min-height: 20px; line-height: 20px; margin: 4px 0 10px; }
.listing-card.card-v2 .card-divider { height: 1px; background: var(--line, #e3e0d6); margin: auto -16px 0; flex: 0 0 auto; }
.listing-card.card-v2 .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; line-height: 20px; padding-top: 10px; font-size: 0.84rem; }
.listing-card.card-v2 .card-foot-prod { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--green-d); font-weight: 600; cursor: pointer; }
.listing-card.card-v2 .card-foot-prod:not([data-ranch-href]) { cursor: inherit; }
@media (hover: hover) { .listing-card.card-v2 .card-foot-prod[data-ranch-href]:hover { text-decoration: underline; text-underline-offset: 2px; } }
.listing-card.card-v2 .card-foot-prod:focus-visible { outline: 2px solid var(--green-d, #1b6b45); outline-offset: 2px; border-radius: 4px; }
.listing-card.card-v2 .card-foot-head { flex: 0 0 auto; white-space: nowrap; color: var(--ink, #142018); font-weight: 650; }
.listing-card.card-v2.beef-card .card-foot-prod { color: var(--beef-d); }
.listing-card.card-v2 .card-actions { position: absolute; top: 14px; right: 12px; bottom: auto; flex-direction: row; gap: 6px; }

/* Oct 19: map dot preview on Cattle/Beef = the side-list card (card v2), same image height, spacing and type. */
.hy-map-card.hy-map-shared { width: 300px; background: var(--white, #fff); }
.hy-map-card.hy-map-shared.hy-map-card-sheet { width: 100%; }
.hy-map-shared > .listing-card { border: 0; border-radius: 0; box-shadow: none; margin: 0; transform: none; animation: none; opacity: 1; }
.hy-map-shared-cta { padding: 0 16px 14px; background: var(--white, #fff); }
.hy-map-shared-cta .hy-map-card-cta { margin-top: 0; }
/* Oct 20, 2026 (David 6:23 AM): on desktop the dot popup is the same size as the side-list card: width from
   --hy-pop-w (set by hy-map.js from the side card on screen, 244px at 1440 wide), the card's own preview height,
   and a slim View Listing row under it. The phone sheet (.hy-map-card-sheet) is unchanged. */
.hy-card-pop .leaflet-popup-content:has(> .hy-map-shared) { width: var(--hy-pop-w, 244px) !important; }
.hy-map-card.hy-map-shared:not(.hy-map-card-sheet),
.gm-style .hy-map-card.hy-map-shared:not(.hy-map-card-sheet) { width: var(--hy-pop-w, 244px); }
.hy-map-shared:not(.hy-map-card-sheet) .hy-map-shared-cta { padding: 0 12px 10px; }
.hy-map-shared:not(.hy-map-card-sheet) .hy-map-shared-cta .hy-map-card-cta { min-height: 32px; font-size: 0.88rem; }

/* Oct 19: a draft opened by its link (owner or admin only) never looks like a live listing. */
.ld-draft-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e7b85b; border-radius: 12px; background: #fff6e2; color: #3d2b06; }
.ld-draft-banner p { flex: 1 1 220px; margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.ld-draft-tag { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #3d2b06; color: #fff; font: 700 .72rem/1.2 Poppins, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.ld-draft-banner .ld-draft-finish { flex: none; }
.ld-draft [data-share], .ld-draft #contact-btn, .ld-draft #contact-btn-2, .ld-draft #contact-sticky,
.ld-draft #buy-now, .ld-draft #buy-now-sticky, .ld-draft .ld-buy, .ld-draft .ld-connect, .ld-draft #ld-sticky,
.ld-draft [data-save], .ld-draft #ldz-report, .ld-draft #ldz-report-m, .ld-draft .ldz-report-btn { display: none !important; }

/* Oct 19, 2026 (David 8:19 PM): one shared size for every PREVIEW card (live cattle, beef, genetics):
   Home rows, browse grids, Map + cards list, map dot popups and the phone map sheet, ranch profile rows,
   Similar listings, Favorites, and the map's own fallback card. Each card is a fixed height (--hy-pc-h),
   the photo is a share of it (--hy-pc-photo, object-fit: cover) and the details get the rest, so cards in a row
   are equal. Full listing pages, the Listing Editor's management cards and ranch directory tiles aren't touched.
   Oct 20, 2026 (David 6:20 AM): photo stays 45% / details 55%, with tighter spacing and a shorter card.
   Oct 20, 2026 (David 6:37 AM): "a little too tight" - height and spacing set halfway between #213 (340px) and #220 (276px). */
:root { --hy-pc-h: 308px; --hy-pc-photo: 0.45; }
.listing-card.hy-pc {
  height: var(--hy-pc-h) !important; min-height: 0; max-height: none;
  align-self: stretch; display: flex; flex-direction: column;
}
.listing-card.hy-pc > .listing-card-link:not(.card-thumb-link) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.listing-card.hy-pc > .card-thumb-link { display: block; flex: 0 0 auto; }
.listing-card.hy-pc .thumb {
  flex: 0 0 auto; height: calc(var(--hy-pc-h) * var(--hy-pc-photo)) !important; min-height: 0; max-height: none; aspect-ratio: auto !important;
}
.listing-card.hy-pc .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Nov 5 (David): honor camera EXIF Orientation on <img> (cards, detail hero, lightbox). background-image thumbs still need baked pixels. */
img {
  image-orientation: from-image;
}

.listing-card.hy-pc .listing-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.hy-map-card.hy-pc { height: var(--hy-pc-h); display: flex; flex-direction: column; overflow: hidden; }
.hy-map-card.hy-pc .hy-map-card-media { flex: 0 0 auto; height: calc(var(--hy-pc-h) * var(--hy-pc-photo)); aspect-ratio: auto !important; }
.hy-map-card.hy-pc .hy-map-card-media-img { height: 100%; background-size: cover; background-position: center; }
.hy-map-card.hy-pc .hy-map-card-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* Narrow cards: the Map + cards list keeps cards at least 200px wide (two columns at 1440, one at 1024)
   so the price, Favorite and Share fit next to each other instead of cutting the price to "$4…". */
.browse-layout.view-split .listings-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* Oct 20, 2026: tighter details on preview cards only (price, description line, location, divider, footer).
   The footer stays pinned to the bottom so cards in a row still line up. */
.listing-card.card-v2.hy-pc .card-body-link { padding-top: 12px; padding-bottom: 11px; }
.listing-card.card-v2.hy-pc .listing-body .price { min-height: 31px; height: 31px; line-height: 31px; margin: 0 0 4px; }
.listing-card.card-v2.hy-pc .card-actions { top: 10px; }
.listing-card.card-v2.hy-pc .card-meta { min-height: 19.5px; line-height: 19.5px; }
.listing-card.card-v2.hy-pc .listing-body .meta-loc { min-height: 19.5px; line-height: 19.5px; margin: 3px 0 9px; }
.listing-card.card-v2.hy-pc .card-foot { padding-top: 9px; line-height: 19.5px; min-height: 19.5px; }
/* "Contact for Price" wraps onto a second line on narrow cards instead of being cut to "Contact fo…". */
.listing-card.card-v2.hy-pc .listing-body .price.price-contact { height: auto; min-height: 31px; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; display: flex; align-items: center; }
.listing-card.gx2-card.hy-pc .listing-body { padding-top: 9px; padding-bottom: 8px; gap: 1.5px; }
.listing-card.gx2-card.hy-pc .listing-title { margin-top: 5px; }
.listing-card.gx2-card.hy-pc .price { margin: 2px 0 4px; }
.listing-card.gx2-card.hy-pc .price.price-contact { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
/* Oct 20, 2026 (David 12:05 PM): a slightly taller photo on every preview card, same 308px card.
   The photo goes from 45% to 52% of the card (about 21px taller). The details move down with it; the price,
   description line and location keep their exact line heights and spacing, and the extra photo height comes
   out of the blank space between the location and the divider above the producer/lot footer.
   Oct 20, 2026 (David 12:51 PM): every card's photo is the same fixed height (no per-card give-back). The
   description line is held to one line with an ellipsis, so the price, line, location and footer always fit. */
:root { --hy-pc-photo: 0.52; }
.listing-card.card-v2.hy-pc .card-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 19.5px; }
.listing-card.card-v2.hy-pc .card-meta > span { display: inline; max-width: none; overflow: visible; }
/* The map's own fallback card (head + photo + View Listing in one 308px box) keeps its 45% photo. */
.hy-map-card.hy-pc .hy-map-card-media { height: calc(var(--hy-pc-h) * 0.45); }
/* Beef: distance pill on the photo (top-right, where the Lot pill was). */
.listing-card.beef-card .thumb .card-pill-miles { top: 56px; }
.listing-card.beef-card .thumb img.beef-prod-badge,
.hy-map-card.kind-beef img.beef-prod-badge,
.beef-prod-badge {
  position: absolute;
  inset: auto;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 40px;
  height: 40px;
  max-width: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(20, 32, 24, 0.35);
  object-fit: cover;
  background: #1b6b45;
  color: #fff;
  pointer-events: none;
  box-sizing: border-box;
}
.beef-prod-badge-ini {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.hy-map-card-media { position: relative; }
.hy-map-card.kind-beef .beef-prod-badge { top: 8px; right: 8px; }
@media (max-width: 640px) {
  .listing-card.beef-card .thumb img.beef-prod-badge,
  .hy-map-card.kind-beef img.beef-prod-badge,
  .beef-prod-badge { width: 32px; height: 32px; max-width: 32px; min-width: 32px; min-height: 32px; font-size: 11px; top: 6px; right: 6px; }
  .listing-card.beef-card .thumb .card-pill-miles { top: 44px; }
}

/* Oct 19, 2026: Notification settings matrix (Text / Email / Push), matches the phone app. */
.mx-page { max-width: 720px; }
.mx-intro { margin: 4px 0 10px; }
.mx-colhead { display: flex; justify-content: flex-end; gap: 10px; padding: 0 16px 6px; font-weight: 700; font-size: 13px; color: #31423a; }
.mx-colhead span { width: 40px; text-align: center; }
.mx-card { background: #fffdf8; border: 1px solid #e3e6dc; border-radius: 16px; padding: 4px 16px; }
.mx-loading, .mx-err { padding: 22px 16px; color: #5d6b62; }
.mx-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #ecefe6; }
.mx-card > .mx-row:first-child { border-top: 0; }
.mx-txt { flex: 1; min-width: 0; }
.mx-txt .sub { margin: 2px 0 0; font-size: 14px; }
.mx-title { font-weight: 700; font-size: 16px; color: #17251d; }
button.mx-toggle { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 16px; color: #17251d; text-align: left; }
.mx-caret, .mx-chev { color: #5d6b62; font-weight: 400; margin-left: 2px; }
.mx-cells { display: flex; gap: 10px; flex: none; }
.mx-ic { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background .15s, border-color .15s; }
.mx-ic.mx-on { background: #1f5c3f; border: 1.5px solid #1f5c3f; color: #fff; }
.mx-ic.mx-off { background: #fff; border: 1.5px solid #cfd6cc; color: #9aa69e; }
.mx-ic.mx-off:hover { border-color: #1f5c3f; color: #1f5c3f; }
.mx-ic.mx-na { background: transparent; border: 1.5px dotted #dfe3da; color: #d3d8d0; cursor: not-allowed; }
.mx-ic:focus-visible { outline: 3px solid #9cc9ae; outline-offset: 2px; }
.mx-apponly { position: relative; display: inline-flex; width: 40px; justify-content: center; }
.mx-apponly small { position: absolute; top: 41px; white-space: nowrap; font-size: 10px; color: #7a877e; }
.mx-sec { padding: 16px 0 4px; border-top: 1px solid #ecefe6; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #31423a; }
.mx-more { padding: 0 0 14px; }
.mx-more-h { display: block; font-size: 14px; color: #5d6b62; margin: 0 0 8px; }
.mx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-chip { border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; border: 1.5px solid #cfd6cc; background: #fff; color: #31423a; }
.mx-chip.on { background: #1f5c3f; border-color: #1f5c3f; color: #fff; }
.mx-area { display: flex; gap: 8px; }
.mx-area input { flex: 1; max-width: 260px; }
.mx-phone { margin-top: 18px; }
.mx-note { margin-top: 10px; font-size: 13px; }
@media (max-width: 560px) {
  .mx-card { padding: 2px 12px; }
  .mx-colhead { padding: 0 12px 6px; gap: 6px; }
  .mx-colhead span { width: 36px; }
  .mx-cells { gap: 6px; }
  .mx-ic { width: 36px; height: 36px; }
  .mx-apponly { width: 36px; }
  .mx-title, button.mx-toggle { font-size: 15px; }
}

/* Oct 20: message attachments (msg-attach.js) */
.hya-clip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #1b6b45; cursor: pointer; }
.hya-clip:hover, .hya-clip:focus-visible { background: #e7f0ea; }
.hya-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 10px; }
.hya-tray[hidden] { display: none; }
.hya-chip { position: relative; display: flex; align-items: center; gap: 8px; width: 210px; max-width: 100%; padding: 6px 30px 6px 6px; border: 1px solid #d8e0d6; border-radius: 12px; background: #fff; box-sizing: border-box; }
.hya-chip.is-failed { border-color: #e2b4ad; background: #fff6f4; }
.hya-chip-thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #eef4ef; display: flex; align-items: center; justify-content: center; color: #1b6b45; }
.hya-chip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hya-chip-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: .8rem; }
.hya-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #142018; font-weight: 600; }
.hya-chip-ok { color: #6b7a6e; }
.hya-chip-err { color: #a3392b; }
.hya-bar { display: block; height: 4px; border-radius: 4px; background: #e2e8e3; overflow: hidden; }
.hya-bar i { display: block; height: 100%; background: #1b6b45; transition: width .15s; }
.hya-retry { border: 0; background: none; color: #1b6b45; font-weight: 700; padding: 0; cursor: pointer; font-size: .8rem; text-align: left; }
.hya-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #eef1ee; color: #43524a; font-size: 16px; line-height: 1; cursor: pointer; }
.hya-x:hover { background: #dfe6e0; }
.hya-dragging { outline: 2px dashed #1b6b45; outline-offset: -6px; background: #f2f8f3 !important; }
.hya-box { border-radius: 10px; }
.hya-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.hya-hint { font-size: .8rem; }
.hya-row:empty { display: none; }
#msg-tray { padding: 8px 0 0; }

.hya-att { display: flex; flex-direction: column; gap: 6px; white-space: normal; margin: -2px -6px 6px; }
.chat-bubble.has-att { min-width: 200px; }
.chat-bubble .chat-text { padding: 0 2px; }
.chat-bubble:not(:has(.chat-text)) .hya-att { margin-bottom: 2px; }
.hya-grid { display: grid; gap: 3px; border-radius: 14px; overflow: hidden; width: min(320px, 62vw); }
.hya-grid.n1 { grid-template-columns: 1fr; }
.hya-grid.n2, .hya-grid.n4 { grid-template-columns: 1fr 1fr; }
.hya-grid.n3 { grid-template-columns: 1fr 1fr; }
.hya-grid.n3 .hya-tile:first-child { grid-column: 1 / -1; }
.hya-tile { position: relative; display: block; padding: 0; border: 0; background: #d6dbd4; cursor: zoom-in; overflow: hidden; }
.hya-tile img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.hya-grid.n1 .hya-tile img { max-height: 360px; min-height: 120px; }
.hya-grid.n3 .hya-tile:first-child img { aspect-ratio: 16 / 9; }
.hya-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; font-size: 1.4rem; font-weight: 700; }
.hya-video { position: relative; width: min(320px, 62vw); border-radius: 14px; overflow: hidden; background: #000; }
.hya-video video { display: block; width: 100%; max-height: 420px; background: #000; }
.hya-note, .hya-dur { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; pointer-events: none; }
.hya-dur { left: auto; right: 8px; }
.hya-file { display: flex; align-items: center; gap: 10px; width: min(300px, 62vw); padding: 10px 12px; border-radius: 12px; background: #fff; color: #142018 !important; text-decoration: none; box-sizing: border-box; border: 1px solid rgba(0,0,0,.08); }
.hya-file:hover { background: #f6f8f6; }
.hya-file.is-gone { color: #6b7a6e !important; background: rgba(255,255,255,.7); }
.hya-file-ico { flex: none; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #eef4ef; color: #1b6b45; }
.hya-file-ico.is-pdf { background: #fbe9e6; color: #b3402f; }
.hya-file-body { min-width: 0; display: flex; flex-direction: column; font-size: .85rem; line-height: 1.3; }
.hya-file-body b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hya-file-body span { color: #6b7a6e; font-size: .78rem; }
/* Oct 23: (+) menu, recorder bar, audio player, document chips, screen-recording label */
.hya-has-menu { position: relative; }
.hya-plus { color: #1b6b45; }
.hya-plus[aria-expanded="true"] { background: #e7f0ea; transform: rotate(45deg); }
.hya-plus svg { transition: transform .15s; }
.hya-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 60; min-width: 260px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid #dfe6e0; box-shadow: 0 10px 30px rgba(20,32,24,.18); display: flex; flex-direction: column; }
.hya-menu[hidden] { display: none; }
.hya-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: #142018; font: inherit; text-align: left; cursor: pointer; }
.hya-menu-item:hover, .hya-menu-item:focus-visible { background: #eef4ef; outline: none; }
.hya-menu-item b { display: block; font-size: .92rem; font-weight: 600; }
.hya-menu-item small { display: block; color: #6b7a6e; font-size: .75rem; }
.hya-menu-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef4ef; color: #1b6b45; }
.hya-rec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 8px; border-radius: 12px; background: #fff4f2; border: 1px solid #f1c9c2; color: #142018; font-size: .88rem; }
.hya-rec[hidden] { display: none; }
.hya-rec .grow { flex: 1; }
.hya-rec .btn { padding: 6px 14px; min-height: 34px; }
.hya-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #d93025; animation: hya-blink 1s infinite; }
.hya-rec-time { font-variant-numeric: tabular-nums; color: #6b7a6e; }
@keyframes hya-blink { 50% { opacity: .25; } }
.hya-audio { width: min(300px, 62vw); padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,.08); box-sizing: border-box; color: #142018; }
.hya-audio-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .85rem; min-width: 0; }
.hya-audio-top b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hya-audio-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef4ef; color: #1b6b45; }
.hya-audio-dur { color: #6b7a6e; font-size: .78rem; font-variant-numeric: tabular-nums; }
.hya-audio audio { display: block; width: 100%; height: 36px; }
.hya-file-dl { flex: none; margin-left: auto; color: #6b7a6e; display: flex; }
.hya-file-ico.is-doc { background: #e6eefb; color: #2b5797; }
.hya-file-ico.is-xls { background: #e4f3e9; color: #1d6f42; }
.hya-file-ico.is-ppt { background: #fdeee6; color: #c4502a; }
.hya-file-ico.is-txt { background: #eef1ee; color: #43524a; }
.hya-tag { position: absolute; left: 8px; top: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; pointer-events: none; }
.hya-tag svg { width: 14px; height: 14px; }
.hya-video.is-screen .hya-note { top: 34px; }
.hy-compose .hya-clip { align-self: flex-end; }
.hy-msg-bubble .hya-att { margin: 2px 0 6px; }
.inbox-foot > .hya-tray { padding: 8px 0 8px; }

.hya-lb { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; background: rgba(8,12,10,.92); }
.hya-lb[hidden] { display: none; }
.hya-lb figure { margin: 0; max-width: 94vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hya-lb img { max-width: 94vw; max-height: 84vh; object-fit: contain; border-radius: 6px; }
.hya-lb figcaption { color: #dfe6e0; font-size: .85rem; text-align: center; }
.hya-lb button { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 50%; width: 44px; height: 44px; font-size: 28px; line-height: 1; cursor: pointer; }
.hya-lb button:hover { background: rgba(255,255,255,.24); }
.hya-lb-x { top: 14px; right: 14px; }
.hya-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.hya-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.hya-lb button[hidden] { display: none; }
html.hya-lb-open { overflow: hidden; }
@media (max-width: 640px) {
  .hya-chip { width: calc(50% - 4px); }
  #msg-tray .hya-chip { width: 100%; }
  .hya-grid, .hya-video { width: min(280px, 66vw); }
  .hya-file { width: min(260px, 66vw); }
  .hya-lb-prev, .hya-lb-next { top: auto; bottom: 18px; transform: none; }
  /* Phones: the (+) menu is a sheet at the bottom with big rows. */
  .hya-menu { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); min-width: 0; padding: 8px; border-radius: 18px; z-index: 10040; }
  .hya-menu-item { padding: 12px; }
  .hya-audio { width: min(260px, 66vw); }
  .hya-rec { flex-wrap: wrap; }
}

/* Oct 20, 2026 (David 7:22 AM): on desktop the account sidebar sits on the browser's left edge (no centered
   container and no gutter to its left), and the account pages use the freed-up width. Page content keeps a
   readable cap (1240px) and starts right next to the sidebar; Messages, Traffic and the Profile Editor stay full
   width as before. The phone layout (980px and under) is unchanged. */
@media (min-width: 981px) {
  .dash-shell { max-width: none; width: 100%; margin: 0; border-left: 0; border-right: 0; }
  #dash-main { max-width: 1240px; margin: 0; padding: 28px 40px 48px; }
  .dash-signout { max-width: 1240px; margin: 0; padding: 4px 40px 40px; }
  #dash-main.is-messages { max-width: none; padding: 0; }
  #dash-main.is-traffic { max-width: none; }
  #dash-main.is-profile { max-width: none; padding: 0 var(--hy-gutter, 24px) 56px; }
}

/* Oct 20, 2026 (David 7:56 AM): header Messages icon next to the cart. It uses the cart's own classes (.cart-link,
   .cart-count) so the size, spacing, hover and red badge match exactly. Signed-in only. */
.header-actions .msg-link[hidden] { display: none !important; }
/* Oct 22 (David 5:04 PM): the header Inbox/Messages unread badge is a bigger red pill with the number inside
   (white, bold, 99+ cap), hidden at 0, sitting on the icon's top-right corner. Map-pin .hy-dot and Inbox-list .ibx-dot untouched. */
.header-actions .msg-link { overflow: visible; }
.header-actions .msg-link .msg-count {
  left: auto; right: 0; top: -1px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #d93025; color: #fff;
  font-size: 0.74rem; font-weight: 800; line-height: 20px; letter-spacing: 0;
  font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap;
  box-shadow: 0 0 0 2px #fff; box-sizing: border-box; pointer-events: none;
}
.header-actions .msg-link .msg-count.is-wide { padding: 0 7px; }
.header-actions .msg-link .ibx-dot { display: none !important; }
@media (max-width: 420px) { .app-header .header-actions .msg-link #msg-count { left: auto; right: 0; top: 1px; } }
/* Phones: the extra icon must not squeeze the logo. Slimmer icon buttons (still 44px tall), menu button and
   New Listing pill padding, so the logo keeps about the room it had before (360-420px wide screens). */
@media (max-width: 420px) {
  .app-header .header-actions .cart-link { min-width: 34px; padding: 0 6px; }
  .app-header .header-actions .cart-link .cart-count { left: 14px; top: 2px; }
  .app-header .header-actions #sell-btn { padding-left: 8px; padding-right: 8px; }
  .app-header .header-actions .menu-toggle { width: 34px; min-width: 34px; }
}
@media (max-width: 380px) {
  .app-header { padding-left: 12px; padding-right: 12px; }
}

/* Oct 20 (parity with the app): listing strength on the Preview buttons. Dark green pill, a lighter green
   fill that grows with the score, a % badge (amber under 50%, check at 100%), and a tip chip above. */
.hy-str-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--green-d) !important; border-color: var(--green-d) !important; color: #fff !important; }
.hy-str-btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--hy-str, 0%); background: var(--green); z-index: -1; transition: width .26s ease; pointer-events: none; }
.hy-str-btn::after { content: attr(data-strength-text); display: inline-flex; justify-content: center; flex: none; min-width: 44px; box-sizing: border-box; padding: 2px 9px; border-radius: 999px; background: #fffcf7; color: var(--green-d); font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hy-str-btn[data-strength-level="low"]::after { background: #fbefd5; color: #7a4b00; }
.hy-str-btn:disabled::after { opacity: .7; }
.hy-str-tip { margin: 16px 0 8px; }
.hy-str-tip[hidden] { display: none !important; }
.hy-str-tip span { display: inline-block; max-width: 100%; padding: 4px 12px; border-radius: 999px; background: rgba(230,242,234,.96); color: var(--green-d); font-size: 12.5px; line-height: 17px; font-weight: 500; box-shadow: 0 2px 6px rgba(20,32,24,.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.hy-str-tip[data-strength-level="low"] span { background: rgba(251,239,213,.96); color: #7a4b00; }
.hy-str-tip + .wiz-desktop-submit { margin-top: 0 !important; }
.list-wizard:not(.list-flat) .hy-str-tip:not(#wiz-str-tip) { display: none !important; }
#wiz-str-tip { flex: 1 0 100%; order: 3; margin: 0 0 2px; text-align: center; }
.quality-meter[data-level="low"] .quality-bar i { background: #c98a1b; }
.quality-meter[data-level="low"] .quality-pct { color: #7a4b00 !important; }

/* Oct 20, 2026 (David 12:34 PM): the header item for the page you're on gets a 3px brand-green underline
   (aria-current="page", class .hy-nav-on set by client.js markActiveNav). The underline is drawn with ::after,
   positioned from the item's middle so every item's line sits on the same row just above the header's bottom
   border, whatever the item's height. Nothing moves: no header height change, no font-weight change. */
.app-header { --hy-nav-ul: calc(var(--hy-hdr-h, 69px) / 2 - 4.5px); }
.app-header .nav-links a, .app-header #acct-btn, .app-header #sell-btn { position: relative; }
.app-header .nav-links a.hy-nav-on { color: var(--green-d); }
.app-header .nav-links a.hy-nav-on::after,
.app-header .header-actions .hy-nav-on::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(50% + var(--hy-nav-ul)); width: 100%; min-width: 22px; height: 3px;
  border-radius: 3px; background: var(--green); pointer-events: none;
}
.app-header .header-actions .cart-link.hy-nav-on::after { width: 24px; }
.app-header .header-actions #acct-btn.hy-nav-on::after,
.app-header .header-actions #sell-btn.hy-nav-on::after { width: calc(100% - 20px); }
/* Phone menu: the active row's text gets the same 3px green underline. */
#mobile-menu a.hy-nav-on { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 3px; text-underline-offset: 7px; font-weight: inherit; }
#mobile-menu a.menu-cta.hy-nav-on { text-decoration-color: #fff; }

/* Oct 20, 2026 (David): the Search box in the Cattle, Beef and Genetics filter sidebars reads as its own block:
   a light green tint, a thin brand-green outline and a little space under it. Same input, same behavior. */
.filters .field.filter-search {
  background: #f1f7f3; border: 1px solid rgba(27, 107, 69, 0.35); border-radius: 12px;
  padding: 10px 12px 12px; margin: 0 0 16px; box-sizing: border-box;
}
.filters .field.filter-search label { color: var(--green-d); }
.filters .field.filter-search input { background: #fff; }
.filters .field.filter-search input:focus { border-color: var(--green); }
/* Phones (Cattle/Beef): the filter panel's search is the bar at the top of the panel, so it gets the same
   thin green outline while the filters are open. */
.browse-layout.hy-phone-browse.filters-open .map-search-field { outline: 1.5px solid rgba(27, 107, 69, 0.55); outline-offset: 0; }

/* Oct 20, 2026 (David 1:00 PM): the sample ranch (Rio Lobo Cattle Co.) is open to everyone with a clear Demo pill:
   top-left on listing photos (bottom-right on Genetics cards, whose type badge sits top-left), next to the
   title on the listing page and next to the ranch name on the ranch page. */
.listing-card .thumb .card-pill.card-pill-demo { left: 10px; right: auto; top: 12px; background: #f2b51d; color: #2a1f00; letter-spacing: 0.04em; text-transform: uppercase; }
.listing-card:not(.card-v2) .thumb .card-pill.card-pill-demo { top: auto; bottom: 10px; left: auto; right: 10px; }
.demo-pill { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #f2b51d; color: #2a1f00; font: 700 0.72rem/1.3 Poppins, system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.hy-map-tag-demo { background: #f2b51d !important; color: #2a1f00 !important; }

/* Oct 20 (David): Beef price panel quick facts. */
.ld-purchase .ld-panel-facts { margin: 12px 0 14px; padding: 10px 0 0; border-top: 1px solid #e6eee8; display: grid; gap: 6px; }
.ld-purchase .ld-panel-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.35; }
.ld-purchase .ld-panel-facts dt { color: #6b7a6e; font-weight: 500; margin: 0; flex: none; }
.ld-purchase .ld-panel-facts dd { margin: 0; font-weight: 600; color: #1f2a22; text-align: right; }
/* Oct 20 (David): Beef location map opens directions. */
.ld-dir-wrap { position: relative; border-radius: 12px; overflow: hidden; }
.ld-dir-wrap .ld-dir-link { position: absolute; inset: 0; z-index: 500; display: block; cursor: pointer; }
.ld-dir-wrap .ld-dir-hint { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--green, #1b6b45); font: 600 13px/1 inherit; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.ld-dir-wrap .ld-dir-hint svg { width: 14px; height: 14px; }
.ld-dir-wrap .ld-dir-link:hover .ld-dir-hint, .ld-dir-wrap .ld-dir-link:focus-visible .ld-dir-hint { background: var(--green, #1b6b45); color: #fff; }

/* Oct 20 (David: "fix share buttons to all be the same"): every Share button is the card's round share button
   (public/js/hy-share.js), on cards, map popups, listing pages (top bar, phone photo bar, gallery) and ranch pages. */
button.hy-share-btn.card-icon,
.ldz-nav-actions button.hy-share-btn,
.ldz-float-actions button.hy-share-btn,
.hyg-vact button.hy-share-btn,
.rs-cover-icons button.hy-share-btn,
.ldz-head-actions button.hy-share-btn {
  width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,252,247,0.96); color: var(--green-d);
  box-shadow: 0 6px 16px rgba(20,32,24,0.12);
  cursor: pointer; font-size: 1rem; line-height: 1; backdrop-filter: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
button.hy-share-btn.card-icon:hover,
button.hy-share-btn.card-icon:focus-visible { background: #fff; color: var(--green); border-color: var(--green); }
button.hy-share-btn .hy-share-ico { width: 16px; height: 16px; display: block; margin: 0; pointer-events: none; }
.gx2-card button.hy-share-btn.card-icon, .gx2-card .card-icon { width: 34px; height: 34px; }

/* Oct 20 (David): on the Beef map every listing dot and cluster is Beef red; hover/selected is a darker red with a
   white ring (Cattle and Genetics maps unchanged). */
.hy-map-beef .hy-dot.beef,
.hy-map-beef .hy-dot.sold.beef { background: var(--beef, #c53030); color: #fff; }
.hy-map-beef .hy-cluster-dot { background: var(--beef, #c53030); color: #fff; }
.hy-map-beef .hy-dot.beef.on { background: var(--beef-d, #9b1c1c); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--beef-d, #9b1c1c), 0 1px 6px rgba(0,0,0,.35); }
.hy-map-beef .hy-dot.hover,
.hy-map-beef .hy-cluster-dot.hover { background: var(--beef-d, #9b1c1c) !important; color: #fff !important; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(155, 28, 28, 0.45), 0 2px 10px rgba(0, 0, 0, 0.4) !important; }

/* Oct 20 (David): New Listing payments prompt. */
.pay-setup-prompt { display: flex; align-items: center; gap: 16px; justify-content: space-between; margin: 14px 0 6px; padding: 14px 16px; border: 1.5px solid #1b6b45; background: #eef7f1; border-radius: 14px; }
.pay-setup-prompt b { display: block; font-size: 16px; color: #133f2a; }
.pay-setup-prompt .sub { margin: 4px 0 0; }
.pay-setup-prompt .pay-setup-btn { flex: 0 0 auto; white-space: nowrap; }
.pay-setup-prompt.pay-setup-flash { animation: paySetupFlash 1.2s ease 2; }
@keyframes paySetupFlash { 50% { box-shadow: 0 0 0 4px rgba(27,107,69,.35); } }
@media (max-width: 640px) { .pay-setup-prompt { flex-direction: column; align-items: stretch; } .pay-setup-prompt .pay-setup-btn { width: 100%; justify-content: center; } }
/* Oct 20: ranch map is a styled JS map (no landmarks). */
.rs-gmap-canvas { width: 100%; height: 100%; border-radius: inherit; }
@media (hover: none) and (pointer: coarse) { .rs-gmap-js .rs-gmap-canvas { pointer-events: none; } }

/* Oct 20 (Near me): distance chips (Under 25 / 50 / 100 miles, like the app) and the location help sheet. */
.field-dist { grid-column: 1 / -1; min-width: 0; }
.dist-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dist-chip { min-height: 36px; padding: 6px 10px; border: 1.5px solid var(--line, #d9ddd5); background: #fff; color: #1f2d24; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dist-chip:hover { border-color: #1b6b45; }
.dist-chip.on { background: #1b6b45; border-color: #1b6b45; color: #fff; }
.dist-need { margin: 6px 0 0; font-size: 13px; }
.hy-near-sheet { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; }
.hy-near-back { position: absolute; inset: 0; background: rgba(15, 25, 18, 0.45); }
.hy-near-card { position: relative; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: #fff; border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.hy-near-card h2 { margin: 0 32px 6px 0; font-size: 20px; }
.hy-near-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #4a5a4e; }
.hy-near-steps { margin: 12px 0 16px; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; }
.hy-near-actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 640px) {
  .hy-near-sheet { align-items: flex-end; }
  .hy-near-card { width: 100vw; border-radius: 18px 18px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .hy-near-actions { flex-direction: column-reverse; }
  .hy-near-actions .btn { width: 100%; justify-content: center; }
}
@media (min-width: 981px) { .filters .dist-chips { grid-template-columns: 1fr; gap: 5px; } .filters .dist-chip { min-height: 32px; text-align: left; padding: 5px 14px; } }

/* Oct 21 (David 3:40 AM): the Beef photo section is the Cattle one (same markup, sizing, tiles, thumbs, arrows,
   lightbox); the Beef-only gallery sizing/colour overrides were removed. */
/* Oct 20 (David): Beef listing detail redesign. Desktop: two columns (gallery, title, details left; price, specs,
   main action right). Phones stack gallery, title/seller, price + specs + action, then the detail sections. */
.bd-main .ldz-aside { align-self: start; }
.bd-head { padding-top: 16px; }
.bd-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 18px; }
.bd-title-main { min-width: 0; }
.bd-head .ld-title { margin: 0; overflow-wrap: anywhere; }
.bd-custom-title { margin: 4px 0 0; color: var(--ink-soft, #4a5a4e); font-size: 0.98rem; overflow-wrap: anywhere; }
.bd-fav { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line, #dfe6df); border-radius: 999px; background: #fff; color: var(--ink, #1f2a22); font: inherit; font-weight: 600; cursor: pointer; }
.bd-fav.on { border-color: var(--beef, #c53030); color: var(--beef-d, #9b1c1c); }
.bd-fav [data-ico] { font-size: 1.05rem; line-height: 1; }
.bd-seller { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-soft, #4a5a4e); }
.bd-ranch { font-weight: 650; color: var(--beef-d, #9b1c1c); text-decoration: none; }
.bd-ranch:hover { text-decoration: underline; }
.bd-loc { display: inline-flex; align-items: center; gap: 4px; }
.bd-status-row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.bd-status, .bd-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: 999px; font-size: 0.84rem; font-weight: 600; line-height: 1.2; }
.bd-status.on { background: #e5f3ea; color: #1b6b45; }
.bd-status.off { background: #f1ece4; color: #6b5a3a; }
.bd-badge { background: #fbeeee; color: #8a1d1d; border: 1px solid #f1d3d3; }
.bd-purchase .bd-price-main { font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.15; }
.bd-purchase .bd-est { font-size: 0.6em; font-weight: 600; color: var(--ink-soft, #4a5a4e); }
.bd-price-est { margin: 4px 0 0; font-weight: 600; color: var(--ink, #1f2a22); }
.bd-vary { margin: 6px 0 0; font-size: 0.86rem; color: #7a4b12; }
.ld-purchase .ld-panel-facts.bd-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #e6eee8; border: 1px solid #e6eee8; border-radius: 12px; overflow: hidden; padding: 0; margin: 14px 0; }
.ld-purchase .ld-panel-facts.bd-specs > div { display: block; background: #fff; padding: 9px 12px; }
.ld-purchase .ld-panel-facts.bd-specs dt { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ld-purchase .ld-panel-facts.bd-specs dd { text-align: left; margin-top: 2px; overflow-wrap: anywhere; }
.bd-actions { display: grid; gap: 8px; }
.bd-purchase .bd-actions + .ld-connect { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e6eee8; }
.ld-purchase .ld-panel-facts.bd-specs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Detail sections share the write-up's card look. */
.ld-z:not(.ld-sheet) .ldz-body .ld-card.bd-sec:not(.ldz-about) { background: var(--white, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 0 0 16px; }
.ld-z:not(.ld-sheet) .ldz-body .ld-card.bd-sec.ldz-about { margin: 0 0 16px; }
.bd-req-note { margin: 0; font-size: 0.84rem; }
.bd-sec { margin-top: 16px; }
.bd-sec .ld-h { margin-bottom: 10px; }
.bd-sub { margin: 16px 0 4px; font-size: 1rem; }
.bd-note { margin: 8px 0 0; font-size: 0.86rem; }
.bd-pre { white-space: pre-line; }
.bd-cuts { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.94rem; }
.bd-cuts th, .bd-cuts td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e6eee8; }
.bd-cuts th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7a6e; font-weight: 600; }
.bd-cuts td:not(:first-child), .bd-cuts th:not(:first-child) { text-align: right; }
.bd-sec .ld-loc { margin-top: 12px; }
@media (max-width: 980px) {
  .bd-head { padding-top: 0; }
}
@media (max-width: 760px) {
  .bd-title-row { gap: 10px; }
  .bd-fav { min-height: 38px; padding: 0 12px; }
  .bd-fav [data-lab] { display: none; }
}
/* Oct 20: Beef New Listing / edit form, optional beef details + cuts rows. */
.bd-form .wiz-subtitle { margin: 6px 0 2px; }
.bd-cut-rows { display: grid; gap: 8px; margin: 6px 0 8px; }
.bd-cut-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 36px; gap: 8px; align-items: center; }
.bd-indiv-on .bd-cut-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 36px; }
.bd-cut-row .bd-indiv { display: none; }
.bd-indiv-on .bd-cut-row .bd-indiv { display: block; }
.bd-cut-row input { min-width: 0; }
.bd-c-del { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 1.1rem; cursor: pointer; }
@media (max-width: 560px) {
  .bd-indiv-on .bd-cut-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .bd-indiv-on .bd-cut-row .bd-c-name { grid-column: 1 / 3; }
  .bd-indiv-on .bd-cut-row .bd-c-del { grid-column: 3; grid-row: 1; }
}
/* Oct 20 (David 6:04 PM): Beef weight stages side by side (4 across, 2x2 on phones). */
.bd-weights{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px}
.bd-wt{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid rgba(27,107,69,.18);border-radius:12px;background:#f7faf7;min-width:0}
.bd-wt-k{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#5b6b5f;line-height:1.25}
.bd-wt-pct{text-transform:none;letter-spacing:0;color:#6b7a6e}
.bd-wt-v{font-size:17px;font-weight:700;color:#1d2a21;line-height:1.2;white-space:nowrap}
.bd-wt-sub{font-size:11.5px;color:#6b7a6e;line-height:1.25}
.bd-wt-inputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bd-wt-in{display:flex;flex-direction:column;gap:4px;margin:0;font-size:12.5px;font-weight:600;color:#3a4a3e;text-transform:none;letter-spacing:0}
.bd-wt-in em{font-style:normal;font-weight:500;color:#6b7a6e}
.bd-wt-in input{width:100%;min-width:0}
@media (max-width:700px){
  .bd-weights{grid-template-columns:repeat(min(var(--n,4),2),minmax(0,1fr))}
  .bd-wt-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Oct 20 (David 6:07 PM): Beef form keeps Shares / Cuts and Number available on one row on phones too. */
@media (max-width: 980px) {
  .list-wizard.list-beef .form-grid:has(> #field-klass) { grid-template-columns: 1fr 1fr; }
  .list-wizard.list-beef .form-grid:has(> #field-klass) > * { grid-column: 1 / -1; }
  .list-wizard.list-beef .form-grid:has(> #field-klass) > #field-klass,
  .list-wizard.list-beef .form-grid:has(> #field-klass) > #field-head { grid-column: auto; min-width: 0; }
}
.bd-sec .bd-sub-h{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#5b6b5f;margin:14px 0 6px;font-weight:600}
/* Oct 20 (David 6:18 PM): Beef "What's Included". Bulk shares use it; the cut table editor is for individual cuts. */
#list-form:not(.bd-indiv-on) .bd-cuts-field { display: none; }
.bd-inc-sec .bd-inc-lead { margin: 4px 0 10px; line-height: 1.5; }
.bd-inc-sec .bd-inc-lead strong { font-weight: 700; color: #1d2a21; }
.bd-inc-sec .bd-inc-h { font-size: 1rem; font-weight: 700; color: #3a4a3e; margin: 14px 0 6px; }
.bd-inc-sec .bd-inc-list { margin: 0 0 6px; padding-left: 1.25em; line-height: 1.55; }
.bd-inc-sec .bd-inc-list li { margin: 3px 0; }
.bd-inc-note { color: #6b7a6e; }
.bd-inc-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.bd-inc-paste { display: grid; gap: 8px; margin: 0 0 10px; }
.bd-inc-paste[hidden], .bd-inc-check[hidden] { display: none; }
.bd-inc-paste textarea { width: 100%; min-height: 120px; }
.bd-inc-check { margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: #fff6e0; color: #6b4e00; font-size: 0.9rem; }
.bd-inc-groups { display: grid; gap: 12px; margin: 6px 0 10px; }
.bd-inc-group { border: 1px solid #e3ebe5; border-radius: 12px; padding: 10px; background: #fbfdfb; }
.bd-inc-ghead { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.bd-inc-ghead .bd-i-group { flex: 1; min-width: 0; font-weight: 600; }
.bd-inc-rows { display: grid; gap: 6px; }
.bd-inc-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1.3fr) auto; gap: 6px; align-items: center; }
.bd-inc-row input { min-width: 0; }
.bd-i-btns { display: inline-flex; gap: 2px; }
.bd-i-btns button { width: 28px; height: 32px; border: 1px solid #dfe7e1; background: #fff; border-radius: 8px; cursor: pointer; color: #3a4a3e; padding: 0; }
.bd-inc-starter input { background: #fff9e8; }
@media (max-width: 700px) {
  .bd-inc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding-bottom: 8px; border-bottom: 1px dashed #e3ebe5; }
  .bd-inc-row .bd-i-details, .bd-inc-row .bd-i-note { grid-column: 1 / -1; }
  .bd-inc-row .bd-i-btns { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Oct 20, 2026 (David 7:04 PM): Beef cards priced by weight read "$6.25 / lb" with a small "hanging" / "packaged".
   Same one-line price row and 308px card; the small word is clipped with the row if it ever runs out of room. */
.price .hy-pm, .map-price .hy-pm, .hy-map-card-price .hy-pm { font-size: 0.62em; font-weight: 600; color: var(--muted, #6b7280); margin-left: 6px; letter-spacing: 0.02em; vertical-align: baseline; }

/* Oct 20, 2026 (David 7:03 PM): Beef processing date + pickup window are native date pickers, styled like the other fields. */
.bd-form input.bd-date { display: block; width: 100%; min-height: 44px; box-sizing: border-box; font: inherit; line-height: 1.2; -webkit-appearance: none; appearance: none; text-align: left; }
.bd-form input.bd-date::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
.bd-form input.bd-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
.bd-form .bd-range { display: flex; align-items: center; gap: 8px; }
.bd-form .bd-range .bd-date { flex: 1 1 0; min-width: 0; }
.bd-form .bd-range-sep { flex: 0 0 auto; color: var(--muted, #6b7280); font-size: 0.9rem; }
.bd-form .bd-legacy { margin: 6px 0 0; font-size: 0.85rem; }

/* Oct 20, 2026 (David 7:09 PM): the payments reminder can be dismissed (it no longer blocks publishing). */
.pay-setup-prompt { position: relative; }
.pay-setup-prompt .pay-setup-x { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0; background: transparent; color: #133f2a; font-size: 22px; line-height: 1; border-radius: 8px; cursor: pointer; }
.pay-setup-prompt .pay-setup-x:hover, .pay-setup-prompt .pay-setup-x:focus-visible { background: rgba(27,107,69,.12); }
.pay-setup-prompt:has(.pay-setup-x) { padding-right: 48px; }
@media (max-width: 640px) { .pay-setup-prompt:has(.pay-setup-x) { padding-right: 16px; padding-top: 18px; } .pay-setup-prompt .pay-setup-copy { padding-right: 30px; } }

/* Oct 20, 2026 (David 7:05 PM card, 7:40 PM rows only): Beef What's Included share card. Band (share size +
   freezer line), then every item as a thin icon row under the seller's group labels, freezer space last. */
.bd-share-card { border: 1px solid rgba(197, 48, 48, 0.28); border-radius: 14px; overflow: hidden; background: #fffaf6; margin: 4px 0 6px; }
.bd-share-band { background: var(--beef-l, #fde8e8); border-bottom: 1px solid rgba(197, 48, 48, 0.28); padding: 14px 18px; }
.bd-share-size { font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--beef-d, #9b1c1c); line-height: 1.15; }
.bd-share-line { margin-top: 3px; color: #7a2b2b; font-size: 0.98rem; }
.bd-share-rows { list-style: none; margin: 0; padding: 0; }
.bd-share-rows li { margin: 0; }
.bd-share-rows li + li { border-top: 1px dashed rgba(197, 48, 48, 0.3); }
.bd-share-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; font-size: 0.98rem; line-height: 1.4; color: var(--ink, #142018); }
.bd-share-ic { flex: 0 0 auto; display: inline-flex; color: var(--beef, #c53030); margin-top: 1px; }
.bd-share-txt { min-width: 0; overflow-wrap: anywhere; }
.bd-share-note, .bd-share-rows em { color: var(--muted, #6b7a6e); font-style: normal; }
.bd-share-rows em { font-size: 0.88em; }
.bd-share-group { padding: 12px 16px 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--beef-d, #9b1c1c); background: rgba(253, 232, 232, 0.45); }
@media (max-width: 640px) {
  .bd-share-band { padding: 12px 14px; }
  .bd-share-size { font-size: 1.2rem; }
  .bd-share-item { padding: 10px 12px; font-size: 0.94rem; gap: 10px; }
  .bd-share-group { padding: 11px 12px 5px; }
}

/* Oct 20, 2026 (David 7:59 PM): Beef deposit as a percent with a live amount hint. */
.bd-form .bd-pct { position: relative; }
.bd-form .bd-pct input { padding-right: 34px; width: 100%; box-sizing: border-box; }
.bd-form .bd-pct-sfx { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted, #6b7a6e); font-weight: 600; pointer-events: none; }
.bd-form .bd-deposit-hint { margin: 6px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--green-d, #1f5135); }
.bd-form .bd-deposit-hint.bd-deposit-bad { color: #b42318; font-weight: 500; }
.bd-form .bd-deposit-hint[hidden], .bd-form .bd-legacy[hidden] { display: none; }

/* Oct 20, 2026 (David 8:06 PM): small line under the side-card Deposit ("Balance due at pickup"). */
.bd-specs dd .bd-dd-sub { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 500; color: var(--muted, #6b7a6e); }
.bd-actions .bd-qty-row { margin: 4px 0 12px; }
.bd-online-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff6e5; border: 1px solid #f0d49a; color: #6b4a00; font-size: 13px; line-height: 1.4; }
.cart-dep { font-size: 12px; line-height: 1.35; margin: 2px 0 8px; text-align: right; }

/* Nov 5 (David): listing header Save / Share / Report / Back match the site mobile header icon language
   (same Lucide stroke family as cart / messages / bell: 22px, stroke ~1.9, ink color, transparent tap target).
   Do not invent a third style — cards keep their own round .card-icon share. */
.ldz-nav-actions .hy-nav-ico,
.ldz-nav-back .hy-nav-ico,
.ldz-float-chrome .hy-nav-ico {
  width: 22px; height: 22px; display: block; flex-shrink: 0;
}
.ldz-nav-actions .ldz-nav-btn,
.ldz-nav-actions button.hy-share-btn,
.ld-z .ldz-nav-back.hy-back-circle {
  color: var(--green-d);
}
.ldz-nav-actions .ldz-nav-btn:hover,
.ldz-nav-actions .ldz-nav-btn:focus-visible,
.ldz-nav-actions button.hy-share-btn:hover,
.ldz-nav-actions button.hy-share-btn:focus-visible,
.ld-z .ldz-nav-back.hy-back-circle:hover {
  color: var(--green);
}
.ldz-nav-actions .ldz-nav-btn.on { color: #c9a227; }
.ldz-nav-actions button.hy-share-btn .hy-share-ico {
  width: 22px; height: 22px;
  /* match site header stroke weight visually; SVG path uses stroke-width 2 */
}

/* Oct 20 (David 8:17 PM): in the listing page header (top bar and title row, every listing type) Share is just the
   dark green icon: no circle, border or shadow; transparent 40px tap target; visible keyboard focus ring.
   On phones (over the photo) it is plain too, with a soft halo on the glyph only (8:19 PM). */
.ldz-nav-actions button.hy-share-btn,
.ldz-head-actions button.hy-share-btn {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--green-d);
}
.ldz-nav-actions button.hy-share-btn:hover,
.ldz-head-actions button.hy-share-btn:hover { background: transparent; color: var(--green); border: 0; }
.ldz-nav-actions button.hy-share-btn:focus-visible,
.ldz-head-actions button.hy-share-btn:focus-visible { background: transparent; color: var(--green); outline: 2px solid var(--green); outline-offset: 2px; }
.ldz-nav-actions button.hy-share-btn .hy-share-ico,
.ldz-head-actions button.hy-share-btn .hy-share-ico { width: 22px; height: 22px; }

/* Oct 20 (David 8:19 PM): listing page Back (top bar on desktop, photo bar on phones; every listing type) is just the
   dark green back arrow: no circle, border or shadow; 40px transparent tap target; focus ring. Over a photo the
   glyph (not a circle) gets a soft white halo plus a faint dark edge so it stays visible on light and dark photos.
   The phone Share icon over the photo gets the same plain treatment. */
html body .ld-z .ldz-nav-back.hy-back-circle,
html body .ldz-float-chrome .ldz-float-back,
html body .ldz-float-chrome button.hy-share-btn {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--green-d);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html body .ld-z .ldz-nav-back.hy-back-circle span[aria-hidden],
html body .ldz-float-chrome .ldz-float-back span[aria-hidden] { color: var(--green-d); font-size: 2.5rem; font-weight: 500; margin-top: -4px; }
html body .ld-z .ldz-nav-back.hy-back-circle:hover { background: transparent; color: var(--green); }
html body .ld-z .ldz-nav-back.hy-back-circle:hover span[aria-hidden] { color: var(--green); }
html body .ld-z .ldz-nav-back.hy-back-circle:focus-visible,
html body .ldz-float-chrome .ldz-float-back:focus-visible,
html body .ldz-float-chrome button.hy-share-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; background: transparent; }
html body .ldz-float-chrome .ldz-float-back span[aria-hidden] { text-shadow: 0 0 3px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.25); }
html body .ldz-float-chrome button.hy-share-btn .hy-share-ico { width: 22px; height: 22px; filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 4px rgba(255,255,255,.75)) drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.bd-actions #buy-qty { background: #fff; color: var(--ink); }
html body .ld-z .ldz-nav-back.hy-back-circle .hy-back-ico,
html body .ldz-float-chrome .ldz-float-back .hy-back-ico { width: 22px; height: 22px; display: block; margin: 0; }
html body .ldz-float-chrome .ldz-float-back .hy-back-ico { filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 4px rgba(255,255,255,.75)) drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
html body .ld-z .ldz-nav-back.hy-back-circle span[aria-hidden],
html body .ldz-float-chrome .ldz-float-back span[aria-hidden] { margin-top: 0; display: inline-flex; }
.bd-inc-sec.bd-inc-notitle .bd-share-card { margin-top: 0; }

/* Oct 21 (David 3:49 AM): Beef Pickup Location = the Cattle route calculator. Map on top, then the buyer's
   address (left) and the pickup (right) side by side; stacked on phones. */
.bd-pick .bd-pick-map { margin: 0 0 12px; }
.bd-pick .bd-pick-calc { border: 0 !important; padding: 0 !important; background: transparent !important; }
.bd-pick-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bd-pick-box { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); position: relative; }
.bd-pick-box .ldz-dcalc-label { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); text-transform: none; }
.bd-pick-box input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; background: var(--white); box-sizing: border-box; }
.bd-pick-box input:focus { outline: none; border-color: var(--green, #2f6b3a); box-shadow: 0 0 0 3px rgba(47, 107, 58, 0.15); }
.bd-pick-proc { font-size: 1rem; line-height: 1.25; color: var(--ink); }
.bd-pick-addr { display: flex; align-items: flex-start; gap: 4px; font-size: 0.92rem; color: var(--ink); overflow-wrap: anywhere; }
.bd-pick-go { width: 100%; min-height: 44px; margin-top: 10px; }
.bd-pick .ldz-route { margin-top: 12px; }
.bd-pick-dir { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 10px; }
.bd-pick-dir[hidden] { display: none; }
@media (max-width: 640px) {
  .bd-pick-pair { grid-template-columns: 1fr; }
}

/* Oct 21 (David 3:53 / 3:54 AM): owner's Edit listing is a small, non-bold link in the brand red at the bottom of the side card. */
.ld-purchase .ld-owner-edit { display: block; width: fit-content; margin: 12px auto 0; padding: 6px 4px; font-size: 0.86rem; font-weight: 400; color: var(--beef, #c53030); text-decoration: underline; text-underline-offset: 2px; }
.ld-purchase .ld-owner-edit:hover { color: var(--beef-d, #9b1c1c); }
.ld-purchase .ld-owner-edit:focus-visible { outline: 2px solid var(--beef, #c53030); outline-offset: 2px; border-radius: 4px; }
.ld-purchase .ld-owner-note { margin: 10px 0 0; }

/* Oct 21 (David 4:51 AM): Beef title "Diet | Breed | Share": brand red text, dark " | " separators, a smaller "/" in
   cross breeds (letter height), and the share as a small typographic fraction like the side card's "½ beef". */
.bd-head .ld-title.bd-title { color: var(--beef, #c53030); }
.bd-title .bd-t-sep { color: var(--ink, #142018); font-weight: 400; }
.bd-title .bd-t-slash { display: inline-block; font-size: 0.72em; line-height: 1; vertical-align: 0.08em; }
.bd-title .bd-frac { font-variant-numeric: diagonal-fractions; }
.bd-title .bd-frac-x { white-space: nowrap; }
.bd-title .bd-frac-x sup, .bd-title .bd-frac-x sub { font-size: 0.55em; line-height: 0; position: relative; vertical-align: baseline; }
.bd-title .bd-frac-x sup { top: -0.6em; }
.bd-title .bd-frac-x sub { top: 0; }

/* Oct 21 (David 4:55 AM): Beef pickup calculator uses the white pickup truck (faces right, the direction of travel,
   like the cattle truck). Same height on the route line as the cattle truck; it stops the same distance from the end. */
.ldz-route-truck.ldz-route-truck-pickup { width: 72px; }
.ldz-route-truck-pickup.go { animation-name: ldz-truck-pk; }
@keyframes ldz-truck-pk { from { left: 4px; } to { left: calc(100% - 86px); } }
@media (prefers-reduced-motion: reduce) { .ldz-route-truck-pickup.go { left: calc(100% - 86px); } }
@media (max-width: 560px) {
  .ldz-route-truck.ldz-route-truck-pickup { width: 53px; }
  .ldz-route-truck-pickup.go { animation-name: ldz-truck-pk-sm; }
  @media (prefers-reduced-motion: reduce) { .ldz-route-truck-pickup.go { left: calc(100% - 67px); } }
}
@keyframes ldz-truck-pk-sm { from { left: 4px; } to { left: calc(100% - 67px); } }
.bd-pick-hint { margin: 2px 0 0; font-size: 0.8rem; }
.bd-pick-hint[hidden] { display: none; }

/* Oct 21 (David 5:07 AM): Beef card Raised badge, photo top left, same pill as the card's other corner pills.
   Under a Demo pill when both show. Long multi-choice values end in an ellipsis. */
.listing-card .thumb .card-pill.card-pill-raised { left: 10px; right: auto; top: 12px; max-width: calc(100% - 92px); overflow: hidden; text-overflow: ellipsis; }
.listing-card .thumb .card-pill-demo ~ .card-pill.card-pill-raised { top: 42px; }
.hy-map-tag.hy-map-tag-raised { background: rgba(92, 24, 24, 0.86); text-transform: none; letter-spacing: 0.01em; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Oct 21 (David 6:56 AM): Beef side-card Payment Summary, directly under the Shares quantity selector. */
.bd-qty-msg { margin: -4px 0 8px; font-size: 0.82rem; font-weight: 600; color: #8a1c1c; }
.bd-qty-msg[hidden], .bd-paysum[hidden] { display: none; }
.bd-paysum { margin: 0 0 12px; padding: 12px 14px; border: 1px solid #e6eee8; border-radius: 10px; background: #fbfaf6; }
.bd-ps-h { margin: 0 0 6px; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.bd-ps-dl { margin: 0; display: grid; gap: 4px; }
.bd-ps-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.88rem; }
.bd-ps-row dt { margin: 0; color: var(--ink-soft, #4a5a4e); }
.bd-ps-row dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-ps-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid #e6eee8; }
.bd-ps-total dt { color: var(--ink); font-weight: 700; }
.bd-ps-total dd { font-size: 1.12rem; font-weight: 800; color: var(--beef, #a61d24); }
.bd-ps-total dd.bd-ps-set { font-size: 0.92rem; font-weight: 700; color: var(--ink); white-space: normal; text-align: right; }
.bd-ps-est { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: #f1ece2; font-size: 0.7rem; font-weight: 700; color: var(--ink-soft, #4a5a4e); vertical-align: 1px; }
.bd-ps-note { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.4; }
.bd-form .bd-pct.bd-dep-any input { padding-right: 12px; }

/* Oct 22 (David 7:17-7:18 AM): the Beef form uses the standard colors (no pink/red tint), same as Cattle and Genetics.
   The old .form-page.beef-form accent overrides were removed. Oct 22 7:57 AM: red buttons/pills with light grey fills, see the end of this file. */
/* Oct 21: inline server field error (any form), e.g. Shares available below reserved shares. */
.list-field-err { margin: 6px 0 0; font-size: 0.86rem; line-height: 1.35; color: #8a1c1c; }
.list-field-err[hidden] { display: none !important; }
/* Oct 21 (David 7:30 AM): Beef details grid in the left column, directly under the title (desktop and phone). */
.bd-details-main { margin: 14px 0 4px; }
.bd-details-main .ld-panel-facts.bd-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: #e6eee8; border: 1px solid #e6eee8; border-radius: 12px; overflow: hidden; }
.bd-details-main .ld-panel-facts.bd-specs > div { display: block; background: #fff; padding: 9px 12px; min-width: 0; }
.bd-details-main .ld-panel-facts.bd-specs dt { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #6b7a6e); }
.bd-details-main .ld-panel-facts.bd-specs dd { text-align: left; margin: 2px 0 0; font-weight: 650; overflow-wrap: anywhere; }
.bd-details-main .ld-panel-facts.bd-specs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1100px) { .bd-details-main .ld-panel-facts.bd-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bd-details-main .ld-panel-facts.bd-specs > div:last-child:nth-child(odd) { grid-column: auto; } .bd-details-main .ld-panel-facts.bd-specs > div:last-child:nth-child(3n+1) { grid-column: 1 / -1; } .bd-details-main .ld-panel-facts.bd-specs > div:last-child:nth-child(3n+2) { grid-column: span 2; } }
.list-kind-toggle[hidden] { display: none !important; }

/* Oct 21, 2026 (David 10:09-10:10 AM): genetics cards: verified check-badge icon inline after the title (replaces the
   top-left "Semen · Verified" photo pill). Sized to the text; tooltip is one floating element (titles are line-clamped). */
.gx-vbadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05em; height: 1.05em; margin-left: 2px; vertical-align: -0.14em;
  color: var(--green, #1f7a4d); font-size: 1em; line-height: 1; cursor: help;
  border-radius: 50%; -webkit-tap-highlight-color: transparent; position: relative;
}
.gx-vbadge svg { width: 100%; height: 100%; display: block; }
/* Bigger tap target without moving the text. */
.gx-vbadge::before { content: ""; position: absolute; inset: -8px; }
.gx-vbadge:focus-visible { outline: 2px solid var(--green-d, #1b6b45); outline-offset: 2px; }
.gx-vbadge.tip-open { color: var(--green-d, #1b6b45); }
.price .gx-vbadge { font-size: 0.9em; }
.gx-vtip {
  position: fixed; z-index: 10050; max-width: 240px; pointer-events: none;
  background: #1d2a22; color: #fff; font-size: 0.78rem; font-weight: 600; line-height: 1.3;
  padding: 6px 10px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.18); white-space: nowrap;
}
.gx-vtip[hidden] { display: none; }

/* Oct 21, 2026: order management (Orders page). Kind slider reuses .list-kind-toggle; role toggle reuses .hy-how-toggle. */
.ord-role { margin: 4px 0 6px; max-width: 320px; }
.ord-role button { padding: 9px 14px; }
.orders-kind { margin: 10px 0 0; }
.orders-kind .ord-count { display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: rgba(22, 80, 60, 0.12); font-size: 0.8rem; line-height: 1.5; }
.orders-kind button.on .ord-count { background: rgba(255, 255, 255, 0.25); }
.ord-filters { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.ord-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.ord-side { font-weight: 650; font-size: 0.9rem; color: #16503c; }
.ord-side-seller .ord-side { color: #8a4b12; }
.ord-filter button { border: 1px solid #d8e0d6; background: #fff; color: #3a4a3e; font: inherit; font-weight: 600; font-size: 0.88rem; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.ord-filter button.on { background: #16503c; border-color: #16503c; color: #fff; }
.ord-list { display: flex; flex-direction: column; gap: 10px; }
.ord-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid #e0e8e2; border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.ord-row:hover { border-color: #b9cfc0; box-shadow: 0 2px 10px rgba(20, 32, 24, 0.06); }
/* Nov 4 (David): drop-down on each order row shows the order details inline. */
.ord-item { position: relative; border: 1px solid #e0e8e2; border-radius: 14px; background: #fff; }
.ord-item > .ord-row { border: 0; padding-right: 52px; }
.ord-item > .ord-row:hover { box-shadow: none; }
.ord-item:hover { border-color: #b9cfc0; box-shadow: 0 2px 10px rgba(20, 32, 24, 0.06); }
.ord-expand { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e0e8e2; border-radius: 999px; background: #fff; color: #2f4a38; cursor: pointer; }
.ord-expand:hover, .ord-expand:focus-visible { border-color: #2f6b46; }
.ord-expand svg { transition: transform .15s ease; }
.ord-expand[aria-expanded='true'] svg { transform: rotate(180deg); }
.ord-inline { border-top: 1px solid #e0e8e2; padding: 12px 14px 14px; min-width: 0; overflow-wrap: anywhere; }
.ord-inline h4 { margin: 0 0 6px; font-size: 14px; }
.ord-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; }
.ord-inline-sec { min-width: 0; }
.ord-inline-sec h4 + * { margin-top: 0; }
.ord-inline-sec .ord-kv { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 3px 0; }
.ord-inline-open { margin-top: 8px; }
@media (max-width: 640px) { .ord-inline-grid { grid-template-columns: minmax(0, 1fr); } .ord-item > .ord-row { padding-right: 48px; } }
.ord-thumb { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: #eef4ef; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.ord-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ord-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ord-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ord-title { font-size: 1.02rem; overflow-wrap: anywhere; }
.ord-meta { color: #5c6b62; font-size: 0.88rem; overflow-wrap: anywhere; }
.ord-due { color: #8a5a1f; }
.ord-red { color: #b42318 !important; }
.ord-badge { flex: 0 0 auto; background: #fdf0d5; color: #7a4b00; border: 1px solid #f0d49a; font-size: 0.76rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
/* Oct 21 (Store / David): labeled order stepper (list cards and detail). */
.ord-stepper { --sz: 18px; --cur: 24px; --line: 3px; --acc: var(--green, #1b6b45); list-style: none; margin: 10px 0 0; padding: 0; display: flex; align-items: flex-start; width: 100%; min-width: max-content; max-width: 100%; }
.ord-stepper.is-roomy { --sz: 26px; --cur: 34px; --line: 4px; margin-top: 14px; }
/* Oct 21 (David, no label clipping): the first node sits at the left edge with its label left-aligned, the last at
   the right edge with its label right-aligned, so neither end clips. Each step is at least as wide as its label
   (labels size to their text: no ellipsis, no hidden overflow, never under a neighbour) and spare room is shared out,
   the end steps taking half a share. The stepper is never narrower than its labels. Each step draws its own half of the
   connector: ::before from its left edge in, ::after out to its right edge, so the line meets whatever the widths. */
.ord-step { position: relative; flex: 1 0 auto; min-width: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; }
.ord-step:first-child, .ord-step:last-child { flex-grow: 0.5; }
.ord-step:first-child { align-items: flex-start; text-align: left; }
.ord-step:last-child { align-items: flex-end; text-align: right; }
.ord-step::before, .ord-step::after { content: ""; position: absolute; top: calc(var(--cur) / 2 - var(--line) / 2); height: var(--line); background: #dfe7e1; z-index: 0; }
.ord-step::before { left: 0; right: 50%; }
.ord-step::after { left: 50%; right: 0; }
.ord-step:last-child::before { right: 0; }
.ord-step:first-child::after { left: 0; }
.ord-step:first-child::before, .ord-step:last-child::after { display: none; }
.ord-step.is-done::before, .ord-step.is-current::before { background: var(--acc); }
.ord-step.is-done:not(.is-current)::after { background: var(--acc); }
.ord-stepper.is-cancelled .ord-step.is-cancel::before, .ord-stepper.is-cancelled .ord-step.is-done:nth-last-child(2)::after { background: repeating-linear-gradient(90deg, #d92d20 0 6px, transparent 6px 10px); }
.ord-node { position: relative; z-index: 1; box-sizing: border-box; width: var(--sz); height: var(--sz); margin-top: calc((var(--cur) - var(--sz)) / 2); border-radius: 50%; border: 2px solid #c5d1c8; background: #fff; color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ord-node svg { width: 70%; height: 70%; display: block; }
.ord-step.is-done .ord-node { background: var(--acc); border-color: var(--acc); }
.ord-step.is-current .ord-node { width: var(--cur); height: var(--cur); margin-top: 0; border: 3px solid var(--acc); background: #fff; box-shadow: 0 0 0 4px rgba(27, 107, 69, 0.16); }
.ord-step.is-current .ord-node::after { content: ""; width: 38%; height: 38%; border-radius: 50%; background: var(--acc); }
.ord-step.is-done.is-current .ord-node { background: var(--acc); }
.ord-step.is-done.is-current .ord-node::after { display: none; }
.ord-step.is-cancel .ord-node { background: #d92d20; border-color: #d92d20; box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.16); }
.ord-step.is-cancel .ord-node::after { display: none; }
.ord-step-label { font-size: 0.72rem; line-height: 1.2; color: #7a877e; white-space: nowrap; overflow: visible; padding: 0 4px; }
.ord-step:first-child .ord-step-label { padding-left: 0; }
.ord-step:last-child .ord-step-label { padding-right: 0; }
.ord-stepper.is-roomy .ord-step-label { font-size: 0.8rem; }
.ord-step.is-done .ord-step-label { color: #3a4a3e; }
.ord-step.is-current .ord-step-label { color: var(--acc); font-weight: 700; }
.ord-step.is-cancel .ord-step-label { color: #b42318; font-weight: 700; }
.ord-stepper.is-cancelled .ord-step.is-done .ord-node { background: #9fb0a5; border-color: #9fb0a5; }
.ord-stepper.is-cancelled .ord-step.is-done::before, .ord-stepper.is-cancelled .ord-step.is-done:not(:nth-last-child(2))::after { background: #9fb0a5; }
@media (prefers-reduced-motion: no-preference) {
  .ord-step.is-current:not(.is-done):not(.is-cancel) .ord-node { animation: ord-pulse 2.4s ease-in-out infinite; }
  @keyframes ord-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(27, 107, 69, 0.16); } 50% { box-shadow: 0 0 0 7px rgba(27, 107, 69, 0.06); } }
}
/* Phones: dots only, plus the current stage's label (the stage line below says it in full). Never wider than the card. */
@media (max-width: 600px) {
  .ord-stepper { --sz: 12px; --cur: 18px; --line: 2px; }
  .ord-stepper.is-roomy { --sz: 16px; --cur: 24px; --line: 3px; }
  .ord-step-label { display: none; }
  .ord-step.is-current .ord-node { box-shadow: 0 0 0 3px rgba(27, 107, 69, 0.16); }
}
.ord-stage-line { font-size: 0.86rem; color: #3a4a3e; margin-top: 4px; }
.ord-stage-line span { color: #6b7a70; }
/* v4 (David): list cards put the compact 5-step stepper to the right of the details, badge at the far right.
   The card is as tall as its details. Narrow screens stack the stepper under the details, still compact. */
.ord-row .ord-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(max-content, 340px) 96px; grid-template-areas: "info prog badge"; align-items: center; column-gap: 18px; row-gap: 8px; }
.ord-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ord-prog { grid-area: prog; min-width: 0; display: block; }
.ord-badge-slot { grid-area: badge; align-self: start; display: flex; justify-content: flex-end; }
.ord-stepper.is-compact { --sz: 14px; --cur: 20px; --line: 2px; margin: 0; }
.ord-stepper.is-compact .ord-step { gap: 4px; }
.ord-stepper.is-compact .ord-step-label { font-size: 0.68rem; }
.ord-stepper.is-compact .ord-step.is-current .ord-node { box-shadow: 0 0 0 3px rgba(27, 107, 69, 0.16); }
.ord-stepper.is-compact.is-cancelled .ord-step.is-cancel .ord-node { box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.16); }
.ord-stepcap { display: none; font-size: 0.8rem; font-weight: 650; color: var(--green, #1b6b45); margin-top: 4px; }
@media (max-width: 900px) {
  .ord-row .ord-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info badge" "prog prog"; align-items: start; }
  .ord-badge-slot:empty { display: none; }
  .ord-prog { max-width: 420px; }
}
@media (max-width: 600px) {
  /* Phones: the title gets the full width; the stepper and the badge share the row under the details. */
  .ord-row .ord-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info info" "prog badge"; row-gap: 6px; column-gap: 10px; }
  .ord-badge-slot { align-self: end; }
  .ord-prog { max-width: 240px; }
  .ord-stepper.is-compact { --sz: 11px; --cur: 16px; --line: 2px; }
  .ord-stepper.is-compact .ord-step-label { display: none; }
  .ord-stepcap { display: block; margin-top: 3px; font-size: 0.78rem; }
  .ord-stepper.is-compact.is-cancelled + .ord-stepcap { color: #b42318; }
}
.ord-empty { padding: 18px 4px; }
.ord-back { display: inline-block; margin: 0 0 8px; font-weight: 600; }
.ord-detail-title { margin-bottom: 2px; }
.ord-status-panel { margin: 12px 0; }
.ord-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ord-admin { display: flex; gap: 6px; align-items: center; font-size: 0.86rem; color: #5c6b62; }
/* Oct 21 (David 8:28 PM): the admin stage dropdown sits outside a .field, so it fell back to the browser's square box.
   Same look as the site's other selects (.field select): theme border, 10px corners, paper background, the one caret. */
.ord-admin select {
  width: auto; min-width: 180px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px; background-color: var(--paper);
  padding: 9px 44px 9px 11px; color: var(--ink); font: inherit; font-size: 0.92rem; line-height: 1.3;
}
.ord-admin select:focus-visible { outline: 2px solid var(--green-d, #1f5135); outline-offset: 2px; }
.ord-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ord-grid .panel { margin: 0; min-width: 0; }
.ord-grid h3, .ord-status-panel h3 { margin: 0 0 8px; font-size: 1rem; }
.ord-items { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ord-items th, .ord-items td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #e6eee8; vertical-align: middle; }
.ord-items th { color: #5c6b62; font-weight: 600; font-size: 0.8rem; }
.ord-items td:first-child { display: flex; gap: 8px; align-items: center; }
.ord-items td img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
/* Oct 21: order detail fields use the shared .field input / select / textarea look; these only place them. */
.ord-field { margin: 0; min-width: 0; }
.ord-items .ord-field input { width: 88px; }
.ord-perlb { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; align-items: flex-end; }
.ord-perlb > label { display: flex; flex-direction: column; gap: 4px; font-size: 0.84rem; color: #3a4a3e; font-weight: 600; }
.ord-perlb .ord-field { flex: 1 1 180px; }
.ord-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ord-edit-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ord-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #eef2ef; font-size: 0.92rem; }
.ord-kv span:first-child { color: #5c6b62; flex: 0 0 auto; }
.ord-kv span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ord-contact { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid #eef2ef; overflow-wrap: anywhere; }
.ord-timeline { list-style: none; margin: 0; padding: 0; }
.ord-timeline li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eef2ef; font-size: 0.9rem; }
.ord-when { flex: 0 0 120px; color: #6b7a70; font-size: 0.82rem; }
@media (max-width: 760px) {
  .ord-grid { grid-template-columns: 1fr; }
  .ord-form { grid-template-columns: 1fr; }
  .ord-row { padding: 12px; gap: 10px; }
  .ord-thumb { flex-basis: 56px; width: 56px; height: 56px; }
  .orders-kind { width: 100%; max-width: 100%; box-sizing: border-box; }
  .orders-kind button { min-width: 0; padding: 9px 2px; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .orders-kind .ord-count { margin-left: 2px; padding: 0 5px; }
  .ord-when { flex-basis: 84px; }
  .ord-items thead { display: none; }
  .ord-items tr { display: flex; flex-wrap: wrap; }
  .ord-items td { border: 0; padding: 4px 6px; }
  .ord-items td:first-child { flex: 1 0 100%; }
  .ord-items td[data-label]::before { content: attr(data-label) ": "; color: #6b7a70; font-size: 0.8rem; }
}

/* Oct 21, 2026 (David): admin Demo button (account sidebar + phone admin pills) and the header star shown while an
   admin is viewing as the demo account. */
.adm-demo-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid #c4a35a; background: #fff8e6; color: #6b4e0e; font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.adm-demo-btn:hover { background: #fdefc8; }
.adm-demo-btn svg, .dash-pill-demo svg { color: #c4952b; flex: 0 0 auto; }
.adm-demo-btn:disabled, .dash-pill-demo:disabled { opacity: .6; cursor: progress; }
.dash-pill.dash-pill-demo { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #c4a35a; background: #fff8e6; color: #6b4e0e; font: inherit; font-weight: 600; cursor: pointer; }
.header-actions .imp-star {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; padding: 0; margin: 0 2px;
  border-radius: 999px; border: 1px solid #e3c770; background: #fff6d6; color: #c4952b; cursor: pointer; position: relative;
}
.header-actions .imp-star:hover { background: #fdeba8; }
.header-actions .imp-star:focus-visible { outline: 2px solid #c4952b; outline-offset: 2px; }
.header-actions .imp-star[hidden] { display: none !important; }
.header-actions .imp-star.is-busy { opacity: .6; cursor: progress; }
@media (max-width: 760px) { .header-actions .imp-star { width: 34px; height: 34px; min-width: 34px; margin: 0 4px; } }

/* Oct 21 (David, buy buttons): card Add to Cart is a round cart-plus icon (primary, small) next to Favorites/Share.
   Genetics cards keep Favorites on the photo, so their icon sits in the body's bottom-right corner (card-cart-slot).
   After an add it shows a check for a moment; sold out is a gray, inert icon with a "Sold out" tooltip. */
.card-icon.card-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  text-decoration: none;
}
.card-icon.card-cart:hover,
.card-icon.card-cart:focus-visible { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.card-icon.card-cart:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.card-icon.card-cart .card-cart-ico { width: 18px; height: 18px; display: block; }
.card-icon.card-cart.is-added { background: var(--green-d); border-color: var(--green-d); }
.card-icon.card-cart.is-soldout,
.card-icon.card-cart.is-soldout:hover {
  background: #eeece6;
  border-color: var(--line);
  color: #9aa39c;
  cursor: not-allowed;
  box-shadow: none;
}
.card-cart-slot { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; }
.listing-card.gx2-card:has(.card-cart-slot) .listing-body,
.listing-card.gx-card:has(.card-cart-slot) .listing-body { padding-right: 52px; }
.ld-due-today {
  margin: 10px 0 4px;
  font-weight: 650;
  font-size: 0.98rem;
  color: var(--green-d);
}
.ld-due-today[hidden] { display: none; }
.btn.ld-soldout-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.ld-own-note { margin: 10px 0 0; }
/* Cattle/Beef cards: the cart icon sits at the bottom-right corner on the footer line (producer | head/lot | cart),
   so the price row keeps its room and no photo badge is covered. */
.listing-card.card-v2 .card-cart-slot { right: 12px; bottom: 6px; }
.listing-card.card-v2 .card-cart-slot .card-icon.card-cart { width: 30px; height: 30px; }
.listing-card.card-v2 .listing-body:has(.card-cart-slot) .card-foot { padding-right: 40px; }
/* Oct 21 (David): optimized profile header (picture + video) and owner drag-and-drop. */
.rs-cover .rs-cover-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.rs-cover .rs-cover-pic, .rs-cover .rs-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rs-cover .rs-cover-img { object-fit: cover; object-position: center; }
.rs-cover.has-media { background-image: none; }
.rs-cover .rs-cover-media .ranch-cover-video { z-index: 1; }
.rs-cover-change { position: absolute; left: 16px; top: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink, #1c2a21); font: inherit; font-size: 0.86rem; font-weight: 650; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); cursor: pointer; }
.rs-cover-change:hover { background: #fff; }
.rs-cover-change:focus-visible { outline: 3px solid var(--green, #1b6b45); outline-offset: 2px; }
.rs-cover-drop-hint, .rs-cover-busy { position: absolute; inset: 12px; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: #fff; border-radius: 12px; pointer-events: none; }
.rs-cover-drop-hint { border: 3px dashed rgba(255, 255, 255, 0.95); background: rgba(16, 62, 40, 0.62); }
.rs-cover-drop-hint b { font-size: 1.25rem; }
.rs-cover-drop-hint span { font-size: 0.92rem; opacity: 0.92; }
.rs-cover-owner.is-dragover .rs-cover-drop-hint { display: flex; }
.rs-cover-owner.is-dragover { box-shadow: inset 0 0 0 4px #7fd3a3; }
.rs-cover-owner.is-busy .rs-cover-busy { display: flex; background: rgba(16, 32, 24, 0.55); font-weight: 650; }
@media (max-width: 600px) {
  .rs-cover-change { left: 12px; top: 12px; height: 34px; padding: 0 12px; font-size: 0.82rem; }
  .rs-cover-drop-hint b { font-size: 1.05rem; }
}

/* Oct 21, 2026 (David 3:51 PM): desktop account menu matches the app's Account screen. Admin Demo box on top, one
   list of rows (green Lucide line icon, label), a small "More" group for web-only pages. */
.acct-admin-box { margin: 0 8px 12px; padding: 8px 8px 4px; border-radius: 12px; background: #eaf3ee; }
.acct-admin-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5c6f62; padding: 2px 4px 6px; }
.acct-menu { padding: 0 12px; display: flex; flex-direction: column; gap: 4px; }
/* Oct 21 (David 4:32 PM): no enclosing card. Rows sit openly on the sidebar with roomy spacing like the older menu. */
.am-card { display: flex; flex-direction: column; gap: 4px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.acct-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 12px; border-radius: 10px; color: #1f2a22; font-weight: 560; font-size: .95rem; line-height: 1.25; text-decoration: none; }
.acct-row .acct-ico { color: #1f6b45; flex: 0 0 auto; }
.acct-row .am-label { flex: 1 1 auto; min-width: 0; }
.acct-row .acct-chev { display: none; }
.acct-row:hover { background: #f1f6f2; }
.acct-row.on { background: #e6f2ea; color: #0f3f28; }
.acct-row:focus-visible { outline: 3px solid #1f6b45; outline-offset: 1px; }
.acct-more-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5c6f62; padding: 16px 12px 4px; }
.acct-delete-link { display: block; text-align: center; margin-top: 10px; font-size: .9rem; color: #6b7a6e; }
.acct-delete-link:hover { color: #b3261e; }
/* Notifications / Following / Saved searches pages */
.am-list { background: #fffdf9; border: 1px solid #dfe5dc; border-radius: 14px; overflow: hidden; max-width: 760px; }
.am-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; }
.am-list-row + .am-list-row { border-top: 1px solid #ebefe8; }
.am-list-row:hover { background: #f1f6f2; }
.am-list-row .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.am-list-row .grow .sub { overflow-wrap: anywhere; }
.am-list-when { flex: 0 0 auto; white-space: nowrap; font-size: .85rem; }
.am-list-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: 0 0 auto; }
.am-list-row.unread .am-list-dot { background: #1f6b45; }
.am-list-row.unread b { color: #0f3f28; }
.am-list-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #e6f2ea; }
.am-list-logo-empty { display: inline-flex; align-items: center; justify-content: center; color: #1f6b45; font-weight: 700; }
.acct-ss { max-width: 760px; }
/* A little wider on desktop so "Notification settings" fits on one line (the Profile Editor still hides it). */
@media (min-width: 981px) {
  .dash-shell { grid-template-columns: 260px minmax(0, 1fr); }
}

/* Oct 21 (demo test checkout + invoice orders): Test order pill, Awaiting payment badge, review step. */
.test-pill { display: inline-block; vertical-align: middle; padding: 2px 8px; border-radius: 999px; background: #fff4d6; color: #7a5300; border: 1px solid #f0d58a; font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.ord-top .ord-test { margin-left: 6px; }
.ord-detail-title .ord-test, .ord-detail-title .ord-badge-pay { font-size: .78rem; margin-left: 8px; vertical-align: middle; }
.ord-badge.ord-badge-pay, .ord-badge-pay { background: #fdecea; color: #9b2c1f; border: 1px solid #f3c2bb; }
.ord-badge-slot .ord-badge + .ord-badge { margin-top: 4px; }
.ord-test-note { margin: -4px 0 12px; }
.ld-testnote, .cart-test { font-size: .82rem; color: var(--muted); margin: 8px 0 0; line-height: 1.4; }
.ld-invoice, .cart-invoice { margin: 12px 0 0; padding: 14px; border-radius: 12px; background: #fff8ea; border: 1px solid #f0d58a; color: #3d3214; }
.ld-invoice p, .cart-invoice p { margin: 0 0 8px; font-size: .9rem; line-height: 1.45; }
.ld-invoice-h { margin: 0 0 6px; font-size: 1rem; }
.ld-invoice-sum { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #f0d58a; border-bottom: 1px solid #f0d58a; margin: 8px 0; font-size: .92rem; min-width: 0; }
.ld-invoice-sum span { min-width: 0; overflow-wrap: anywhere; }
.ld-invoice-actions { display: grid; gap: 8px; margin-top: 10px; }
.ord-paid-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; width: 100%; }
.ord-paid-form .ord-field { margin: 0; min-width: 140px; }

/* Oct 21 (David 4:22 PM): invoice orders: Send invoice panel and the printable invoice (/orders/:id/invoice). */
.ord-invoice-panel { margin-bottom: 16px; }
.ord-invoice-panel textarea { width: 100%; box-sizing: border-box; min-height: 96px; font: inherit; }
.ord-inv-need { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #fff6e5; border: 1px solid #f1c97a; color: #6b4a00; }
.ord-inv-sent { margin: 0 0 10px; }
#pay-instructions { width: 100%; box-sizing: border-box; min-height: 110px; font: inherit; }
.inv-page { max-width: 820px; margin: 0 auto; }
.inv-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.inv-draft { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: #eef4ff; color: #1d3f7a; }
.inv-sheet { position: relative; background: #fff; color: #1b1b1b; border: 1px solid #e3e0da; border-radius: 12px; padding: 28px; overflow-wrap: anywhere; }
.inv-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid #1b1b1b; padding-bottom: 14px; }
.inv-ranch { font-size: 1.35rem; font-weight: 800; }
.inv-meta { text-align: right; }
.inv-title { font-size: 1.2rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.inv-bill { margin: 16px 0 10px; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th, .inv-table td { padding: 8px 6px; border-bottom: 1px solid #ece9e3; text-align: left; vertical-align: top; }
.inv-table .num { text-align: right; white-space: nowrap; }
.inv-table tfoot td { font-weight: 600; }
.inv-table .inv-due td { font-size: 1.1rem; font-weight: 800; border-bottom: 0; }
.inv-pay { margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: #f7f5f1; }
.inv-pay h3 { margin: 0 0 6px; }
.inv-instr { margin: 0 0 8px; white-space: normal; }
.inv-stamp { position: absolute; top: 90px; right: 28px; transform: rotate(-12deg); border: 3px solid #1f8a4c; color: #1f8a4c; font-weight: 900; padding: 4px 10px; border-radius: 6px; }
@media (max-width: 560px) {
  .inv-sheet { padding: 16px; }
  .inv-meta { text-align: left; }
  .inv-table th, .inv-table td { padding: 6px 3px; font-size: .9rem; }
}
@media print {
  .no-print, header.site-header, .site-nav, nav, footer, .hy-bottom-nav { display: none !important; }
  .inv-sheet { border: 0; padding: 0; }
}

/* Oct 21 (David 8:27 PM): phones. The listing page/sheet covers the site header, so its top bar carries the cart too
   (same icon and red count badge as the header cart). Desktop keeps the header cart only. A short bump after Add to cart. */
.ldz-nav .ldz-cart { display: none; }
@media (max-width: 760px) {
  .ld-z .ldz-nav .ldz-cart,
  .hy-listing-overlay .ld-overlay .ldz-nav .ldz-cart { display: inline-flex !important; position: relative; color: var(--ink); text-decoration: none; }
  .ldz-nav .ldz-cart svg { width: 21px; height: 21px; }
  .ldz-nav .ldz-cart .cart-count { top: -3px; left: 17px; }
}
@keyframes hy-cart-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 70% { transform: scale(0.92); } 100% { transform: scale(1); } }
.cart-count.is-bump { animation: hy-cart-bump 0.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .cart-count.is-bump { animation: none; } }
/* The extra cart icon makes the right side wider: the logo sits in the middle grid column (never under the icons). */
@media (max-width: 760px) {
  .ldz-nav:has(.ldz-cart) .ldz-nav-logo {
    position: static !important; transform: none !important; left: auto; top: auto;
    grid-column: 2; justify-self: center; min-width: 0; max-width: 100% !important; overflow: hidden;
  }
  .ldz-nav:has(.ldz-cart) .ldz-nav-logo img { max-width: 100%; height: auto; max-height: 22px; }
}
@media (max-width: 380px) {
  .ld-z .ldz-nav:has(.ldz-cart) .ldz-nav-btn,
  .hy-listing-overlay .ldz-nav:has(.ldz-cart) .ldz-nav-btn { flex-basis: 30px !important; width: 30px !important; min-width: 30px !important; }
}

/* Oct 22 (David 7:12 AM): General Cut List. Form: one cut-name box per row (no amount/details/note). Page: names only,
   then the butcher note in muted text, same thin rows and dashed dividers. */
.bd-inc-row.bd-inc-row-gen { grid-template-columns: minmax(0, 1fr) auto; }
.bd-inc-gen-sub { margin: -2px 0 8px; }
.bd-inc-general .bd-i-group { font-weight: 700; }
@media (max-width: 760px) {
  .bd-inc-row.bd-inc-row-gen { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 6px; }
  .bd-inc-row.bd-inc-row-gen .bd-i-btns { grid-column: auto; }
}
.bd-share-item.bd-share-gnote { color: var(--muted, #6b7a6e); font-size: 0.9rem; font-style: italic; padding-left: 48px; }
@media (max-width: 760px) { .bd-share-item.bd-share-gnote { padding-left: 42px; } }

/* Oct 22 (David 7:22 AM): switch-category confirm on a new listing (Save draft & switch / Discard & switch / Keep editing).
   Centered card on desktop, bottom sheet on phones; 44px buttons. */
.hy-kind-dlg { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 24px; }
.hy-kind-back { position: absolute; inset: 0; background: rgba(12, 20, 15, 0.55); }
.hy-kind-panel { position: relative; width: min(460px, 100%); background: var(--paper, #fffcf7); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); padding: 22px 22px 18px; }
.hy-kind-panel h2 { margin: 0 0 8px; font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
.hy-kind-panel .sub { margin: 0 0 16px; }
.hy-kind-btns { display: flex; flex-direction: column; gap: 10px; }
.hy-kind-btns .btn { width: 100%; min-height: 44px; justify-content: center; }
.hy-kind-btns .hy-kind-danger { background: #fff; color: #9b1c1c; border: 1px solid rgba(155, 28, 28, 0.55); }
.hy-kind-btns .hy-kind-danger:hover { background: #fdf2f2; }
.hy-kind-btns .btn:disabled { opacity: 0.7; cursor: progress; }
body.hy-kind-open { overflow: hidden; }
@media (max-width: 760px) {
  .hy-kind-dlg { padding: 0; align-items: flex-end; }
  .hy-kind-panel { width: 100%; border-radius: 16px 16px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
}

/* Oct 22 (David 7:15 AM): Herd Yard calendar pickers (hy-datepick.js) for Processing date + Pickup window.
   The original date inputs stay in the form, visually hidden. Popover on desktop/tablet, bottom sheet on phones. */
.hdp-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.bd-form .bd-range.hdp-hidden-range { display: block; height: 0; overflow: hidden; }
.bd-date-field { position: relative; }
.hdp-help { margin: 2px 0 8px; font-size: 0.86rem; color: var(--muted); }
.hdp-row { display: flex; align-items: center; gap: 8px; }
.hdp-trigger {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 9px 12px; color: var(--ink);
  font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.hdp-trigger:hover { border-color: var(--green); }
.hdp-trigger:focus-visible, .hdp-trigger[aria-expanded="true"] { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(27, 107, 69, 0.18); }
.hdp-trigger.is-empty .hdp-text { color: var(--muted); }
.hdp-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdp-ico { display: inline-flex; color: var(--green); flex: 0 0 auto; }
.hdp-clear { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.hdp-clear:hover { border-color: var(--green); color: var(--green-d); }
.hdp-clear:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.hdp-clear[hidden] { display: none; }
.hdp-chip { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 5px 12px; border-radius: 999px; background: var(--green-l); color: var(--green-d); font-size: 0.86rem; }
.hdp-chip[hidden] { display: none; }
.hdp-chip b, .hdp-sum b { font-weight: 700; }

.hdp-back { position: fixed; inset: 0; z-index: 150; background: rgba(12, 20, 15, 0.45); }
.hdp-back[hidden] { display: none; }
.hdp-pop {
  position: fixed; z-index: 151; width: 340px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 14px 14px 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(20, 32, 24, 0.18); color: var(--ink);
}
.hdp-pop-head { margin-bottom: 6px; }
.hdp-pop-title { margin: 0 0 6px; font-weight: 700; font-size: 1rem; }
.hdp-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hdp-steps li { flex: 1 1 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--paper); color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.hdp-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line); color: var(--ink-soft); font-size: 0.72rem; }
.hdp-steps li.on { background: var(--green-l); color: var(--green-d); box-shadow: inset 0 0 0 1px rgba(27, 107, 69, 0.35); }
.hdp-steps li.on span, .hdp-steps li.done span { background: var(--green); color: #fff; }
.hdp-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 2px; }
.hdp-month { margin: 0; font-weight: 700; font-size: 0.98rem; }
.hdp-navb { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.hdp-navb:hover:not(:disabled) { background: var(--paper); }
.hdp-navb:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.hdp-navb:disabled { opacity: 0.3; cursor: default; }
.hdp-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hdp-grid th { padding: 4px 0; font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hdp-grid td { padding: 1px 0; text-align: center; }
.hdp-grid td.hdp-td-range { background: var(--green-l); }
.hdp-grid td.hdp-td-start { background: linear-gradient(90deg, transparent 50%, var(--green-l) 50%); }
.hdp-grid td.hdp-td-end { background: linear-gradient(90deg, var(--green-l) 50%, transparent 50%); }
.hdp-day {
  width: 44px; height: 44px; max-width: 100%; border: 0; border-radius: 50%; background: transparent; color: var(--ink);
  font: inherit; font-size: 0.92rem; font-variant-numeric: tabular-nums; cursor: pointer; position: relative;
}
.hdp-day:hover:not(.is-dis):not(.is-sel) { background: var(--paper-2); }
.hdp-day:focus-visible { outline: 2px solid var(--green-d); outline-offset: 1px; }
.hdp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--green); font-weight: 700; color: var(--green-d); }
.hdp-day.is-range { background: transparent; color: var(--green-d); font-weight: 600; }
.hdp-day.is-pend { background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--green); }
.hdp-day.is-sel { background: var(--green); color: #fff; font-weight: 700; }
.hdp-day.is-sel.is-today { box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px var(--green); }
.hdp-day.is-dis { color: #b7bfb8; text-decoration: line-through; cursor: not-allowed; }
.hdp-legend { display: flex; gap: 12px; margin: 8px 2px 0; font-size: 0.74rem; color: var(--muted); }
.hdp-lg { display: inline-flex; align-items: center; gap: 5px; }
.hdp-lg::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.hdp-lg-today::before { box-shadow: inset 0 0 0 1.5px var(--green); }
.hdp-lg-sel::before { background: var(--green); }
.hdp-lg-range::before { background: var(--green-l); border-radius: 3px; }
.hdp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.hdp-sum { margin: 0; font-size: 0.85rem; color: var(--ink-soft); min-width: 0; }
.hdp-foot-b { display: flex; gap: 8px; flex: 0 0 auto; }
.hdp-foot .btn { min-height: 44px; padding-left: 14px; padding-right: 14px; }
@media (max-width: 760px) {
  .hdp-pop.hdp-sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-width: 100%; border-radius: 18px 18px 0 0;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; }
  .hdp-sheet .hdp-day { width: 100%; max-width: 48px; }
  .hdp-sheet .hdp-foot { flex-wrap: wrap; }
  .hdp-sheet .hdp-sum { flex: 1 1 100%; }
  .hdp-sheet .hdp-foot-b { flex: 1 1 100%; }
  .hdp-sheet .hdp-foot-b .btn { flex: 1 1 0; }
  body.hdp-open-sheet { overflow: hidden; }
}
@media (prefers-reduced-motion: no-preference) {
  .hdp-pop { animation: hdp-in .14s ease-out; }
  .hdp-pop.hdp-sheet { animation: hdp-up .2s ease-out; }
}
@keyframes hdp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes hdp-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Oct 22 (David 8:31 AM): general cut lists (one per share size) sit side by side, on the form and the listing.
   A single list flows its cut names into columns. Phones stack to one column. */
.bd-inc-groups { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bd-inc-groups > .bd-inc-group:not(.bd-inc-general) { grid-column: 1 / -1; }
.bd-inc-general .bd-inc-rows { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 10px; }
.bd-inc-size-hint { margin: -2px 0 8px; }
.bd-inc-size-hint[hidden] { display: none; }
#bd-inc-general:disabled { opacity: 0.55; cursor: not-allowed; }
.bd-share-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bd-share-col { min-width: 0; border-top: 1px dashed rgba(197, 48, 48, 0.3); }
.bd-share-cols > .bd-share-col:first-child { border-top: 0; }
.bd-share-cols-1 .bd-share-genlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.bd-share-genlist li + li { border-top: 0; }
.bd-share-genlist li { border-bottom: 1px dashed rgba(197, 48, 48, 0.3); }
.bd-share-foot { border-top: 1px dashed rgba(197, 48, 48, 0.3); }
.bd-share-rows + .bd-share-cols { border-top: 1px dashed rgba(197, 48, 48, 0.3); }
@media (min-width: 761px) {
  .bd-share-cols:not(.bd-share-cols-1) > .bd-share-col { border-top: 0; border-left: 1px dashed rgba(197, 48, 48, 0.3); }
  .bd-share-cols:not(.bd-share-cols-1) > .bd-share-col:first-child { border-left: 0; }
}

/* Oct 22 (David 9:32 AM): ranch profile sold cards. Prominent diagonal SOLD ribbon, top-right corner of the photo. */
.listing-card.has-sold-ribbon { opacity: 1; }
.listing-card.has-sold-ribbon .thumb img { filter: saturate(0.75); }
.listing-card .sold-ribbon {
  position: absolute; top: 0; right: 0; width: 120px; height: 120px;
  overflow: hidden; pointer-events: none; z-index: 4;
}
.listing-card .sold-ribbon > span {
  position: absolute; top: 26px; right: -44px; width: 170px;
  transform: rotate(45deg); transform-origin: center;
  background: #b4232a; color: #fff; text-align: center;
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 0; line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(255, 255, 255, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
@media (max-width: 540px) {
  .listing-card .sold-ribbon { width: 104px; height: 104px; }
  .listing-card .sold-ribbon > span { top: 22px; right: -42px; width: 150px; font-size: 0.85rem; }
}

/* Oct 22 (David 9:36 AM): ranch profile followers row and Followers / Following modal (V1 layout, V2 colors). */
.rs-followed-slot:empty { display: none; }
/* Oct 22 (David 9:45 AM): stats card in the old "Our Breeding Program" spot (same card styling). */
.rs-ac-stats .rs-stat b { font-size: 1.15rem; }
.rs-ac-stats .rs-ov-rating { align-items: center; }
.rs-ac-stats .rs-ov-stars { font-size: 1.35rem; letter-spacing: 2px; }
.rs-ac-stats .rs-ov-stars-bg { color: #d5dbd5; }
.rs-ac-stats .rs-followed-slot { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(20, 32, 24, 0.1); }
/* Oct 22 (David 9:43 AM): Edit profile - one pencil per section; closed sections read as plain values. */
.pe-sec { position: relative; }
.pe-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pe-sec-top { display: flex; justify-content: flex-end; margin-bottom: -6px; }
.pe-sec-pen { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line, #dfe6dc); border-radius: 999px; background: #fff; color: var(--green-d, #1f5c3b); font: inherit; font-size: 0.84rem; font-weight: 650; line-height: 1; cursor: pointer; flex: none; }
.pe-sec-pen:hover, .pe-sec-pen:focus-visible { border-color: var(--green, #147a4e); background: var(--green-l, #eaf4ec); outline: none; }
.pe-sec-pen[hidden] { display: none; }
.pe-sec-pen .pe-pen { color: currentColor; }
.pe-sec:not(.is-editing) input, .pe-sec:not(.is-editing) textarea { cursor: default; resize: none; }
.pe-wysiwyg .pe-sec:not(.is-editing) input:hover, .pe-wysiwyg .pe-sec:not(.is-editing) textarea:hover,
.pe-wysiwyg .pe-sec:not(.is-editing) input:focus, .pe-wysiwyg .pe-sec:not(.is-editing) textarea:focus { background: transparent; border-color: transparent; box-shadow: none; }
.pe-sec:not(.is-editing) input::placeholder, .pe-sec:not(.is-editing) textarea::placeholder { color: #b3bdb5; }
.pe-sec:not(.is-editing) .pe-count { display: none; }
.pe-sec:not(.is-editing) .social-logo { cursor: default; }
.pe-sec:not(.is-editing) .social-picker-hint { display: none; }
.pe-sec:not(.is-editing) .social-logo[aria-pressed="false"] { opacity: 0.45; }
.pe-wysiwyg .pe-sec.is-editing input:not([type="hidden"]), .pe-wysiwyg .pe-sec.is-editing textarea { background: #fff; border-color: #cfdccf; }
.pe-wysiwyg .pe-sec.is-editing input:focus, .pe-wysiwyg .pe-sec.is-editing textarea:focus { border-color: #147a4e; box-shadow: 0 0 0 3px rgba(20, 122, 78, 0.12); }
.pe-sec.is-editing { border-radius: 10px; outline: 2px solid rgba(20, 122, 78, 0.22); outline-offset: 8px; }
.pe-sec-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.pe-sec-actions[hidden] { display: none; }
.pe-sec-actions .btn { min-height: 40px; padding: 8px 18px; border-radius: 999px; }
/* Oct 22 (David 9:55 AM): reviews as a sideways testimonial row. */
/* The reviews row scrolls inside its card; without this the grid item grows to fit every card. */
#rs-reviews { min-width: 0; max-width: 100%; }
.rs-rev-wrap { position: relative; margin: 4px 0 0; }
.rs-rev-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2px; padding: 4px 2px 14px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; }
.rs-rev-row:focus-visible { outline: 2px solid var(--green, #147a4e); outline-offset: 2px; border-radius: 12px; }
.rs-rev-card { flex: 0 0 calc((100% - 32px) / 3); min-width: 260px; scroll-snap-align: start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border: 1px solid #e1e8e1; border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(20, 32, 24, 0.06); }
.rs-rev-stars { color: #e8a317; font-size: 1.15rem; letter-spacing: 2px; line-height: 1; }
.rs-rev-stars-off { color: #d5dbd5; }
.rs-rev-body { margin: 0; color: var(--ink, #142018); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; flex: 0 0 auto; margin-bottom: 8px; }
.rs-rev-more[hidden] { display: none; }
.rs-rev-card.is-open .rs-rev-body { -webkit-line-clamp: unset; display: block; }
.rs-rev-body-none { color: var(--muted, #6b7a6e); font-style: italic; }
.rs-rev-more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--green-d, #1f5c3b); font: inherit; font-size: 0.88rem; font-weight: 650; cursor: pointer; text-decoration: underline; }
.rs-rev-by { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(20, 32, 24, 0.08); }
.rs-rev-by b { display: block; font-size: 0.95rem; }
.rs-rev-by time { display: block; font-size: 0.8rem; color: var(--muted, #6b7a6e); }
.rs-rev-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #dce8d8 center/cover no-repeat; }
.rs-rev-av-txt { display: grid; place-items: center; color: #10372a; font-weight: 700; font-size: 0.9rem; }
.rs-rev-arrow { position: absolute; top: calc(50% - 26px); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dfe6dc; background: #fff; color: #10372a; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(20, 32, 24, 0.14); display: none; }
.rs-rev-wrap.is-scrollable .rs-rev-arrow { display: grid; place-items: center; }
.rs-rev-arrow:disabled { opacity: 0; pointer-events: none; }
.rs-rev-prev { left: -14px; }
.rs-rev-next { right: -14px; }
@media (max-width: 980px) { .rs-rev-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 760px) {
  .rs-rev-card { flex-basis: 84%; min-width: 0; }
  .rs-rev-wrap.is-scrollable .rs-rev-arrow { display: none; }
}
@media (max-width: 760px) {
  .pe-sec-pen-txt { display: none; }
  .pe-sec-pen { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .pe-sec-actions .btn { flex: 1 1 0; min-height: 44px; }
}
.rs-followed-slot { margin: 10px 0 2px; }
.rs-followed { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rs-followed:hover { background: var(--green-l); }
.rs-followed:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.rs-fav-stack { display: inline-flex; }
.rs-fav-stack .rs-fav + .rs-fav { margin-left: -10px; }
.rs-fav { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); }
.rs-fav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-fav.rs-fav-sm { width: 34px; height: 34px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.rs-fav-ini { background: var(--green-l); color: var(--green-d); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
.rs-fav-sm.rs-fav-ini { font-size: 0.74rem; }
.rs-followed-txt { display: flex; flex-direction: column; line-height: 1.3; font-size: 0.88rem; }
.rs-followed-line b { color: var(--green-d); font-weight: 700; }
.rs-followed-sub { color: var(--muted, #5b6b60); font-size: 0.8rem; }
.rs-followed-none { margin: 0; color: var(--muted, #5b6b60); font-size: 0.88rem; }
body.rs-fmodal-open { overflow: hidden; }
.rs-fmodal-back { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 25, 18, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.rs-fmodal { width: min(440px, 100%); max-height: min(720px, calc(100vh - 40px)); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; overflow: hidden; }
.rs-fmodal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 8px 22px; }
.rs-fmodal-head h2 { margin: 0; font-size: 1.12rem; color: var(--ink); }
.rs-fmodal-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--muted, #5b6b60); cursor: pointer; }
.rs-fmodal-x:hover { background: var(--green-l); color: var(--green-d); }
.rs-ftabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 12px; }
.rs-ftabs button { flex: 1; padding: 12px 6px; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--muted, #5b6b60); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.rs-ftabs button.on { color: var(--green-d); border-bottom-color: var(--green); }
.rs-flist { overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 12px; flex: 1 1 auto; min-height: 120px; }
.rs-frow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rs-frow:last-child { border-bottom: 0; }
.rs-fav-link { display: inline-flex; border-radius: 50%; }
.rs-fwho { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rs-fname { font-weight: 700; color: var(--green-d); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rs-fname:hover { text-decoration: underline; }
.rs-floc { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--muted, #5b6b60); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rs-floc .hy-loc-pin { width: 13px; height: 13px; flex: 0 0 auto; }
.rs-fbtn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--green); background: var(--green); color: #fff; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.rs-fbtn.on { background: #fff; color: var(--green-d); border-color: var(--line); }
.rs-fbtn:disabled { opacity: 0.6; }
.rs-fmsg { padding: 18px 0; text-align: center; }
@media (max-width: 540px) {
  .rs-fmodal-back { align-items: flex-end; padding: 0; }
  .rs-fmodal { width: 100%; max-height: 86vh; border-radius: 18px 18px 0 0; }
  .rs-flist { padding: 4px 14px 18px; }
}

/* Oct 22, 2026 (David 10:14 AM): grouped account menu, Settings page tabs, folded-in page tabs. */
.acct-group-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5c6f62; padding: 14px 12px 4px; }
.acct-menu .am-group { gap: 2px; }
.acct-help-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; font-size: .92rem; font-weight: 560; color: #3a4a3e; text-decoration: none; }
.acct-help-link .acct-ico { width: 16px; height: 16px; color: #1f6b45; }
.acct-help-link:hover { color: #0f3f28; text-decoration: underline; }
.dash-subnav { padding: 28px 40px 0; max-width: 1240px; }
.dash-subnav[hidden] { display: none; }
.dash-subnav-h { margin: 0 0 14px; }
/* Oct 22 (David 4:45 PM): one page header on every account page. The group title (Settings, Saved, Listing Editor)
   is the large .page-title in the upper left; the tabs sit below it. The open tab's own heading becomes a section heading. */
.dash-subnav:not([hidden]) ~ #dash-main .page-title { font-size: 1.3rem; letter-spacing: -0.01em; margin: 0 0 4px; }
.dash-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 5px; background: #eef4ef; border: 1px solid #dbe7de; border-radius: 14px; width: max-content; max-width: 100%; }
.dash-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; color: #3a4a3e; font-weight: 600; font-size: .94rem; text-decoration: none; white-space: nowrap; }
.dash-tab .acct-ico { width: 17px; height: 17px; color: #1f6b45; }
.dash-tab:hover { background: #fff; color: #0f3f28; }
.dash-tab.on { background: #1b6b45; color: #fff; box-shadow: 0 1px 2px rgba(15,63,40,.25); }
.dash-tab.on .acct-ico { color: #fff; }
.dash-tab:focus-visible { outline: 3px solid #1f6b45; outline-offset: 2px; }
.dash-subnav:not([hidden]) + #dash-main { padding-top: 18px; }
.set-panel { margin-top: 16px; }
.set-panel h3 { margin: 0 0 4px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #e6eee8; }
.set-panel h3 + .set-row { border-top: 0; }
.set-row-main { min-width: 0; }
.set-row-label { font-weight: 650; color: #1f2a22; }
.set-row-val { color: #5c6f62; font-size: .93rem; overflow-wrap: anywhere; }
.set-row .btn { flex: none; border-radius: 999px; }
.set-legal { margin-top: 18px; text-align: center; }
/* Oct 23 (David 7:09 AM): Settings → Contact details phone field (saves here; also updates the ranch page). */
.set-row-phone .set-row-main { flex: 1 1 auto; }
.set-row-phone .set-row-label { display: block; }
.acct-phone-form { display: flex; align-items: center; gap: 8px; margin-top: 6px; max-width: 460px; }
.acct-phone-form input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid #d6e2d9; border-radius: 10px; font: inherit; font-size: 15px; background: #fff; color: #1f2a22; }
.acct-phone-form input:focus { outline: 2px solid #1f6b45; outline-offset: 1px; }
.acct-phone-form input.is-err { border-color: #b4534b; background: #fdf3f2; }
.acct-phone-err { margin: 6px 0 0; font-size: .85rem; color: #a33; }
.acct-phone-note { margin: 6px 0 0; font-size: .85rem; }
.acct-phone-ask { margin-top: 10px; padding: 12px 14px; border: 1px solid #dbe7de; border-radius: 12px; background: #f6faf7; max-width: 560px; }
.acct-phone-ask .sub { margin: 4px 0 8px; }
.acct-phone-ask .sms-optin { margin: 6px 0 4px; }
.acct-phone-ask-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
@media (max-width: 980px) {
  .set-row .acct-phone-form .btn, .set-row .acct-phone-ask-btns .btn { width: auto; }
}
.dash-pill-h { flex: none; align-self: center; padding: 0 2px 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7a6e; }
.dash-pills-admin { margin-top: 2px; }
#admin-controls .acct-admin-box { margin: 10px 0 2px; background: #fff; border: 1px solid #dbe7de; }
@media (max-width: 980px) {
  .dash-subnav { padding: 4px 16px 0; }
  .dash-subnav-h { margin-bottom: 12px; }
  .dash-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tab { flex: 1 0 auto; justify-content: center; padding: 9px 12px; font-size: .9rem; }
  .dash-subnav:not([hidden]) + #dash-main { padding-top: 12px !important; }
  .set-row { flex-wrap: wrap; }
  .set-row .btn { width: 100%; }
}
@media (max-width: 520px) {
  /* Phones: every tab fits on screen (no hidden third tab). Icons drop, long labels wrap to two lines. */
  .dash-tabs { overflow-x: visible; gap: 4px; padding: 4px; }
  .dash-tab { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; padding: 8px 6px; font-size: .84rem; }
  .dash-tab .acct-ico { display: none; }
}


/* Oct 22 (David 11:28 AM): greeting on the left, compact text card on the right at the same height.
   It wraps below (full width) only when both can't fit side by side. */
.dash-hello-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 16px; }
.dash-hello-text { flex: 1 1 260px; min-width: 0; }
.dash-hello-text .dash-home-hello:last-child { margin-bottom: 0; }
.dash-hello-row .panel.dash-text-card { flex: 0 1 360px; margin: 0; }
.dash-hello-text .page-title.dash-home-hello { margin-top: 0; }
.dash-hello-text p.dash-home-hello { margin-bottom: 0; }
/* Oct 22 (David 11:29 AM): slim card. On desktop the row stretches it to exactly the greeting block's height. */
.dash-hello-row .panel.dash-text-card { align-items: center; padding: 6px 12px; gap: 10px; border-radius: 10px; }
.dash-hello-row .dash-text-main { gap: 1px; line-height: 1.25; }
.dash-hello-row .dash-text-l1 { font-size: .86rem; }
.dash-hello-row .dash-text-main b { font-size: .86rem; }
.dash-hello-row .dash-text-how { margin-top: 0; font-size: .8rem; }
.dash-hello-row .dash-text-icons { gap: 6px; padding-top: 0; }
@media (min-width: 641px) {
  .panel.dash-text-card { display: none; }
  .dash-hello-row.has-text-card { align-items: stretch; flex-wrap: nowrap; }
  .dash-hello-row .panel.dash-text-card { display: none; flex: 0 0 auto; max-width: 360px; }
}
@media (max-width: 640px) {
  .dash-hello-row .panel.dash-text-card { display: none; flex: 1 1 100%; }
}

/* Oct 22 (David 11:32 AM): Listing views rows = the thumbnail row, with the count on the right. */
.dash-mini-count { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.1; }
.dash-mini-count .sub { font-size: .72rem; }
.dash-mini .grow .dash-mini-lot { display: block; font-size: .72rem; color: var(--muted); line-height: 1.2; }

/* Oct 22, 2026 (David 11:14 / 11:16 AM): Impressions stat and stat call-to-action tiles (same size as a stat tile). */
.dash-kpi-sub { display: block; margin-top: 3px; font-style: normal; font-size: .66rem; color: var(--green); font-weight: 600; }
.dash-kpi.dash-kpi-cta { gap: 8px; padding: 10px 8px; background: #f6faf7; border-style: dashed; border-color: #b9cfbf; }
.dash-kpi-cta-k { color: var(--muted); font-size: .68rem; line-height: 1.2; }
.dash-kpi .dash-kpi-btn { min-height: 34px; padding: 6px 10px; font-size: .74rem; line-height: 1.15; white-space: normal; max-width: 100%; }
/* Oct 23 (David 7:14 AM): empty-state buttons on the stat cards are light gray, not dark green pills. */
.dash-kpi .btn.dash-kpi-btn { background: #eceeed; color: #2b3530; border: 1px solid #dfe3e0; border-radius: 999px; box-shadow: none; font-weight: 600; min-height: 30px; }
.dash-kpi .btn.dash-kpi-btn:hover { background: #e2e6e3; color: #1f2a22; }
.dash-kpi .btn.dash-kpi-btn:focus-visible { outline: 2px solid #1f6b45; outline-offset: 2px; }
/* Oct 22 (David 1:24 / 1:25 PM): stat CTA labels never wrap; the stats row spans the content column, equal tiles.
   Columns follow the column width (container query): 7 across when every one-line CTA fits, else 4, else 2.
   !important because mobile.css forces .dash-kpis to 1fr 1fr !important at 980px and below. */
.dash-kpis-wrap { container-type: inline-size; width: 100%; margin: 0 0 16px; }
.dash-kpis-wrap .dash-kpis.dash-kpis-stats { max-width: none; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.dash-kpis-stats .dash-kpi.dash-kpi-cta { padding: 10px 6px; min-width: 0; }
.dash-kpis-stats .dash-kpi .dash-kpi-btn { white-space: nowrap; padding: 6px 8px; align-self: center; }
.dash-kpis-stats > .dash-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dash-kpis-stats a.dash-kpi-link { color: inherit; text-decoration: none; }
@container (min-width: 560px) {
  .dash-kpis-wrap .dash-kpis.dash-kpis-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .dash-kpis-stats > .dash-kpi:last-child:nth-child(odd) { grid-column: auto; }
}
@container (min-width: 1060px) {
  .dash-kpis-wrap .dash-kpis.dash-kpis-stats { grid-template-columns: repeat(var(--kpi-n, 7), minmax(0, 1fr)) !important; }
}
.panel.dash-suggest { max-width: 800px; margin: -4px 0 16px; }
.dash-suggest-lead { margin: 4px 0 8px; }
.dash-suggest-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.dash-suggest-row .grow { flex: 1; min-width: 0; }
.dash-suggest-name { font-weight: 700; color: var(--ink, inherit); text-decoration: none; }
.dash-suggest-row .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-suggest-pic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--green-l, #e8f1ea); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.dash-suggest-pic img { width: 100%; height: 100%; object-fit: cover; }
.dash-suggest-ini { font-weight: 700; color: var(--green-d); }
.dash-suggest-row .btn.is-following { background: var(--green-l, #e8f1ea); }

/* Oct 22 (David 11:31 AM): Customize dashboard. Sections in the saved order; the 2-column tiles flow in a grid with
   the full-width rows. Edit mode matches the phone app (HomeSections.tsx): white cards, radius 18, 1px line border,
   scale .985, preview capped at 180px; grey minus on the left, label, green reorder handle on the right; News pinned. */
.dash-cust-bar { display: flex; justify-content: flex-end; margin: -6px 0 2px; min-height: 40px; }
.dash-cust-btn { width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dash-cust-btn:hover, .dash-cust-btn:focus-visible { color: var(--green); background: rgba(0, 0, 0, .04); }
.dash-editing-on .dash-cust-bar { display: none; }
.dash-secs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; width: 100%; min-width: 0; }
.dash-secs > .dash-sec { grid-column: 1 / -1; min-width: 0; }
.dash-secs > .dash-sec-tile { grid-column: auto; margin-bottom: 16px; display: flex; }
.dash-secs > .dash-sec-tile > .dash-sec-body { flex: 1 1 auto; min-width: 0; display: flex; }
.dash-secs > .dash-sec-tile > .dash-sec-body > .dash-tile { flex: 1 1 auto; }
.dash-secs > .dash-sec.is-hidden, .dash-secs > .dash-sec.dash-sec-empty { display: none; }
.dash-sec-emptynote { margin: 0; padding: 10px 2px; }
@media (max-width: 980px) { .dash-secs { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1920px) { .dash-secs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Edit mode: one column of cards. */
.dash-edit-bar { margin: 0 0 14px; }
.dash-edit-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-edit-top .page-title { margin: 0; }
.dash-edit-done { padding: 8px 16px; min-height: 36px; border-radius: 999px; }
.dash-edit-hint { margin: 4px 0 0; }
.dash-secs.dash-editing { grid-template-columns: minmax(0, 1fr); row-gap: 12px; max-width: 760px; }
.dash-secs.dash-editing > .dash-sec { display: block; grid-column: 1 / -1; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 18px; transform: scale(.985); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.dash-secs.dash-editing > .dash-sec.is-hidden { display: none; }
.dash-secs.dash-editing > .dash-sec.is-lifted { transform: scale(1); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); position: relative; z-index: 2; }
.dash-sec-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--line); }
.dash-sec-label { flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 650; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-sec-hide { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; background: #9aa1a8; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dash-sec-hide-ph { background: transparent; }
.dash-sec-tools { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; }
.dash-sec-move, .dash-sec-handle { border: 0; background: transparent; padding: 0; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--green); }
.dash-sec-move { color: var(--muted); }
.dash-sec-move:disabled { opacity: .3; cursor: default; }
.dash-sec-move:not(:disabled):hover, .dash-sec-handle:hover { background: rgba(0, 0, 0, .05); }
.dash-sec-handle { cursor: grab; touch-action: none; }
.is-lifted .dash-sec-handle { cursor: grabbing; }
.dash-sec-pin { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--green); }
.dash-sec-hide:focus-visible, .dash-sec-move:focus-visible, .dash-sec-handle:focus-visible, .dash-sec-show:focus-visible, .dash-reset:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.dash-secs.dash-editing .dash-sec-body { max-height: 180px; overflow: hidden; pointer-events: none; user-select: none; padding: 10px 12px; position: relative; }
.dash-secs.dash-editing .dash-sec-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(rgba(255, 255, 255, 0), var(--white)); }
.dash-secs.dash-editing .dash-sec-body .dash-tile { min-height: 0; max-height: none; aspect-ratio: auto; border: 0; padding: 0; }
.dash-secs.dash-editing .dash-sec-body .dash-tile-body { overflow: hidden; max-height: none; }
.dash-secs.dash-editing .dash-sec-body .panel, .dash-secs.dash-editing .dash-sec-body .news-ribbon { margin: 0; }
.dash-secs.dash-editing > .dash-sec-empty .dash-sec-body::after { display: none; }
.dash-hidden-box { max-width: 760px; margin: 16px 0 8px; border: 1.5px dashed var(--line); border-radius: 18px; padding: 12px 14px; }
.dash-hidden-title { display: block; font-size: .95rem; margin-bottom: 6px; }
.dash-hidden-box .sub { margin: 4px 0 8px; }
.dash-hidden-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dash-sec-show { border: 0; background: transparent; color: var(--green); width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; }
.dash-reset { display: inline-block; margin-top: 10px; border: 0; background: transparent; color: var(--green); font-weight: 600; padding: 6px 0; cursor: pointer; font-size: .9rem; }
/* 44px tap targets on phones. */
@media (max-width: 640px), (pointer: coarse) {
  .dash-cust-btn, .dash-sec-move, .dash-sec-handle, .dash-sec-show, .dash-sec-pin { width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px; }
  .dash-sec-hide { width: 24px; height: 24px; box-shadow: 0 0 0 10px transparent; position: relative; }
  .dash-sec-hide::before { content: ""; position: absolute; inset: -10px; }
  .dash-edit-done, .dash-reset { min-height: 44px; }
  .dash-hidden-row { min-height: 44px; }
}

/* Oct 22 (David 11:38 AM): on wide screens the dashboard home sits centered in the area beside the account sidebar,
   with the same 1240px cap the other account pages use (they stay left-aligned). Phones (980px and under) unchanged. */
@media (min-width: 981px) {
  #dash-main.is-home { max-width: 1240px; margin-left: auto; margin-right: auto; }
  #dash-main.is-home + .dash-signout { margin-left: auto; margin-right: auto; width: 100%; max-width: 1240px; box-sizing: border-box; }
}

/* Oct 22, 2026 (David 8:42 PM): opening a saved draft or listing reads "Edit draft" / "Edit listing", with the
   draft's name, when it was last saved and a Draft pill under the title. The type slider shows only the listing's
   own type and can't be switched while editing. */
.list-edit-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; color: var(--muted); font-size: 0.95rem; min-width: 0; }
.list-edit-ctx[hidden] { display: none !important; }
.list-edit-ctx .list-edit-name { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; min-width: 0; }
.list-edit-ctx .list-edit-saved { white-space: nowrap; }
.list-edit-ctx .list-edit-saved::before { content: "·"; margin-right: 10px; color: var(--muted); }
.list-edit-ctx .list-edit-pill { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.list-kind-toggle.is-locked, #list-kind-toggle.list-kind-toggle.is-locked { display: inline-flex; width: auto; max-width: none; }
@media (max-width: 560px) {
  .list-edit-ctx .list-edit-saved { flex-basis: 100%; }
  .list-edit-ctx .list-edit-saved::before { display: none; }
}
.list-kind-toggle.is-locked button:not(.on) { display: none; }
.list-kind-toggle.is-locked button.on { flex: none; cursor: default; padding: 8px 16px; }

/* Oct 23, 2026 (David 6:52 AM): new/edit listing form organised like the phone app (herdyard-mobile StepBox):
   numbered rounded cards, one per section, and a List | Wizard view choice under the title. List stacks every
   card; Wizard shows one card at a time with progress, Back / Next and the Preview card last. App colours
   (card #fffcf7 on #d8e0d6, number #1b6b45 / beef #c53030, hints #6b7a6e) with the site's rounded styles. */
.list-mode-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; max-width: 100%; }
.list-mode-row[hidden], .hz-page .list-mode-row { display: none !important; }
.list-mode-note { color: #6b7a6e; font-size: 0.86rem; line-height: 1.35; min-width: 0; }
#list-view-toggle.list-kind-toggle { margin: 0; flex: none; width: auto; max-width: 100%; }
#list-view-toggle.list-kind-toggle button { flex: none; min-width: 84px; padding: 8px 16px; }
.form-page.beef-form #list-view-toggle.list-kind-toggle button.on { background: var(--beef); color: #fff; }
/* Matches the app: an existing draft or a live listing hides the type picker (the line under the title names it). */
#list-kind-toggle.list-kind-toggle.is-locked { display: none !important; }

.form-page .list-wizard.list-cards { background: transparent; border: 0; box-shadow: none; padding: 0; }
.list-wizard.list-cards .wiz-step { background: #fffcf7; border: 1px solid #d8e0d6; border-radius: 16px; padding: 12px 16px 16px; margin: 16px 0 0; min-width: 0; box-sizing: border-box; }
.list-wizard.list-cards .wiz-step.wiz-skip,
.list-wizard.list-cards.list-flat .wiz-step.wiz-skip { display: none !important; }
.list-wizard.list-cards:not(.list-flat) .wiz-step:not(.on) { display: none !important; }
.wiz-card-head { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; min-width: 0; }
.wiz-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #1b6b45; color: #fffcf7; font-size: 13.5px; line-height: 26px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.form-page.beef-form .wiz-num { background: #c53030; }
.list-wizard.list-cards .wiz-card-head .wiz-title,
.list-wizard.list-cards.list-flat .wiz-card-head .wiz-title { margin: 0; font-size: 1.125rem; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.list-wizard.list-cards .wiz-step > .sub,
.list-wizard.list-cards.list-flat .wiz-step > .sub { display: block; color: #6b7a6e; font-size: 0.875rem; line-height: 1.43; margin: 2px 0 14px; }
.list-wizard.list-cards .wiz-step > .sub[hidden] { display: none !important; }
.list-wizard.list-cards .wiz-step > .form-grid { margin-top: 0; }
.list-wizard.list-cards .field select,
.list-wizard.list-cards .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.list-wizard.list-cards .field textarea { border-radius: 10px; }

/* HY-121's one long cattle column is now cards; the cattle field order still holds inside each card.
   Location comes before Price in Place and price (the app's order), and Genetics type leads The group. */
.list-wizard.list-cards.list-flat:not(.list-beef):not(.list-genetics) { display: block; }
.list-wizard.list-cards.list-flat:not(.list-beef):not(.list-genetics) > .wiz-step { display: block !important; }
.list-wizard.list-cards.list-flat:not(.list-beef):not(.list-genetics) > .wiz-step.wiz-skip { display: none !important; }
.list-wizard.list-cards.list-flat:not(.list-beef):not(.list-genetics) > .wiz-step > .form-grid { display: grid !important; }
.list-wizard.list-cards.list-cattle-order .wiz-step > .form-grid > #field-breed-type { order: 2; }
.list-wizard.list-cards.list-cattle-order .wiz-step > .form-grid > #field-price { order: 85; }

/* Wizard chrome: progress bars under the toggle, Back / Next under the card. */
.list-wizard.list-cards:not(.list-flat) .list-form-head.wiz-dots-head:not([hidden]) { display: block !important; position: static; background: none; padding: 0; margin: 14px 0 0; min-height: 0; }
.wiz-dots { display: flex; gap: 6px; }
.wiz-dots i { flex: 1; height: 4px; border-radius: 2px; background: #d8e0d6; }
.wiz-dots i.on { background: #1b6b45; }
.form-page.beef-form .wiz-dots i.on { background: #c53030; }
.list-wizard.list-cards:not(.list-flat) .wiz-nav:not([hidden]) { display: flex !important; flex-wrap: nowrap; gap: 10px; margin-top: 16px; }
.list-wizard.list-cards .wiz-nav .btn { flex: 1 1 0; min-height: 46px; border-radius: 999px; }
.list-wizard.list-cards .wiz-nav #wiz-back { flex: 0 1 34%; }
/* Oct 23, 2026 (David 7:26 AM): Next hugs its text on the right (Back on the left), desktop and the phone floating bar. */
.list-wizard.list-cards:not(.list-flat) .wiz-nav:not([hidden]) { justify-content: space-between; align-items: center; }
.list-wizard.list-cards:not(.list-flat) .wiz-nav #wiz-back { flex: 0 0 auto; min-width: 104px; padding: 0 22px; }
.list-wizard.list-cards:not(.list-flat) .wiz-nav #wiz-next { flex: 0 0 auto; width: auto; min-width: 120px; padding: 0 30px; margin-left: auto; border-radius: 999px; }
.list-wizard.list-cards:not(.list-flat) .wiz-nav.wiz-nav-end #wiz-back { flex: 1 1 auto; }
.list-wizard.list-cards .wiz-step-error { margin: 12px 0 0; color: #b4532a; }

/* Preview card: summary, listing strength, then the Preview button across the full form width on every type
   (David 6:55 AM: Beef and Genetics had a small pill; Cattle was only full width because of HY-121's column). */
.wiz-review-sum:empty { display: none; }
.wiz-sum-card { border: 1px solid #d8e0d6; border-radius: 12px; background: #fff; padding: 4px 14px 10px; margin: 0 0 12px; }
.wiz-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #ebe6db; font-size: 0.9rem; }
.wiz-sum-row span { color: #6b7a6e; flex: none; }
.wiz-sum-row b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.wiz-sum-desc { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.wiz-sum-media { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 0.9rem; }
.wiz-sum-media span { color: #6b7a6e; }
.list-wizard .wiz-final { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
.list-wizard .wiz-final .hy-str-tip { margin: 0; text-align: center; }
.list-wizard .wiz-desktop-submit,
.list-wizard.list-cards:not(.list-flat) .wiz-review .wiz-desktop-submit { display: flex !important; width: 100%; justify-content: center; margin-top: 0 !important; box-sizing: border-box; }
#list-form.list-wizard.list-cards:not(.list-flat) .wiz-final .hy-str-tip:not([hidden]) { display: block !important; }
/* Phone: Back / Next ride in the floating bar (mobile.css); on the Preview card Back sits under the card instead. */
.list-wizard.list-cards:not(.list-flat) .wiz-nav.wiz-nav-end { position: static; box-shadow: none; border: 0; background: none; padding: 0; margin-top: 12px; }
.list-wizard .wiz-final .wiz-save-draft { width: 100%; min-height: 44px; border-radius: 999px; }
.list-wizard .wiz-final .wiz-save-draft[hidden] { display: none !important; }
/* Oct 23, 2026 (David 7:21 AM): desktop. Preview and Save draft sit right under the strength card in the sticky
   right column (List and Wizard). Wizard shows them there on its last (Preview) step, so the per-step checks stay. */
.hy-strength-aside .wiz-final { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
.hy-strength-aside .wiz-final.wiz-final-wait { display: none; }
.hy-strength-aside .wiz-final .wiz-desktop-submit { display: flex !important; width: 100%; justify-content: center; margin: 0 !important; box-sizing: border-box; }
.hy-strength-aside .wiz-final .hy-str-tip { margin: 0; text-align: center; }
.hy-strength-aside .wiz-final .hy-str-tip:not([hidden]) { display: block !important; }
.hy-strength-aside .wiz-final .wiz-save-draft { width: 100%; min-height: 44px; border-radius: 999px; }
.hy-strength-aside .wiz-final .wiz-save-draft[hidden] { display: none !important; }
@media (max-width: 560px) {
  .list-wizard.list-cards .wiz-step { padding: 12px 14px 14px; }
  .list-mode-row { margin-top: 10px; }
  #list-view-toggle.list-kind-toggle button { min-width: 72px; padding: 8px 12px; }
}

/* Nov 4 (t762u): Genetics Price — Single price / Tiered pricing by quantity. */
.price-mode { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 12px; }
.price-mode-opt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; cursor: pointer; }
.price-mode-opt input { width: 18px; height: 18px; margin: 0; }
#volume-tier-box[hidden] { display: none !important; }
#genetics-volume-block .volume-tier { min-width: 0; }
@media (max-width: 420px) {
  #genetics-volume-block .volume-tier { grid-template-columns: 1fr 1fr !important; }
  #genetics-volume-block .volume-tier .volume-tier-remove { grid-column: 1 / -1; justify-self: start; }
}

/* Nov 4 (t761u): Association suggestions under the field. */
.assoc-host { position: relative; }
.assoc-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #d9d4c7; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.assoc-sug li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1.25; }
.assoc-sug li span { color: #8a8576; font-size: 12px; margin-left: 6px; }
.assoc-sug li:hover, .assoc-sug li.on { background: #f3efe4; }

/* Nov 4 (t748u): Send Message pop-up on ranch profiles. */
.msg-pop-back { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(20,24,20,.45); }
.msg-pop-back.on { display: flex; }
.msg-pop { position: relative; width: 100%; max-width: 520px; max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fffcf7; border-radius: 16px; padding: 20px 16px 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.msg-pop-x { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: 0; background: none; font-size: 28px; line-height: 1; color: #6b6656; cursor: pointer; }
html.msg-pop-lock, html.msg-pop-lock body, body.msg-pop-lock { overflow: hidden; overscroll-behavior: none; }
body.msg-pop-lock { position: fixed; width: 100%; left: 0; right: 0; }
@media (max-width: 600px) { .msg-pop-back { align-items: flex-end; padding: 0; } .msg-pop { max-width: none; border-radius: 16px 16px 0 0; max-height: 92dvh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } }

/* Nov 4 (David t759u): Messages delete + Deleted tab */
.ibx-tabs{display:inline-flex;gap:4px;background:#eef2ee;border-radius:999px;padding:3px}
.ibx-tabs a{padding:5px 12px;border-radius:999px;font-weight:700;font-size:.88rem;color:#4a5a4f;text-decoration:none}
.ibx-tabs a.on{background:#fff;color:#1f3a2a;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chat-del{margin-left:auto;color:#6b7a70;background:none;border:0;padding:8px;border-radius:10px;cursor:pointer;min-width:40px;min-height:40px}
.chat-del:hover,.chat-msg-del:hover{color:#b3261e;background:#fbeeee}
.chat-restore{margin-left:auto}
.chat-msg-row{align-items:center;gap:4px}
.chat-msg-del{opacity:0;background:none;border:0;color:#8a978e;padding:6px;border-radius:8px;cursor:pointer;transition:opacity .15s}
.chat-msg-row:hover .chat-msg-del,.chat-msg-del:focus-visible{opacity:1}
@media (hover:none){.chat-msg-del{opacity:.55}}
.chat-msg-del svg{width:16px;height:16px}
.chat-del-note{padding:12px 16px;margin:0;border-top:1px solid #e3e8e4}
/* Nov 4 (David t760u): links + listing cards in Messages, Share in Message */
.chat-text .chat-link{color:inherit;text-decoration:underline;word-break:break-all}
.chat-card{display:flex;gap:10px;align-items:center;margin-top:8px;background:#fff;color:#1f2a22;border:1px solid #dfe6e0;border-radius:12px;padding:8px;text-decoration:none;max-width:300px;min-width:220px}
.chat-card:hover{border-color:#9db7a5}
.chat-card-img{flex:0 0 64px;height:64px;border-radius:8px;background:#eef2ee;overflow:hidden}
.chat-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.chat-card-txt{display:flex;flex-direction:column;min-width:0;font-size:.86rem;line-height:1.25}
.chat-card-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-card-price{font-weight:700;color:#1f5a36}
.chat-card-sub{color:#6b7a70;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-card-go{color:#1f5a36;font-size:.78rem;font-weight:700;margin-top:2px}
.hy-share-menu{position:fixed;z-index:1200;background:#fff;border:1px solid #dfe6e0;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:4px;display:flex;flex-direction:column;min-width:180px}
.hy-share-menu button{background:none;border:0;text-align:left;padding:10px 12px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;color:#1f2a22}
.hy-share-menu button:hover,.hy-share-menu button:focus-visible{background:#eef4ef}
.sim-pop{position:fixed;inset:0;z-index:1300;background:rgba(15,25,18,.45);display:flex;align-items:center;justify-content:center;padding:16px}
html.sim-open,html.sim-open body{overflow:hidden;overscroll-behavior:none}body.sim-open{overflow:hidden;overscroll-behavior:none;position:fixed;width:100%;left:0;right:0}
.sim-card{background:#fff;border-radius:16px;width:100%;max-width:440px;max-height:85vh;max-height:85dvh;display:flex;flex-direction:column;padding:16px;gap:10px;box-shadow:0 16px 40px rgba(0,0,0,.2);overscroll-behavior:contain}
.sim-head{display:flex;align-items:center;justify-content:space-between;font-size:1.05rem}
.sim-x{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:#4a5a4f;min-width:40px;min-height:40px}
.sim-what{font-size:.88rem;color:#4a5a4f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-card input,.sim-card textarea{width:100%;box-sizing:border-box;border:1px solid #d8e0d6;border-radius:10px;padding:10px;font:inherit;font-size:16px}
.sim-list{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:80px;min-height:0;flex:1}
.sim-label{font-size:.75rem;font-weight:700;text-transform:uppercase;color:#6b7a70;margin:4px 2px}
.sim-row{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:8px;border-radius:10px;cursor:pointer;text-align:left;font:inherit}
.sim-row:hover{background:#f1f5f2}
.sim-row img,.sim-ini{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 36px;background:#e7f0ea;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1f5a36}
.sim-row .grow{display:flex;flex-direction:column;min-width:0}
.sim-row .sub{font-size:.8rem;color:#6b7a70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.sim-pop{align-items:flex-end;padding:0}.sim-card{border-radius:16px 16px 0 0;max-height:88vh;max-height:88dvh;padding-bottom:calc(16px + env(safe-area-inset-bottom))}}
/* Oct 22 (David 7:57 AM): Beef listing form only. Buttons and selected pills are red; the lighter fill inside the pills
   (toggle tracks, the selected Shares/Cuts card, the photo drop area) is light grey instead of a green or pink tint.
   Cattle and Genetics forms are unchanged. --green* are remapped inside the Beef form (and its calendar popover). */
.form-page.beef-form,
body:has(.form-page.beef-form) .hdp-pop {
  --green: var(--beef);
  --green-d: var(--beef-d);
  --green-l: #eef0ee;
}
.form-page.beef-form .list-kind-toggle,
.form-page.beef-form .hy-how-toggle { background: #eef0ee; }
.form-page.beef-form .list-kind-toggle button.on,
.form-page.beef-form .hy-how-toggle button.on { background: var(--beef); color: #fff; }
.form-page.beef-form .media-drop { border-color: var(--beef); background: #f5f6f4; color: var(--beef-d); }
.form-page.beef-form .media-drop.is-dragover { border-color: var(--beef-d); background: #eef0ee; }
.form-page.beef-form .media-drop strong { color: var(--beef-d); }
.form-page.beef-form .btn-primary { background: var(--beef); color: #fff; }
.form-page.beef-form .btn-primary:hover { background: var(--beef-d); }
.form-page.beef-form .btn-outline:hover { border-color: var(--beef); color: var(--beef); }
.form-page.beef-form .pay-toggle.on { background: var(--beef); border-color: var(--beef); color: #fff; }
.form-page.beef-form .pay-setup-prompt { border-color: #e3e7e2; background: #f5f6f4; }
.form-page.beef-form .bc-mode-toggle button.on { border-color: var(--beef); background: #eef0ee; box-shadow: inset 0 0 0 1px var(--beef); }
.form-page.beef-form .bc-mode-toggle button:hover { border-color: var(--beef); }
.form-page.beef-form .check-row input,
.form-page.beef-form input[type="checkbox"],
.form-page.beef-form input[type="radio"] { accent-color: var(--beef); }
body:has(.form-page.beef-form) .hdp-pop .hdp-steps li.on { box-shadow: inset 0 0 0 1px rgba(197, 48, 48, 0.4); }
.form-page.beef-form .hdp-trigger:focus-visible, .form-page.beef-form .hdp-trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.16); }


/* t752u scroll audit — Nov 4, 2026 */
.ld-lightbox {
  overscroll-behavior: contain;
  touch-action: none;
}
.listings-scroll,
.filters {
  overscroll-behavior: contain;
}
/* Prefer dynamic viewport where older map shells still use 100vh alone. */
.hy-map-page-body {
  max-height: none;
}
@supports (height: 100dvh) {
  .gx2 .gx2-side.filters { max-height: calc(100dvh - 100px); }
  .ldz-aside { max-height: calc(100dvh - 104px); }
  .hy-rp-card { max-height: calc(100dvh - 32px); }
  .rs-fmodal { max-height: min(720px, calc(100dvh - 40px)); }
}

.demo-content-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 650; cursor: pointer; }
.demo-content-row input { width: 18px; height: 18px; }
#demo-content-box .sub { margin: 6px 0 0; }
/* t840u: Daily Producer Spotlight sizes with its column. Not a fixed screenshot-sized card. */
.dash-secs > .dash-sec[data-dash-sec="spotlight"] .dash-tile,
.dash-tile-spot {
  aspect-ratio: auto;
  max-height: none;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.dash-spot { display: flex; flex-direction: column; gap: 14px; min-width: 0; position: relative; }
.dash-spot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.dash-spot-title { margin: 0; font-size: 1.2rem; line-height: 1.25; font-weight: 700; color: #143528; min-width: 0; }
.dash-spot-who { display: flex; gap: 14px; align-items: center; min-width: 0; }
.dash-spot-photo-link { flex: 0 0 auto; border-radius: 18px; line-height: 0; }
.dash-spot-photo-link:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.dash-spot-photo { width: 76px; height: 76px; border-radius: 18px; object-fit: cover; display: block; background: #e8efe9; max-width: 100%; }
img.dash-spot-photo { color: transparent; font-size: 0; line-height: 0; overflow: hidden; }
.dash-spot-photo.dash-spot-ph { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; color: #1b6b45; background: #e7f0ea; }
.dash-spot-meta { min-width: 0; flex: 1 1 auto; }
.dash-spot-name { display: block; font-size: 1.35rem; line-height: 1.2; font-weight: 700; color: #143528; text-decoration: none; overflow-wrap: anywhere; }
.dash-spot-name:hover { text-decoration: underline; }
.dash-spot-place { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; color: #5a6a5c; font-size: .95rem; min-width: 0; }
.dash-spot-place svg { flex: 0 0 auto; color: #6a7a6e; }
.dash-spot-place span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-spot-intro { margin: 0; font-size: 1rem; line-height: 1.45; color: #2c3a2e; }
.dash-spot-like {
  flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; padding: 0; margin: -8px -8px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #c9a227; cursor: pointer; border-radius: 12px;
}
.dash-spot-like:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.dash-spot-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.dash-spot-stats > li {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; min-height: 72px; padding: 10px 8px; text-align: center;
  background: #eef4ef; border-radius: 14px;
}
.dash-spot-stats > li b { font-size: 1.55rem; line-height: 1.1; font-weight: 700; color: #143528; font-variant-numeric: tabular-nums; }
.dash-spot-stats > li span { color: #5c6d60; font-size: .92rem; }
.dash-spot-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dash-spot-actions .btn { flex: 1 1 140px; min-width: 0; min-height: 44px; justify-content: center; border-radius: 999px; }
.dash-spot-follow[data-on="1"]::before { content: "✓"; margin-right: 6px; }
.dash-spot-like .dash-spot-star { display: block; }
.dash-spot-like .dash-spot-star path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.dash-spot-like.is-on .dash-spot-star path,
.dash-spot-like[data-on="1"] .dash-spot-star path { fill: #c9a227; stroke: #c9a227; }
@media (max-width: 980px) {
  .dash-sec-tile .dash-tile-spot,
  .dash-secs > .dash-sec[data-dash-sec="spotlight"] .dash-tile { aspect-ratio: auto; max-height: none; }
  .dash-spot-title { font-size: 1.12rem; }
  .dash-spot-name { font-size: 1.2rem; }
  .dash-spot-photo { width: 68px; height: 68px; }
  .dash-spot-stats > li b { font-size: 1.35rem; }
}

/* t795u: Local Ranch Weather square tile */
.dash-wx { display: flex; flex-direction: column; gap: 8px; min-height: 0; height: 100%; font-size: .9rem; }
.dash-wx-loc { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.dash-wx-loc-label { font-weight: 600; color: #1b6b45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-wx-change { background: none; border: 0; color: #1b6b45; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; flex: 0 0 auto; }
.dash-wx-now { display: flex; gap: 12px; align-items: center; }
.dash-wx-now-main { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.dash-wx-icon { font-size: 1.6rem; line-height: 1; }
.dash-wx-temp { font-size: 1.85rem; font-weight: 700; line-height: 1; color: #143528; }
.dash-wx-now-meta { min-width: 0; color: #2c3a2e; line-height: 1.35; }
.dash-wx-cond { font-weight: 600; }
.dash-wx-rain, .dash-wx-wind { font-size: .85rem; color: #4a5a4e; }
.dash-wx-days { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.dash-wx-day { display: grid; grid-template-columns: 2.4rem 1.4rem 2.2rem 2.2rem; gap: 6px; align-items: center; padding: 2px 0; border-top: 1px solid rgba(27,107,69,.1); }
.dash-wx-day:first-child { border-top: 0; }
.dash-wx-day-name { font-weight: 600; color: #1b6b45; }
.dash-wx-day-icon { text-align: center; }
.dash-wx-day-hi { font-weight: 600; text-align: right; }
.dash-wx-day-lo { color: #6a7a6e; text-align: right; }
.dash-wx-hint { margin: 0; color: #4a5a4e; line-height: 1.35; }
.dash-wx-empty { justify-content: center; align-items: stretch; min-height: 160px; }
.dash-wx-empty-hero {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  padding: 12px 10px; border: 1px dashed rgba(27,107,69,.35); border-radius: 12px;
  background: #f7faf8;
}
.dash-wx-empty-title { margin: 0; font-weight: 700; font-size: 1.05rem; color: #143528; text-align: center; }
.dash-wx-empty .dash-wx-hint { text-align: center; }
.dash-wx-pick-focus { margin-top: 4px; }
.dash-wx-pick-focus .dash-wx-q { flex: 1 1 140px; padding: 10px 12px; font-size: 1rem; border-width: 2px; border-color: rgba(27,107,69,.45); }

.dash-wx-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.dash-wx-q { flex: 1 1 120px; min-width: 0; padding: 8px 10px; border: 1px solid rgba(27,107,69,.28); border-radius: 10px; font: inherit; }
.dash-wx-suggest { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.dash-wx-sug { text-align: left; background: #f3f7f4; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; color: #143528; }
.dash-wx-sug:hover, .dash-wx-sug:focus { background: #e4efe8; outline: none; }
@media (max-width: 640px) {
  .dash-wx-temp { font-size: 1.6rem; }
  .dash-wx-day { grid-template-columns: 2.2rem 1.2rem 2rem 2rem; gap: 4px; }
}

/* t796u: Market Pulse inside a square dash tile */
.dash-pulse { display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; font-size: .88rem; }
.dash-pulse-sub { margin: 0; color: #5a6a5c; font-size: .78rem; }
.dash-pulse-summary { margin: 0; color: #2c3a2e; font-size: .82rem; line-height: 1.35; }
.dash-pulse-note { margin: 4px 0 0; color: #6a7a6e; font-size: .72rem; line-height: 1.3; }
.dash-pulse-kpis > li { position: relative; }
.dash-pulse-wow { font-size: .68rem; font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.dash-pulse-wow.is-up { color: #1b6b45; }
.dash-pulse-wow.is-down { color: #8a3b2a; }
.dash-pulse-wow.is-flat { color: #6a7a6e; }

.dash-pulse-kpis {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.dash-pulse-kpis > li {
  background: #f3f7f4; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.dash-pulse-kpi-n { font-weight: 700; font-variant-numeric: tabular-nums; color: #143528; font-size: 1.15rem; line-height: 1.1; }
.dash-pulse-kpi-l { color: #5a6a5c; font-size: .72rem; line-height: 1.2; }
.dash-pulse-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-pulse-h { font-size: .78rem; color: #1b6b45; letter-spacing: .01em; }
.dash-pulse-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-pulse-chips > li {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 3px 0; border-top: 1px solid rgba(27,107,69,.1);
}
.dash-pulse-chips > li:first-child { border-top: 0; padding-top: 0; }
.dash-pulse-chip-l { font-weight: 600; color: #1e2a20; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-pulse-chip-n { color: #5a6a5c; font-size: .75rem; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.dash-pulse-opps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-pulse-opps > li { padding: 4px 0; border-top: 1px solid rgba(27,107,69,.1); color: #2c3a2e; line-height: 1.3; }
.dash-pulse-opps > li:first-child { border-top: 0; padding-top: 0; }
.dash-pulse-empty { margin: 0; color: #6a7a6e; font-size: .8rem; }



/* t797u: Association Events Near You inside a square dash tile */
.dash-ev { display: flex; flex-direction: column; gap: 8px; min-height: 0; height: 100%; font-size: .88rem; }
.dash-ev-sub { margin: 0; color: #5a6a5c; font-size: .78rem; }
.dash-ev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; flex: 1 1 auto; }
.dash-ev-item { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid rgba(27,107,69,.1); }
.dash-ev-item:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-ev-name { font-weight: 700; color: #143528; text-decoration: none; line-height: 1.25; }
.dash-ev-name:hover { color: #1b6b45; text-decoration: underline; }
.dash-ev-assoc { color: #1b6b45; font-size: .75rem; font-weight: 600; }
.dash-ev-meta { color: #5a6a5c; font-size: .72rem; }
.dash-ev-empty { color: #6a7a6e; font-size: .8rem; padding: 4px 0; }
.dash-ev-prefs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.dash-ev-radius-lab { font-size: .75rem; color: #5a6a5c; display: inline-flex; align-items: center; gap: 4px; }
.dash-ev-radius { width: 4.5rem; padding: 4px 6px; border: 1px solid #c5d0c8; border-radius: 6px; font-size: .8rem; }


/* t799u: Sale & Breeding Calendar square tile + full overlay */
.dash-cal { display: flex; flex-direction: column; gap: 8px; min-height: 0; height: 100%; font-size: .85rem; }
.dash-cal-sub { margin: 0; color: #5a6a5c; font-size: .78rem; }
.dash-cal-month-lab { font-weight: 700; color: #143528; font-size: .82rem; }
.dash-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 4px;
}
.dash-cal-cell {
  aspect-ratio: 1; border-radius: 6px; background: #f3f7f4; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding: 2px 0 0; font-size: .65rem; color: #2c3a2e; min-width: 0;
}
.dash-cal-cell.is-pad { background: transparent; }
.dash-cal-cell.is-today { outline: 2px solid #1b6b45; background: #e7f2ea; }
.dash-cal-cell.has-dot { font-weight: 700; }
.dash-cal-dots { display: flex; gap: 2px; margin-top: 1px; min-height: 5px; }
.dash-cal-dot { width: 5px; height: 5px; border-radius: 50%; background: #1b6b45; display: inline-block; }
.dash-cal-kind-breeding { background: #7a4e9b; }
.dash-cal-kind-calving { background: #c45c26; }
.dash-cal-kind-vaccination { background: #2a6fdb; }
.dash-cal-kind-weaning { background: #b08900; }
.dash-cal-kind-sale, .dash-cal-kind-show, .dash-cal-kind-convention { background: #1b6b45; }
.dash-cal-kind-other { background: #6a7a6e; }
.dash-cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; min-height: 0; flex: 1 1 auto; }
.dash-cal-item { display: flex; flex-direction: column; gap: 1px; padding-bottom: 4px; border-bottom: 1px solid rgba(27,107,69,.1); }
.dash-cal-item-top { display: flex; align-items: center; gap: 6px; }
.dash-cal-kind {
  display: inline-block; font-size: .65rem; font-weight: 700; color: #fff; padding: 1px 6px; border-radius: 999px;
  background: #1b6b45; line-height: 1.4;
}
span.dash-cal-kind.dash-cal-kind-breeding { background: #7a4e9b; }
span.dash-cal-kind.dash-cal-kind-calving { background: #c45c26; }
span.dash-cal-kind.dash-cal-kind-vaccination { background: #2a6fdb; }
span.dash-cal-kind.dash-cal-kind-weaning { background: #b08900; }
span.dash-cal-kind.dash-cal-kind-other { background: #6a7a6e; }
.dash-cal-when { color: #5a6a5c; font-size: .72rem; margin-right: auto; }
.dash-cal-title { font-weight: 600; color: #143528; text-decoration: none; line-height: 1.25; }
a.dash-cal-title:hover { color: #1b6b45; text-decoration: underline; }
.dash-cal-src { font-size: .7rem; color: #5a6a5c; }
.dash-cal-del { border: 0; background: transparent; color: #8a3a3a; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.dash-cal-empty { color: #6a7a6e; font-size: .8rem; margin: 0; }
.dash-cal-add { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 2px; }
.dash-cal-add input, .dash-cal-add select { font-size: .75rem; padding: 4px 6px; border: 1px solid #c5d0c8; border-radius: 6px; min-width: 0; }
.dash-cal-add button { grid-column: 1 / -1; }
.dash-cal-actions { display: flex; justify-content: flex-end; }
body.hy-cal-overlay-open { overflow: hidden; }
.hy-cal-overlay { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.hy-cal-overlay-backdrop { position: absolute; inset: 0; background: rgba(20,40,28,.45); }
.hy-cal-overlay-panel {
  position: relative; background: #fff; border-radius: 14px; width: min(560px, 100%); max-height: min(90vh, 720px);
  display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,.25); overflow: hidden;
}
.hy-cal-overlay-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #e3ebe5; }
.hy-cal-overlay-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #f3f7f4; cursor: pointer; position: relative; }
.hy-cal-overlay-x span, .hy-cal-overlay-x span:before, .hy-cal-overlay-x span:after {
  position: absolute; left: 10px; right: 10px; top: 17px; height: 2px; background: #143528; content: "";
}
.hy-cal-overlay-x span { background: transparent; }
.hy-cal-overlay-x span:before { transform: rotate(45deg); top: 0; }
.hy-cal-overlay-x span:after { transform: rotate(-45deg); top: 0; }
.hy-cal-overlay-body { padding: 12px 14px 18px; overflow: auto; }
.hy-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hy-cal-grid-lg .dash-cal-cell { font-size: .75rem; }
.hy-cal-h { margin: 14px 0 6px; font-size: .9rem; color: #143528; }
.hy-cal-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hy-cal-ul > li { font-size: .85rem; color: #2c3a2e; }


/* t802u/t803u: How Would You Like to Get Paid? + listing badges */
/* t805u: payment method tiles + conditional Payment Setup */
.pay-tiles {
  /* t808u: Stripe + Private Treaty side by side (incl. mobile) */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  max-width: 420px;
}
.pay-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 72px; padding: 10px 10px 8px; border: 1.5px solid #cfd9d1; border-radius: 12px;
  background: #fafcfa; color: #1a2a1c; cursor: pointer; text-align: left; font: inherit;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.pay-tile:hover:not(:disabled) { border-color: #1b6b45; background: #f3faf5; }
.pay-tile.is-on { border-color: #1b6b45; background: #eef7f1; box-shadow: inset 0 0 0 1px #1b6b45; }
.pay-tile.is-preferred { background: #e7f2ea; }
.pay-tile:disabled, .pay-tile.is-blocked { opacity: .55; cursor: not-allowed; }
.pay-tile-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px; font-size: .7rem; font-weight: 800;
  background: #1b6b45; color: #fff; line-height: 1;
}
.pay-tile-check-off { background: transparent; border: 1.5px solid #b7c4ba; }
.pay-tile-lab { font-size: .82rem; font-weight: 700; line-height: 1.25; padding-right: 22px; }
.pay-tile-star {
  position: absolute; top: 6px; right: 6px; border: 0; background: transparent;
  color: #9aa89c; font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.pay-tile-star:hover:not(:disabled) { color: #1b6b45; background: #e7f2ea; }
.pay-tile.is-preferred .pay-tile-star { color: #1b6b45; }
.pay-tile-star:disabled { opacity: .35; cursor: default; }
.pay-setup-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3ebe5; }
.pay-setup-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.pay-setup-h { margin: 0 0 6px; font-size: .95rem; color: #143528; }
.pay-m-missing { margin: 0 0 8px; color: #8a5a12; font-size: .82rem; line-height: 1.35; background: #fff7e8; border-radius: 8px; padding: 8px 10px; }
.pay-m-instr { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: #5a6a5c; margin-top: 8px; }
.pay-m-instr textarea { font: inherit; padding: 8px; border: 1px solid #c5d0c8; border-radius: 8px; resize: vertical; }
.pay-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.pay-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; background: #e7f2ea; color: #143528; line-height: 1.3;
}
.pay-badge-wire { background: #e8eef8; color: #1a3a6e; }
.pay-badge-ach { background: #f3eef8; color: #4a2a7a; }
.pay-badge-privateTreaty { background: #f4f0e6; color: #5a4a20; }
.pay-badge-stripe { background: #e7f2ea; color: #143528; }
.pay-badge.is-preferred { outline: 1px solid #1b6b45; }
.pay-badge-pref { font-style: normal; font-size: .65rem; color: #1b6b45; }
.ld-detail .pay-badges, .listing-detail .pay-badges { margin: 8px 0 12px; }


/* t807u Payment Setup panels */
.pay-setup-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pay-setup-pref-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: #1b6b45; background: #e7f2ea; border: 1px solid #1b6b45; border-radius: 999px;
  padding: 2px 8px;
}
.pay-setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pay-setup-actions .sub { margin: 0; }
.pay-m-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: .85rem; color: #2a3d30; }
.pay-m-check input { margin-top: 3px; }
.pay-method-note { margin: 6px 0 0; font-size: .8rem; color: #3d5244; line-height: 1.35; }
#pay-setup-list .pay-setup-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3ebe5; }
#pay-setup-list .pay-setup-block:first-child { border-top: 0; padding-top: 0; margin-top: 4px; }
@media (max-width: 640px) {
  .pay-setup-actions { flex-direction: column; align-items: stretch; }
  .pay-setup-actions .btn { width: 100%; justify-content: center; }
}


/* t828u: on-page Stripe Embedded Checkout for Buy Now / cart */
.hy-buy-checkout{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;padding:12px;}
.hy-buy-checkout-backdrop{position:absolute;inset:0;background:rgba(20,16,12,.45);}
.hy-buy-checkout-panel{position:relative;z-index:1;width:min(720px,100%);max-height:min(92vh,920px);overflow:auto;-webkit-overflow-scrolling:touch;border-radius:16px;padding:16px 16px 24px;box-shadow:0 18px 50px rgba(0,0,0,.28);}
.hy-buy-checkout-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.hy-buy-checkout-head .page-title{margin:0;font-size:1.25rem;}
.hy-buy-stripe-box{min-height:240px;margin-top:8px;}
body.hy-buy-checkout-open{overflow:hidden;}
@media (min-width:720px){
  .hy-buy-checkout{align-items:center;padding:24px;}
}


/* Nov 5: Customer journey click-through + Journey Score */
.hy-step.is-clickable { cursor: pointer; }
.hy-step.is-clickable:hover,
.hy-step.is-clickable:focus-visible {
  outline: 2px solid #16503c;
  outline-offset: 2px;
  background: #f3f8f4;
}
.journey-people-modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
}
.journey-people-backdrop {
  position: absolute; inset: 0; background: rgba(20, 32, 24, .45);
}
.journey-people-panel {
  position: relative; z-index: 1;
  width: min(920px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px 18px 24px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
}
@media (min-width: 720px) {
  .journey-people-modal { align-items: center; }
  .journey-people-panel { border-radius: 16px; }
}
.journey-people-panel header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.journey-people-panel header h3 { margin: 0; font-size: 1.2rem; }
.journey-people-tools {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px;
}
.journey-people-tools input,
.journey-people-tools select {
  height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; background: #fff;
}
.journey-people-tools input { flex: 1; min-width: 160px; }
.journey-people-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e6eee8; border-radius: 12px; }
.journey-people-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .92rem; }
.journey-people-table th, .journey-people-table td { padding: 10px 12px; border-bottom: 1px solid #edf1ee; text-align: left; vertical-align: top; }
.journey-people-table th { background: #f4f7f3; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #5c6f62; }
.acct-journey-score { white-space: nowrap; font-variant-numeric: tabular-nums; }
.acct-journey-score .sub { display: inline; margin-left: 4px; }

/* Broken listing / ranch photos: keep the frame, hide the browser's alt-text spill. */
.ld-hero-media.gallery > img,
.ld-lb-stage img,
.hyg-tile img,
.hyg-thumb img,
.rs-tile img,
.rs-fav img,
.rs-ac-photo img,
.rs-cover-img,
img.ranch-av,
.le-photo img,
.le-card-photo img,
.chat-card-img img,
img.am-list-logo,
.bcs-media img,
.bcs-thumb img {
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.ld-hero-media.gallery > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.chat-card-img { overflow: hidden; }
.chat-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
img.is-img-fallback { background: #e7efe8; }
.listing-card[data-hy-hidden="1"], .hy-map-listing-card[data-hy-hidden="1"], .map-pop[data-hy-hidden="1"] { display: none !important; }
.le-photo-note { margin: 6px 0 0; color: #8a3b12; font-weight: 600; font-size: 14px; }
/* Nov 9: public Producer Profile uses the site content width (--hy-container), the same
   white card (18px radius, 1px line, light shadow) as listing detail and dashboard, and a
   two-column grid that stacks under 981px. The profile editor (.pe-public) is not .ranch-page. */
.ranch-page.rs-page {
  max-width: var(--hy-container);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 16px var(--hy-gutter) 56px;
  box-sizing: border-box;
}
.ranch-page.rs-page .rs-cover {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 18px;
  height: clamp(168px, 22vw, 280px);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 32, 24, 0.04);
}
.ranch-page.rs-page .rs-cover .ranch-cover-video,
.ranch-page.rs-page .rs-cover .rs-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ranch-page.rs-page .rs-cover.rs-cover-empty {
  height: 88px;
  background: linear-gradient(160deg, var(--green-l), var(--paper-2));
}
.ranch-page.rs-page .rs-logo.ranch-av {
  width: 104px;
  height: 104px;
  margin-top: -44px;
  border-width: 4px;
}
.ranch-page.rs-page .rs-cover.rs-cover-empty + .ranch-body .rs-logo.ranch-av {
  width: 84px;
  height: 84px;
  margin-top: -28px;
}
.ranch-page.rs-page .rs-id h1 { font-size: clamp(1.45rem, 2vw, 1.9rem); }
.ranch-page.rs-page .rs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 20px 22px;
  align-items: start;
  margin-top: 4px;
}
.ranch-page.rs-page .rs-main { margin-top: 0; gap: 18px; min-width: 0; }
.ranch-page .rs-follower-sec { margin: 0; min-width: 0; max-width: 100%; }
/* Members stay in the main column of the same .rs-layout grid as a producer profile.
   Four cards fit that column; they do not run under the sidebar. */
.ranch-page .rs-follower-wrap { width: 100%; max-width: 100%; margin: 0; min-width: 0; }
.ranch-page .rs-follower-wrap h2 { margin: 0 0 12px; font-size: 1.35rem; }
.ranch-page .rs-follower-grid.listings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
  height: auto;
  min-height: 0;
  overflow: visible;
  align-items: stretch;
}
.ranch-page .rs-follower-grid .listing-card.hy-pc {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* Grow with a wrapped name. A row still shares one height (grid stretch, footer pinned). */
  height: auto !important;
}
/* Star and message sit on their own row so the ranch name gets the full card width. */
.ranch-page .rs-follower-grid .listing-card.card-v2 .card-actions {
  top: 8px;
  right: 10px;
  bottom: auto;
  width: auto;
  flex: 0 0 auto;
}
.ranch-page .rs-follower-grid .listing-card.card-v2 .card-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
.ranch-page .rs-follower-grid .listing-card.card-v2.hy-pc .card-body-link {
  padding-top: 46px;
}
.ranch-page .rs-follower-grid .listing-card.card-v2.hy-pc .listing-body .prod-card-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  text-overflow: unset;
  height: auto;
  min-height: 0;
  max-height: none;
  line-height: 1.25;
  padding-right: 0;
  margin: 0 0 4px;
  word-break: normal;
  overflow-wrap: break-word;
}
/* Counts and the city break only between the bars, not inside a word. */
.ranch-page .rs-follower-grid .listing-card.card-v2.hy-pc .card-meta {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  height: auto;
  min-height: 19.5px;
  line-height: 1.35;
}
.ranch-page .rs-follower-grid .listing-card .card-meta > span {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow: visible;
  text-overflow: unset;
}
.ranch-page .rs-follower-grid .meta-loc {
  align-items: flex-start;
  height: auto;
  min-height: 19.5px;
  line-height: 1.35;
  white-space: normal;
}
.ranch-page .rs-follower-grid .meta-loc > span {
  display: inline;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: 100%;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
.ranch-page .rs-follower-grid .listing-card.card-v2 .card-foot-prod {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.25;
}
.ranch-page .rs-follower-more { margin-top: 16px; }
.ranch-page .rs-follower-more[hidden] { display: none; }
@media (max-width: 1200px) {
  .ranch-page .rs-follower-grid.listings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .ranch-page .rs-follower-grid.listings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ranch-page .rs-follower-grid.listings-grid { grid-template-columns: minmax(0, 1fr); }
}
.ranch-page.rs-page .rs-side { display: grid; gap: 14px; min-width: 0; }
.ranch-page.rs-page .rs-main > *,
.ranch-page.rs-page .rs-side > * { min-width: 0; max-width: 100%; }
.ranch-page.rs-page .rs-ac-story {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 300px);
  gap: 20px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}
.ranch-page.rs-page .rs-ac-story-text,
.ranch-page.rs-page .rs-about-text { min-width: 0; max-width: 100%; }
.ranch-page.rs-page .rs-ac-story .rs-about-text { max-width: min(70ch, 100%); }
.ranch-page.rs-page .rs-ac-story h2 { font-size: 1.35rem; margin-bottom: 8px; }
.ranch-page.rs-page .rs-ac-photo {
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 300px;
  height: auto;
  max-height: 220px;
  aspect-ratio: 4 / 3;
  align-self: start;
  overflow: hidden;
}
.ranch-page.rs-page .rs-ac-photo img { max-width: 100%; min-width: 0; }
.ranch-page.rs-page .rs-ac-connect,
.ranch-page.rs-page .rs-ac-stats {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 32, 24, 0.04);
  padding: 16px 16px 18px;
}
.ranch-page.rs-page .rs-ac-connect h2,
.ranch-page.rs-page .rs-ac-stats h2 { font-size: 1.05rem; margin-bottom: 8px; }
.ranch-page.rs-page .rs-ac-stats .rs-stats-attrs {
  grid-template-columns: 1fr 1fr;
  gap: 10px 8px;
}
.ranch-page.rs-page .rs-ac-stats.rs-assoc-stats .rs-stats-attrs {
  grid-template-columns: minmax(0, 1fr);
}
.ranch-page.rs-page .rs-ac-stats .rs-ac-attr { border-left: 0; padding: 0; }
.ranch-page.rs-page .rs-ac-stats .rs-ov-rating { grid-column: 1 / -1; }
.ranch-page.rs-page .rs-ac-stats .rs-ac-attr-ico.rs-ico { width: 20px; height: 20px; }
.ranch-page.rs-page .rs-ac-connect .rs-map { height: 148px; }
.ranch-page.rs-page .rs-main > .rs-home-sec.home-row-section {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.ranch-page.rs-page .rs-home-sec .home-row {
  grid-auto-columns: calc((100% - 32px) / 3);
  gap: 16px;
}
.ranch-page.rs-page .rs-cta { padding: 20px 22px; border-radius: 18px; }
.ranch-page.rs-page .rs-cta p { max-width: 62ch; }
@media (max-width: 980px) {
  .ranch-page.rs-page { padding: 12px var(--hy-gutter) 48px; }
  .ranch-page.rs-page .rs-layout { grid-template-columns: minmax(0, 1fr); }
  .ranch-page.rs-page .rs-side { order: -1; }
  .ranch-page.rs-page .rs-head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 0;
  }
  .ranch-page.rs-page .rs-actions { justify-items: center; width: 100%; padding-top: 6px; }
  .ranch-page.rs-page .rs-badges { justify-content: center; }
  .ranch-page.rs-page .rs-tagline { white-space: normal; max-width: 42ch; }
  .ranch-page.rs-page .rs-ac-story,
  .ranch-page.rs-page .rs-ac-story.rs-ac-nophoto { grid-template-columns: minmax(0, 1fr); }
  .ranch-page.rs-page .rs-ac-photo { width: 100%; max-width: min(100%, 420px); justify-self: center; max-height: none; }
  .ranch-page.rs-page .rs-ac-story .rs-ac-photo img { width: 100%; max-width: 100%; height: auto; }
  .ranch-page.rs-page .rs-main > .rs-home-sec.home-row-section { width: 100%; max-width: 100%; margin-left: 0; }
  .ranch-page.rs-page .rs-home-sec .home-row { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 640px) {
  .ranch-page.rs-page .rs-logo.ranch-av { width: 88px; height: 88px; margin-top: -36px; }
  .ranch-page.rs-page .rs-cover.rs-cover-empty + .ranch-body .rs-logo.ranch-av { width: 72px; height: 72px; margin-top: -20px; }
  .ranch-page.rs-page .rs-home-sec .home-row { grid-auto-columns: minmax(220px, 82%); }
  .ranch-page.rs-page .rs-home-sec.rs-open .home-row {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
/* Beef map: one compact producer card. The whole card is the link to the ranch profile. */
.hy-map-card.hy-map-card-beef-producer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 300px;
  max-width: 100%;
  padding: 12px 14px;
  cursor: pointer;
}
.hy-map-card-beef-producer img.hy-beef-prod-logo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
  background: #f4efe8;
}
.hy-map-card-beef-producer .hy-map-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0;
}
.hy-map-card-beef-producer .hy-map-card-lot,
.hy-map-card-beef-producer .hy-map-card-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hy-map-card-beef-producer .hy-beef-prod-count {
  font-weight: 700;
  color: #9b1c1c;
}
.hy-map-card-sheet.hy-map-card-beef-producer { width: 100%; }

/* Admin quick rotate. Shown only after an admin taps a listing photo. */
.hy-rot-bar {
  position: absolute;
  z-index: 8;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}
.hy-rot-bar button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #1c2b22;
  font: 600 14px/1.2 Poppins, sans-serif;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}
.hy-rot-bar button[data-rot="save"] { background: #1f6b3a; color: #fff; }
.hy-rot-bar button:disabled { opacity: 0.45; cursor: default; }
.hy-rot-status {
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 650;
}
.hy-rot-on { object-fit: contain !important; }
@media (max-width: 640px) {
  .hy-rot-bar { left: 6px; right: 6px; bottom: 6px; }
  .hy-rot-bar button { flex: 1 1 calc(50% - 8px); }
}