/* ==========================================================================
   Top7 Theme — Top7.com homepage design
   ========================================================================== */

:root {
  /* Green theme tokens. Anchor palette:
     #1F4941  dark green   — primary CTAs, links, footer, rating accent
     #143430  darker green — accent hover state
     #BAF498  mid green    — hero gradient bottom, soft accents
     #BDF59E  mid green    — alternate mid-green tint
     #ECF4E8  light green  — section backgrounds, hero gradient top
     Variable names keep their original labels (--color-bg-pink etc.)
     for historical continuity; their *values* are now green. */
  --color-bg: #ffffff;
  --color-bg-soft: #f5f7f3;
  --color-bg-pink: #ECF4E8;
  --color-bg-pink-dark: #BAF498;
  --color-bg-light-pink: #ECF4E8;
  --color-bg-cream: #ECF4E8;
  --color-text: #11151c;
  --color-text-muted: #5b6472;
  --color-text-light: #8b94a3;
  --color-accent: #1F4941;
  --color-accent-dark: #143430;
  --color-accent-soft: #ECF4E8;
  --color-link: #1F4941;
  --color-trust-green: #1F4941;
  --color-footer: #1F4941;
  --color-footer-text: #d4e6c8;
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-soft: rgba(15, 23, 42, 0.05);
  --shadow-card: 0 4px 14px rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 2px 10px rgba(15, 23, 42, 0.04);
  /* One unified radius across the entire site — cards, buttons,
     inputs, pills all share the same corner curvature. Special-
     purpose radii (50% for circles, ≤4px for tiny chips) are kept
     where they apply individually. */
  --radius-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-pill: 12px;
  --max-w: 1180px;
  font-family: 'Mulish', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ==========================================================================
   Homepage scroll-reveal animations
   --------------------------------------------------------------------------
   JS in assets/js/main.js (`var homepage = ...`) marks each top-level
   section + a few known grid children with [data-reveal] and toggles
   `.is-revealed` via IntersectionObserver when each enters the viewport.

   Pure-CSS fade + lift, with a `--reveal-delay` custom prop the JS sets
   on staggered grid children so cards cascade in (max delay capped at
   ~0.45s in the JS to keep the tail snappy).

   Wrapped in `prefers-reduced-motion: no-preference` so visitors who've
   opted out of motion never see the hidden initial state — they get
   the final layout instantly. Same defensive belt + suspenders: the
   JS also bails when reduced-motion is set, so no class toggles fire.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Section-level reveal is opacity-only — no vertical translate.
     A translate animation creates a visible gap above each section
     while it's still mid-animation (the body bg shows through), which
     visitors saw as a "white line" at the section boundary. Fading
     is enough movement on its own. The grid-child stagger (hero
     cards, FAQ items, etc.) keeps its lift since those animate
     inside their parent container, not against body bg. */
  .homepage [data-reveal] {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity;
  }
  /* Inner grid-child reveals keep the subtle slide-up lift. */
  .homepage [data-reveal].hero__card,
  .homepage [data-reveal].listing-card,
  .homepage [data-reveal].expert-card,
  .homepage [data-reveal].faq__item {
    transform: translateY(18px);
    transition:
      opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .homepage [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* Clip any accidental horizontal overflow site-wide. `overflow-x: clip`
   (vs. `hidden`) keeps the document's normal scrolling context intact —
   so the sticky header stays anchored to the viewport — while still
   preventing rogue child elements (negative margins on heroes, wide
   marquees, full-bleed images, etc.) from bleeding past the viewport
   and triggering a horizontal scrollbar. */
html, body { overflow-x: clip; }

body {
  /* Light-green default — any gap between sections (we add 1rem
     between homepage + about-page children below) shows as light
     green instead of bright white, blending with the green theme. */
  background: #ECF4E8;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default; /* Default arrow cursor over text content (no I-beam unless on a real input). */
  caret-color: transparent; /* Suppress the blinking text caret on plain content (mainly when the browser's caret-browsing mode / F7 is on). */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Honor the HTML `hidden` attribute everywhere — author rules like
   `.listing-card { display: flex }` would otherwise override the UA
   default `[hidden] { display: none }`, so JS that sets `el.hidden = true`
   (e.g. the products-page filter) silently fails to hide the element. */
[hidden] { display: none !important; }

/* ============================================================
   Site-wide page container
   ============================================================
   Every page-template wrapper uses the same container behavior so
   the layout responds predictably at every zoom level: never wider
   than the viewport, never wider than the content cap (--max-w),
   always centered, always padded on the sides.

   Inner containers (".*__inner" / ".*__layout") get the cap; outer
   wrappers (".about-page" etc.) just ensure 100% width so backgrounds
   and full-bleed heroes still span the viewport edge-to-edge. */
.contact-page,
.privacy-page,
.products-page,
.blog-page,
.single-post,
.search-results {
  width: 100%;
  max-width: 100%;
}
/* About page is the one exception — wrap the entire page (including
   each section's coloured background) in a single content container so
   the layout reads as one column, one width, regardless of zoom. */
.about-page {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
}
/* Section gaps removed so the alternating gradients (light→mid in
   one section meet mid→light in the next) flow continuously without
   a sliver of body bg breaking the join. See per-section gradient
   directions below. */
.contact-page__inner,
.products-page__inner,
.blog-page__layout,
.single-post__layout,
.search-results__inner {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

/* Slim inline blog search form — rendered at the top of search results
   when the visitor came from the blog sidebar Search widget
   (top7_blog_search=1). Looks like a single rounded input with a dark
   green submit button on the right, fits the same visual rhythm as
   the sidebar Search widget. */
.blog-search-inline {
  display: flex;
  gap: 0;
  max-width: 540px;
  margin: 0 auto 2rem;
  background: #fff;
  border: 1px solid #ececf2;
  /* 12px matches the rest of the site (hero-search, all CTAs, panels) — was
     a 999px pill before which was the only non-12px form on the site. */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.blog-search-inline input[type="search"] {
  flex: 1 1 auto;
  border: 0;
  padding: 0.85rem 1.25rem;
  background: transparent;
  font: inherit;
  color: var(--color-footer);
  outline: none;
}
.blog-search-inline input[type="search"]::placeholder {
  color: #9b94aa;
}
.blog-search-inline button {
  border: 0;
  padding: 0.85rem 1.5rem;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.blog-search-inline button:hover {
  background: var(--color-accent-dark);
}
.privacy-page__inner {
  /* Privacy intentionally narrower for long-form readability — line
     length stays in the 60–80 character sweet spot. Still 100% wide on
     smaller viewports. */
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero panels (.hero, .about-hero, .contact-hero, .products-hero,
   .blog-page__hero, .privacy-hero) are intentionally full-bleed —
   the colored gradient spans the entire viewport edge-to-edge so
   there are no white side strips. Content INSIDE each hero is
   capped via the matching `*__inner` (or `*-inner`) wrapper at
   1280px — see .hero__inner, .about-hero__inner,
   .blog-page__hero-inner, etc. for the per-hero rule. */

/* Restore the I-beam ("text typing") cursor + visible caret only on actual
   text inputs and editable areas — keeps the rest of the site on a regular
   arrow cursor with no visible caret even if caret-browsing is accidentally
   toggled in the browser. */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
[contenteditable="true"] {
  cursor: text;
  caret-color: auto;
}

/* ==========================================================================
   Top bar / Header
   ========================================================================== */

.topbar {
  background: #ECF4E8;
  border-bottom: 1px solid rgba(31, 73, 65, 0.08);
  font-size: 0.85rem;
}
/* Tablet + mobile (≤ 1024px) header tweaks:
   - Hide the advertising-disclosure topbar (saves vertical space).
   - Tighten the header inner horizontal padding (1.25rem) so the
     logo + hamburger line up with the page content rail. */
@media (max-width: 1024px) {
  .topbar { display: none; }
  .site-header__inner { padding: 0.25rem 1.25rem; }
}
.topbar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.4rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: #4b5563;
  text-align: center;
}
.topbar__msg { color: #4b5563; font-weight: 500; }
.topbar__link {
  color: #0f172a;
  text-decoration: underline;
  font-weight: 600;
}
/* When rendered as <button> for the disclosure modal trigger, strip the
   browser default chrome so it visually matches the anchor variant. */
button.topbar__link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #0f172a;
  text-decoration: underline;
  cursor: pointer;
}
button.topbar__link:hover { color: var(--color-link); }

/* =========================================================
   Advertising Disclosure modal — opens from topbar
   ========================================================= */
.disclosure-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.disclosure-modal[hidden] { display: none; }
.disclosure-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.disclosure-modal.is-open .disclosure-modal__backdrop { opacity: 1; }
.disclosure-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.disclosure-modal.is-open .disclosure-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.disclosure-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.disclosure-modal__close:hover {
  background: #ECF4E8;
  color: #0f172a;
}
.disclosure-modal__title {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-footer);
  letter-spacing: -0.015em;
  padding-right: 2rem;
}
.disclosure-modal__body p {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #334155;
  font-weight: 500;
}
.disclosure-modal__body p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .disclosure-modal { padding: 1rem; }
  .disclosure-modal__panel { padding: 2rem 1.25rem 1.5rem; border-radius: 12px; }
  .disclosure-modal__title { font-size: 1.2rem; }
  .disclosure-modal__body p { font-size: 0.9rem; }
}

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  /* Sits above the hero-search panel (z-index: 200) so sticky-header
     stays in front when the visitor scrolls a hero page on mobile —
     otherwise the hero-search overlapped the header. Still below the
     full-viewport overlays (advertising disclosure modal + compare
     tray at z-index 1000) which intentionally cover the header. */
  z-index: 500;
}
.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  /* Horizontal padding matches the section content rail's inset
     (1.5rem on desktop, 1.25rem on mobile) so the logo's left edge
     and hamburger's right edge line up with the rest of the page
     body. Vertical padding is tight so the header stays close to
     the logo height. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.site-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
/* Image-based logo (header + footer). Auto-scales to height; max-height
   keeps the header chrome tidy across viewports. */
.site-brand__img {
  display: block;
  height: auto;
  max-height: 80px;
  width: auto;
}
@media (max-width: 720px) {
  .site-brand__img { max-height: 60px; }
}
/* Footer variant — the logo's dark-green portions disappear into the
   dark-green footer bg, so we invert it to white while preserving
   shape. Loses the green "7" accent (becomes white too) — if a
   light/inverted PNG variant is provided later (top7-logo-white.png),
   swap the <img src> in footer.php and drop this filter. */
.site-brand--light .site-brand__img {
  filter: brightness(0) invert(1);
  max-height: 96px;
  opacity: 0.95;
}
@media (max-width: 720px) {
  .site-brand--light .site-brand__img { max-height: 72px; }
}
.site-brand__logo {
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.site-brand__accent { color: var(--color-accent); }

.site-nav__list,
.site-nav__list .menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list li { list-style: none; }
.site-nav__list a {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--color-accent); }

/* ----- Dropdown sub-menus -----------------------------------------
   When a menu item has children (e.g. "Products & Services" with all
   the top7_category terms as sub-items), the children render inside
   .sub-menu and pop down on hover/focus. */
.site-nav__list .menu-item-has-children {
  position: relative;
}
.site-nav__list .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  margin-left: 0.4rem;
  vertical-align: 1px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  padding: 2.5px;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.site-nav__list .menu-item-has-children:hover > a::after {
  transform: rotate(225deg);
  vertical-align: -1px;
}
.site-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  margin: 0;
  padding: 0.5rem 0;
  min-width: 220px;
  /* Cap horizontal width so long entries (like blog post titles) don't
     stretch the dropdown past the viewport. Combined with text-wrap on
     the inner links below, long labels render on 2 lines instead. */
  max-width: 300px;
  list-style: none;
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 100;
  /* Long sub-menus (like every Top7 category under "Products & Services")
     would otherwise spill past the bottom of the viewport. Cap the height
     and turn the dropdown into a scroll region — overscroll-behavior keeps
     wheel scroll from bubbling into the page. */
  max-height: min(320px, calc(100vh - 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Right-align dropdowns of the last two nav items so they don't spill
   past the viewport's right edge. Heuristic-based — covers the typical
   "Blog" / "Contact Us" tail of the menu. */
.site-nav__list > .menu-item-has-children:nth-last-child(-n+2) > .sub-menu {
  left: auto;
  right: -0.75rem;
}
/* Subtle, branded scrollbar inside the dropdown */
.site-nav__list .sub-menu::-webkit-scrollbar { width: 6px; }
.site-nav__list .sub-menu::-webkit-scrollbar-track { background: transparent; }
.site-nav__list .sub-menu::-webkit-scrollbar-thumb {
  background: #BAF498;
  border-radius: 3px;
}
.site-nav__list .sub-menu::-webkit-scrollbar-thumb:hover { background: #1F4941; }
.site-nav__list .sub-menu {
  scrollbar-width: thin;          /* Firefox */
  scrollbar-color: #BAF498 transparent;
}
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__list .sub-menu li { display: block; }
.site-nav__list .sub-menu a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-muted);
  /* Allow long titles (e.g. blog post names) to wrap to a second line
     instead of stretching the dropdown horizontally. */
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.35;
  transition: background 0.12s ease, color 0.12s ease;
}
.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu .current-menu-item > a {
  color: var(--color-accent);
  background: #ECF4E8;
}
/* Bridge gap between trigger and dropdown so hover doesn't drop the
   menu when the cursor crosses the small space below the parent link. */
.site-nav__list .menu-item-has-children > .sub-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

/* =========================================================
   Mobile hamburger button + off-canvas drawer
   Hidden on desktop (≥769px), shown on tablet+mobile (≤768px).
   ========================================================= */
.site-hamburger {
  display: none; /* default: desktop hides it */
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.site-hamburger__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-footer);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-hamburger[aria-expanded="true"] .site-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-hamburger[aria-expanded="true"] .site-hamburger__bar:nth-child(2) {
  opacity: 0;
}
.site-hamburger[aria-expanded="true"] .site-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-drawer {
  position: fixed;
  inset: 0;
  /* Above the hero-search (z-200) so its dropdown panel can never
     bleed through the drawer on mobile — was 99 before, which let
     a focused hero-search overlap the drawer's nav links.
     Still BELOW the sticky header (z-500) so the header (logo +
     hamburger X icon) stays visible and clickable above the drawer. */
  z-index: 300;
}
.site-drawer[hidden] { display: none; }
.site-drawer__backdrop {
  position: absolute;
  /* Dim the FULL viewport (top: 0, not below the header) so any chrome
     visible behind the header — topbar, hero gradient, scrolled page
     content — gets covered too. The site-header still floats above the
     dim via its higher z-index (500 > drawer's 300), so logo + close X
     stay visible and clickable. Earlier `top: var(--drawer-top)` left an
     undimmed strip at the top that exposed page content. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.site-drawer.is-open .site-drawer__backdrop { opacity: 1; }
.site-drawer__panel {
  position: absolute;
  /* Anchored to the bottom edge of the sticky header — JS sets --drawer-top
     on open via getBoundingClientRect().bottom so the panel always emerges
     from beneath the header, not from the top of the viewport. The header
     stays visible above the panel because z-index: 500 > drawer's 300. */
  top: var(--drawer-top, 64px);
  right: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: #fff;
  padding: 1rem 1.25rem 1.5rem;
  border-radius: 0;
  box-shadow: -12px 0 30px rgba(15, 23, 42, 0.18);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Slide in from the right edge */
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.site-drawer.is-open .site-drawer__panel { transform: translateX(0); }

/* Branded scrollbar inside the drawer (matches dropdown style) */
.site-drawer__panel::-webkit-scrollbar { width: 6px; }
.site-drawer__panel::-webkit-scrollbar-track { background: transparent; }
.site-drawer__panel::-webkit-scrollbar-thumb { background: #BAF498; border-radius: 3px; }
.site-drawer__panel::-webkit-scrollbar-thumb:hover { background: #1F4941; }
.site-drawer__panel { scrollbar-width: thin; scrollbar-color: #BAF498 transparent; }
.site-drawer__list,
.site-drawer__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-drawer__list > li { margin-bottom: 0.2rem; }
.site-drawer__list a {
  display: block;
  padding: 0.7rem 0.85rem;
  color: var(--color-footer);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.12s ease, color 0.12s ease;
}
.site-drawer__list a:hover,
.site-drawer__list .current-menu-item > a {
  background: #ECF4E8;
  color: var(--color-accent);
}
/* Parent menu items in the drawer — collapsed by default, click-to-expand.
   Chevron rotates when the parent has the .is-expanded state class. */
.site-drawer__list .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-drawer__list .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  /* CSS-drawn chevron — overrides the desktop ::after rule for these items */
}
.site-drawer__list .menu-item-has-children.is-expanded > a::after {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}

/* Sub-menu collapsed by default; .is-expanded on parent reveals it */
.site-drawer__list .sub-menu {
  display: none;
  margin: 0.15rem 0 0.6rem 0.6rem;
  padding-left: 0.6rem;
  border-left: 2px solid #ececf2;
}
.site-drawer__list .menu-item-has-children.is-expanded > .sub-menu {
  display: block;
  max-height: 240px;
  overflow-y: auto;
  /* Thin green scrollbar matching the drawer panel */
  scrollbar-width: thin;
  scrollbar-color: #BAF498 transparent;
}
.site-drawer__list .menu-item-has-children.is-expanded > .sub-menu::-webkit-scrollbar { width: 4px; }
.site-drawer__list .menu-item-has-children.is-expanded > .sub-menu::-webkit-scrollbar-track { background: transparent; }
.site-drawer__list .menu-item-has-children.is-expanded > .sub-menu::-webkit-scrollbar-thumb { background: #BAF498; border-radius: 2px; }
.site-drawer__list .menu-item-has-children.is-expanded > .sub-menu::-webkit-scrollbar-thumb:hover { background: #1F4941; }
.site-drawer__list .sub-menu a {
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.5rem 0.65rem;
  color: var(--color-text-muted);
}

/* Activate hamburger + hide desktop nav on tablet/mobile */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .site-hamburger { display: flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  padding: 4.5rem 1.5rem 5rem;
  text-align: center;
}
.hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.hero__title {
  margin: 0 0 1.75rem;
  font-size: clamp(2.6rem, 5.6vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: #0e0e15;
}
.hero__copy {
  max-width: 620px;
  margin: 0 auto 2.25rem;
  color: #2c2540;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.55;
}

/* ----- Hero search bar (Keyword + Categories) -------------------- */
.hero-search {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 2.75rem;
  background: #ffffff;
  border-radius: 12px;
  padding: 0.4rem 0.4rem 0.4rem 1.25rem;
  box-shadow: 0 8px 28px rgba(31, 73, 65, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
  text-align: left;
  position: relative;
  /* Sits well above any sibling content (products grid cards, badges,
     review cards, etc.). The dropdown panel inside this stacking
     context can then go even higher within it. */
  z-index: 200;
}
.hero-search__field {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.65rem;
  position: relative;
  margin: 0;
}
/* The field is now a <label> wrapping the icon + input/select — clicking
   anywhere inside it (icon, padding, etc.) focuses the labeled control.
   Cursor reinforces the click target: text for keyword (I-beam), pointer
   for category (dropdown). */
.hero-search__field--keyword  { flex: 2 1 0; cursor: text; }
.hero-search__field--category {
  flex: 1.2 1 0;
  padding: 0;
  cursor: pointer;
  /* Anchor for the absolutely-positioned dropdown panel. */
  position: relative;
}

/* ----- Custom themed Categories dropdown ----------------------- */
.hero-cat__native {
  /* Visually hidden but submitted with the form. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.hero-cat__trigger {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c2540;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.12s ease;
}
.hero-cat__trigger:hover { background: rgba(15, 23, 42, 0.03); }
.hero-cat__trigger:focus-visible {
  outline: 3px solid rgba(31, 73, 65, 0.25);
  outline-offset: 1px;
}
.hero-cat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}
.hero-cat__value {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-cat__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b8294;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.hero-cat__trigger[aria-expanded="true"] .hero-cat__caret { transform: rotate(180deg); }

.hero-cat__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0; right: 0;
  /* Within `.hero-search`'s stacking context (z-index: 200), this
     value is what stacks the dropdown above the trigger + other
     search-bar children. 1000 is intentionally high so the panel
     stays on top of any future positioned chrome inside the bar. */
  z-index: 1000;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
  overflow-y: auto;
  max-height: 320px;
  padding: 0.4rem;
  text-align: left;
}
.hero-cat__option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.7rem 2.25rem 0.7rem 0.95rem;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--color-footer);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  position: relative;
}
.hero-cat__option:hover,
.hero-cat__option:focus-visible {
  background: #ECF4E8;
  color: var(--color-accent);
  outline: none;
}
.hero-cat__option.is-selected {
  background: #ECF4E8;
  color: var(--color-accent);
}
.hero-cat__option.is-selected::after {
  content: "";
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px; height: 11px;
  border-right: 2.5px solid var(--color-accent);
  border-bottom: 2.5px solid var(--color-accent);
}

/* Branded slim scrollbar for the panel. */
.hero-cat__panel::-webkit-scrollbar { width: 6px; }
.hero-cat__panel::-webkit-scrollbar-track { background: transparent; }
.hero-cat__panel::-webkit-scrollbar-thumb {
  background: rgba(31, 73, 65, 0.35);
  border-radius: 12px;
}
.hero-cat__panel::-webkit-scrollbar-thumb:hover { background: rgba(31, 73, 65, 0.55); }
.hero-cat__panel { scrollbar-width: thin; scrollbar-color: rgba(31, 73, 65, 0.35) transparent; }
.hero-search__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b8294;
  flex-shrink: 0;
  /* Clicks pass through the icon to the wrapping label, so the icon
     never captures a stray text-selection cursor or steals focus from
     the input it visually belongs to. */
  pointer-events: none;
}
.hero-search__icon--cat { color: var(--color-accent); }
.hero-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c2540;
  padding: 0.85rem 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.hero-search__input::placeholder { color: #8b8294; font-weight: 500; }
.hero-search__input:focus { outline: none; }
.hero-search__caret {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8b8294;
  pointer-events: none;
  display: inline-flex;
}
.hero-search__divider {
  width: 1px;
  align-self: stretch;
  margin: 0.55rem 0;
  background: rgba(31, 73, 65, 0.15);
  flex-shrink: 0;
}
.hero-search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(31, 73, 65, 0.28);
  white-space: nowrap;
}
.hero-search__submit:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(31, 73, 65, 0.4);
}
.hero-search__submit:focus-visible {
  outline: 3px solid rgba(186, 244, 152, 0.7);
  outline-offset: 2px;
}
.hero-search__submit-icon { display: none; }

/* ----- Live autocomplete dropdown ------------------------------ */
.hero-search__suggest {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  text-align: left;
  max-height: 380px;
  overflow-y: auto;
}
.hero-search__suggest-empty {
  padding: 1.1rem 1.25rem;
  color: #6b6577;
  font-size: 0.93rem;
  font-style: italic;
  text-align: center;
}
.hero-search__suggest-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--color-footer);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  transition: background-color 0.12s ease;
}
.hero-search__suggest-item:last-child { border-bottom: 0; }
.hero-search__suggest-item:hover,
.hero-search__suggest-item.is-active {
  background: #ECF4E8;
}
.hero-search__suggest-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex-shrink: 0;
}
.hero-search__suggest-icon--category {
  background: #ECF4E8;
  color: var(--color-accent);
}
.hero-search__suggest-icon--listing {
  background: #fff8e0;
  color: #d4a300;
}
/* When a listing suggestion has a real brand image (most do — Featured
   Image or favicon fallback), render it instead of the generic star
   icon. Image fits within the 36×36 icon slot, no upscaling. */
.hero-search__suggest-img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  display: block;
  padding: 3px;
  background: #ffffff;
  border-radius: 12px;
}
.hero-search__suggest-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}
.hero-search__suggest-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-footer);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-search__suggest-label mark {
  background: rgba(31, 73, 65, 0.18);
  color: var(--color-accent-dark);
  padding: 0 1px;
  border-radius: 2px;
  font-weight: 800;
}
.hero-search__suggest-sub {
  font-size: 0.78rem;
  color: #6b6577;
  font-weight: 500;
}
.hero-search__suggest-tag {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8b8294;
  background: #ECF4E8;
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.hero-search__suggest-item:hover .hero-search__suggest-tag,
.hero-search__suggest-item.is-active .hero-search__suggest-tag {
  background: #fff;
  color: var(--color-accent);
}

@media (max-width: 760px) {
  .hero-search {
    flex-direction: column;
    border-radius: 12px;
    padding: 0.55rem;
    gap: 0.4rem;
    box-shadow: 0 6px 22px rgba(31, 73, 65, 0.16), 0 1px 4px rgba(15, 23, 42, 0.05);
  }
  .hero-search__field {
    background: #ECF4E8;
    border-radius: 12px;
    padding: 0.25rem 1rem;
    flex: 0 0 auto;
    width: 100%;
  }
  .hero-search__field--category {
    padding: 0;
    background: #ECF4E8; /* preserve the rounded pill bg shared with keyword */
  }
  .hero-cat__trigger { padding: 0.85rem 1rem; }
  /* Cap dropdown height on mobile so a long category list doesn't blow
     past the viewport — internal scroll handles overflow. */
  .hero-cat__panel { max-height: 240px; }
  .hero-search__divider { display: none; }
  .hero-search__caret { right: 0.85rem; }
  .hero-search__submit {
    width: 100%;
    padding: 0.95rem 1.6rem;
  }
}

.hero__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 880px;
  margin: 0 auto;
}
.hero__grid .hero__card {
  flex: 0 0 calc((100% - 5rem) / 6);
  min-width: 110px;
  max-width: 145px;
}
.hero__card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 1.2rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 130px;
  color: #1f2937;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
}
.hero__card-icon {
  display: grid;
  place-items: center;
  color: #1f2937;
  height: 36px;
}
.hero__card-icon-img {
  width: 36px;
  height: 36px;
  object-fit: scale-down;
  display: block;
}
.hero__card-label {
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  color: #1f2937;
}

/* ==========================================================================
   Trust
   ========================================================================== */

.trust {
  /* Reversed gradient — starts where the hero left off (mid green at
     top) and ends at light green at bottom, so the seam between hero
     and trust strip is invisible. */
  background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%);
  padding: 2.75rem 1.5rem 3.25rem;
  text-align: center;
  border-bottom: 0;
}
.trust__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.trust__title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 0.6rem;
  color: #11151c;
  letter-spacing: -0.015em;
}
.trust__copy {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin: 0 auto 2.25rem;
  max-width: 660px;
  font-weight: 500;
  line-height: 1.55;
}
.trust__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.trust__track {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  width: max-content;
  animation: trust-scroll 40s linear infinite;
}
.trust__marquee:hover .trust__track {
  animation-play-state: paused;
}
.trust__logo {
  flex-shrink: 0;
  font-weight: 900;
  font-size: 1.85rem;
  /* Dark green for high contrast against the section's light-mid
     green gradient bg — grey logos disappeared into the wash, this
     reads cleanly at all marquee positions. */
  color: var(--color-footer);
  letter-spacing: -0.025em;
  opacity: 1;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.trust__logo:hover {
  color: var(--color-accent-dark);
  transform: translateY(-1px);
}
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none; }
}

/* ==========================================================================
   Section base
   ========================================================================== */

.section {
  padding: 3rem 1.5rem;
}
.section__intro {
  max-width: var(--max-w);
  margin: 0 auto 1.5rem;
}
.section__intro--left { text-align: left; }
.section-title {
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.018em;
  color: #11151c;
  line-height: 1.2;
}
.section-title__accent {
  position: relative;
  display: inline-block;
  color: #11151c;
  padding: 0 0.15em;
}
/* Accent underline — applied only on the homepage. WP adds the
   `.home` body class when viewing the front page, so scoping the
   underline here keeps it off /categories/, /review/{slug}/,
   /compare/, and any other inner pages where it was visually noisy.
   Implemented as a positioned `::after` bar rather than CSS
   text-decoration so descenders (g, y, p) don't cut through the
   line — it sits cleanly BELOW the text at a fixed offset. */
.home .section-title__accent {
  position: relative;
  display: inline-block;
}
.home .section-title__accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}
.section-copy {
  margin-top: 0.65rem;
  color: var(--color-text-muted);
  font-size: 1rem;
  font-weight: 500;
}

/* ==========================================================================
   Categories — Explore by category
   ========================================================================== */

.categories {
  /* Hero gradient — every homepage section after the hero uses the
     same `#ECF4E8 → #BAF498` (light → mid green) so the page reads
     as one continuous green-themed wash from top to bottom. */
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  padding: 3rem 1.5rem;
}
.categories__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.categories .section__intro { margin-bottom: 1rem; }

/* Section title + Show More live together at the top of the section.
   Flex row so they share the line on desktop / tablet, with the title
   shrinking gracefully on narrow viewports instead of being overlapped
   by an absolutely-positioned button. */
.section__intro--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.section__intro--with-action .section-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.categories__tabs {
  display: flex;
  gap: 1.75rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  margin-bottom: 1.5rem;
}
.categories__tab {
  border: 0;
  background: transparent;
  padding: 0.85rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-muted);
  position: relative;
  cursor: pointer;
  font-family: inherit;
}
.categories__tab.is-active {
  color: #11151c;
  font-weight: 700;
}
.categories__tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #11151c;
}

.categories__layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.categories__nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.category-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.category-pill[hidden] { display: none; }
.category-pill__icon {
  display: inline-grid;
  place-items: center;
  color: var(--color-text-muted);
}
.category-pill:hover { background: rgba(255, 255, 255, 0.6); }
.category-pill.is-active {
  background: #ffffff;
  border-color: #BAF498;
  color: var(--color-accent);
}
.category-pill.is-active .category-pill__icon { color: var(--color-accent); }

.categories__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
/* CRITICAL: the [hidden] attribute's browser default of display:none is
   overridden by display:grid above, so card sets never hid on pill switch.
   Force the hide here so JS can reliably swap one set in / others out. */
.categories__cards[hidden] { display: none; }
.listing-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 1.4rem 1.15rem 1.15rem;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Compare-checkbox mount — sits in the top-right corner of every
   listing card. Hidden by default; revealed on card hover (desktop)
   or card tap/touch (mobile). Only the checkbox BOX is shown —
   the "Compare" text label is hidden so the affordance reads as a
   tiny tick-square in the corner without crowding the card chrome. */
.listing-card__compare-mount {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.listing-card:hover .listing-card__compare-mount,
.listing-card:focus-within .listing-card__compare-mount,
.listing-card__compare-mount:has(.compare-checkbox.is-selected) {
  opacity: 1;
  pointer-events: auto;
}
/* Hide the "Compare" text label — only the checkbox box stays. */
.listing-card__compare-mount .compare-checkbox__label {
  display: none;
}
.listing-card__compare-mount .compare-checkbox {
  background: transparent;
  padding: 0.3rem;
}
/* Mobile: no hover affordance, so the compare checkbox stays visible
   by default on every card. */
@media (max-width: 720px) {
  .listing-card__compare-mount {
    opacity: 1;
    pointer-events: auto;
  }
}
/* Listing card title — brand/product name shown under the logo on
   homepage cards. Used to be implicit (only the logo image showed
   on cards with a brand_logo set), now an explicit title element
   so the brand name is always visible. */
.listing-card__title {
  margin: 0.2rem 0 0.55rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: #11151c;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.listing-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.listing-card__title a:hover { color: var(--color-accent); }

.listing-card__brand {
  font-weight: 800;
  font-size: 1.75rem;
  color: #11151c;
  justify-content: center;
  text-align: center;
  margin: 0 0 0.5rem;
  letter-spacing: -0.025em;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Listing card brand logo — fixed box with object-fit: contain so
   any image (small favicon, large HD upload, square OR landscape)
   fits inside the box without stretching or distorting. The box's
   aspect ratio (140 × 64) is just the slot — the image inside keeps
   its own aspect via contain + center. max-width/max-height are a
   defensive belt+suspenders against any future markup overrides. */
.listing-card__brand-img {
  width: 140px;
  height: 64px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}
.listing-rating {
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.listing-rating__count { color: var(--color-accent); }
.listing-rating__source {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--color-trust-green);
  font-weight: 700;
}
.trustpilot-star { color: var(--color-trust-green); font-size: 1rem; }

.listing-features {
  padding: 0;
  list-style: none;
  flex: 1;
  /* Shrink to content width so the block is visually centered in the
     card; the constrained max-width guarantees breathing room on both
     sides even when text wraps, so margin:auto always has something
     to center. Checkmarks stay left-aligned within the block. */
  width: fit-content;
  max-width: calc(100% - 1rem);
  margin: 0 auto 1.15rem;
}
.listing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
  color: #2c2540;
  line-height: 1.5;
  font-weight: 500;
  text-align: left;
}
/* Check icon as a flex item rather than position:absolute. This guarantees
   hanging indent: when the text wraps to multiple lines, every line lines
   up directly under the first character of line 1 — never under the icon. */
.listing-features li::before {
  content: '';
  flex-shrink: 0;
  display: block;
  width: 18px;
  height: 18px;
  margin-top: 0.18rem;
  border-radius: 50%;
  background-color: #def3eb;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 8.5l2.5 2.5L12 5.5' stroke='%2300b67a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.listing-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--color-accent);
  color: #ffffff;
  /* Transparent 1.5px border so the outer box height matches
     .listing-link (which has a real 1.5px accent border). Without
     this, the secondary outlined button sits ~3px taller than the
     primary green button when they're stacked together. */
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.7rem;
  transition: background 0.15s ease;
}
.listing-cta:hover { background: var(--color-accent-dark); }
.listing-cta__arrow { font-weight: 600; transition: transform 0.15s ease; }
.listing-cta:hover .listing-cta__arrow { transform: translateX(2px); }

/* "View Details" pill — secondary CTA on every listing card.
   Styled as an outlined accent pill (rather than the plain text
   link it used to be) so it's the second-most prominent action
   after the primary "Visit Site" button. */
.listing-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  /* Padding + font-size mirror .listing-cta exactly so the secondary
     outlined CTA reads as the same physical size as the green primary
     button — site-wide listing/compare/comparison-row contexts all
     get identical button pairs without per-context overrides. */
  padding: 0.9rem 1rem;
  border: 1.5px solid var(--color-accent);
  border-radius: 12px;
  background: #fff;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.listing-link::after {
  content: "→";
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
.listing-link:hover {
  /* Mid-green fill on hover gives the secondary CTA its own
     personality vs. the dark-green primary "Visit Site" button. The
     dark-green text still pops against the mid-green background. */
  background: #BAF498;
  color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  text-decoration: none;
  transform: translateY(-1px);
}
.listing-link:hover::after { transform: translateX(2px); }

/* "Show More" sits at the top-right of the categories section,
   next to the "Explore by category" title. Compact green-outline
   pill that adapts to narrow viewports without overlapping the title. */
.section__intro--with-action .show-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.45rem 1.1rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.section__intro--with-action .show-more:hover {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.show-more__arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}
.section__intro--with-action .show-more:hover .show-more__arrow { transform: translateX(2px); }

/* ==========================================================================
   Why Choose Top7
   ========================================================================== */

.why-choose {
  /* Reversed gradient — starts at mid green (matches Categories' bottom)
     and fades to light green (matches Experts' top). */
  background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%);
  padding: 3rem 1.5rem;
}
.why-choose__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}
.why-choose__text { max-width: 460px; }
.why-choose__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.why-choose__metric {
  background: #ffffff;
  border: 1.5px solid #BAF498;
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  min-width: 160px;
}
.why-choose__metric strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: #11151c;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}
.why-choose__metric span {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.35;
  font-weight: 500;
}

/* ==========================================================================
   Experts
   ========================================================================== */

.experts {
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  padding: 3rem 1.5rem;
}
.experts .section__intro {
  max-width: var(--max-w);
  margin: 0 auto 1.75rem;
}
.experts__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}
.expert-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 1.35rem 0.75rem 1.35rem;
  text-align: center;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-soft);
}
.expert-card__photo {
  width: 92px;
  height: 92px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  padding: 4px;
  background: #ECF4E8;
  display: grid;
  place-items: center;
}
/* Expert photo rings — kept varied for visual distinction across the
   six experts, with the previously off-theme grey + blue swapped to
   green-family tones so nothing reads as "out of palette". */
.expert-card__photo--peach { background: #fde2c8; }
.expert-card__photo--blue  { background: #BAF498; }  /* was #cfe3f7 light blue */
.expert-card__photo--pink  { background: #f9d4dc; }
.expert-card__photo--mint  { background: #c9ecdb; }
.expert-card__photo--gray  { background: #D4E6C8; }  /* was #d8dde6 grey  */
.expert-card__photo--lilac { background: #e3d6f1; }
.expert-card__photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #ECF4E8;
}
.expert-card__name {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 800;
  color: #11151c;
  line-height: 1.25;
}
.expert-card__role {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  font-weight: 500;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  /* Reversed gradient — starts at mid green (matches Experts' bottom)
     and fades to light green at bottom, leading into the dark green
     footer cleanly. */
  background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%);
  padding: 3rem 1.5rem;
}
.faq__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.faq .section__intro { margin-bottom: 1.25rem; }
.faq__list {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
}
.faq__item { border-bottom: 1px solid rgba(31, 73, 65, 0.10); }
.faq__item:last-child { border-bottom: 0; }
.faq__question {
  width: 100%;
  border: 0;
  /* Questions sit on the lightest palette green inside the white
     list card, with a mid-green pop on hover / open state. */
  background: #ECF4E8;
  padding: 1.15rem 1.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #11151c;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: inherit;
  transition: background 0.15s ease;
}
/* Hover state scoped to actual hover-capable devices (mouse) only.
   On touch devices the browser keeps a "sticky" hover after tap,
   which made the previously-tapped question (or the next one if the
   touch slid) appear active even when closed. `@media (hover: hover)`
   ensures hover styling only applies where hover truly exists. */
@media (hover: hover) {
  .faq__question:hover { background: #BDF59E; }
}
.faq__question[aria-expanded='true'] { background: #BDF59E; }
/* Suppress focus-ring sticky-look after a click on touch — keep
   keyboard-focus visible via :focus-visible only. */
.faq__question:focus { outline: none; }
.faq__question:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: -2px; }
.faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq__question[aria-expanded='true'] .faq__icon { transform: rotate(180deg); }
.faq__answer {
  padding: 0 1.4rem;
  max-height: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  background: #ffffff;
  font-weight: 500;
  line-height: 1.55;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.faq__answer.open {
  padding: 1.1rem 1.4rem 1.35rem;
  max-height: 360px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-footer);
  color: var(--color-footer-text);
  /* Mid-green top border ribbon ties the footer back to the rest of
     the green palette without being visually heavy. */
  border-top: 4px solid #BAF498;
  padding: 2.75rem 1.5rem 2rem;
}
.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
}
.site-brand--light .site-brand__logo { color: #ffffff; }
/* Footer brand accent picks up the mid-green palette tone so the
   "Top7" wordmark in the footer doesn't feel disconnected from the
   green theme above it. */
.site-brand__accent--light { color: #BDF59E; }
.footer-meta {
  margin-top: 1.4rem;
  font-size: 0.88rem;
  color: #c2d6b5;
  line-height: 1.7;
  font-weight: 500;
}
.footer-meta p { margin: 0 0 0.85rem; }
.footer-meta__address strong { color: #ffffff; font-weight: 700; }
.footer-meta__dont {
  margin-top: 1.25rem !important;
}
.footer-meta__dont a {
  color: #BAF498;
  font-weight: 700;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}
.footer-meta__dont a:hover { color: #ffffff; }
.footer-content { display: flex; flex-direction: column; gap: 1.1rem; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li { list-style: none; }
.footer-links a {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  transition: color 0.15s ease;
}
.footer-links a:hover { color: #BAF498; }
.footer-disclosure {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #c2d6b5;
  font-weight: 500;
}
.footer-disclosure p { margin: 0 0 0.7rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
  /* Hero icon grid stretches to match the search bar above (no
     narrower max-width clamp). Cards reflow to 4 per row at the
     full width of the search bar. */
  .hero__grid { max-width: 760px; width: 100%; gap: 0.85rem; }
  .hero__grid .hero__card { flex-basis: calc((100% - 2.55rem) / 4); max-width: none; }
  .categories__layout { grid-template-columns: 1fr; }
  /* Tablet: shrink tab text + gap so all four group labels fit in one row */
  .categories__tabs { gap: 1.1rem; }
  .categories__tab  { font-size: 0.9rem; white-space: nowrap; }
  .categories__nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  .category-pill { flex-shrink: 0; }
  .categories__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-choose__inner { grid-template-columns: 1fr; }
  .experts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 720px) {
  .topbar__inner { font-size: 0.78rem; padding: 0.5rem 1rem; flex-direction: column; gap: 0.25rem; }
  .hero { padding: 2.5rem 1rem 3rem; }
  .hero__title { font-size: 2.25rem; }
  .hero__copy { margin-bottom: 1.75rem; }
  /* Mobile: grid stretches to match the search bar width
     (no narrower max-width clamp). 3 cards per row. */
  .hero__grid { gap: 0.6rem; max-width: 760px; width: 100%; }
  .hero__grid .hero__card { flex-basis: calc((100% - 1.2rem) / 3); max-width: none; min-width: 0; }
  .section { padding: 2.5rem 1rem; }
  .trust { padding: 2rem 1rem 2.5rem; }
  .trust__title { font-size: 1.3rem; }
  .trust__copy { font-size: 0.98rem; }
  .trust__track { gap: 2.75rem; animation-duration: 28s; }
  .trust__logo { font-size: 1.4rem; }
  .categories__cards { grid-template-columns: 1fr; }
  .why-choose__metrics { grid-template-columns: 1fr; }
  .experts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .categories__tabs { gap: 1rem; overflow-x: auto; flex-wrap: nowrap; }
  .categories__tab { white-space: nowrap; }
  /* Mobile: shrink the Show More pill a touch so it fits cleanly
     beside the section title in the same flex row. */
  .section__intro--with-action .show-more { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
  .section__intro--with-action .section-title { font-size: 1.6rem; }
  .footer-links { gap: 0.85rem; }
  .site-nav__list { gap: 1rem; }
}

@media (max-width: 420px) {
  .hero__grid .hero__card { flex-basis: calc((100% - 0.6rem) / 2); max-width: none; }
  .experts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   Comparison Hub  ( /comparison/ )
   ========================================================= */
/* ----- Categories hub hero --------------------------------------- */
/* Mirrors the other page heroes (.about-hero, .contact-hero, etc.) —
   full-bleed gradient panel with eyebrow + title + lead copy. Lives
   above the .comparison-hub grid on /categories/. */
.categories-hero {
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  text-align: center;
  padding-block: 4rem 4.5rem;
  padding-inline: max(1.5rem, calc((100% - 1180px) / 2));
}
.categories-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.categories-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 0.85rem;
}
.categories-hero__eyebrow::before,
.categories-hero__eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.7;
}
.categories-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 1rem;
  color: var(--color-footer);
  letter-spacing: -0.02em;
}
.categories-hero__copy {
  max-width: 640px;
  margin: 0 auto;
  color: #4b3f55;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .categories-hero { padding-block: 3rem 3.5rem; padding-inline: 1.25rem; }
  .categories-hero__title { font-size: 1.85rem; }
  .categories-hero__copy { font-size: 1rem; }
}

/* Reversed gradient — picks up where .categories-hero (light→mid)
   ended (at mid green) and fades back to light, leading into the
   footer with a clean palette transition. */
.comparison-hub { background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%); padding: 3rem 1.25rem; }
.comparison-hub__inner { max-width: var(--max-w); margin: 0 auto; }
.comparison-hub__head { text-align: center; margin-bottom: 2.25rem; }
.comparison-hub__desc {
  max-width: 640px;
  margin: 0.75rem auto 0;
  color: #4b3f55;
  font-weight: 500;
}
.comparison-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.comparison-hub__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  padding: 1.4rem 1.25rem;
  border-radius: 12px;
  box-shadow: var(--card-shadow, 0 4px 14px rgba(15, 23, 42, 0.06));
  text-decoration: none;
  color: inherit;
  min-height: 130px;
  transition: transform .15s ease, box-shadow .15s ease;
  border: 1px solid transparent;
}
.comparison-hub__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  border-color: var(--color-accent);
}
.comparison-hub__card-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
  color: var(--color-footer);
}
.comparison-hub__card-cta {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.95rem;
}
.comparison-hub__empty { text-align: center; color: #555; padding: 2rem 0; }

/* =========================================================
   Comparison Archive  ( /comparison/{category}/ )
   ========================================================= */
/* ----- Category archive hero -------------------------------------- */
/* Mirrors the other page heroes (.about-hero, .contact-hero,
   .categories-hero, .products-hero) — full-bleed gradient with
   breadcrumb + eyebrow + title + description, plus the in-page
   search bar slotted into the bottom of the gradient as one
   continuous panel (same pattern as products-services). */
.category-archive-hero {
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  padding-block: 3.5rem 3.25rem;
  padding-inline: max(1.5rem, calc((100% - 1180px) / 2));
  text-align: center;
}
.category-archive-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.category-archive-hero__breadcrumb {
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-dark);
}
.category-archive-hero__breadcrumb a {
  color: var(--color-accent-dark);
  text-decoration: none;
}
.category-archive-hero__breadcrumb a:hover { text-decoration: underline; }
.category-archive-hero__breadcrumb span[aria-hidden] {
  margin: 0 .45rem;
  color: rgba(31, 73, 65, 0.45);
}
.category-archive-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 0.85rem;
}
.category-archive-hero__eyebrow::before,
.category-archive-hero__eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.7;
}
.category-archive-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 1rem;
  color: var(--color-footer);
  letter-spacing: -0.02em;
}
.category-archive-hero__title-accent {
  /* Plain term name — underline accent removed per design tweak.
     Kept as a span (instead of inlining) so future styling can scope
     the term name (e.g., a different color or weight) without
     touching the surrounding "Best" word. */
  color: inherit;
}
.category-archive-hero__copy {
  max-width: 640px;
  margin: 0 auto 1.75rem;
  color: #4b3f55;
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.55;
}
.category-archive-hero .hero-search {
  margin: 0 auto;
  max-width: 760px;
}
@media (max-width: 720px) {
  .category-archive-hero {
    padding-block: 2.5rem 2.5rem;
    padding-inline: 1.25rem;
  }
  .category-archive-hero__title { font-size: 1.85rem; }
  .category-archive-hero__copy { font-size: 1rem; }
}

/* Reversed gradient — .category-archive-hero ends at mid green, so
   this section starts at mid and fades to light for a seamless edge. */
.comparison-archive {
  /* No horizontal padding here — let the inner's max-width handle the
     rail so listing cards align with the header inner edges (which
     itself has no horizontal padding at desktop). At ≤1024px add the
     same 1.25rem padding the header uses, so they stay aligned. */
  padding: 2.5rem 0 4rem;
  background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%);
}
@media (max-width: 1024px) {
  .comparison-archive {
    /* Extra left padding on mobile so cards align with the logo's
       trophy icon position, matching the products-services pattern. */
    padding-inline-start: 1.85rem;
    padding-inline-end: 1.25rem;
  }
}
.comparison-archive__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  /* Slight asymmetric inset so cards align with logo trophy position
     on the left and menu right edge on the right. */
  padding-inline-start: 0.9rem;
  padding-inline-end: 0;
}
@media (max-width: 1024px) {
  .comparison-archive__inner {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}
.comparison-archive__head { margin-bottom: 2rem; }
.comparison-archive__breadcrumb {
  font-size: 0.9rem;
  color: #6b6577;
  margin: 0 0 0.75rem;
  font-weight: 500;
}
.comparison-archive__breadcrumb a {
  color: var(--color-link);
  text-decoration: none;
}
.comparison-archive__breadcrumb a:hover { text-decoration: underline; }
.comparison-archive__breadcrumb span[aria-hidden="true"] { margin: 0 .35rem; color: #1F4941; }
.comparison-archive__desc {
  max-width: 720px;
  color: #4b3f55;
  font-weight: 500;
  margin: .5rem 0 0;
}
.comparison-archive__empty {
  background: #fff;
  border: 1px dashed #e7d4d9;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  color: #4b3f55;
}

/* Comparison rows — 3-col detailed card layout (matches Top10.com style) */
.comparison-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  counter-reset: cmp;
}

.comparison-row {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  gap: 1.5rem;
  align-items: start;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.75rem 1.5rem 1.75rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  border: 1px solid #ececf2;
}
.comparison-row__rank {
  position: absolute;
  top: 0;
  left: 0;
  background: #0f172a;
  color: #fff;
  font-weight: 900;
  font-size: 0.95rem;
  padding: 4px 12px;
  border-radius: 12px 0 14px 0;
  letter-spacing: 0.02em;
  min-width: 32px;
  text-align: center;
}

.comparison-row__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 110px;
  padding: 0.5rem;
}
/* Compare checkbox positioned in the media column under the logo —
   common comparison-site UX so the user doesn't need to scan to the
   action column to mark items for comparison. */
.comparison-row__media .compare-checkbox {
  font-size: 0.85rem;
}
/* Fixed-box image rule: every brand logo renders in the same area regardless
   of source dimensions. object-fit:scale-down keeps aspect ratio AND prevents
   upscaling — wide logos letterbox, small favicons render at natural size
   (no blur). Upload a higher-res image via the Listing's Brand Logo field
   for premium full-size display. */
.comparison-row__logo {
  width: 160px;
  height: 100px;
  object-fit: scale-down;
  display: block;
  margin: 0 auto;
}
.comparison-row__logo-fallback {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-footer);
  text-align: center;
}

.comparison-row__body { min-width: 0; }
.comparison-row__title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
  color: var(--color-footer);
}
.comparison-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: #6b6577;
  margin: 0 0 0.85rem;
}
.comparison-row__review-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  border: 1.5px solid var(--color-accent);
  border-radius: 12px;
  background: #fff;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.comparison-row__review-link::after {
  content: "→";
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
.comparison-row__review-link:hover {
  background: #BAF498;
  color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  text-decoration: none;
  transform: translateY(-1px);
}
.comparison-row__review-link:hover::after { transform: translateX(2px); }
.comparison-row__reviews { color: var(--color-accent); font-weight: 600; }
.comparison-row__trustpilot { color: var(--color-trust-green); font-weight: 800; }
.comparison-row__trustpilot .trustpilot-star { color: var(--color-trust-green); }

.comparison-row__tagline {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.45;
  margin: 0 0 0.85rem;
}

.comparison-row__features { margin: 0; }
.comparison-row__features li {
  font-size: 0.92rem;
  color: #3b3046;
}

.comparison-row__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-top: 0.25rem;
}
/* Primary + secondary CTAs inherit the .listing-cta / .listing-link
   base padding (0.9rem 1rem) and font (1rem) — only need width here
   so they fill the action column. Identical site-wide button sizing. */
.comparison-row__cta,
.comparison-row__details {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.comparison-row__promo {
  color: var(--color-link);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}

/* Tablet + below: stack media / body / action as three full-width rows so
   the review-section (body) and CTA-section (action) each get the full
   container width. Breakpoint covers iPad landscape (1024px) and smaller. */
@media (max-width: 1024px) {
  .comparison-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "body"
      "action";
    gap: 0.4rem;
    padding: 1.5rem 1.5rem 1.25rem;
  }
  .comparison-row__media {
    grid-area: media;
    min-height: 60px;
    justify-content: center;
    padding: 0;
  }
  .comparison-row__body {
    grid-area: body;
    text-align: center;
  }
  .comparison-row__meta { justify-content: center; margin: 0 0 0.65rem; }
  /* Group-center the features list: ul shrinks to widest bullet's width,
     then margin auto centers the whole group — all bullets share the same
     left edge (clean), and the group sits in the middle of the card. */
  .comparison-row__features {
    width: max-content;
    max-width: 100%;
    margin: 0 auto 0.4rem;
  }
  .comparison-row__features li { margin-bottom: 0.4rem; }
  .comparison-row__tagline    { margin-bottom: 0.55rem; }
  .comparison-row__action {
    grid-area: action;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-top: 1px solid #f0eef4;
    padding-top: 0.85rem;
    margin-top: 0;
  }
  .comparison-row__action .top7-score-block { margin-bottom: 0; gap: 0.15rem; }
  .comparison-row__cta,
  .comparison-row__details { width: 100%; max-width: 360px; }
  .top7-score-block      { order: -1; }
  .comparison-row__promo,
  .comparison-row__phone { flex-basis: auto; justify-content: center; text-align: center; }
  .comparison-row__logo  { width: 120px; height: 64px; }
}

@media (max-width: 720px) {
  /* ── Listing-card parity on mobile ─────────────────────────────
     Dissolve .comparison-row__body and __action so their children
     become direct flex items of the row. Use flex-direction:row +
     flex-wrap:wrap so the rating row (score + stars + review count)
     can share a SINGLE visual line, while logo/title/features/CTA
     each force their own row via flex: 0 0 100%.

     Result matches the homepage listing-card EXACTLY:
       logo (own row)
       title (own row)
       4.4 ★★★★⭐ 40 Reviews (one row — score-block + meta share it)
       features (own row)
       Visit Site (own row)
       View Details (own row)                                      */
  .comparison-row {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.4rem 1.15rem 1.15rem;
    gap: 0;
  }
  .comparison-row .comparison-row__body,
  .comparison-row .comparison-row__action { display: contents; }

  /* Full-row items — each forces its own line via flex-basis:100% */
  .comparison-row .comparison-row__media {
    order: 1;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    min-height: unset;
    padding: 0;
    margin-bottom: 0.25rem;
  }
  .comparison-row .comparison-row__title {
    order: 2;
    flex: 0 0 100%;
    margin: 0.25rem 0 0.55rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #11151c;
    text-align: center;
    line-height: 1.25;
  }
  .comparison-row .comparison-row__features {
    order: 5;
    /* flex: 0 0 auto → ul shrinks to widest li's width (so all
       checkmarks share the same left edge), parent justify-content:
       center then centers the whole block on its own row. The rating
       row above (score+meta) and the CTA row below force features
       onto its own visual line because their combined width with
       features always exceeds 100%. */
    flex: 0 0 auto;
    width: max-content;
    max-width: calc(100% - 1rem);
    margin: 0 auto 1.15rem;
  }
  .comparison-row .comparison-row__cta {
    order: 6;
    flex: 0 0 100%;
    max-width: none;
    width: 100%;
    border-radius: 12px;
    margin: 0.4rem 0 0;
  }
  .comparison-row .comparison-row__details {
    order: 7;
    flex: 0 0 100%;
    max-width: none;
    width: 100%;
    border-radius: 12px;
    margin: 0.55rem 0 0;
  }

  /* Rating row — score-block + meta share ONE visual row.
     Both use flex: 0 0 auto so they don't force a wrap. */
  .comparison-row .top7-score-block {
    order: 3;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0.35rem 1rem 0;
    font-size: 0.85rem;
  }
  /* Match homepage listing-rating__score sizing — inline strong tag,
     not the chunky 1.5rem score block used elsewhere. */
  .comparison-row .top7-score-num {
    font-size: 0.9rem;
    font-weight: 800;
  }
  .comparison-row .top7-rating-label { display: none; }
  .comparison-row .comparison-row__meta {
    order: 4;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--color-accent);
    font-weight: 600;
  }

  /* Hide elements not present in listing-card */
  .comparison-row .comparison-row__tagline,
  .comparison-row .comparison-row__promo,
  .comparison-row .comparison-row__phone,
  .comparison-row .comparison-row__rank { display: none; }

  /* Logo: match listing-card size */
  .comparison-row .comparison-row__logo { width: 140px; height: 64px; object-fit: contain; }

  /* Compare checkbox — absolute top-right, visible by default on mobile
     (no hover affordance). Hide the "Compare" text label too — only
     the checkbox box stays, matching listing-card behaviour. */
  .comparison-row .comparison-row__media .compare-checkbox {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    padding: 0.3rem;
  }
  .comparison-row .comparison-row__media .compare-checkbox__label {
    display: none;
  }
}

@media (max-width: 520px) {
  .comparison-row { padding: 1.4rem 1.15rem 1.15rem; }
}

/* =========================================================
   Single Listing  ( /review/{slug}/ )
   ========================================================= */
/* Outer article no longer needs side padding — each section
   (.single-listing__inner) handles its own width. The hero panel
   sits flush edge-to-edge so the gradient covers the viewport. */
/* Solid mid green — picks up exactly where the hero ends (#BAF498
   at its bottom edge) so the join between hero and the listing body
   area is seamless. White content cards (about, features, verdict,
   related, reviews) sit on top of this for clean contrast. */
.single-listing { padding: 0 0 4rem; background: #BAF498; }
.single-listing__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.single-listing__inner:first-child { padding-top: 2rem; padding-bottom: 0; }
.single-listing__body-wrap { padding-top: 2.25rem; padding-bottom: 0.5rem; }
.single-listing__breadcrumb {
  font-size: 0.9rem;
  color: #6b6577;
  margin: 0 0 1rem;
  font-weight: 500;
}
.single-listing__breadcrumb a { color: var(--color-link); text-decoration: none; }
.single-listing__breadcrumb a:hover { text-decoration: underline; }
.single-listing__breadcrumb span[aria-hidden="true"] { margin: 0 .35rem; color: #1F4941; }
.single-listing__head {
  background: #fff;
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--card-shadow, 0 4px 14px rgba(15, 23, 42, 0.06));
  margin-bottom: 1.5rem;
}
.single-listing__logo {
  width: 220px;
  height: 96px;
  object-fit: scale-down;
  display: block;
  margin-bottom: 1rem;
}
.single-listing__title {
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0 0.75rem;
  color: var(--color-footer);
}
.single-listing__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: #4b3f55;
  margin: 0 0 1.25rem;
}
.single-listing__score {
  background: var(--color-trust-green);
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 800;
}
.single-listing__price {
  background: #DBF0CA;
  color: var(--color-accent-dark);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 700;
}
.single-listing__cta { display: inline-flex; }
.single-listing__h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 0.85rem;
  color: var(--color-footer);
}
.single-listing__about,
.single-listing__features,
.single-listing__verdict,
.single-listing__related {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--card-shadow, 0 4px 14px rgba(15, 23, 42, 0.06));
  margin-bottom: 1.5rem;
}
.single-listing__feature-list { margin: 0; }
.single-listing__body p { color: #3b3046; line-height: 1.7; }

/* ----- H2 headings inside the detail page sections --------------- */
.single-listing__h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-footer);
  letter-spacing: -0.01em;
}
.single-listing__h2-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(31, 73, 65, 0.10);
  color: var(--color-accent);
}

/* ==========================================================
   HERO BANNER — gradient panel at the top of every detail page
   ========================================================== */
.single-listing__hero {
  /* Uniform vertical gradient — matches the rest of the site's
     `light → mid` pattern so the hero bottom meets the body's
     solid mid green seamlessly, and the left/right edges don't
     show the diagonal banding the old 135deg multi-stop gradient
     produced. */
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  padding: 3rem 1.5rem 2.5rem;
  position: relative;
}
.single-listing__hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.single-listing__hero-eyebrow {
  display: inline-block;
  padding: 0.35rem 0.95rem;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-dark);
  text-decoration: none;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(4px);
}
.single-listing__hero-eyebrow:hover { background: #fff; }
.single-listing__hero-flex {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.single-listing__hero-logo-wrap {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
}
.single-listing__hero-logo {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.single-listing__hero-text { flex: 1; min-width: 0; }
.single-listing__hero-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-footer);
  letter-spacing: -0.02em;
}
.single-listing__hero-tagline {
  margin: 0 0 1.2rem;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #3b3046;
  font-weight: 500;
  max-width: 56ch;
}
.single-listing__hero-rating {
  margin: 0 0 1.5rem;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.single-listing__hero-score {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-trust-green);
  background: rgba(31, 73, 65, 0.12);
  padding: 0.1rem 0.7rem;
  border-radius: 12px;
  line-height: 1.2;
}
.single-listing__hero-rating-sep {
  color: #94a3b8;
  font-weight: 700;
}
.single-listing__hero-reviews-link {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: none;
}
.single-listing__hero-reviews-link:hover { text-decoration: underline; }
.single-listing__hero-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
}
.single-listing__hero-cta {
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
}
.single-listing__hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.2rem;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  transition: background 0.15s ease;
}
.single-listing__hero-phone:hover { background: #fff; text-decoration: none; }

/* ==========================================================
   BODY — two-column on desktop (main + sticky aside)
   ========================================================== */
.single-listing__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
  align-items: start;
}
.single-listing__main { min-width: 0; }
.single-listing__aside { min-width: 0; }
.single-listing__aside-card {
  position: sticky;
  top: 5.5rem; /* clear the sticky header */
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.05);
}
.single-listing__aside-title {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-dark);
}
.single-listing__facts {
  margin: 0 0 1.25rem;
  border-top: 1px solid var(--color-border);
}
.single-listing__fact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.single-listing__fact-row dt {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64708a;
}
.single-listing__fact-row dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  text-align: right;
}
.single-listing__fact-row dd a { color: var(--color-link); text-decoration: none; }
.single-listing__fact-row dd a:hover { text-decoration: underline; }
.single-listing__fact-sub {
  font-size: 0.82rem;
  font-weight: 500;
  color: #64708a;
  margin-left: 0.2rem;
}
.single-listing__aside-cta {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}
.single-listing__aside-jump {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.65rem 1rem;
  background: transparent;
  color: var(--color-link);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.15s ease;
}
.single-listing__aside-jump:hover { background: rgba(31, 73, 65, 0.08); text-decoration: none; }

/* ----- About this product (lead paragraph) ----------------------- */
.single-listing__lead {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.7;
  color: #3b3046;
  font-weight: 500;
}

/* ----- Why choose X — Pros grid ---------------------------------- */
.single-listing__pros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.single-listing__pro-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: rgba(31, 73, 65, 0.06);
  border: 1px solid rgba(31, 73, 65, 0.20);
  border-radius: 12px;
}
.single-listing__pro-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #0f172a;
  font-weight: 500;
}
.single-listing__pro-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 12px;
  background: var(--color-trust-green);
  color: #fff;
  margin-top: 1px;
}

/* ----- Editor's Verdict ----------------------------------------- */
.single-listing__verdict-body p {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #3b3046;
}
.single-listing__verdict-body p:last-child { margin-bottom: 0; }
.single-listing__verdict-body p:first-of-type::first-letter {
  /* Drop cap on the opening paragraph of the verdict — gives the
     editorial section a touch of magazine polish. */
  float: left;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 800;
  color: var(--color-accent);
  margin: 0.15rem 0.55rem 0 0;
}

/* ----- Related products grid -------------------------------------- */
.single-listing__related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.single-listing__related-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.25rem;
  background: #ECF4E8;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.single-listing__related-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(31, 73, 65, 0.10);
}
.single-listing__related-logo {
  width: 56px;
  height: 56px;
  object-fit: scale-down;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  border: 1px solid var(--color-border);
}
.single-listing__related-title {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.25;
}
.single-listing__related-title a {
  color: #0f172a;
  text-decoration: none;
}
.single-listing__related-title a:hover { color: var(--color-accent); }
.single-listing__related-rating {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--color-trust-green);
  font-weight: 700;
}
.single-listing__related-cta {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}
.single-listing__related-cta:hover { text-decoration: underline; }

/* ----- "View all reviews" link at the bottom of details-page
   reviews preview (only shown when total > 7). Reads as a secondary
   link, not a heavy button — the visitor's primary action on this
   page is still the affiliate CTA in the hero. */
.single-listing__view-all-reviews {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.25rem 0 1.75rem;
  padding: 0.6rem 1.1rem;
  background: rgba(31, 73, 65, 0.08);
  color: var(--color-link);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.single-listing__view-all-reviews:hover {
  background: rgba(31, 73, 65, 0.16);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ----- Reviews-pagination (used on /details/{slug}/all-reviews/) -- */
.top7-reviews-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0 2.5rem;
}
.top7-reviews-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.85rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  color: #0f172a;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.top7-reviews-pagination .page-numbers:hover {
  background: #ECF4E8;
  border-color: var(--color-accent);
}
.top7-reviews-pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ----- All-reviews focused view ---------------------------------- */
/* The all-reviews URL (`/details/{slug}/all-reviews/`) shares the
   single-listing template but renders a focused reviews view. The
   hero below is its own full-bleed gradient panel (matching the
   rest of the site's heros) — breadcrumb, eyebrow, brand + title,
   live rating summary, back-to-product link. */
.single-listing--all-reviews {
  padding-top: 0;
}
.all-reviews-hero {
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  padding-block: 3rem 3rem;
  padding-inline: max(1.5rem, calc((100% - 1180px) / 2));
  text-align: center;
}
/* Force every child to live on its own row (flex column) so the
   eyebrow, brand, rating summary, and back-link don't wrap into a
   single line just because each is `display: inline-flex`. The gap
   replaces the per-child top/bottom margins. */
.all-reviews-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.all-reviews-hero__breadcrumb,
.all-reviews-hero__eyebrow,
.all-reviews-hero__brand,
.all-reviews-hero__summary,
.all-reviews-hero__back {
  margin: 0;
}
.all-reviews-hero__breadcrumb {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-dark);
}
.all-reviews-hero__breadcrumb a {
  color: var(--color-accent-dark);
  text-decoration: none;
}
.all-reviews-hero__breadcrumb a:hover { text-decoration: underline; }
.all-reviews-hero__breadcrumb span[aria-hidden] {
  margin: 0 .45rem;
  color: rgba(31, 73, 65, 0.45);
}
.all-reviews-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 0.85rem;
}
.all-reviews-hero__eyebrow::before,
.all-reviews-hero__eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.7;
}
.all-reviews-hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1rem;
}
.all-reviews-hero__logo {
  width: 56px;
  height: 56px;
  object-fit: scale-down;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
.all-reviews-hero__title {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-footer);
  letter-spacing: -0.02em;
}
.all-reviews-hero__summary {
  margin: 0 0 1.25rem;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  font-size: 1rem;
  color: var(--color-footer);
  font-weight: 600;
}
.all-reviews-hero__score {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-accent);
  background: rgba(255, 255, 255, 0.65);
  padding: 0.05rem 0.65rem;
  border-radius: 12px;
  line-height: 1.2;
}
.all-reviews-hero__score-max {
  color: rgba(31, 73, 65, 0.55);
  font-weight: 700;
}
.all-reviews-hero__count {
  font-size: 0.95rem;
  color: #4b3f55;
  font-weight: 500;
}
.all-reviews-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-accent-dark);
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.all-reviews-hero__back:hover {
  background: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

@media (max-width: 720px) {
  .all-reviews-hero { padding-block: 2.25rem 2.25rem; padding-inline: 1.25rem; }
  .all-reviews-hero__brand { flex-direction: column; gap: 0.5rem; }
  .all-reviews-hero__title { font-size: 1.6rem; }
  .all-reviews-hero__logo { width: 48px; height: 48px; }
  .all-reviews-hero__score { font-size: 1.3rem; }
}

/* ----- Reviews section heading layout ----------------------------- */
.single-listing__reviews {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--card-shadow, 0 4px 14px rgba(15, 23, 42, 0.06));
  margin-bottom: 1.5rem;
}
.single-listing__reviews-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.single-listing__reviews-head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}
.single-listing__reviews-head .single-listing__h2 { margin: 0; }
.single-listing__reviews-summary {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: #64708a;
}
.single-listing__reviews-summary strong {
  font-size: 1.3rem;
  color: var(--color-trust-green);
}
/* Right-side "View all reviews" link — sits opposite the title +
   summary block, vertically centered against the header's start. */
.single-listing__reviews-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
  align-self: center;
}
.single-listing__reviews-view-all:hover {
  background: var(--color-accent-dark);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}
@media (max-width: 600px) {
  .single-listing__reviews-view-all { align-self: stretch; justify-content: center; }
}

/* ----- Floating "Read Reviews" jump button ------------------------ */
.single-listing-jump {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--color-accent);
  color: #fff !important;
  border-radius: 12px;
  padding: 0.85rem 1.35rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(31, 73, 65, 0.35);
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.15s ease;
}
.single-listing-jump:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  color: #fff !important;
  text-decoration: none !important;
}
.single-listing-jump:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.single-listing-jump__label { line-height: 1; }
.single-listing-jump__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.5rem;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 800;
}
.single-listing-jump.is-hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

/* Mobile tweaks */
@media (max-width: 900px) {
  .single-listing__layout { grid-template-columns: 1fr; }
  .single-listing__aside-card { position: static; }
  .single-listing__related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .single-listing__hero { padding: 2.25rem 1.25rem 2rem; }
  .single-listing__hero-flex { flex-direction: column; gap: 1.25rem; }
  .single-listing__hero-logo-wrap { width: 88px; height: 88px; padding: 10px; }
  .single-listing__hero-title { font-size: 1.6rem; }
  .single-listing__hero-tagline { font-size: 1rem; }
  .single-listing__hero-score { font-size: 1.4rem; }
  .single-listing__about,
  .single-listing__features,
  .single-listing__verdict,
  .single-listing__related,
  .single-listing__reviews { padding: 1.25rem; }
  .single-listing__h2 { font-size: 1.2rem; }
  .single-listing__h2-icon { width: 30px; height: 30px; }
  .single-listing__pros-grid { grid-template-columns: 1fr; }
  .single-listing__related-grid { grid-template-columns: 1fr; }
  .single-listing-jump {
    right: 1rem;
    bottom: 1rem;
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
  }
}

/* Orphan single-listing styles from a previous iteration were removed
   here — the active rules now live in the consolidated block above,
   styled around the hero + two-column layout. */

/* =========================================================
   Star rating block
   ─────────────────────────────────────────────────────────
   Two stacked layers: gray "★★★★★" track + gold overlay
   clipped to width = (rating / 10) * 100%. Works for any
   partial fill (9.5 → 95% gold = 4.75 stars filled).

   Both layers MUST use identical font, line-height, letter-
   spacing, and display so the gold overlay sits pixel-perfect
   on top of the gray track (no misaligned stars).
   ========================================================= */
.top7-stars {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
  letter-spacing: 0.08em;
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-feature-settings: normal;
  font-variant-ligatures: none;
}
.top7-stars__bg,
.top7-stars__fill {
  display: inline-block;
  line-height: 1;
  letter-spacing: inherit;
  font-family: inherit;
  font-style: normal;
  font-weight: normal;
  vertical-align: top;
}
.top7-stars__bg {
  color: #BAF498;
}
.top7-stars__fill {
  color: #ffb420; /* gold */
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}
.top7-stars--sm { font-size: 1.2rem; }
.top7-stars--md { font-size: 1.65rem; }
.top7-stars--lg { font-size: 2.2rem; }

/* Verbal rating tier label ("Excellent", "Very Good", etc.) — sits
   directly below the stars in score blocks, both frontend + admin. */
.top7-rating-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1F4941;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-block;
  margin-top: 0.15rem;
}

/* =========================================================
   Compare checkbox (sitewide on listing cards)
   Custom-styled native <input type="checkbox"> wrapped in a <label>:
   - input is visually hidden but keyboard-focusable + screen-reader friendly
   - .compare-checkbox__box is the visual box (state via :checked sibling)
   - .compare-checkbox__label is the "Compare" text next to the box
   ========================================================= */
.compare-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-link);
  user-select: none;
  line-height: 1;
}
.compare-checkbox__input {
  /* Visually hidden but still focusable + interactive */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.compare-checkbox__box {
  width: 18px;
  height: 18px;
  border: 2px solid #c4c9d4;
  border-radius: 4px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
  color: transparent; /* hides the SVG checkmark when unchecked */
}
.compare-checkbox:hover .compare-checkbox__box {
  border-color: var(--color-link);
}
.compare-checkbox__input:checked + .compare-checkbox__box {
  background: var(--color-link);
  border-color: var(--color-link);
  color: #fff;
}
.compare-checkbox__input:focus-visible + .compare-checkbox__box {
  box-shadow: 0 0 0 3px rgba(31, 73, 65, 0.25);
}
.compare-checkbox.is-selected .compare-checkbox__label {
  color: var(--color-link);
}
.compare-checkbox--lg {
  font-size: 0.95rem;
  gap: 0.6rem;
}
.compare-checkbox--lg .compare-checkbox__box {
  width: 22px;
  height: 22px;
}
/* Primary CTA stack — "View Details" (outlined) on top, "Visit Site"
   (solid) underneath. Both span the card's full width with matching
   padding + radius so they read as a consistent pair of actions
   rather than mismatched styles. The outlined pill stays secondary
   (white bg, accent border), the solid CTA stays primary (filled
   accent bg, white text) — different paint but same shape + size. */
.listing-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  margin-top: 0.65rem;
  align-self: stretch;
}
.listing-card__actions .listing-link,
.listing-card__actions .listing-cta {
  width: 100%;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  border-radius: 12px;
}

/* The card footer now only carries the Compare checkbox — keep
   it centered + full width so it lines up under the two CTAs. */
.listing-card__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.listing-card__footer .compare-checkbox {
  width: 100%;
  justify-content: center;
}
.single-listing__compare { margin-top: 0.65rem; }

/* =========================================================
   Floating compare tray (bottom-fixed, wp_footer injected)
   ========================================================= */
.compare-tray {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 1000;
  /* Dark green from the palette — matches the footer + primary CTAs
     so the tray reads as the same theme. */
  background: var(--color-footer);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(31, 73, 65, 0.35);
  width: calc(100% - 2rem);
  max-width: 640px;
  animation: top7-tray-slide 0.25s ease;
  border: 1px solid rgba(186, 244, 152, 0.25);
}
.compare-tray[hidden] { display: none; }
@keyframes top7-tray-slide {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.compare-tray__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
}
.compare-tray__info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.compare-tray__title {
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.compare-tray__count {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.8rem;
}
.compare-tray__items {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.compare-tray__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.compare-tray__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* Mid green pops against the dark-green tray bg (using --color-accent
     would blend, since both are dark green). White text stays readable
     on this lighter green. */
  background: #BAF498;
  color: var(--color-footer);
  font-weight: 800;
  padding: 0.55rem 1.1rem;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.compare-tray__btn:hover {
  background: #BDF59E;
  transform: translateY(-1px);
}
.compare-tray__btn.is-disabled {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  pointer-events: auto;
}
.compare-tray__clear {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.compare-tray__clear:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* =========================================================
   /compare/ page
   ========================================================= */
/* =====================================================================
   /compare/ — page-level chrome
   Hero strip mirrors About Us / Products & Services so the compare page
   sits inside the site's standard light→mid green visual rhythm
   (light green hero → mid green body → footer).
   ===================================================================== */
/* ================================================================
   Compare page — premium dark hero + clean table section
   ================================================================ */
.compare-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Matches the site-wide hero palette used on About, Products,
     Category-archive, etc. — light green at top fading to mid green. */
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  padding: 3.5rem 1.25rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.compare-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* Breadcrumb + desc + title use the dark green / accent palette
   on the light hero, matching other hero panels site-wide. */
.compare-hero .compare__breadcrumb {
  color: #4b3f55;
}
.compare-hero .compare__breadcrumb a {
  color: var(--color-link);
}
.compare-hero .compare__breadcrumb a:hover { color: var(--color-accent-dark); }
.compare-hero .compare__breadcrumb span[aria-hidden="true"] {
  color: #1F4941;
  margin: 0 .35rem;
}
.compare-hero .section-title {
  color: #11151c;
}
.compare-hero .section-title__accent {
  color: var(--color-accent);
}
.compare-hero .compare__desc {
  color: #143430;
}

/* Compare stats strip — 3 quick trust numbers below the description */
.compare-hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}
.compare-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.compare-hero__stat-num {
  font-size: 1.3rem;
  font-weight: 900;
  color: #BAF498;
  line-height: 1;
}
.compare-hero__stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.compare-hero__stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.15);
}
@media (max-width: 600px) {
  .compare-hero__stat-divider { display: none; }
  .compare-hero__stats { gap: 1.25rem; }
}

/* ---- Table section ---- Matches the comparison-archive section
       gradient: mid green at the top (continuing from the hero's
       gradient bottom) fading down to the soft light green used
       site-wide. */
.compare {
  background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%);
  padding: 0 1.25rem 5rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
}

.compare__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 1rem;
  position: relative;
  z-index: 1;
}
.compare__breadcrumb {
  font-size: 0.9rem;
  color: #4b3f55;
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.compare__breadcrumb a { color: var(--color-link); text-decoration: none; }
.compare__breadcrumb a:hover { text-decoration: underline; }
.compare__breadcrumb span[aria-hidden="true"] { margin: 0 .35rem; color: #1F4941; }
.compare__desc {
  max-width: 640px;
  margin: 0.75rem auto 0;
  color: #143430;
  font-weight: 500;
}

/* Back-to-Products link rendered as the table's corner cell — same
   light-green background as the label column so it reads as part of
   the table's structural chrome, not a floating chrome button. */
.compare-table__back {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.3rem;
  text-decoration: none;
  background: linear-gradient(180deg, #ECF4E8 0%, #DBF0CA 100%) !important;
  border: 1px solid #d4e6c8 !important;
  padding: 0.6rem 0.75rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  color: var(--color-accent);
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1.2;
  /* Smooth, multi-property easing — no border-color swap so the cell
     keeps its soft edge throughout the interaction. */
  transition: background 0.25s ease,
              transform   0.25s cubic-bezier(0.34, 1.2, 0.4, 1),
              box-shadow  0.25s ease;
}
.compare-table__back:hover {
  /* Brighter green wash + subtle lift + softer shadow halo. Border stays
     the same calm #d4e6c8 throughout — no harsh dark outline. */
  background: linear-gradient(180deg, #DBF0CA 0%, #BAF498 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(31, 73, 65, 0.18) !important;
}
.compare-table__back-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-accent);
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.4, 1),
              background 0.25s ease,
              color      0.25s ease;
}
.compare-table__back:hover .compare-table__back-arrow {
  /* Slide left + flip to filled green — the arrow visually previews
     the "go back" intent. */
  transform: translateX(-4px);
  background: var(--color-accent);
  color: #fff;
}
.compare-table__back-text { display: inline-block; }

/* Horizontal-scroll wrapper around the table. Inactive on wide screens;
   becomes the scroll viewport on narrow ones so the table never has
   to squish or get replaced by a stacked layout. */
.compare-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #BAF498 transparent;
}
.compare-table-scroll::-webkit-scrollbar { height: 6px; }
.compare-table-scroll::-webkit-scrollbar-track { background: transparent; }
.compare-table-scroll::-webkit-scrollbar-thumb { background: #BAF498; border-radius: 3px; }

/* Helper hint shown under the table when the user could still add more
   listings (replaces the heavy bottom "Back" card with a quieter line). */
.compare__hint {
  margin: 1.25rem auto 0;
  text-align: center;
  color: #143430;
  font-size: 0.92rem;
  font-weight: 500;
}
.compare__hint strong { color: var(--color-accent); }

/* =====================================================================
   /compare/ — desktop comparison table
   First column is the attribute label, remaining N columns are the
   selected listings. Children are laid out in row-major order so each
   "row" maps to one attribute across all listings (proper table UX).
   ===================================================================== */
.compare-table {
  display: grid;
  grid-template-columns: 170px repeat(var(--compare-cols, 2), minmax(0, 1fr));
  /* Visible gap between cells — each cell is its own bordered card,
     no monolithic table background. Rows still align because of grid. */
  gap: 10px;
}
.compare-table__corner,
.compare-table__head,
.compare-table__label,
.compare-table__cell {
  background: #fff;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid #ececf2;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.compare-table__corner {
  background: transparent;
  border: none;
  box-shadow: none;
}

.compare-table__head {
  position: relative;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  /* Right padding clears space for the absolute × button */
  padding: 0.7rem 2.5rem 0.75rem 0.85rem;
  border-top: 3px solid #BAF498;
  box-shadow: 0 4px 20px rgba(31, 73, 65, 0.10);
}
/* Stack logo → rating vertically so neither row conflicts with the
   × button that sits absolute at top-right. */
.compare-table__head-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.compare-table__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ECF4E8;
  border: none;
  color: #6b6577;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.compare-table__remove:hover { background: var(--color-accent); color: #fff; }
.compare-table__head-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 36px;
  flex: 0 0 auto;
}
.compare-table__head-logo img {
  width: 75px;
  height: 34px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
}
.compare-table__head-fallback {
  font-size: 1rem;
  font-weight: 900;
  color: var(--color-footer);
}
.compare-table__head-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-footer);
  line-height: 1.25;
}
.compare-table__head-title a { color: inherit; text-decoration: none; }
.compare-table__head-title a:hover { color: var(--color-accent); }
.compare-table__head-rating {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
/* View Details — secondary CTA inside the Visit cell, sits below the
   primary listing-cta. Reuses .listing-link (same padding/font/radius
   as .listing-cta) so the buttons read as a matched pair without
   per-context padding overrides — only width here. */
.compare-table__details {
  width: 100%;
  justify-content: center;
}

.compare-table__label {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #1F4941;
  background: #E4F1DF;
  border-color: #d4e8cc;
  display: flex;
  align-items: center;
}
.compare-table__cell {
  font-size: 0.95rem;
  color: #2c2540;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}
.compare-table__cell--strong { font-weight: 700; font-size: 1.05rem; }
.compare-table__cell--text   { font-weight: 500; }
.compare-table__cell--cta    { padding: 0.7rem 0.85rem; align-items: stretch; gap: 0.4rem; }
.compare-table__cell .listing-features { margin: 0; }
.compare-table__sub  { font-size: 0.82rem; color: #6b6577; font-weight: 500; }
.compare-table__empty { color: #1F4941; font-style: italic; }
/* Compact CTAs inside the Visit cell — buttons are smaller than the
   site-wide .listing-cta / .listing-link defaults so the Visit row
   doesn't dwarf its neighbouring rows. Margin-bottom on .listing-cta
   is also zeroed since the column flex+gap already spaces them. */
.compare-table__cta,
.compare-table__details {
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  font-size: 0.88rem;
  border-radius: 10px;
  margin-bottom: 0;
}

/* Mobile cards container — defaults to hidden (table shows on desktop). */
.compare-cards {
  display: none;
}

.compare-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  border: 1px solid #ececf2;
  display: flex;
  flex-direction: column;
}
.compare-card__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ECF4E8;
  color: #6b6577;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.compare-card__remove:hover {
  background: var(--color-accent);
  color: #fff;
}
.compare-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  margin-bottom: 0.75rem;
}
.compare-card__logo {
  width: 140px;
  height: 70px;
  object-fit: scale-down;
  display: block;
}
.compare-card__brand-fallback {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--color-footer);
  text-align: center;
}
.compare-card__title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--color-footer);
}
.compare-card__title a { color: inherit; text-decoration: none; }
.compare-card__title a:hover { color: var(--color-accent); }
.compare-card__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0eef4;
}
.compare-card__attrs {
  margin: 0 0 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.compare-card__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.compare-card__row dt {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b8294;
}
.compare-card__row dd {
  margin: 0;
  font-size: 0.95rem;
  color: #2c2540;
  font-weight: 500;
}
.compare-card__row--features dd ul.listing-features { margin: 0; }
.compare-card__cta {
  width: 100%;
  margin-top: auto;
}
/* Mobile "View Details" — same site-wide .listing-link style; only need
   width + margin overrides here, padding/font come from the base. */
.compare-card__details {
  width: 100%;
  justify-content: center;
  margin-top: 0.55rem;
}
.compare-card__phone {
  margin-top: 0.5rem;
  justify-content: center;
}

/* "Back to Listings" — standalone clickable card placed BELOW the
   .compare-table / .compare-cards (sibling, not child). Full-width on mobile so it doesn't
   join the horizontal scroll-snap row; centered max-width on desktop. */
.compare-card--back {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ECF4E8;
  border: 2px dashed #d0d6e0;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
  cursor: pointer;
  margin: 1.5rem auto 0;
  max-width: 480px;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 12px;
}
.compare-card--back:hover {
  border-color: var(--color-link);
  background: #ECF4E8;
  transform: translateY(-2px);
}
.compare-card__back-icon {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-link);
  background: #DBF0CA;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all 0.15s ease;
}
.compare-card--back:hover .compare-card__back-icon {
  background: var(--color-link);
  color: #fff;
}
.compare-card__back-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-footer);
  margin: 0 0 0.5rem;
}
.compare-card__back-desc {
  font-size: 0.85rem;
  color: #6b6577;
  margin: 0;
  line-height: 1.5;
}

/* Empty state when no items selected at all */
.compare__empty {
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 3rem 1.5rem;
  border: 1px solid #ececf2;
  max-width: 560px;
  margin: 0 auto;
}
.compare__empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.compare__empty h2 { margin: 0 0 0.5rem; }
.compare__empty p { color: #4b3f55; margin: 0 0 1rem; }

/* Mobile: keep the SAME table — just enable horizontal scrolling via
   the wrapper. Table maintains its grid widths so columns stay legible
   instead of being squished into a stacked layout. */
@media (max-width: 768px) {
  /* Tighter columns on mobile so the rightmost product peeks in view
     (UX hint that the table scrolls horizontally) without needing to
     scroll a long way to see two products fully. */
  .compare-table {
    grid-template-columns: 80px repeat(var(--compare-cols, 2), minmax(170px, 1fr));
    gap: 5px;
  }
  /* Hide the legacy mobile-cards layout — table is the single truth now. */
  .compare-cards { display: none; }

  /* All body cells: small + tight */
  .compare-table__corner,
  .compare-table__head,
  .compare-table__label,
  .compare-table__cell { padding: 0.55rem 0.6rem; }

  .compare-table__head      { padding: 0.5rem 1.8rem 0.55rem 0.6rem; gap: 0.25rem; }
  .compare-table__head-logo { height: 28px; }
  .compare-table__head-logo img { width: 58px; height: 26px; }
  .compare-table__head-rating {
    font-size: 0.78rem;
    gap: 0.25rem;
  }
  .compare-table__head-rating .top7-score-num { font-size: 0.92rem; }
  .compare-table__head-rating .top7-rating-label { font-size: 0.66rem; }
  .compare-table__head-title { font-size: 0.8rem; line-height: 1.2; }
  .compare-table__remove { width: 20px; height: 20px; font-size: 0.85rem; top: 4px; right: 4px; left: auto; }

  .compare-table__label  { font-size: 0.6rem; letter-spacing: 0.06em; }
  .compare-table__cell   { font-size: 0.82rem; line-height: 1.4; }
  .compare-table__cell--strong { font-size: 0.88rem; }
  .compare-table__cell--cta { padding: 0.6rem 0.6rem; gap: 0.4rem; }
  .compare-table__cell .listing-features li { font-size: 0.78rem; margin-bottom: 0.35rem; }
  .compare-table__cell .listing-features li::before { width: 14px; height: 14px; }
  .compare-table__sub   { font-size: 0.7rem; }

  /* CTAs inside the Visit row — smaller padding/font so they don't
     dwarf the rest of the column on a narrow screen. */
  .compare-table__cta,
  .compare-table__details {
    padding: 0.5rem 0.6rem;
    font-size: 0.78rem;
    border-radius: 10px;
  }

  /* Compact back-cell on mobile — fits in the corner slot without
     forcing the column row taller. */
  .compare-table__back        { padding: 0.5rem 0.5rem !important; font-size: 0.66rem; gap: 0.25rem; }
  .compare-table__back-arrow  { width: 20px; height: 20px; font-size: 0.85rem; }
  .compare-table__back-text   { font-size: 0.66rem; line-height: 1.15; }
}

@media (max-width: 520px) {
  .compare-tray__inner { padding: 0.75rem 0.85rem; flex-wrap: wrap; }
  .compare-tray__items { display: none; }
  .compare-tray__btn { padding: 0.5rem 0.85rem; font-size: 0.85rem; }
  .compare-table {
    grid-template-columns: 84px repeat(var(--compare-cols, 2), minmax(170px, 1fr));
  }
}

/* =========================================================
   Phone link block — appears under the CTA button when a
   listing has an optional phone number set.
   ========================================================= */
.comparison-row__phone,
.single-listing__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-link);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.comparison-row__phone { font-size: 0.95rem; }
.single-listing__phone {
  font-size: 1.05rem;
  margin-top: 0.6rem;
}
.comparison-row__phone:hover,
.single-listing__phone:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}
.top7-phone-icon {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Score + stars combo block (used in comparison row + single listing) */
.top7-score-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}
.top7-score-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: #1F4941;
  line-height: 1;
}
.top7-score-num--inline {
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

/* =========================================================
   /contact-us/ page  (100% Gutenberg-driven; admin lays out
   the page in the block editor and drops a form-plugin
   shortcode like [contact-form-7 id="123"] into a Shortcode
   block. Styles cover the seeded hero/info wrappers + Contact
   Form 7's default markup so any CF7 form drops in branded.)
   ========================================================= */

/* Solid mid green — matches the hero's bottom edge color (#BAF498)
   exactly, so the join between hero and the page area below it is
   seamless (no gradient ramp that would create a visible transition
   strip). Lower portion of the page stays this color all the way to
   the dark green footer; padding-bottom + min-height ensure the
   section fills the area between the form and the footer so the
   lighter body bg (#ECF4E8) never peeks through as a stray strip. */
.contact-page {
  background: #BAF498;
  padding-bottom: 4rem;
  min-height: 60vh;
}
.contact-page__inner > * { margin: 0; }

/* Hero (seeded as a wp:group with .contact-hero)
   Escapes the .contact-page__inner 1180px constraint via viewport-bleed
   so the gradient spans the full viewport (no white side strips), then
   centers content within a 1280px band via the padding-inline trick. */
.contact-hero {
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: 4.5rem 5rem;
  padding-inline: max(1.25rem, calc((100% - 1280px) / 2));
  text-align: center;
}
.contact-hero__eyebrow {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-hero__eyebrow::before,
.contact-hero__eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  vertical-align: middle;
  opacity: 0.7;
}
.contact-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 1.25rem;
  color: var(--color-footer);
  letter-spacing: -0.02em;
}
.contact-hero__copy {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #4b3f55;
  font-weight: 500;
  line-height: 1.55;
}

/* Contact layout — the seeded markup is a two-column block (form on
   the left, "Other ways to reach us" info card on the right). Per UX
   request the right column is hidden and the form column expanded to
   full width as one polished card panel. The .contact-info group is
   hidden via the second selector below in case admins re-add it. */
.wp-block-columns.contact-columns {
  display: block !important;
  max-width: 880px;
  margin: -3rem auto 0;
  padding: 0 1.25rem;
  position: relative;
  z-index: 2;
}
.wp-block-columns.contact-columns > .wp-block-column {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #fff;
  border: 1px solid rgba(31, 73, 65, 0.12);
  border-radius: 16px;
  padding: 2.75rem 2.5rem;
  box-shadow: 0 16px 40px rgba(31, 73, 65, 0.10), 0 2px 8px rgba(15, 23, 42, 0.04);
}
/* Hide the second column (the "Other ways to reach us" info block) —
   plus a fallback to hide the .contact-info group anywhere it lives. */
.wp-block-columns.contact-columns > .wp-block-column:nth-child(2),
.wp-block-group.contact-info {
  display: none !important;
}
.wp-block-columns.contact-columns h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.65rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--color-footer);
  letter-spacing: -0.01em;
  text-align: center;
}
.wp-block-columns.contact-columns p {
  line-height: 1.65;
  color: #3b3046;
  font-size: 1.02rem;
  text-align: center;
  margin: 0 auto 1.5rem;
  max-width: 580px;
}
.wp-block-columns.contact-columns code {
  background: #ECF4E8;
  color: var(--color-accent-dark);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.86rem;
  font-family: Menlo, Consolas, monospace;
}

@media (max-width: 720px) {
  .wp-block-columns.contact-columns { margin: -2rem auto 3rem; padding: 0 1rem; }
  .wp-block-columns.contact-columns > .wp-block-column { padding: 1.75rem 1.4rem; border-radius: 12px; }
}

/* ---- Native theme contact form (rendered by [top7_contact_form]) ----
   Sits inside the .wp-block-columns layout from the seeded Gutenberg
   content. Two-up rows for name/email and phone/subject; full-width
   textarea. AJAX submission lives in assets/js/contact.js. */
.contact-form { margin: 0; padding: 0; }
.contact-form__title {
  margin: 0.5rem 0 1.75rem;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 800;
  color: var(--color-footer);
  letter-spacing: -0.01em;
  text-align: center;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.4rem;
  margin-bottom: 1.1rem;
}
@media (max-width: 600px) {
  .contact-form__row { grid-template-columns: 1fr; gap: 0.85rem; }
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.contact-field--full {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.contact-field__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-footer);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.contact-field__req { color: var(--color-accent); }
.contact-field__optional {
  font-size: 0.78rem;
  font-weight: 500;
  color: #6b6577;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: #2c2540;
  background: #fff;
  border: 1.5px solid #BAF498;
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #8b8294;
  font-weight: 500;
}
.contact-field textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.5;
  font-family: inherit;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgba(31, 73, 65, 0.18);
}
.contact-field input.is-invalid,
.contact-field select.is-invalid,
.contact-field textarea.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.contact-field__error {
  display: block;
  min-height: 1.05rem;
  font-size: 0.82rem;
  color: #dc2626;
  font-weight: 600;
  line-height: 1.3;
}
.contact-field__error:empty { min-height: 0; }

/* Honeypot — visually hidden but submittable */
.contact-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-form__actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  padding: 0.85rem 2rem;
  border-radius: 12px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(31, 73, 65, 0.28);
}
.contact-form__submit:hover:not(:disabled) {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(31, 73, 65, 0.36);
}
.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.contact-form__submit.is-loading .contact-form__submit-arrow {
  animation: top7-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes top7-spin { to { transform: rotate(360deg); } }
.contact-form__privacy {
  margin: 0;
  font-size: 0.82rem;
  color: #6b6577;
  flex: 1 1 240px;
  line-height: 1.45;
}

.contact-form__feedback {
  margin-top: 1.25rem;
  padding: 0.95rem 1.15rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.93rem;
  line-height: 1.5;
  border: 1px solid transparent;
}
.contact-form__feedback--success {
  background: #ECF4E8;
  color: #065f43;
  border-color: #1F4941;
}
.contact-form__feedback--error {
  background: #fef2f2;
  color: #991b1b;
  border-color: #dc2626;
}

@media (max-width: 600px) {
  .contact-form__submit { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
  .contact-hero { padding-block: 3.25rem 4rem; }
}

/* =========================================================
   Search results — /?s=…&top7_category=… (hero search bar)
   ========================================================= */

/* Solid mid-green body — picks up where the hero gradient ends
   (#BAF498 at its bottom edge) and continues flat to the footer,
   matching About Us / Products & Services / Contact pattern.

   Compound `.search-results.blog-page` (2-class specificity) so it
   wins over the later-declared `.blog-page` rule that paints a
   competing mid→light gradient — without that bump the cascade picked
   the gradient and the page showed an unwanted fade band right around
   the floating search-bar seam. */
.search-results.blog-page {
  background: #BAF498;
  /* No outer padding — the hero panel above sits flush against the site
     header, and the results grid below uses its own inner padding. */
  padding: 0;
}
.search-results__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  /* Top padding is small now because the search form lives inside
     the hero above — no extra gap needed before the results list. */
  padding: 1.5rem 1.5rem 4rem;
}

/* Search-page hero spacing — give the inline search form a small
   breathing margin above ("1 result found" text), and tighten the
   hero's bottom padding so the gap to the first result card stays
   short. Scoped to .search-results so other .blog-page heroes
   (single posts, archive) keep their wider hero padding. */
.search-results .blog-page__hero {
  padding-bottom: 1.75rem;
}
.search-results .blog-page__hero .hero-search,
.search-results .blog-page__hero .blog-search-inline {
  margin-top: 1rem;
}
/* Inline highlight for the matched keyword/term name in the search
   results heading. (Other .search-results__back / __head / __title /
   __count classes were removed — search.php now reuses .blog-page__hero
   styling for visual consistency with archive pages.) */
.search-results__kw { color: var(--color-accent); }

.search-results__grid {
  display: grid;
  /* auto-fill (not auto-fit) so a single result keeps card width
     bounded — auto-fit would stretch the lone card to the full row
     width and balloon its featured image into a giant banner. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.search-results__grid .listing-card {
  height: 100%;
}
/* Blog post featured image inside search results — fixed height instead
   of 16:9 aspect-ratio so the image never grows tall on a wider grid
   track. object-fit: cover on .blog-card__img keeps the crop clean. */
.search-results__grid .blog-card__media {
  aspect-ratio: auto;
  height: 180px;
}

/* Generic page / fallback result card (when search returns
   non-listing, non-post content like Pages). */
.search-result-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.65rem;
  background: #ffffff;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.search-result-card:hover {
  border-color: rgba(31, 73, 65, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.search-result-card__type {
  align-self: flex-start;
  display: inline-block;
  padding: 0.2rem 0.65rem;
  background: #ECF4E8;
  color: #6b6577;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.search-result-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-footer);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.search-result-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.search-result-card__title a:hover { color: var(--color-accent); }
.search-result-card__excerpt {
  margin: 0;
  color: #4b3f55;
  font-size: 0.93rem;
  line-height: 1.6;
}
.search-result-card__more {
  align-self: flex-start;
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-accent);
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none;
}
.search-result-card__more:hover { color: var(--color-accent-dark); }

.search-results__pagination {
  display: flex;
  justify-content: center;
}
.search-results__pagination .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.search-results__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--color-border-soft);
  background: #fff;
  color: var(--color-footer);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.15s ease;
}
.search-results__pagination .page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.search-results__pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.search-results__pagination .page-numbers.dots {
  border: none;
  background: transparent;
}

/* Empty state */
.search-results__empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #ECF4E8;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.search-results__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ECF4E8;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.search-results__empty h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-footer);
}
.search-results__empty p {
  color: #6b6577;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.search-results__empty-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.search-results__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  font-size: 0.93rem;
  transition: background 0.15s ease, transform 0.15s ease;
}
.search-results__cta:hover { background: var(--color-accent-dark); transform: translateY(-1px); }
.search-results__cta--ghost {
  background: #fff;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}
.search-results__cta--ghost:hover { background: #ECF4E8; color: var(--color-accent-dark); border-color: var(--color-accent-dark); }

@media (max-width: 600px) {
  .search-results__inner { padding: 2rem 1rem 3rem; }
  .search-results__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .search-results__empty { padding: 2.25rem 1.25rem; }
}

/* =========================================================
   /products-services/ page  (flat archive of all listings,
   JS-filtered by category)
   ========================================================= */

.products-page { background: #ffffff; }

/* Hero — admin-editable Gutenberg block, styled via the seeded
   .products-hero* class names. Outer is full-bleed (its parent
   .products-page has no width cap); content is centered within a
   1280px band via the padding-inline trick — matches the homepage
   / about heroes. */
/* Hero + search-bar live inside the same full-bleed gradient panel.
   The trick: move the gradient + viewport-escape from `.products-hero`
   to the wrapping `.products-page__intro`, then make `.products-hero`
   itself transparent and shrink its bottom padding so the search bar
   slots in below the hero title as a natural continuation. */
.products-page__intro {
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-bottom: 3.25rem;
}
.products-hero {
  background: transparent;
  padding-block: 4rem 1.25rem;
  /* Asymmetric padding so the search bar (which fills this hero's
     content width on tablet/mobile) starts at the logo trophy icon
     position and ends at the hamburger icon position — matching
     .products-page__inner below. On desktop (>1180px viewport) the
     calc value wins and both sides become symmetric again, centering
     the search bar on the 1180px rail. */
  padding-inline-start: max(3rem, calc((100% - 1180px) / 2));
  padding-inline-end: max(1.85rem, calc((100% - 1180px) / 2));
  text-align: center;
  margin-bottom: 0;
  /* No longer needs its own viewport-escape — the intro wrapper now
     owns the full-bleed gradient. Override the layout rule that gave
     this Gutenberg block a viewport-escape earlier. */
  width: auto;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.products-page__intro .hero-search {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .products-page__intro .hero-search {
    max-width: none;
    width: auto;
    margin: 0 1.9rem 0 1.9rem;
  }
}
.products-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 0.85rem;
}
.products-hero__eyebrow::before,
.products-hero__eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.7;
}
.products-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 1rem;
  color: var(--color-footer);
  letter-spacing: -0.02em;
}
.products-hero__copy {
  max-width: 640px;
  margin: 0 auto;
  color: #4b3f55;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.55;
}

/* Solid mid green — picks up where .products-page__intro ends
   (#BAF498) for a seamless join with no gradient ramp mismatch.
   Section spans full viewport width via viewport-bleed so the
   color covers edge-to-edge below the hero. */
.products-page__inner {
  background: #BAF498;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: 3rem 4rem;
  /* Asymmetric desktop padding so cards align with the logo trophy
     (left) and menu right edge (right). */
  padding-inline-start: max(2rem, calc((100% - 1160px) / 2 + 16px));
  padding-inline-end: max(1.25rem, calc((100% - 1160px) / 2));
  max-width: none;
}
@media (max-width: 1024px) {
  .products-page__inner {
    padding: 3rem 1.5rem 0.3rem;
  }
}
@media (max-width: 768px) {
  .products-page__inner {
    padding: 3rem 2.1rem 0.3rem;
  }
}

@media (max-width: 600px) {
  .products-page__inner {
    padding: 2rem 2rem 3rem;
  }
}

/* Listings grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Per-card category badge — top-right corner. Card top-padding is
   bumped so the brand logo never lands in the same vertical band as
   the badge. Long category labels (e.g. "Project Management") are
   capped + ellipsised so they never crowd the logo horizontally. */
.products-card {
  position: relative;
  padding-top: 2.75rem;
  /* Contain the badge (z-index: 2 below) inside this card's own
     stacking context so it can never bleed *through* an overlapping
     element like the search-bar's category dropdown panel. Without
     isolation, badge z-index lives in the document root context and
     paints on top of anything that doesn't establish its own
     stacking context, even when the dropdown is positioned over it. */
  isolation: isolate;
}
.products-card__badge {
  position: absolute;
  top: 0.85rem;
  /* Anchored to the LEFT so the hover-revealed Compare checkbox in
     the top-right corner (see .listing-card__compare-mount) doesn't
     cover the category label when the user mouses over the card. */
  left: 0.85rem;
  z-index: 2;
  /* Reserve room on the right for the compare checkbox (~28px box + gap) */
  max-width: calc(100% - 3rem);
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: rgba(31, 73, 65, 0.1);
  color: var(--color-accent-dark);
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card title — below the brand logo, links to the listing's review
   page. Improves recognition when many cards share similar/missing
   logos and gives visitors a clear named anchor. */
.products-card__title {
  margin: 0.85rem 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-footer);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.products-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.products-card__title a:hover { color: var(--color-accent); }

/* Pagination on /products-services/ — same branded pill style as
   the blog/search/category archive pagination, scoped to the products
   page so it doesn't conflict with anything else. */
.products-pagination {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}
.products-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.85rem;
  margin: 0 0.2rem;
  border-radius: 12px;
  border: 1px solid var(--color-border-soft);
  background: #fff;
  color: var(--color-footer);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.15s ease;
}
.products-pagination .page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.products-pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.products-pagination .page-numbers.dots {
  border: none;
  background: transparent;
}

/* Empty state — site has no listings yet */
.products-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: #ECF4E8;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.products-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #ECF4E8;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.products-empty h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-footer);
}
.products-empty p {
  color: #6b6577;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.products-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 800;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  font-size: 0.93rem;
  transition: background 0.15s ease, transform 0.15s ease;
}
.products-empty__cta:hover { background: var(--color-accent-dark); transform: translateY(-1px); }

@media (max-width: 600px) {
  .products-hero { padding-block: 3rem 3.5rem; }
  .products-page__inner { padding: 2rem 2rem 3rem; }
  .products-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* =========================================================
   /blog/ index + single post
   ========================================================= */

/* ---- Blog index hero (page heading) -------------------- */
.blog-page { background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%); }
.blog-page__hero {
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  padding: 4rem 1.5rem 4.5rem;
  text-align: center;
}
.blog-page__hero-inner { max-width: var(--max-w); margin: 0 auto; }
.blog-page__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  text-decoration: none;
  margin-bottom: 1.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.blog-page__back:hover {
  background: #ffffff;
  transform: translateX(-2px);
}

/* Breadcrumb on archive pages: Blog › Category › Term name */
.blog-page__breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #6b6577;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.85rem;
}
.blog-page__breadcrumb a {
  color: var(--color-accent-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}
.blog-page__breadcrumb a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.blog-page__breadcrumb-sep {
  color: #c3c4c7;
  font-weight: 600;
}
.blog-page__breadcrumb-current {
  color: var(--color-footer);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 0.85rem;
}

.blog-page__eyebrow {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 0.85rem;
}
.blog-page__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 0.85rem;
  color: var(--color-footer);
  letter-spacing: -0.018em;
}
.blog-page__intro {
  margin: 0 auto;
  max-width: 560px;
  color: #4b3f55;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
}

/* 2-column layout: main content + sidebar */
.blog-page__layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2.75rem;
  align-items: start;
}
.blog-page__main { min-width: 0; }
@media (max-width: 900px) {
  .blog-page__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Single-post version of the same layout */
.single-post__layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2.75rem;
  align-items: start;
}
.single-post__main { min-width: 0; }
@media (max-width: 900px) {
  .single-post__layout { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1rem 3rem; }
}

/* ---- Sidebar (shared by blog index, archive, single post) ----- */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Sticky sidebar stays in view as the user reads — but only
     on screens tall enough to make it useful. */
  position: sticky;
  top: 90px;
  align-self: start;
}
@media (max-width: 900px) {
  .blog-sidebar { position: static; top: auto; }
}

.blog-widget {
  background: #ffffff;
  border: 1px solid var(--color-border-soft);
  border-top: 3px solid var(--color-accent);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* Table of Contents — auto-built on single-post sidebar from the post's
   h2/h3 headings (see inc/blog.php). h3 entries inset slightly so the
   hierarchy reads at a glance. */
.blog-widget--toc .blog-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: blog-toc;
}
.blog-widget--toc .blog-toc__item {
  padding: 0;
  border: 0;
  margin: 0;
}
.blog-widget--toc .blog-toc__link {
  display: block;
  padding: 0.5rem 0 0.5rem 0.75rem;
  border-left: 2px solid transparent;
  color: var(--color-footer);
  font-size: 0.92rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.blog-widget--toc .blog-toc__link:hover {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  background: rgba(31, 73, 65, 0.04);
}
/* Scrollspy: currently-in-view heading. Slightly stronger fill + thicker
   accent border so the visitor can scan their position at a glance. */
.blog-widget--toc .blog-toc__link.is-active,
.blog-widget--toc .blog-toc__item.is-active > .blog-toc__link {
  color: var(--color-accent);
  font-weight: 700;
  border-left-color: var(--color-accent);
  background: rgba(186, 244, 152, 0.35);
}
/* Honor reduced-motion preference: skip the smooth color transition
   so the active swap doesn't drag behind the scroll. */
@media (prefers-reduced-motion: reduce) {
  .blog-widget--toc .blog-toc__link { transition: none; }
}
.blog-widget--toc .blog-toc__item--h3 .blog-toc__link {
  padding-left: 1.5rem;
  font-size: 0.86rem;
  color: #4b3f55;
}
.blog-widget--toc .blog-toc__item + .blog-toc__item .blog-toc__link {
  border-top: 1px dashed rgba(15, 23, 42, 0.06);
}
.blog-widget:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.blog-widget__title,
.blog-widget > .wp-block-heading {
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--color-accent);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-footer);
}

.blog-widget ul,
.blog-widget ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-widget li {
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.06);
  font-size: 0.92rem;
  color: var(--color-footer);
}
.blog-widget li:last-child { border-bottom: 0; }
.blog-widget li a {
  color: var(--color-footer);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}
.blog-widget li a:hover { color: var(--color-accent); }

/* Active category highlight — WP adds .current-cat on the term LI
   when the visitor is browsing that category's archive (e.g.
   /category/tutorials/). Mirrors the same accent the link uses on
   hover so the active state reads at a glance. Block widget output
   nests in .wp-block-categories — same selector path. */
.blog-widget li.current-cat > a,
.blog-widget .wp-block-categories-list li.current-cat > a,
.blog-widget .wp-block-categories li.current-cat > a {
  color: var(--color-accent);
  font-weight: 800;
}
.blog-widget li.current-cat {
  position: relative;
}
.blog-widget li.current-cat::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* Recent Posts widget — flag the LI for the post the visitor is
   currently reading (see the wp_footer script in inc/blog.php that
   sets aria-current="page" + .is-current on the match). Same accent
   treatment as .current-cat so the active state reads consistently
   across all widget types. */
.blog-widget li.is-current > a,
.blog-widget a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 800;
}
.blog-widget li.is-current {
  position: relative;
}
.blog-widget li.is-current::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}
.blog-widget li .post-date {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #8b8294;
  margin-top: 0.15rem;
}

/* WP categories widget renders count in parens, e.g. "Reviews (3)" */
.widget_categories li,
.widget_archive li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Search form widget — input gets generous width, submit shrinks
   to a compact pill so the search field stays the primary affordance. */
.blog-widget .search-form,
.blog-widget form[role="search"] {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
}
.blog-widget .search-field,
.blog-widget input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1.5px solid #BAF498;
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.blog-widget .search-field:focus,
.blog-widget input[type="search"]:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgba(31, 73, 65, 0.18);
}
.blog-widget .search-submit,
.blog-widget input[type="submit"],
.blog-widget button[type="submit"] {
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  padding: 0 0.55rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.78rem;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}
.blog-widget .search-submit:hover,
.blog-widget input[type="submit"]:hover,
.blog-widget button[type="submit"]:hover {
  background: var(--color-accent-dark);
}
.blog-widget .screen-reader-text {
  /* WP's accessibility helper — visually hidden but available to screen readers */
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tag cloud widget */
.blog-widget .tagcloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.blog-widget .tag-cloud-link {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: #ECF4E8;
  color: var(--color-accent-dark) !important;
  border-radius: 12px;
  font-size: 0.8rem !important;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.blog-widget .tag-cloud-link:hover {
  background: rgba(31, 73, 65, 0.15);
}

/* Categories dropdown variant (widget option) */
.blog-widget select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid #BAF498;
  border-radius: 12px;
  font: inherit;
  font-size: 0.9rem;
  background: #fff;
}

/* ----- Block-widget specific overrides --------------------------
   The block widgets editor (modern WP default) emits its own class
   names for the search form and block lists. Mirror our classic
   widget styling so the visual is identical regardless of how the
   widget was added (legacy or block-based). */

/* Block search — sidebar variant. Wider input + bigger touch targets so
   the bar reads as a clear primary action rather than an afterthought. */
.blog-widget .wp-block-search__label { display: none; }
.blog-widget .wp-block-search,
.blog-widget form[role="search"].wp-block-search {
  margin: 0;
}
.blog-widget .wp-block-search__inside-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
}
.blog-widget .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid #BAF498;
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  background: #fff;
  color: #2c2540;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  height: auto;
  line-height: 1.3;
}
.blog-widget .wp-block-search__input::placeholder {
  color: #8b8294;
  font-weight: 500;
}
.blog-widget .wp-block-search__input:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgba(31, 73, 65, 0.18);
}
.blog-widget .wp-block-search__button {
  flex: 0 0 auto;
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  padding: 0 1.4rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.blog-widget .wp-block-search__button:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}
/* Button-inside-input variant (search icon button inside the field) */
.blog-widget .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  border: 1.5px solid #BAF498;
  border-radius: 12px;
  padding: 4px;
  gap: 0;
  background: #fff;
}
.blog-widget .wp-block-search.wp-block-search__button-inside .wp-block-search__input {
  border: none;
  padding: 0.6rem 0.75rem;
  background: transparent;
}

/* Block categories list */
.blog-widget .wp-block-categories,
.blog-widget .wp-block-categories-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-widget .wp-block-categories li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Block latest posts */
.blog-widget .wp-block-latest-posts {
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-widget .wp-block-latest-posts__post-title {
  display: block;
  font-weight: 600;
  color: var(--color-footer);
  text-decoration: none;
}
.blog-widget .wp-block-latest-posts__post-title:hover { color: var(--color-accent); }
.blog-widget .wp-block-latest-posts__post-date {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #8b8294;
  margin-top: 0.15rem;
}

/* Block archives */
.blog-widget .wp-block-archives,
.blog-widget .wp-block-archives-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Blog list (grid of cards) ------------------------- */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.blog-card:hover {
  border-color: rgba(31, 73, 65, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.blog-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: #ECF4E8;
  overflow: hidden;
  position: relative;
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.blog-card:hover .blog-card__img { transform: scale(1.04); }
.blog-card__body {
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.65rem;
}
.blog-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #6b6577;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blog-card__sep { color: #c3c4c7; }
.blog-card__cat {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
.blog-card__cat:hover { color: var(--color-accent-dark); }
.blog-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-footer);
  letter-spacing: -0.005em;
}
.blog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.blog-card__title a:hover { color: var(--color-accent); }
.blog-card__excerpt {
  margin: 0;
  color: #4b3f55;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 500;
  flex: 1 1 auto;
}
.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin-top: 0.4rem;
  color: var(--color-accent);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.blog-card__more:hover { color: var(--color-accent-dark); }
.blog-card__more-arrow { transition: transform 0.15s ease; }
.blog-card__more:hover .blog-card__more-arrow { transform: translateX(3px); }

/* ---- Pagination (shared style with search results) ----- */
.blog-pagination {
  display: flex;
  justify-content: center;
}
.blog-pagination .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--color-border-soft);
  background: #fff;
  color: var(--color-footer);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.15s ease;
}
.blog-pagination .page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.blog-pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.blog-pagination .page-numbers.dots {
  border: none;
  background: transparent;
}

/* ---- Empty state --------------------------------------- */
.blog-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #ECF4E8;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.blog-empty h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-footer);
}
.blog-empty p {
  margin: 0;
  color: #6b6577;
  font-size: 0.95rem;
}

/* ---- Single post --------------------------------------- */
.single-post {
  background: #ffffff;
  /* Hero panel handles the top of the page (flush against site header).
     The 2-column layout below carries its own padding via .single-post__layout. */
  padding: 0;
}
.single-post__article {
  background: #ffffff;
}
.single-post__media {
  margin: 0 0 1.75rem;
  border-radius: 12px;
  overflow: hidden;
  background: #ECF4E8;
}
.single-post__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}
.single-post__content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #2c2540;
}
.single-post__content > * + * { margin-top: 1.1rem; }
.single-post__content h2 {
  margin: 2.25rem 0 0.85rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-footer);
  letter-spacing: -0.005em;
}
.single-post__content h3 {
  margin: 1.85rem 0 0.7rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-footer);
}
.single-post__content p { margin: 0; color: #2c2540; }
.single-post__content a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: rgba(31, 73, 65, 0.3);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.single-post__content a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}
.single-post__content ul,
.single-post__content ol {
  margin: 0;
  padding-left: 1.5rem;
}
.single-post__content li { margin: 0.4rem 0; }
.single-post__content li::marker { color: var(--color-accent); }
.single-post__content blockquote {
  margin: 1.5rem 0;
  padding: 0.85rem 1.25rem;
  border-left: 4px solid var(--color-accent);
  background: #ECF4E8;
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: #3b3046;
}
.single-post__content img { border-radius: 12px; margin: 1rem 0; }

.single-post__tags {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.single-post__tags-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6577;
  margin-right: 0.5rem;
}
.single-post__tag {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: #ECF4E8;
  color: var(--color-accent-dark);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.single-post__tag:hover { background: rgba(31, 73, 65, 0.15); }

.single-post__nav {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.single-post__nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.15rem;
  background: #ECF4E8;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.single-post__nav-link:hover {
  border-color: var(--color-accent);
  background: #ECF4E8;
  transform: translateY(-1px);
}
.single-post__nav-link--next { text-align: right; }
.single-post__nav-dir {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}
.single-post__nav-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-footer);
  line-height: 1.3;
}

@media (max-width: 720px) {
  .blog-page__hero { padding: 3rem 1.25rem 3.5rem; }
  .blog-list { grid-template-columns: 1fr; gap: 1.25rem; }
  .single-post { padding: 2rem 1.25rem 3rem; }
  .single-post__nav { grid-template-columns: 1fr; }
  .single-post__nav-link--next { text-align: left; }
}

/* =========================================================
   Blog article — comment list + form
   ========================================================= */

.post-comments {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 2px solid #ECF4E8;
}
.post-comments__heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-accent);
  margin: 0 0 1.5rem;
}

/* ---- Comment cards ---- */
.post-comments__list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.post-comment__card {
  background: #fff;
  border: 1.5px solid #ECF4E8;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}
.post-comment__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.post-comment__avatar-wrap img.post-comment__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #BAF498;
}
.post-comment__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
}
.post-comment__author {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-accent);
}
.post-comment__date {
  font-size: 0.8rem;
  color: var(--color-text-muted, #6b7280);
}
.post-comment__reply a {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  margin-left: auto;
}
.post-comment__reply a:hover { color: var(--color-accent-dark); }
.post-comment__moderation {
  font-size: 0.85rem;
  color: #888;
  font-style: italic;
  margin-bottom: 0.5rem;
}
.post-comment__body p { margin: 0 0 0.5rem; font-size: 0.95rem; line-height: 1.65; }
.post-comment__body p:last-child { margin-bottom: 0; }

/* nested replies — slight indent */
.post-comments__list .children {
  list-style: none;
  margin: 1rem 0 0 2.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- Pagination ---- */
.post-comments__pagination {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.post-comments__pagination a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
}

/* ---- Comment form ---- */
.post-comments__form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Style WP's default field wrappers (.comment-form-author etc.) */
.post-comments__form .comment-form-author,
.post-comments__form .comment-form-email,
.post-comments__form .comment-form-comment {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}
.post-comments__form .comment-form-author label,
.post-comments__form .comment-form-email label,
.post-comments__form .comment-form-comment label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-accent);
}
.post-comments__form input[type="text"],
.post-comments__form input[type="email"],
.post-comments__form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #11151c;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.post-comments__form input:focus,
.post-comments__form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(31,73,65,0.12);
}
.post-comments__form textarea { resize: vertical; min-height: 120px; }

/* Force Name → Email → Comment → Submit visual order regardless of WP DOM */
.post-comments__form .comment-form-author  { order: 1; }
.post-comments__form .comment-form-email   { order: 2; }
.post-comments__form .comment-form-comment { order: 3; }
.post-comments__form .form-submit          { order: 4; }
.post-comments__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}
.post-comments__field label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-accent);
}
.post-comments__field input[type="text"],
.post-comments__field input[type="email"],
.post-comments__field input[type="url"],
.post-comments__field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #11151c;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.post-comments__field input:focus,
.post-comments__field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(31,73,65,0.12);
}
.post-comments__field textarea { resize: vertical; min-height: 120px; }
.post-comments__field-note {
  font-size: 0.78rem;
  color: var(--color-text-muted, #6b7280);
}
.post-comments__submit {
  align-self: flex-start;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.post-comments__submit:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}
/* WP wraps submit in a <p class="form-submit"> */
#commentform .form-submit { margin: 0; }

/* "Required fields are marked *" note above the form */
.post-comments__required-note {
  font-size: 0.82rem;
  color: var(--color-text-muted, #6b7280);
  margin: 0 0 1.25rem;
}
/* Cookies checkbox row */
.post-comments__field--cookie {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 1.25rem;
}
.post-comments__field--cookie label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #444;
  cursor: pointer;
}
.post-comments__field--cookie input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
/* Comment form heading (separate from the count heading) */
.post-comments__form-heading {
  margin-top: 2.5rem;
}

@media (max-width: 720px) {
  .post-comments { padding-top: 2rem; }
  .post-comments__list .children { margin-left: 1rem; }
}

/* =========================================================
   /privacy-policy/ page
   ========================================================= */

.privacy-page {
  background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%);
}
.privacy-page__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

/* Hero — pink gradient panel matching the rest of the site.
   Escapes the .privacy-page__inner 880px constraint via viewport-bleed
   so the gradient spans the full viewport (no white side strips), then
   centers content within a 1280px band via the padding-inline trick. */
.privacy-hero {
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 3.5rem;
  padding-block: 4rem 4.5rem;
  padding-inline: max(1.5rem, calc((100% - 1180px) / 2));
  text-align: center;
  border-radius: 0 0 32px 32px;
}
.privacy-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 1rem;
}
.privacy-hero__eyebrow::before,
.privacy-hero__eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.7;
}
.privacy-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 1rem;
  color: var(--color-footer);
  letter-spacing: -0.02em;
}
.privacy-hero__copy {
  max-width: 620px;
  margin: 0 auto 1.25rem;
  color: #4b3f55;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.55;
}
.privacy-hero__updated {
  display: inline-block;
  margin: 0;
  padding: 0.5rem 1.1rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  font-size: 0.88rem;
  color: var(--color-footer);
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.privacy-hero__updated strong {
  color: var(--color-accent-dark);
  font-weight: 800;
}

/* Each section block */
.privacy-section {
  margin-bottom: 2.5rem;
  padding: 1.75rem 2rem;
  background: #ECF4E8;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  position: relative;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.privacy-section:hover {
  border-color: rgba(31, 73, 65, 0.25);
  transform: translateY(-1px);
}
.privacy-section h2 {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-footer);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.privacy-section h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--color-accent);
  border-radius: 4px;
  flex-shrink: 0;
}
.privacy-section p {
  margin: 0 0 0.95rem;
  color: #3b3046;
  line-height: 1.7;
  font-size: 0.98rem;
  font-weight: 500;
}
.privacy-section p:last-child { margin-bottom: 0; }
/* Inline links inside privacy sections — exclude Gutenberg button-block
   anchors so the CTA button keeps its own styling unchanged. */
.privacy-section a:not(.wp-block-button__link) {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(31, 73, 65, 0.3);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.privacy-section a:not(.wp-block-button__link):hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}
.privacy-section strong { color: var(--color-footer); font-weight: 700; }

/* Lists inside privacy sections */
.privacy-section .wp-block-list,
.privacy-section ul {
  margin: 0 0 0.95rem;
  padding-left: 0;
  list-style: none;
}
.privacy-section ul li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.75rem;
  color: #3b3046;
  line-height: 1.6;
  font-size: 0.96rem;
  font-weight: 500;
}
.privacy-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.85;
}
.privacy-section ul li strong { color: var(--color-footer); }
.privacy-section ul li + li {
  border-top: 1px dashed rgba(15, 23, 42, 0.06);
  margin-top: 0.1rem;
}

/* CTA section at the bottom */
.privacy-section--cta {
  background: linear-gradient(135deg, #ECF4E8 0%, #BDF59E 100%);
  border-color: rgba(31, 73, 65, 0.22);
  text-align: center;
  padding: 2.25rem 2rem;
}
.privacy-section--cta:hover { transform: none; }
.privacy-section--cta h2 {
  justify-content: center;
  font-size: 1.5rem;
}
.privacy-section--cta h2::before { display: none; }
.privacy-section--cta .wp-block-buttons {
  justify-content: center;
  margin-top: 1.25rem;
}
.privacy-section--cta .wp-block-button__link,
.privacy-section--cta .wp-block-button__link:hover,
.privacy-section--cta .wp-block-button__link:focus,
.privacy-section--cta .wp-block-button__link:active,
.privacy-section--cta .wp-block-button__link:visited {
  color: #ffffff;
  text-decoration: none;
}
.privacy-section--cta .wp-block-button__link {
  background: var(--color-accent);
  padding: 0.85rem 2rem;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.95rem;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(31, 73, 65, 0.28);
  display: inline-block;
}
.privacy-section--cta .wp-block-button__link:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(31, 73, 65, 0.36);
}

@media (max-width: 720px) {
  .privacy-hero { padding-block: 3rem 3.5rem; margin-bottom: 2.5rem; border-radius: 0 0 24px 24px; }
  .privacy-section { padding: 1.5rem 1.35rem; margin-bottom: 1.5rem; }
  .privacy-section h2 { font-size: 1.2rem; }
  .privacy-section p, .privacy-section ul li { font-size: 0.94rem; }
  .privacy-page__inner { padding: 0 1.25rem 3rem; }
}

/* =========================================================
   /about-us/ page
   ========================================================= */

.about-section__eyebrow,
.about-mission__eyebrow {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 1rem;
}

/* About-page section headings (h2 inside mission, how, stats,
   values, cta) — bumped a notch to match the hero presence and
   give each section more visual weight. */
.about-mission .wp-block-heading,
.about-how .wp-block-heading,
.about-stats .wp-block-heading,
.about-values .wp-block-heading,
.about-cta .wp-block-heading {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-footer);
  margin: 0 0 1.1rem;
}

/* Hero — escapes the .about-page 1180px constraint via viewport-bleed
   so the gradient spans the full viewport (no white side strips), then
   centers content within a 1280px band via .about-hero__inner.
   The !important on margins overrides WordPress core's wp-block-group
   layout rule (`margin-left/right: auto !important`) that would
   otherwise re-center the section back inside its parent. */
.about-hero {
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 4rem 1.25rem 4.5rem;
  text-align: center;
}
.about-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
/* Keep the actual paragraph copy comfortably narrow even though the
   inner container now fills the page width. Long-form text reads
   better around 60–70 characters per line. */
.about-hero__copy {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.about-hero__eyebrow {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 1rem;
}
.about-hero__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  color: var(--color-footer);
  letter-spacing: -0.018em;
}
.about-hero__title-accent { color: var(--color-accent); }
.about-hero__copy {
  font-size: 1.1rem;
  color: #4b3f55;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}

/* Mission — text + illustration two-up */
/* Full-bleed gradient backgrounds — escape the .about-page 1180px
   container so the colored panels span the full viewport edge-to-
   edge, while the inner content remains inside the page width.
   `!important` overrides the wp-block-group `margin: auto` rule that
   would otherwise re-center the section back inside .about-page. */
.about-mission,
.about-how,
.about-stats,
.about-values,
.about-cta {
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.about-mission { padding: 2.5rem 1.25rem; background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%); }
.about-mission__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.about-mission__eyebrow {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.85rem;
}
/* How We Work — 3 steps */
.about-how { padding: 2.5rem 1.25rem; background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%); }
.about-how__inner { max-width: var(--max-w); margin: 0 auto; }
.about-how__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.about-step {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
/* Inline SVG icons for the three step cards via CSS pseudo-elements —
   admin doesn't manage them in the editor, frontend gets a polished
   colored badge above each step's heading. */
.about-step::before {
  content: '';
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  margin-bottom: 1.15rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
.about-how__steps .wp-block-column:nth-child(1) .about-step::before {
  background-color: #ECF4E8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
.about-how__steps .wp-block-column:nth-child(2) .about-step::before {
  background-color: #ECF4E8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b67a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='20' x2='6' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='18' y1='20' x2='18' y2='14'/%3E%3C/svg%3E");
}
.about-how__steps .wp-block-column:nth-child(3) .about-step::before {
  background-color: #fff8e0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4a300' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}
.about-step__icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
}
.about-step__title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 0.6rem;
  color: var(--color-footer);
}
.about-step__copy {
  font-size: 0.97rem;
  color: #4b3f55;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* By the numbers */
.about-stats { padding: 2.5rem 1.25rem; background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%); }
.about-stats__inner { max-width: var(--max-w); margin: 0 auto; }
.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.about-stat {
  background: #fff;
  border: 1.5px solid #BAF498;
  border-radius: 12px;
  padding: 1.85rem 1.5rem;
  text-align: center;
}
.about-stat__value {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.about-stat__label {
  font-size: 0.95rem;
  color: var(--color-footer);
  font-weight: 700;
  margin-top: 0.6rem;
}

/* Values — 4 cards */
.about-values { padding: 2.5rem 1.25rem; background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%); }
.about-values__inner { max-width: var(--max-w); margin: 0 auto; }
.about-values__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.about-value {
  background: #fff;
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
/* Inline SVG icons for the four value cards — same pattern as steps,
   different glyphs and palette for each card. */
.about-value::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 1rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 26px 26px;
}
.about-values__grid .wp-block-column:nth-child(1) .about-value::before {
  /* Independent — shield */
  background-color: #ECF4E8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.about-values__grid .wp-block-column:nth-child(2) .about-value::before {
  /* Expert-led — graduation cap */
  background-color: #DBF0CA;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6fdc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E");
}
.about-values__grid .wp-block-column:nth-child(3) .about-value::before {
  /* Transparent — eye */
  background-color: #ECF4E8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b67a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.about-values__grid .wp-block-column:nth-child(4) .about-value::before {
  /* Always fresh — refresh circle */
  background-color: #fff8e0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4a300' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
}
.about-value h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.55rem;
  color: var(--color-accent);
}
.about-value p {
  font-size: 0.97rem;
  color: #3b3046;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* CTA strip at bottom — same gradient as the hero so the page opens
   and closes on visually matched full-bleed panels (bookends the
   layout). Full-bleed handled by the shared rule above; here we
   keep only the inner padding + colors. */
.about-cta {
  padding: 3rem 1.5rem;
  /* Reversed gradient (mid→light) so it picks up from about-values'
     bottom (mid green) and ends light, leading cleanly into the dark
     green footer below. */
  background: linear-gradient(180deg, #BAF498 0%, #ECF4E8 100%);
  color: var(--color-footer);
  text-align: center;
  border-radius: 0;
  box-shadow: none;
}
.about-cta__inner { max-width: var(--max-w); margin: 0 auto; }
/* CTA copy stays narrow for centered, readable invitation text even
   though the section container is now page-wide. */
.about-cta__copy { max-width: 620px; margin-left: auto; margin-right: auto; }
.about-cta__title {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-footer);
  margin: 0 0 0.85rem;
}
.about-cta__copy {
  font-size: 1.05rem;
  color: #4b3f55;
  margin: 0 0 1.75rem;
  font-weight: 500;
}
/* When the About page renders from Gutenberg blocks, sections are wrapped
   in .wp-block-group and rows use .wp-block-columns. Reset Gutenberg's
   default flex/gap so our existing grid + spacing rules win.
   Every about-page section now uses viewport-bleed (width: 100vw +
   negative margins) to escape the .about-page 1180px wrapper so the
   gradient bg spans edge to edge. Forcing `width: 100%` here would
   re-cage them inside .about-page, leaving a slim sliver of body bg
   visible on the right where the page padding is — that's why this
   list is now empty. */
.about-hero > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.about-mission > *,
.about-how > *,
.about-stats > *,
.about-values > * { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
.about-cta > * { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Gutenberg columns inside our sections — override default flex with
   our grid (3-up for steps/stats, 2-up for values). `!important` on
   the grid template forces equal column widths even if WP injects an
   inline `flex-basis` on individual columns (which it does when the
   admin tweaks column widths in the editor — those styles leak
   through and make one card visibly wider than the others). */
.about-how__steps.wp-block-columns,
.about-stats__grid.wp-block-columns,
.about-values__grid.wp-block-columns {
  display: grid !important;
  width: 100%;
  margin: 0 auto;
}
.about-how__steps.wp-block-columns { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.5rem; }
.about-stats__grid.wp-block-columns { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.25rem; }
.about-values__grid.wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.25rem; }

/* Tablet (≤ 1024px) — 3-up grids collapse to 2-up. The 2-up values
   grid stays as-is on tablet, then collapses to 1-up on mobile. */
@media (max-width: 1024px) {
  .about-how__steps.wp-block-columns,
  .about-stats__grid.wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Mobile (≤ 720px) — every card grid is single column / full width. */
@media (max-width: 720px) {
  .about-how__steps.wp-block-columns,
  .about-stats__grid.wp-block-columns,
  .about-values__grid.wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}

.about-how__steps .wp-block-column,
.about-stats__grid .wp-block-column,
.about-values__grid .wp-block-column {
  /* Override any inline `flex-basis` / `style="width:..."` injected
     by Gutenberg so each column tracks the grid track exactly. */
  flex-basis: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
}
/* Make sure the inner step / stat / value card fills its column so
   widths read as equal even on cards with shorter content. */
.about-how__steps .about-step,
.about-stats__grid .about-stat,
.about-values__grid .about-value {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* CTA button rendered from a wp:button block — apply our pink-pill style */
.about-cta .wp-block-buttons { justify-content: center; display: flex; }
.about-cta .wp-block-button__link {
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  padding: 0.9rem 1.85rem;
  border-radius: 12px;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.15s ease, transform 0.15s ease;
}
.about-cta .wp-block-button__link:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}

/* About page tablet + mobile tweaks */
@media (max-width: 900px) {
  .about-how__steps,
  .about-how__steps.wp-block-columns,
  .about-stats__grid,
  .about-stats__grid.wp-block-columns,
  .about-values__grid,
  .about-values__grid.wp-block-columns { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .about-hero { padding: 3rem 1.25rem 3.25rem; }
  .about-mission, .about-how, .about-stats, .about-values, .about-cta {
    padding: 3rem 1.25rem;
  }
}

/* ==========================================================================
   Reviews — single-listing reviews list + form + /reviews/ archive
   ==========================================================================
   Visitor-submitted reviews stored as comments (comment_type =
   'top7_review'). Three surfaces share the same review-card markup:
     - .single-listing__reviews         single listing page (per-listing)
     - .reviews-archive                 /reviews/ stream (every listing)
     - .listing-rating__count-link      review-count → #top7-reviews jump
   See inc/reviews.php for storage + render helpers.
   ========================================================================== */

/* The review-count number on listing cards is now a real link to the
   listing's review section. Strip the default underline so it visually
   matches the static text it replaced. */
.listing-rating__count-link,
.comparison-row__reviews-link,
.compare-table__reviews-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.listing-rating__count-link:hover,
.comparison-row__reviews-link:hover,
.compare-table__reviews-link:hover {
  color: var(--color-link);
  border-bottom-color: var(--color-link);
}

/* ----- Single-listing review block --------------------------------- */
.single-listing__reviews {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}
.single-listing__reviews-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.single-listing__reviews-summary {
  margin: 0;
  font-size: 1rem;
  color: #4b3f55;
}
.single-listing__reviews-summary strong {
  color: #0f172a;
  font-size: 1.4rem;
  font-weight: 800;
  margin-right: 0.25rem;
}
.single-listing__reviews-count {
  margin-left: 0.5rem;
  color: #4b3f55;
}

/* ----- Reviews list (shared list container) ------------------------ */
.top7-reviews-list {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}
.top7-reviews-empty {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background: #ECF4E8;
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  color: #4b3f55;
  text-align: center;
  font-weight: 500;
}

/* ----- Review card (used in both list + archive) ------------------- */
.top7-review-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.top7-review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.top7-review-card__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.top7-review-card__avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fde7ee 0%, #fbcfdc 100%);
  color: var(--color-accent-dark);
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.top7-review-card__name {
  margin: 0;
  font-weight: 700;
  color: #0f172a;
  font-size: 0.95rem;
}
.top7-review-card__date {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
}
.top7-review-card__stars {
  display: inline-flex;
  gap: 0.1rem;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}
.top7-review-card__star {
  color: #d1d5db;
}
.top7-review-card__star.is-on {
  color: #fbbf24;
}
.top7-review-card__listing {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #6b7280;
}
.top7-review-card__listing a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 600;
}
.top7-review-card__listing a:hover { text-decoration: underline; }
.top7-review-card__body {
  color: #2c2540;
  font-size: 0.98rem;
  line-height: 1.6;
}
.top7-review-card__body p { margin: 0 0 0.6rem; }
.top7-review-card__body p:last-child { margin-bottom: 0; }

/* ----- Review submission form -------------------------------------- */
.top7-review-form {
  background: #ECF4E8;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  display: grid;
  gap: 1rem;
}
.top7-review-form__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
}
.top7-review-form__notice {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
}
.top7-review-form__notice--ok {
  background: #ECF4E8;
  color: #065f46;
  border: 1px solid #6ee7b7;
}
.top7-review-form__notice--err {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.top7-review-form__field {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}
.top7-review-form__label {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.92rem;
}
.top7-review-form__hint {
  font-weight: 500;
  color: #6b7280;
  font-size: 0.85rem;
}
.top7-review-form__rating {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.top7-review-form__field input[type="text"],
.top7-review-form__field input[type="email"],
.top7-review-form__field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  background: #fff;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.top7-review-form__field input[type="text"]:focus,
.top7-review-form__field input[type="email"]:focus,
.top7-review-form__field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(31, 73, 65, 0.15);
}
.top7-review-form__field textarea {
  resize: vertical;
  min-height: 120px;
}

/* Honeypot — invisible to humans + screen readers, but bots still
   POST it. Keep it in DOM so bots see a visible field name. */
.top7-review-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 5-star input — the (5→1) markup order lets a sibling selector light
   up every star to the LEFT of the hovered/checked one. */
.top7-stars-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.15rem;
  font-size: 1.85rem;
  line-height: 1;
}
.top7-stars-input input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.top7-stars-input label {
  cursor: pointer;
  color: #d1d5db;
  transition: color 0.12s ease, transform 0.12s ease;
  padding: 0 0.05rem;
}
.top7-stars-input label:hover,
.top7-stars-input label:hover ~ label,
.top7-stars-input input[type="radio"]:checked ~ label {
  color: #fbbf24;
}
.top7-stars-input input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
  border-radius: 4px;
}
.top7-stars-input label:active {
  transform: scale(0.92);
}

.top7-review-form__submit {
  justify-self: start;
  background: var(--color-accent);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 0.75rem 1.6rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.top7-review-form__submit:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}
.top7-review-form__submit:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
}

/* ----- /reviews/ archive page -------------------------------------- */
.reviews-archive {
  padding: 3rem 1.5rem 5rem;
  background: linear-gradient(180deg, #ECF4E8 0%, #BAF498 100%);
}
/* Wider than the rest of the site (1180 px content cap) so the
   review-card grid uses the screen real estate. Matches the hero
   inner width set in section-hero / about-hero etc. */
.reviews-archive__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.reviews-archive__head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.reviews-archive__desc {
  margin: 1rem auto 0;
  max-width: 640px;
  color: #4b3f55;
  font-size: 1.05rem;
  font-weight: 500;
}

/* ----- Submit-a-review block on /reviews/ ------------------------- */
.reviews-archive__submit {
  margin: 0 auto 3rem;
  max-width: 820px;
}
.reviews-archive__list-head {
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.reviews-archive__list-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-footer);
  letter-spacing: -0.01em;
}

/* Reviews-page variant of the review form — wider chrome, header
   block, side-by-side name/email row on desktop. */
.top7-review-form--reviews-page {
  padding: 2rem 2.25rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff;
}
.top7-review-form__header {
  margin-bottom: 0.5rem;
  text-align: center;
}
.top7-review-form__header .top7-review-form__title {
  font-size: 1.55rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
}
.top7-review-form__subtitle {
  margin: 0;
  color: #4b3f55;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto;
}

/* Listing-picker dropdown — same chrome as the text inputs so it
   blends with the rest of the form. */
.top7-review-form__listing-select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  font-size: 0.98rem;
  color: #0f172a;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.top7-review-form__listing-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(31, 73, 65, 0.18);
}
.top7-review-form__listing-select optgroup {
  font-weight: 700;
  color: var(--color-accent-dark);
}

/* Two-up row for name + email on desktop, stacks on mobile. */
.top7-review-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .top7-review-form__row { grid-template-columns: 1fr; }
  .top7-review-form--reviews-page { padding: 1.5rem 1.25rem; }
  .top7-review-form__header .top7-review-form__title { font-size: 1.3rem; }
}
/* Two columns by default; three columns on wider viewports so cards
   don't stretch too wide. The 720px breakpoint below collapses to a
   single column on phones. */
.reviews-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 1100px) {
  .reviews-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.reviews-archive__pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.reviews-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.85rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  color: #0f172a;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.reviews-archive__pagination .page-numbers:hover {
  background: #ECF4E8;
  border-color: var(--color-accent);
}
.reviews-archive__pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.reviews-archive__empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #ECF4E8;
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}
.reviews-archive__empty p {
  margin: 0 0 1.25rem;
  color: #4b3f55;
  font-size: 1rem;
}
.reviews-archive__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 12px;
  padding: 0.65rem 1.4rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.reviews-archive__cta:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .reviews-archive__grid { grid-template-columns: 1fr; }
  .reviews-archive { padding: 2.25rem 1.25rem 4rem; }
  .top7-review-form { padding: 1.25rem 1.25rem; }
  .top7-stars-input { font-size: 1.65rem; }
  .single-listing__reviews { margin-top: 2rem; padding-top: 2rem; }
}