@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1f2933;
  background: #ffffff;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  margin: 0 0 0.5em;
  line-height: 1.2;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.kf-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.kf-btn {
  display: inline-block;
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
}
.kf-btn--accent {
  background: #0f9d78;
  color: #fff;
}
.kf-btn--accent:hover {
  background: #0c7d5f;
}
.kf-btn--light {
  background: #fff;
  color: #0c7d5f;
}
.kf-btn--light:hover {
  background: #f3f9f7;
}

.kf-trustbar {
  background: #1f2933;
  color: #fff;
  font-size: 13px;
}
.kf-trustbar__row {
  display: flex;
  justify-content: center;
  /*
   * `center` on an overflowing flex row pushes the first item off the
   * left edge and out of scroll range with it — on a phone the row read
   * as "...ering binnen NL & BE" with no way to reach the start. `safe`
   * falls back to flex-start exactly when that would happen, and leaves
   * the centring alone on the wide screens where the row fits. Declared
   * second so a browser that does not know the keyword keeps the line
   * above rather than dropping the property.
   */
  justify-content: safe center;
  gap: 32px;
  padding: 8px 24px;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  /* The row is swiped, not dragged by a bar — the bar only ate 8px of a
     32px-tall strip and looked like a rendering fault. */
  scrollbar-width: none;
}
.kf-trustbar__row::-webkit-scrollbar {
  display: none;
}

.kf-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #1f2933;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  flex-shrink: 0;
}
.kf-menu-toggle:hover {
  background: #f3f9f7;
}

.kf-header {
  border-bottom: 1px solid #e2e8e6;
}

.kf-topbar {
  border-bottom: 1px solid #e2e8e6;
}
.kf-topbar__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
}
.kf-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}
.kf-topbar__search {
  display: flex;
  justify-content: center;
  width: 100%;
}
.kf-topbar__search .widget_product_search {
  width: 100%;
  max-width: 420px;
}

.kf-search-toggle {
  display: none;
}

.kf-header__icon {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: #1f2933;
  border-radius: 8px;
}
.kf-header__icon:hover {
  background: #f3f9f7;
  color: #0f9d78;
}

.kf-header__cart {
  font-weight: 600;
  font-size: 13px;
}

.kf-header__cart-count {
  background: #0f9d78;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
}

.kf-search {
  border-top: 1px solid #e2e8e6;
  background: #f3f9f7;
  padding: 16px 0;
}
.kf-search[hidden] {
  display: none;
}
.kf-search .widget_product_search {
  max-width: 480px;
  margin: 0 auto;
}

.kf-topbar__search .widget_product_search {
  margin: 0;
  max-width: none;
}

.kf-search form.woocommerce-product-search,
.kf-topbar__search form.woocommerce-product-search {
  display: flex;
  gap: 8px;
}
.kf-search input[type=search],
.kf-topbar__search input[type=search] {
  flex: 1;
  min-width: 0;
  padding: 9px 14px;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
}
.kf-search button,
.kf-topbar__search button {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: #0f9d78;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.kf-search button:hover,
.kf-topbar__search button:hover {
  background: #0c7d5f;
}

.kf-logo {
  font-size: 22px;
  font-weight: 700;
  color: #1f2933;
  flex-shrink: 0;
}
.kf-logo img {
  max-height: 44px;
  width: auto;
  display: block;
  /*
   * The height has to follow the width, never the other way round. The
   * wordmark is 340x57, and between 341px and 900px it still sits in the
   * `1fr` column of `.kf-topbar__row`, which collapses to whatever the
   * toggle and the action icons leave over. `max-height` alone does not
   * protect a replaced element from that: grid sizes the item from its
   * max-content contribution and does not re-derive the height once the
   * track is compressed, so the mark keeps 44px of height while its width
   * is squeezed and it stretches. `object-fit` is the belt to that
   * braces -- if anything ever does force both dimensions, the mark
   * letterboxes inside the box instead of distorting.
   */
  height: auto;
  object-fit: contain;
}

.kf-menubar {
  background: #ffffff;
}

.kf-nav {
  position: relative;
  z-index: 20;
}

.kf-nav__list {
  list-style: none;
  display: flex;
  gap: 42px;
  margin: 0;
  padding: 0;
}
.kf-nav__list li {
  position: relative;
}
.kf-nav__list > li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  background: #0f9d78;
  border-radius: 50%;
}
.kf-nav__list > li > a {
  display: block;
  padding: 12px 0;
  font-weight: 500;
}
.kf-nav__list > li > a:hover {
  color: #0f9d78;
}
.kf-nav__list ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: none;
  flex-direction: column;
}
.kf-nav__list ul ul {
  top: 0;
  left: 100%;
}
.kf-nav__list ul li a {
  display: block;
  padding: 8px 16px;
  white-space: nowrap;
  font-weight: 400;
}
.kf-nav__list ul li a:hover {
  color: #0f9d78;
  background: #f3f9f7;
}
.kf-nav__list > li:hover > ul,
.kf-nav__list > li:focus-within > ul {
  display: flex;
}
.kf-nav__list li:hover > ul,
.kf-nav__list li:focus-within > ul {
  display: flex;
}

.kf-nav__list > li.menu-item-has-children > a,
.kf-nav__list > li.page_item_has_children > a {
  display: flex;
  align-items: center;
  gap: 4px;
}
.kf-nav__list > li.menu-item-has-children > a::after,
.kf-nav__list > li.page_item_has_children > a::after {
  content: "";
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kf-submenu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #5c6b73;
  cursor: pointer;
  padding: 4px;
  position: absolute;
  right: 0;
  top: 8px;
}
.kf-submenu-toggle svg {
  transition: transform 0.15s ease;
}

@media (max-width: 900px) {
  .kf-nav__list > li.menu-item-has-children > a::after,
  .kf-nav__list > li.page_item_has_children > a::after {
    content: none;
  }
  .kf-nav__list > li:not(:first-child)::before {
    content: none;
  }
  .kf-menu-toggle {
    display: flex;
  }
  .kf-topbar__search {
    display: none;
  }
  .kf-search-toggle {
    display: flex;
  }
  .kf-topbar__row {
    padding: 14px 20px;
  }
  /* Matches the topbar's gutter, and a shorter gap fits one more claim on
     screen before the row has to be swiped. */
  .kf-trustbar__row {
    gap: 20px;
    padding: 8px 20px;
  }
  .kf-menubar {
    display: none;
  }
  .kf-menubar.kf-menubar--open {
    display: block;
  }
  .kf-menubar .kf-container {
    padding: 0 20px;
  }
  .kf-nav__list {
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
  }
  .kf-nav__list > li {
    border-bottom: 1px solid #e2e8e6;
  }
  .kf-nav__list > li > a {
    padding: 12px 0;
  }
  .kf-submenu-toggle {
    display: flex;
  }
  .kf-nav__list ul {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    background: #f3f9f7;
    border-radius: 0;
    padding: 4px 0 4px 16px;
    min-width: 0;
  }
  .kf-nav__list ul ul {
    padding-left: 16px;
  }
  .kf-nav__list li.kf-submenu-open > ul {
    display: flex;
  }
  .kf-nav__list li.kf-submenu-open > .kf-submenu-toggle svg {
    transform: rotate(180deg);
  }
  .kf-header__cart-total {
    display: none;
  }
  .kf-search .kf-container {
    padding: 0 20px;
  }
}
/*
 * The logo sits in the only flexible column of the topbar, so every fixed pixel
 * either side comes out of the brand mark: at 360px it was rendering 87px wide
 * and 15px tall, a quarter of its size on any other screen. The toggle, the gaps
 * and the icon padding each give a little back, which puts it near 140px without
 * changing the layout.
 */
@media (max-width: 480px) {
  .kf-topbar__row {
    gap: 10px;
    padding: 12px 16px;
  }
  .kf-topbar__actions {
    gap: 2px;
  }
  .kf-menu-toggle,
  .kf-header__icon {
    padding: 6px;
  }
}
@media (max-width: 340px) {
  .kf-trustbar {
    display: none;
  }
  .kf-topbar__row {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "logo logo" "toggle actions";
    row-gap: 10px;
  }
  .kf-logo {
    grid-area: logo;
    justify-self: center;
  }
  .kf-menu-toggle {
    grid-area: toggle;
    justify-self: start;
  }
  .kf-topbar__actions {
    grid-area: actions;
    justify-self: end;
  }
}
/*
 * Add-to-cart toast.
 *
 * Recovered into Sass from a hand-edit that lived only in the compiled
 * `assets/dist/main.css`. The markup is the `#kf-toast` live region in
 * `header.php` and the behaviour is `assets/js/cart-toast.js`, which listens for
 * WooCommerce's `added_to_cart` event and toggles `--show` for three seconds.
 *
 * It is fixed to the viewport rather than to a section because an add can be
 * fired from anywhere -- a shop card, a homepage grid, the single product page.
 */
.kf-toast {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  margin-top: 16px;
  background: #0c7d5f;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  /*
   * Parked above the top edge and pulled down on `--show`. The X half of the
   * translate is the centring, so it has to be restated in the shown state
   * rather than left to `left: 50%` alone.
   */
  transform: translate(-50%, -150%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

.kf-toast--show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.kf-toast__icon {
  display: flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0c7d5f;
  border-radius: 50%;
}

.kf-toast__icon svg {
  width: 12px;
  height: 12px;
}

/*
 * On a phone the pill is pinned to both gutters instead of being centred, so a
 * long product name cannot push it wider than the screen. Centring is dropped
 * with it, which is why the transform loses its X component here.
 */
@media (max-width: 480px) {
  .kf-toast {
    left: 16px;
    right: 16px;
    transform: translateY(-150%);
    width: auto;
  }
  .kf-toast--show {
    transform: translateY(0);
  }
}
.kf-banners {
  padding: 20px 0;
}

.kf-banners__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  height: 480px;
}

.kf-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f3f9f7;
  background-size: cover;
  background-position: center;
  color: #1f2933;
  isolation: isolate;
}
.kf-banner--large {
  grid-row: 1/3;
}
.kf-banner--small {
  grid-column: 2;
}
.kf-banner--has-image {
  color: #fff;
}
.kf-banner--has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
  z-index: 0;
}

.kf-banner__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e2e8e6;
  background: #f3f9f7;
  z-index: 0;
}

.kf-banner__overlay {
  position: relative;
  z-index: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kf-banner__title {
  font-size: 22px;
  font-weight: 700;
}

.kf-banner__subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 10px;
}

.kf-banner__cta {
  align-self: flex-start;
  padding: 8px 18px;
  font-size: 13px;
}

.kf-banner--small .kf-banner__title {
  font-size: 18px;
}

@media (max-width: 768px) {
  .kf-banners__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .kf-banner {
    height: 220px;
  }
  .kf-banner--large {
    grid-row: auto;
  }
  .kf-banner--small {
    grid-column: auto;
  }
}
@media (max-width: 340px) {
  .kf-banner__title {
    font-size: 17px;
  }
  .kf-banner--small .kf-banner__title {
    font-size: 16px;
  }
  .kf-banner__subtitle {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .kf-banner__overlay {
    padding: 14px;
    gap: 2px;
  }
  .kf-banner__cta {
    padding: 6px 14px;
    font-size: 12px;
  }
}
/*
 * One pulse on a successful add to cart. Recovered into Sass from a hand-edit
 * that lived only in the compiled `assets/dist/main.css`; see `.added` on the
 * card button below, and `_toast.scss` for the notification it accompanies.
 */
@keyframes kf-added-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
.kf-featured {
  padding: 48px 0;
  /*
   * The section title carries the green rule, run 14px past the words. It is a
   * flex item, so its box already shrinks to its text and `100% + 14px` is
   * measured from the title itself rather than from the row.
   */
}
.kf-featured__title {
  position: relative;
  font-size: 28px;
  margin: 0;
  padding-bottom: 10px;
  padding-left: 22px;
  /*
   * The marker borrowed from the jviens hero kicker: a dot with a halo
   * ring, sized to the text's optical centre rather than its box, so it
   * sits level with the first line whatever the heading wraps to.
   */
}
.kf-featured__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0f9d78;
  box-shadow: 0 0 0 4px rgba(15, 157, 120, 0.2);
}
.kf-featured__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 14px);
  height: 2px;
  background: #0f9d78;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 157, 120, 0.35);
  transition: box-shadow 0.15s ease;
}
.kf-featured__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.kf-featured__head:hover .kf-featured__title::after {
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.45);
}
.kf-featured {
  /*
   * One call to action everywhere: the blog strip's filled green button. The
   * outline pill and its tint-band inversion are gone — every product section
   * now carries the same button, on white and on the tinted band alike.
   */
}
.kf-featured__all {
  position: relative;
  padding: 14px 28px;
  font-weight: 600;
  color: #fff;
  background: #0f9d78;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 157, 120, 0.25);
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  /* Deepens and darkens on hover, staying put — as in the blog strip. */
}
.kf-featured__all:hover {
  color: #fff;
  background: #0c7d5f;
  box-shadow: 0 8px 20px rgba(15, 157, 120, 0.35);
}

ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  /*
   * Card presence, shared by the three product grids (homepage, shop,
   * related). No border at all — the card is drawn entirely in shadow, and
   * all of it in the house green rather than ink. Four layers, because one
   * blur can only say "there is a shadow" while a graduated stack says how
   * far off the page the card is: a 1px spread doing the work the border
   * used to do, a 1/2 contact shadow directly under the edge, a 6/12 mid
   * tone, and an 18/32 ambient. Hover leaves every one of them alone and
   * lifts the card instead.
   */
  box-shadow: 0 0 0 1px rgba(15, 157, 120, 0.07), 0 1px 2px rgba(15, 157, 120, 0.06), 0 6px 12px rgba(15, 157, 120, 0.07), 0 18px 32px rgba(15, 157, 120, 0.1);
  transition: transform 0.18s ease;
  /*
   * Hover does two things and no more: the card rises, and its name turns
   * the house green. The shadow is a constant — it belongs to the card,
   * not to the pointer.
   */
}
ul.products li.product:hover, ul.products li.product:focus-within {
  transform: translateY(-4px);
}
ul.products li.product:hover .woocommerce-loop-product__title, ul.products li.product:focus-within .woocommerce-loop-product__title {
  color: #0c7d5f;
}
ul.products li.product .onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  min-height: 0;
  min-width: 0;
  height: auto;
  width: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e0533d;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
  z-index: 2;
}
ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
}
ul.products li.product .kf-product-image {
  display: block;
  /*
   * The image sits on the card's own white now — the tint behind it
   * read as a second card inside the first once the outer border went.
   * A hairline under it does the separating instead, in the same green
   * as everything else on this card.
   */
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(15, 157, 120, 0.14);
}
ul.products li.product .kf-product-image img {
  aspect-ratio: 1/1;
  object-fit: contain;
  mix-blend-mode: multiply;
  display: block;
  width: 100%;
  /*
   * WooCommerce prints height="300" on the thumbnail, and that
   * presentational attribute is a real used height — it beats the
   * aspect-ratio, which only applies when one axis is auto. So the
   * box stayed 300px tall in every column: 232x300 on the desktop
   * grid and 121x300 on a phone, a letterbox with the render
   * shrunk inside it by object-fit. `height: auto` hands the axis
   * back to the ratio and the box is square at every width.
   */
  height: auto;
  transition: transform 0.3s ease;
}
ul.products li.product {
  /*
   * The product render grows a little inside its box on hover. The box
   * already clips, and object-fit: contain leaves margin around the render,
   * so nothing of the product is lost.
   */
}
ul.products li.product:hover .kf-product-image img {
  transform: scale(1.04);
}
ul.products li.product {
  /* Name and price read from the left, indented a fifth of the card. */
}
ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  transition: color 0.18s ease;
}
ul.products li.product .star-rating {
  font-size: 13px;
}
ul.products li.product .price {
  font-weight: 700;
  color: #0c7d5f;
  font-size: 15px;
  text-align: center;
}
ul.products li.product .price del {
  color: #5c6b73;
  font-weight: 400;
  margin-right: 6px;
  opacity: 1;
}
ul.products li.product .price ins {
  text-decoration: none;
}
ul.products li.product .button {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 11px 16px;
  border-radius: 999px;
  background: #0f9d78;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 14px;
  /*
   * Set rather than inherited. The body's 1.5 made this pill 43px where
   * the shop page's identical button is 38.8px — the two grids sit on
   * the same site and the cards have to be the same object.
   */
  line-height: 1.2;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(15, 157, 120, 0.25);
}
ul.products li.product .button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
}
ul.products li.product .button {
  /*
   * The colour is restated even though this selector already outscores
   * Woo's `.woocommerce a.button:hover { color: #515151 }` — the three
   * grids are one object and all three should say the same thing.
   */
}
ul.products li.product .button:hover, ul.products li.product .button:focus, ul.products li.product .button:active {
  color: #fff;
  background: #0c7d5f;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.35);
}
ul.products li.product .button.loading {
  opacity: 0.6;
}
ul.products li.product .button {
  /*
   * WooCommerce's AJAX script adds `.added` once the item is in the
   * cart. The button darkens to the accent's dark shade and pulses
   * once, which gives the click a local acknowledgement to sit
   * alongside the toast that fires at the top of the viewport.
   */
}
ul.products li.product .button.added {
  background: #0c7d5f;
  animation: kf-added-pulse 0.4s ease;
}
ul.products li.product .button.added::after {
  content: " ✓";
  font-weight: 700;
}
ul.products li.product {
  /*
   * The "Bekijk winkelwagen" link WooCommerce's AJAX script appends after a
   * successful add. Removed on request; the button's own ✓ and loading
   * states stay. display: none also drops it from the tab order and the
   * accessibility tree, so nothing invisible is left focusable.
   */
}
ul.products li.product a.added_to_cart {
  display: none;
}

/*
 * The grid steps down one column at a time.
 *
 * It used to go 4 -> 2 at 900 and 2 -> 1 at 480, which cost on both sides: a
 * tablet got two ~420px cards where three read better, and a phone got 32
 * full-width cards, which is what made the homepage 26,000px tall at 360px.
 * Two columns are kept all the way down; the card goes compact at 480 to pay
 * for them, and only the sub-360 phones fall back to one.
 */
@media (max-width: 1000px) {
  ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 700px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/*
 * Compact card. At 360px a column is ~150px wide, so every fixed cost in the
 * card — its padding, the gap, the button's own padding — comes straight out
 * of the image and the "In winkelwagen" label. Each number below was cut to
 * the point where the label still sits on one line at 360px.
 */
@media (max-width: 480px) {
  ul.products {
    gap: 12px;
  }
  ul.products li.product {
    padding: 10px;
  }
  ul.products li.product .onsale {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 10px;
  }
  ul.products li.product .kf-product-image {
    margin-bottom: 2px;
  }
  ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
  }
  ul.products li.product .price {
    font-size: 14px;
  }
  ul.products li.product .price del {
    margin-right: 4px;
  }
  ul.products li.product {
    /*
     * "In winkelwagen" is 14 characters and the column is ~130px wide
     * inside the card. At 13px with the default padding the label wrapped
     * to two lines and the pill grew to 51px; 12px against 6px side
     * padding leaves it about 13px of slack on a 360px screen.
     */
  }
  ul.products li.product .button {
    margin-top: 6px;
    gap: 5px;
    padding: 10px 6px;
    font-size: 12px;
  }
  ul.products li.product .button::before {
    width: 14px;
    height: 14px;
  }
}
/*
 * Below 360 the two columns stop paying: the button label wraps and the
 * render is smaller than the badge sitting on it. One column from here.
 */
@media (max-width: 359px) {
  ul.products {
    grid-template-columns: 1fr !important;
  }
}
/*
 * On the narrowest phones the title and its "Alles bekijken" link no longer fit
 * on one baseline, so the head wraps and the link takes its own full-width row.
 */
/*
 * The pill is 28px of padding either side of "Alles bekijken"; against a section
 * title on a 360px screen the row no longer fits and the button was bleeding
 * past the container's padding edge. Below this the head wraps and the button
 * takes a row of its own.
 */
@media (max-width: 560px) {
  .kf-featured__head {
    flex-wrap: wrap;
  }
  .kf-featured__all {
    width: 100%;
    text-align: center;
  }
}
/*
 * Tint variant — a band on the footer's background.
 *
 * A full-bleed band, so the vertical margins are what separate it from the
 * white sections above and below.
 *
 * The ground is light, so the title, its rule and the cards all keep their
 * normal colours; only the call to action changes, taking the "why" panel's
 * button treatment.
 */
.kf-featured--tint {
  margin: 40px 0;
  background: #f3f9f7;
  /*
   * The band keeps the outline pill the rest of the homepage gave up: a white
   * fill with an accent-dark label and the arrow, going to the tint on hover.
   * A solid green button on a green ground has too little to sit against, so
   * only here is the base button restated — arrow and all, since the base rule
   * no longer draws one.
   */
}
.kf-featured--tint .kf-featured__all {
  padding: 14px 28px 14px 48px;
  color: #0c7d5f;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.kf-featured--tint .kf-featured__all::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: translateY(-50%);
}
.kf-featured--tint .kf-featured__all:hover {
  color: #0c7d5f;
  background: #f3f9f7;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.kf-why {
  background: #0f9d78;
  color: #fff;
  padding: 56px 0;
  /*
   * Title and copy on the left, the call to action on the right — the same
   * arrangement the "Kamagra" section uses for "Alles bekijken".
   */
}
.kf-why__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.kf-why__intro {
  max-width: 640px;
  margin: 0;
  text-align: left;
  /*
   * inline-block so the box shrinks to the words and the rule below can be
   * measured from the title rather than from the 640px column.
   */
}
.kf-why__intro h2 {
  position: relative;
  display: inline-block;
  font-size: 28px;
  margin: 0;
  /* The 10px used to make room for the rule that is no longer drawn. */
  padding-bottom: 0;
  padding-left: 22px;
  /* The section marker, in white for the green ground. */
}
.kf-why__intro h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}
.kf-why__intro h2 {
  /*
   * No divider here — on the solid green band the heading and its
   * marker carry the section on their own.
   */
}
.kf-why__intro p {
  font-size: 16px;
  opacity: 0.9;
  margin: 20px 0 0;
}
.kf-why__cta {
  flex-shrink: 0;
  /* A pill, and it lifts — the flat 8px box read as unfinished here. */
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  /* Deepens on hover but stays put — no lift. */
}
.kf-why__cta:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.kf-why {
  /* Full container width, so the three cards line up under the heading and
     each point's line of copy has room to stay on one line. */
}
.kf-why__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
}
.kf-why__point {
  display: block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
  /* Cards are links now; they brighten rather than move. */
}
.kf-why__point:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
}
.kf-why__point:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.kf-why__point h3 {
  font-size: 17px;
  margin: 0 0 6px;
}
.kf-why__point p {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}
.kf-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  /* The call to action drops under the copy rather than squeezing beside it. */
  .kf-why__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  /*
   * Stacked, a centred card is three short lines wrapped in 200px of
   * padding — three of them ran the section to 600px on a phone for nine
   * lines of copy. The card turns on its side instead: the icon holds the
   * left column and the heading and its line of copy read down the right,
   * which is both shorter and easier to scan than centred text.
   */
  .kf-why__points {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .kf-why__point {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
    padding: 16px;
    text-align: left;
  }
  .kf-why__icon {
    /* Spans both text rows so it stays centred against the pair. */
    grid-row: 1/span 2;
    width: 44px;
    height: 44px;
    margin-bottom: 0;
  }
  .kf-why__icon svg {
    width: 22px;
    height: 22px;
  }
  /*
   * A point with no copy leaves the second row empty and the heading rides
   * the top of the card; centring it in the column puts it back on the
   * icon's axis.
   */
  .kf-why__point h3 {
    align-self: center;
    margin: 0;
  }
  .kf-why__point p {
    align-self: center;
  }
}
/*
 * Latest articles.
 *
 * The "why" band's arrangement — title and rule left, call to action right,
 * three cards below — on the footer's tint. The cards are white here rather
 * than the translucent white the green ground needed.
 */
.kf-blog {
  background: #f3f9f7;
  border-top: 1px solid #e2e8e6;
  padding: 56px 0;
}
.kf-blog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.kf-blog {
  /*
   * inline-block so the box shrinks to the words and the rule below can be
   * measured from the title rather than from the row.
   */
}
.kf-blog__title {
  position: relative;
  display: inline-block;
  font-size: 28px;
  margin: 0;
  padding-bottom: 10px;
  padding-left: 22px;
  color: #1f2933;
  /*
   * The marker borrowed from the jviens hero kicker: a dot with a halo
   * ring, sized to the text's optical centre rather than its box, so it
   * sits level with the first line whatever the heading wraps to.
   */
}
.kf-blog__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0f9d78;
  box-shadow: 0 0 0 4px rgba(15, 157, 120, 0.2);
}
.kf-blog__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 14px);
  height: 2px;
  background: #0f9d78;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 157, 120, 0.35);
  transition: box-shadow 0.15s ease;
}
.kf-blog__head:hover .kf-blog__title::after {
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.45);
}
.kf-blog__cta {
  flex-shrink: 0;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 157, 120, 0.25);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  /* Deepens on hover but stays put, like the band above it. */
}
.kf-blog__cta:hover {
  box-shadow: 0 8px 20px rgba(15, 157, 120, 0.35);
}
.kf-blog__posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.kf-blog__card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
  overflow: hidden;
  color: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.kf-blog__card:hover {
  border-color: #0f9d78;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.kf-blog__card:focus-visible {
  outline: 2px solid #0f9d78;
  outline-offset: 3px;
}
.kf-blog {
  /*
   * No forced ratio: the image sets the height itself.
   *
   * A fixed `aspect-ratio` plus `object-fit: contain` letterboxed the picture
   * whenever its own ratio differed from the box's by even a fraction — the
   * rendered source is 366x205 (1.7854) against a 16/9 box (1.7778) — and that
   * sliver of tint rounded up to a visible 1px line beside the image. Sizing to
   * width means the picture always meets all four edges exactly, and is never
   * cropped either.
   */
}
.kf-blog__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f9f7;
  overflow: hidden;
}
.kf-blog__image {
  display: block;
  width: 100%;
  height: auto;
}
.kf-blog {
  /* Without a ratio on the media box, a card with no image needs its own height. */
}
.kf-blog__placeholder {
  display: inline-flex;
  padding: 56px 0;
  color: #0f9d78;
  opacity: 0.5;
}
.kf-blog__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  padding: 20px;
}
.kf-blog__date {
  font-size: 13px;
  color: #5c6b73;
}
.kf-blog__heading {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: #1f2933;
}
.kf-blog__card:hover .kf-blog__heading {
  color: #0c7d5f;
}
.kf-blog__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: #5c6b73;
}

@media (max-width: 900px) {
  .kf-blog__posts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  /* The call to action drops under the title rather than squeezing beside it. */
  .kf-blog__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .kf-blog__posts {
    grid-template-columns: 1fr;
  }
}
/*
 * Information rows.
 *
 * Two alternating image/copy rows. The first sits on the footer's tint, the
 * second on white; the first puts its image on the left, the second on the
 * right. Copy leads in the markup for both — the media is moved with `order`,
 * so a screen reader always meets the heading before the picture.
 */
.kf-info__row {
  padding: 56px 0;
  /* The tint is a contained panel, not a full-bleed band — the reference
     boxes it to the content width rather than running it edge to edge. */
}
.kf-info__row--tinted {
  padding: 28px 0;
}
.kf-info__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.kf-info {
  /*
   * Only the block padding is set: .kf-container's own `0 24px` stays, so the
   * copy inside the panel lines up with every other section's left edge.
   */
}
.kf-info__row--tinted .kf-info__inner {
  background: #f3f9f7;
  border-radius: 12px;
  padding-block: clamp(28px, 3.5vw, 44px);
}
.kf-info__row--media-first .kf-info__media {
  order: -1;
}
.kf-info__media {
  min-width: 0;
}
.kf-info__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.kf-info {
  /*
   * The picture is a link but has no hover treatment at all — it stays exactly
   * as it sits. The focus ring is kept: that is keyboard navigation, not a
   * hover effect, and without it the link would be invisible to tab users.
   */
}
.kf-info__image-link {
  display: block;
  border-radius: 12px;
}
.kf-info__image-link:focus-visible {
  outline: 2px solid #0f9d78;
  outline-offset: 3px;
}
.kf-info__body {
  min-width: 0;
}
.kf-info {
  /*
   * inline-block so the box shrinks to the words and the rule below can be
   * measured from the title rather than from the column.
   *
   * padding-bottom matches the copy's margin-top below, so the rule sits the
   * same distance from the heading as it does from the paragraph under it.
   */
}
.kf-info__title {
  position: relative;
  display: inline-block;
  font-size: 28px;
  margin: 0;
  padding-bottom: 20px;
  padding-left: 22px;
  color: #1f2933;
  /*
   * The marker borrowed from the jviens hero kicker: a dot with a halo
   * ring, sized to the text's optical centre rather than its box, so it
   * sits level with the first line whatever the heading wraps to.
   */
}
.kf-info__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0f9d78;
  box-shadow: 0 0 0 4px rgba(15, 157, 120, 0.2);
}
.kf-info__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  /* Half length — these two headings are long, and a full-width rule
     under them read as a border rather than an accent. */
  width: calc((100% + 14px) / 2);
  height: 2px;
  background: #0f9d78;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 157, 120, 0.35);
  transition: box-shadow 0.15s ease;
}
.kf-info__body:hover .kf-info__title::after {
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.45);
}
.kf-info__text {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.7;
  text-align: justify;
  color: #5c6b73;
}
.kf-info__text p {
  margin: 0 0 14px;
  /* Justified at every width, on the user's call — the container
     rule above sets it, this repeats it on the paragraph so a
     pasted-in block that carries its own alignment still lines up. */
  text-align: justify;
}
.kf-info__text p:last-child,
.kf-info__text ul:last-child {
  margin-bottom: 0;
}
.kf-info__text {
  /*
   * The bold words are the terms this copy is about — "erectiemiddelen",
   * "dosering", "sildenafil" — so they take the same green the links take
   * rather than sitting in body black.
   */
}
.kf-info__text strong {
  color: #0c7d5f;
}
.kf-info__text a {
  color: #0c7d5f;
  text-decoration: underline;
}
.kf-info__text ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.kf-info__text li {
  position: relative;
  padding-left: 20px;
}
.kf-info__text {
  /* A round bullet, the same mark the delivery countries carry. */
}
.kf-info__text li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0f9d78;
}

@media (max-width: 860px) {
  .kf-info__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Stacked, the picture always follows its heading. */
  .kf-info__row--media-first .kf-info__media {
    order: 0;
  }
  .kf-info__row {
    padding: 40px 0;
  }
}
/*
 * Frequently asked questions.
 *
 * Native <details>/<summary> styled to this theme rather than the reference's
 * Elementor accordion: white cards on the page, a green rule under the section
 * title, and a plus that becomes a minus when the entry opens. No JavaScript.
 */
.kf-faq {
  padding: 56px 0;
}
.kf-faq__head {
  margin-bottom: 28px;
  /* This heading is centred over the column, unlike the other sections. */
  text-align: center;
}
.kf-faq {
  /*
   * inline-block so the box shrinks to the words and the rule below can be
   * measured from the title rather than from the row.
   */
  /*
   * Centred, with the section marker and no rule: the dot sits inside the
   * heading's own padding, so the dot-plus-words block is what centres.
   */
}
.kf-faq__title {
  position: relative;
  display: inline-block;
  font-size: 28px;
  margin: 0;
  padding-left: 22px;
  color: #1f2933;
}
.kf-faq__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0f9d78;
  box-shadow: 0 0 0 4px rgba(15, 157, 120, 0.2);
}
.kf-faq {
  /*
   * A single column, every entry under the last — the user's call. It was two
   * columns filled top-to-bottom; the row template and the column auto-flow
   * that made that work are gone with it, and `--kf-faq-rows` is no longer
   * read.
   *
   * align-items: start keeps a closed entry from stretching to an opened
   * neighbour's height.
   */
}
.kf-faq__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  /*
   * Half the container's 1152px, centred under the centred heading — a
   * question reads better on a short measure than stretched across the
   * page. A max-width rather than a width, so a phone still gets the full
   * column.
   */
  max-width: 576px;
  margin-inline: auto;
}
.kf-faq__item {
  background: #ffffff;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kf-faq__item:hover {
  border-color: #0f9d78;
}
.kf-faq__item[open] {
  border-color: #0f9d78;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.kf-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2933;
  cursor: pointer;
  /* The default disclosure triangle, in both engines. */
  list-style: none;
}
.kf-faq__question::-webkit-details-marker {
  display: none;
}
.kf-faq__question:hover {
  color: #0c7d5f;
}
.kf-faq__question:focus-visible {
  outline: 2px solid #0f9d78;
  outline-offset: -2px;
  border-radius: 8px;
}
.kf-faq {
  /* A plus drawn from two bars; the vertical one goes when the entry opens. */
}
.kf-faq__marker {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: #f3f9f7;
  border-radius: 50%;
  transition: background 0.15s ease;
}
.kf-faq__marker::before, .kf-faq__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #0c7d5f;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.kf-faq__marker::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.kf-faq__item[open] .kf-faq__marker {
  background: #0f9d78;
}
.kf-faq__item[open] .kf-faq__marker::before, .kf-faq__item[open] .kf-faq__marker::after {
  background: #fff;
}
.kf-faq__item[open] .kf-faq__marker {
  /* Rotated rather than hidden, so the two bars meet as a single minus. */
}
.kf-faq__item[open] .kf-faq__marker::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}
.kf-faq__answer {
  max-width: 92ch;
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.75;
  text-align: justify;
  color: #5c6b73;
}
.kf-faq__answer p {
  margin: 0 0 12px;
}
.kf-faq__answer p:last-child {
  margin-bottom: 0;
}
.kf-faq__answer a {
  color: #0c7d5f;
  text-decoration: underline;
}
.kf-faq__answer {
  /* Bold terms take the house green, as in the information rows. */
}
.kf-faq__answer strong {
  color: #0c7d5f;
}

@media (max-width: 560px) {
  .kf-faq__question {
    padding: 16px 18px;
    font-size: 16px;
  }
  .kf-faq__answer {
    padding: 0 18px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kf-faq *,
  .kf-faq *::before,
  .kf-faq *::after {
    transition-duration: 0.01ms !important;
  }
}
/*
 * Justification needs a measure wide enough to absorb the slack. Under ~600px
 * a Dutch line holds barely six or seven words, and the space between them
 * opens into rivers — see the information rows at 360px. Ragged right from
 * here down.
 */
@media (max-width: 600px) {
  .kf-faq__answer {
    text-align: left;
  }
}
/*
 * European supplier.
 *
 * Map left, copy and delivery countries right, on the footer's tint.
 */
.kf-europe {
  padding: 56px 0;
  background: #f3f9f7;
  border-top: 1px solid #e2e8e6;
}
.kf-europe__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.kf-europe__map {
  min-width: 0;
}
.kf-europe__map-image {
  display: block;
  width: 100%;
  height: auto;
}
.kf-europe__body {
  min-width: 0;
}
.kf-europe__badge {
  display: block;
  width: 84px;
  height: auto;
  margin-bottom: 16px;
}
.kf-europe {
  /*
   * inline-block so the box shrinks to the words and the rule below can be
   * measured from the title rather than from the column.
   *
   * 26px, not the 28px the other section titles use: at 28 the heading needs
   * 560px of a 577px column and sits one word away from wrapping.
   */
}
.kf-europe__title {
  position: relative;
  display: inline-block;
  font-size: 26px;
  margin: 0;
  padding-bottom: 20px;
  padding-left: 22px;
  color: #1f2933;
  /*
   * The marker borrowed from the jviens hero kicker: a dot with a halo
   * ring, sized to the text's optical centre rather than its box, so it
   * sits level with the first line whatever the heading wraps to.
   */
}
.kf-europe__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0f9d78;
  box-shadow: 0 0 0 4px rgba(15, 157, 120, 0.2);
}
.kf-europe__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 14px);
  height: 2px;
  background: #0f9d78;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 157, 120, 0.35);
  transition: box-shadow 0.15s ease;
}
.kf-europe__body:hover .kf-europe__title::after {
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.45);
}
.kf-europe {
  /* 15px: at 16 the line needs 600px against a 577px column and wrapped. */
}
.kf-europe__text {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: #5c6b73;
}
.kf-europe__text p {
  margin: 0;
}
.kf-europe__text {
  /* The bold terms take the house green, as on the information rows. */
}
.kf-europe__text strong {
  color: #0c7d5f;
}
.kf-europe {
  /*
   * Names read across the rows, justified: each line is spread to both edges of
   * the column. Inline-block items in a justified block rather than a flex row —
   * flex can only distribute with `space-between`, which would stretch the last,
   * short line the same as the full ones. `text-align-last: left` leaves that
   * line alone, exactly as justified text does.
   */
}
.kf-europe__countries {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  text-align: justify;
  text-align-last: left;
  font-size: 15px;
  color: #5c6b73;
}
.kf-europe__countries li {
  position: relative;
  display: inline-block;
  padding-left: 18px;
  /* A floor under the space justification stretches. */
  margin: 0 8px 8px 0;
}
.kf-europe__countries {
  /*
   * A round bullet rather than a tick — these are the countries served,
   * not a checklist of things done. Drawn rather than listed so it keeps
   * the accent colour and sits on the first line's optical centre; the
   * hanging indent means a wrapped name still starts at the text edge.
   */
}
.kf-europe__countries li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  background: #0f9d78;
  border-radius: 50%;
}

@media (max-width: 860px) {
  .kf-europe__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .kf-europe__map {
    max-width: 420px;
  }
}
@media (max-width: 560px) {
  .kf-europe__countries {
    columns: 2;
  }
}
.kf-footer {
  border-top: 1px solid #e2e8e6;
  background: #f3f9f7;
  margin-top: auto;
}

.kf-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 48px 24px 32px;
}

.kf-footer__col h3 {
  font-size: 15px;
  margin: 0 0 14px;
}
.kf-footer__col--brand p {
  margin: 12px 0 0;
  font-size: 14px;
  color: #5c6b73;
  line-height: 1.6;
  max-width: 320px;
}

.kf-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.kf-footer__list a {
  color: #5c6b73;
}
.kf-footer__list a:hover {
  color: #0f9d78;
}

.kf-footer__bottom {
  border-top: 1px solid #e2e8e6;
}

.kf-footer__bottom-row {
  padding: 16px 24px;
}

.kf-footer__copy {
  margin: 0;
  font-size: 13px;
  color: #5c6b73;
}

@media (max-width: 900px) {
  .kf-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kf-footer__col--brand,
  .kf-footer__col--contact {
    grid-column: 1/-1;
  }
}