/* Kleuren komen via inline <style> uit website_settings:
   --c-primary, --c-secondary, --c-accent */
:root {
  --c-primary: #7BA8C7;   /* fallback */
  --c-secondary: #F4E4DD;
  --c-accent: #E89A8A;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
  background: #fff;
  line-height: 1.6;
  max-width: 100vw;
}
img { max-width: 100%; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
.muted { color: #6b7280; }
.small { font-size: .875em; }

.shop-container { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.shop-header { background: #fff; border-bottom: 1px solid #eef0f3; position: sticky; top: 0; z-index: 5; }
.shop-header-inner { display: flex; justify-content: space-between; align-items: center; padding: .35rem 1.25rem; gap: 1rem; }
.shop-logo { display: flex; align-items: center; gap: .5rem; color: #2a2520; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.shop-logo:hover { text-decoration: none; opacity: .85; }
.shop-logo img { max-height: 80px; width: auto; }
.shop-nav { display: flex; gap: .35rem; align-items: center; }
.shop-nav a { color: #4b5563; }
.shop-icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: #1f2937;
  position: relative;
  transition: background-color .15s ease;
  /* Reset default <button>-styling zodat het icoon-knop er net zo uitziet als een <a>. */
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.shop-icon-btn:hover { text-decoration: none; background: #f1f4f8; }
.shop-icon-btn:focus { outline: none; }
.shop-icon-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.shop-icon-btn svg { display: block; }

.shop-user-name { color: #4b5563; font-size: .95rem; font-weight: 500; line-height: 40px; }
.shop-login-link {
  color: #1f2937; font-weight: 500; padding: 0 .85rem;
  height: 40px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  transition: background-color .15s ease;
}
.shop-login-link:hover { background: #f1f4f8; text-decoration: none; }

.shop-cart-link {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: #1f2937;
  position: relative;
  transition: background-color .15s ease;
}
.shop-cart-link:hover { text-decoration: none; background: #f1f4f8; }
.shop-cart-link svg { display: block; }
/* Het "Winkelwagen" tekstlabel wordt nooit getoond — enkel icoontje + counter. */
.shop-cart-label { display: none; }
.shop-cart-count {
  position: absolute; top: -2px; right: -2px;
  background: var(--c-primary); color: #fff; border-radius: 999px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
  border: 2px solid #fff;
}

/* Op mobile: ook de naam verbergen, enkel icoontjes. */
@media (max-width: 600px) {
  .shop-user-name { display: none; }
}
.shop-cart-count[data-cart-count="0"] { display: none; }

/* Main */
.shop-main { padding: 2rem 1.25rem; }
.shop-main h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 .25rem; }
/* Webshop-banner (vervangt de "Webshop"-titel op de hoofdpagina) */
.shop-banner { margin: 0 0 1.5rem; }
.shop-banner img,
.shop-banner video { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; display: block; border-radius: 12px; }

/* Hero-weergave: banner full-bleed met de menubalk + overlay-tekst eroverheen */
.shop-hero { position: relative; aspect-ratio: 3 / 1; overflow: hidden; margin-bottom: 1.5rem; background: #1f2937; }
.shop-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.40), rgba(0,0,0,0) 34%, rgba(0,0,0,0) 48%, rgba(0,0,0,.58)); }
.shop-header--hero { position: relative; z-index: 2; background: transparent; border-bottom: 0; }
.shop-header--hero .shop-logo, .shop-header--hero .shop-logo-text { color: #fff; }
.shop-header--hero .shop-nav a,
.shop-header--hero .shop-icon-btn,
.shop-header--hero .shop-login-link,
.shop-header--hero .shop-user-name { color: #fff; }
.shop-header--hero .shop-icon-btn:hover,
.shop-header--hero .shop-login-link:hover { background: rgba(255,255,255,.18); }
.shop-hero-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: 1.4rem; }
.shop-hero-kicker { display: block; font-style: italic; color: #fff; opacity: .92; font-size: clamp(.95rem, 2vw, 1.25rem); margin-bottom: .1rem; }
.shop-hero-title { color: #fff; font-weight: 700; font-size: clamp(1.8rem, 5vw, 3.25rem); line-height: 1.05; margin: 0; }

@media (max-width: 600px) {
  .shop-banner img, .shop-banner video, .shop-hero { aspect-ratio: 3 / 2; }
}

.shop-empty {
  background: #f7f8fb; border: 1px dashed #d6dbe5; border-radius: 12px;
  padding: 3rem; text-align: center; color: #6b7280; margin-top: 2rem;
}

.shop-back { margin-bottom: 1rem; }
.shop-back a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem .35rem .75rem;
  border: 1px solid #e5e9f2;
  background: #fff;
  border-radius: 999px;
  color: #4b5563;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.shop-back-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .shop-back a:hover {
    background: #f1f4f8;
    border-color: #cbd5e0;
    color: #1b223c;
    text-decoration: none;
  }
  .shop-back a:hover .shop-back-icon {
    transform: translateX(-2px);
  }
}

/* Bekijk-knop met geanimeerde arrow (op product-cards in catalog) */
.shop-btn-bekijk {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.shop-btn-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .shop-btn-bekijk:hover .shop-btn-arrow {
    transform: translateX(2px);
  }
}

/* Categorie filters */
.shop-categories { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; align-items: flex-start; }
.shop-cat-wrap { position: relative; }
.shop-cat-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  border: 1px solid #e5e9f2; background: #fff;
  padding: .35rem .9rem; border-radius: 999px;
  color: #4b5563; font-size: .9rem; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .shop-cat-pill:hover { background: #f1f4f8; text-decoration: none; }
}
.shop-cat-pill.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.shop-cat-caret {
  display: inline-block; width: 12px; height: 8px;
  margin-left: .15rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234b5563' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  font-size: 0; color: transparent;
  vertical-align: middle;
}
.shop-cat-pill.is-active .shop-cat-caret {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* Hover-dropdown voor subcategorieën */
.shop-cat-dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 200px; max-width: 280px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .18);
  padding: .5rem;
  margin-top: .35rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 10;
}
.shop-cat-wrap.has-sub:hover .shop-cat-dropdown,
.shop-cat-wrap.has-sub:focus-within .shop-cat-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Geforceerd dicht houden na een klik op een (sub)categorie, tot de muis weggaat. */
.shop-cat-wrap.is-closed:hover .shop-cat-dropdown,
.shop-cat-wrap.is-closed:focus-within .shop-cat-dropdown {
  opacity: 0; visibility: hidden; transform: translateY(-4px);
}
/* Onzichtbare hover-bridge tussen pill en dropdown zodat hover niet wegvalt. */
.shop-cat-dropdown::before {
  content: ''; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem;
}
.shop-subcat-link {
  display: block; padding: .55rem .75rem; border-radius: 8px;
  color: #1f2937; font-size: .9rem; font-weight: 500; text-decoration: none;
  transition: background-color .12s ease;
  margin-bottom: 6px;
  -webkit-tap-highlight-color: transparent;
}
.shop-subcat-link:last-child { margin-bottom: 0; }
@media (hover: hover) {
  .shop-subcat-link:hover { background: #f1f4f8; text-decoration: none; }
}
.shop-subcat-link.is-active { background: var(--c-primary); color: #fff; }

/* Zoek-popup (macOS-stijl) */
.shop-search-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 23, 42, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: shopFadeIn .15s ease;
}
/* `display: flex` zou anders `[hidden]` overschrijven — hou de overlay verborgen tot de toggle hem opent. */
.shop-search-overlay[hidden] { display: none; }
@keyframes shopFadeIn { from { opacity: 0; } to { opacity: 1; } }
.shop-search-modal {
  width: min(620px, calc(100vw - 2rem));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .35);
  overflow: hidden;
  animation: shopSlideIn .18s ease;
}
@keyframes shopSlideIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.shop-search-form {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
}
.shop-search-icon { color: #9ca3af; flex-shrink: 0; }
.shop-search-modal-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 1.1rem; font-family: inherit; color: #1f2937;
  padding: .35rem 0;
}
.shop-search-modal-input::placeholder { color: #9ca3af; }
.shop-search-close {
  background: transparent; border: none; cursor: pointer;
  color: #6b7280; font-size: 1.6rem; line-height: 1;
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .12s ease;
}
.shop-search-close:hover { background: #f1f4f8; color: #1f2937; }

.shop-search-active {
  display: flex; align-items: center; gap: .65rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}
.shop-search-active-label {
  color: #6b7280; font-size: .9rem;
}
.shop-search-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--c-primary);
  color: #fff;
  padding: .35rem .35rem .35rem .85rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: opacity .15s ease;
}
.shop-search-chip:hover { opacity: .9; }
.shop-search-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease;
}
.shop-search-chip-x:hover {
  background: rgba(255, 255, 255, .4);
  color: #fff;
  text-decoration: none;
}

/* Filter + sort toolbar */
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: nowrap;
  margin: 1.5rem 0 1rem;
  padding: .85rem 1rem;
  border-top: 1px solid #eef0f3;
  border-bottom: 1px solid #eef0f3;
  font-size: .92rem;
}
.shop-toolbar-body { display: contents; } /* op desktop transparant — drawer-styling alleen op mobiel */
.shop-toolbar-left, .shop-toolbar-right { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.shop-toolbar-label { color: #6b7280; font-weight: 500; }
.shop-toolbar-control { position: relative; }
.shop-toolbar-trigger {
  background: transparent; border: 0; padding: .25rem 0;
  display: inline-flex; align-items: center; gap: .35rem;
  color: #1f2937; font: inherit; font-weight: 500;
  cursor: pointer;
}
.shop-toolbar-trigger:hover { color: var(--c-primary); }
.shop-toolbar-caret {
  display: inline-block; width: 12px; height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234b5563' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  font-size: 0; color: transparent;
  vertical-align: middle;
}
.shop-toolbar-pop {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: #fff; border: 1px solid #eef0f3;
  border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .18);
  padding: 1rem; min-width: 240px;
  z-index: 20;
}
.shop-toolbar-pop[hidden] { display: none; }
.shop-price-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.shop-price-row label { width: 50px; color: #6b7280; }
.shop-price-row input { flex: 1; padding: .45rem .65rem; border: 1px solid #e5e9f2; border-radius: 6px; font: inherit; }
.shop-price-actions { display: flex; gap: .5rem; margin-top: .5rem; justify-content: flex-end; }
.shop-toolbar-btn {
  padding: .45rem .85rem; border-radius: 6px; border: 1px solid #d6dbe5;
  background: #fff; color: #4b5563; cursor: pointer; font: inherit;
  transition: background-color .15s ease;
}
.shop-toolbar-btn:hover { background: #f1f4f8; }
.shop-toolbar-btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.shop-toolbar-btn-primary:hover { background: var(--c-primary); opacity: .9; }
.shop-toolbar-select {
  padding: .35rem .55rem; border: 1px solid #d6dbe5; border-radius: 6px;
  background: #fff; color: #1f2937; font: inherit;
}
.shop-toolbar-count { color: #6b7280; font-size: .9rem; white-space: nowrap; }

/* Merk-checkboxen */
.shop-merk-row {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .25rem;
  cursor: pointer;
  font-size: .9rem;
}
.shop-merk-row:hover { background: #f7f8fb; border-radius: 6px; }
.shop-merk-row input[type="checkbox"] { margin: 0; }

/* Stock-toggle inline */
.shop-toolbar-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  cursor: pointer;
  color: #1f2937;
}
.shop-toolbar-toggle input { margin: 0; }

/* Accent-kleur voor checkboxes/radios in alle shop-formulieren en filters */
.shop-toolbar input[type="checkbox"],
.shop-toolbar-mobile input[type="checkbox"],
.shop-pay-option input[type="radio"],
.shop-pay-option input[type="checkbox"],
.shop-main input[type="checkbox"],
.shop-main input[type="radio"] {
  accent-color: var(--c-primary);
}

/* Custom sort-dropdown */
.shop-sort { position: relative; }
.shop-sort-trigger {
  background: transparent; border: 0; padding: .25rem 0;
  display: inline-flex; align-items: center; gap: .35rem;
  color: #1f2937; font: inherit; font-weight: 500;
  cursor: pointer;
}
.shop-sort-trigger:hover { color: var(--c-primary); }
.shop-sort-caret {
  display: inline-block; width: 12px; height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234b5563' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  font-size: 0; color: transparent;
  vertical-align: middle;
  transition: transform .15s ease;
}
.shop-sort-trigger.is-open .shop-sort-caret { transform: rotate(180deg); }
.shop-sort-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid #eef0f3;
  border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .18);
  padding: .35rem;
  min-width: 220px;
  z-index: 20;
}
.shop-sort-menu[hidden] { display: none; }
.shop-sort-item {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: .6rem .85rem;
  color: #1f2937; font: inherit; font-size: .9rem;
  cursor: pointer; border-radius: 6px;
  transition: background-color .12s ease;
}
.shop-sort-item::before {
  content: ''; width: 14px; flex-shrink: 0;
  font-size: .9rem; color: var(--c-primary); font-weight: 700;
}
.shop-sort-item.is-active::before { content: '✓'; }
.shop-sort-item.is-active { color: var(--c-primary); }
.shop-sort-item:hover { background: #f1f4f8; }
.shop-toolbar-mobile,
.shop-toolbar-drawer-header,
.shop-toolbar-drawer-footer { display: none; }
.shop-toolbar-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .35);
  z-index: 80;
}
.shop-toolbar-backdrop[hidden] { display: none; }

@media (max-width: 600px) {
  /* Mobile: inline toolbar wordt drawer; trigger-knop vervangt hem */
  .shop-toolbar-mobile {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 0;
    border-bottom: 1px solid #eef0f3;
    margin: 1.25rem 0 1rem;
  }
  .shop-toolbar-mobile-trigger {
    background: transparent; border: 0; padding: 0;
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--c-primary); font: inherit; font-size: .95rem; font-weight: 500;
    cursor: pointer;
  }

  .shop-toolbar {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(90vw, 380px);
    background: #fff;
    transform: translateX(100%);
    transition: transform .25s ease;
    flex-direction: column;
    align-items: stretch;
    margin: 0; padding: 0;
    border: 0;
    z-index: 90;
    overflow-y: auto;
  }
  .shop-toolbar.is-open { transform: translateX(0); }

  .shop-toolbar-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eef0f3;
    position: relative;
  }
  .shop-toolbar-drawer-header h3 { margin: 0; font-size: 1rem; font-weight: 500; flex: 1; text-align: center; }
  .shop-toolbar-drawer-header [data-product-count-drawer] { position: absolute; left: 50%; transform: translateX(-50%); top: 2.4rem; font-size: .85rem; color: #6b7280; }
  .shop-toolbar-drawer-close {
    background: transparent; border: 0; cursor: pointer;
    font-size: 1.5rem; line-height: 1;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #1f2937;
  }

  .shop-toolbar-body {
    flex: 1; padding: 1rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; gap: 0;
  }
  .shop-toolbar-left, .shop-toolbar-right {
    flex-direction: column; align-items: stretch; gap: 0;
  }
  .shop-toolbar-trigger { justify-content: space-between; padding: .55rem 0; }
  .shop-toolbar-pop { position: static; box-shadow: none; padding: 0; border: 0; }
  .shop-toolbar-select { width: 100%; padding: .65rem; }
  /* Verberg de inline product-count in de body — staat al in de drawer-header. */
  .shop-toolbar-body [data-product-count] { display: none; }
  /* Verberg de inline Reset/Toepassen knoppen in popovers — drawer-footer
     heeft al een Toepassen + Alles verwijderen. */
  .shop-toolbar-body .shop-price-actions { display: none; }

  .shop-toolbar-drawer-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-top: 1px solid #eef0f3;
    gap: 1rem;
  }
  .shop-toolbar-drawer-reset {
    background: transparent; border: 0; cursor: pointer;
    color: #1f2937; text-decoration: underline; font: inherit;
  }
  .shop-toolbar-drawer-apply {
    background: var(--c-primary); color: #fff;
    border: 0; border-radius: 999px;
    padding: .85rem 2rem;
    font: inherit; font-weight: 500;
    cursor: pointer;
  }
  .shop-toolbar-drawer-apply:hover { opacity: .9; }
}

/* Product grid */
.shop-product-grid {
  display: grid; gap: 1.25rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
/* Op brede schermen exact 5 producten per rij. */
@media (min-width: 1024px) {
  .shop-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* Op mobile altijd minstens 2 producten naast elkaar. */
@media (max-width: 600px) {
  .shop-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
}
.shop-product-card {
  background: #fff; border: 1px solid #eef0f3; border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-width: 0; /* laat grid item kleiner worden dan content op smalle schermen */
}
.shop-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .18);
  border-color: #dde2eb;
}
.shop-product-thumb {
  display: block; aspect-ratio: 1; background: #fff;
  overflow: hidden; position: relative;
}
.shop-product-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .35s ease;
}
.shop-product-card:hover .shop-product-thumb img { transform: scale(1.04); }
.shop-product-noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: #9ca3af; font-size: .9rem;
}
.shop-product-noimg-large { aspect-ratio: 1; border-radius: 14px; }
.shop-product-body {
  padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1;
}
.shop-product-cat {
  color: #9ca3af; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; margin-bottom: .35rem;
}
.shop-product-body h3 {
  margin: 0 0 .35rem; font-size: 1rem; font-weight: 600;
  line-height: 1.3;
  /* Fix titel op exact 2 regels (afkappen indien langer) zodat prijs altijd
     op dezelfde hoogte staat over alle kaarten heen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.shop-product-body h3 a { color: #1f2937; }
.shop-product-price {
  color: #1f2937; font-weight: 700; font-size: 1.05rem;
  margin: .25rem 0 1rem;
}
/* Sale-prijs (gewone artikel-korting) + korting-badge */
.shop-price-old { color: #9ca3af; text-decoration: line-through; font-weight: 600; margin-right: .4rem; }
.shop-price-new { color: var(--c-accent); font-weight: 700; }
.shop-product-badge {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  background: var(--c-accent); color: #fff; font-weight: 700; font-size: .8rem;
  padding: .15rem .5rem; border-radius: 999px; line-height: 1.4;
}
.shop-product-price-large .shop-price-old { font-size: 1.1rem; }
.shop-product-price-large .shop-price-new { font-size: 1.5rem; }
/* Actie-hints (combinatie / drempel) bij het product */
.shop-actie-hints { display: flex; flex-wrap: wrap; gap: 6px; margin: -.5rem 0 1rem; }
.shop-actie-hint { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, white); border-radius: 999px; padding: 3px 10px; line-height: 1.3; white-space: nowrap; max-width: 100%; }
.shop-actie-hint .shop-actie-hint-dot { display: none; } /* bolletje weg in de pill → tekst op 1 lijn */
.shop-actie-hint-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); flex: 0 0 auto; vertical-align: middle; }
.shop-product-acties { display: flex; flex-direction: column; gap: 6px; margin: -.5rem 0 1.25rem; }
.shop-actie-line { font-size: .95rem; font-weight: 600; color: var(--c-primary); line-height: 1.45; }
.shop-actie-line .shop-actie-hint-dot { margin-right: 8px; }
.shop-actie-line a { color: inherit; text-decoration: none; }
.shop-actie-line a:hover { text-decoration: none; }
/* Knop altijd onderaan zodat alle kaarten dezelfde knop-positie hebben. */
.shop-product-body > .shop-btn,
.shop-product-body > .shop-add-cart { margin-top: auto; }
@media (max-width: 600px) {
  .shop-product-body { padding: .75rem .85rem .85rem; }
  .shop-product-body h3 { font-size: .95rem; }
  .shop-product-price { font-size: .95rem; }
}

/* Buttons */
.shop-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .65rem 1.1rem; line-height: 1.2;
  height: 44px;
  background: #fff; color: #1f2937;
  border: 1px solid #e5e9f2; border-radius: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
  text-align: center; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.shop-btn:hover,
.shop-btn:focus { background: #f1f4f8; text-decoration: none; }
.shop-btn:disabled,
.shop-btn[disabled] {
  opacity: .55; cursor: not-allowed;
  background: #fff; color: #6b7280;
  font-size: .82rem;
  white-space: nowrap;
  padding-left: .65rem; padding-right: .65rem;
}
.shop-btn:disabled:hover { background: #fff; }
.shop-btn-primary:disabled,
.shop-btn-primary[disabled] {
  background: #e5e7eb; color: #6b7280;
  border-color: #e5e7eb;
}
.shop-btn-primary:disabled:hover { background: #e5e7eb; opacity: .55; }
.shop-qty-stepper:has(input:disabled) { opacity: .55; }
.shop-qty-btn:disabled { cursor: not-allowed; }
.shop-btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.shop-btn-primary:hover,
.shop-btn-primary:focus { background: var(--c-primary); border-color: var(--c-primary); color: #fff; opacity: .9; text-decoration: none; }
.shop-btn-large { padding: .9rem 1.5rem; font-size: 1.05rem; }
.shop-add-cart { margin-top: auto; align-self: stretch; }

/* Product detail */
.shop-product-detail {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1rem;
}
@media (max-width: 720px) { .shop-product-detail { grid-template-columns: 1fr; } }
.shop-product-detail-image img,
.shop-product-detail-image .shop-product-noimg-large {
  border-radius: 0;
}
.shop-product-detail-body h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: .25rem 0 .75rem; }
.shop-product-price-large { font-weight: 700; font-size: 1.5rem; margin: .5rem 0 1.25rem; }
.shop-product-description {
  margin-top: 2.5rem;
  font-size: .92rem;
}
.shop-product-description p { margin: 0 0 1rem; color: #4b5563; }
.shop-product-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.shop-qty { width: 80px; padding: .55rem .75rem; border: 1px solid #e5e9f2; border-radius: 8px; font: inherit; }

/* Pill-stijl quantity stepper (− 6 +) — zelfde hoogte als .shop-btn */
.shop-qty-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid #d6dbe5;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  line-height: 1.2;
  height: 44px;
  box-sizing: border-box;
}
.shop-qty-stepper .shop-qty {
  width: 48px;
  padding: .65rem 0; /* zelfde verticale padding als .shop-btn voor matchende hoogte */
  border: 0;
  border-radius: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  background: transparent;
  color: #1f2937;
  -moz-appearance: textfield;
}
.shop-qty-stepper .shop-qty::-webkit-outer-spin-button,
.shop-qty-stepper .shop-qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.shop-qty-stepper .shop-qty:focus { outline: none; }
.shop-qty-btn {
  width: 44px;
  padding: 0;
  border: 0; background: transparent;
  font-size: 1.15rem; line-height: 1;
  color: #4b5563;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .12s ease, color .12s ease;
}
.shop-qty-btn:hover { background: #f1f4f8; color: #1f2937; }
.shop-qty-btn:focus { outline: none; }

/* Cart page */
.shop-cart-list { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.shop-cart-item {
  display: grid; grid-template-columns: 110px 1fr auto auto; gap: 1rem;
  background: #fff; border: 1px solid #eef0f3; border-radius: 10px;
  padding: .75rem; align-items: center;
}
@media (max-width: 600px) {
  .shop-cart-item {
    grid-template-columns: 90px minmax(0, 1fr) auto;
    grid-template-areas:
      "img info info"
      "img ctrl total";
    gap: .5rem .65rem;
    padding: .65rem .75rem;
    align-items: start;
  }
  .shop-cart-item > *:nth-child(1) { grid-area: img; align-self: start; }
  .shop-cart-item > *:nth-child(2) { grid-area: info; min-width: 0; }
  .shop-cart-item .shop-cart-controls { grid-area: ctrl; align-self: center; }
  .shop-cart-item .shop-cart-line-total { grid-area: total; align-self: center; }
  .shop-cart-item img,
  .shop-cart-item .shop-cart-noimg { width: 90px; height: 90px; }
  .shop-cart-controls .shop-qty-stepper { height: 38px; }
  .shop-cart-controls .shop-qty-btn { width: 36px; }
  .shop-cart-controls .shop-qty { width: 38px; }
  .shop-cart-remove { width: 36px; height: 36px; font-size: 1.5rem; }
}
.shop-cart-item img { width: 110px; height: 110px; object-fit: contain; border-radius: 8px; background: #fff; }
.shop-cart-item .shop-cart-noimg { width: 110px; height: 110px; background: #fff; border: 1px solid #eef0f3; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: .75rem; }
.shop-cart-item h4 { margin: 0; font-size: 1rem; font-weight: 600; }
.shop-cart-item .shop-cart-meta { font-size: .85rem; color: #6b7280; margin-top: .25rem; }
.shop-cart-controls { display: flex; align-items: center; gap: .5rem; }
.shop-cart-controls .shop-qty-stepper { height: 40px; }
.shop-cart-controls .shop-qty { width: 40px; }
.shop-cart-line-total { font-weight: 700; min-width: 90px; text-align: right; }
.shop-cart-remove {
  background: transparent; border: 1px solid transparent;
  color: #c33; cursor: pointer;
  font-size: 1.75rem; line-height: 1;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  transition: background-color .15s ease, border-color .15s ease;
}
.shop-cart-remove:hover { background: #fef2f2; border-color: #fecaca; }

.shop-cart-totals {
  background: #f7f8fb; border: 1px solid #eef0f3; border-radius: 12px;
  padding: 1.25rem 1.5rem; margin-top: 1.5rem;
}
.shop-cart-totals dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; }
.shop-cart-totals dt { color: #4b5563; }
.shop-cart-totals dd { margin: 0; font-weight: 600; }
.shop-cart-totals .shop-cart-grand { font-size: 1.25rem; font-weight: 700; padding-top: .5rem; border-top: 1px solid #d6dbe5; margin-top: .5rem; }

.shop-cart-actions { display: flex; gap: .75rem; justify-content: space-between; margin-top: 1.5rem; flex-wrap: wrap; }

/* Forms */
.shop-form-group { margin-bottom: 1rem; }
.shop-form-group label { display: block; font-weight: 600; margin-bottom: .35rem; color: #4b5563; }
.shop-form-control {
  width: 100%; padding: .6rem .75rem; border: 1px solid #e5e9f2; border-radius: 8px; font: inherit;
}
.shop-form-control:focus { outline: 2px solid var(--c-secondary); outline-offset: 1px; border-color: var(--c-primary); }

.shop-form-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .shop-form-row { grid-template-columns: 1fr; } }

.shop-alert {
  padding: .85rem 1rem; border-radius: 8px;
  margin-bottom: 1rem; font-weight: 500;
}
.shop-alert-error   { background: #fef2f2; color: #991b1b; }
.shop-alert-info    { background: var(--c-secondary); color: var(--c-primary); }
.shop-alert-success { background: #ecfdf5; color: #065f46; }

/* Checkout-formulier (gast) */
.shop-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
  margin: .5rem 0;
}
.shop-form-grid .shop-form-group { grid-column: span 2; }
@media (max-width: 600px) {
  .shop-form-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-form-grid .shop-form-group { grid-column: span 2; }
}
.shop-form-group label {
  display: block; margin-bottom: .35rem;
  font-size: .9rem; font-weight: 500; color: #4b5563;
}
.shop-form-input {
  width: 100%; padding: .65rem .75rem;
  border: 1px solid #d6dbe5; border-radius: 8px;
  font: inherit; color: #1f2937; background: #fff;
}
.shop-form-input:focus { outline: 2px solid var(--c-primary); outline-offset: -2px; border-color: var(--c-primary); }
/* Read-only velden bij ingelogde klanten: account-gegevens die niet per
   bestelling aangepast mogen worden. Visueel licht gedimd zodat de klant
   ziet dat ze niet bewerkbaar zijn. */
.shop-form-input-locked,
.shop-form-input[readonly] {
  background: #f3f4f6; color: #4b5563; cursor: not-allowed;
}
.shop-form-input-locked:focus,
.shop-form-input[readonly]:focus { outline: none; border-color: #d6dbe5; }
/* Custom chevron voor select-dropdowns binnen shop-formulieren. */
select.shop-form-input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234b5563' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 12px 8px;
}

/* Betaal-opties (checkout) */
.shop-pay-options { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.shop-pay-option {
  display: flex; gap: .85rem; align-items: flex-start; padding: .85rem 1rem;
  border: 1px solid #e5e9f2; border-radius: 8px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.shop-pay-option:hover { border-color: var(--c-primary); }
.shop-pay-option input[type="radio"] { margin-top: .2rem; flex-shrink: 0; }
.shop-pay-option span { display: flex; flex-direction: column; gap: .15rem; }
.shop-pay-option small { font-size: .85rem; }
.shop-pay-option:has(input:checked) { border-color: var(--c-primary); background: var(--c-secondary); }

/* (Inline zoekbalk vervangen door macOS-stijl popup, zie .shop-search-overlay) */

/* Carousel (productpagina) */
.shop-carousel {
  position: relative;
  overflow: hidden;
  /* Vaste vierkante box (zoals de "Geen foto"-placeholder) zodat de carousel niet
     verspringt terwijl (grote/trage) afbeeldingen laden — voorkomt hapering bij het
     scrollen. Foto's worden via object-fit: contain ingepast. */
  aspect-ratio: 1;
  border-radius: 14px;
  touch-action: pan-y; /* sta verticale scroll toe, horizontale swipe wordt door JS afgehandeld */
  /* Eigen stacking context creëren — anders worden 3D-getransformeerde
     children door sommige browsers niet door border-radius geclipt. */
  isolation: isolate;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari border-radius+overflow fix */
}
.shop-carousel-track {
  display: flex;
  width: 100%;
  height: 100%; /* vul de hele carousel-hoogte (incl. de aspect-ratio) */
  align-items: stretch;
  transition: transform .3s ease;
  will-change: transform;
  backface-visibility: hidden;
}
.shop-carousel-img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  /* Foto past op breedte zonder te croppen; verticaal in het midden uitgelijnd
     binnen de carousel-vlakte (whitespace boven/onder bij smalle foto's). */
  object-fit: contain;
  object-position: center center;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* Vaste verhouding voor de carousel zodat alle foto's exact dezelfde hoogte
   en breedte hebben, ongeacht hun natuurlijke ratio. */
.shop-carousel { aspect-ratio: 3 / 4; }
/* Beperk de grid-kolom: anders kan de carousel-track de kolom uitrekken. */
.shop-product-detail-image { min-width: 0; }
.shop-carousel img:not(.shop-carousel-img) { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.shop-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.85); border: 1px solid #d6dbe5;
  color: #1f2937; font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: background .15s ease;
  z-index: 2; /* boven de track stacking-context (transformed) staan */
}
.shop-carousel-arrow:hover { background: #fff; }
.shop-carousel-arrow[hidden] { display: none; }
.shop-carousel-prev { left: .5rem; }
.shop-carousel-next { right: .5rem; }
.shop-carousel-thumbs {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem;
}
.shop-carousel-thumb {
  width: 64px; height: 64px; padding: 0; border: 2px solid #e5e9f2;
  border-radius: 6px; background: #fff; cursor: pointer; overflow: hidden;
  transition: border-color .15s ease;
}
.shop-carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-carousel-thumb.is-active { border-color: var(--c-primary); }
.shop-carousel-thumb:hover { border-color: var(--c-primary); }

/* Variant-selectoren (productpagina) */
.shop-variant-row { margin: 1rem 0; }
.shop-variant-label { font-weight: 600; color: #4b5563; margin-bottom: .35rem; font-size: .95rem; }
.shop-variant-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.shop-variant-btn {
  appearance: none; -webkit-appearance: none;
  background: #fff; border: 1px solid #d6dbe5; border-radius: 8px;
  padding: .55rem 1rem; font: inherit; cursor: pointer;
  color: #1f2937; /* expliciet, anders pakt iOS-Safari een blauwe button-text-default */
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.shop-variant-btn:hover { border-color: var(--c-primary); }
.shop-variant-btn.is-active {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: #fff;
}
.shop-variant-btn.is-disabled,
.shop-variant-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e9f2;
}
.shop-variant-btn.is-disabled:hover,
.shop-variant-btn:disabled:hover { border-color: #e5e9f2; }

/* Footer */
.shop-footer { padding: 2rem 0; text-align: center; color: #6b7280; font-size: .9rem; border-top: 1px solid #eef0f3; }