@charset "UTF-8";
/*
 * Shop page.
 *
 * Loaded only on the shop archive, via inc/enqueue.php. Every selector is
 * kf-shop- prefixed.
 *
 * The product card here is the same design as the one on the homepage, 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-shop {
  padding: 24px 0 64px;
}

/* -------------------------------------------------------------------------
 * Masthead
 * ---------------------------------------------------------------------- */
.kf-shop__masthead {
  padding: 28px 32px;
  margin-bottom: 28px;
  background: #f3f9f7;
  border-radius: 12px;
}

.kf-shop__breadcrumb {
  font-size: 13px;
  color: #5c6b73;
}
.kf-shop__breadcrumb a {
  color: #5c6b73;
}
.kf-shop__breadcrumb a:hover {
  color: #0c7d5f;
  text-decoration: underline;
}

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

.kf-shop__title {
  margin: 10px 0 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: #1f2933;
}

.kf-shop__intro {
  max-width: 70ch;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: #5c6b73;
}
.kf-shop__intro p {
  margin: 0 0 8px;
}
.kf-shop__intro p:last-child {
  margin-bottom: 0;
}
.kf-shop__intro a {
  color: #0c7d5f;
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */
/*
 * 270px, not 240: the filter groups run two across, and a half-width column has
 * to hold the longest label. "Erectiepillen" is 76px of text plus the 16px box
 * and its 8px gap, so a 95px column (what 240 gave) clipped it.
 */
.kf-shop__layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
}

.kf-shop__main {
  min-width: 0;
}

/* -------------------------------------------------------------------------
 * Filter sidebar
 * ---------------------------------------------------------------------- */
.kf-shop__sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.kf-shop-filter {
  padding: 16px 18px 18px;
  background: #ffffff;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
}

/*
 * Each group title carries a green rule beneath it, run a little wider than the
 * words above it.
 *
 * inline-block is what makes that possible: it shrinks the heading's box to its
 * own text, so the rule can be `100% + 14px` and end up measured from the title
 * rather than from the panel. As a full-width block every rule would be the same
 * length and the effect would be lost.
 */
/*
 * The panel is a `details` and this is its `summary`, so it is also the control
 * that opens and shuts the group. The UA triangle is dropped — the chevron
 * below is drawn where there is room for it — and `inline-block` keeps the
 * accent rule measured from the words rather than the panel.
 */
.kf-shop-filter__title {
  position: relative;
  display: inline-block;
  margin: 0 0 20px;
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #1f2933;
  list-style: none;
  cursor: pointer;
}
.kf-shop-filter__title::-webkit-details-marker {
  display: none;
}

/* A shut panel has nothing under its rule, so the 20px below it is dead space. */
.kf-shop-filter:not([open]) .kf-shop-filter__title {
  margin-bottom: 0;
}

/*
 * The rule carries the same tinted lift the add-to-cart pill uses, and deepens
 * when the panel is hovered — so it reads as a raised object rather than a
 * painted line, and the group answers the pointer the way the cards do.
 */
.kf-shop-filter__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-shop-filter:hover .kf-shop-filter__title::after {
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.45);
}

.kf-shop-filter__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Two equal columns for short-labelled groups such as Dosering, which would
 * otherwise stack twelve rows and leave the sidebar far taller than the grid.
 * Equal grid tracks, not inline flow — the columns have to line up down the
 * panel rather than flowing ragged.
 */
.kf-shop-filter__list--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 9px;
}
.kf-shop-filter__list--split .kf-shop-filter__option {
  gap: 8px;
}
.kf-shop-filter__list--split {
  /* Safety net: a label longer than the column wraps rather than overflowing. */
}
.kf-shop-filter__list--split .kf-shop-filter__label {
  overflow-wrap: break-word;
}

.kf-shop-filter__option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #5c6b73;
}
.kf-shop-filter__option:hover {
  color: #0c7d5f;
}
.kf-shop-filter__option:hover .kf-shop-filter__box {
  border-color: #0f9d78;
}
.kf-shop-filter__option.is-active {
  color: #1f2933;
  font-weight: 600;
}

.kf-shop-filter__box {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 1px solid #e2e8e6;
  border-radius: 4px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.kf-shop-filter__option.is-active .kf-shop-filter__box {
  background: #0f9d78;
  border-color: #0f9d78;
  /* Tick drawn from a rotated border, so no icon file is needed. */
}
.kf-shop-filter__option.is-active .kf-shop-filter__box::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 4px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.kf-shop-filter__label {
  min-width: 0;
}

.kf-shop-filter__clear {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: #0c7d5f;
}
.kf-shop-filter__clear:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Grid
 * ---------------------------------------------------------------------- */
.kf-shop__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------------------------
 * Card — the homepage product card, redrawn under this page's classes
 * ---------------------------------------------------------------------- */
.kf-shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #ffffff;
  border: 0;
  border-radius: 8px;
  /* Same card treatment as the homepage grid and the related strip: border and
     shadow both in the green the card's image sits on, and hover deepens the
     shadow without changing its colour. The ring stands in for a thicker
     border, so nothing reflows. */
  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-shop-card:hover, .kf-shop-card:focus-within {
  transform: translateY(-4px);
}
.kf-shop-card:hover .kf-shop-card__title, .kf-shop-card:focus-within .kf-shop-card__title {
  color: #0c7d5f;
}

/*
 * 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-shop-card__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-shop-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  /* Product renders are shot on white; multiply drops that onto the tint. */
  mix-blend-mode: multiply;
  transition: transform 0.3s ease;
}

/*
 * The product render grows a little inside its box on hover. The media box
 * already clips, and object-fit: contain leaves margin around the render, so
 * nothing of the product is lost.
 */
.kf-shop-card:hover .kf-shop-card__image {
  transform: scale(1.04);
}

.kf-shop-card__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-shop-card__badge--stock {
  top: auto;
  bottom: 10px;
  color: #1f2933;
  background: #e2e8e6;
}

.kf-shop-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

/* Name and price read from the left, indented a fifth of the card. */
.kf-shop-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #1f2933;
  transition: color 0.18s ease;
}

.kf-shop-card__link {
  color: inherit;
  /* Whole-card hit area; the anchor stays the focusable element. */
}
.kf-shop-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.kf-shop-card__link:hover {
  color: #0c7d5f;
}

.kf-shop-card__rating .star-rating {
  font-size: 13px;
}

.kf-shop-card__price {
  margin: auto 0 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: #0c7d5f;
}
.kf-shop-card__price del {
  margin-right: 6px;
  font-weight: 400;
  color: #5c6b73;
  opacity: 1;
}
.kf-shop-card__price ins {
  background: none;
  text-decoration: none;
}

/* Above the card-wide link overlay, so the button stays clickable. */
.kf-shop-card__cart {
  position: relative;
  z-index: 2;
  margin-top: 8px;
}

/*
 * WooCommerce generates this button, so the cart glyph is a masked
 * pseudo-element rather than inline SVG — currentColor keeps it on the label.
 */
.kf-shop-card__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;
}

/*
 * Hover has to restate the label colour, and it needs the extra `.kf-shop`
 * ancestor to do it. WooCommerce ships `.woocommerce a.button:hover { color:
 * #515151 }`, which is (0,3,1) — exactly what `.kf-shop-card__cart a.button:
 * hover` scores, so a tie would hand the decision to load order and the label
 * went grey-black under the pointer. With the ancestor this is (0,4,1) and
 * wins outright. The homepage grid never showed the bug because its selector
 * carries `ul.products li.product` and already outscored Woo.
 */
.kf-shop .kf-shop-card__cart a.button:hover,
.kf-shop .kf-shop-card__cart a.button:focus,
.kf-shop .kf-shop-card__cart a.button:active {
  color: #fff;
  background: #0c7d5f;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.35);
}

.kf-shop-card__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-shop-card__cart a.button.loading {
  opacity: 0.6;
}

/* The homepage marks a finished add the same way; kept in step deliberately. */
.kf-shop-card__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-shop-card__cart a.added_to_cart {
  display: none;
}

.kf-shop-card.outofstock .kf-shop-card__image {
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */
.kf-shop__main .woocommerce-pagination {
  margin-top: 32px;
  /*
   * fit-content, so the list hugs the chips rather than filling the column.
   * The rule below is measured from this box, and centring it here keeps the
   * rule's overhang equal on both sides.
   */
}
.kf-shop__main .woocommerce-pagination ul.page-numbers {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  /*
   * No flex-wrap: on a wrapping flex container `fit-content` measures one
   * gap too wide, which threw the rule below off-centre by 8px. The row is
   * a handful of 40px chips in an 850px column, so it has nothing to wrap.
   */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 18px;
  border: 0;
  list-style: none;
  /*
   * WooCommerce draws a divider between pages with
   * `.woocommerce nav.woocommerce-pagination ul li { border-right: 1px }`,
   * which is specificity (0,2,2). Nested here the selector is (0,3,2) and
   * finally wins — at (0,2,1) the line stayed.
   */
}
.kf-shop__main .woocommerce-pagination ul.page-numbers li {
  margin: 0;
  border: 0;
}
.kf-shop__main .woocommerce-pagination ul.page-numbers {
  /*
   * WooCommerce puts a clearfix `content: " "; display: table` on this ul.
   * In a flex container that zero-width pseudo-element is a real flex item
   * and consumes a gap, which pushed the chips 8px off centre.
   */
}
.kf-shop__main .woocommerce-pagination ul.page-numbers::before {
  content: none;
}
.kf-shop__main .woocommerce-pagination ul.page-numbers {
  /*
   * The group's own divider, matching the sidebar's: the same green rule
   * and the same tinted lift, run 14px past the chips at each end.
   *
   * Absolutely positioned on purpose — a static pseudo-element inside a
   * flex container becomes a flex item and would sit in the row of chips.
   */
}
.kf-shop__main .woocommerce-pagination ul.page-numbers::after {
  content: "";
  /* Woo's clearfix leaves this as display: table otherwise. */
  display: block;
  position: absolute;
  /*
   * Centred on the list rather than pinned to its left edge, so the
   * overhang stays equal on both sides whatever the box measures.
   */
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: calc(100% + 28px);
  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-shop__main .woocommerce-pagination:hover ul.page-numbers::after {
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.45);
}
.kf-shop__main .woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #5c6b73;
  background: #ffffff;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.kf-shop__main .woocommerce-pagination a.page-numbers:hover {
  color: #0c7d5f;
  border-color: #0f9d78;
  box-shadow: 0 4px 10px rgba(15, 157, 120, 0.15);
}
.kf-shop__main .woocommerce-pagination .page-numbers.current {
  color: #fff;
  background: #0f9d78;
  border-color: #0f9d78;
  box-shadow: 0 2px 6px rgba(15, 157, 120, 0.25);
}

/* -------------------------------------------------------------------------
 * Empty state
 * ---------------------------------------------------------------------- */
.kf-shop__empty {
  padding: 48px 24px;
  text-align: center;
  background: #f3f9f7;
  border-radius: 12px;
}

.kf-shop__empty-text {
  margin: 0 0 20px;
  font-size: 16px;
  color: #5c6b73;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .kf-shop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  /* The sidebar moves above the grid rather than squeezing it. */
  .kf-shop__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  /*
   * 260px minimum so a stacked panel is still wide enough for its own two
   * columns; at 220 a narrow viewport fitted two panels across and squeezed
   * the split columns back under the longest label.
   */
  .kf-shop__sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
  }
  .kf-shop__masthead {
    padding: 22px 20px;
  }
  .kf-shop__title {
    font-size: 26px;
  }
  /*
   * The sidebar is out of the row here, so the grid has the full container
   * back — the two columns it inherits from the 1100 step would be 350px
   * cards on a tablet, twice the size they are on a desktop.
   */
  .kf-shop__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .kf-shop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/*
 * The grid used to drop to a single column at 560, which is why the page got
 * *taller* as the phone got wider: the card image is square, so one column at
 * 545 meant a 448px-tall render per card and a 7450px grid for twelve products.
 * Two columns hold to 360 on the same ladder the homepage and the related strip
 * use — the three grids are the same card and must not disagree about how many
 * fit.
 */
@media (max-width: 900px) {
  /*
   * Stacked, the panels are foldable (shop.js shuts them on load), so the
   * summary has to look like a control: it spans the panel and carries a
   * chevron that turns with the state.
   */
  .kf-shop-filter__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .kf-shop-filter__title::before {
    content: "";
    position: absolute;
    right: 2px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #5c6b73;
    border-bottom: 2px solid #5c6b73;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
  }
  .kf-shop-filter[open] .kf-shop-filter__title::before {
    transform: rotate(-135deg);
    top: 8px;
  }
  /* Measured from the words on a desktop; here the summary is the full row. */
  .kf-shop-filter__title::after {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .kf-shop__grid {
    gap: 12px;
  }
  .kf-shop-card {
    padding: 10px;
  }
  .kf-shop-card__badge {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 10px;
  }
  .kf-shop-card__badge--stock {
    top: auto;
    bottom: 8px;
  }
  .kf-shop-card__media {
    margin-bottom: 8px;
  }
  .kf-shop-card__body {
    gap: 6px;
  }
  .kf-shop-card__title,
  .kf-shop-card__price {
    font-size: 14px;
  }
  .kf-shop-card__cart {
    margin-top: 6px;
  }
  /* "In winkelwagen" is 14 characters against a ~130px column. */
  .kf-shop-card__cart a.button {
    gap: 5px;
    padding: 10px 6px;
    font-size: 12px;
  }
  .kf-shop-card__cart a.button::before {
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 359px) {
  .kf-shop__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kf-shop *,
  .kf-shop *::before,
  .kf-shop *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}