/* ==========================================================================
   ForaVida Design System
   Version: 1.1
   "Strak, groengetint, toegankelijk en blokgebaseerd"

   EDITOR GUIDELINES — READ BEFORE BUILDING PAGES
   -----------------------------------------------
   1. Never set padding, margin, border-radius, or colors in the Gutenberg
      block style panel. These generate inline styles that override CSS.
   2. Use "Additional CSS class(es)" to apply design-system classes.
   3. Button style is controlled by classes on the outer wp:button block:
      - fv-btn--accent  → orange (selling/value CTAs)
      - fv-btn--dark    → green  (informational CTAs)
      - fv-btn--secondary → neutral
      - fv-btn--lg      → larger padding (combine with above)
   4. Card-like containers: use wp:group with class fv-card (or fv-tile
      for tile grids). Never set background/shadow in the panel.
   5. CTA panel at bottom of pages: use fv-tile fv-tile--cta on a wp:group.
   6. Paste markup in Code editor view to avoid Gutenberg injecting styles.
   -----------------------------------------------

   Table of contents:
   1.  Tokens (custom properties)
   2.  Focus & accessibility
   2b. Global form inputs
   3.  Utilities
   4.  Components — Card
   5.  Components — Tile grid
   6.  Components — USP list
   7.  Components — Section
   8.  Components — Badge
   9.  Components — Notice
  10.  Components — FAQ accordion
  11.  Components — Buttons
  11b. WP block overrides (button radius, separator)
  12.  Block — Hero
  13.  Block — USP row
  14.  Block — Tiles grid (ACF)
  15.  Block — FAQ section
  16.  Block — Content + CTA
  17.  Block — Trust row
  18.  Component — Category nav
  19.  Component — Step card
  20.  Component — Showroom card
  21.  Component — Trustpilot embed
  22.  Component — Blog grid
  23.  Component — Section inner
  24.  Component — Timeline
  25.  Component — Stats grid
  26.  Component — Quality / feature grid
  27.  Component — Location card
  28.  Component — Highlight (check) list
  29.  Component — Conditions page (summary, list, table, CTA)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Colors --- */
  --fv-green:         #3d441e;
  --fv-green-dark:    #2b3016;
  --fv-green-light:   #efeee3;
  --fv-text:          #222;
  --fv-text-muted:    #6b6b5e;
  --fv-bg:            #fff;
  --fv-bg-soft:       #f5f3eb;
  --fv-bg-panel:      #f9f9f5;
  --fv-border:        #E6E1D6;
  --fv-border-green:  #c5c3a8;

  /* Brand extensions */
  --fv-sage:          #6F7C4B;
  --fv-air:           #6EBFC4;
  --fv-surface:       #FAF8F2;

  /* Accent (CTA — Burnt Orange) */
  --fv-accent:        #C5561A;
  --fv-accent-hover:  #B24D17;

  /* Star rating (WooCommerce) */
  --fv-star:          #ee9e13;

  /* Semantic / WooCommerce-aware */
  --fv-price:         var(--fv-green-dark);
  --fv-sale:          #c0392b;
  --fv-success:       #27ae60;
  --fv-error:         #c0392b;
  --fv-warning:       #e67e22;
  --fv-info:          #2980b9;

  /* Notice backgrounds (warm tints matching ForaVida palette) */
  --fv-info-bg:       #efeee3;
  --fv-success-bg:    #ebefe3;
  --fv-warning-bg:    #f5f0e0;
  --fv-error-bg:      #f3e8e2;

  /* --- Spacing (4 px base grid) --- */
  --fv-space-xs:   4px;
  --fv-space-sm:   8px;
  --fv-space-md:  16px;
  --fv-space-lg:  24px;
  --fv-space-xl:  32px;
  --fv-space-2xl: 48px;
  --fv-space-3xl: 64px;

  /* --- Border radius --- */
  --fv-radius-sm:   6px;
  --fv-radius-md:  10px;
  --fv-radius-lg:  16px;
  --fv-radius-pill: 999px;

  /* --- Shadows --- */
  --fv-shadow-sm:  0 1px  4px rgba(0, 0, 0, .06);
  --fv-shadow-md:  0 4px 12px rgba(0, 0, 0, .08);
  --fv-shadow-lg:  0 8px 24px rgba(0, 0, 0, .10);

  /* --- Transitions --- */
  --fv-ease: .2s ease;

  /* --- Focus --- */
  --fv-focus-ring: 0 0 0 3px rgba(110, 191, 196, .4);

  /* --- Layout --- */
  --fv-content-w: 900px;
  --fv-wide-w:   1190px;

  /* --- WooCommerce accent (Shoptimizer green) --- */
  --fv-wc-green:        #5a7c5a;
  --fv-wc-green-dark:   #4a6b4a;
  --fv-wc-green-muted:  #4a5d4b;
  --fv-wc-bg:           #f8faf8;
  --fv-wc-bg-soft:      #f4f7f1;
  --fv-wc-border:       #f0f0f0;
  --fv-wc-border-green: #e8f5e8;
}


/* ==========================================================================
   2. FOCUS & ACCESSIBILITY
   ========================================================================== */

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

/* Lucide icon placeholder — subtle box while JS hydrates icons */
[data-lucide]:not(svg) {
  display: inline-block;
  background: var(--fv-bg-soft);
  border-radius: var(--fv-radius-sm);
}

/* Screen-reader only (utility, but accessibility-critical) */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   2b. GLOBAL FORM INPUTS
   Consistent styling for all form fields (search, Fluent Forms, etc.).
   WooCommerce-specific overrides live in foravida-woocommerce.css.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-sm);
  padding: 10px 14px;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--fv-bg);
  color: var(--fv-text);
  transition: border-color var(--fv-ease), box-shadow var(--fv-ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--fv-air);
  box-shadow: var(--fv-focus-ring);
  outline: none;
}


/* --- Fluent Forms ---
   !important is needed because Fluent Forms injects inline styles via
   the form builder on inputs and the submit button. */

.fluentform .ff-el-group {
  margin-bottom: var(--fv-space-md);
}

.fluentform .ff-el-input--label label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--fv-text);
  margin-bottom: var(--fv-space-xs);
}

.fluentform .ff-el-form-control {
  border: 1px solid var(--fv-border) !important;
  border-radius: var(--fv-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 1rem !important;
  line-height: 1.5;
  background: var(--fv-bg) !important;
  color: var(--fv-text) !important;
  width: 100%;
  transition: border-color var(--fv-ease), box-shadow var(--fv-ease);
}

.fluentform .ff-el-form-control:focus {
  border-color: var(--fv-air) !important;
  box-shadow: var(--fv-focus-ring) !important;
  outline: none;
}

.fluentform .ff-el-form-control::placeholder {
  color: var(--fv-text-muted);
  opacity: .6;
}

.fluentform textarea.ff-el-form-control {
  min-height: 120px;
  resize: vertical;
}

.fluentform .ff-btn-submit {
  background-color: var(--fv-green) !important;
  color: #fff !important;
  border: 2px solid var(--fv-green) !important;
  border-radius: var(--fv-radius-sm) !important;
  padding: 12px 32px !important;
  font-size: 1rem !important;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--fv-ease), border-color var(--fv-ease);
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible {
  background-color: var(--fv-green-dark) !important;
  border-color: var(--fv-green-dark) !important;
  color: #fff !important;
}

.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--fv-error) !important;
}

.fluentform .ff-el-is-error .error {
  color: var(--fv-error);
  font-size: .85rem;
  margin-top: var(--fv-space-xs);
}

.fluentform .ff-message-success {
  background: var(--fv-success-bg);
  color: var(--fv-success);
  border-radius: var(--fv-radius-sm);
  padding: var(--fv-space-md);
  font-weight: 600;
}


/* --- Yoast Local SEO — address & opening hours --- */

.fv-contact-details,
.fv-contact-details .wpseo-opening-hours,
.fv-contact-details .wpseo-opening-hours td,
.fv-contact-details .wpseo-opening-hours th {
  color: var(--fv-text);
  font-size: .95rem;
}


/* --- Muted text utility --- */
.fv-muted {
  color: var(--fv-text-muted);
  font-size: .9rem;
}

.fv-muted strong {
  color: var(--fv-text);
}


/* ==========================================================================
   3. UTILITIES
   Naming: .u-{property}-{value}
   Keep this section small. Prefer component classes for layout.
   ========================================================================== */

/* --- Max-width --- */
.u-maxw-sm  { max-width: 600px; }
.u-maxw-md  { max-width: 800px; }
.u-maxw-lg  { max-width: 1000px; }

/* --- Text --- */
.u-uppercase { text-transform: uppercase; letter-spacing: .04em; }
.u-bold      { font-weight: 700; }
.u-text-center { text-align: center; }
.u-text-muted  { color: var(--fv-text-muted); }

/* --- Margin-top --- */
.u-mt-0   { margin-top: 0; }
.u-mt-xs  { margin-top: var(--fv-space-xs); }
.u-mt-sm  { margin-top: var(--fv-space-sm); }
.u-mt-md  { margin-top: var(--fv-space-md); }
.u-mt-lg  { margin-top: var(--fv-space-lg); }
.u-mt-xl  { margin-top: var(--fv-space-xl); }
.u-mt-2xl { margin-top: var(--fv-space-2xl); }
.u-mt-3xl { margin-top: var(--fv-space-3xl); }

/* --- Margin-bottom --- */
.u-mb-0   { margin-bottom: 0; }
.u-mb-xs  { margin-bottom: var(--fv-space-xs); }
.u-mb-sm  { margin-bottom: var(--fv-space-sm); }
.u-mb-md  { margin-bottom: var(--fv-space-md); }
.u-mb-lg  { margin-bottom: var(--fv-space-lg); }
.u-mb-xl  { margin-bottom: var(--fv-space-xl); }
.u-mb-2xl { margin-bottom: var(--fv-space-2xl); }
.u-mb-3xl { margin-bottom: var(--fv-space-3xl); }

/* --- Gap (flex / grid containers) --- */
.u-gap-sm  { gap: var(--fv-space-sm); }
.u-gap-md  { gap: var(--fv-space-md); }
.u-gap-lg  { gap: var(--fv-space-lg); }
.u-gap-xl  { gap: var(--fv-space-xl); }


/* ==========================================================================
   4. COMPONENTS — Card
   Base card + modifiers. Use on any container block.
   ========================================================================== */

.fv-card {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  padding: var(--fv-space-lg);
  box-shadow: var(--fv-shadow-md);
}

.fv-card--soft {
  background: var(--fv-bg-soft);
  border-color: var(--fv-border-green);
  box-shadow: none;
}

.fv-card--outline {
  background: var(--fv-bg);
  border-color: var(--fv-green);
  box-shadow: none;
}

.fv-card--raised {
  box-shadow: var(--fv-shadow-lg);
}

/* Contact-page map card */
.fv-card--map {
  padding: 0;
  overflow: hidden;
}

.fv-card--map .wp-block-yoast-seo-local-map,
.fv-card--map .wp-block-yoast-seo-local-map iframe {
  display: block;
  width: 100%;
  border-radius: var(--fv-radius-md);
}


/* ==========================================================================
   5. COMPONENTS — Tile grid
   Info tiles built with core/columns + core/column + core/group.
   Apply .fv-tiles on the columns wrapper, .fv-tile on each group inside.
   ========================================================================== */

/* Wrapper (on wp-block-columns) */
.fv-tiles.wp-block-columns {
  gap: var(--fv-space-md);
  align-items: stretch;
  margin-bottom: var(--fv-space-xl);
}

.fv-tiles.wp-block-columns > .wp-block-column {
  display: flex;
}

/* Individual tile */
.fv-tile {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  padding: var(--fv-space-lg);
  box-shadow: var(--fv-shadow-md);
  transition: transform var(--fv-ease), box-shadow var(--fv-ease);
}

.fv-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--fv-shadow-lg);
}

/* Sub-elements */
.fv-tile__icon {
  margin: 0 0 var(--fv-space-sm);
  line-height: 1;
}

/* Lucide SVG inside tile icon */
.fv-tile__icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--fv-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reserve space before Lucide hydrates */
.fv-tile__icon [data-lucide] {
  display: inline-block;
  width: 34px;
  height: 34px;
}

.fv-tile__title {
  margin: 0 0 var(--fv-space-sm);
  line-height: 1.15;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.fv-tile__title a {
  color: inherit;
  text-decoration: none;
}

.fv-tile__title a:hover {
  text-decoration: none;
}

/* Stretched link — make entire tile clickable */
.fv-tile__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fv-tile__title a:focus-visible {
  outline: 2px solid var(--fv-air);
  outline-offset: 3px;
  border-radius: 4px;
  text-decoration: none;
}

.fv-tile__text {
  margin: auto 0 0;
}

/* CTA variant — calm page-ending panel */
.fv-tile--cta {
  background: var(--fv-surface);
  border: none;
  box-shadow: none;
  text-align: center;
  padding: var(--fv-space-2xl) var(--fv-space-xl);
  margin-top: var(--fv-space-2xl);
}

.fv-tile--cta:hover {
  transform: none;
  box-shadow: none;
}

.fv-tile--cta p {
  color: var(--fv-text);
}

.fv-tile--cta .fv-tile__icon svg {
  stroke: var(--fv-green);
  width: 28px;
  height: 28px;
}

.fv-tile--cta .wp-block-buttons {
  margin-top: var(--fv-space-lg);
  justify-content: center;
}

.fv-tile--cta .wp-block-button__link:hover,
.fv-tile--cta .wp-block-button__link:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
  .fv-tiles.wp-block-columns {
    gap: var(--fv-space-sm);
  }
  .fv-tile {
    padding: var(--fv-space-md);
  }
}

@media (max-width: 781px) {
  .fv-tile__icon svg,
  .fv-tile__icon [data-lucide] {
    width: 30px;
    height: 30px;
  }
}

/* Nav-tile variant — card with link list, no full-tile hover lift */
.fv-tile--nav:hover {
  transform: none;
  box-shadow: var(--fv-shadow-md);
}

/* Tile link-list — used on Klantenservice category cards */
.fv-tile__links {
  list-style: none;
  margin: var(--fv-space-md) 0 0;
  padding: 0;
}

.fv-tile__links li {
  border-top: 1px solid var(--fv-border);
}

.fv-tile__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fv-space-sm) 0;
  color: var(--fv-text);
  text-decoration: none;
  font-size: .95rem;
  transition: color var(--fv-ease);
}

.fv-tile__links a:hover {
  color: var(--fv-green);
}

.fv-tile__links a::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236F7C4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center;
}


/* ==========================================================================
   6. COMPONENTS — USP list
   Semantic <ul> with icon + text per item.
   ========================================================================== */

.fv-usp {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fv-usp__item {
  display: flex;
  align-items: center;
  gap: var(--fv-space-md);
  margin-bottom: var(--fv-space-md);
  font-size: 1rem;
  color: var(--fv-text);
}

.fv-usp__item:last-child {
  margin-bottom: 0;
}

.fv-usp__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--fv-green);
  stroke-width: 2;
}

.fv-usp__text {
  line-height: 1.5;
  font-weight: 500;
}

/* Override any theme pseudo-bullets on this component */
.fv-usp .fv-usp__item::before {
  display: none;
  content: none;
}


/* ==========================================================================
   7. COMPONENTS — Section
   Full-width background bands for page layout.
   Apply on a core/group set to "Full width".
   ========================================================================== */

.fv-section {
  padding-block: var(--fv-space-2xl);
}

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

.fv-section--white {
  background: var(--fv-bg);
}

.fv-section--dark {
  background: var(--fv-green);
  color: #fff;
}

.fv-section--dark a {
  color: var(--fv-green-light);
}

.fv-section--dark .wp-block-heading {
  color: #fff;
}

.fv-section--dark p {
  color: rgba(255, 255, 255, .8);
}


/* ==========================================================================
   8. COMPONENTS — Badge
   Small inline trust/quality markers.
   ========================================================================== */

.fv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fv-space-xs);
  padding: var(--fv-space-xs) var(--fv-space-md);
  font-size: .85rem;
  font-weight: 600;
  border-radius: var(--fv-radius-pill);
  background: #e7f5f6;
  background: color-mix(in srgb, var(--fv-air) 15%, #fff);
  color: var(--fv-green-dark);
}

.fv-badge--outline {
  background: transparent;
  border: 1px solid var(--fv-green);
  color: var(--fv-green);
}


/* ==========================================================================
   9. COMPONENTS — Notice
   Info / success / warning boxes for content pages.
   ========================================================================== */

.fv-notice {
  padding: var(--fv-space-md) var(--fv-space-lg);
  border-radius: var(--fv-radius-sm);
  border-left: 4px solid var(--fv-info);
  background: var(--fv-info-bg);
  color: var(--fv-text);
}

.fv-notice--success {
  border-left-color: var(--fv-success);
  background: var(--fv-success-bg);
}

.fv-notice--warning {
  border-left-color: var(--fv-warning);
  background: var(--fv-warning-bg);
}

.fv-notice--error {
  border-left-color: var(--fv-error);
  background: var(--fv-error-bg);
}


/* ==========================================================================
  10. COMPONENTS — FAQ accordion
   Built on native <details>/<summary> for zero-JS, accessible accordion.
   ========================================================================== */

.fv-faq {
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-sm);
  margin-bottom: var(--fv-space-sm);
  overflow: hidden;
}

.fv-faq summary {
  padding: var(--fv-space-md) var(--fv-space-lg);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fv-space-md);
  transition: background var(--fv-ease);
}

.fv-faq summary:hover {
  background: var(--fv-bg-soft);
}

/* Custom chevron */
.fv-faq summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--fv-green);
  border-bottom: 2px solid var(--fv-green);
  transform: rotate(45deg);
  transition: transform var(--fv-ease);
  flex-shrink: 0;
}

.fv-faq[open] summary::after {
  transform: rotate(-135deg);
}

/* Hide default marker (webkit + standard) */
.fv-faq summary::-webkit-details-marker {
  display: none;
}

.fv-faq .fv-faq__body {
  padding: 0 var(--fv-space-lg) var(--fv-space-lg);
}


/* ==========================================================================
  11. COMPONENTS — Button modifiers
   Layered on top of Shoptimizer / WooCommerce base .button.
   ========================================================================== */

.fv-btn--green {
  background-color: var(--fv-green);
  color: #fff;
  border-color: var(--fv-green);
  border-radius: var(--fv-radius-sm);
}

.fv-btn--green:hover,
.fv-btn--green:focus-visible {
  background-color: var(--fv-green-dark);
  border-color: var(--fv-green-dark);
  color: #fff;
  border-radius: var(--fv-radius-sm);
}

.fv-btn--outline {
  background: transparent;
  color: var(--fv-green);
  border: 2px solid var(--fv-green);
  border-radius: var(--fv-radius-sm);
}

.fv-btn--outline:hover,
.fv-btn--outline:focus-visible {
  background: var(--fv-green);
  color: #fff;
  border-radius: var(--fv-radius-sm);
}

/* --- Standalone button base (for <a> links outside WP button block) --- */
.fv-btn {
  display: inline-block;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--fv-radius-sm);
  cursor: pointer;
  transition: background-color var(--fv-ease), border-color var(--fv-ease), color var(--fv-ease);
}

.fv-btn--lg {
  padding: 16px 40px;
  font-size: 1.1rem;
}

.fv-btn--accent,
.fv-btn--accent.wp-block-button__link {
  background-color: var(--fv-accent);
  color: #fff;
  border-color: var(--fv-accent);
  border-radius: var(--fv-radius-sm);
}

.fv-btn--accent:hover,
.fv-btn--accent:focus-visible {
  background-color: var(--fv-accent-hover);
  border-color: var(--fv-accent-hover);
  color: #fff;
  border-radius: var(--fv-radius-sm);
}

.fv-btn--dark,
.fv-btn--dark.wp-block-button__link {
  background-color: var(--fv-green);
  color: #fff;
  border-color: var(--fv-green);
  border-radius: var(--fv-radius-sm);
}

.fv-btn--dark:hover,
.fv-btn--dark:focus-visible {
  background-color: var(--fv-green-dark);
  border-color: var(--fv-green-dark);
  color: #fff;
  border-radius: var(--fv-radius-sm);
}

.fv-btn--secondary,
.fv-btn--secondary.wp-block-button__link {
  background: var(--fv-bg-soft);
  color: var(--fv-text);
  border-color: var(--fv-border);
  border-radius: var(--fv-radius-sm);
}

.fv-btn--secondary:hover,
.fv-btn--secondary:focus-visible {
  background: var(--fv-bg);
  border-color: var(--fv-green);
  color: var(--fv-green);
  border-radius: var(--fv-radius-sm);
}

.fv-btn--outline-light,
.fv-btn--outline-light.wp-block-button__link {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
  border-radius: var(--fv-radius-sm);
}

.fv-btn--outline-light:hover,
.fv-btn--outline-light:focus-visible {
  background: rgba(255, 255, 255, .25);
  border-color: #fff;
  color: #fff;
  border-radius: var(--fv-radius-sm);
}

/* WP button block integration: lock border-radius globally.
   !important overrides both Gutenberg inline styles and wp-element-button defaults. */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-element-button {
  border-radius: var(--fv-radius-sm) !important;
}

/* Apply fv-btn styles to inner link */
.wp-block-button.fv-btn--accent .wp-block-button__link,
.wp-block-button.is-style-fv-accent .wp-block-button__link {
  background-color: var(--fv-accent);
  color: #fff;
  border: 2px solid var(--fv-accent);
  border-radius: var(--fv-radius-sm);
  padding: 12px 32px;
  font-weight: 600;
  transition: background-color var(--fv-ease), border-color var(--fv-ease);
}

.wp-block-button.fv-btn--accent .wp-block-button__link:hover,
.wp-block-button.is-style-fv-accent .wp-block-button__link:hover {
  background-color: var(--fv-accent-hover);
  border-color: var(--fv-accent-hover);
  color: #fff;
  border-radius: var(--fv-radius-sm);
}

.wp-block-button.fv-btn--accent.fv-btn--lg .wp-block-button__link {
  padding: 16px 40px;
  font-size: 1.1rem;
}

.wp-block-button.fv-btn--dark .wp-block-button__link,
.wp-block-button.is-style-fv-dark .wp-block-button__link {
  background-color: var(--fv-green);
  color: #fff;
  border: 2px solid var(--fv-green);
  border-radius: var(--fv-radius-sm);
  padding: 12px 32px;
  font-weight: 600;
  transition: background-color var(--fv-ease), border-color var(--fv-ease);
}

.wp-block-button.fv-btn--dark .wp-block-button__link:hover,
.wp-block-button.is-style-fv-dark .wp-block-button__link:hover {
  background-color: var(--fv-green-dark);
  border-color: var(--fv-green-dark);
  color: #fff;
  border-radius: var(--fv-radius-sm);
}

.wp-block-button.fv-btn--secondary .wp-block-button__link,
.wp-block-button.is-style-fv-secondary .wp-block-button__link {
  background: var(--fv-bg-soft);
  color: var(--fv-text);
  border: 2px solid var(--fv-border);
  border-radius: var(--fv-radius-sm);
  padding: 12px 32px;
  font-weight: 600;
  transition: background-color var(--fv-ease), border-color var(--fv-ease), color var(--fv-ease);
}

.wp-block-button.fv-btn--secondary .wp-block-button__link:hover,
.wp-block-button.is-style-fv-secondary .wp-block-button__link:hover {
  background: var(--fv-bg);
  border-color: var(--fv-green);
  color: var(--fv-green);
  border-radius: var(--fv-radius-sm);
}

.wp-block-button.fv-btn--outline-light .wp-block-button__link {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: var(--fv-radius-sm);
  padding: 12px 32px;
  font-weight: 600;
  transition: background-color var(--fv-ease), border-color var(--fv-ease);
}

.wp-block-button.fv-btn--outline-light .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .25);
  border-color: #fff;
  color: #fff;
  border-radius: var(--fv-radius-sm);
}


/* WP separator block: consistent token-based styling */
.wp-block-separator {
  border-color: var(--fv-border) !important;
  opacity: 1;
}


/* ==========================================================================
  12. BLOCK — Hero
   Full-width hero banner with background image, overlay, and CTA.
   ========================================================================== */

.fv-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: var(--fv-space-3xl) var(--fv-space-lg);
  overflow: hidden;
}

.fv-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}

.fv-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 86% 49%;
}

.fv-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fv-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--fv-content-w);
  width: 100%;
  text-align: center;
}

.fv-hero__heading {
  margin: 0 0 var(--fv-space-md);
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
}

.fv-hero__text {
  margin: 0 0 var(--fv-space-lg);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

.fv-hero__cta {
  display: inline-block;
  padding: var(--fv-space-sm) var(--fv-space-xl);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--fv-radius-sm);
  transition: background-color var(--fv-ease), border-color var(--fv-ease);
}

/* --- Hero style: dark overlay --- */
.fv-hero--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .55);
  pointer-events: none;
}

.fv-hero--dark .fv-hero__overlay {
  background: rgba(0, 0, 0, .55);
}

.fv-hero--dark {
  color: #fff;
}

.fv-hero--dark .fv-hero__heading {
  color: #fff;
}

.fv-hero--dark .fv-hero__text {
  color: rgba(255, 255, 255, .9);
}

/* --- Hero style: light --- */
.fv-hero--light .fv-hero__overlay {
  background: rgba(255, 255, 255, .7);
}

.fv-hero--light {
  color: var(--fv-text);
}

/* --- Hero style: soft green --- */
.fv-hero--soft .fv-hero__overlay {
  background: rgba(244, 247, 241, .85);
}

.fv-hero--soft {
  color: var(--fv-text);
}

/* --- Hero responsive --- */
@media (max-width: 781px) {
  .fv-hero {
    min-height: 320px;
    padding: var(--fv-space-2xl) var(--fv-space-md);
  }
}


/* ==========================================================================
  13. BLOCK — USP row
   Horizontal strip of icon + text items. Used as a trust bar.
   ========================================================================== */

.fv-usp-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fv-space-md) var(--fv-space-xl);
  padding: var(--fv-space-md) var(--fv-space-lg);
  background: var(--fv-bg-soft);
}

.fv-usp-row__item {
  display: inline-flex;
  align-items: center;
  gap: var(--fv-space-sm);
  font-size: .9rem;
  font-weight: 500;
  color: var(--fv-text);
  white-space: nowrap;
}

.fv-usp-row__icon {
  flex-shrink: 0;
  line-height: 1;
}

.fv-usp-row__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--fv-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-usp-row__icon [data-lucide] {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.fv-usp-row__text {
  line-height: 1.4;
}

@media (max-width: 600px) {
  .fv-usp-row {
    gap: var(--fv-space-sm) var(--fv-space-md);
    padding: var(--fv-space-sm) var(--fv-space-md);
  }

  .fv-usp-row__item {
    font-size: .8rem;
  }
}


/* ==========================================================================
  14. BLOCK — Tiles grid (ACF)
   CSS Grid variant for the ACF info-tiles block.
   Re-uses .fv-tile sub-elements from section 5.
   ========================================================================== */

.fv-tiles-grid {
  display: grid;
  gap: var(--fv-space-lg);
  margin-bottom: var(--fv-space-2xl);
}

/* Override Gutenberg layout styles that fight CSS Grid */
.fv-tiles-grid > * {
  max-width: none !important;
  margin-block-start: 0 !important;
}

.fv-tiles-grid--2col { grid-template-columns: repeat(2, 1fr); }
.fv-tiles-grid--3col { grid-template-columns: repeat(3, 1fr); }
.fv-tiles-grid--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .fv-tiles-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 781px) {
  .fv-tiles-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .fv-tiles-grid {
    gap: var(--fv-space-md);
  }
}

@media (max-width: 480px) {
  .fv-tiles-grid--2col,
  .fv-tiles-grid--3col,
  .fv-tiles-grid--4col {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
  15. BLOCK — FAQ section
   Wrapper with optional heading. Individual .fv-faq items come from section 10.
   ========================================================================== */

.fv-faq-section {
  max-width: var(--fv-content-w);
  margin-inline: auto;
  padding-block: var(--fv-space-xl);
}

.fv-faq-section__heading {
  margin: 0 0 var(--fv-space-lg);
  text-align: center;
}

/* Yoast FAQ block & SEOAI FAQ shortcode — unified accordion style.
   JS in functions.php converts these into .fv-faq <details>/<summary>
   elements. The rules below are a no-JS fallback. */

.wp-block-yoast-faq-block,
.wp-block-seoaic-faq-block {
  max-width: var(--fv-content-w);
  margin-inline: auto;
  padding-block: var(--fv-space-xl);
}

/* Fallback: hide the original heading from SEOAI (JS replaces the items) */
.wp-block-seoaic-faq-block .seoaic-faq-section-title {
  margin: 0 0 var(--fv-space-lg);
  text-align: center;
}

/* No-JS fallback for both: card-style Q&A (before JS converts to accordion) */
.wp-block-yoast-faq-block .schema-faq-section,
.wp-block-seoaic-faq-block .seoaic-faq-item {
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-sm);
  margin-bottom: var(--fv-space-sm);
  padding: var(--fv-space-md) var(--fv-space-lg);
}

.wp-block-yoast-faq-block .schema-faq-question,
.wp-block-seoaic-faq-block .seoaic-question {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--fv-text);
  margin: 0 0 var(--fv-space-sm);
}

.wp-block-yoast-faq-block .schema-faq-answer,
.wp-block-seoaic-faq-block .seoaic-answer {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fv-text-muted);
  margin: 0;
}

.wp-block-yoast-faq-block .schema-faq-answer a,
.wp-block-seoaic-faq-block .seoaic-answer a {
  color: var(--fv-green);
}

.wp-block-yoast-faq-block .schema-faq-answer a:hover,
.wp-block-seoaic-faq-block .seoaic-answer a:hover {
  text-decoration: underline;
}


/* ==========================================================================
  16. BLOCK — Content + CTA
   Centered content block with heading, body text, and CTA button.
   Sits inside .fv-section for background variants.
   ========================================================================== */

.fv-content-cta {
  max-width: var(--fv-content-w);
  margin-inline: auto;
  text-align: center;
}

.fv-content-cta__heading {
  margin: 0 0 var(--fv-space-md);
}

.fv-content-cta__body {
  margin: 0 0 var(--fv-space-lg);
  line-height: 1.7;
}

.fv-content-cta__body :last-child {
  margin-bottom: 0;
}

.fv-content-cta__btn {
  display: inline-block;
  padding: var(--fv-space-sm) var(--fv-space-xl);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--fv-radius-sm);
  transition: background-color var(--fv-ease), border-color var(--fv-ease), color var(--fv-ease);
}


/* ==========================================================================
  17. BLOCK — Trust row
   Horizontal strip of .fv-badge items. Wraps on small screens.
   Badge styles come from section 8.
   ========================================================================== */

.fv-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fv-space-sm);
  padding: var(--fv-space-lg) var(--fv-space-md);
}


/* ==========================================================================
  18. COMPONENT — Category nav
   Clickable category cards used as "start here" navigation.
   ========================================================================== */

.fv-cat-nav {
  display: grid;
  gap: var(--fv-space-md);
  max-width: var(--fv-wide-w);
  margin-inline: auto;
  padding-inline: var(--fv-space-md);
}

.fv-cat-nav + .fv-cat-nav {
  margin-top: var(--fv-space-md);
}

/* Space above cat-nav when preceded by other content */
.fv-check-list + .fv-cat-nav,
.fv-steps + .fv-cat-nav,
p + .fv-cat-nav {
  margin-top: var(--fv-space-2xl);
}

.fv-cat-nav--2 { grid-template-columns: repeat(2, 1fr); }
.fv-cat-nav--3 { grid-template-columns: repeat(3, 1fr); }
.fv-cat-nav--4 { grid-template-columns: repeat(4, 1fr); }

.fv-cat-nav__card {
  display: flex;
  align-items: center;
  gap: var(--fv-space-md);
  padding: var(--fv-space-md) var(--fv-space-lg);
  background: #fff;
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  box-shadow: var(--fv-shadow-sm);
  text-decoration: none;
  color: var(--fv-text);
  transition: box-shadow var(--fv-ease), transform var(--fv-ease);
}

.fv-cat-nav__card:hover {
  box-shadow: var(--fv-shadow-md);
  transform: translateY(-2px);
}

.fv-cat-nav__card:focus-visible {
  outline: 2px solid var(--fv-air);
  outline-offset: 2px;
}

.fv-cat-nav__img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Lucide icon variant for cat-nav image slot */
.fv-cat-nav__img svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--fv-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* When fv-cat-nav__img is a span (icon-only, no <img>), centre the icon */
span.fv-cat-nav__img {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lucide icon inside arrow slot */
.fv-cat-nav__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.fv-cat-nav__label {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.fv-cat-nav__arrow {
  flex-shrink: 0;
  color: var(--fv-text-muted);
  font-size: 1.25rem;
  transition: transform var(--fv-ease);
}

.fv-cat-nav__card:hover .fv-cat-nav__arrow {
  transform: translateX(3px);
}

@media (max-width: 781px) {
  .fv-cat-nav--2,
  .fv-cat-nav--3,
  .fv-cat-nav--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .fv-cat-nav--2,
  .fv-cat-nav--3,
  .fv-cat-nav--4 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
  19. COMPONENT — Step card
   Numbered step cards for process flows.
   ========================================================================== */

.fv-steps {
  display: grid;
  gap: var(--fv-space-lg);
  counter-reset: fv-step;
}

.fv-steps--3 { grid-template-columns: repeat(3, 1fr); }

.fv-step {
  counter-increment: fv-step;
  display: flex;
  flex-direction: column;
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  padding: var(--fv-space-lg);
  box-shadow: var(--fv-shadow-sm);
  transition: box-shadow var(--fv-ease);
}

.fv-step:hover {
  box-shadow: var(--fv-shadow-md);
}

.fv-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fv-green);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--fv-space-md);
}

.fv-step__number::before {
  content: counter(fv-step);
}

.fv-step__title {
  margin: 0 0 var(--fv-space-sm);
  font-size: 1.1rem;
  font-weight: 700;
}

.fv-step__text {
  margin: 0 0 var(--fv-space-md);
  line-height: 1.6;
  flex: 1;
}

.fv-step__link {
  display: inline-flex;
  align-items: center;
  gap: var(--fv-space-xs);
  font-weight: 600;
  color: var(--fv-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: auto;
}

.fv-step__link:hover {
  text-decoration: underline;
}

@media (max-width: 781px) {
  .fv-steps--3 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
  20. COMPONENT — Showroom card
   Address + opening hours card with CTA buttons.
   ========================================================================== */

/* Mirrors .fv-card base — kept for backward compatibility with homepage markup */
.fv-showroom {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  padding: var(--fv-space-lg);
  box-shadow: var(--fv-shadow-md);
}

.fv-showroom__note {
  margin-top: var(--fv-space-md);
  font-size: .8rem;
  color: var(--fv-text-muted);
}

.fv-showroom__btns {
  display: flex;
  gap: var(--fv-space-sm);
  margin-top: var(--fv-space-lg);
}

.fv-showroom__btns a {
  flex: 1;
  text-align: center;
}

@media (max-width: 480px) {
  .fv-showroom__btns {
    flex-direction: column;
  }
}


/* ==========================================================================
  21. COMPONENT — Trustpilot embed
   Stable container for Trustpilot widget to prevent CLS.
   ========================================================================== */

.fv-trustpilot {
  min-height: 280px;
  padding: var(--fv-space-lg) 0;
}


/* ==========================================================================
  21b. COMPONENT — Blog post hero
   Full-width featured image banner for single blog posts.
   ========================================================================== */

.shoptimizer-post-hero {
  position: relative;
  padding: 4rem 0;
  margin-bottom: 2rem;
  overflow: hidden;
}

.shoptimizer-post-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.shoptimizer-post-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shoptimizer-post-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.shoptimizer-post-hero .col-full {
  position: relative;
  z-index: 2;
}

.shoptimizer-post-hero h1,
.shoptimizer-post-hero .post-hero-meta,
.shoptimizer-post-hero .post-hero-meta span,
.shoptimizer-post-hero .post-hero-meta a,
.shoptimizer-post-hero .post-hero-meta time {
  color: #fff;
}

.shoptimizer-post-hero h1 {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

.shoptimizer-post-hero .post-hero-meta {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

.shoptimizer-post-hero .post-hero-meta .meta-separator {
  margin: 0 0.4rem;
}

@media (max-width: 992px) {
  .shoptimizer-post-hero {
    padding: 2.5rem 0;
  }
}


/* ==========================================================================
  22. COMPONENT — Blog grid
   Featured post + card grid pattern.
   ========================================================================== */

.fv-blog-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fv-space-md);
  margin-bottom: var(--fv-space-xl);
}

.fv-blog-header__title {
  margin: 0;
}

.fv-blog-header__link {
  font-weight: 600;
  color: var(--fv-green-dark);
  text-decoration: none;
  transition: color var(--fv-ease);
}

.fv-blog-header__link:hover {
  color: var(--fv-accent);
  text-decoration: underline;
}

/* --- Featured post card --- */

.fv-blog-featured .wp-block-post-template > li {
  list-style: none;
}

.fv-blog-featured .wp-block-columns {
  background: var(--fv-surface);
  border-radius: var(--fv-radius-lg);
  overflow: hidden;
  box-shadow: var(--fv-shadow-md);
  border: 1px solid var(--fv-border);
  gap: 0 !important;
  transition: box-shadow .3s ease;
}

.fv-blog-featured .wp-block-columns:hover {
  box-shadow: var(--fv-shadow-lg);
}

.fv-blog-featured .wp-block-column:first-child {
  overflow: hidden;
  min-height: 280px;
  background: linear-gradient(135deg, var(--fv-bg-soft) 0%, var(--fv-border) 100%);
}

.fv-blog-featured .wp-block-post-featured-image {
  margin: 0;
  height: 100%;
}

.fv-blog-featured .wp-block-post-featured-image a {
  display: block;
  height: 100%;
}

.fv-blog-featured .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.fv-blog-featured .wp-block-columns:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
}

/* Featured post — content column */
.fv-blog-featured .wp-block-column:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--fv-space-2xl);
}

.fv-blog-featured .wp-block-post-title {
  margin-bottom: var(--fv-space-md);
}

.fv-blog-featured .wp-block-post-title a {
  color: var(--fv-green-dark);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1.35;
  transition: color var(--fv-ease);
}

.fv-blog-featured .wp-block-post-title a:hover {
  color: var(--fv-accent);
}

.fv-blog-featured .wp-block-post-excerpt {
  color: var(--fv-text-muted);
  line-height: 1.6;
}

.fv-blog-featured .wp-block-post-excerpt__more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--fv-space-sm);
  color: var(--fv-accent);
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s ease, color var(--fv-ease);
}

.fv-blog-featured .wp-block-post-excerpt__more-link:hover {
  gap: 10px;
  color: var(--fv-accent-hover);
}

.fv-blog-featured .wp-block-post-excerpt__more-link::after {
  content: "→";
}

/* --- Blog card grid --- */

.fv-blog-grid {
  margin-top: var(--fv-space-xl);
}

.fv-blog-card {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  overflow: hidden;
  padding: 0 !important;
  box-shadow: var(--fv-shadow-sm);
  transition: box-shadow .3s ease, transform .3s ease;
}

.fv-blog-card:hover {
  box-shadow: var(--fv-shadow-lg);
  transform: translateY(-4px);
}

/* Card image */
.fv-blog-card .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--fv-bg-soft) 0%, var(--fv-border) 100%);
  aspect-ratio: 16 / 10;
}

.fv-blog-card .wp-block-post-featured-image a {
  display: block;
  height: 100%;
}

.fv-blog-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.fv-blog-card:hover .wp-block-post-featured-image img {
  transform: scale(1.06);
}

/* Card body */
.fv-blog-card .wp-block-post-title {
  padding: var(--fv-space-md) var(--fv-space-lg) 0;
  margin: 0;
}

.fv-blog-card .wp-block-post-title a {
  color: var(--fv-green-dark);
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.4;
  transition: color var(--fv-ease);
}

.fv-blog-card .wp-block-post-title a:hover {
  color: var(--fv-accent);
}

.fv-blog-card .wp-block-post-excerpt {
  padding: var(--fv-space-sm) var(--fv-space-lg) var(--fv-space-lg);
  margin: 0;
  color: var(--fv-text-muted);
  font-size: .875rem;
  line-height: 1.5;
}

.fv-blog-card .wp-block-post-excerpt__more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fv-accent);
  font-weight: 600;
  text-decoration: none;
  font-size: .875rem;
  transition: gap .2s ease, color var(--fv-ease);
}

.fv-blog-card .wp-block-post-excerpt__more-link:hover {
  gap: 8px;
  color: var(--fv-accent-hover);
}

.fv-blog-card .wp-block-post-excerpt__more-link::after {
  content: "→";
}

/* --- Responsive --- */

@media (max-width: 781px) {
  .fv-blog-featured .wp-block-column:last-child {
    padding: var(--fv-space-lg);
  }

  .fv-blog-featured .wp-block-post-title a {
    font-size: 1.25rem;
  }

  .fv-blog-grid .wp-block-post-template {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .fv-blog-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
  23. COMPONENT — Section inner
   Constrains content within full-width section bands.
   ========================================================================== */

.fv-section__inner {
  max-width: var(--fv-wide-w);
  margin-inline: auto;
  padding-inline: var(--fv-space-md);
}

.fv-section__inner--narrow {
  max-width: var(--fv-content-w);
}

/* Two-column layout within sections */
.fv-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fv-space-2xl);
  align-items: start;
}

.fv-split--60-40 {
  grid-template-columns: 3fr 2fr;
}

@media (max-width: 781px) {
  .fv-split,
  .fv-split--60-40 {
    grid-template-columns: 1fr;
    gap: var(--fv-space-lg);
  }
}


/* ==========================================================================
  24. COMPONENT — Timeline
   Compact vertical timeline for company history / milestones.
   Built with wp:html for semantic <ol> structure.
   ========================================================================== */

.fv-timeline {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Vertical connector line — centred under 48 px dot */
.fv-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 23px;
  width: 2px;
  background: var(--fv-border-green);
}

.fv-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--fv-space-md);
  padding-bottom: var(--fv-space-xl);
}

.fv-timeline__item:last-child {
  padding-bottom: 0;
}

/* Year dot */
.fv-timeline__year {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fv-green);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.fv-timeline__body {
  padding-top: var(--fv-space-sm);
}

.fv-timeline__title {
  margin: 0 0 var(--fv-space-xs);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fv-text);
}

.fv-timeline__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fv-text-muted);
}

@media (max-width: 480px) {
  .fv-timeline::before {
    left: 19px;
  }

  .fv-timeline__item {
    grid-template-columns: 40px 1fr;
  }

  .fv-timeline__year {
    width: 40px;
    height: 40px;
    font-size: .75rem;
  }
}


/* ==========================================================================
  25. COMPONENT — Stats grid
   Key numbers / metrics displayed in a row of boxes.
   ========================================================================== */

.fv-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--fv-space-md);
}

.fv-stat {
  text-align: center;
  padding: var(--fv-space-lg);
  background: var(--fv-bg);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
}

.fv-stat__number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--fv-green);
}

.fv-stat__label {
  display: block;
  margin-top: var(--fv-space-xs);
  font-size: .9rem;
  color: var(--fv-text-muted);
  line-height: 1.3;
}

/* On dark backgrounds */
.fv-section--dark .fv-stat {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
}

.fv-section--dark .fv-stat__number {
  color: #fff;
}

.fv-section--dark .fv-stat__label {
  color: rgba(255, 255, 255, .8);
}

/* On soft backgrounds */
.fv-section--soft .fv-stat {
  background: var(--fv-bg);
}


/* ==========================================================================
  26. COMPONENT — Quality / feature grid
   3-column card grid with icon, title, description.
   Used for materials, certifications, quality info.
   ========================================================================== */

.fv-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fv-space-lg);
}

.fv-feature-card {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  padding: var(--fv-space-lg);
  box-shadow: var(--fv-shadow-sm);
  text-align: center;
  transition: box-shadow var(--fv-ease);
}

.fv-feature-card:hover {
  box-shadow: var(--fv-shadow-md);
}

.fv-feature-card__icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: var(--fv-space-md);
}

.fv-feature-card__icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--fv-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-feature-card__icon [data-lucide] {
  display: inline-block;
  width: 36px;
  height: 36px;
}

.fv-feature-card__title {
  margin: 0 0 var(--fv-space-sm);
  font-size: 1.1rem;
  font-weight: 700;
}

.fv-feature-card__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fv-text-muted);
}

@media (max-width: 781px) {
  .fv-feature-grid {
    grid-template-columns: 1fr;
    gap: var(--fv-space-md);
  }
}


/* ==========================================================================
  27. COMPONENT — Location card
   Address card with image, details and CTA buttons.
   ========================================================================== */

.fv-locations {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fv-space-lg);
}

.fv-location {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  overflow: hidden;
  box-shadow: var(--fv-shadow-sm);
  transition: box-shadow var(--fv-ease);
}

.fv-location:hover {
  box-shadow: var(--fv-shadow-md);
}

.fv-location__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.fv-location__body {
  padding: var(--fv-space-lg);
}

.fv-location__name {
  margin: 0 0 var(--fv-space-sm);
  font-size: 1.15rem;
  font-weight: 700;
}

.fv-location__detail {
  margin: 0 0 var(--fv-space-xs);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--fv-text-muted);
}

.fv-location__btns {
  display: flex;
  gap: var(--fv-space-sm);
  margin-top: var(--fv-space-md);
}

.fv-location__btns .fv-btn {
  flex: 1;
  text-align: center;
  padding: 10px 16px;
  font-size: .9rem;
}

@media (max-width: 781px) {
  .fv-locations {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
  28. COMPONENT — Highlight list
   Checkmark list for USPs / benefit lists within content sections.
   ========================================================================== */

.fv-check-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 700px;
}

.fv-check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--fv-space-sm);
  line-height: 1.6;
}

.fv-check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fv-green);
  font-weight: 700;
  font-size: 1.1rem;
}

.fv-section--dark .fv-check-list li::before {
  color: var(--fv-green-light);
}

.fv-section--dark .fv-check-list li {
  color: rgba(255, 255, 255, .9);
}


/* ==========================================================================
  29. COMPONENT — Conditions page
   Summary card, conditions list, distance table, CTA card.
   Used on leveringsvoorwaarden and similar policy pages.
   ========================================================================== */

/* --- Summary card --- */
.fv-summary {
  background: var(--fv-bg-soft);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  padding: var(--fv-space-lg);
}

.fv-summary__title {
  margin: 0 0 var(--fv-space-md);
  font-size: 1rem;
  font-weight: 700;
}

.fv-summary__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fv-summary__list li {
  display: flex;
  align-items: baseline;
  gap: var(--fv-space-sm);
  padding: var(--fv-space-xs) 0;
  font-size: .9rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--fv-border);
}

.fv-summary__list li:last-child {
  border-bottom: none;
}

.fv-summary__list li::before {
  content: "›";
  color: var(--fv-green);
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Conditions ordered list --- */
.fv-conditions-list {
  padding-left: var(--fv-space-lg);
  margin: 0;
}

.fv-conditions-list li {
  margin-bottom: var(--fv-space-lg);
  padding-left: var(--fv-space-xs);
  line-height: 1.7;
}

.fv-conditions-list li::marker {
  color: var(--fv-green);
  font-weight: 700;
}

/* --- Distance table --- */
.fv-distance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.fv-distance-table th,
.fv-distance-table td {
  padding: var(--fv-space-sm) var(--fv-space-md);
  text-align: left;
  border-bottom: 1px solid var(--fv-border);
}

.fv-distance-table th {
  font-weight: 600;
  font-size: .85rem;
  color: var(--fv-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.fv-distance-table td:last-child {
  font-weight: 700;
  color: var(--fv-green);
}

/* DEPRECATED: .fv-cta-card — use .fv-tile.fv-tile--cta instead.
   Kept as alias for backward compatibility only. */
.fv-cta-card {
  background: var(--fv-surface);
  border: none;
  border-radius: var(--fv-radius-md);
  box-shadow: none;
  padding: var(--fv-space-2xl) var(--fv-space-xl);
  text-align: center;
  margin-top: var(--fv-space-2xl);
}


/* ==========================================================================
  30. HOME PAGE — Consistent content width
   Ensure all non-full-width blocks share the same max-width.
   ========================================================================== */

.home .entry-content > *:not(.alignwide):not(.alignfull):not(.fv-hero):not(.fv-usp-row):not(.fv-trust-row) {
  max-width: var(--fv-wide-w);
  margin-inline: auto;
  padding-inline: var(--fv-space-md);
}

/* Full-width blocks break out of the constraint */
.home .entry-content > .alignfull,
.home .entry-content > .fv-hero,
.home .entry-content > .fv-usp-row,
.home .entry-content > .fv-trust-row {
  max-width: none;
  padding-inline: 0;
}


/* ==========================================================================
  31. Werken-bij / Vacature (Careers) page layout
   ========================================================================== */

.post-type-archive-vacature .site-content,
.single-vacature .site-content {
  max-width: var(--fv-wide-w);
  margin-inline: auto;
  padding-inline: var(--fv-space-md);
}

/* Vacancy card grid */
.fv-vacatures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--fv-space-lg);
  padding-block: var(--fv-space-xl);
}

.fv-vacature {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  padding: var(--fv-space-lg);
  box-shadow: var(--fv-shadow-sm);
  transition: box-shadow var(--fv-ease), transform var(--fv-ease);
}

.fv-vacature:hover {
  box-shadow: var(--fv-shadow-md);
  transform: translateY(-2px);
}

.fv-vacature__title {
  margin: 0 0 var(--fv-space-sm);
  font-size: 1.1rem;
  font-weight: 700;
}

.fv-vacature__title a {
  color: var(--fv-text);
  text-decoration: none;
}

.fv-vacature__title a:hover {
  color: var(--fv-green);
}

.fv-vacature__meta {
  font-size: .9rem;
  color: var(--fv-text-muted);
  margin-bottom: var(--fv-space-md);
}

.fv-vacature__excerpt {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fv-text-muted);
}

/* Werken-bij page — ensure Gutenberg content is constrained */
.page-template-default .entry-content .wp-block-group:not(.alignwide):not(.alignfull) {
  max-width: var(--fv-wide-w);
  margin-inline: auto;
}

@media (max-width: 781px) {
  .fv-vacatures {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   31. Utility classes
   ========================================================================== */

.bold {
  font-weight: 900;
  text-transform: uppercase;
}

.max-w-xl {
  max-width: 800px;
}


/* ==========================================================================
   32. Menu — primary menu button
   ========================================================================== */

.menu-primary-menu-container > ul > li.menu-button > a span {
  color: #333;
  background: #f4f7f1;
  border-radius: 8px !important;
}

.menu-primary-menu-container > ul > li.menu-button > a span:hover {
  color: #333;
  background: #f5f3eb;
  border-radius: 8px !important;
}


/* ==========================================================================
   33. Blog container
   ========================================================================== */

.blog-container {
  background-color: #f4f7f1;
  border-radius: 8px;
  padding: 24px;
  margin-top: 16px;
}

.blog-title {
  color: #333333;
}


/* ==========================================================================
   34. Content boxes
   ========================================================================== */

.content-box-green {
  background-color: #f4f7f1;
  border: 1px solid #5a7c5a;
  border-radius: 8px;
  margin: 0 0 25px;
  overflow: hidden;
  padding: 20px;
}


/* ==========================================================================
   35. Sidebar / widgets / facets
   ========================================================================== */

#secondary .widget {
  border-bottom: none !important;
}

.widget {
  padding-bottom: 0px !important;
}

.facetwp-counter {
  display: none;
}

h3.facet-label {
  font-size: 20px;
}


/* ==========================================================================
   36. Trustpilot widget
   ========================================================================== */

.tp-widget-wrapper {
  margin: 0 !important;
  position: fixed !important;
}


/* ==========================================================================
   37. Owl carousel navigation
   ========================================================================== */

.owl-prev.button,
.owl-next.button,
a.owl-prev.button,
a.owl-next.button {
  background-color: #f2f2f2;
  color: #555555;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.owl-prev.button:hover,
.owl-next.button:hover,
a.owl-prev.button:hover,
a.owl-next.button:hover {
  background-color: #e6e6e6;
  color: #333333;
}


/* ==========================================================================
   38. Date visibility (blog)
   ========================================================================== */

.entry-date.published:not(.updated) {
  display: none;
}

.updated:not(.published) {
  display: inline;
}


/* ==========================================================================
   39. Contact page — hours table
   ========================================================================== */

.contact-hours table td {
  padding: 0;
}


/* ==========================================================================
   40. Site overlay fix
   ========================================================================== */

@media (min-width: 993px) {
  .site.overlay .site-content:after {
    background: transparent;
  }
}

@media (max-width: 992px) {
  .call-back-feature {
    display: block;
  }
}


/* ==========================================================================
   41. Inmeettool — base
   ========================================================================== */

.fv-inmeettool * {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

.fv-inmeettool h2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}

.fv-inmeettool .sub {
  color: #555;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.fv-inmeettool .fv-grid {
  display: grid;
  gap: .75rem;
}

.fv-inmeettool .fv-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fv-inmeettool .fv-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fv-inmeettool .fv-card {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: .5rem;
  padding: 1rem;
}

.fv-inmeettool .fv-label {
  font-size: .95rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: .25rem;
  display: block;
}

.fv-inmeettool .fv-input {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid #d1d5db;
  border-radius: .45rem;
  background: #fff;
  font-size: .95rem;
}

.fv-inmeettool .fv-btns {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.fv-inmeettool .fv-btn {
  background: #111827;
  color: #fff;
  padding: .7rem 1.1rem;
  border: none;
  border-radius: .55rem;
  cursor: pointer;
  font-size: .95rem;
}

.fv-inmeettool .fv-btn.secondary {
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

.fv-inmeettool .fv-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .75rem;
}

.fv-inmeettool .fv-table th,
.fv-inmeettool .fv-table td {
  border: 1px solid #e5e7eb;
  padding: .55rem .6rem;
  text-align: left;
  font-size: .9rem;
}

.fv-inmeettool .fv-badge {
  display: inline-block;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #e0e7ff;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
}

.fv-inmeettool .fv-kpi {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .5rem .6rem;
}

.fv-inmeettool .fv-ok,
.fv-inmeettool .fv-warn {
  margin-top: 1rem;
  padding: .75rem .9rem;
  border-radius: .5rem;
}

.fv-inmeettool .fv-ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.fv-inmeettool .fv-warn {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

.fv-inmeettool .fv-choice {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.fv-inmeettool .fv-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: .5rem .9rem;
  font-size: .9rem;
  text-decoration: none;
  color: #111827;
}

.fv-inmeettool .fv-chip:hover {
  border-color: #111827;
}

.fv-inmeettool .fv-chip .swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
}

.fv-inmeettool .swatch.black {
  background: #000;
}

.fv-inmeettool .swatch.anthracite {
  background: #383e42;
}

.fv-inmeettool .swatch.white {
  background: #f2f2f2;
}

@media (max-width: 720px) {
  .fv-inmeettool .fv-2,
  .fv-inmeettool .fv-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .fv-inmeettool .fv-chip {
    width: 100%;
    justify-content: center;
  }
}

@media print {
  .fv-inmeettool .fv-btns,
  .fv-inmeettool .fv-choice,
  .fv-inmeettool .fv-footer {
    display: none !important;
  }

  .fv-inmeettool .fv-table th,
  .fv-inmeettool .fv-table td {
    font-size: 13px;
  }
}


/* ==========================================================================
   42. Inmeettool — ForaVida theme overrides
   ========================================================================== */

.fv-inmeettool h2 {
  color: #2c3e2d;
}

.fv-inmeettool .fv-label {
  color: #2c3e2d;
}

.fv-inmeettool .sub {
  color: #4a5d4b;
}

/* Cards */
.fv-inmeettool .fv-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

/* Input focus */
.fv-inmeettool .fv-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(90, 124, 90, .2);
  border-color: #e8f5e8;
}

/* Primair knop — groen */
.fv-inmeettool .fv-btn {
  background: linear-gradient(135deg, #5a7c5a 0%, #4a6b4a 100%);
  border: none;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(90, 124, 90, .3);
  transition: all .3s ease;
}

.fv-inmeettool .fv-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(90, 124, 90, .4);
}

/* Secundair */
.fv-inmeettool .fv-btn.secondary {
  background: #fff;
  color: #2c3e2d;
  border: 1px solid #e8f5e8;
  box-shadow: none;
}

.fv-inmeettool .fv-btn:focus-visible,
.fv-inmeettool .fv-choice a:focus-visible {
  outline: 2px solid #5a7c5a;
  outline-offset: 2px;
}

/* Statusblokken */
.fv-inmeettool .fv-ok {
  background: #f4f7f1;
  border: 1px solid #e8f5e8;
  color: #2c3e2d;
}

.fv-inmeettool .fv-warn {
  background: #fffaf0;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

/* KPI / badge */
.fv-inmeettool .fv-kpi {
  background: #f8faf8;
  border: 1px solid #e8f5e8;
}

.fv-inmeettool .fv-badge {
  background: #e8f5e8;
  color: #2c3e2d;
  border: 1px solid #d9efda;
}

/* Tabel */
.fv-inmeettool .fv-table th,
.fv-inmeettool .fv-table td {
  border-color: #f0f0f0;
}

.fv-inmeettool .fv-table th {
  color: #4a5d4b;
  font-weight: 600;
}

/* Cijfers rechts uitlijnen */
.fv-inmeettool .fv-table th:nth-child(3),
.fv-inmeettool .fv-table td:nth-child(3),
.fv-inmeettool .fv-table th:nth-child(4),
.fv-inmeettool .fv-table td:nth-child(4) {
  text-align: right;
  width: 140px;
}

.fv-inmeettool .fv-table td:empty::after {
  content: "\2014";
  color: #9ca3af;
}

/* Kleurchips hover */
.fv-inmeettool .fv-chip:hover {
  border-color: #5a7c5a;
}

/* Active versie-chips */
.fv-inmeettool .fv-chip[aria-selected="true"] {
  border-color: #5a7c5a;
  box-shadow: 0 0 0 2px rgba(90, 124, 90, .1) inset;
}

/* Kleurkeuze */
.fv-inmeettool #kleurkeuze {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}


/* ==========================================================================
   43. Size guide button — vergroten
   ========================================================================== */

.commercekit-size-guide.cgkit-size-guide-shortcode button.commercekit-sg-label {
  transform: scale(1.3);
  transform-origin: left center;
  margin-bottom: 0.6rem;
}