@charset "UTF-8";
/*
 * Single product page.
 *
 * Loaded only on the product template, via inc/enqueue.php. Every selector is
 * kf-product- prefixed.
 *
 * The related-products card is the same design as the shop and homepage cards,
 * written out again under this page's own classes: per the project rule each
 * template owns its component CSS and the duplication is deliberate.
 */
.kf-product {
  padding: 24px 0 64px;
}

/* -------------------------------------------------------------------------
 * Breadcrumb
 * ---------------------------------------------------------------------- */
.kf-product__breadcrumb {
  margin-bottom: 24px;
  font-size: 13px;
  color: #5c6b73;
}
.kf-product__breadcrumb a {
  color: #5c6b73;
}
.kf-product__breadcrumb a:hover {
  color: #0c7d5f;
  text-decoration: underline;
}

.kf-product__crumb-sep {
  margin: 0 7px;
  opacity: 0.55;
}

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */
.kf-product__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

/* -------------------------------------------------------------------------
 * Gallery (WooCommerce's own markup)
 * ---------------------------------------------------------------------- */
/*
 * WooCommerce floats the gallery and summary side by side itself, with
 * `.woocommerce div.product div.images { float: left; width: 48% }` — that is
 * specificity (0,3,2), and inside this page's own grid it shrank the picture to
 * 48% of its column. Beaten on specificity with the extra classes the element
 * already carries, rather than with !important.
 */
.kf-product.product .kf-product__gallery div.woocommerce-product-gallery.images {
  float: none;
  width: 100%;
}

/*
 * Woo also sizes every image after the first with
 * `.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)
 *  { width: 25%; display: inline-block }` — (0,5,2) — which left the second
 * picture 67px wide inside its grid track. The track decides here.
 */
.kf-product.product .kf-product__gallery div.images .woocommerce-product-gallery__image:nth-child(n+2) {
  display: block;
  float: none;
  width: 100%;
}

/*
 * (0,5,2), against Woo's (0,4,3) `div.images .flex-control-thumbs li { width:
 * 25%; float: left }` — inside the grid above, that rule sized each thumbnail
 * to a quarter of its own track and the strip rendered at 23px.
 */
.kf-product.product .kf-product__gallery div.images .flex-control-thumbs li {
  float: none;
  width: auto;
  margin: 0;
}

.kf-product__gallery {
  min-width: 0;
}
.kf-product__gallery .woocommerce-product-gallery {
  position: relative;
}
.kf-product__gallery {
  /*
   * The first image spans the row, the rest sit two-up beneath it.
   * WooCommerce stacks them; the layout is this grid's job.
   */
}
.kf-product__gallery .woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0;
}
.kf-product__gallery .woocommerce-product-gallery__image:first-child {
  grid-column: 1/-1;
}
.kf-product__gallery {
  /*
   * The product renders are shot on white; the tint ground plus multiply is
   * the same treatment the cards use, so the photo sits on the page rather
   * than floating on a white rectangle.
   */
}
.kf-product__gallery .woocommerce-product-gallery__image {
  background: #f3f9f7;
  border: 1px solid #e2e8e6;
  border-radius: 12px;
  overflow: hidden;
}
.kf-product__gallery .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.kf-product__gallery {
  /*
   * The thumbnail strip is built by flexslider at runtime, as
   * `ol.flex-control-thumbs` outside the gallery wrapper — the wrapper grid
   * above never reaches it, and the strip arrived unstyled: bare renders on
   * white, floated by Woo at 25% each. Product photography here is shot on
   * white, so on a phone the second thumb was a pale object floating in the
   * page with no edge to say where it stopped.
   *
   * The same ground, border and radius the hero carries, at thumbnail scale.
   * Woo's own rules are (0,4,3), so these are scoped through the classes the
   * elements already carry rather than with !important.
   */
}
.kf-product__gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.kf-product__gallery .flex-control-thumbs li {
  float: none;
  width: auto;
  margin: 0;
}
.kf-product__gallery .flex-control-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  background: #f3f9f7;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
  /* Woo dims the inactive thumbs to .5; the border carries the state
     instead, which survives the multiply blend. */
  opacity: 1;
  mix-blend-mode: multiply;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.kf-product__gallery .flex-control-thumbs img.flex-active,
.kf-product__gallery .flex-control-thumbs img:hover {
  border-color: #0f9d78;
}
.kf-product__gallery {
  /* Woo's zoom trigger, floated on the image. */
}
.kf-product__gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 15px;
  color: #1f2933;
  background: #fff;
  border: 1px solid #e2e8e6;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* -------------------------------------------------------------------------
 * Purchase column
 * ---------------------------------------------------------------------- */
.kf-product__summary {
  min-width: 0;
}

.kf-product__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.kf-product__eyebrow:not(:empty) {
  margin-bottom: 12px;
}

.kf-product__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: #e0533d;
  border-radius: 999px;
}

.kf-product__brand {
  margin: 0;
  font-size: 13px;
  color: #5c6b73;
}
.kf-product__brand a {
  color: #0c7d5f;
  font-weight: 600;
  text-decoration: underline;
}

.kf-product__title {
  margin: 0 0 14px;
  font-size: clamp(24px, 2vw + 12px, 32px);
  line-height: 1.2;
  color: #1f2933;
}

.kf-product.product .kf-product__price p.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #0c7d5f;
}
.kf-product.product .kf-product__price p.price del {
  font-size: 18px;
  font-weight: 400;
  color: #5c6b73;
  opacity: 1;
}
.kf-product.product .kf-product__price p.price ins {
  background: none;
  text-decoration: none;
  color: inherit;
}

.kf-product__excerpt {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #5c6b73;
  /* The short description is a description too — same green on its bold terms. */
}
.kf-product__excerpt p strong,
.kf-product__excerpt li strong {
  color: #0c7d5f;
}
.kf-product__excerpt p {
  margin: 0 0 10px;
}
.kf-product__excerpt p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Add to cart
 * ---------------------------------------------------------------------- */
.kf-product__cart {
  margin-top: 24px;
}
.kf-product__cart form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 0;
}
.kf-product__cart .quantity {
  flex: 0 0 auto;
}
.kf-product__cart .quantity input.qty {
  width: 76px;
  height: 50px;
  padding: 0 8px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: #1f2933;
  background: #fff;
  border: 1px solid #e2e8e6;
  border-radius: 999px;
}
.kf-product__cart {
  /*
   * Scoped through .kf-product and .alt deliberately: WooCommerce's own
   * `.woocommerce button.button.alt` is specificity (0,3,1) and would
   * otherwise repaint this button.
   */
}
.kf-product__cart button.single_add_to_cart_button,
.kf-product__cart button.single_add_to_cart_button.alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 220px;
  min-height: 50px;
  padding: 0 28px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: #0f9d78;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 157, 120, 0.25);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.kf-product__cart button.single_add_to_cart_button::before,
.kf-product__cart button.single_add_to_cart_button.alt::before {
  content: "";
  width: 18px;
  height: 18px;
  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;
}
.kf-product__cart button.single_add_to_cart_button:hover,
.kf-product__cart button.single_add_to_cart_button.alt:hover {
  background: #0c7d5f;
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.35);
}
.kf-product__cart .stock {
  flex: 1 0 100%;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0c7d5f;
}
.kf-product__cart .stock.out-of-stock {
  color: #e0533d;
}
.kf-product__cart table.variations {
  flex: 1 0 100%;
  margin: 0;
}
.kf-product__cart table.variations th,
.kf-product__cart table.variations td {
  padding: 0 0 10px;
  text-align: left;
  font-size: 14px;
}
.kf-product__cart table.variations select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
  background: #fff;
}

/* -------------------------------------------------------------------------
 * Assurances and meta
 * ---------------------------------------------------------------------- */
.kf-product__assurances {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #e2e8e6;
  list-style: none;
}
.kf-product__assurances li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #5c6b73;
}

/* A green tick, drawn from a rotated border rather than an icon file. */
.kf-product__tick {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.kf-product__tick::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #0f9d78;
  border-bottom: 2px solid #0f9d78;
  transform: rotate(45deg);
}

/*
 * QUANTITY DISCOUNT TABLE
 *
 * Sits in the purchase column under the add-to-cart form. Built on the same
 * tinted 12px panel as the tab panel and the post body, so it reads as part of
 * the page's furniture rather than as a plugin's own widget.
 *
 * A real <table>: this is tabular data, three headed columns of it, and the
 * markup should say so for anything reading the page aloud.
 */
.kf-tiers {
  margin-top: 24px;
  padding: 24px;
  background: #f3f9f7;
  border-radius: 12px;
}

/*
 * The section rule, matching the tab panels' titles. inline-block shrinks the
 * box to the words so `100% + 14px` measures from the text, not the panel.
 */
.kf-tiers__title {
  position: relative;
  display: inline-block;
  margin: 0 0 20px;
  padding-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #1f2933;
}
.kf-tiers__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-tiers:hover .kf-tiers__title::after {
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.45);
}

.kf-tiers__intro {
  margin: -8px 0 16px;
  font-size: 14px;
  color: #5c6b73;
}

/*
 * Interactive tier options, ported from kamagra-kopen's discount-radio-*
 * design (the reference this replaced a plain table with) onto this site's
 * own palette. Structure: radio input, a content group (qty range + save
 * badge) that wraps together on mobile, and a prices group that drops to its
 * own full-width right-aligned row below 480px.
 */
.kf-tiers__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kf-tiers__option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kf-tiers__option:hover {
  border-color: #0c7d5f;
}
.kf-tiers__option--selected {
  background: #f3f9f7;
  border-color: #0f9d78;
}
.kf-tiers__option input[type=radio] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #0f9d78;
}

.kf-tiers__option-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.kf-tiers__option-qty {
  font-size: 15px;
  font-weight: 600;
  color: #1f2933;
  min-width: 90px;
}

.kf-tiers__option-save {
  display: inline-block;
  margin-left: auto;
  padding: 2px 8px;
  background: #0f9d78;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 999px;
}

.kf-tiers__option--selected .kf-tiers__option-save {
  background: #0c7d5f;
}

.kf-tiers__option-prices {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.kf-tiers__option-original {
  font-size: 14px;
  color: #5c6b73;
  text-decoration: line-through;
}

.kf-tiers__option-final {
  font-size: 16px;
  font-weight: 700;
  color: #0c7d5f;
}

.kf-tiers__option--selected .kf-tiers__option-final {
  color: #0f9d78;
  font-size: 18px;
}

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

/*
 * The panel is inside the purchase column, which is already narrow. Below
 * 480px the content group wraps and the prices drop to their own full-width,
 * right-aligned row instead of squeezing onto the same line.
 */
@media (max-width: 480px) {
  .kf-tiers {
    padding: 20px 18px;
  }
  .kf-tiers__option {
    align-items: flex-start;
    padding: 10px 12px;
    flex-wrap: wrap;
  }
  .kf-tiers__option-qty {
    min-width: 0;
    font-size: 14px;
  }
  /*
   * The 32px indent lines the price row up under the label rather than under
   * the radio, but it has to come out of the basis: `flex: 0 0 100%` plus a
   * 32px margin is 100% + 32px, and since the row is right-aligned the whole
   * indent pushed the price past the option's padding edge and onto its
   * border — "€ 18,95" sat clipped against the right edge at every width
   * from 320 to 480.
   */
  .kf-tiers__option-prices {
    flex: 0 0 calc(100% - 32px);
    justify-content: flex-end;
    margin-left: 32px;
  }
}
.kf-product .product_meta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8e6;
  font-size: 13px;
  color: #5c6b73;
}
.kf-product .product_meta > span {
  display: block;
  margin-bottom: 6px;
}
.kf-product .product_meta a {
  color: #0c7d5f;
}
.kf-product .product_meta a:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Tabs
 * ---------------------------------------------------------------------- */
.kf-product.product .kf-product__details {
  margin-top: clamp(40px, 5vw, 64px);
}
.kf-product.product .kf-product__details .woocommerce-tabs ul.tabs {
  /*
   * Woo draws the hairline under the tab row with
   * `.woocommerce div.product .woocommerce-tabs ul.tabs::before`, a
   * full-width border-bottom at (0,4,2). Removed — the pills carry the
   * state on their own.
   */
}
.kf-product.product .kf-product__details .woocommerce-tabs ul.tabs::before {
  display: none;
}
.kf-product.product .kf-product__details .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.kf-product.product .kf-product__details .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.kf-product.product .kf-product__details .woocommerce-tabs ul.tabs li::before, .kf-product.product .kf-product__details .woocommerce-tabs ul.tabs li::after {
  /* Woo draws folder-tab corners with these. */
  display: none;
}
.kf-product.product .kf-product__details .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2933;
  background: #f3f9f7;
  border: 1px solid #e2e8e6;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kf-product.product .kf-product__details .woocommerce-tabs ul.tabs li a:hover {
  border-color: #0f9d78;
  color: #0c7d5f;
}
.kf-product.product .kf-product__details .woocommerce-tabs ul.tabs li.active a {
  color: #fff;
  background: #0f9d78;
  border-color: #0f9d78;
}
.kf-product.product .kf-product__details {
  /*
   * Scoped through .woocommerce-tabs deliberately: Woo's own
   * `.woocommerce div.product .woocommerce-tabs .panel` is (0,4,1) and sets
   * `padding: 0; margin: 0 0 2em`, which beat a rule without the extra class
   * and left the copy hard against the panel's top edge.
   */
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel {
  margin-top: 20px;
  padding: 50px;
  font-size: 15px;
  line-height: 1.75;
  color: #5c6b73;
  background: #f3f9f7;
  border-radius: 12px;
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel h2 {
  margin: 0 0 14px;
  font-size: 22px;
  color: #1f2933;
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel {
  /*
   * The panel's own title — "Beschrijving", "Aanvullende informatie",
   * "Beoordelingen" — carries the green rule. Scoped to the first heading
   * and to Woo's reviews title so the headings inside the editor's own
   * copy are left alone.
   *
   * inline-block shrinks the box to the words, so `100% + 14px` is
   * measured from the title rather than the panel's full width; the
   * padding-bottom and margin-bottom match, putting the rule the same
   * distance from the heading as from the copy beneath it.
   */
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child,
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-Reviews-title {
  position: relative;
  display: inline-block;
  margin: 0 0 20px;
  padding-bottom: 20px;
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child::after,
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-Reviews-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-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child:hover::after,
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-Reviews-title:hover::after {
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.45);
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel h3 {
  margin: 22px 0 8px;
  font-size: 17px;
  color: #1f2933;
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel p {
  margin: 0 0 14px;
  /*
   * Justified, matching the information rows on the homepage. Set on
   * the paragraph and the list item rather than the panel so the
   * headings and the attribute table keep their own alignment.
   */
  text-align: justify;
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel p:last-child {
  margin-bottom: 0;
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel li {
  text-align: justify;
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel {
  /*
   * Bold terms take the house green, as in the FAQ and the blog articles —
   * scoped to body copy, because the editor writes the panel's headings as
   * `<h2><strong>…</strong></h2>` and a bare `strong` rule would recolour
   * those too.
   */
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel p strong,
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel li strong {
  color: #0c7d5f;
}
.kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel a {
  color: #0c7d5f;
  text-decoration: underline;
}
.kf-product.product .kf-product__details {
  /* The attribute table sits on the tinted panel, so its rows are white. */
}
.kf-product.product .kf-product__details table.shop_attributes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.kf-product.product .kf-product__details table.shop_attributes th,
.kf-product.product .kf-product__details table.shop_attributes td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8e6;
}
.kf-product.product .kf-product__details table.shop_attributes tr:last-child th,
.kf-product.product .kf-product__details table.shop_attributes tr:last-child td {
  border-bottom: 0;
}
.kf-product.product .kf-product__details table.shop_attributes th {
  width: 200px;
  font-weight: 600;
  color: #1f2933;
  background: rgba(15, 157, 120, 0.06);
}
.kf-product.product .kf-product__details table.shop_attributes p {
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Related products — the shop card, redrawn under this page's classes
 * ---------------------------------------------------------------------- */
.kf-product-related {
  margin-top: clamp(40px, 5vw, 64px);
}
.kf-product-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.kf-product-related__title {
  position: relative;
  font-size: 28px;
  margin: 0;
  padding-bottom: 10px;
  padding-left: 22px;
  color: #1f2933;
  /*
   * Section marker: the dot-and-halo from the jviens hero kicker, in this
   * theme's green — the same mark the homepage sections carry.
   */
}
.kf-product-related__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-product-related__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-product-related__head:hover .kf-product-related__title::after {
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.45);
}
.kf-product-related {
  /* The arrow sits left of the label and the pair slides left on hover, as on
     the homepage's "Alles bekijken". */
}
.kf-product-related__all {
  position: relative;
  padding-left: 24px;
  font-weight: 600;
  color: #0c7d5f;
  white-space: nowrap;
  transition: color 0.15s ease, transform 0.15s ease;
}
.kf-product-related__all::before {
  content: "";
  position: absolute;
  left: 0;
  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-product-related__all:hover {
  color: #0f9d78;
  transform: translateX(-4px);
}
.kf-product-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kf-product-related__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #fff;
  border: 0;
  border-radius: 8px;
  /* Same card treatment as the homepage grid and the shop grid. */
  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: the card rises and its name turns the house green. The shadow is
     a constant — it belongs to the card, not to the pointer. */
}
.kf-product-related__card:hover, .kf-product-related__card:focus-within {
  transform: translateY(-4px);
}
.kf-product-related__card:hover .kf-product-related__name, .kf-product-related__card:focus-within .kf-product-related__name {
  color: #0c7d5f;
}
.kf-product-related {
  /*
   * The image sits on the card's own white; a hairline under it separates the
   * picture from the name, in the same green as the card's shadow.
   */
}
.kf-product-related__media {
  position: relative;
  display: block;
  padding-bottom: 12px;
  margin-bottom: 12px;
  background: transparent;
  border-bottom: 1px solid rgba(15, 157, 120, 0.14);
  border-radius: 8px;
  overflow: hidden;
}
.kf-product-related__image {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  mix-blend-mode: multiply;
  /*
   * WooCommerce prints height="300" on the thumbnail, and that
   * presentational attribute is a used height — it beats the
   * aspect-ratio, which only applies when one axis is auto. Without this
   * the box stays 300px tall in every column and the render is
   * letterboxed inside it by object-fit. Same fix as the homepage grid.
   */
  height: auto;
  transition: transform 0.3s ease;
}
.kf-product-related__card:hover .kf-product-related__image {
  transform: scale(1.04);
}
.kf-product-related__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: #e0533d;
  border-radius: 999px;
}
.kf-product-related__badge--stock {
  top: auto;
  bottom: 10px;
  color: #1f2933;
  background: #e2e8e6;
}
.kf-product-related__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.kf-product-related {
  /* Name and price read from the left, indented a fifth of the card. */
}
.kf-product-related__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #1f2933;
  transition: color 0.18s ease;
}
.kf-product-related__link {
  color: inherit;
  /* Whole-card hit area; the anchor stays the focusable element. */
}
.kf-product-related__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.kf-product-related__link:hover {
  color: #0c7d5f;
}
.kf-product-related__price {
  margin: auto 0 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: #0c7d5f;
}
.kf-product-related__price del {
  margin-right: 6px;
  font-weight: 400;
  color: #5c6b73;
  opacity: 1;
}
.kf-product-related__price ins {
  background: none;
  text-decoration: none;
}
.kf-product-related {
  /* Above the card-wide link overlay so the button stays clickable. */
}
.kf-product-related__cart {
  position: relative;
  z-index: 2;
  margin-top: 8px;
}

.kf-product-related__cart a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 11px 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  background: #0f9d78;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 157, 120, 0.25);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/*
 * Same tie as the shop grid: Woo's `.woocommerce a.button:hover { color:
 * #515151 }` is (0,3,1) and so is `.kf-product-related__cart a.button:hover`.
 * The `.kf-product-related` ancestor takes it to (0,4,1) so the label stays
 * white under the pointer.
 */
.kf-product-related .kf-product-related__cart a.button:hover,
.kf-product-related .kf-product-related__cart a.button:focus,
.kf-product-related .kf-product-related__cart a.button:active {
  color: #fff;
  background: #0c7d5f;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.35);
}

.kf-product-related__cart a.button::before {
  content: "";
  flex-shrink: 0;
  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'%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;
}

.kf-product-related__cart a.button.loading {
  opacity: 0.6;
}

.kf-product-related__cart a.button.added::after {
  content: " ✓";
}

/*
 * 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.
 */
.kf-product-related__cart a.added_to_cart {
  display: none;
}

/* -------------------------------------------------------------------------
 * WooCommerce notices on this template
 * ---------------------------------------------------------------------- */
.kf-product .woocommerce-message,
.kf-product .woocommerce-error,
.kf-product .woocommerce-info {
  /*
   * Woo draws its glyph with ::before, absolutely positioned at left: 1.5em.
   * The text has to clear it — at the tighter padding used here the message
   * ran straight over the tick. Icon at 18px, text from 46px.
   */
  position: relative;
  margin: 0 0 20px;
  padding: 14px 18px 14px 46px;
  font-size: 14px;
  background: #f3f9f7;
  /* Woo's per-type `border-top: 3px solid` (blue on info, olive on message)
     otherwise survives and stripes the notice. Same fix as the cart. */
  border: 0;
  border-left: 3px solid #0f9d78;
  border-radius: 8px;
  list-style: none;
}
.kf-product .woocommerce-message::before,
.kf-product .woocommerce-error::before,
.kf-product .woocommerce-info::before {
  top: 15px;
  left: 18px;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .kf-product__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /*
   * One column puts the badge, the title, the price and the short
   * description in a single stack against the container edge — and the
   * browser's own 40px list indent broke that edge, leaving the bullets
   * sitting 40px right of everything above them. The marker is drawn
   * absolutely at the container edge instead, so the block reads as one left
   * margin, and a wrapped line still hangs under its own text rather than
   * under the dot. Two columns keep Woo's default indent — there the summary
   * is its own column and the alignment is not being compared to anything.
   */
  .kf-product__excerpt ul {
    margin: 0 0 10px;
    padding-left: 0;
    list-style: none;
  }
  .kf-product__excerpt ul li {
    position: relative;
    padding-left: 18px;
  }
  .kf-product__excerpt ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
  }
  /*
   * One column hands the gallery the whole container, and the image is square:
   * at 768 that is a 720px-tall photo, so the price, the tier table and the
   * add-to-cart all start below the fold on a tablet. Capping the gallery keeps
   * the picture legible and lifts the buying column back onto the first screen.
   * Phones are already narrower than the cap, so nothing changes there.
   */
  .kf-product__gallery {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }
}
/*
 * The related strip steps down a column at a time on the same ladder as the
 * homepage grid — the two are the same card and should not disagree about how
 * many fit. It used to drop straight to one card per row at 560, which turned
 * four suggestions into four full-width blocks.
 */
@media (max-width: 1000px) {
  .kf-product-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .kf-product-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .kf-product-related__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  /*
   * Four tracks leave 65px each on a 360px screen, too small to tell two
   * blister packs apart. Three give 91px.
   */
  .kf-product__gallery .flex-control-thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
  /*
   * 50px of padding a side is a quarter of a 360px screen. The panel keeps
   * its inset on a desktop measure and gives it back on a phone, where the
   * copy was reading at 212px against a 312px container.
   */
  .kf-product.product .kf-product__details .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 24px 18px;
  }
  /*
   * The three pills took a row each: at 14px against 20px of side padding,
   * "Beschrijving" and "Aanvullende informatie" are 338px together and the
   * container holds 312. Trimmed, the first two share a row.
   */
  .kf-product.product .kf-product__details .woocommerce-tabs ul.tabs li a {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }
}
/* Compact card, to the homepage grid's measurements. */
@media (max-width: 480px) {
  .kf-product-related__grid {
    gap: 12px;
  }
  .kf-product-related__card {
    padding: 10px;
  }
  .kf-product-related__badge {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 10px;
  }
  .kf-product-related__badge--stock {
    top: auto;
    bottom: 8px;
  }
  .kf-product-related__media {
    margin-bottom: 8px;
  }
  .kf-product-related__name,
  .kf-product-related__price {
    font-size: 14px;
  }
  .kf-product-related__price del {
    margin-right: 4px;
  }
  .kf-product-related__cart {
    margin-top: 6px;
  }
  /*
   * "Gerelateerde producten" is 22 characters; at 28px it needs 340px and the
   * container holds 328, so the heading broke across two lines and took its
   * accent underline the full width with it.
   */
  .kf-product-related__title {
    font-size: 22px;
  }
  /* "In winkelwagen" is 14 characters against a ~130px column. */
  .kf-product-related__cart a.button {
    gap: 5px;
    padding: 10px 6px;
    font-size: 12px;
  }
  .kf-product-related__cart a.button::before {
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 359px) {
  .kf-product-related__grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kf-product *,
  .kf-product *::before,
  .kf-product *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}