/* FFN Plant Finder — Styles
   ============================================================
   Colors + type follow brand-style.md (source of truth).
   BEM-ish naming: .ffn-pf-{block}__element--modifier
   All colours via CSS custom properties — no hardcoded hex in components.
   Flat editorial: borders + bg changes for depth, NO shadows/gradients.
   ============================================================ */

:root {
  /* Core FFN palette (live site, confirmed 2026-05-29) */
  --ffn-green-dark:  #0b6f29;
  --ffn-green-light: #d1e392;
  --ffn-slate-dark:  #415161;
  --ffn-ink:         #2c3e50;
  --ffn-blue-soft:   #b6dbff;
  --ffn-sand:        #cdb07f;
  --ffn-bg-light:    #f8f9fb;
  --ffn-white:       #ffffff;
  --ffn-link:        #007bf7;
  --ffn-blue-wash:   rgba(181, 218, 255, 0.43);

  /* Extended semantic palette (traffic-light verdicts) */
  --ffn-amber:       #d69e47;
  --ffn-terracotta:  #c47e5a;
  --ffn-brick-red:   #a0392b;
  --ffn-fit-zone:    #2f8fc9;
  --ffn-fit-both:    var(--ffn-green-dark);
  --ffn-fit-chill:   var(--ffn-amber);
  --ffn-fit-heat:    var(--ffn-terracotta);

  --ffn-border:      #ddd;
  --ffn-radius:      6px;
  --ffn-radius-chip: 4px;
  --ffn-font:        Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Standard info-circle glyph (Bootstrap Icons), used as a mask so it picks up
     the surrounding text color. Referenced by .ffn-pf-info-dot. */
  --ffn-info-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path fill="black" d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.532l1.001-4.706zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>');
}

/* ── Utility ───────────────────────────────────────────────── */

.ffn-pf-hidden { display: none !important; }

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

/* ── Location capture widget ────────────────────────────────── */

.ffn-pf-location-capture {
  font-family: var(--ffn-font);
  color: var(--ffn-ink);
  margin-bottom: 1.25rem;
}

.ffn-pf-zip-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.ffn-pf-zip-input {
  width: 110px;
  padding: 0.5rem 0.65rem;
  border: 1.5px solid var(--ffn-border);
  border-radius: var(--ffn-radius);
  background: var(--ffn-bg-light);
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--ffn-ink);
}
.ffn-pf-zip-input:focus {
  outline: 2px solid var(--ffn-green-dark);
  border-color: var(--ffn-green-dark);
}

/* Buttons */
.ffn-pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--ffn-radius);
  cursor: pointer;
  font-size: 0.95rem;
  font-family: var(--ffn-font);
  transition: background 0.15s, border-color 0.15s;
}

.ffn-pf-btn--primary { background: var(--ffn-link); color: #fff; }
.ffn-pf-btn--primary:hover { background: #0067d6; }

.ffn-pf-btn--gps {
  background: var(--ffn-bg-light);
  color: var(--ffn-slate-dark);
  padding: 0.5rem 0.7rem;
  font-size: 1.1rem;
  border: 1.5px solid var(--ffn-border);
}
.ffn-pf-btn--gps:hover { border-color: var(--ffn-slate-dark); }

.ffn-pf-btn--text {
  background: none;
  color: var(--ffn-link);
  padding: 0;
  font-size: 0.875rem;
  text-decoration: underline;
  border: none;
}
.ffn-pf-btn--text:hover { color: #0067d6; }

/* Product climate-fit map */
.single-product div.product .product-entry-wrapper {
  flex-wrap: wrap !important;
  align-items: flex-start;
}

@media (min-width: 900px) {
  body.single-product div.product .product-entry-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    column-gap: 8% !important;
    gap: 0 8% !important;
    justify-content: space-between !important;
  }

  body.single-product div.product .product-entry-wrapper > .woocommerce-product-gallery {
    flex: 0 1 46% !important;
    max-width: 46% !important;
    min-width: 0;
  }

  body.single-product div.product .product-entry-wrapper > .summary.entry-summary,
  body.single-product div.product .product-entry-wrapper > .entry-summary {
    flex: 1 1 46% !important;
    max-width: 46% !important;
    min-width: 240px;
    align-self: flex-start;
  }
}

@media (min-width: 690px) {
  body.single-product div.product .summary.entry-summary > .ct-share-box.ct-hidden-sm {
    margin-top: 0.75rem !important;
  }
}

.single-product div.product .woocommerce-tabs,
.single-product div.product .woocommerce-tabs.wc-tabs-wrapper,
.single-product div.product .woocommerce-Tabs-panel,
.single-product div.product .woocommerce-Tabs-panel--description,
.single-product div.product .ct-woocommerce-tabs,
.single-product div.product .ct-product-tabs {
  clear: both;
  float: none;
  grid-column: 1 / -1 !important;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.single-product div.product > .ffn-pf-fit-map {
  display: block;
  flex: 0 0 100% !important;
  order: 3;
  width: 100%;
  max-width: 100%;
}

.single-product div.product .product-entry-wrapper > .woocommerce-tabs,
.single-product div.product .product-entry-wrapper > .woocommerce-tabs.wc-tabs-wrapper,
.single-product div.product .product-entry-wrapper > .ct-woocommerce-tabs,
.single-product div.product .product-entry-wrapper > .ct-product-tabs {
  flex: 0 0 100% !important;
  order: 4;
}

.single-product div.product > .ffn-pf-fit-map--placed {
  clear: both !important;
  float: none !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.single-product .summary.entry-summary .ffn-pf-fit-map--summary,
.single-product .entry-summary .ffn-pf-fit-map--summary,
.single-product .woocommerce-product-details__short-description .ffn-pf-fit-map--summary {
  clear: both;
  float: none;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 1rem 0 1.1rem;
}

.ffn-pf-fit-map {
  font-family: var(--ffn-font);
  color: var(--ffn-ink);
  border: 1px solid var(--ffn-border);
  background: var(--ffn-white);
  padding: 0.65rem;
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ffn-pf-fit-map__swatch {
  flex: 0 0 auto;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 999px;
  border: 1px solid var(--ffn-white);
}

.ffn-pf-fit-map__swatch--zone { background: var(--ffn-fit-zone); }

.ffn-pf-fit-map__swatch--chill { background: var(--ffn-fit-chill); }

.ffn-pf-fit-map__swatch--heat { background: var(--ffn-fit-heat); }

.ffn-pf-fit-map__swatch--both { background: var(--ffn-fit-both); }

.ffn-pf-fit-map__fit-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 3.15rem;
  padding: 0.58rem 0.68rem;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius);
  background: var(--ffn-bg-light);
  color: var(--ffn-ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ffn-pf-fit-map__fit-toggle:hover {
  border-color: rgba(47, 154, 64, 0.38);
}

.ffn-pf-fit-map__fit-toggle--active {
  border-color: rgba(47, 154, 64, 0.55);
  background: var(--ffn-green-light);
}

.ffn-pf-fit-map__fit-toggle--active.ffn-pf-fit-map__fit-toggle--green {
  border-color: rgba(47, 154, 64, 0.55);
  background: var(--ffn-green-light);
}

.ffn-pf-fit-map__fit-toggle--active.ffn-pf-fit-map__fit-toggle--amber {
  border-color: rgba(214, 158, 71, 0.62);
  background: var(--ffn-amber);
}

.ffn-pf-fit-map__fit-toggle--active.ffn-pf-fit-map__fit-toggle--red {
  border-color: rgba(160, 57, 43, 0.62);
  background: #f3d8d3;
}

.ffn-pf-fit-map__fit-light {
  order: 2;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.ffn-pf-fit-map__zip-link {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}

.ffn-pf-fit-map__canvas-wrap {
  position: relative;
  aspect-ratio: 1.78 / 1;
  min-height: 0;
  height: auto;
  border: 0;
  background: var(--ffn-white);
  overflow: hidden;
}

.single-product .summary.entry-summary .ffn-pf-fit-map--summary .ffn-pf-fit-map__canvas-wrap,
.single-product .entry-summary .ffn-pf-fit-map--summary .ffn-pf-fit-map__canvas-wrap {
  min-height: 0;
  height: auto;
}

.ffn-pf-fit-map__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ffn-pf-fit-map__loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2rem);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ffn-border);
  background: var(--ffn-white);
  color: var(--ffn-slate-dark);
  font-size: 0.92rem;
  text-align: center;
  z-index: 2;
}

.ffn-pf-fit-map__compat {
  display: contents;
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map {
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  animation: none;
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__header {
  display: none;
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__rows {
  order: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__row {
  position: relative;
  min-height: 4.1rem;
  padding: 0.48rem 1.65rem 0.48rem 0.5rem;
  cursor: pointer;
  border: 1px solid var(--ffn-border);
  background: var(--ffn-bg-light);
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__row--active {
  border-color: rgba(47, 154, 64, 0.55);
  background: var(--ffn-green-light);
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__row:hover {
  border-color: rgba(47, 154, 64, 0.38);
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__rowmain {
  gap: 0.12rem;
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__metric {
  font-size: 0.82rem;
  white-space: nowrap;
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__detail {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  font-size: 0.76rem;
  line-height: 1.16;
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__light {
  position: absolute;
  right: 0.62rem;
  bottom: 0.62rem;
  margin: 0;
  width: 12px;
  height: 12px;
}

.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__status,
.ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__no-profile {
  display: none;
}

.ffn-pf-fit-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  align-items: center;
  padding-top: 0.55rem;
  color: var(--ffn-slate-dark);
  font-size: 0.78rem;
}

.ffn-pf-fit-map__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ffn-pf-fit-map__legend strong {
  color: var(--ffn-ink);
  font-weight: 700;
}

.ffn-pf-fit-map__source {
  order: 2;
  margin: 0.35rem 0 0;
  color: var(--ffn-slate-dark);
  font-size: 0.68rem;
  line-height: 1.35;
}

.ffn-pf-fit-map__notice {
  padding: 0.75rem;
  border: 1px solid var(--ffn-border);
  background: var(--ffn-bg-light);
  color: var(--ffn-slate-dark);
  font-family: var(--ffn-font);
}

@media (max-width: 720px) {
  .ffn-pf-fit-map {
    padding: 0.65rem;
    margin: 0.75rem 0;
  }

  .ffn-pf-fit-map__canvas-wrap {
    min-height: 0;
    height: auto;
  }

  .ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__rows {
    grid-template-columns: 1.16fr 1fr 1fr;
    gap: 0.32rem;
  }

  .ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__row {
    padding: 0.42rem 1.35rem 0.42rem 0.38rem;
  }

  .ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__metric {
    font-size: 0.74rem;
  }

  .ffn-pf-fit-map__compat .ffn-pf-badge--map .ffn-pf-badge__detail {
    font-size: 0.68rem;
  }
}

/* Feedback */
.ffn-pf-zip-feedback {
  font-size: 0.875rem;
  min-height: 1.2em;
  margin-top: 0.4rem;
  transition: color 0.15s;
}
.ffn-pf-zip-feedback--loading { color: var(--ffn-slate-dark); }
.ffn-pf-zip-feedback--success { color: var(--ffn-green-dark); }
.ffn-pf-zip-feedback--error   { color: var(--ffn-brick-red); }

/* Active location display */
.ffn-pf-location-active {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.ffn-pf-zip-chip,
.ffn-pf-zone-chip,
.ffn-pf-chill-chip {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--ffn-green-light);
  color: var(--ffn-green-dark);
  font-weight: 600;
  font-size: 0.9rem;
}
.ffn-pf-chill-chip { background: var(--ffn-blue-soft); color: var(--ffn-ink); }

/* ── Header chip ───────────────────────────────────────────── */

.ffn-pf-header-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: var(--ffn-green-light);
  color: var(--ffn-green-dark);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: border-color 0.15s;
}
.ffn-pf-header-chip:hover { border-color: var(--ffn-green-dark); }
.ffn-pf-chip--no-zone { background: var(--ffn-bg-light); color: var(--ffn-slate-dark); }

/* ── Header widget (ZIP/Zone/Chill/Heat/Rain columns, like the mobile bar) ─── */
.ffn-pf-header-bar {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  vertical-align: middle;
  font-family: var(--ffn-font);
  background: var(--ffn-green-light);
  border-radius: 13px;
  overflow: hidden;
}
.ffn-pf-header-bar.ffn-pf-chip--no-zone { background: var(--ffn-green-light); }
.ffn-pf-header-bar__cta {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ffn-green-dark);
  padding: 0.35rem 0.9rem;
  white-space: nowrap;
}
.ffn-pf-header-bar__grid {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
}
.ffn-pf-header-bar__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0.2rem 0.7rem;
  border-left: 1px solid rgba(11, 111, 41, 0.18);
  cursor: pointer;
  line-height: 1.1;
}
.ffn-pf-header-bar__grid > .ffn-pf-header-bar__cell:first-child { border-left: 0; }
.ffn-pf-header-bar__label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ffn-slate-dark);
  white-space: nowrap;
}
.ffn-pf-header-bar__value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ffn-green-dark);
}
.ffn-pf-header-bar__ship {
  display: block;
  padding: 0.12rem 0.65rem 0.26rem;
  border-top: 1px solid rgba(11, 111, 41, 0.14);
  color: var(--ffn-green-dark);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

/* ── Sticky mobile climate bar ──────────────────────────────────────────
   Fixed to the bottom of the viewport on phones only. Shows ZIP / Zone /
   Chill / Heat / Rain as labeled columns once a profile exists; otherwise a single
   call-to-action line. Hidden entirely on desktop (the sidebar widget covers
   that case). */
.ffn-pf-mobile-bar { display: none; }

@media (max-width: 768px) {
  .ffn-pf-mobile-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    background: var(--ffn-green-dark);
    color: var(--ffn-white);
    font-family: var(--ffn-font);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    /* keep clear of the iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Put the bar on its own GPU layer so iOS Safari repaints it immediately
       when JS swaps CTA→data, instead of deferring the repaint until a scroll. */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }

  /* CTA shown until a location is set: title line + (ZIP input · or · GPS). */
  .ffn-pf-mobile-bar__cta {
    padding: 0.6rem 0.85rem 0.7rem;
  }
  .ffn-pf-mobile-bar__cta-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    line-height: 1.2;
  }
  .ffn-pf-mobile-bar__cta-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
  }
  /* Input qualified with the parent + tag (0,2,1) so theme input styles don't
     override the white text / translucent fill on the dark-green bar. */
  .ffn-pf-mobile-bar input.ffn-pf-mobile-bar__zip {
    flex: 1 1 auto;
    min-width: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 9px;
    padding: 0.55rem 0.7rem;
    font-size: 1rem; /* ≥16px so iOS doesn't zoom on focus */
    font-family: inherit;
    color: var(--ffn-white);
    /* iOS/Chrome honor -webkit-text-fill-color over `color` for typed text;
       themes often set it on inputs, which made the entry render dark grey. */
    -webkit-text-fill-color: var(--ffn-white);
    caret-color: var(--ffn-white);
    background: rgba(255, 255, 255, 0.14);
  }
  .ffn-pf-mobile-bar input.ffn-pf-mobile-bar__zip::placeholder {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1; /* Firefox dims placeholders by default */
  }
  .ffn-pf-mobile-bar input.ffn-pf-mobile-bar__zip:focus {
    outline: none;
    border-color: var(--ffn-white);
    background: rgba(255, 255, 255, 0.22);
  }
  .ffn-pf-mobile-bar__or {
    flex: 0 0 auto;
    align-self: center;
    font-size: 0.85rem;
    opacity: 0.85;
  }
  .ffn-pf-mobile-bar__gps {
    flex: 0 0 auto;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--ffn-white);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .ffn-pf-mobile-bar__gps:active { background: rgba(255, 255, 255, 0.25); }
  .ffn-pf-mobile-bar__msg {
    font-size: 0.78rem;
    text-align: center;
    margin-top: 0.4rem;
    min-height: 0;
    opacity: 0.95;
  }
  .ffn-pf-mobile-bar__msg:empty { display: none; }

  /* ZIP / Zone / Chill / Heat / Rain columns. */
  .ffn-pf-mobile-bar__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .ffn-pf-mobile-bar__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0.34rem 0.12rem;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }
  .ffn-pf-mobile-bar__cell:first-child { border-left: 0; }
  .ffn-pf-mobile-bar__label {
    font-size: 0.54rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.8;
    line-height: 1;
  }
  .ffn-pf-mobile-bar__value {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
  }
  .ffn-pf-mobile-bar__label .ffn-pf-info-dot {
    width: 10px;
    height: 10px;
    margin-left: 0.1em;
    vertical-align: -1px;
  }

  .ffn-pf-mobile-bar__ship {
    padding: 0.18rem 0.6rem 0.26rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ffn-white);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
  }
}

/* ── Product-page compatibility badge ───────────────────────── */
/* Solid traffic-light backgrounds, white text (brand-style.md). */

/* "Will this grow for you?" box — a neutral white card with a per-factor
   traffic-light table. The overall verdict shows as a colored left border +
   the header icon (not a fully colored background, so the lights read clearly). */
.ffn-pf-badge {
  border-radius: var(--ffn-radius);
  padding: 0.6rem;
  margin: 0.75rem 0 1rem;
  background: var(--ffn-white);
  color: var(--ffn-ink);
  border: 1px solid var(--ffn-border);
  border-top-width: 4px;
  font-family: var(--ffn-font);
  font-size: 0.84rem;
}

.ffn-pf-badge--loading {
  color: var(--ffn-slate-dark);
  animation: ffn-pulse 1.5s ease-in-out infinite;
}

.ffn-pf-badge--green   { border-top-color: #3aa64a; }
.ffn-pf-badge--amber   { border-top-color: #e0a92b; }
.ffn-pf-badge--red     { border-top-color: #c0392b; }
.ffn-pf-badge--unknown { border-top-color: var(--ffn-border); }

.ffn-pf-badge__header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ffn-ink);
  padding-bottom: 0.45rem;
}
.ffn-pf-badge__icon { font-size: 1.15em; line-height: 1; }

.ffn-pf-badge__rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.32rem;
}
.ffn-pf-badge__row {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.4rem 0.34rem;
  border: 1px solid #eef0f2;
  border-radius: var(--ffn-radius);
  background: var(--ffn-bg-light);
}
.ffn-pf-badge__row + .ffn-pf-badge__row { border-top: 1px solid #eef0f2; }
.ffn-pf-badge__light {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border-radius: 50%;
  background: #cfd6dd;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ffn-pf-badge__light--green   { background: #3aa64a; }
.ffn-pf-badge__light--amber   { background: #e0a92b; }
.ffn-pf-badge__light--red     { background: #c0392b; }
.ffn-pf-badge__light--unknown { background: #cfd6dd; }
/* metric name + sub-detail stacked; status word on the right */
.ffn-pf-badge__rowmain {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ffn-pf-badge__metric {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ffn-ink);
  line-height: 1.15;
  white-space: nowrap;
}
.ffn-pf-badge__detail { font-size: 0.74rem; color: var(--ffn-slate-dark); line-height: 1.25; }
.ffn-pf-badge__status {
  flex: 0 0 auto;
  display: none;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
.ffn-pf-badge__status--green { color: #2f9a40; }
.ffn-pf-badge__status--amber { color: #cf8412; }
.ffn-pf-badge__status--red   { color: #c0392b; }
.ffn-pf-badge__status--na    { display: none; }

.ffn-pf-badge__no-profile { margin-top: 0.5rem; font-size: 0.85rem; }
.ffn-pf-badge__set-location { color: var(--ffn-link); text-decoration: underline; }

@media (max-width: 720px) {
  .ffn-pf-badge__rows {
    grid-template-columns: 1fr;
  }
}

/* ── Per-card badge: Zone / Chill / Heat traffic-light bar ──────────────────
   A 3-segment bar flush to the bottom edge of each product card. The negative
   margins pull it out past the card's own padding so it bleeds to the edges. */
.ffn-pf-card-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 1.1rem);
  min-height: 28px;
  padding: 0.32rem 0.52rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: var(--ffn-slate-dark);
  color: var(--ffn-white);
  box-shadow: 0 1px 4px rgba(44, 62, 80, 0.2);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.ffn-pf-card-badge--loading { display: none; }
.ffn-pf-card-badge__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ffn-pf-card-badge--green   { background: var(--ffn-green-dark); }
.ffn-pf-card-badge--amber   { background: var(--ffn-amber); }
.ffn-pf-card-badge--red     { background: var(--ffn-brick-red); }
.ffn-pf-card-badge--unknown { background: var(--ffn-slate-dark); }

.ffn-pf-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.45rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: var(--ffn-slate-dark);
  color: var(--ffn-white);
  font-family: var(--ffn-font);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}
.ffn-pf-cart-badge--loading { display: none; }
.ffn-pf-cart-badge--green   { background: var(--ffn-green-dark); }
.ffn-pf-cart-badge--amber   { background: var(--ffn-amber); }
.ffn-pf-cart-badge--red     { background: var(--ffn-brick-red); }
.ffn-pf-cart-badge--unknown { background: var(--ffn-slate-dark); }

.single-product .woocommerce-product-gallery.ffn-pf-product-gallery-badged {
  position: relative;
}
.ffn-pf-product-image-badge:not(.ffn-pf-product-image-badge--placed) {
  display: none !important;
}
.single-product .woocommerce-product-gallery .ffn-pf-product-image-badge {
  top: 0.72rem;
  right: 0.72rem;
  z-index: 8;
  min-height: 30px;
  padding: 0.38rem 0.62rem;
  font-size: 0.74rem;
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.24);
}

.woocommerce ul.products li.product,
ul.products li.product {
  position: relative;
  overflow: hidden;
}
.woocommerce ul.products li.product .ct-woo-card-actions,
ul.products li.product .ct-woo-card-actions {
  margin-bottom: 0;
}
.woocommerce ul.products li.product .price,
ul.products li.product .price {
  margin-bottom: 0.15rem;
}

/* ── Dashboard ─────────────────────────────────────────────── */

.ffn-pf-home {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 2rem;
}

.ffn-pf-home__top {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid var(--ffn-border);
}

.ffn-pf-kicker {
  margin: 0 0 0.35rem;
  color: var(--ffn-green-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ffn-pf-home__title {
  margin: 0;
  color: var(--ffn-green-dark);
  font-family: var(--ffn-font);
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1.03;
  letter-spacing: 0;
}

.ffn-pf-home__lede {
  max-width: 43rem;
  margin: 0.7rem 0 1rem;
  color: var(--ffn-ink);
  font-size: 1.05rem;
  line-height: 1.5;
}

.ffn-pf-home__intro .ffn-pf-location-capture {
  margin: 0;
}

.ffn-pf-home__intro .ffn-pf-location-active,
.ffn-pf-home__intro .ffn-pf-zip-feedback--success {
  display: none !important;
}

.ffn-pf-home__profile {
  min-width: 0;
}

.ffn-pf-home__profile .ffn-pf-climate-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
}

.ffn-pf-home__profile .ffn-pf-climate-card > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 4.75rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--ffn-radius-chip);
  text-align: center;
}

.ffn-pf-home__profile .ffn-pf-climate-card__zip {
  background: var(--ffn-green-dark);
  color: var(--ffn-white);
}

.ffn-pf-home__profile .ffn-pf-climate-card__zip .ffn-pf-label,
.ffn-pf-home__profile .ffn-pf-climate-card__zip .ffn-pf-profile-value {
  color: var(--ffn-white);
}

.ffn-pf-home__profile .ffn-pf-climate-card [data-ffn-pf$="-display"],
.ffn-pf-profile-value {
  color: var(--ffn-green-dark);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
}

.ffn-pf-home__profile .ffn-pf-climate-card__zip [data-ffn-pf="zip-display"],
.ffn-pf-home__profile .ffn-pf-climate-card__zip .ffn-pf-profile-value {
  color: var(--ffn-white) !important;
}

.ffn-pf-home__profile .ffn-pf-climate-card__zip .ffn-pf-profile-change {
  color: var(--ffn-white) !important;
}

.ffn-pf-profile-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.ffn-pf-profile-change {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--ffn-font);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ffn-pf-home__empty {
  border: 1px solid var(--ffn-border);
  background: var(--ffn-bg-light);
  border-radius: var(--ffn-radius);
  padding: 1rem;
}

.ffn-pf-home__empty-title {
  color: var(--ffn-green-dark);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.ffn-pf-home__empty-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.ffn-pf-home__empty-grid span {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius-chip);
  color: var(--ffn-slate-dark);
  background: var(--ffn-white);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ffn-pf-home__layers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ffn-border);
}

.ffn-pf-layer-chip {
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-bg-light);
  color: var(--ffn-ink);
  cursor: pointer;
  font-family: var(--ffn-font);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.48rem 0.7rem;
}

.ffn-pf-layer-chip:hover,
.ffn-pf-layer-chip--active {
  border-color: var(--ffn-green-dark);
  background: var(--ffn-green-dark);
  color: var(--ffn-white);
}

@media (max-width: 800px) {
  .ffn-pf-home__top {
    grid-template-columns: 1fr;
  }
  .ffn-pf-home__empty-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .ffn-pf-home__profile .ffn-pf-climate-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.75rem;
  }
  .ffn-pf-home__profile .ffn-pf-climate-card > div {
    min-height: 4.25rem;
    padding: 0.6rem;
  }
  .ffn-pf-home__profile .ffn-pf-climate-card [data-ffn-pf$="-display"],
  .ffn-pf-profile-value {
    font-size: 1.25rem;
  }
}

.ffn-pf-dashboard {
  font-family: var(--ffn-font);
  color: var(--ffn-ink);
  max-width: 900px;
  margin: 0 auto;
}

.ffn-pf-climate-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  background: var(--ffn-blue-soft);
  color: var(--ffn-ink);
  border-radius: var(--ffn-radius);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}

.ffn-pf-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ffn-slate-dark);
  margin-bottom: 0.2rem;
}

.ffn-pf-zone-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ffn-green-dark);
}
.ffn-pf-chill-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ffn-green-dark);
}

.ffn-pf-hint { color: var(--ffn-slate-dark); font-style: italic; }

/* ── Catalog (dashboard plant grid + filters) ──────────────── */

.ffn-pf-catalog {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.5rem;
  margin-top: 1.25rem;
  align-items: start;
}
@media (max-width: 760px) {
  .ffn-pf-catalog { grid-template-columns: 1fr; }
}

/* Filters */
.ffn-pf-catalog__filters {
  font-size: 0.85rem;
  background: var(--ffn-bg-light);
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius);
  padding: 0.75rem 0.9rem;
  position: sticky;
  top: 1rem;
}

.ffn-pf-filter__loading,
.ffn-pf-catalog__empty {
  color: var(--ffn-slate-dark);
  font-size: 0.9rem;
  padding: 0.75rem;
}

.ffn-pf-filter {
  border: none;
  border-top: 1px solid var(--ffn-border);
  padding: 0.6rem 0 0.4rem;
  margin: 0;
}
.ffn-pf-filter:first-of-type { border-top: none; }

.ffn-pf-filter legend {
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ffn-green-dark);
  padding: 0;
  margin-bottom: 0.3rem;
}

.ffn-pf-filter__opt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.3rem;
  margin: 0 -0.3rem;
  border-radius: var(--ffn-radius-chip);
  color: var(--ffn-ink);
  cursor: pointer;
}
.ffn-pf-filter__opt input { margin: 0; accent-color: var(--ffn-green-dark); }
.ffn-pf-filter__opt:hover { background: var(--ffn-blue-wash); }
.ffn-pf-filter__opt:has(input:checked) {
  background: var(--ffn-green-dark);
  color: var(--ffn-white);
}

/* WooCommerce sidebar Plant Finder filters. */
.ffn-pf-shop-filter {
  font-family: var(--ffn-font);
  color: var(--ffn-ink);
  font-size: 0.9rem;
}
.ffn-pf-shop-filter__top-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.45rem;
}
.ffn-pf-shop-filter__profile {
  margin: 0 0 0.7rem;
  padding: 0;
  border: 1px solid rgba(65, 81, 97, 0.24);
  border-radius: var(--ffn-radius);
  background: var(--ffn-green-light);
  color: var(--ffn-ink);
  line-height: 1.25;
  overflow: hidden;
}
.ffn-pf-shop-filter__profile-kicker {
  margin: 0;
  padding: 0.45rem 0.55rem 0.08rem;
  color: var(--ffn-green-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ffn-pf-shop-filter__profile-title {
  margin: 0;
  padding: 0 0.55rem 0.45rem;
  color: var(--ffn-ink);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.18;
}
.ffn-pf-shop-filter__paused-copy {
  margin: 0;
  color: var(--ffn-slate-dark);
  font-size: 0.82rem;
  line-height: 1.35;
}
.ffn-pf-shop-filter__profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(65, 81, 97, 0.18);
}
.ffn-pf-shop-filter__profile-grid > span {
  display: block;
  min-width: 0;
  padding: 0.42rem 0.32rem;
  border-left: 1px solid rgba(65, 81, 97, 0.18);
  background: transparent;
  text-align: center;
}
.ffn-pf-shop-filter__profile-grid > span:first-child {
  border-left: 0;
}
.ffn-pf-shop-filter__profile-grid em {
  display: block;
  margin-bottom: 0.08rem;
  color: var(--ffn-slate-dark);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}
.ffn-pf-shop-filter__profile-grid strong {
  display: block;
  overflow: hidden;
  color: var(--ffn-green-dark);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ffn-pf-shop-filter__profile-grid strong.ffn-pf-shop-filter__zip-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  overflow: visible;
}
.ffn-pf-shop-filter__zip-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ffn-pf-shop-filter__profile.is-empty .ffn-pf-shop-filter__profile-grid strong {
  color: var(--ffn-slate-dark);
}
.ffn-pf-shop-filter__inline-change {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--ffn-link);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ffn-pf-shop-filter__inline-change:hover,
.ffn-pf-shop-filter__inline-change:focus {
  color: var(--ffn-green-dark);
}
.ffn-pf-shop-filter__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -0.15rem 0 0.55rem;
}
.ffn-pf-shop-filter__status {
  min-width: 0;
  color: var(--ffn-slate-dark);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
}
.ffn-pf-shop-filter__group {
  margin: 0;
  padding: 0.65rem 0 0.55rem;
  border: 0;
  border-top: 1px solid var(--ffn-border);
}
.ffn-pf-shop-filter__group:first-of-type { border-top: 0; padding-top: 0; }
.ffn-pf-shop-filter__group legend {
  margin: 0 0 0.35rem;
  padding: 0;
  color: var(--ffn-green-dark);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ffn-pf-shop-filter__opt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 30px;
  margin: 0 -0.3rem;
  padding: 0.18rem 0.3rem;
  border-radius: var(--ffn-radius-chip);
  color: var(--ffn-ink);
  cursor: pointer;
  line-height: 1.2;
}
.ffn-pf-shop-filter__opt[hidden],
.ffn-pf-shop-filter__group[hidden],
.ffn-pf-shop-filter__opt--zero {
  display: none !important;
}
.ffn-pf-shop-filter__opt input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--ffn-green-dark);
}
.ffn-pf-shop-filter__opt-count {
  color: var(--ffn-slate-dark);
  font-size: 0.82em;
  font-weight: 600;
  margin-left: 0.12rem;
}
.ffn-pf-shop-filter__opt:hover { background: var(--ffn-blue-wash); }
.ffn-pf-shop-filter__opt:has(input:checked) {
  background: var(--ffn-green-dark);
  color: var(--ffn-white);
}
.ffn-pf-shop-filter__opt:has(input:checked) .ffn-pf-shop-filter__opt-count {
  color: rgba(255, 255, 255, 0.82);
}
.ffn-pf-shop-filter__opt:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.58;
}
.ffn-pf-shop-filter__opt--featured {
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--ffn-border);
  background: var(--ffn-bg-light);
  font-weight: 700;
}
.ffn-pf-shop-filter__opt--featured:has(input:checked) {
  border-color: var(--ffn-green-dark);
}
.ffn-pf-shop-filter__zip-btn {
  width: 100%;
  margin-top: 0.45rem;
  border: 1px solid var(--ffn-green-dark);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-white);
  color: var(--ffn-green-dark);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.45rem 0.6rem;
}
.ffn-pf-shop-filter__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.ffn-pf-shop-filter__apply {
  flex: 1 1 auto;
  border: 1px solid var(--ffn-green-dark);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-green-dark);
  color: var(--ffn-white);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.55rem 0.75rem;
}
.ffn-pf-shop-filter__clear {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--ffn-link);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ffn-pf-shop-filter__clear:hover,
.ffn-pf-shop-filter__clear:focus {
  color: var(--ffn-green-dark);
}
.ffn-pf-shop-filter__submit-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ffn-pf-shop-filter__range-group {
  display: block;
}
.ffn-pf-shop-filter__range-group[hidden] {
  display: none;
}
.ffn-pf-shop-filter__range-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--ffn-ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}
.ffn-pf-shop-filter__range-label output {
  color: var(--ffn-green-dark);
  font-size: 0.78rem;
  white-space: nowrap;
}
.ffn-pf-shop-filter__range {
  width: 100%;
  height: 24px;
  margin: 0.3rem 0 0;
  accent-color: var(--ffn-green-dark);
}
.ffn-pf-shop-filter__range::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-bg-light);
}
.ffn-pf-shop-filter__range::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 2px solid var(--ffn-white);
  border-radius: 50%;
  background: var(--ffn-green-dark);
}
.ffn-pf-shop-filter__range::-moz-range-track {
  height: 6px;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-bg-light);
}
.ffn-pf-shop-filter__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ffn-white);
  border-radius: 50%;
  background: var(--ffn-green-dark);
}
.ffn-pf-shop-filter__hint {
  margin: 0.25rem 0 0;
  color: var(--ffn-slate-dark);
  font-size: 0.76rem;
  line-height: 1.35;
}
.ffn-pf-shop-filter__status {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--ffn-border);
  color: var(--ffn-slate-dark);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}
.ffn-pf-shop-filter__summary .ffn-pf-shop-filter__status {
  margin: 0;
  padding: 0;
  border-top: 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
}
.ffn-pf-shop-filter__empty {
  width: 100%;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius);
  background: var(--ffn-blue-soft);
  color: var(--ffn-ink);
  list-style: none;
}
.ffn-pf-shop-filter__loadmore {
  margin-top: 1.25rem;
}

.ffn-pf-product-companion {
  font-family: var(--ffn-font);
  color: var(--ffn-ink);
  font-size: 0.9rem;
  line-height: 1.3;
}
.ffn-pf-product-companion__kicker,
.ffn-pf-product-companion__similar-title {
  color: var(--ffn-green-dark);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ffn-pf-product-companion__title {
  margin: 0.18rem 0 0.65rem;
  color: var(--ffn-ink);
  font-family: var(--ffn-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}
.ffn-pf-product-companion__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0 0 0.7rem;
  padding: 0.65rem;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius);
  background: var(--ffn-blue-soft);
}
.ffn-pf-product-companion__facts span {
  min-width: 0;
  padding: 0.38rem 0.45rem;
  border: 1px solid rgba(65, 81, 97, 0.22);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-white);
}
.ffn-pf-product-companion__facts em {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--ffn-slate-dark);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}
.ffn-pf-product-companion__facts strong {
  display: block;
  overflow: hidden;
  color: var(--ffn-green-dark);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
}
.ffn-pf-product-companion__actions {
  display: grid;
  gap: 0.42rem;
  margin: 0 0 0.75rem;
}
.ffn-pf-product-companion__button,
.ffn-pf-product-companion__location {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--ffn-green-dark);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-green-dark);
  color: var(--ffn-white);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.48rem 0.65rem;
  text-align: center;
  text-decoration: none;
}
.ffn-pf-product-companion__button:hover,
.ffn-pf-product-companion__button:focus,
.ffn-pf-product-companion__location:hover,
.ffn-pf-product-companion__location:focus {
  color: var(--ffn-white);
  text-decoration: none;
}
.ffn-pf-product-companion__button--secondary,
.ffn-pf-product-companion__location {
  background: var(--ffn-white);
  color: var(--ffn-green-dark);
}
.ffn-pf-product-companion__button--secondary:hover,
.ffn-pf-product-companion__button--secondary:focus,
.ffn-pf-product-companion__location:hover,
.ffn-pf-product-companion__location:focus {
  color: var(--ffn-green-dark);
}
.ffn-pf-product-companion__similar {
  margin: 0 0 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--ffn-border);
}
.ffn-pf-product-companion__similar ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}
.ffn-pf-product-companion__similar li {
  min-width: 0;
  padding: 0;
}
.ffn-pf-product-companion__similar-card {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  color: var(--ffn-link);
  text-decoration: none;
}
.ffn-pf-product-companion__similar-card:hover,
.ffn-pf-product-companion__similar-card:focus {
  color: var(--ffn-link);
  text-decoration: none;
}
.ffn-pf-product-companion__similar-media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-white);
}
.ffn-pf-product-companion__similar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ffn-pf-product-companion__similar-name {
  color: var(--ffn-link);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
}
.ffn-pf-product-companion__similar-price {
  color: var(--ffn-slate-dark);
  font-size: 0.76rem;
  line-height: 1.15;
}
.ffn-pf-product-companion__location {
  width: 100%;
}

/* Catalog bar */
.ffn-pf-catalog__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ffn-border);
}

.ffn-pf-catalog__heading {
  margin: 0;
  color: var(--ffn-green-dark);
  font-family: var(--ffn-font);
  font-size: 1.25rem;
  line-height: 1.2;
}

.ffn-pf-catalog__subhead {
  margin: 0.2rem 0 0;
  color: var(--ffn-slate-dark);
  font-size: 0.9rem;
}

.ffn-pf-catalog__count {
  font-size: 0.85rem;
  color: var(--ffn-slate-dark);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* Grid */
.ffn-pf-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 1rem;
}

/* Card — flat: border + bg only, no shadow */
.ffn-pf-card {
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ffn-white);
  transition: border-color 0.15s;
}
.ffn-pf-card:hover { border-color: var(--ffn-green-dark); }

.ffn-pf-card__thumb {
  font-size: 3rem;
  text-align: center;
  padding: 1rem 0 0.5rem;
  background: var(--ffn-bg-light);
}

.ffn-pf-card__body {
  padding: 0.7rem 0.8rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.ffn-pf-card__name { font-size: 0.95rem; font-weight: 700; margin: 0; line-height: 1.25; color: var(--ffn-ink); }
.ffn-pf-card__meta { font-size: 0.75rem; color: var(--ffn-slate-dark); line-height: 1.3; }

.ffn-pf-card__verdict {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: var(--ffn-radius-chip);
}

.ffn-pf-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.35rem;
}
.ffn-pf-card__price { font-weight: 700; font-size: 0.9rem; color: var(--ffn-ink); }

.ffn-pf-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}
.ffn-pf-tag--stock { background: var(--ffn-green-light); color: var(--ffn-green-dark); }
.ffn-pf-tag--out   { background: var(--ffn-bg-light);    color: var(--ffn-slate-dark); border: 1px solid var(--ffn-border); }
.ffn-pf-tag--info  { background: var(--ffn-blue-soft);   color: var(--ffn-ink); }

/* Dashboard widens when the catalog is present */
.ffn-pf-dashboard:has(.ffn-pf-catalog) { max-width: 1100px; }
.ffn-pf-dashboard.ffn-pf-home,
.ffn-pf-dashboard.ffn-pf-home:has(.ffn-pf-catalog) { max-width: 1180px; }

/* ── Attribution (USDA PHZM / OSU terms — logos required) ──── */
.ffn-pf-attribution {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ffn-border);
  font-size: 0.75rem;
  color: var(--ffn-slate-dark);
}
.ffn-pf-attribution__logos {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}
.ffn-pf-attribution__logo {
  height: 34px;
  width: auto;
  display: block;
}
.ffn-pf-attribution__text {
  margin: 0;
  line-height: 1.45;
  max-width: 640px;
}

/* ── Native WooCommerce cards in the finder ────────────────── */
/* The theme's product-grid CSS only loads on shop/archive pages, so we
   replicate the card look here (grid + white rounded card + shadow). */

/* In real mode the grid holds ONE <ul class="products"> that does its own grid,
   so the outer container must be block (it's a grid only for demo cards). */
.ffn-pf-catalog__grid:has(ul.products) { display: block; }
.ffn-pf-catalog__grid .woocommerce { width: 100%; }

.ffn-pf-catalog__grid ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ffn-pf-catalog__grid ul.products li.product {
  list-style: none;
  margin: 0;
  float: none;
  width: auto;
  background: var(--ffn-white);
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius);
  box-shadow: none;
  overflow: hidden;
  text-align: center;
  padding: 0 0 1.1rem;
  display: flex;
  flex-direction: column;
}
.ffn-pf-catalog__grid ul.products li.product img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 0.7rem;
}
.ffn-pf-catalog__grid ul.products li.product h2,
.ffn-pf-catalog__grid ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  line-height: 1.25;
  padding: 0 0.9rem;
  margin: 0.2rem 0;
}
.ffn-pf-catalog__grid ul.products li.product .price {
  display: block;
  margin: 0.35rem 0;
  font-weight: 700;
}
.ffn-pf-catalog__grid ul.products li.product .ffn-pf-card-badge {
  margin: 0;
}
.ffn-pf-catalog__grid ul.products li.product .button,
.ffn-pf-catalog__grid ul.products li.product .added_to_cart {
  margin: 0.3rem 0.9rem 0;
  display: inline-block;
}

.ffn-pf-loadmore {
  display: block;
  margin: 1.5rem auto 0;
  min-width: 160px;
  justify-content: center;
}
.ffn-pf-archive-infinite-ready .woocommerce-pagination {
  display: none !important;
}
.ffn-pf-archive-loader {
  display: block;
  width: fit-content;
  min-width: 170px;
  margin: 1.5rem auto 0;
  padding: 0.65rem 1rem;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius);
  background: var(--ffn-white);
  color: var(--ffn-green-dark);
  font-weight: 700;
  text-align: center;
}
.ffn-pf-archive-loader[hidden] {
  display: none !important;
}

/* The whole sidebar WIDGET (its "Find plants for your area" title + the pills)
   sits on white, edge-to-edge across the sidebar — so it stands apart from the
   colored sidebar background, while the filters below stay on that color.
   !important overrides the theme's per-widget background (Blocksy sets it via a
   higher-specificity CSS variable, which otherwise keeps the widget blue). */
.ffn-pf-widget {
  background: var(--ffn-white) !important;
  border-radius: 14px;
  padding: 0.75rem 1rem 1rem;
}

/* ── Compact panel (sidebar widget / auto-inject) ──────────────────────
   Layout = three SEPARATE rounded boxes on a light-green sidebar field:
     ┌──────────────────────────────┐   ← light-green panel (--ffn-header-green)
     │ ┌──────────────────────────┐ │
     │ │ 72774          Change    │ │  ← green box, ZIP enlarged, Change inside
     │ └──────────────────────────┘ │
     │ ┌──────────────────────────┐ │
     │ │ Hardiness Zone       7b  │ │  ← bg set per-zone to the USDA map color (JS)
     │ └──────────────────────────┘ │
     │ ┌──────────────────────────┐ │
     │ │ Chill Hours        1395  │ │  ← soft-blue box
     │ └──────────────────────────┘ │
     └──────────────────────────────┘
   Each box is label-left / value-right so the labels read at full size. */
.ffn-pf-panel--compact {
  max-width: 100%;
  margin: 0;
  /* White, edge-to-edge: each colored pill (esp. the per-zone USDA color) reads
     clearly against white no matter which color the zone resolves to. */
  background: var(--ffn-white);
  padding: 0;
  border-radius: 0;
}

/* Small gap between the ZIP box (in .location-capture) and the stat boxes. */
.ffn-pf-panel--compact .ffn-pf-location-capture { margin: 0 0 0.5rem; }
.ffn-pf-panel--compact .ffn-pf-climate-card { margin: 0; }

/* Top box = a pill like the others: "ZIP" label on the left, the ZIP code on the
   right, underlined to signal it's clickable (it re-opens the entry form). The
   "ZIP" label only appears in the compact widget; the "Change" button is dropped
   here in favour of the underlined value. */
.ffn-pf-zip-label { display: none; }
.ffn-pf-panel--compact .ffn-pf-zone-chip,
.ffn-pf-panel--compact .ffn-pf-chill-chip,
.ffn-pf-panel--compact .ffn-pf-location-active .ffn-pf-btn--text { display: none; }
.ffn-pf-panel--compact .ffn-pf-location-active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.65rem 0.8rem;
  background: var(--ffn-green-dark);
  border-radius: 14px;
}
.ffn-pf-panel--compact .ffn-pf-zip-label {
  display: inline;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ffn-white);
}
.ffn-pf-panel--compact .ffn-pf-zip-chip {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ffn-white);
  background: none;
  padding: 0;
  margin: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Stat boxes = single column, each a separate rounded box with a small gap,
   label-left / value-right. */
.ffn-pf-panel--compact .ffn-pf-climate-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  grid-template-columns: none;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.ffn-pf-panel--compact .ffn-pf-climate-card > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  background: var(--ffn-white);
  border-radius: 14px;
  padding: 0.65rem 0.8rem;
}
/* Chill box reads soft-blue; the zone box bg is set per-zone in JS to the
   official USDA map color (see USDA_ZONE_COLORS in ffn-plant-finder.js).
   NOTE: qualify with the parent (`> .__chill` = 0,3,0) so it out-ranks the
   `.ffn-pf-climate-card > div` white-bg rule above (0,2,1) — same specificity
   trap that the frost-hide rule has to dodge. */
.ffn-pf-panel--compact .ffn-pf-climate-card > .ffn-pf-climate-card__chill {
  background: var(--ffn-blue-soft);
}
/* Heat = the 4th pill, soft warm amber (qualified to beat the white-bg rule). */
.ffn-pf-panel--compact .ffn-pf-climate-card > .ffn-pf-climate-card__heat {
  background: #f3dca6;
}
.ffn-pf-panel--compact .ffn-pf-climate-card .ffn-pf-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ffn-ink);
  margin: 0;
  line-height: 1.2;
}
.ffn-pf-panel--compact .ffn-pf-climate-card [data-ffn-pf$="-display"] {
  color: var(--ffn-green-dark);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.1;
  text-align: right;
}
/* Sidebar widget shows ZIP + Zone + Chill + Heat (4 pills). The frost dates +
   frost-free season stay hidden here — they live on the dedicated Plant Finder
   page. NOTE: the `.ffn-pf-climate-card > div` rule above (specificity 0,2,1)
   would otherwise out-rank a bare `.__frost` hide (0,2,0), so we qualify with
   the parent class (`> .ffn-pf-climate-card__frost` = 0,3,0). */
.ffn-pf-panel--compact .ffn-pf-climate-card > .ffn-pf-climate-card__frost,
.ffn-pf-panel--compact .ffn-pf-climate-card > .ffn-pf-climate-card__season { display: none; }
/* Version tag is for deploy confirmation (also in WP Admin) — hide on the customer-facing widget. */
.ffn-pf-panel--compact .ffn-pf-version { display: none; }

/* Guide sidebar widget: a climate-aware companion for growing-guide pages. */
/* 0.2.162: let the blue fill the whole sidebar column. The theme widget wrapper
   adds 20px each side, which kept the card ~34px narrower than the product-page
   card. Zeroing it (scoped with :has, so nothing else is affected) puts the
   guide card at ~256px against the product card's 254px — true parity. */
.ct-widget:has(> .ffn-pf-guide-widget),
.widget:has(> .ffn-pf-guide-widget) {
  /* !important is deliberate: Blocksy sets this with
     aside[data-type="type-2"] .ct-sidebar[data-widgets="separated"] .ct-widget
     (0,4,1), which outguns any selector we can reasonably write. */
  padding: 0 !important;
}
.ffn-pf-guide-widget {
  background: var(--ffn-blue-soft);
  padding: 1rem;
  color: var(--ffn-ink);
}
/* One-line climate readout, styled to mirror the header climate bar
   (.ffn-pf-header-bar) — uppercase label over a bold green value, in a single
   green-light bar. Padding is a touch tighter than the header's so four cells
   fit a 256px sidebar column. */
.ffn-pf-guide-widget__climate {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  margin: 0 0 0.7rem;
  padding: 0;
  border: 1px solid rgba(65, 81, 97, 0.22);
  border-radius: 3px;
  background: var(--ffn-green-light);
  line-height: 1.15;
}
.ffn-pf-guide-widget__cell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  padding: 0.2rem 0.35rem;
  border-radius: 2px;
}
.ffn-pf-guide-widget__cell-label {
  display: block;
  color: var(--ffn-slate);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ffn-pf-guide-widget__cell-value {
  display: block;
  color: var(--ffn-green-dark);
  font-size: 0.95rem;
  font-weight: 700;
}
.ffn-pf-guide-widget__card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.ffn-pf-guide-widget__kicker {
  margin: 0 0 0.35rem;
  color: var(--ffn-green-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ffn-pf-guide-widget__title {
  margin: 0 0 0.5rem;
  color: var(--ffn-ink);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.15;
}
.ffn-pf-guide-widget__intro {
  margin: 0 0 0.85rem;
  color: var(--ffn-slate);
  font-size: 0.95rem;
  line-height: 1.45;
}
.ffn-pf-guide-widget__profile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}
.ffn-pf-guide-widget__profile > div {
  background: var(--ffn-blue-soft);
  border-radius: var(--ffn-radius-chip);
  padding: 0.5rem 0.55rem;
  text-align: center;
}
.ffn-pf-guide-widget__profile span {
  display: block;
  color: var(--ffn-slate-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ffn-pf-guide-widget__profile strong {
  display: block;
  margin-top: 0.12rem;
  color: var(--ffn-green-dark);
  font-size: 1.05rem;
  line-height: 1.1;
}
.ffn-pf-guide-widget__form {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}
.ffn-pf-guide-widget__form input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius-chip);
  padding: 0.55rem 0.7rem;
  color: var(--ffn-ink);
  background: var(--ffn-white);
}
.ffn-pf-guide-widget__form .ffn-pf-btn {
  width: 100%;
  justify-content: center;
}
.ffn-pf-guide-widget__feedback {
  min-height: 1rem;
  color: var(--ffn-slate);
  font-size: 0.82rem;
}
.ffn-pf-guide-widget__matches {
  margin: 0 0 0.85rem;
  color: var(--ffn-slate-dark);
  font-size: 0.9rem;
}
.ffn-pf-guide-widget__matches-title {
  margin: 0 0 0.35rem;
  color: var(--ffn-green-dark);
  font-weight: 800;
}
.ffn-pf-guide-widget__matches ul {
  margin: 0;
  padding-left: 1.1rem;
}
.ffn-pf-guide-widget__matches li + li {
  margin-top: 0.2rem;
}
.ffn-pf-guide-widget__matches a {
  color: var(--ffn-green-dark);
  font-weight: 700;
  text-decoration: none;
}
.ffn-pf-guide-widget__matches a:hover,
.ffn-pf-guide-widget__matches a:focus {
  text-decoration: underline;
}
/* Guide pick cards (0.2.160) — deliberately identical in anatomy to the
   product-page recommendation cards (.ffn-pf-product-recs__card) so the two
   surfaces read as one system. Selectors are specific and reset list styling
   explicitly, because a stale optimizer-substituted stylesheet would otherwise
   leave raw bullets and inline text (the 0.2.156 failure, seen again on
   0.2.159 guides). The matching wp_head guard is the real defence. */
.ffn-pf-guide-widget__matches-note {
  margin: 0 0 0.5rem;
  color: var(--ffn-slate);
  font-size: 0.84rem;
  line-height: 1.4;
}
.ffn-pf-guide-widget__matches ul.ffn-pf-guide-widget__picks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.58rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ffn-pf-guide-widget__matches li.ffn-pf-guide-widget__item {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ffn-pf-guide-widget__matches .ffn-pf-guide-widget__pick-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.68rem;
  align-items: center;
  box-sizing: border-box;
  min-height: 86px;
  padding: 0.42rem;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-bg-light);
  color: var(--ffn-ink);
  font-weight: 400;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ffn-pf-guide-widget__matches .ffn-pf-guide-widget__pick-card:hover,
.ffn-pf-guide-widget__matches .ffn-pf-guide-widget__pick-card:focus-visible {
  border-color: var(--ffn-green-dark);
  background: var(--ffn-blue-wash);
  color: var(--ffn-ink);
  text-decoration: none;
}
.ffn-pf-guide-widget__matches .ffn-pf-guide-widget__image {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-green-light);
  object-fit: cover;
}
.ffn-pf-guide-widget__matches .ffn-pf-guide-widget__image--fallback {
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}
.ffn-pf-guide-widget__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.42rem;
}
.ffn-pf-guide-widget__name {
  display: block;
  color: var(--ffn-ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.24;
}
.ffn-pf-guide-widget__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.ffn-pf-guide-widget__price {
  color: var(--ffn-slate-dark);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}
.ffn-pf-guide-widget__fit {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--ffn-radius-chip);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
}
.ffn-pf-guide-widget__fit--green { background: var(--ffn-green-dark); color: var(--ffn-white); }
.ffn-pf-guide-widget__fit--amber { background: var(--ffn-amber); color: var(--ffn-white); }
.ffn-pf-guide-widget__pollen {
  color: var(--ffn-slate);
  font-size: 0.75rem;
  line-height: 1.3;
}

/* ── Pre-order offer block (0.2.161) ───────────────────────────────────────
   Guide traffic is year-round pre-order traffic (GA4 audit 2026-08-08): the
   ship date is the strongest conversion asset on the site and previously only
   appeared at checkout. This block leads the widget, ABOVE the ZIP form. */
.ffn-pf-guide-widget__offer {
  margin: 0 0 0.85rem;
  padding: 0.7rem;
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-white);
}
.ffn-pf-guide-widget__ship {
  margin: 0 0 0.3rem;
  color: var(--ffn-ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.32;
}
.ffn-pf-guide-widget__stock {
  margin: 0 0 0.6rem;
  color: var(--ffn-slate);
  font-size: 0.78rem;
  line-height: 1.35;
}
.ffn-pf-guide-widget__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-green-dark);
  color: var(--ffn-white) !important;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.ffn-pf-guide-widget__cta:hover,
.ffn-pf-guide-widget__cta:focus {
  background: #0a6c28;
  color: var(--ffn-white) !important;
}
.ffn-pf-guide-widget__cta--secondary { background: var(--ffn-green); }
.ffn-pf-guide-widget__alt {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--ffn-green-dark);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ffn-pf-guide-widget__alt--primary {
  min-height: 42px;
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-green-dark);
  color: var(--ffn-white);
  text-decoration: none;
}
.ffn-pf-guide-widget__email { margin-top: 0.6rem; }
.ffn-pf-guide-widget__email .fluentform { font-size: 0.85rem; }
.ffn-pf-guide-widget__note { margin: 0; color: var(--ffn-slate); font-size: 0.78rem; }
.ffn-pf-guide-widget__actions {
  display: grid;
  gap: 0.45rem;
}
.ffn-pf-guide-widget__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-green-dark);
  color: var(--ffn-white) !important;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.ffn-pf-guide-widget__button:hover,
.ffn-pf-guide-widget__button:focus {
  background: #0a6c28;
  color: var(--ffn-white) !important;
}
.ffn-pf-guide-widget__button--secondary {
  background: var(--ffn-green);
}
.ffn-pf-guide-widget__version {
  margin-top: 0.7rem;
  color: var(--ffn-slate);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: right;
  opacity: 0.75;
}

/* ── Version tag ────────────────────────────────────────────── */
.ffn-pf-version {
  margin-top: 0.75rem;
  text-align: right;
  font-size: 0.7rem;
  color: #aab;
  letter-spacing: 0.02em;
}

.ffn-pf-home > .ffn-pf-version {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-white);
  color: var(--ffn-slate-dark);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
}

/* ── Metric info: ⓘ dot + tap affordance + popup ────────────────────────── */
/* The whole label (zone/chill/heat) is the click target, not just the dot. */
.ffn-pf-label[data-ffn-pf-info] { cursor: pointer; }
.ffn-pf-mobile-bar__cell--tap   { cursor: pointer; }
.ffn-pf-header-bar [data-ffn-pf="hdr-zip-cell"],
.ffn-pf-climate-card__zip,
.ffn-pf-location-active [data-ffn-pf="zip-chip"] {
  cursor: pointer;
}

/* Standard "info" icon (Bootstrap info-circle), drawn with a mask so it inherits
   the surrounding text color (white on the bar, dark on the white widget). */
.ffn-pf-info-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 0.2em;
  vertical-align: -2px;
  opacity: 0.75;
  background-color: currentColor;
  -webkit-mask: var(--ffn-info-icon) center / contain no-repeat;
          mask: var(--ffn-info-icon) center / contain no-repeat;
}

/* Shared ZIP change popup. */
.ffn-pf-location-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.18);
  font-family: var(--ffn-font);
}
.ffn-pf-location-overlay.ffn-pf-location-open { display: flex; }
.ffn-pf-location-dialog {
  position: relative;
  width: 360px;
  max-width: calc(100vw - 2rem);
  padding: 1.25rem;
  border: 1px solid var(--ffn-border);
  border-radius: 10px;
  background: var(--ffn-white);
  color: var(--ffn-ink);
}
.ffn-pf-location-dialog__close {
  position: absolute;
  top: 0.45rem;
  right: 0.6rem;
  border: 0;
  background: transparent;
  color: var(--ffn-slate-dark);
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1;
}
.ffn-pf-location-dialog__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 1.5rem 0.9rem 0;
}
.ffn-pf-location-dialog__title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--ffn-green-dark);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.ffn-pf-location-dialog__gps {
  flex: 0 0 auto;
  border: 1px solid var(--ffn-green-dark);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  background: var(--ffn-white);
  color: var(--ffn-green-dark);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.1;
}
.ffn-pf-location-dialog__gps:hover,
.ffn-pf-location-dialog__gps:focus {
  background: var(--ffn-green-light);
}
.ffn-pf-location-dialog__gps:disabled {
  cursor: wait;
  opacity: 0.65;
}
.ffn-pf-location-dialog__label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ffn-slate-dark);
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
}
.ffn-pf-location-dialog__row {
  display: flex;
  gap: 0.55rem;
}
.ffn-pf-location-dialog__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--ffn-border);
  border-radius: 6px;
  padding: 0.62rem 0.72rem;
  background: var(--ffn-white);
  color: var(--ffn-ink);
  font: inherit;
}
.ffn-pf-location-dialog__input:focus {
  outline: 2px solid var(--ffn-green-light);
  border-color: var(--ffn-green-dark);
}
.ffn-pf-location-dialog .ffn-pf-zip-feedback {
  margin: 0.65rem 0 0;
}

/* Centered modal explainer, above everything incl. the mobile bar (z 9990). */
.ffn-pf-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  /* Transparent click-catcher — the card is anchored next to the trigger (JS),
     so we don't dim the whole screen like a modal would. */
  background: rgba(0, 0, 0, 0.08);
}
.ffn-pf-info-overlay.ffn-pf-info-open { display: block; }
.ffn-pf-info-card {
  position: fixed;
  width: 320px;
  max-width: calc(100% - 1.5rem);
  padding: 1.2rem 1.3rem 1.35rem;
  background: var(--ffn-white);
  color: var(--ffn-ink);
  border-radius: 16px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.32);
  font-family: var(--ffn-font);
}
.ffn-pf-info-title {
  margin: 0 0 0.5rem;
  padding-right: 1.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ffn-green-dark);
}
.ffn-pf-info-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.ffn-pf-info-link {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ffn-link);
  text-decoration: none;
}
.ffn-pf-info-link:hover { text-decoration: underline; }
.ffn-pf-info-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ffn-slate-dark);
}

/* ── Animations ─────────────────────────────────────────────── */
/* Single-product recommendation panel. On desktop this fills Blocksy's existing
   300px product aside; at narrower widths JavaScript moves it above the tabs. */
.ffn-pf-product-recs {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--ffn-border);
  border-top: 4px solid var(--ffn-green-dark);
  border-radius: var(--ffn-radius);
  background: var(--ffn-white);
  color: var(--ffn-ink);
  font-family: var(--ffn-font);
  font-size: 0.9rem;
  line-height: 1.35;
}

.ffn-pf-product-recs--sidebar {
  position: sticky;
  top: 24px;
}

.admin-bar .ffn-pf-product-recs--sidebar { top: 56px; }

.ffn-pf-product-recs__header {
  margin: 0;
  padding: 0.95rem 1rem 0.9rem;
  border-bottom: 1px solid var(--ffn-border);
  background: var(--ffn-green-light);
}

.ffn-pf-product-recs__title {
  margin: 0;
  color: var(--ffn-green-dark);
  font-family: var(--ffn-font);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.2;
}

.ffn-pf-product-recs__intro {
  margin: 0.38rem 0 0;
  color: var(--ffn-ink);
  font-size: 0.82rem;
  line-height: 1.42;
}

.ffn-pf-product-recs__group {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
}

.ffn-pf-product-recs__group + .ffn-pf-product-recs__group {
  padding-top: 0.9rem;
  border-top: 1px solid var(--ffn-border);
}

.ffn-pf-product-recs__group-title {
  margin: 0 0 0.55rem;
  color: var(--ffn-green-dark);
  font-family: var(--ffn-font);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ffn-pf-product-recs__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.58rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ffn-pf-product-recs__item {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ffn-pf-product-recs__card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.68rem;
  align-items: center;
  box-sizing: border-box;
  min-height: 86px;
  padding: 0.42rem;
  border: 1px solid var(--ffn-border);
  border-radius: var(--ffn-radius-chip);
  background: var(--ffn-bg-light);
  color: var(--ffn-ink);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ffn-pf-product-recs__card:hover,
.ffn-pf-product-recs__card:focus-visible {
  border-color: var(--ffn-green-dark);
  background: var(--ffn-blue-wash);
  color: var(--ffn-ink);
}

.ffn-pf-product-recs__card:focus-visible {
  outline: 2px solid var(--ffn-link);
  outline-offset: 2px;
}

.ffn-pf-product-recs__image {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--ffn-radius-chip);
  object-fit: cover;
  background: var(--ffn-green-light);
}

.ffn-pf-product-recs__image--fallback {
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}

.ffn-pf-product-recs__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.42rem;
}

.ffn-pf-product-recs__name {
  color: var(--ffn-ink);
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.24;
}

.ffn-pf-product-recs__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.ffn-pf-product-recs__price {
  color: var(--ffn-slate-dark);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.ffn-pf-product-recs__fit {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--ffn-radius-chip);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
}

.ffn-pf-product-recs__fit--green {
  background: var(--ffn-green-dark);
  color: var(--ffn-white);
}

.ffn-pf-product-recs__fit--amber {
  background: var(--ffn-amber);
  color: var(--ffn-white);
}

@media (max-width: 999px) {
  .ffn-pf-product-recs {
    position: static;
    margin: 1.5rem 0;
  }

  .ffn-pf-product-recs__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ffn-pf-product-recs__list { grid-template-columns: minmax(0, 1fr); }
}

@keyframes ffn-pulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0.3; }
}

/* Inline map-pin icon (matches the climate-map pin; replaces the OS 📍 emoji) */
.ffn-pf-pin {
  width: 0.95em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
}
.ffn-pf-btn--gps .ffn-pf-pin {
  width: 1.1em;
  height: 1.3em;
  vertical-align: middle;
}

/* ── IP-guess banner ──────────────────────────────────────────────────────
   Announces the silent IP-based location default with one-tap confirm /
   correct ("Looks right" / "Change ZIP"). On desktop it is anchored beneath
   the visible header climate bar at that bar's exact width. On phones it keeps
   its existing fixed position above the sticky mobile climate bar.
   Flat editorial style per brand-style.md — border + bg, no shadows. */
.ffn-pf-ip-banner {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 99990;
  display: none;
  max-width: 380px;
  padding: 14px 40px 14px 16px;
  background: var(--ffn-white);
  border: 1px solid #ddd;
  border-radius: 8px;
  color: var(--ffn-ink);
  font-family: var(--ffn-font);
  font-size: 0.95rem;
}
.ffn-pf-ip-banner--open { display: block; }
.ffn-pf-ip-banner__title {
  display: block;
  font-weight: 700;
  color: var(--ffn-green-dark);
}
.ffn-pf-ip-banner__line {
  display: block;
  margin: 4px 0 10px;
  color: var(--ffn-slate-dark);
  font-size: 0.9em;
  line-height: 1.35;
}
.ffn-pf-ip-banner__actions {
  display: flex;
  gap: 8px;
}
.ffn-pf-ip-banner__change {
  background: var(--ffn-white);
  border: 1px solid var(--ffn-link);
  color: var(--ffn-link);
}
.ffn-pf-ip-banner__close {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 4px;
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--ffn-slate-dark);
  cursor: pointer;
}
@media (min-width: 769px) {
  .ffn-pf-ip-banner-anchor {
    position: relative;
    overflow: visible !important;
  }
  .ffn-pf-ip-banner.ffn-pf-ip-banner--header {
    position: absolute;
    inset: calc(100% + 8px) 0 auto auto;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
  }
  .ffn-pf-ip-banner.ffn-pf-ip-banner--header::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--ffn-white);
    border-top: 1px solid var(--ffn-border);
    border-left: 1px solid var(--ffn-border);
    transform: translateX(-50%) rotate(45deg);
  }
}
@media (max-width: 768px) {
  .ffn-pf-ip-banner {
    left: 12px;
    right: 12px;
    max-width: none;
    /* clear the sticky mobile climate bar (variable height) */
    bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Shared USDA zone swatch ─────────────────────────────────────────────
   The "7a" value pill, identical on the header chip, mobile bar, filter
   widget, and Plant Finder home card (the full panel card colors its whole
   zone box instead). Background/text colors are applied inline from the
   USDA legend map by paintZoneSwatch(); this class only shapes the pill. */
.ffn-pf-zone-swatch {
  display: inline-block;
  padding: 0 0.4em;
  border-radius: 4px;
  font-weight: 700;
}