/*
Theme Name:   OnlineGo
Theme URI:    https://onlinego.nl
Description:  OnlineGo — volledig custom standalone theme voor bouwproducten webshop
Author:       OnlineGo
Version:      1.1.5
Text Domain:  onlinego
*/

/* ============================================
   RESET & BASE
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange:       #F97316;
  --orange-dark:  #c2570c;
  --black:        #111111;
  --black-soft:   #1a1a1a;
  --white:        #ffffff;
  --gray-50:      #f9f9f9;
  --gray-100:     #f2f2f2;
  --gray-200:     #e6e6e6;
  --gray-400:     #aaaaaa;
  --gray-600:     #666666;
  --green:        #27ae60;
  --red:          #e74c3c;
  --uponor:       #0062a3;
  --grohe:        #0045A5;
  --font-body:    'Inter', sans-serif;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-price:   'Oswald', sans-serif;
  --radius:       6px;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.18);
  --transition:   .2s ease;
  --container:    1280px;
}

html { scroll-behavior: smooth; }
/* overflow-x: clip i.p.v. hidden → voorkomt horizontaal scrollen ZONDER position:sticky te breken (de header). */
html { overflow-x: clip; }
body { font-family: var(--font-body); color: var(--black); background: var(--white); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.pg { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
body:not(.home) .pg { max-width: 1200px; padding-left: 40px; padding-right: 40px; }
/* Product page uses full homepage width */
body.single-product .pg { max-width: var(--container); padding-left: 32px; padding-right: 32px; }

/* ============================================
   PROMO BAR
============================================ */
.promo-bar {
  background: linear-gradient(90deg, #ea6a0a 0%, #F97316 40%, #fb8a3c 100%);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 0;
  color: rgba(255,255,255,.85);
  position: relative;
  overflow: hidden;
}
.promo-bar::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.04) 0px,
    rgba(255,255,255,.04) 1px,
    transparent 1px,
    transparent 60px
  );
}
.promo-bar .pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.promo-bar .promo-item {
  display: flex; align-items: center; gap: 7px;
  padding: 0 20px;
  white-space: nowrap;
}
.promo-bar .promo-item svg { color: rgba(255,255,255,.7); flex-shrink: 0; }
.promo-bar .stars svg { color: #fff; }
.promo-bar strong { color: #fff; font-weight: 700; }
.promo-bar .highlight { color: #fff; font-weight: 800; }
.promo-bar a { color: #fff; font-weight: 700; text-decoration: none; opacity: .9; }
.promo-bar a:hover { opacity: 1; text-decoration: underline; }
.promo-sep { color: rgba(255,255,255,.25); padding: 0; }


/* ============================================
   HEADER
============================================ */
.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.header-top {
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 0;
}
.header-top .pg {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 24px;
}

/* Logo */
.logo { display: flex; flex-direction: column; line-height: 1; }
.logo__main {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--black);
}
.logo__main em { color: var(--orange); font-style: normal; }
.logo__sub { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; color: #777; font-weight: 600; }

/* Zoekbalk */
.header-search { position: relative; }
.header-search input {
  width: 100%;
  height: 44px;
  border: 1.5px solid var(--gray-200);
  border-radius: 22px;
  padding: 0 48px 0 20px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--gray-50);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  color: var(--black);
}
.header-search input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
  background: var(--white);
}
.header-search input::placeholder { color: var(--gray-400); }
.header-search button {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--gray-400);
  display: flex; align-items: center;
  transition: color var(--transition);
}
.header-search button:hover { color: var(--orange); }

/* ── Live zoek-dropdown ── */
.header-search__drop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1200;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  max-height: min(70vh, 520px); overflow-y: auto;
}
.ogo-srch-list { list-style: none; margin: 0; padding: 6px; }
.ogo-srch-item a {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  border-radius: 9px; text-decoration: none; transition: background .14s;
}
.ogo-srch-item a:hover, .ogo-srch-item a.active { background: var(--gray-50); }
.ogo-srch-thumb {
  width: 46px; height: 46px; flex-shrink: 0; border: 1px solid var(--gray-200);
  border-radius: 8px; background: var(--gray-50);
  display: flex; align-items: center; justify-content: center; padding: 4px;
}
.ogo-srch-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ogo-srch-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ogo-srch-name {
  font-size: 13.5px; font-weight: 600; color: var(--black); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ogo-srch-sku { font-size: 11.5px; color: var(--gray-400); }
.ogo-srch-price { flex-shrink: 0; font-size: 13.5px; font-weight: 800; color: var(--black); text-align: right; white-space: nowrap; }
.ogo-srch-price__lbl { font-size: 10.5px; font-weight: 400; color: var(--gray-400); display: block; margin-top: 1px; }
.ogo-srch-all {
  display: block; text-align: center; padding: 12px; border-top: 1px solid var(--gray-100);
  font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; transition: background .14s;
}
.ogo-srch-all:hover, .ogo-srch-all.active { background: rgba(249,115,22,.07); }
.ogo-srch-empty { padding: 22px 18px; text-align: center; font-size: 13.5px; color: var(--gray-600); }
.ogo-srch-notice {
  margin: 6px; padding: 11px 14px; border-radius: 10px;
  background: rgba(249,115,22,.08); border: 1px solid rgba(249,115,22,.3);
  font-size: 12.5px; line-height: 1.5; color: var(--black);
}
.ogo-srch-notice strong { color: var(--orange-dark, #c2410c); }

/* Header acties */
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--gray-200);
  color: var(--black-soft);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.header-btn:hover { border-color: var(--orange); color: var(--orange); }
.header-btn--ghost { border-color: var(--gray-200); color: var(--black-soft); }
.header-btn--ghost:hover { border-color: var(--orange); color: var(--orange); }
.header-btn svg { flex-shrink: 0; }

.cart-btn {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: var(--orange);
  color: var(--white);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  transition: background var(--transition), transform var(--transition);
}
.cart-btn:hover { background: var(--orange-dark); transform: translateY(-1px); }
.cart-count {
  position: absolute; top: -6px; right: -6px;
  background: var(--black); color: var(--white);
  font-size: 10px; font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Nav bar */
.header-nav { background: var(--white); border-bottom: 2px solid var(--gray-200); }
.header-nav .pg { display: flex; align-items: center; justify-content: space-between; }

.nav-list { display: flex; align-items: center; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: color var(--transition);
}
.nav-link:hover, .nav-item:hover > .nav-link { color: var(--orange); }
.nav-link svg { transition: transform var(--transition); }
.nav-item:hover > .nav-link svg { transform: rotate(180deg); }

/* Mega menu */
.mega-menu {
  position: absolute; top: 100%; left: 0;
  width: 820px;
  background: var(--white);
  border-top: 3px solid var(--orange);
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--radius) var(--radius);
  min-width: 720px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 800;
}
.nav-item:hover .mega-menu {
  opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0);
}
.mega-inner { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 0; }
.mega-col-uponor { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 24px 20px; border-right: 1px solid var(--gray-100); }
.mega-col-uponor strong { grid-column: 1 / -1; display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-100); }
.mega-col-uponor a { display: block; font-size: 13px; color: var(--gray-600); padding: 4px 0; text-decoration: none; transition: color var(--transition), padding-left var(--transition); }
.mega-col-uponor a:hover { color: var(--orange); padding-left: 4px; }
.mega-col-uponor .mega-uponor-all { grid-column: 1 / -1; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--orange); text-decoration: none; }
.mega-col-uponor .mega-uponor-all:hover { text-decoration: underline; }
.mega-footer-bar { display: flex; align-items: center; justify-content: center; padding: 12px 20px; border-top: 1px solid var(--gray-100); background: var(--gray-50); border-radius: 0 0 var(--radius) var(--radius); }
.mega-footer-bar a { font-size: 13px; font-weight: 700; color: var(--black); text-decoration: none; display: flex; align-items: center; gap: 8px; transition: color var(--transition); }
.mega-footer-bar a:hover { color: var(--orange); }
.mega-col { padding: 24px 20px; border-right: 1px solid var(--gray-100); }
.mega-col:last-child { border-right: none; background: var(--gray-50); border-radius: 0 0 var(--radius) 0; }
.mega-col strong {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--orange); margin-bottom: 12px;
}
.mega-col a {
  display: block; font-size: 13.5px; color: var(--gray-600);
  padding: 5px 0; transition: color var(--transition), padding-left var(--transition);
}
.mega-col a:hover { color: var(--orange); padding-left: 6px; }

.mega-promo { display: flex; flex-direction: column; height: 100%; }
.mega-promo-badge {
  background: var(--orange); color: var(--white);
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; padding: 3px 8px; border-radius: 20px;
  display: inline-block; width: fit-content; margin-bottom: 10px;
}
.mega-promo h4 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--black); margin-bottom: 6px; }
.mega-promo p { font-size: 12px; color: var(--gray-600); line-height: 1.5; margin-bottom: 16px; flex: 1; }
.mega-promo a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--orange);
  text-transform: uppercase; letter-spacing: .06em;
}

/* Delivery badge in nav */
.nav-delivery {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--gray-600);
  padding: 0 0 0 20px;
  border-left: 1px solid var(--gray-200);
  margin-left: 12px;
}
.nav-delivery strong { color: var(--orange); }

/* ============================================
   HERO
============================================ */
.hero {
  background: linear-gradient(135deg, #eef3fb 0%, #f5f8ff 60%, #edf2fa 100%);
  min-height: 560px;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  border-bottom: 1px solid #dde4f0;
}

/* Diagonaal strepenpatroon */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(180,200,240,.12) 0px,
    rgba(180,200,240,.12) 1px,
    transparent 1px,
    transparent 28px
  );
}

/* Oranje glow */
.hero::after {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(249,115,22,.14) 0%, rgba(249,115,22,.05) 45%, transparent 70%);
  top: 50%; right: 8%;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 50%;
}

.hero .pg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative; z-index: 1;
}

/* Hero tekst */
.hero-text {}
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(249,115,22,.12);
  border: 1px solid rgba(249,115,22,.25);
  color: var(--orange);
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 6px 14px; border-radius: 20px;
  margin-bottom: 22px;
}
.hero-tag::before { content: ''; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; }

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(42px, 5.5vw, 68px);
  font-weight: 800;
  text-transform: uppercase;
  color: #111;
  line-height: 1.0;
  letter-spacing: .01em;
  margin-bottom: 20px;
}
.hero-title em { color: var(--orange); font-style: normal; display: block; }

.hero-sub {
  font-size: 16px; color: #666;
  line-height: 1.7; margin-bottom: 36px;
  max-width: 420px;
}

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .06em;
  transition: all var(--transition);
  border: 2px solid transparent;
}
.hero-btn--orange { background: var(--orange); color: var(--white); border-color: var(--orange); }
.hero-btn--orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(249,115,22,.35); }
.hero-btn--ghost { background: transparent; color: #333; border-color: #d0d0d0; }
.hero-btn--ghost:hover { border-color: var(--orange); color: var(--orange); }

.hero-trust { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-trust-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #888; }
.hero-trust-item svg { flex-shrink: 0; }
.trust-div { width: 1px; height: 16px; background: #ddd; }

/* Hero product slider */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }

.product-slider {
  width: 100%;
  max-width: 400px;
  position: relative;
}
.slider-track {
  overflow: hidden;
  border-radius: 12px;
}
.slider-slides {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  user-select: none;
}
.product-slider { cursor: grab; }
.product-slider.is-dragging { cursor: grabbing; }

/* Slide card */
.slide {
  min-width: 100%;
  background: #fff;
  border: 1px solid rgba(180,200,240,.4);
  border-radius: 12px;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 48px rgba(249,115,22,.1), 0 4px 20px rgba(100,140,220,.08);
}

.slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.slide-category {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #bbb;
}
.slide-category-logo {
  height: 18px;
  display: block;
  opacity: .75;
}
.slide-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--orange);
  background: rgba(249,115,22,.12);
  padding: 3px 9px;
  border-radius: 4px;
}

.slide-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  display: block;
  margin-bottom: 20px;
}

.slide-name {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  line-height: 1.4;
  margin-bottom: 4px;
}
.slide-sku {
  font-size: 11px;
  color: #666;
  font-family: monospace;
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.slide-divider {
  height: 1px;
  background: #ebebeb;
  margin-bottom: 16px;
}
.slide-pricing {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.slide-price {
  font-family: var(--font-price);
  font-size: 30px;
  font-weight: 600;
  color: #111;
  line-height: 1;
}
.slide-price-old {
  font-size: 14px;
  color: #ccc;
  text-decoration: line-through;
}
.slide-price-ex {
  font-size: 11px;
  color: #555;
  margin-bottom: 20px;
}
.slide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: #fff;
  color: var(--orange);
  border: 1.5px solid var(--orange);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.slide-btn:hover { background: var(--orange); color: #fff; }
.slide-btn svg { width: 15px; height: 15px; }
.slide-details-link { display: block; text-align: center; margin-top: 8px; font-size: 12.5px; color: var(--gray-400); text-decoration: none; transition: color var(--transition); }
.slide-details-link:hover { color: var(--orange); }

/* Dots als streepjes */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.slider-dot {
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: rgba(100,140,220,.2);
  border: none;
  cursor: pointer;
  transition: background var(--transition), width var(--transition);
  padding: 0;
}
.slider-dot.active {
  background: var(--orange);
  width: 36px;
}

/* ============================================
   USP STRIP
============================================ */
.usp-strip {
  background: var(--white);
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.usp-strip .pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 14px 0;
}
.usp-item {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.usp-icon svg {
  display: block;
  color: var(--orange);
  flex-shrink: 0;
}
.usp-item-text {
  font-size: 12.5px;
  color: #1a1a1a;
  white-space: nowrap;
}
.usp-item-text strong { font-weight: 600; }
.usp-item-text span {
  color: #1a1a1a;
  font-weight: 400;
  margin-left: 3px;
}

/* ============================================
   CATEGORIEËN
============================================ */
.categories { padding: 64px 0 0; }
.section-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.section-hdr h2 {
  font-family: var(--font-heading);
  font-size: 32px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--black);
}
.see-all { font-size: 13px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .06em; }
.see-all:hover { text-decoration: underline; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cat-card {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  height: 320px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.07);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 52px rgba(0,0,0,.13); }

/* Uponor — hoofdmerk accent */
.cat-uponor-card .cat-brand { color: var(--orange); }

/* Orange accent line on hover */
.cat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--orange); z-index: 4;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.cat-card:hover::before { transform: scaleX(1); }

/* Background */
.cat-bg {
  position: absolute; inset: 0;
  transition: transform .4s ease;
}
.cat-card:hover .cat-bg { transform: scale(1.03); }

/* Product images */
.cat-products { position: absolute; inset: 0; pointer-events: none; }
/* Wrapper: alleen positie, geen transform */
.cat-prod-wrap {
  position: absolute;
  transition: transform .65s cubic-bezier(.34,1.56,.64,1);
}
/* Rotatie zit op de img, hover raakt alleen de wrapper */
.cat-prod-wrap img {
  display: block;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.18));
}
/* Combinatie: omhoog + draaien + schalen — elk anders voor organisch gevoel */
.cat-card:hover .cat-prod-wrap:nth-child(1) { transform: translateY(-14px) rotate(-6deg) scale(1.06); }
.cat-card:hover .cat-prod-wrap:nth-child(2) { transform: translateY(-10px) rotate(5deg)  scale(1.05); transition-delay: .07s; }
.cat-card:hover .cat-prod-wrap:nth-child(3) { transform: translateY(-18px) rotate(-4deg) scale(1.04); transition-delay: .12s; }
.cat-card:hover .cat-prod-wrap:nth-child(4) { transform: translateY(-8px)  rotate(7deg)  scale(1.07); transition-delay: .05s; }

/* Subtiele witte fade onderaan — tekst leesbaar zonder zwart blok */
.cat-card .cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.82) 35%,
    rgba(255,255,255,.0) 65%
  );
}

/* Content */
.cat-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 18px; z-index: 2;
}
.cat-tag {
  display: inline-block;
  background: var(--orange); color: var(--white);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 3px 9px; border-radius: 20px;
  margin-bottom: 8px;
}
.cat-brand {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--orange); margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.cat-brand::before { content: ''; width: 14px; height: 2px; background: var(--orange); border-radius: 1px; }
.cat-title {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 800;
  text-transform: uppercase; color: #111;
  line-height: 1.05; margin-bottom: 6px;
}
.cat-desc { font-size: 11.5px; color: #666; margin-bottom: 12px; line-height: 1.45; }
.cat-link {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  padding: 7px 14px;
  background: var(--orange); color: var(--white);
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  border-radius: 6px;
  transition: background .2s;
}
.cat-link:hover { background: #d4880e; }

/* Achtergrond per categorie — kleurloos, producten op de voorgrond */
.cat-uponor,
.cat-grohe,
.cat-bouw,
.cat-ventil { background: #fff; }

/* ============================================
   PRODUCTEN
============================================ */
.products-section { padding: 64px 0; }

.brand-tabs { display: flex; gap: 8px; margin-bottom: 28px; }
.brand-tab {
  padding: 8px 18px; border-radius: 20px;
  font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--gray-200);
  background: var(--white); color: var(--gray-600);
  cursor: pointer; transition: all var(--transition);
}
.brand-tab:hover { border-color: var(--orange); color: var(--orange); }
.brand-tab.active { background: var(--black); border-color: var(--black); color: var(--white); }

/* Slider wrapper */
.prod-slider-wrap { position: relative; }
.prod-slider-viewport {
  overflow-x: clip; /* knipt alleen horizontaal, hover blijft zichtbaar */
  padding: 10px 0;
  margin: -10px 0;
  cursor: grab;
  user-select: none;
}
.prod-slider-viewport:active { cursor: grabbing; }
.prod-grid {
  display: flex;
  gap: 18px;
  transition: transform .45s cubic-bezier(.25,.8,.25,1);
  will-change: transform;
}
.prod-grid .prod-card {
  flex: 0 0 calc(20% - 14.5px);
  min-width: 0;
}

/* Slider navigatie knoppen */
.ps-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 40px; height: 40px;
  background: #fff; border: 1.5px solid #e0e0e0;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  transition: border-color .2s, box-shadow .2s, opacity .2s;
  font-size: 16px; color: #333;
}
.ps-btn:hover { border-color: var(--orange); color: var(--orange); box-shadow: 0 4px 16px rgba(249,115,22,.2); }
.ps-btn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.ps-prev { left: -20px; }
.ps-next { right: -20px; }

/* Slider dots */
.ps-dots { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.ps-dot { width: 6px; height: 6px; border-radius: 50%; background: #ddd; border: none; cursor: pointer; transition: background .2s, width .2s; padding: 0; }
.ps-dot.active { background: var(--orange); width: 20px; border-radius: 3px; }

.prod-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.prod-card:hover {
  border-color: var(--orange);
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
  transform: translateY(-3px);
}

.prod-img {
  aspect-ratio: 1;
  background: var(--gray-50);
  position: relative;
  overflow: hidden;
}
.prod-img img {
  width: 100%; height: 100%;
  object-fit: contain; padding: 16px;
  transition: transform .3s;
}
.prod-card:hover .prod-img img { transform: scale(1.06); }

.prod-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 8px; border-radius: 4px;
}
.prod-badge--sale { background: var(--orange); color: var(--white); }
.prod-badge--oos  { background: var(--gray-400); color: var(--white); }
.prod-badge--new  { background: var(--black); color: var(--white); }

.prod-body { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; }
.prod-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); margin-bottom: 5px; display: block; }
.prod-title {
  font-size: 13px; font-weight: 600; color: var(--black);
  line-height: 1.45; margin-bottom: 6px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.prod-sku { font-size: 11px; color: var(--gray-400); margin-bottom: 10px; font-family: monospace; }
.prod-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.prod-price { font-family: var(--font-price); font-size: 17px; font-weight: 600; color: var(--black-soft); }
.prod-price .old-price { font-size: 12px; color: var(--gray-400); text-decoration: line-through; display: block; line-height: 1; }

.add-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange);
  color: var(--white) !important;
  text-decoration: none !important;
  border: none; border-radius: var(--radius);
  font-size: 11.5px; font-weight: 700;
  padding: 8px 12px; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
  font-family: var(--font-body);
  box-shadow: none;
}
.add-btn:hover { background: var(--orange-dark); transform: scale(1.04); color: var(--white) !important; }
.add-btn--oos { background: var(--gray-200); color: var(--gray-400); cursor: default; }
.add-btn--oos:hover { background: var(--gray-200); transform: none; }

.prod-stock { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.prod-stock::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.prod-stock--in   { color: #22c55e; } .prod-stock--in::before { background: #22c55e; }
.prod-stock--low  { color: #f59e0b; } .prod-stock--low::before { background: #f59e0b; }
.prod-stock--out  { color: var(--red); } .prod-stock--out::before { background: var(--red); }

/* Product card — assortiment stijl (identiek aan assortiment-preview) */
.product-card__stock { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; margin-bottom: 4px; }
.product-card__stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.product-card__stock--in { color: #22c55e; } .product-card__stock--in::before { background: #22c55e; }
.product-card__stock--low { color: #f59e0b; } .product-card__stock--low::before { background: #f59e0b; }
.product-card__brand img { height: 14px; width: auto; object-fit: contain; display: block; margin-bottom: 3px; }
.product-card__staffel { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 4px; font-size: 10.5px; color: #c2410c; font-weight: 700; margin-bottom: 6px; }
.product-card__sku-hp { font-size: 10px; color: var(--gray-600); font-weight: 600; margin-bottom: 3px; }
.product-card__name-hp { font-size: 13px; font-weight: 600; color: var(--black); line-height: 1.35; margin-bottom: 8px; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__price-hp { font-size: 18px; font-weight: 800; color: var(--black); }
.product-card__price-hp em { font-size: 11px; font-weight: 400; color: var(--gray-400); font-style: normal; }
.product-card__price-incl-hp { font-size: 12px; color: var(--gray-400); font-weight: 400; margin-top: 1px; margin-bottom: 10px; }
.product-card__foot-hp { padding: 0 13px 13px; margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.card-foot-row-hp { display: flex; gap: 6px; align-items: center; }
.card-qty-hp { display: flex; align-items: center; border: 1.5px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.card-qty-hp__btn { width: 28px; height: 33px; background: var(--gray-50); border: none; font-size: 15px; cursor: pointer; color: var(--black); display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.card-qty-hp__btn:hover { background: var(--gray-200); }
.card-qty-hp__input { width: 34px; height: 33px; border: none; border-left: 1.5px solid var(--gray-200); border-right: 1.5px solid var(--gray-200); text-align: center; font-size: 13px; font-weight: 700; font-family: var(--font-body); outline: none; color: var(--black); -moz-appearance: textfield; }
.card-qty-hp__input::-webkit-inner-spin-button, .card-qty-hp__input::-webkit-outer-spin-button { -webkit-appearance: none; }
.add-btn-wide-hp { width: 100%; display: flex; align-items: center; justify-content: center; padding: 9px 8px; background: var(--orange); color: var(--white); border: none; border-radius: var(--radius); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: background var(--transition); white-space: nowrap; }
.add-btn-wide-hp:hover { background: var(--orange-dark); }
.add-btn-wide-hp.added { background: #22c55e; }
.doos-btn-hp { width: 100%; background: transparent; border: 1.5px solid var(--gray-200); border-radius: var(--radius); font-size: 11.5px; font-weight: 600; color: var(--gray-600); cursor: pointer; padding: 6px 8px; transition: all var(--transition); font-family: var(--font-body); display: block; }
.doos-btn-hp:hover { border-color: var(--orange); color: var(--orange); background: #fff8ec; }
.doos-btn-hp.added { border-color: #22c55e; color: #22c55e; }
.card-doos-tip-hp { display: none; align-items: center; justify-content: space-between; gap: 6px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600; color: #166534; cursor: pointer; font-family: var(--font-body); transition: background .15s; }
.card-doos-tip-hp__label { flex: 1; }
.card-doos-tip-hp__action { flex-shrink: 0; text-decoration: underline; white-space: nowrap; }
.card-doos-tip-hp:hover { background: #dcfce7; }
.card-doos-tip-hp.visible { display: flex; }
.card-details-link-hp { display: block; width: 100%; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--black); background: none; border: none; cursor: pointer; font-family: var(--font-body); padding: 2px 0; transition: color var(--transition); }
.card-details-link-hp:hover { color: var(--orange); }

/* ============================================
   WEEKACTIE
============================================ */
.wa-section { background: #fff; padding: 40px 0; border-top: 1px solid #ebebeb; }

.wa-teaser {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border: 1.5px solid rgba(249,115,22,.35);
  border-radius: var(--radius); padding: 18px 24px;
  cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition);
  user-select: none;
}
.wa-teaser { box-shadow: 0 6px 28px rgba(249,115,22,.1); }
.wa-teaser:hover { border-color: rgba(249,115,22,.45); box-shadow: 0 8px 32px rgba(249,115,22,.18); }
.wa-teaser-img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.wa-teaser-info { flex: 1; min-width: 0; }
.wa-teaser-eyebrow { font-size: 13px; font-weight: 700; color: #111; letter-spacing: .02em; margin-bottom: 4px; }
.wa-teaser-week { font-size: 13px; font-weight: 500; color: #888; }
.wa-teaser-logo { height: 16px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.wa-teaser-name { font-size: 14px; font-weight: 600; color: #111; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-teaser-price-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wa-teaser-price { font-size: 22px; font-weight: 800; color: #111; letter-spacing: -.01em; }
.wa-teaser-old { font-size: 14px; color: #aaa; text-decoration: line-through; }
.wa-teaser-discount { background: var(--orange); color: #fff; border-radius: 8px; padding: 5px 11px; font-size: 15px; font-weight: 800; white-space: nowrap; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .02em; }
.wa-exp-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebebeb; }
.wa-exp-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: #111; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.wa-exp-cd { display: flex; align-items: center; gap: 6px; }
.wa-exp-cd-label { font-size: 11px; color: #888; margin-right: 2px; }
.wa-exp-cd-item { text-align: center; }
.wa-exp-cd-num { font-size: 18px; font-weight: 800; color: #111; display: block; line-height: 1; font-family: 'Barlow Condensed', sans-serif; }
.wa-exp-cd-lbl { font-size: 8px; color: #aaa; text-transform: uppercase; letter-spacing: .06em; display: block; margin-top: 2px; }
.wa-exp-cd-sep { font-size: 14px; color: #ccc; font-weight: 700; }
.wa-exp-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.wa-exp-badge-pct { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800; color: var(--orange); }
.wa-exp-badge-lbl { font-size: 13px; color: #111; font-weight: 600; }
.wa-teaser-arrow { font-size: 11px; color: #aaa; flex-shrink: 0; transition: transform .25s; margin-left: 4px; }
.wa-teaser[aria-expanded="true"] .wa-teaser-arrow { transform: rotate(180deg); }
.wa-teaser[aria-expanded="true"] { border-radius: var(--radius) var(--radius) 0 0; border-bottom-color: transparent; }

.wa-expanded {
  display: none;
  border: 1.5px solid #e8e8e8; border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 36px 32px;
  grid-template-columns: 300px 1fr;
  gap: 48px; align-items: center;
}
.wa-expanded.open { display: grid; }
.wa-exp-img { display: flex; align-items: center; justify-content: center; height: 220px; }
.wa-exp-img img { max-width: 210px; max-height: 210px; object-fit: contain; filter: drop-shadow(0 12px 32px rgba(0,0,0,.1)); }
.wa-exp-prod-name { font-size: 18px; font-weight: 600; color: #111; line-height: 1.4; margin-bottom: 4px; }
.wa-exp-prod-name .uponor-blue { color: #0072CE; }
.wa-exp-sku { font-size: 11px; color: #888; margin-bottom: 6px; }
.wa-exp-nergens { font-size: 11px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; }
.wa-exp-prices { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.wa-exp-price { font-size: 40px; font-weight: 800; color: #111; letter-spacing: -.02em; }
.wa-exp-old { font-size: 17px; color: #aaa; text-decoration: line-through; }
.wa-exp-save { font-size: 12px; font-weight: 600; color: #22c55e; margin-bottom: 4px; }
.wa-exp-excl { font-size: 11px; color: #777; margin-bottom: 24px; }
.wa-exp-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wa-qty {
  display: flex; align-items: center;
  border: 1.5px solid #e8e8e8; border-radius: 8px; overflow: hidden;
}
.wa-qty button { background: #fafafa; border: none; color: #555; width: 38px; height: 46px; font-size: 18px; cursor: pointer; transition: background .15s, color .15s; }
.wa-qty button:hover { background: var(--orange); color: #fff; }
.wa-qty input { border: none; background: transparent; width: 46px; text-align: center; font-size: 14px; font-weight: 600; color: #111; outline: none; font-family: inherit; }
.wa-cart-btn { background: var(--orange); color: #fff; border: none; padding: 0 32px; height: 46px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: .02em; transition: background .2s; }
.wa-cart-btn:hover { background: #d4880e; }
.wa-prod-link { font-size: 12px; color: #888; text-decoration: none; transition: color var(--transition); }
.wa-prod-link:hover { color: var(--orange); }
.wa-stock { font-size: 11px; color: #555; margin-top: 10px; }
.wa-stock strong { color: #111; font-weight: 600; }

/* ============================================
   SUBCATEGORIE GRID UPONOR
============================================ */
.subcat-section { background: #fff; padding: 64px 0; border-top: 1px solid #ebebeb; }
.subcat-section .hdr { text-align: center; margin-bottom: 40px; }
.subcat-section .hdr-tag {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 10px;
}
.subcat-section .hdr-tag img { height: 20px; display: block; }
.subcat-section .hdr-tag span {
  font-size: 13px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: #555;
}
.subcat-section .hdr-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px; font-weight: 700; text-transform: uppercase;
  color: #111; letter-spacing: .04em;
}
.subcat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.subcat-card {
  border: 1.5px solid #ebebeb; border-radius: 14px;
  padding: 26px 14px 18px;
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: #111; background: #fff;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  position: relative; overflow: hidden;
}
.subcat-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2.5px; background: var(--orange);
  transform: scaleX(0); transition: transform .25s;
}
.subcat-card:hover { border-color: rgba(249,115,22,.4); box-shadow: 0 8px 28px rgba(249,115,22,.13); transform: translateY(-4px); }
.subcat-card:hover::after { transform: scaleX(1); }
.subcat-card img {
  width: 100%; max-width: 150px; height: 130px; object-fit: contain;
  margin-bottom: 16px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.12));
}
.subcat-card:hover img { transform: scale(1.14); }
.subcat-card span {
  font-size: 12.5px; font-weight: 700; text-align: center;
  color: #111; line-height: 1.35;
}
.subcat-card:hover span { color: #F97316; }

/* ── Uponor accessoires: compact langwerpig blok onderaan de subcat-grid ── */
.subcat-card--wide {
  grid-column: 1 / -1;
  justify-self: center;
  width: 320px;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 24px;
}
.subcat-card--wide img {
  height: 100px !important;
  width: auto !important;
  max-width: 100px;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
.subcat-card--wide span {
  text-align: center !important;
  font-size: 13.5px;
  width: auto !important;
  font-weight: 700;
}

@media (max-width: 900px) {
  .subcat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .subcat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Extras sectie ── */
.extras-section { background: #fff; padding: 0 0 72px; }
.extras-section .hdr { text-align: center; margin-bottom: 40px; }
.extras-section .hdr-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px; font-weight: 700; text-transform: uppercase;
  color: #111; letter-spacing: .04em;
}
.extras-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .extras-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .extras-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================
   CATEGORIE MODAL
============================================ */
.cat-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  gap: 14px;
  padding: 5vh 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.cat-overlay.open { opacity: 1; pointer-events: all; }

.cat-modal {
  background: #fff; border-radius: 20px;
  width: 100%; max-width: 860px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.22);
  transform: scale(.96) translateY(14px);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.cat-overlay.open .cat-modal { transform: scale(1) translateY(0); }

.cat-modal-hdr {
  padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #ebebeb; flex-shrink: 0;
}
.cat-modal-hdr-left { display: flex; align-items: center; gap: 14px; }
.cat-modal-hdr-left img { height: 20px; display: block; }
.cat-modal-hdr-sep { width: 1px; height: 18px; background: #ddd; }
.cat-modal-hdr-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px; font-weight: 700; text-transform: uppercase;
  color: #111; letter-spacing: .04em;
}
.cat-modal-hdr-right { display: flex; align-items: center; gap: 16px; }
.cat-modal-fulllink {
  font-size: 12px; color: #333; font-weight: 600;
  text-decoration: none; letter-spacing: .02em;
  transition: color .2s;
}
.cat-modal-fulllink:hover { color: var(--orange); }
.cat-modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: #f4f4f4; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #777; transition: background .18s, color .18s; flex-shrink: 0;
}
.cat-modal-close:hover { background: #111; color: #fff; }

.cat-modal-body { padding: 24px 28px; overflow-y: auto; flex: 1; }

.cat-modal-prods {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.cat-modal-prod {
  border: 1px solid var(--gray-200); border-radius: 12px;
  overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.cat-modal-prod:hover { box-shadow: 0 8px 28px rgba(0,0,0,.10); border-color: rgba(249,115,22,.3); transform: translateY(-2px); }
.cat-modal-prod-img {
  background: var(--gray-50); height: 180px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; border-bottom: 1px solid var(--gray-100); cursor: pointer;
}
.cat-modal-prod-img img { max-height: 148px; max-width: 100%; object-fit: contain; transition: transform var(--transition); }
.cat-modal-prod:hover .cat-modal-prod-img img { transform: scale(1.04); }
.cat-modal-prod-body { padding: 13px 13px 10px; flex: 1; display: flex; flex-direction: column; }
.cat-modal-prod-foot { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 6px; }
.cat-modal-prod-stock { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; margin-bottom: 4px; color: #22c55e; }
.cat-modal-prod-stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.cat-modal-prod-logo { height: 14px; object-fit: contain; display: block; margin-bottom: 3px; align-self: flex-start; }
.cat-modal-prod-name { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: #111; margin-bottom: 3px; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-modal-prod-sku { font-size: 10px; color: var(--gray-600); font-weight: 600; margin-bottom: 5px; }
.cat-modal-prod-staffel { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 4px; font-size: 10px; color: #c2410c; font-weight: 700; margin-bottom: 6px; }
.cat-modal-prod-price { font-size: 17px; font-weight: 800; color: #111; }
.cat-modal-prod-price em { font-size: 11px; font-weight: 400; color: var(--gray-400); font-style: normal; }
.cat-modal-prod-incl { font-size: 11px; color: var(--gray-400); margin-top: 1px; margin-bottom: 6px; }
.cat-modal-qty-row { display: flex; align-items: center; gap: 6px; }
.cat-modal-qty { display: flex; align-items: center; border: 1.5px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.cat-modal-qty__btn { width: 28px; height: 32px; background: var(--gray-50); border: none; font-size: 14px; cursor: pointer; color: #111; display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.cat-modal-qty__btn:hover { background: var(--gray-200); }
.cat-modal-qty__input { width: 32px; height: 32px; border: none; border-left: 1.5px solid var(--gray-200); border-right: 1.5px solid var(--gray-200); text-align: center; font-size: 12px; font-weight: 700; font-family: inherit; outline: none; color: #111; -moz-appearance: textfield; }
.cat-modal-qty__input::-webkit-inner-spin-button, .cat-modal-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }
.cat-modal-prod-btn { flex: 1; background: var(--orange); color: #fff; border: none; border-radius: var(--radius); padding: 9px 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background var(--transition); white-space: nowrap; }
.cat-modal-prod-btn:hover { background: var(--orange-dark); }
.cat-modal-prod-btn.added { background: #22c55e; }
.cat-modal-details-link { display: block; text-align: center; font-size: 11px; font-weight: 600; color: #111; background: none; border: none; cursor: pointer; font-family: inherit; padding: 1px 0; transition: color var(--transition); }
.cat-modal-details-link:hover { color: var(--orange); }

.cat-modal-footer {
  padding: 14px 28px;
  border-top: 1px solid #ebebeb;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.cat-modal-nav {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1.5px solid #d0d0d0; border-radius: 8px;
  padding: 8px 16px; cursor: pointer; font-family: inherit;
  font-size: 12px; color: #333; font-weight: 500;
  transition: border-color .2s, color .2s;
}
.cat-modal-nav:hover { border-color: var(--orange); color: var(--orange); }
.cat-modal-nav:disabled { opacity: .28; pointer-events: none; }
.cat-modal-nav-label { font-size: 10px; color: #888; display: block; margin-bottom: 1px; letter-spacing: .04em; text-transform: uppercase; }
.cat-modal-nav-name { font-size: 12.5px; font-weight: 600; color: inherit; }

/* ── Cart sidebar ── */
.cart-sidebar {
  width: 276px; flex-shrink: 0;
  background: #fff; border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.2);
  max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateX(18px);
  transition: opacity .28s .1s, transform .32s cubic-bezier(.2,.8,.2,1) .1s;
}
.cat-overlay.open .cart-sidebar { opacity: 1; transform: translateX(0); }

.cart-sb-hdr {
  padding: 18px 20px 16px;
  border-bottom: 1px solid #ebebeb;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.cart-sb-hdr-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #111;
}
.cart-sb-badge {
  background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 50%; width: 19px; height: 19px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5);
  transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.cart-sb-badge.show { opacity: 1; transform: scale(1); }

.cart-sb-body { flex: 1; overflow-y: auto; padding: 16px; }

.cart-sb-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
  padding: 32px 0; text-align: center;
  color: #ccc;
}
.cart-sb-empty svg { opacity: .35; }
.cart-sb-empty span { font-size: 12px; font-weight: 500; letter-spacing: .03em; }

.cart-sb-items { display: flex; flex-direction: column; gap: 10px; }

.cart-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 1.5px solid #f0f0f0; border-radius: 10px;
  background: #fff; transition: border-color .18s;
}
.cart-item:hover { border-color: #e0e0e0; }
.cart-item-img {
  width: 44px; height: 44px; flex-shrink: 0;
  background: linear-gradient(135deg, #f5f8fc, #edf1f8);
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
  padding: 5px;
}
.cart-item-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-size: 11px; font-weight: 600; color: #111;
  line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-unit { font-size: 10px; color: #bbb; margin-top: 1px; }
.cart-item-line-price { font-size: 12.5px; font-weight: 700; color: #111; margin-top: 4px; }

.cart-item-controls {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.cart-item-qty {
  display: flex; align-items: center; gap: 0;
  border: 1.5px solid #ebebeb; border-radius: 6px; overflow: hidden;
}
.cart-item-qty button {
  background: #fafafa; border: none; width: 24px; height: 24px;
  font-size: 13px; cursor: pointer; color: #555; line-height: 1;
  transition: background .15s, color .15s;
}
.cart-item-qty button:hover { background: var(--orange); color: #fff; }
.cart-item-qty span {
  font-size: 11px; font-weight: 700; color: #111;
  width: 24px; text-align: center; padding: 0 2px;
}
.cart-item-remove {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: #ccc; transition: color .15s;
}
.cart-item-remove:hover { color: var(--red); }

.cart-sb-footer {
  padding: 14px 20px 18px;
  border-top: 1px solid #ebebeb; flex-shrink: 0;
  display: none;
}
.cart-sb-footer.show { display: block; }
.cart-subtotal-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 3px;
}
.cart-subtotal-label { font-size: 11.5px; color: #888; font-weight: 500; }
.cart-subtotal-amount { font-size: 18px; font-weight: 800; color: #111; }
.cart-excl-note { font-size: 10px; color: #ccc; margin-bottom: 14px; }
.cart-checkout-btn {
  width: 100%; background: var(--orange); color: #fff; border: none;
  border-radius: 9px; padding: 12px 0;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: inherit; letter-spacing: .02em;
  transition: background .18s; margin-bottom: 8px;
}
.cart-checkout-btn:hover { background: var(--orange-dark); }
.cart-continue-link {
  display: block; text-align: center;
  font-size: 11px; color: #bbb; text-decoration: none;
  transition: color .18s;
}
.cart-continue-link:hover { color: #111; }

@media (max-width: 1100px) { .cart-sidebar { display: none; } }

/* ============================================
   B2B BANNER
============================================ */
.b2b-section {
  background: #fff;
  padding: 56px 0 48px;
  border-top: 1px solid #ebebeb;
}
.b2b-section .pg { display: block; }
.b2b-hdr {
  text-align: center; margin-bottom: 48px;
}
.b2b-label {
  display: inline-block;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--orange); margin-bottom: 10px;
}
.b2b-title {
  font-family: var(--font-heading);
  font-size: 32px; font-weight: 700; text-transform: uppercase;
  color: #111; letter-spacing: .04em; margin-bottom: 8px;
}
.b2b-sub {
  font-size: 14px; color: #888; line-height: 1.6; max-width: 480px; margin: 0 auto;
}
.b2b-perks {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 40px;
}
.b2b-perk {
  border: 1.5px solid #ebebeb; border-radius: 14px;
  padding: 24px 20px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.b2b-perk:hover { border-color: rgba(249,115,22,.35); box-shadow: 0 6px 20px rgba(249,115,22,.08); }
.b2b-perk--gift {
  border-color: rgba(249,115,22,.3);
  background: linear-gradient(135deg, #fffdf7, #fff9ec);
  position: relative;
}
.b2b-perk--gift::before {
  content: '✦ Loyaliteit';
  position: absolute; top: -1px; left: 20px;
  background: var(--orange); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 0 0 6px 6px;
}
.b2b-perk-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(249,115,22,.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.b2b-perk-icon svg { color: var(--orange); }
.b2b-perk strong { font-size: 13.5px; font-weight: 700; color: #111; line-height: 1.35; }
.b2b-perk span { font-size: 12px; color: #999; line-height: 1.5; }
.b2b-cta-wrap { text-align: center; }
.b2b-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: #fff;
  border: 1.5px solid var(--orange);
  font-weight: 700; font-size: 13.5px;
  padding: 12px 32px; border-radius: 9px;
  transition: background .18s, color .18s;
}
.b2b-cta:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.b2b-login { display: block; margin-top: 10px; font-size: 12px; color: #555; }
.b2b-login a { color: #111; font-weight: 600; text-decoration: underline; }
.b2b-login a:hover { color: var(--orange); }
@media (max-width: 900px) { .b2b-perks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .b2b-perks { grid-template-columns: 1fr; } }

/* ============================================
   MERKEN STRIP
============================================ */
.brands-section { padding: 52px 0; background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.brands-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gray-400); text-align: center; margin-bottom: 28px; }
.brands-row { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.brand-logo {
  font-family: var(--font-heading);
  font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gray-400);
  transition: color var(--transition);
  cursor: default; padding: 8px 0;
}
.brand-logo:hover { color: var(--black); }
.brand-logo--uponor { color: #d32f2f; }
.brand-logo--grohe  { color: #003087; }

/* ============================================
   REVIEW SECTIE
============================================ */
.reviews-section { padding: 48px 0 72px; background: #fff; border-top: 1px solid #ebebeb; }

.reviews-hdr { text-align: center; margin-bottom: 40px; }

.reviews-tp-bar {
  display: inline-flex; align-items: center; gap: 14px;
  background: #f9f9f9; border: 1.5px solid #e8e8e8; border-radius: 12px;
  padding: 12px 22px; margin-bottom: 20px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.reviews-tp-bar:hover { border-color: #00b67a; box-shadow: 0 4px 16px rgba(0,182,122,.1); }
.reviews-tp-logo { height: 20px !important; width: auto !important; max-width: 120px !important; display: block; }
.reviews-tp-sep { width: 1px; height: 20px; background: #ddd; flex-shrink: 0; }
.reviews-tp-score { font-size: 20px; font-weight: 800; color: #111; line-height: 1; }
.reviews-tp-stars { display: flex; gap: 2px; }
.tp-star {
  width: 20px; height: 20px; background: #00b67a;
  display: flex; align-items: center; justify-content: center;
}
.tp-star-half { background: linear-gradient(90deg, #00b67a 50%, #ddd 50%); }
.tp-star svg { fill: #fff; width: 12px; height: 12px; }
.reviews-tp-meta { text-align: left; }
.reviews-tp-label { font-size: 12px; font-weight: 700; color: #111; display: block; line-height: 1.2; }
.reviews-tp-count { font-size: 10.5px; color: #aaa; }

.reviews-hdr-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px; font-weight: 700; text-transform: uppercase;
  color: #111; letter-spacing: .04em;
}

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.review-card {
  background: #fff; border: 1.5px solid #ebebeb; border-radius: 14px;
  padding: 22px; display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
}
.review-card:hover { border-color: #c8c8c8; box-shadow: 0 4px 18px rgba(0,0,0,.07); }

.review-card-stars { display: flex; gap: 2px; margin-bottom: 14px; }
.review-card-star {
  width: 18px; height: 18px; background: #00b67a;
  display: flex; align-items: center; justify-content: center;
}
.review-card-star svg { fill: #fff; width: 11px; height: 11px; }

.review-text { font-size: 13.5px; color: #444; line-height: 1.65; margin-bottom: 18px; flex: 1; }
.review-author { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.review-name strong { display: block; font-size: 12.5px; font-weight: 700; color: #111; }
.review-name span { font-size: 10.5px; color: #bbb; }
.review-tp-source {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: #bbb; margin-top: 2px;
}
.review-tp-dot { width: 4px; height: 4px; background: #00b67a; border-radius: 50%; }

.reviews-footer { text-align: center; }
.reviews-tp-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #555;
  border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 9px 18px;
  text-decoration: none; transition: border-color .2s, color .2s;
}
.reviews-tp-link:hover { border-color: #00b67a; color: #00b67a; }
.reviews-tp-link svg { color: #00b67a; }

/* ============================================
   NEWSLETTER / CTA BALK
============================================ */
.cta-bar {
  background: #fff;
  padding: 52px 0;
  border-top: 1px solid #ebebeb;
}
.cta-bar .pg { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-bar-label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px;
}
.cta-bar-text h2 {
  font-family: var(--font-heading);
  font-size: 28px; font-weight: 800; text-transform: uppercase;
  color: #111; margin-bottom: 6px; letter-spacing: .02em;
}
.cta-bar-text p { font-size: 14px; color: #666; line-height: 1.5; }
.cta-bar-form { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-bar-form input {
  height: 46px; padding: 0 18px;
  border: 1.5px solid #ddd; border-radius: 8px;
  background: #f9f9f9; color: #111;
  font-size: 14px; font-family: var(--font-body);
  width: 260px; outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.cta-bar-form input::placeholder { color: #bbb; }
.cta-bar-form input:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px rgba(249,115,22,.08); }
.cta-bar-form button {
  height: 46px; padding: 0 24px;
  background: var(--orange); color: #fff;
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  border: none; border-radius: 8px; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.cta-bar-form button:hover { background: var(--orange-dark); transform: translateY(-1px); }

/* ============================================
   FOOTER
============================================ */
.site-footer {
  background: #111;
  position: relative;
  overflow: visible;
}

/* Mascot — links, steekt boven footer uit */
.footer-mascot-gap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 220px;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  z-index: 2;
}
.footer-mascot {
  display: block;
  height: 340px;
  width: auto;
  filter: drop-shadow(-2px 0 18px rgba(0,0,0,.3));
}

.footer-top {
  padding: 40px 0 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: visible;
}
.footer-top .pg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 48px;
  align-items: start;
}

/* Logo & info kolom */
.footer-logo {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 800; text-transform: uppercase;
  color: var(--white); margin-bottom: 8px; letter-spacing: .02em;
}
.footer-logo em { color: var(--orange); font-style: normal; }
.footer-tagline {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255,255,255,.25);
  margin-bottom: 16px;
}
.footer-desc {
  font-size: 12.5px; color: rgba(255,255,255,.55);
  line-height: 1.75; margin-bottom: 20px;
}
.footer-contact a {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.65); font-size: 12.5px;
  margin-bottom: 7px; transition: color var(--transition);
  text-decoration: none;
}
.footer-contact a:hover { color: var(--orange); }
.footer-contact svg { flex-shrink: 0; opacity: .6; }

/* Divider oranje accent */
.footer-divider {
  width: 28px; height: 2px;
  background: var(--orange); border-radius: 1px;
  margin-bottom: 18px;
}

/* Link kolommen */
.footer-col h4 {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(255,255,255,.5);
  margin-bottom: 14px;
}
.footer-col a {
  display: block; font-size: 13px;
  color: rgba(255,255,255,.65); padding: 3.5px 0;
  transition: color var(--transition); text-decoration: none;
}
.footer-col a:hover { color: var(--white); padding-left: 4px; }

/* Bottom bar */
.footer-bottom { padding: 16px 0; }
.footer-bottom .pg {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer-bottom-left { font-size: 11.5px; color: rgba(255,255,255,.2); }
.footer-bottom-left a { color: rgba(255,255,255,.35); text-decoration: none; transition: color .2s; }
.footer-bottom-left a:hover { color: var(--orange); }
.payment-methods { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 5px;
  overflow: hidden;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  padding: 3px 6px;
}
.pay-badge img { display: block; height: 26px; width: auto; max-width: none; }

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1200px) {
  .prod-grid .prod-card { flex: 0 0 calc(25% - 13.5px); }
}
@media (max-width: 1024px) {
  .header-top .pg { grid-template-columns: 180px 1fr auto; }
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .b2b-section .pg { grid-template-columns: 1fr; }
  .tier-card { max-width: 100%; }
  .footer-top .pg { grid-template-columns: 1fr 1fr; }
  .footer-mascot-gap { display: none; }
  .footer-mascot { display: none; }
}
@media (max-width: 768px) {
  .promo-bar .pg { justify-content: flex-start; overflow-x: auto; white-space: nowrap; }
  .header-top .pg {
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo actions" "search search";
    row-gap: 11px; gap: 14px;
  }
  .header-top .pg > .logo { grid-area: logo; }
  .header-top .pg > .header-actions { grid-area: actions; }
  .header-search { display: block; grid-area: search; }
  .header-search input { height: 42px; }
  .hero .pg { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .usp-strip .pg { flex-wrap: wrap; gap: 12px 0; padding: 12px 0; }
  .usp-item { flex: 1 1 50%; white-space: nowrap; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer-top .pg { grid-template-columns: 1fr; }
  .footer-mascot-gap { display: none; }
  .cta-bar .pg { flex-direction: column; }
}

/* Animate on scroll */
[data-animate] { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
[data-animate].visible { opacity: 1; transform: none; }

/* ---- PRODUCT MODAL ---- */
.prod-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
.prod-overlay.open { display: flex; }
.prod-modal { background: var(--white); border-radius: 16px; width: 100%; max-width: 900px; max-height: 92vh; overflow-y: auto; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,.28); font-family: var(--font-body); }
.prod-modal__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--gray-200); background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; z-index: 1; color: var(--gray-600); transition: all var(--transition); font-family: var(--font-body); }
.prod-modal__close:hover { background: var(--gray-100); }
.prod-modal__layout { display: grid; grid-template-columns: 340px 1fr; }
.prod-modal__img-col { background: var(--gray-50); border-radius: 16px 0 0 16px; display: flex; align-items: center; justify-content: center; padding: 40px; border-right: 1px solid var(--gray-100); min-height: 400px; position: relative; }
.prod-modal__img-col img { max-width: 100%; max-height: 280px; object-fit: contain; }
.prod-modal__info { padding: 30px 30px 26px; display: flex; flex-direction: column; }
.prod-modal__brand { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.prod-modal__brand--uponor { color: var(--uponor); }
.prod-modal__brand--grohe { color: var(--grohe); }
.prod-modal__brand img { height: 20px; width: auto; object-fit: contain; display: block; }
.prod-modal__sku { font-size: 11px; color: var(--gray-600); font-weight: 600; margin-bottom: 6px; }
.prod-modal__name { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; text-transform: uppercase; color: var(--black); line-height: 1.2; margin-bottom: 6px; }
.prod-modal__stock { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; margin-bottom: 14px; }
.prod-modal__stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.prod-modal__price { font-size: 30px; font-weight: 800; color: var(--black); margin-bottom: 4px; }
.prod-modal__price em { font-size: 13px; font-weight: 400; color: var(--gray-400); font-style: normal; }
.prod-modal__price-incl { font-size: 13px; color: var(--gray-400); margin-bottom: 12px; }
.prod-modal__desc { font-size: 13px; color: var(--gray-600); line-height: 1.65; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-100); margin-top: 10px; }
.modal-bulk__title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); margin-bottom: 7px; }
.modal-bulk__table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 16px; }
.modal-bulk__table tr { border-bottom: 1px solid var(--gray-100); }
.modal-bulk__table td { padding: 5px 6px; color: var(--gray-600); }
.modal-bulk__table td:nth-child(2) { font-weight: 700; color: var(--black); }
.modal-bulk__table td:nth-child(3) { text-align: right; font-weight: 700; color: var(--green); }
.modal-bulk__table tr.mbulk-active td { background: #f2fbf6; }
.modal-add-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.modal-qty { display: flex; align-items: center; border: 1.5px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; height: 44px; flex-shrink: 0; }
.modal-qty__btn { width: 38px; height: 100%; background: var(--gray-50); border: none; font-size: 18px; cursor: pointer; color: var(--black); display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.modal-qty__btn:hover { background: var(--gray-200); }
.modal-qty__input { width: 46px; height: 100%; border: none; border-left: 1.5px solid var(--gray-200); border-right: 1.5px solid var(--gray-200); text-align: center; font-size: 15px; font-weight: 700; font-family: var(--font-body); outline: none; color: var(--black); -moz-appearance: textfield; }
.modal-qty__input::-webkit-inner-spin-button, .modal-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.modal-add-btn { flex: 1; height: 44px; background: var(--orange); color: var(--white); border: none; border-radius: var(--radius); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-body); display: flex; align-items: center; justify-content: center; gap: 7px; transition: background var(--transition); }
.modal-add-btn:hover { background: var(--orange-dark); }
.modal-add-btn.added { background: var(--green); }
.modal-doos-btn { width: 100%; background: transparent; border: 1.5px solid var(--gray-200); border-radius: var(--radius); font-size: 12px; font-weight: 600; color: var(--gray-600); cursor: pointer; padding: 10px; transition: all var(--transition); font-family: var(--font-body); }
.modal-doos-btn:hover { border-color: var(--orange); color: var(--orange); background: #fff8ec; }
.modal-full-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--gray-400); transition: color var(--transition); }
.modal-full-link:hover { color: var(--orange); }
.modal-tip { display: none; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.modal-tip--staffel { background: #fff7ed; border: 1px solid #fed7aa; color: #c2410c; }
.modal-tip--doos { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
/* Make prod-card image area cursor pointer */
.prod-img { cursor: pointer; }
.prod-title { cursor: pointer; }
.prod-title:hover { color: var(--orange); }

/* ============================================
   PRODUCT CARDS — shop / categorie pagina's
   ============================================ */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Base card wrapper (class zit op <li> via wc_product_class) */
.product-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.product-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
  border-color: rgba(249,115,22,.3);
  transform: translateY(-2px);
}

/* --- Afbeelding --- */
.pc-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  height: 210px;
  padding: 12px;
  border-bottom: 1px solid var(--gray-100);
  text-decoration: none;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.pc-img img {
  max-height: 178px;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--transition);
}
.product-card:hover .pc-img img { transform: scale(1.04); }

/* --- Body --- */
.pc-body {
  padding: 11px 13px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Voorraad */
.pc-stock {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1px;
}
.pc-stock::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pc-stock--in  { color: #22c55e; } .pc-stock--in::before  { background: #22c55e; }
.pc-stock--out { color: var(--red); } .pc-stock--out::before { background: var(--red); }
.pc-stock--low { color: #f59e0b; } .pc-stock--low::before { background: #f59e0b; }
.pc-old-price  { font-size: 12px; color: var(--gray-400); text-decoration: line-through; margin-right: 3px; }

/* Merk logo */
.pc-brand-logo {
  height: 14px !important;
  width: auto !important;
  max-width: 90px !important;
  object-fit: contain !important;
  display: block !important;
  margin-bottom: 3px;
  align-self: flex-start;
}

/* Producttitel */
.pc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.4;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1px;
}
.pc-title:hover { color: var(--orange); }

/* Art. nummer */
.pc-sku {
  font-size: 10px;
  color: var(--gray-600);
  font-weight: 600;
  font-family: var(--font-body);
  margin-bottom: 3px;
}

/* Staffelkorting badge */
.pc-staffel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 4px;
  font-size: 11px;
  color: #c2410c;
  font-weight: 700;
  margin-bottom: 2px;
  align-self: flex-start;
  white-space: nowrap;        /* "… 10 st." nooit op een 2e regel */
  max-width: 100%;
}
/* Mobiel: badge iets compacter zodat de hele zin op 1 regel past in de smalle kaart */
@media (max-width: 560px) {
  .pc-staffel { font-size: 9.5px; padding: 3px 6px; gap: 3px; }
  .pc-staffel svg { width: 9px; height: 9px; }
}

/* Staffel-nudge = klikbare doos-CTA ONDER de knoppen (klik = volle doos toevoegen).
   JS past tekst/kleur aan: standaard oranje "voeg doos toe", bij "bijna" feller, bij "actief" groen. */
.pc-staffel-nudge {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #b45309;
  transition: background .15s, border-color .15s, transform .08s;
}
.pc-staffel-nudge:hover { background: #ffedd5; border-color: #fdba74; }
.pc-staffel-nudge:active { transform: scale(.98); }
.pc-staffel-nudge b { font-weight: 800; color: #c2410c; }
/* "Je bent er bijna" — feller oranje */
.pc-staffel-nudge.pc-nudge-near { background: #ffedd5; border-color: #fb923c; color: #c2410c; }
.pc-staffel-nudge.pc-nudge-near:hover { background: #fed7aa; }
/* "Doosprijs actief" — groen */
.pc-staffel-nudge.pc-nudge-active { background: #ecfdf5; border-color: #a7f3d0; color: #15803d; }
.pc-staffel-nudge.pc-nudge-active:hover { background: #d1fae5; }
/* Prijs zakt zichtbaar bij doosprijs */
.product-card.pc-staffel-on .pc-price-excl,
.prod-card.pc-staffel-on .pc-price-excl { color: #15803d; }

/* Prijs excl. BTW */
.pc-price-excl {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  line-height: 1.15;
  margin-top: 4px;
  margin-bottom: 0;
  order: 1;
}
.pc-price-excl__label {
  font-size: 11px;
  font-weight: 400;
  color: var(--gray-400);
  font-style: normal;
}
.pc-price-excl .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }

/* Prijs incl. BTW */
.pc-price-incl {
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 400;
  margin-top: 1px;
  margin-bottom: 0;
  display: block !important;
  order: 2;
}
.pc-price-incl .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }

/* BTW-voorkeur incl: maak de incl-prijs prominent en de excl-prijs klein (op alle kaarten) */
body.btw-incl .pc-price-excl { font-size: 12px; font-weight: 400; color: var(--gray-400); margin-top: 1px; order: 2; }
body.btw-incl .pc-price-incl { font-size: 18px; font-weight: 800; color: var(--black); margin-top: 4px; order: 1; }

/* ═══════════════════════════════════════════════════════════════
   Moderne, clean refresh — homepage productkaart (.prod-card)
   Hairline-rand + zachte gelaagde schaduw, rustige neutrale hover,
   grotere ronding, verfijnde badge en wat meer lucht.
   ═══════════════════════════════════════════════════════════════ */
.prod-card {
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.prod-card:hover {
  border-color: var(--gray-200);
  box-shadow: 0 14px 32px -12px rgba(16, 24, 40, .18);
  transform: translateY(-4px);
}
/* Beeldvlak: zacht verloop i.p.v. vlak grijs, geen harde scheidingslijn */
.prod-card .pc-img {
  background: linear-gradient(180deg, #fafbfc 0%, #f3f4f6 100%);
  border-bottom: none;
  padding: 16px;
}
.prod-card .pc-img img { mix-blend-mode: multiply; }
/* Eén consistente zijmarge (16px) voor beeld, tekst én knoppen — alles lijnt uit */
.prod-card .pc-body { padding: 14px 16px 4px; gap: 4px; }
.prod-card .pc-title { font-size: 13.5px; line-height: 1.42; min-height: 2.84em; }
.prod-card .pc-sku { letter-spacing: .01em; }
/* Verfijnde, zwevende badge */
.prod-card .prod-badge {
  top: 12px; left: 12px;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 9.5px;
  letter-spacing: .09em;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .14);
}
.prod-card .prod-badge--new { background: rgba(17, 24, 39, .92); }
/* "Details bekijken" subtieler zodat de oranje CTA de duidelijke hoofdactie blijft */
.prod-card .pc-btn--details {
  font-size: 12px;
  color: var(--gray-600) !important;
  font-weight: 600;
}
.prod-card .pc-btn--details:hover { color: var(--orange) !important; }

/* --- Footer --- */
.pc-foot {
  padding: 0 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
}

/* Cart form wrapper */
.pc-cart-form { display: flex; flex-direction: row; align-items: center; gap: 6px; }

/* Aantal / qty rij */
.pc-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
}
.pc-qty__btn {
  width: 30px; height: 34px;
  background: var(--gray-50);
  border: none;
  font-size: 15px;
  cursor: pointer;
  color: var(--black);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
  flex-shrink: 0;
  font-family: var(--font-body);
}
.pc-qty__btn:hover { background: var(--gray-200); }
.pc-qty__input {
  width: 38px; height: 34px;
  border: none;
  border-left: 1.5px solid var(--gray-200);
  border-right: 1.5px solid var(--gray-200);
  text-align: center;
  font-size: 13px; font-weight: 700;
  font-family: var(--font-body);
  outline: none;
  color: var(--black);
  -moz-appearance: textfield;
}
.pc-qty__input::-webkit-inner-spin-button,
.pc-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }
.pc-qty__label { display: none; }

/* ── iOS auto-zoom voorkomen ──
   Safari op iPhone zoomt automatisch in zodra een invoerveld met lettergrootte < 16px
   focus krijgt — en zoomt daarna NIET meer uit. Daardoor lijkt de pagina ingezoomd en
   landen taps op knoppen verkeerd. Op touch-schermen alle invoervelden minimaal 16px
   geven lost dit volledig op, zónder pinch-zoom op productfoto's uit te schakelen. */
@media (max-width: 768px) {
  input[type="number"], input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="search"], input[type="url"], select, textarea,
  .pc-qty__input, .prod-card .pc-foot .pc-qty__input, .prod-qty-input, .qty-input,
  .card-qty-hp__input, .cat-modal-qty__input, .modal-qty__input, .wa-qty input {
    font-size: 16px !important;
  }
}

/* Knoppen */
.pc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
  text-align: center;
  border: none;
  box-sizing: border-box;
}
.pc-btn--cart {
  background: var(--orange);
  color: var(--white) !important;
  gap: 6px;
  font-size: 12.5px;
  padding: 9px 8px;
  flex: 1;
}
.pc-btn--cart:hover { background: var(--orange-dark); }
.pc-btn--details {
  background: transparent;
  color: #374151 !important;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 0;
}
.pc-btn--details:hover { color: var(--orange) !important; }

/* ── Homepage-kaarten ("Meest verkocht" / slider) ──
   Op mobiel (brede kaarten): teller naast de oranje knop.
   Op desktop (smalle 5-koloms slider): gestapeld, knop op volle breedte
   zodat "In winkelwagen" niet wordt afgekapt. */
.prod-card .pc-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 16px;
}
/* Footer: teller + winkelmand-ICOON op één rij; daaronder de doos-CTA en details. */
.prod-card .pc-cart-form { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
.prod-card .pc-foot .pc-qty {
  flex: 1 1 auto;
  width: auto;
  height: 42px;
  align-items: stretch;
}
.prod-card .pc-foot .pc-qty__btn { height: auto; width: 44px; flex: 0 0 44px; font-size: 17px; }
.prod-card .pc-foot .pc-qty__input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: auto;
  font-size: 16px;
  font-weight: 700;
}
.prod-card .pc-foot .pc-btn--cart-icon {
  flex: 0 0 54px;
  width: 54px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-card .pc-foot .pc-btn--cart-icon svg { width: 19px; height: 19px; }
.prod-card .pc-foot .pc-btn--details {
  width: 100%;
}

/* Productkaart op mobiel: qty-stepper en knop onder elkaar i.p.v. samengedrukt naast elkaar */
@media (max-width: 600px) {
  .pc-cart-form { flex-direction: column; align-items: stretch; }
  .pc-qty { width: 100%; }
  .pc-qty__input { flex: 1 1 0; width: auto; min-width: 0; }
  .pc-btn--cart { width: 100%; white-space: nowrap; }
}

/* ul.products WooCommerce override — alle kolom-variants */
ul.products,
ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products.columns-3,
.woocommerce-page ul.products.columns-3 {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  float: none !important;
}
ul.products::before, ul.products::after,
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  clear: none !important;
}

/* WooCommerce catalog ordering */
.woocommerce-ordering select { border: 1.5px solid var(--gray-200); border-radius: var(--radius); padding: 6px 10px; font-size: 13px; font-family: var(--font-body); color: var(--black); }

/* Verberg WooCommerce extra elementen in product cards */
.product-card .onlinego-bulk-pricing { display: none !important; }
.product-card .woocommerce-loop-product__link { display: contents; }

/* Verberg WooCommerce-geïnjecteerde elementen in homepage prod-card */
.prod-card .onlinego-bulk-pricing { display: none !important; }
.prod-card form.cart { display: none !important; }
.prod-card .quantity { display: none !important; }
.prod-card .added_to_cart { display: none !important; }
.prod-card .woocommerce-product-details__short-description { display: none !important; }
.prod-card span.woocommerce-Price-suffix { display: none !important; }
.prod-card a.woocommerce-LoopProduct-link:not(.prod-title) { display: none !important; }

/* Doos knop in product card */
.pc-btn--doos {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
  font-family: var(--font-body);
  transition: all var(--transition);
  text-align: center;
}
.pc-btn--doos:hover { border-color: var(--orange); color: var(--orange); }
.pc-doos-form { width: 100%; }

/* ============================================================
   CATPOP — CATEGORIE POPUP
   ============================================================ */

/* ── Catpop overlay ── */
.catpop-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 5vh 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  overflow-y: auto;
}
.catpop-overlay.open { opacity: 1; pointer-events: all; }

/* ── Modal (product paneel) ── */
.catpop-modal {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  overflow: hidden;
  transform: scale(.96) translateY(14px);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  flex-shrink: 0;
}
.catpop-overlay.open .catpop-modal { transform: scale(1) translateY(0); }

.catpop-panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.catpop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 28px;
  border-bottom: 1px solid #ebebeb;
  flex-shrink: 0;
}
.catpop-header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.catpop-header-logo {
  height: 20px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.catpop-header-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #ddd;
  flex-shrink: 0;
}
.catpop-header-catname {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catpop-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.catpop-header-fullcat {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  letter-spacing: .02em;
  transition: color .2s;
  white-space: nowrap;
}
.catpop-header-fullcat:hover { color: var(--orange); }
.catpop-close-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f4f4f4;
  border: none;
  cursor: pointer;
  color: #777;
  font-size: 18px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .18s, color .18s;
}
.catpop-close-btn:hover { background: #111; color: #fff; }

/* ── Producten grid ── */
.catpop-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 28px;
  transition: opacity .18s ease;
}
.catpop-products-ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.catpop-products-ul li.product-card {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
/* Product card overrides in catpop */
.catpop-products-ul li.product-card .pc-img { height: 180px !important; padding: 12px !important; }
.catpop-products-ul li.product-card .pc-img img { max-height: 148px !important; }
.catpop-products-ul li.product-card .pc-body { padding: 13px 13px 8px !important; gap: 2px !important; }
.catpop-products-ul li.product-card .pc-foot { padding: 0 13px 13px !important; gap: 6px !important; }
.catpop-products-ul li.product-card .pc-title { font-size: 12.5px !important; -webkit-line-clamp: 2 !important; }
.catpop-products-ul li.product-card .pc-brand-logo { height: 14px !important; max-width: 70px !important; align-self: flex-start !important; display: block !important; }
.catpop-products-ul li.product-card .pc-sku { font-family: inherit !important; font-size: 10px !important; color: #555 !important; }
/* "In winkelwagen" naast qty (inline) */
.catpop-products-ul li.product-card .pc-cart-form { flex-direction: row !important; align-items: center !important; gap: 6px !important; }
.catpop-products-ul li.product-card .pc-btn--cart { flex: 1 !important; padding: 9px 8px !important; font-size: 12px !important; white-space: nowrap !important; }
.catpop-products-ul li.product-card .pc-qty__label { display: none !important; }
/* Spatie tussen € en bedrag */
.catpop-products-ul .woocommerce-Price-currencySymbol::after { content: '\00a0'; }
.catpop-products-ul li.product-card .pc-staffel { font-size: 10px !important; padding: 2px 7px !important; }
.catpop-products-ul li.product-card .pc-price-excl { font-size: 17px !important; }
.catpop-products-ul li.product-card .pc-qty__btn { width: 28px !important; height: 32px !important; }
.catpop-products-ul li.product-card .pc-qty__input { width: 32px !important; height: 32px !important; }
.catpop-no-products { color: var(--gray-400); font-size: 14px; padding: 40px 0; text-align: center; }

/* Loading spinner */
.catpop-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 60px 0; }
.catpop-loading span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--orange);
  animation: catpopBounce .9s infinite ease-in-out both;
}
.catpop-loading span:nth-child(1) { animation-delay: -.32s; }
.catpop-loading span:nth-child(2) { animation-delay: -.16s; }
@keyframes catpopIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes catpopBounce {
  0%, 80%, 100% { transform: scale(0); opacity: .4; }
  40%           { transform: scale(1); opacity: 1; }
}

/* ── Navigatie ── */
.catpop-nav {
  padding: 14px 28px;
  border-top: 1px solid #ebebeb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.catpop-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid #d0d0d0;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  color: #333;
  font-weight: 500;
  line-height: 1.2;
  transition: border-color .2s, color .2s;
}
.catpop-nav-btn:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.catpop-nav-btn:disabled { opacity: .28; cursor: default; pointer-events: none; }
.catpop-nav-label {
  display: block;
  font-size: 10px;
  color: #888;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 2px;
}
.catpop-nav-btn strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}

/* ── Mini cart (apart zwevend kaartje) ── */
.catpop-cart-panel {
  width: 276px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.2);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .28s .1s, transform .32s cubic-bezier(.2,.8,.2,1) .1s;
  align-self: flex-start;
}
.catpop-overlay.open .catpop-cart-panel { opacity: 1; transform: translateX(0); }

.catpop-cart-hdr {
  padding: 18px 20px 16px;
  border-bottom: 1px solid #ebebeb;
  flex-shrink: 0;
}
.catpop-cart-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #111;
}
.catpop-cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}
.catpop-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 0;
  text-align: center;
  color: #ccc;
}
.catpop-cart-empty svg { opacity: .5; }
.catpop-cart-empty span { font-size: 12px; font-weight: 500; letter-spacing: .03em; color: #aaa; }
.catpop-cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.catpop-cart-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 32px 10px 10px;
  border: 1.5px solid #f0f0f0;
  border-radius: 10px;
  background: #fff;
  transition: border-color .18s;
}
.catpop-cart-item:hover { border-color: #e0e0e0; }
.catpop-cart-item img {
  width: 44px; height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--gray-50);
  border-radius: 7px;
  padding: 4px;
  border: none;
}
.catpop-cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.catpop-cart-item-name {
  font-size: 11px;
  font-weight: 600;
  color: #111;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catpop-cart-item-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.catpop-qty-btn {
  background: #fafafa;
  border: none;
  width: 24px; height: 24px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  color: #555;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s, color .15s;
}
.catpop-qty-btn:hover { background: var(--orange); color: #fff; }
.catpop-item-qty-num {
  font-size: 11px;
  font-weight: 700;
  color: #111;
  min-width: 20px;
  text-align: center;
}
.catpop-cart-item-linetotal {
  font-size: 12.5px;
  font-weight: 700;
  color: #111;
  margin-left: auto;
}
.catpop-remove-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  background: #f4f4f5;
  border: none;
  cursor: pointer;
  width: 20px; height: 20px;
  border-radius: 6px;
  padding: 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color .15s, background .15s;
}
.catpop-remove-btn:hover { color: #fff; background: #ef4444; }

/* Gratis verzending balk */
.catpop-shipping-bar {
  margin-top: 10px;
  padding: 9px 10px;
  background: var(--gray-50);
  border-radius: 8px;
  border: 1px solid var(--gray-100);
}
.catpop-shipping-bar-text { font-size: 11px; color: var(--gray-500); margin-bottom: 6px; }
.catpop-shipping-bar-text strong { color: var(--black); }
.catpop-shipping-bar-track { height: 4px; background: var(--gray-200); border-radius: 99px; overflow: hidden; }
.catpop-shipping-bar-fill { height: 100%; background: var(--orange); border-radius: 99px; transition: width .4s ease; }
.catpop-shipping-bar--free { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #16a34a; font-weight: 500; }
.catpop-shipping-bar--free strong { font-weight: 700; }

.catpop-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ebebeb;
  font-size: 11.5px;
  color: #888;
  font-weight: 500;
}
.catpop-cart-total strong { font-size: 18px; font-weight: 800; color: #111; }
.catpop-cart-checkout {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: var(--orange);
  color: var(--white) !important;
  border-radius: 9px;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  letter-spacing: .02em;
  font-family: inherit;
  transition: background .18s;
}
.catpop-cart-checkout:hover { background: var(--orange-dark); }

/* ============================================
   PRODUCTPAGINA
============================================ */
.product-page { padding: 40px 0 80px; }
.product-page > .pg { display: grid; grid-template-columns: 1fr 460px; gap: 60px; align-items: start; }

/* Breadcrumb */
.product-breadcrumb { padding: 16px 0; border-bottom: 1px solid var(--gray-100); }
.product-breadcrumb .pg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-400); }
.product-breadcrumb a { color: var(--gray-400); transition: color var(--transition); }
.product-breadcrumb a:hover { color: var(--orange); }
.product-breadcrumb-sep { font-size: 11px; }
.product-breadcrumb span:last-child { color: var(--black); font-weight: 500; }

/* Gallery */
.prod-gallery { position: sticky; top: 140px; }
.prod-gallery__main {
  aspect-ratio: 1;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  cursor: zoom-in;
}
.prod-gallery__main img { width: 85%; height: 85%; object-fit: contain; transition: transform .3s; }
.prod-gallery__main:hover img { transform: scale(1.06); }
.prod-gallery__thumbs { display: flex; gap: 10px; }
.prod-gallery__thumb {
  width: 72px; height: 72px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--gray-50);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition);
  flex-shrink: 0;
}
.prod-gallery__thumb:hover { border-color: var(--gray-400); }
.prod-gallery__thumb.active { border-color: var(--orange); }
.prod-gallery__thumb img { width: 80%; height: 80%; object-fit: contain; }

/* Product meta */
.prod-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.prod-brand { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-400); }
.prod-brand-logo { height: 18px !important; max-height: 18px !important; width: auto !important; max-width: 120px !important; display: block; opacity: .75; }
.prod-badge { position: static; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 20px; }
.prod-badge--stock { background: #e8f5e9; color: var(--green); }
.prod-badge--low { background: #fff3e0; color: #e67e22; }
.prod-badge--out { background: #fce4e4; color: #e74c3c; }

/* Title row with return badge */
.prod-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 4px; }
.prod-title-row .prod-title { margin-bottom: 0; }
.prod-return-badge { height: 67px !important; max-height: 67px !important; width: auto !important; flex-shrink: 0; margin-top: 4px; }

/* Title + SKU */
.prod-title { font-family: var(--font-heading); font-size: 30px; font-weight: 800; text-transform: uppercase; color: var(--black); line-height: 1.1; margin-bottom: 6px; letter-spacing: .01em; }
.prod-sku { font-size: 12px; color: #666; font-family: monospace; margin-bottom: 20px; }
.prod-divider { height: 1px; background: var(--gray-200); margin: 20px 0; }

/* Price block */
.prod-price-block { margin-bottom: 20px; }
.prod-price-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.prod-price-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #666; }
.prod-price-main { font-family: var(--font-body); font-size: 34px; font-weight: 600; color: var(--black); line-height: 1; }
.prod-price-excl-tag { font-size: 13px; color: #666; font-family: var(--font-body); font-weight: 400; margin-left: 4px; }
.prod-price-sub { font-size: 12px; color: var(--gray-600); margin-top: 3px; }

/* Maat-varianten (16/20mm) schakelaar */
.prod-sizes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.prod-sizes__label { font-size: 13px; font-weight: 600; color: var(--gray-600); margin-right: 2px; }
.prod-size-pill {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--gray-200); background: #fff; font-size: 13px; font-weight: 700;
  color: var(--black); text-decoration: none; transition: border-color .15s, background .15s, color .15s;
}
a.prod-size-pill:hover { border-color: var(--orange); color: var(--orange); }
.prod-size-pill--current { border-color: var(--orange); background: rgba(249,115,22,.08); color: var(--orange-dark, #c2410c); cursor: default; }

/* Klant-enquête op de bedankpagina */
.og-card.ogo-survey {
  border: 1px solid rgba(249,115,22,.32);
  border-top: 3px solid var(--orange);
  box-shadow: 0 12px 36px rgba(249,115,22,.10);
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 140px);
}
.ogo-survey .og-card__head {
  background: linear-gradient(90deg, rgba(249,115,22,.13), rgba(249,115,22,.02));
  border-bottom-color: rgba(249,115,22,.16); color: var(--orange-dark);
}
.ogo-survey .og-card__head svg { color: var(--orange); }
.ogo-survey .og-card__body { padding: 24px 26px 28px; counter-reset: ogoq; }
.ogo-survey__intro {
  background: #fff; border: 1px solid rgba(249,115,22,.18); border-left: 3px solid var(--orange);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 26px;
  font-size: 14px; color: var(--black-soft); line-height: 1.6; text-wrap: pretty;
}
.ogo-survey__q { margin-bottom: 22px; padding-top: 22px; border-top: 1px solid var(--gray-100); }
.ogo-survey__q:first-of-type { padding-top: 4px; border-top: none; }
.ogo-survey__label {
  display: flex; align-items: center; gap: 11px;
  font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 13px;
}
.ogo-survey__label::before {
  counter-increment: ogoq; content: counter(ogoq);
  flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), #e8890b); color: #fff;
  font-size: 12.5px; font-weight: 800; box-shadow: 0 2px 7px rgba(249,115,22,.4);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.ogo-survey__opts { display: flex; flex-wrap: wrap; gap: 9px; padding-left: 36px; }
.ogo-survey__opt {
  padding: 9px 17px; border-radius: 999px; border: 1.5px solid var(--gray-200); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--black); cursor: pointer; font-family: var(--font-body);
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .12s;
}
.ogo-survey__opt:hover { border-color: var(--orange); transform: translateY(-1px); }
.ogo-survey__opt.selected {
  border-color: var(--orange); background: var(--orange); color: #fff;
  box-shadow: 0 5px 14px rgba(249,115,22,.32);
}
.ogo-survey__text {
  width: calc(100% - 36px); margin-left: 36px; box-sizing: border-box; padding: 12px 14px;
  border: 1.5px solid var(--gray-200); border-radius: 12px; font-size: 13.5px;
  font-family: var(--font-body); color: var(--black); resize: vertical; min-height: 64px; transition: border-color .15s;
}
.ogo-survey__text:focus { outline: none; border-color: var(--orange); }
.ogo-survey__submit {
  margin-top: 10px; margin-left: 36px; padding: 13px 34px; background: var(--orange); color: #fff; border: none; border-radius: 12px;
  font-size: 14.5px; font-weight: 800; cursor: pointer; font-family: var(--font-body);
  transition: background .18s, transform .12s, box-shadow .18s; box-shadow: 0 5px 16px rgba(249,115,22,.32);
}
.ogo-survey__submit:hover { background: var(--orange-dark, #ea580c); transform: translateY(-1px); }
.ogo-survey__submit:active { transform: translateY(0); }
.ogo-survey__submit:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.ogo-survey__msg { font-size: 13px; margin: 10px 0 0 36px; font-weight: 600; }
.ogo-survey__msg.err { color: #dc2626; }
.ogo-survey__done { text-align: center; padding: 22px 8px 8px; }
.ogo-survey__done-ic {
  width: 54px; height: 54px; border-radius: 50%; background: #16a34a; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(22,163,74,.3);
}
.ogo-survey__thanks { font-size: 18px; font-weight: 800; color: var(--black); margin: 0 0 5px; line-height: 1.4; }
.ogo-survey__thanks-sub { font-size: 14px; color: var(--gray-600); margin: 0; }

@media (max-width: 560px) {
  .ogo-survey .og-card__body { padding: 20px 17px 24px; }
  .ogo-survey__opts { padding-left: 0; }
  .ogo-survey__text { width: 100%; margin-left: 0; }
  .ogo-survey__opt { padding: 10px 15px; font-size: 13.5px; }
  .ogo-survey__submit { width: 100%; margin-left: 0; padding: 14px; }
  .ogo-survey__msg { margin-left: 0; }
}

/* Herroepingsfunctie (/herroepen/) */
.herroep-wrap { padding: 40px 0 64px; }
.herroep-card {
  max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 32px; box-shadow: 0 12px 34px rgba(0,0,0,.05);
}
.herroep-intro { font-size: 15px; color: var(--black-soft); line-height: 1.6; margin: 0 0 14px; }
.herroep-intro strong { color: var(--black); }
.herroep-note {
  font-size: 13.5px; color: var(--gray-600); background: var(--gray-50);
  border-radius: 10px; padding: 12px 14px; margin: 0 0 26px; line-height: 1.55;
}
.herroep-note a { color: var(--orange); font-weight: 600; }
.herroep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.herroep-field { display: flex; flex-direction: column; gap: 6px; }
.herroep-field--full { grid-column: 1 / -1; }
.herroep-label { font-size: 13px; font-weight: 700; color: var(--black); }
.herroep-label em { color: var(--orange); font-style: normal; }
.herroep-opt { font-weight: 400; color: var(--gray-400); font-size: 12px; }
.herroep-field input, .herroep-field textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1.5px solid var(--gray-200);
  border-radius: 10px; font-size: 14px; font-family: var(--font-body); color: var(--black);
  transition: border-color .15s; resize: vertical;
}
.herroep-field input:focus, .herroep-field textarea:focus { outline: none; border-color: var(--orange); }
.herroep-btn {
  background: var(--orange); color: #fff; border: none; border-radius: 11px; padding: 13px 28px;
  font-size: 14.5px; font-weight: 800; font-family: var(--font-body); cursor: pointer;
  transition: background .18s, transform .12s, box-shadow .18s; box-shadow: 0 5px 16px rgba(249,115,22,.3);
}
.herroep-btn:hover { background: var(--orange-dark, #ea580c); transform: translateY(-1px); }
.herroep-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.herroep-btn--ghost { background: #fff; color: var(--black); border: 1.5px solid var(--gray-200); box-shadow: none; }
.herroep-btn--ghost:hover { background: var(--gray-50); transform: none; }
.herroep-err { color: #dc2626; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.herroep-confirm-head { font-size: 17px; font-weight: 800; color: var(--black); margin: 0 0 16px; }
.herroep-summary { display: grid; grid-template-columns: auto 1fr; gap: 9px 20px; margin: 0 0 18px; }
.herroep-summary dt { color: var(--gray-600); font-size: 13.5px; }
.herroep-summary dd { margin: 0; font-weight: 600; font-size: 13.5px; color: var(--black); word-break: break-word; }
.herroep-legal {
  background: #fff7ed; border: 1px solid #fdba74; border-radius: 10px;
  padding: 14px 16px; font-size: 13.5px; color: #7c2d12; line-height: 1.55; margin-bottom: 20px;
}
.herroep-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.herroep-done { text-align: center; padding: 12px 0; }
.herroep-done-ic {
  width: 64px; height: 64px; border-radius: 50%; background: #16a34a; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(22,163,74,.3);
}
.herroep-done-title { font-size: 22px; font-weight: 800; color: var(--black); margin: 0 0 8px; }
.herroep-done-sub { font-size: 14px; color: var(--gray-600); margin: 0 0 14px; }
.herroep-done-mail { font-size: 14px; color: var(--black-soft); line-height: 1.6; max-width: 480px; margin: 0 auto 22px; }

@media (max-width: 560px) {
  .herroep-card { padding: 22px 18px; }
  .herroep-grid { grid-template-columns: 1fr; }
  .herroep-btn { width: 100%; }
  .herroep-actions .herroep-btn { width: 100%; }
}

/* BTW toggle */
.prod-btw-toggle {
  display: inline-flex; align-items: center;
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2px; gap: 0;
}
.prod-btw-toggle button {
  background: none; border: none; cursor: pointer; outline: none;
  font-size: 11px; font-weight: 600; font-family: var(--font-body);
  padding: 4px 10px; border-radius: 16px; transition: all .18s ease;
  color: var(--gray-400); white-space: nowrap;
}
.prod-btw-toggle button.active { background: var(--black); color: #fff; }

/* Staffelprijzen */
.prod-bulk { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.prod-bulk__header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--gray-200); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-600); }
.prod-bulk__header svg { color: var(--orange); }
.prod-bulk-table { width: 100%; border-collapse: collapse; }
.prod-bulk-table td { padding: 8px 14px; font-size: 13px; color: #555; border-bottom: 1px solid var(--gray-100); }
.prod-bulk-table tr:last-child td { border-bottom: none; }
.prod-bulk-table td:first-child { color: var(--black); font-weight: 500; }
.prod-bulk-table td:last-child { text-align: right; }
.prod-bulk-table tr.bulk-active td { background: #fff9ee; color: var(--black); }
.prod-bulk-table tr.bulk-active td:first-child { font-weight: 700; }
.prod-bulk-saving { font-weight: 700; color: var(--green); font-size: 11px; }
.prod-bulk-best td { font-weight: 600 !important; }
.prod-bulk-best td:first-child::after { content: ''; }

/* Volle doos deal */
.prod-box-deal {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--gray-50); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 20px; gap: 12px;
}
.prod-box-deal__text strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--black); }
.prod-box-deal__text span { font-size: 11.5px; color: #888; }
.prod-box-deal__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.prod-box-deal__price { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--black); white-space: nowrap; }
.prod-box-deal__btn {
  background: var(--orange); color: var(--white); border: none; border-radius: var(--radius);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 7px 12px; cursor: pointer; white-space: nowrap; transition: background var(--transition);
}
.prod-box-deal__btn:hover { background: var(--orange-dark); }
.prod-box-deal__text { min-width: 0; }
/* Mobiel: stapel het doos-blok zodat de knop nooit buiten het kader valt */
@media (max-width: 560px) {
  .prod-box-deal { flex-direction: column; align-items: stretch; gap: 8px; }
  .prod-box-deal__right { justify-content: space-between; }
  .prod-box-deal__btn { flex: 1; text-align: center; }
}

/* Verzendtabel (/verzending-en-levering/) — mobiel passend maken */
.shipping-table { width: 100%; }
@media (max-width: 560px) {
  .shipping-table { font-size: 11px; table-layout: fixed; }
  .shipping-table th, .shipping-table td { padding: 7px 4px; overflow-wrap: break-word; }
}

/* Qty + add to cart */
.prod-add-section { margin-bottom: 16px; }
.prod-add-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #666; margin-bottom: 8px; }
.prod-add-row { display: flex; gap: 10px; align-items: center; }
.prod-qty-control { display: flex; align-items: center; border: 1.5px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; height: 48px; }
.prod-qty-btn { width: 42px; height: 100%; background: var(--gray-50); border: none; font-size: 18px; font-weight: 300; cursor: pointer; color: var(--black); display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); }
.prod-qty-btn:hover { background: var(--gray-200); }
.prod-qty-input { width: 48px; height: 100%; border: none; border-left: 1.5px solid var(--gray-200); border-right: 1.5px solid var(--gray-200); text-align: center; font-size: 15px; font-weight: 700; font-family: var(--font-body); outline: none; color: var(--black); -moz-appearance: textfield; }
.prod-qty-input::-webkit-outer-spin-button,
.prod-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prod-add-btn {
  flex: 1; height: 48px; background: var(--orange); color: var(--white);
  border: none; border-radius: var(--radius); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.prod-add-btn:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249,115,22,.35); }
.prod-add-btn:active { transform: none; }
.prod-add-btn--added { background: #27ae60 !important; transform: none !important; box-shadow: none !important; }

/* Volle doos hint */
.prod-box-hint {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff8ec; border: 1.5px solid #f5c55a;
  border-radius: var(--radius); padding: 10px 14px; margin-top: 10px; gap: 12px;
  animation: hintSlide .22s ease; overflow: hidden;
}
.prod-box-hint.hidden { display: none; }
@keyframes hintSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.prod-box-hint__text { font-size: 13px; color: #7a5000; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.prod-box-hint__text svg { flex-shrink: 0; }
.prod-box-hint__btn {
  background: var(--orange); color: #fff; border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: var(--font-body);
  padding: 6px 12px; border-radius: 6px; white-space: nowrap; transition: background var(--transition);
}
.prod-box-hint__btn:hover { background: var(--orange-dark); }

/* Delivery */
.prod-delivery { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.prod-delivery-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray-600); }
.prod-delivery-row svg { flex-shrink: 0; color: var(--green); }
.prod-delivery-row strong { color: var(--black); }

/* Description + specs */
.prod-desc { margin-top: 8px; }
.prod-desc p { font-size: 14px; color: #444; line-height: 1.75; margin-bottom: 12px; }
.prod-desc p:last-child { margin-bottom: 0; }

/* Korte, duidelijke samenvatting — altijd zichtbaar bovenaan */
.prod-summary { margin-top: 8px; }
.prod-summary p { font-size: 15px; color: #333; line-height: 1.7; margin-bottom: 10px; }
.prod-summary p:last-child { margin-bottom: 0; }
.prod-summary strong { color: var(--black); }

/* Volledige beschrijving in-/uitklapbaar (via .is-collapsible op de wrap) */
.prod-desc-wrap { margin-top: 4px; }
.prod-desc-toggle { display: none; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 0; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; font-weight: 700; color: var(--orange); }
.prod-desc-toggle:hover { color: var(--orange-dark); }
.prod-desc-toggle__chev { transition: transform .2s ease; }
.prod-desc-wrap.is-open .prod-desc-toggle__chev { transform: rotate(180deg); }
.prod-desc-wrap.is-collapsible .prod-desc { max-height: 0; overflow: hidden; }
.prod-desc-wrap.is-collapsible.is-open .prod-desc { max-height: none; margin-top: 10px; }
.prod-desc-wrap.is-collapsible .prod-desc-toggle { display: inline-flex; }
.prod-specs { margin-top: 24px; }
.prod-specs__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #666; margin-bottom: 12px; }
.prod-specs-table { width: 100%; border-collapse: collapse; }
.prod-specs-table tr { border-bottom: 1px solid var(--gray-100); }
.prod-specs-table td { padding: 9px 0; font-size: 13.5px; }
.prod-specs-table td:first-child { color: #666; font-weight: 500; width: 45%; }
.prod-specs-table td:last-child { color: var(--black); font-weight: 600; }

/* Vaak samen besteld — bundle strip */
.bundle-section { padding: 12px 0 36px; border-top: 1px solid var(--gray-100); }
.bundle-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #666; margin-bottom: 12px; }
.bundle-strip { display: flex; align-items: stretch; gap: 0; background: #f8f8f8; border: 1px solid #e8e8e8; border-radius: 10px; overflow: hidden; }
.bundle-item { display: flex; align-items: center; gap: 14px; flex: 1; padding: 8px 14px; text-decoration: none; color: inherit; border-right: 1px solid #e8e8e8; transition: background .15s; }
.bundle-item:last-child { border-right: none; }
.bundle-item:hover { background: #fff; }
.bundle-thumb { width: 78px; height: 78px; flex-shrink: 0; background: #fff; border: 1px solid #eee; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bundle-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.bundle-info { flex: 1; min-width: 0; }
.bundle-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); margin-bottom: 3px; }
.bundle-name { font-size: 14px; font-weight: 500; color: #333; line-height: 1.35; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bundle-price { font-size: 15.5px; font-weight: 700; color: var(--black); }
.bundle-add { flex-shrink: 0; width: 32px; height: 32px; background: transparent; border: 1px solid #ddd; border-radius: 50%; color: #aaa; font-size: 18px; font-weight: 300; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s, color .15s, background .15s; font-family: var(--font-body); }
.bundle-item:hover .bundle-add { border-color: var(--orange); color: var(--orange); background: #fff; }

/* Related products (legacy, keep for fallback) */
.prod-section-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.prod-section-hdr h2 { font-family: var(--font-heading); font-size: 28px; font-weight: 800; text-transform: uppercase; color: var(--black); }
.prod-see-all { font-size: 13px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .06em; }
.prod-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prod-rel-card { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 10px; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.prod-rel-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.prod-rel-card__img { aspect-ratio: 1; background: var(--gray-50); overflow: hidden; }
.prod-rel-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .3s; }
.prod-rel-card:hover .prod-rel-card__img img { transform: scale(1.05); }
.prod-rel-card__body { padding: 12px 14px 14px; }
.prod-rel-card__cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); margin-bottom: 4px; display: block; }
.prod-rel-card__title { font-size: 13px; font-weight: 600; color: var(--black); line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-rel-card__footer { display: flex; align-items: center; justify-content: space-between; }
.prod-rel-card__price { font-family: var(--font-price); font-size: 16px; font-weight: 600; color: var(--black); }
.prod-rel-card__add { background: var(--orange); color: var(--white); border: none; border-radius: 4px; font-size: 11px; font-weight: 700; padding: 7px 11px; cursor: pointer; transition: background var(--transition); }
.prod-rel-card__add:hover { background: var(--orange-dark); }

/* Bouwplaats essentials */
.prod-essentials { background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); padding: 20px 0; }
.prod-essentials__header { margin-bottom: 24px; }
.prod-essentials__header h2 { font-family: var(--font-heading); font-size: 26px; font-weight: 800; text-transform: uppercase; color: var(--black); margin-bottom: 4px; }
.prod-essentials__label { font-size: 14px; font-weight: 400; color: #666; }
.prod-essentials__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.prod-essential-card { display: grid; grid-template-columns: 140px 1fr; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 10px; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.prod-essential-card:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.prod-essential-card__img { background: var(--gray-50); display: flex; align-items: center; justify-content: center; padding: 12px; }
.prod-essential-card__img img { width: 100%; height: 110px; object-fit: contain; }
.prod-essential-card__body { padding: 16px 18px; display: flex; flex-direction: column; }
.prod-essential-card__cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); margin-bottom: 5px; }
.prod-essential-card__title { font-size: 14px; font-weight: 700; color: var(--black); line-height: 1.4; margin-bottom: 6px; }
.prod-essential-card__desc { font-size: 12.5px; color: #666; line-height: 1.5; flex: 1; margin-bottom: 14px; }
.prod-essential-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prod-essential-card__price { font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--black); }
.prod-essential-card__btn { background: var(--orange); color: var(--white); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 8px 14px; border-radius: var(--radius); transition: background var(--transition); white-space: nowrap; }
.prod-essential-card:hover .prod-essential-card__btn { background: var(--orange-dark); }

/* Productpagina responsive */
@media (max-width: 1024px) {
  .product-page > .pg { grid-template-columns: 1fr; gap: 32px; }
  .prod-gallery { position: static; }
  .prod-related-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-essentials__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .prod-related-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-essential-card { grid-template-columns: 100px 1fr; }
  .prod-essential-card__img img { height: 80px; }
  /* Fix: breadcrumb overflow op mobile */
  .product-breadcrumb .pg { flex-wrap: wrap; gap: 4px 8px; }
  .product-breadcrumb span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Fix: gallery border-radius consistent met preview */
  /* Compactere hoofdfoto op mobiel — minder scrollen tot de koopknop, afbeelding blijft groot zichtbaar */
  .prod-gallery__main { border-radius: 12px; aspect-ratio: auto; height: 300px; }
  .prod-gallery__main img { width: 92%; height: 92%; }
  /* Fix: brand+badge rij op mobile */
  .prod-meta { flex-wrap: wrap; gap: 8px; }
  /* Fix: "Vaak samen besteld" — items onder elkaar i.p.v. samengeperst naast elkaar */
  .bundle-strip { flex-direction: column; }
  .bundle-item { flex: none; border-right: none; border-bottom: 1px solid #e8e8e8; }
  .bundle-item:last-child { border-bottom: none; }
}




/* ============================================
   B2B PAGINA
============================================ */
.b2b-hero { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 56px 0 52px; }
.b2b-hero .pg { display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); margin-bottom: 14px; }
.hero-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.hero-title { font-family: var(--font-heading); font-size: 54px; font-weight: 800; text-transform: uppercase; color: var(--black); line-height: 1; letter-spacing: .01em; margin-bottom: 16px; }
.hero-title em { color: var(--orange); font-style: normal; }
.hero-sub { font-size: 15px; color: var(--gray-600); line-height: 1.7; max-width: 480px; margin-bottom: 28px; }
.hero-checks { display: flex; flex-direction: column; gap: 9px; margin-bottom: 32px; }
.hero-check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--black); }
.hero-check__icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(39,174,96,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--green); }
.hero-cta { display: flex; align-items: center; gap: 12px; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; background: var(--orange); color: var(--white); border-radius: var(--radius); font-size: 14px; font-weight: 700; transition: background var(--transition); border: none; cursor: pointer; font-family: var(--font-body); }
.btn-primary:hover { background: var(--orange-dark); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border: 1.5px solid var(--gray-200); color: var(--black); border-radius: var(--radius); font-size: 14px; font-weight: 600; transition: all var(--transition); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.hero-stats-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; }
.hero-stats-card__head { background: #374151; padding: 18px 22px; display: flex; align-items: center; gap: 10px; }
.hero-stats-card__head-title { font-family: var(--font-heading); font-size: 16px; font-weight: 800; text-transform: uppercase; color: var(--white); letter-spacing: .04em; }
.hero-stats-card__head-badge { margin-left: auto; background: var(--orange); color: var(--white); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 4px; }
.hero-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.hero-stat-box { padding: 20px 22px; border-right: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.hero-stat-box:nth-child(even) { border-right: none; }
.hero-stat-box:nth-child(1), .hero-stat-box:nth-child(2) { border-bottom: none; }
.hero-stat-box__val { font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--black); line-height: 1; margin-bottom: 3px; }
.hero-stat-box__val em { color: var(--orange); font-style: normal; }
.hero-stat-box__lbl { font-size: 12px; color: var(--gray-600); font-weight: 500; }
.hero-stats-card__foot { padding: 14px 22px; border-top: 1px solid var(--gray-200); display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray-600); }
.hero-stats-card__foot svg { color: var(--green); }

/* B2B hero knoppen — eigen klasse om conflict te voorkomen */
.b2bhero-cta { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.b2bhero-cta__primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; background: var(--orange); color: #fff; border-radius: var(--radius); font-size: 14px; font-weight: 700; text-decoration: none; transition: background var(--transition), transform var(--transition); }
.b2bhero-cta__primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
.b2bhero-cta__ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border: 1.5px solid var(--gray-300); color: var(--black); border-radius: var(--radius); font-size: 14px; font-weight: 600; text-decoration: none; transition: all var(--transition); }
.b2bhero-cta__ghost:hover { border-color: var(--orange); color: var(--orange); }

/* B2B contactpersoon in stat-card */
.hero-contact-row { padding: 16px 22px; border-top: 1px solid var(--gray-200); display: flex; align-items: center; gap: 14px; }
.hero-contact-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--font-heading); font-size: 13px; font-weight: 800; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-contact-info { flex: 1; min-width: 0; }
.hero-contact-name { font-size: 13.5px; font-weight: 700; color: var(--black); }
.hero-contact-role { font-size: 11px; color: var(--gray-500); margin-bottom: 4px; }
.hero-contact-tel { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--orange); }

.voordelen { padding: 56px 0; background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.section-head { text-align: center; margin-bottom: 36px; }
.section-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); margin-bottom: 8px; }
.section-title { font-family: var(--font-heading); font-size: 36px; font-weight: 800; text-transform: uppercase; color: var(--black); letter-spacing: .01em; }
.section-sub { font-size: 14px; color: var(--gray-600); margin-top: 6px; }
.voordelen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.voordeel-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 22px; transition: box-shadow var(--transition), border-color var(--transition); }
.voordeel-card:hover { box-shadow: var(--shadow-sm); border-color: rgba(249,115,22,.3); }
.voordeel-card__icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.voordeel-card__icon--orange { background: rgba(249,115,22,.1); color: var(--orange); }
.voordeel-card__icon--green  { background: rgba(39,174,96,.1);  color: var(--green); }
.voordeel-card__icon--blue   { background: rgba(41,128,185,.1); color: #2980b9; }
.voordeel-card__icon--black  { background: rgba(17,17,17,.07);  color: var(--black); }
.voordeel-card__title { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 5px; }
.voordeel-card__text { font-size: 13px; color: var(--gray-600); line-height: 1.6; }

.hoe-werkt { background: var(--white); border-top: 1px solid var(--gray-200); padding: 56px 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 36px; position: relative; }
.steps::before { content: ''; position: absolute; top: 28px; left: calc(100% / 6); width: calc(100% * 2 / 3); height: 1px; background: linear-gradient(90deg, var(--orange), rgba(249,115,22,.2)); }
.step { text-align: center; padding: 0 24px; position: relative; }
.step__num { width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: var(--white); font-family: var(--font-heading); font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; position: relative; z-index: 1; box-shadow: 0 0 0 5px rgba(249,115,22,.15); }
.step__title { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.step__text { font-size: 13px; color: var(--gray-600); line-height: 1.6; }

.account-switch { display: flex; gap: 0; border: 1.5px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.account-switch__btn { flex: 1; padding: 10px 20px; font-size: 13.5px; font-weight: 700; font-family: var(--font-body); border: none; background: var(--white); color: var(--gray-400); cursor: pointer; transition: all var(--transition); display: flex; align-items: center; justify-content: center; gap: 7px; }
.account-switch__btn.active { background: #374151; color: var(--white); }
.account-switch__btn:hover:not(.active) { background: var(--gray-50); color: var(--black); }

.spaarbak { background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); padding: 72px 0 56px; }
.spaarbak__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.reward-card { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 10px; overflow: hidden; transition: box-shadow var(--transition), border-color var(--transition); }
.reward-card:hover { box-shadow: var(--shadow-sm); border-color: rgba(249,115,22,.3); }
.reward-card__img { height: 110px; display: flex; align-items: center; justify-content: center; padding: 14px; background: var(--white); border-bottom: 1px solid var(--gray-100); }
.reward-card__body { padding: 14px 16px 16px; }
.reward-card__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--orange); margin-bottom: 5px; }
.reward-card__name { font-size: 13px; color: var(--black); font-weight: 500; line-height: 1.45; }

.aanmeld { padding: 56px 0 80px; background: var(--white); }
.aanmeld .pg { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.form-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; }
.form-card__head { padding: 22px 28px 18px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.form-card__title { font-family: var(--font-heading); font-size: 22px; font-weight: 800; text-transform: uppercase; color: var(--black); letter-spacing: .02em; }
.form-card__sub { font-size: 13px; color: var(--gray-600); margin-top: 2px; }
.form-card__body { padding: 26px 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row--full { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--black); }
.field label span { color: var(--orange); margin-left: 2px; }
.field label .opt { color: var(--gray-400); font-weight: 400; }
.field input, .field select, .field textarea { border: 1.5px solid var(--gray-200); border-radius: var(--radius); padding: 0 14px; font-size: 14px; font-family: var(--font-body); color: var(--black); outline: none; background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); }
.field input, .field select { height: 44px; }
.field textarea { height: 100px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.1); }
.field input::placeholder, .field textarea::placeholder { color: var(--gray-400); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-divider { display: flex; align-items: center; gap: 12px; margin: 6px 0 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); }
.form-divider::before, .form-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.form-submit { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-100); }
.form-note { font-size: 12px; color: var(--gray-400); display: flex; align-items: center; gap: 5px; }
.submit-btn { display: flex; align-items: center; gap: 8px; padding: 12px 28px; background: var(--orange); color: var(--white); border: none; border-radius: var(--radius); font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: background var(--transition); }
.submit-btn:hover { background: var(--orange-dark); }
.form-success { display: none; flex-direction: column; align-items: center; text-align: center; padding: 60px 28px; gap: 14px; }
.form-success__icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(39,174,96,.1); display: flex; align-items: center; justify-content: center; color: var(--green); }
.form-success__title { font-family: var(--font-heading); font-size: 26px; font-weight: 800; text-transform: uppercase; color: var(--black); }
.form-success__sub { font-size: 14px; color: var(--gray-600); max-width: 340px; }
.b2b-sidebar { display: flex; flex-direction: column; gap: 14px; }
.info-block { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.info-block__head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.info-block__icon { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(249,115,22,.1); color: var(--orange); }
.info-block__title { font-size: 13px; font-weight: 700; color: var(--black); }
.info-block__body { padding: 14px 16px; }
.info-block__row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
.info-block__row:last-child { border-bottom: none; padding-bottom: 0; }
.info-block__row svg { color: var(--green); flex-shrink: 0; margin-top: 3px; }
.info-block__row span { color: var(--gray-600); line-height: 1.5; }
.info-block__row strong { color: var(--black); }
.contact-block { background: #374151; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.contact-block__title { font-family: var(--font-heading); font-size: 17px; font-weight: 800; text-transform: uppercase; color: var(--white); letter-spacing: .03em; }
.contact-block__sub { font-size: 13px; color: rgba(255,255,255,.5); margin-top: -8px; }
.contact-block__item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--white); }
.contact-block__item svg { color: var(--orange); flex-shrink: 0; }
.contact-block__btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; background: var(--orange); color: var(--white); border-radius: var(--radius); font-size: 13.5px; font-weight: 700; transition: background var(--transition); margin-top: 2px; }
.contact-block__btn:hover { background: var(--orange-dark); }

@media (max-width: 1024px) {
  .b2b-hero .pg, .aanmeld .pg { grid-template-columns: 1fr; }
  .voordelen-grid { grid-template-columns: 1fr 1fr; }
  .spaarbak__cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .steps::before { display: none; }
}
@media (max-width: 768px) {
  .voordelen-grid { grid-template-columns: 1fr; }
  .spaarbak__cards { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-title { font-size: 40px; }
}

/* ============================================
   CONTACT PAGINA
============================================ */
.page-header { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 24px 0 20px; }
.page-header .pg { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.page-header__left { display: flex; align-items: baseline; gap: 14px; }
.page-header h1 { font-family: var(--font-heading); font-size: 32px; font-weight: 800; text-transform: uppercase; color: var(--black); line-height: 1; letter-spacing: .02em; }
.page-header__sub { font-size: 13px; color: var(--gray-400); }

.quick-contact { padding: 28px 0 0; }
.quick-contact .pg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.qc-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 20px 22px; display: flex; align-items: center; gap: 16px; transition: box-shadow var(--transition), border-color var(--transition); cursor: pointer; text-decoration: none; color: inherit; }
.qc-card:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.qc-card__icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.qc-card__icon--orange { background: rgba(249,115,22,.1); color: var(--orange); }
.qc-card__icon--green  { background: rgba(39,174,96,.1);  color: var(--green); }
.qc-card__icon--blue   { background: rgba(41,128,185,.1); color: #2980b9; }
.qc-card__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-400); margin-bottom: 2px; }
.qc-card__value { font-size: 15px; font-weight: 700; color: var(--black); }
.qc-card__sub { font-size: 11.5px; color: var(--gray-600); margin-top: 1px; }

.contact-layout { padding: 28px 0 80px; }
.contact-layout .pg { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.contact-sidebar { display: flex; flex-direction: column; gap: 14px; }

.info-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.info-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.info-card__head-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.info-card__head-icon--orange { background: rgba(249,115,22,.1); color: var(--orange); }
.info-card__head-icon--green  { background: rgba(39,174,96,.1);  color: var(--green); }
.info-card__head-title { font-size: 13px; font-weight: 700; color: var(--black); }
.info-card__body { padding: 16px 18px; }

.hours-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--gray-100); font-size: 13.5px; }
.hours-row:last-child { border-bottom: none; }
.hours-row__day { color: var(--gray-600); font-weight: 500; }
.hours-row__time { font-weight: 600; color: var(--black); }
.hours-row__time--closed { color: var(--gray-400); font-weight: 400; }
.hours-row--today .hours-row__day { color: var(--orange); font-weight: 700; }
.hours-row--today .hours-row__time { color: var(--orange); }
.today-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; background: rgba(249,115,22,.12); color: var(--orange); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }

.addr-line { font-size: 14px; color: var(--black); line-height: 1.8; margin-bottom: 12px; }
.addr-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--orange); transition: color var(--transition); }
.addr-link:hover { color: var(--orange-dark); text-decoration: underline; }
.map-placeholder { background: var(--gray-100); border-radius: 10px; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--gray-200); cursor: pointer; transition: border-color var(--transition); text-decoration: none; }
.map-placeholder:hover { border-color: var(--orange); }
.map-placeholder__icon { color: var(--gray-400); }
.map-placeholder__label { font-size: 13px; font-weight: 600; color: var(--gray-600); }
.map-placeholder__sub { font-size: 11.5px; color: var(--gray-400); margin-top: -6px; }

.faq-item { border-bottom: 1px solid var(--gray-100); cursor: pointer; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; font-size: 13.5px; font-weight: 600; color: var(--black); transition: color var(--transition); }
.faq-item:hover .faq-q { color: var(--orange); }
.faq-chevron { flex-shrink: 0; transition: transform var(--transition); color: var(--gray-400); }
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--orange); }
.faq-a { display: none; padding: 0 18px 14px; font-size: 13px; color: var(--gray-600); line-height: 1.6; }
.faq-item.open .faq-a { display: block; }

.whatsapp-card { background: var(--white); border: 1.5px solid #e1f3e8; border-radius: 10px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; transition: box-shadow var(--transition); }
.whatsapp-card:hover { box-shadow: var(--shadow-sm); }
.whatsapp-icon { width: 40px; height: 40px; border-radius: 10px; background: #25D366; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.whatsapp-card__label { font-size: 12px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1px; }
.whatsapp-card__text { font-size: 14px; font-weight: 700; color: var(--black); }
.whatsapp-card__sub { font-size: 11.5px; color: var(--gray-600); }

.wa-float { position: fixed; bottom: 28px; right: 28px; width: 56px; height: 56px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,.45); z-index: 999; transition: transform .2s, box-shadow .2s; }
.wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,.6); }

@media (max-width: 1024px) {
  .contact-layout .pg { grid-template-columns: 1fr; }
  .quick-contact .pg { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .quick-contact .pg { grid-template-columns: 1fr; }
}

.page-template-page-contact { background: var(--gray-50); }

/* ============================================
   FAQ PAGINA
============================================ */
.page-template-page-faq { background: var(--gray-50); }
.page-header__title { font-family: var(--font-heading); font-size: 28px; font-weight: 800; text-transform: uppercase; color: var(--black); }

.faq-wrap { padding: 40px 0 80px; }
.faq-wrap .pg { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }

.faq-sidenav { position: sticky; top: 90px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.faq-sidenav__item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 13px; font-weight: 500; color: var(--black); border-bottom: 1px solid var(--gray-100); cursor: pointer; transition: background var(--transition), color var(--transition); text-decoration: none; }
.faq-sidenav__item:last-child { border-bottom: none; }
.faq-sidenav__item:hover { background: var(--gray-50); color: var(--orange); }
.faq-sidenav__item.active { color: var(--orange); background: rgba(249,115,22,.05); font-weight: 700; border-left: 3px solid var(--orange); padding-left: 11px; }
.faq-sidenav__icon { width: 28px; height: 28px; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gray-400); }
.faq-sidenav__item.active .faq-sidenav__icon { color: var(--orange); background: rgba(249,115,22,.08); border-color: rgba(249,115,22,.2); }

.faq-section { margin-bottom: 40px; }
.faq-section__title { font-family: var(--font-heading); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--black); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.faq-section__title::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }

.faq-content .faq-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 6px; overflow: hidden; transition: border-color var(--transition); border-bottom: 1px solid var(--gray-200); cursor: default; }
.faq-content .faq-item:hover { border-color: var(--gray-400); }
.faq-content .faq-item.open { border-color: var(--orange); }
.faq-content .faq-q { padding: 14px 16px; font-size: 14px; font-weight: 600; gap: 16px; user-select: none; cursor: pointer; }
.faq-content .faq-q:hover { color: var(--orange); }
.faq-content .faq-item.open .faq-q { color: var(--orange); }
.faq-content .faq-a { padding: 0 16px 16px; font-size: 13.5px; line-height: 1.7; }
.faq-content .faq-a a { color: var(--orange); font-weight: 600; }
.faq-content .faq-a a:hover { text-decoration: underline; }
.faq-content .faq-a ul { padding-left: 18px; margin-top: 8px; }
.faq-content .faq-a ul li { list-style: disc; margin-bottom: 4px; }

/* Installatiegids */
.gids-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gray-400); margin-bottom: 14px; }
.gids-crumbs a { color: var(--gray-600); text-decoration: none; }
.gids-crumbs a:hover { color: var(--orange); }
.gids-crumbs__current { color: var(--gray-400); }
.gids-wrap { padding: 36px 0 48px; }
.gids-grid { max-width: 820px; }
.gids-content { font-size: 16px; line-height: 1.75; color: #2a2f37; }
.gids-content > h2 { font-family: var(--font-heading); font-size: 26px; font-weight: 800; color: var(--black); margin: 38px 0 14px; line-height: 1.2; }
.gids-content > h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--black); margin: 26px 0 10px; }
.gids-content p { margin: 0 0 16px; }
.gids-content a { color: var(--orange); font-weight: 600; text-decoration: none; }
.gids-content a:hover { text-decoration: underline; }

/* Oranje tekst-links in productbeschrijvingen (vallen zo op) */
.prod-desc a, .prod-summary a { color: var(--orange); font-weight: 600; text-decoration: none; }
.prod-desc a:hover, .prod-summary a:hover { text-decoration: underline; }
.gids-content ul, .gids-content ol { margin: 0 0 18px; padding-left: 22px; }
.gids-content li { margin-bottom: 8px; }
.gids-content ul li { list-style: disc; }
.gids-content ol li { list-style: decimal; }
.gids-content strong { color: var(--black); }
.gids-content .gids-lead { font-size: 18px; color: var(--gray-600); line-height: 1.7; margin-bottom: 26px; }
.gids-content .gids-callout { background: #fff7ed; border-left: 4px solid var(--orange); border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 22px 0; font-size: 15px; }
.gids-content .gids-callout strong { color: var(--orange-dark, #c2570c); }
.gids-content table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 14.5px; }
.gids-content th { background: var(--orange); color: #fff; text-align: left; padding: 9px 12px; }
.gids-content td { border: 1px solid var(--gray-200); padding: 8px 12px; }
.gids-faq { margin-top: 40px; }
.gids-products { margin-top: 8px; }
@media (max-width: 768px) { .gids-content { font-size: 15.5px; } .gids-content > h2 { font-size: 22px; } }

/* Installatiegids archief */
.gids-archive { padding: 40px 0 56px; }
.gids-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.gids-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.gids-card:hover { border-color: var(--orange); box-shadow: 0 8px 24px rgba(0,0,0,.06); transform: translateY(-2px); }
.gids-card__img { aspect-ratio: 16/9; background: #f5f8fc; overflow: hidden; }
.gids-card__img img { width: 100%; height: 100%; object-fit: cover; }
.gids-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.gids-card__tag { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--orange); background: #fff7ed; padding: 3px 9px; border-radius: 6px; }
.gids-card__title { font-family: var(--font-heading); font-size: 19px; font-weight: 800; color: var(--black); line-height: 1.25; margin: 2px 0; }
.gids-card__sub { font-size: 14px; color: var(--gray-600); line-height: 1.6; }
.gids-card__link { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--orange); }

/* Subtiele gids-verwijzing op productpagina */
.prod-guides { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gray-100); font-size: 13px; color: var(--gray-600); }
.prod-guides__icon { color: var(--orange); flex-shrink: 0; }
.prod-guides__label { font-weight: 600; color: var(--gray-600); }
.prod-guides a { color: var(--orange); font-weight: 600; text-decoration: none; }
.prod-guides a:hover { text-decoration: underline; }
.prod-guides__sep { color: var(--gray-300); }

/* Product-FAQ sectie (productpagina) */
.prod-faq-section { padding: 36px 0 52px; }
.prod-faq-section .faq-section__title { max-width: 860px; margin: 0 auto 16px; }
.prod-faq { max-width: 860px; margin: 0 auto; }

.contact-cta { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 28px; text-align: center; margin-top: 12px; }
.contact-cta__title { font-family: var(--font-heading); font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--black); margin-bottom: 6px; }
.contact-cta__sub { font-size: 13px; color: var(--gray-400); margin-bottom: 18px; }
.contact-cta__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta-btn { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius); font-size: 13px; font-weight: 700; transition: all var(--transition); border: 1.5px solid var(--gray-200); color: var(--black); font-family: var(--font-body); cursor: pointer; text-decoration: none; }
.cta-btn:hover { border-color: var(--orange); color: var(--orange); }
.cta-btn--primary { background: var(--orange); color: var(--white); border-color: var(--orange); }
.cta-btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--white); }

.reviews-section { padding: 48px 0 72px; background: var(--white); border-top: 1px solid #ebebeb; }
.reviews-hdr { text-align: center; margin-bottom: 40px; }
.reviews-tp-bar { display: inline-flex; align-items: center; gap: 14px; background: #f9f9f9; border: 1.5px solid #e8e8e8; border-radius: 12px; padding: 12px 22px; margin-bottom: 20px; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.reviews-tp-bar:hover { border-color: #00b67a; box-shadow: 0 4px 16px rgba(0,182,122,.1); }
.reviews-tp-logo { height: 20px; display: block; }
.reviews-tp-sep { width: 1px; height: 20px; background: #ddd; flex-shrink: 0; }
.reviews-tp-score { font-size: 20px; font-weight: 800; color: #111; line-height: 1; }
.reviews-tp-stars { display: flex; gap: 2px; }
.tp-star { width: 20px; height: 20px; background: #00b67a; display: flex; align-items: center; justify-content: center; }
.tp-star-half { background: linear-gradient(90deg, #00b67a 50%, #ddd 50%); }
.tp-star svg { fill: #fff; width: 12px; height: 12px; }
.reviews-tp-meta { text-align: left; }
.reviews-tp-label { font-size: 12px; font-weight: 700; color: #111; display: block; line-height: 1.2; }
.reviews-tp-count { font-size: 10.5px; color: #aaa; }
.reviews-hdr-title { font-family: var(--font-heading); font-size: 32px; font-weight: 700; text-transform: uppercase; color: #111; letter-spacing: .04em; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.review-card { background: #fff; border: 1.5px solid #ebebeb; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.review-card:hover { border-color: #c8c8c8; box-shadow: 0 4px 18px rgba(0,0,0,.07); }
.review-card-stars { display: flex; gap: 2px; margin-bottom: 14px; }
.review-card-star { width: 18px; height: 18px; background: #00b67a; display: flex; align-items: center; justify-content: center; }
.review-card-star svg { fill: #fff; width: 11px; height: 11px; }
.review-text { font-size: 13.5px; color: #444; line-height: 1.65; margin-bottom: 18px; flex: 1; }
.review-author { display: flex; align-items: center; gap: 10px; }
.review-avatar { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.review-name strong { display: block; font-size: 12.5px; font-weight: 700; color: #111; }
.review-tp-source { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #bbb; margin-top: 2px; }
.review-tp-dot { width: 4px; height: 4px; background: #00b67a; border-radius: 50%; }
.reviews-footer { text-align: center; }
.reviews-tp-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #555; border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 9px 18px; text-decoration: none; transition: border-color .2s, color .2s; }
.reviews-tp-link:hover { border-color: #00b67a; color: #00b67a; }
.reviews-tp-link svg { color: #00b67a; }

@media (max-width: 768px) {
  .faq-wrap .pg { grid-template-columns: 1fr; }
  .faq-sidenav { position: static; }
  .reviews-grid { grid-template-columns: 1fr; }
}

/* FAQ sidebar sticky wrapper */
.faq-sidebar { position: sticky; top: 164px; align-self: start; }
.faq-sidenav { position: static; }
/* FAQ CTA sticky onderaan content kolom */
.faq-cta-sticky { position: sticky; top: 184px; margin-top: 24px; }
.cta-btn--whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.cta-btn--whatsapp:hover { background: #1ebe5d; border-color: #1ebe5d; color: #fff; }

@media (max-width: 768px) {
  .faq-sidebar { position: static; }
  .faq-cta-sticky { position: static; }
}

/* ============================================================
   LOGIN PAGINA
   ============================================================ */
.ogo-login-wrap { display:flex !important; align-items:flex-start !important; justify-content:center !important; min-height:60vh; padding:60px 40px 80px; background:var(--gray-50) !important; }
.ogo-login-card { background:var(--white) !important; border:1px solid var(--gray-200) !important; border-radius:12px !important; overflow:hidden !important; width:100%; max-width:460px; transition:max-width 0.36s cubic-bezier(0.4,0,0.2,1); }

/* Tabs */
.ogo-tabs { display:flex !important; border-bottom:2px solid var(--gray-200) !important; margin:0 !important; padding:0 !important; }
.ogo-tab { flex:1 !important; background:none !important; border:none !important; border-bottom:2px solid transparent !important; margin-bottom:-2px !important; padding:14px !important; font-size:13.5px !important; font-weight:700 !important; color:var(--gray-400) !important; cursor:pointer !important; transition:all .2s ease !important; }
.ogo-tab.active { color:var(--orange) !important; border-bottom-color:var(--orange) !important; }

/* Panel */
.ogo-panel { padding:24px 28px !important; }

/* Velden */
.ogo-field { margin-bottom:14px !important; }
.ogo-field label { display:block !important; font-size:12.5px !important; font-weight:600 !important; color:var(--black) !important; margin-bottom:6px !important; }
.ogo-field input[type="text"],
.ogo-field input[type="email"],
.ogo-field input[type="password"] { display:block !important; width:100% !important; height:44px !important; padding:0 14px !important; border:1.5px solid var(--gray-200) !important; border-radius:8px !important; font-size:14px !important; color:var(--black) !important; background:var(--white) !important; outline:none !important; box-shadow:none !important; box-sizing:border-box !important; transition:border-color .2s ease !important; }
.ogo-field input:focus { border-color:var(--orange) !important; }

/* Wachtwoord vergeten */
.ogo-forgot { text-align:right; margin-top:6px; }
.ogo-forgot a { font-size:12.5px !important; color:var(--orange) !important; text-decoration:none !important; font-weight:500 !important; }
.ogo-forgot a:hover { text-decoration:underline !important; }

/* Knop */
.ogo-btn { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; background:var(--orange) !important; color:#fff !important; border:none !important; border-radius:8px !important; padding:13px !important; font-size:15px !important; font-weight:700 !important; cursor:pointer !important; margin-top:20px !important; transition:background .2s ease !important; }
.ogo-btn:hover { background:var(--orange-dark) !important; }

/* Footer — grijs blok onderaan kaart */
.ogo-card-footer { text-align:center !important; padding:14px 28px !important; font-size:12px !important; color:var(--gray-600) !important; background:var(--gray-50) !important; border-top:1px solid var(--gray-100) !important; }
.ogo-card-footer a { color:var(--orange) !important; font-weight:600 !important; text-decoration:none !important; }
.ogo-card-footer a:hover { text-decoration:underline !important; }
.ogo-note { font-size:13px; color:var(--gray-400); margin-bottom:16px; }

/* Registratie form */
.ogo-login-card .reg-switch { display:flex; border:1.5px solid var(--gray-200); border-radius:8px; overflow:hidden; margin-bottom:20px; }
.reg-switch__btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 20px; font-size:13.5px; font-weight:700; border:none; background:var(--white); color:var(--gray-400); cursor:pointer; transition:all .2s ease; }
.reg-switch__btn.active { background:#374151; color:#fff; }
.reg-switch__btn:hover:not(.active) { background:var(--gray-50); color:var(--black); }
.reg-divider { display:flex; align-items:center; gap:12px; margin:4px 0 16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-400); }
.reg-divider::before, .reg-divider::after { content:''; flex:1; height:1px; background:var(--gray-200); }
.reg-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:0; }
.reg-row--full { grid-template-columns:1fr; }
.reg-field { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.reg-field label { font-size:12.5px; font-weight:600; color:var(--black); }
.reg-field label span { color:var(--orange); margin-left:2px; }
.reg-field label .opt { color:var(--gray-400); font-weight:400; }
.reg-field input, .reg-field select, .reg-field textarea { height:44px; border:1.5px solid var(--gray-200) !important; border-radius:8px !important; padding:0 14px !important; font-size:14px !important; color:var(--black) !important; background:var(--white) !important; outline:none !important; box-shadow:none !important; box-sizing:border-box; transition:border-color .2s ease; font-family:inherit; }
.reg-field textarea { height:100px; padding:12px 14px !important; resize:vertical; line-height:1.6; }
.reg-field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px !important; }
.reg-field input:focus, .reg-field select:focus, .reg-field textarea:focus { border-color:var(--orange) !important; box-shadow:0 0 0 3px rgba(249,115,22,.1) !important; }

/* Login/registratie — mobiel: velden onder elkaar, minder side-padding */
@media (max-width: 600px) {
  .ogo-login-wrap { padding: 32px 16px 60px; }
  .reg-row { grid-template-columns: 1fr; gap: 0; }
  .reg-field { min-width: 0; }
  .ogo-field input, .ogo-field { min-width: 0; }
}

/* iOS-zoom voorkomen: formuliervelden minimaal 16px op mobiel
   (Safari zoomt automatisch in bij focus op inputs < 16px — frictie bij checkout) */
@media (max-width: 768px) {
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}
.reg-submit { display:flex; align-items:center; justify-content:space-between; margin-top:24px; padding-top:20px; border-top:1px solid var(--gray-100); }
.reg-note { font-size:12px; color:var(--gray-400); display:flex; align-items:center; gap:5px; }
.reg-btn { display:flex; align-items:center; gap:8px; padding:12px 22px; background:var(--orange); color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; transition:background .2s ease; }
.reg-btn:hover { background:var(--orange-dark); }

/* ============================================================
   MIJN ACCOUNT — DASHBOARD
   Prefix: account-hero, acct-*, ogo-account-*, ogo-order-*,
           ogo-details-*, ogo-address-*, ogo-inv-*, spaarbak
============================================================ */

/* ── Layout ───────────────────────────────────────────────── */
.account-hero {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 28px 0 28px;
}
.account-layout { padding: 32px 0 80px; background: var(--gray-50); }
.account-layout .pg { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: start; }
.account-sidebar { position: sticky; top: 90px; }
.account-main { min-width: 0; }

/* ── Hero greeting ────────────────────────────────────────── */
.acct-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.acct-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--orange); margin-bottom: 6px; }
.acct-name { font-family: var(--font-heading); font-size: 40px; font-weight: 800; text-transform: uppercase; color: var(--black); line-height: 1; }
.acct-name em { color: var(--orange); font-style: normal; }
.acct-sub { font-size: 13px; color: var(--gray-600); margin-top: 6px; }

/* ── Hero stats ───────────────────────────────────────────── */
.acct-stats { display: flex; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.acct-stat { padding: 14px 24px; text-align: center; min-width: 110px; text-decoration: none; transition: background var(--transition); }
.acct-stat + .acct-stat { border-left: 1px solid var(--gray-200); }
.acct-stat:hover { background: var(--gray-100); }
.acct-stat__val { font-family: var(--font-heading); font-size: 24px; font-weight: 800; color: var(--black); }
.acct-stat--orange .acct-stat__val { color: var(--orange); }
.acct-stat__lbl { font-size: 10.5px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .07em; margin-top: 1px; }

/* ── WooCommerce wrapper fix (voorkomt clipping hero) ─────── */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-page { padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* ── Spaarbak ─────────────────────────────────────────────── */
.spaarbak { border-top: 1px solid var(--gray-200); border-bottom: none; margin-top: 4px; padding: 0; background: transparent; }
.spaarbak__head { display: flex; align-items: center; gap: 8px; padding: 16px 0; flex-wrap: wrap; width: 100%; cursor: pointer; background: none; border: none; font-family: var(--font-body); text-align: left; }
.spaarbak__head:hover .spaarbak__title { color: var(--orange); }
.spaarbak__title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--black); flex: 1; transition: color var(--transition); }
.spaarbak__title svg { color: var(--orange); flex-shrink: 0; }
.spaarbak__spent { font-size: 12px; color: var(--gray-600); background: var(--gray-100); border-radius: 20px; padding: 3px 11px; white-space: nowrap; }
.spaarbak__spent em { color: var(--orange); font-style: normal; font-weight: 700; }
.spaar-toggle-actions { display: flex; align-items: center; gap: 8px; }
.spaar-info-btn { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; border: 1.5px solid var(--gray-200); background: var(--white); cursor: pointer; color: var(--gray-600); font-size: 11.5px; font-weight: 600; transition: all var(--transition); white-space: nowrap; }
.spaar-info-btn:hover { border-color: var(--orange); color: var(--orange); }
.spaar-chevron svg { transition: transform .3s ease; color: var(--gray-400); display: block; }
.spaarbak.open .spaar-chevron svg { transform: rotate(180deg); }

/* Inklapbaar body */
.spaar-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.spaarbak.open .spaar-body { max-height: 600px; }
.spaarbak.open .spaar-milestones { padding-bottom: 20px; }

/* Progress track */
.spaar-track-wrap { padding: 0 0 16px; }

/* Progress track */
.spaar-track-wrap { margin: 0 0 20px; padding: 8px 0 0; }
.spaar-track { height: 5px; background: var(--gray-200); border-radius: 3px; position: relative; }
.spaar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--orange-dark), var(--orange)); transition: width .6s ease; }
.spaar-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.spaar-marker.passed  { background: var(--green); }
.spaar-marker.current { background: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.2); }
.spaar-marker.future  { background: var(--gray-200); }

/* Mijlpalen */
.spaar-milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spaar-milestone { background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; position: relative; display: flex; flex-direction: row; align-items: stretch; transition: box-shadow var(--transition), border-color var(--transition); }
.spaar-milestone.reached { border-color: rgba(39,174,96,.3); }
.spaar-milestone.reached:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.spaar-milestone.next  { border-color: rgba(249,115,22,.4); }
.spaar-milestone.future { opacity: .6; }
.spaar-milestone__img { flex-shrink: 0; width: 72px; background: var(--gray-50); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--gray-100); padding: 10px 8px; position: relative; }
.spaar-milestone__img img { width: 52px; height: 52px; object-fit: contain; }
.spaar-milestone.future .spaar-milestone__img img { filter: grayscale(1); opacity: .35; }
.spaar-milestone__check-badge { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; }
.spaar-milestone__body { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.spaar-milestone__threshold { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.spaar-milestone.reached .spaar-milestone__threshold { color: var(--green); }
.spaar-milestone.next    .spaar-milestone__threshold { color: var(--orange); }
.spaar-milestone.future  .spaar-milestone__threshold { color: var(--gray-400); }
.spaar-milestone__reward { font-size: 11px; color: var(--gray-600); line-height: 1.35; margin-bottom: 8px; }
.spaar-milestone.future .spaar-milestone__reward { color: var(--gray-400); }
.spaar-milestone__cart-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 10px; border-radius: 5px; background: rgba(39,174,96,.08); border: 1px solid rgba(39,174,96,.25); color: var(--green); font-size: 10.5px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: all var(--transition); text-decoration: none; white-space: nowrap; align-self: flex-start; }
.spaar-milestone__cart-btn:hover { background: rgba(39,174,96,.18); border-color: rgba(39,174,96,.4); }
.spaar-milestone__cart-btn--incart { background: rgba(249,115,22,.1); border-color: rgba(249,115,22,.35); color: var(--orange-dark, #c2410c); }
.spaar-milestone__cart-btn--incart:hover { background: rgba(249,115,22,.2); }
.spaar-milestone__claimed { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 5px; background: var(--gray-100); color: var(--gray-500); font-size: 10.5px; font-weight: 700; align-self: flex-start; }
.spaar-milestone__next-label { font-size: 10.5px; font-weight: 600; color: var(--orange); }

/* ── Spaarbak info modal ────────────────────────────────────── */
.spaar-info-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1001; align-items: flex-start; justify-content: center; padding-top: 140px; }
.spaar-info-overlay.open { display: flex; }
.spaar-info-modal { background: var(--white); border-radius: 12px; width: 100%; max-width: 420px; box-shadow: 0 8px 40px rgba(0,0,0,.18); overflow: hidden; }
.spaar-info-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); }
.spaar-info-modal__title { font-family: var(--font-heading); font-size: 17px; font-weight: 800; text-transform: uppercase; color: var(--black); }
.spaar-info-modal__close { width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid var(--gray-200); background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: 14px; transition: all var(--transition); }
.spaar-info-modal__close:hover { border-color: var(--orange); color: var(--orange); }
.spaar-info-modal__body { padding: 18px; }
.spaar-info-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.spaar-info-step:last-child { margin-bottom: 0; }
.spaar-info-step__num { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.spaar-info-step__text { font-size: 13px; color: var(--black); line-height: 1.5; }
.spaar-info-step__text strong { color: var(--black); }

/* ── Sidebar nav ─────────────────────────────────────────────── */
.ogo-account-nav { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.ogo-account-nav-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; font-size: 13.5px; font-weight: 500; color: var(--black); border-bottom: 1px solid var(--gray-100); text-decoration: none; transition: background var(--transition), color var(--transition); }
.ogo-account-nav-item:last-child { border-bottom: none; }
.ogo-account-nav-item svg { color: var(--gray-400); flex-shrink: 0; transition: color var(--transition); }
.ogo-account-nav-item:hover { background: var(--gray-50); color: var(--orange); }
.ogo-account-nav-item:hover svg { color: var(--orange); }
.ogo-account-nav-item.active { color: var(--orange); background: rgba(249,115,22,.05); font-weight: 600; border-left: 3px solid var(--orange); padding-left: 13px; }
.ogo-account-nav-item.active svg { color: var(--orange); }
.ogo-account-nav-item.danger:hover { color: var(--red); background: rgba(231,76,60,.04); }
.ogo-account-nav-item.danger:hover svg { color: var(--red); }

/* ── Panel head ──────────────────────────────────────────────── */
.ogo-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ogo-panel-title { font-family: var(--font-heading); font-size: 24px; font-weight: 800; text-transform: uppercase; color: var(--black); letter-spacing: .02em; }

/* ── WooCommerce notices stijl reset ─────────────────────────── */
.account-main .woocommerce-message,
.account-main .woocommerce-error,
.account-main .woocommerce-info { border-radius: 8px; margin-bottom: 20px; border-top: none; padding: 14px 18px; font-size: 14px; }
.account-main .woocommerce-message { background: rgba(39,174,96,.08); border-left: 4px solid var(--green); color: #1d6b3a; }
.account-main .woocommerce-error  { background: rgba(231,76,60,.08); border-left: 4px solid var(--red); color: #8b1a1a; }
.account-main .woocommerce-info   { background: rgba(249,115,22,.08); border-left: 4px solid var(--orange); color: #7a5200; }

/* ── Orders ──────────────────────────────────────────────────── */
.ogo-orders-list { display: flex; flex-direction: column; gap: 12px; }
.ogo-order-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; transition: box-shadow var(--transition); }
.ogo-order-card:hover { box-shadow: var(--shadow-md); }
.ogo-order-head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; padding: 14px 20px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.ogo-order-num { font-size: 13px; font-weight: 700; color: var(--black); }
.ogo-order-num span { font-weight: 400; color: var(--gray-600); font-size: 12px; display: block; margin-top: 1px; }
.ogo-order-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.ogo-order-status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ogo-order-status--delivered { background: rgba(39,174,96,.1); color: var(--green); }
.ogo-order-status--shipping  { background: rgba(41,128,185,.1); color: #2980b9; }
.ogo-order-status--pending   { background: rgba(249,115,22,.1); color: var(--orange); }
.ogo-order-status--cancelled { background: rgba(231,76,60,.1); color: var(--red); }
.ogo-order-status--default   { background: var(--gray-100); color: var(--gray-600); }
.ogo-order-total { font-size: 15px; font-weight: 800; color: var(--black); text-align: right; }
.ogo-order-total span { font-size: 11px; font-weight: 400; color: var(--gray-400); display: block; }
.ogo-order-items { display: flex; align-items: center; gap: 10px; padding: 14px 20px; }
.ogo-order-thumb { width: 52px; height: 52px; flex-shrink: 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; overflow: hidden; padding: 4px; display: flex; align-items: center; justify-content: center; }
.ogo-order-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ogo-order-thumb--more { background: var(--gray-100); font-size: 12px; font-weight: 700; color: var(--gray-600); }
.ogo-order-foot { padding: 12px 20px; border-top: 1px solid var(--gray-100); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ogo-order-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius); font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--gray-200); color: var(--black); background: var(--white); font-family: var(--font-body); text-decoration: none; transition: all var(--transition); }
.ogo-order-btn:hover { border-color: var(--orange); color: var(--orange); }
.ogo-order-btn--primary { background: var(--orange); color: #fff !important; border-color: var(--orange); }
.ogo-order-btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.ogo-pagination { display: flex; gap: 8px; margin-top: 20px; }
.ogo-page-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; border: 1.5px solid var(--gray-200); color: var(--black); background: var(--white); text-decoration: none; transition: all var(--transition); }
.ogo-page-btn:hover { border-color: var(--orange); color: var(--orange); }

/* ── Account details form ────────────────────────────────────── */
.ogo-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ogo-details-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.ogo-details-card--full { grid-column: 1 / -1; }
.ogo-details-card__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.ogo-details-card__title { font-size: 13px; font-weight: 700; color: var(--black); }
.ogo-details-card__action { font-size: 12px; color: var(--orange); font-weight: 600; text-decoration: none; }
.ogo-details-card__action:hover { text-decoration: underline; }
.ogo-details-card__body { padding: 18px; }
.ogo-detail-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.ogo-detail-row:last-child { margin-bottom: 0; }
.ogo-detail-label { font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .07em; }
.ogo-detail-value { font-size: 14px; color: var(--black); }
.ogo-details-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ogo-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.ogo-field:last-child { margin-bottom: 0; }
.ogo-field label { font-size: 12.5px; font-weight: 600; color: var(--black); }
.ogo-field label .req { color: var(--orange); margin-left: 2px; }
.ogo-field input, .ogo-field select, .ogo-field textarea { height: 44px; border: 1.5px solid var(--gray-200) !important; border-radius: var(--radius) !important; padding: 0 14px !important; font-size: 14px !important; font-family: var(--font-body) !important; color: var(--black) !important; background: var(--white) !important; outline: none !important; box-shadow: none !important; transition: border-color var(--transition); }
.ogo-field input:focus, .ogo-field select:focus { border-color: var(--orange) !important; box-shadow: 0 0 0 3px rgba(249,115,22,.1) !important; }
.ogo-field input::placeholder { color: var(--gray-400); }
.ogo-pw-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.ogo-form-footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--gray-200); }
.ogo-save-btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 24px; background: var(--orange); color: #fff; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: background var(--transition); }
.ogo-save-btn:hover { background: var(--orange-dark); }

/* ── Adressen ────────────────────────────────────────────────── */
.ogo-address-desc { font-size: 13px; color: var(--gray-600); margin-bottom: 20px; }
.ogo-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ogo-address-card { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 10px; overflow: hidden; transition: border-color var(--transition); }
.ogo-address-card--default { border-color: var(--orange); }
.ogo-address-card__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.ogo-address-card__title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--black); }
.ogo-address-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--orange); background: rgba(249,115,22,.1); border-radius: 4px; padding: 2px 7px; }
.ogo-address-edit { font-size: 12px; color: var(--orange); font-weight: 600; text-decoration: none; }
.ogo-address-edit:hover { text-decoration: underline; }
.ogo-address-card__body { padding: 16px; }
.ogo-address-card__body address { font-size: 13.5px; color: var(--gray-600); line-height: 1.7; font-style: normal; }
.ogo-address-empty { font-size: 13px; color: var(--gray-400); font-style: italic; }

/* ── Facturen ────────────────────────────────────────────────── */
.ogo-inv-table { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.ogo-inv-head { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr auto; padding: 11px 20px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .07em; gap: 12px; }
.ogo-inv-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr auto; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--gray-100); font-size: 13.5px; gap: 12px; }
.ogo-inv-row:last-child { border-bottom: none; }
.ogo-inv-row:hover { background: var(--gray-50); }
.ogo-inv-num { font-weight: 600; color: var(--black); }
.ogo-inv-date { color: var(--gray-600); }
.ogo-inv-amount { font-weight: 700; }
.ogo-inv-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.ogo-inv-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ogo-inv-status--paid { background: rgba(39,174,96,.1); color: var(--green); }
.ogo-inv-status--open { background: rgba(249,115,22,.1); color: var(--orange); }
.ogo-inv-download { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--orange); text-decoration: none; transition: color var(--transition); white-space: nowrap; }
.ogo-inv-download:hover { color: var(--orange-dark); text-decoration: underline; }

/* ── Hart / Verlanglijst knop op productkaart ────────────────── */
.product-card { position: relative; }
.pc-wish-btn { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1.5px solid var(--gray-200); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gray-400); transition: all var(--transition); box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 0; }
.pc-wish-btn:hover { border-color: var(--orange); color: var(--orange); }
.pc-wish-btn.active { border-color: var(--orange); color: var(--orange); background: rgba(249,115,22,.08); }
.pc-wish-btn.active svg { fill: var(--orange); }

/* ── Panel koptekst teller ──────────────────────────────────── */
.ogo-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ogo-panel-count { font-size: 12px; font-weight: 600; color: var(--gray-400); background: var(--gray-100); border-radius: 20px; padding: 3px 10px; }

/* ── Verlanglijst grid ──────────────────────────────────────── */
.ogo-wish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ogo-wish-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transition); }
.ogo-wish-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.ogo-wish-card__img { display: block; aspect-ratio: 1; background: var(--gray-50); overflow: hidden; }
.ogo-wish-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .3s ease; }
.ogo-wish-card:hover .ogo-wish-card__img img { transform: scale(1.04); }
.ogo-wish-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ogo-wish-card__stock { font-size: 11px; font-weight: 700; }
.ogo-wish-card__stock.in  { color: var(--green); }
.ogo-wish-card__stock.out { color: var(--red); }
.ogo-wish-card__name { font-size: 13px; font-weight: 600; color: var(--black); text-decoration: none; line-height: 1.35; }
.ogo-wish-card__name:hover { color: var(--orange); }
.ogo-wish-card__sku { font-size: 11px; color: var(--gray-400); }
.ogo-wish-card__price { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.ogo-wish-card__price-excl { font-size: 14px; font-weight: 700; color: var(--black); }
.ogo-wish-card__price-excl em { font-size: 11px; font-weight: 500; color: var(--gray-400); font-style: normal; }
.ogo-wish-card__price-incl { font-size: 11px; color: var(--gray-400); }
.ogo-wish-card__price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.ogo-wish-card__actions { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ogo-wish-card__cart-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 12px; background: var(--orange); color: #fff; border: none; border-radius: var(--radius); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: background var(--transition); text-decoration: none; }
.ogo-wish-card__cart-btn:hover { background: var(--orange-dark); }
.ogo-wish-card__remove-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 7px 12px; background: transparent; border: 1.5px solid var(--gray-200); border-radius: var(--radius); font-size: 12px; font-weight: 600; color: var(--gray-500); cursor: pointer; font-family: var(--font-body); transition: all var(--transition); }
.ogo-wish-card__remove-btn:hover { border-color: var(--red); color: var(--red); background: rgba(231,76,60,.04); }

/* ── Empty state / CTA ───────────────────────────────────────── */
.ogo-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; text-align: center; color: var(--gray-400); font-size: 14px; }

/* Favorieten-grid: responsive zodat de kaarten een comfortabele breedte houden
   (net als op de shop). De smallere account-kolom perst anders 3 smalle kolommen;
   auto-fill geeft 2 ruime kolommen in de account-kolom, meer op een breed scherm.
   De inline shop-grid-CSS laadt hier niet, dus de globale ul.products-regel overrulen. */
.account-main ul.products.ogo-fav-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
@media (max-width: 600px) {
  .account-main ul.products.ogo-fav-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.ogo-cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; background: var(--orange); color: #fff; border-radius: var(--radius); font-size: 14px; font-weight: 700; text-decoration: none; transition: background var(--transition); margin-top: 4px; }
.ogo-cta-btn:hover { background: var(--orange-dark); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .account-layout .pg { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  .ogo-details-grid, .ogo-address-grid { grid-template-columns: 1fr; }
  .ogo-details-card--full { grid-column: 1; }
  .spaar-milestones { grid-template-columns: 1fr 1fr; }
  .ogo-pw-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .acct-hero-top { flex-direction: column; }
  .acct-name { font-size: 32px; }
  /* Spaarbak-header: titel op eigen regel, daaronder pill links + knoppen rechts */
  .spaarbak__title { flex: 1 0 100%; }
  .spaar-toggle-actions { margin-left: auto; }
  .ogo-order-head { grid-template-columns: 1fr auto; }
  .ogo-order-total { display: none; }
  .ogo-inv-head, .ogo-inv-row { grid-template-columns: 1fr 1fr auto; }
  .ogo-inv-date, .ogo-inv-amount { display: none; }
  .ogo-pw-grid { grid-template-columns: 1fr; }
  .ogo-details-row2 { grid-template-columns: 1fr; }
}

/* ============================================
   WINKELWAGEN PAGINA
============================================ */

/* Page header */
.cart-page-header {
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
}
.cart-page-header .pg { display: flex; align-items: center; gap: 14px; }
.cart-page-header h1 {
  font-family: var(--font-heading);
  font-size: 38px; font-weight: 800;
  text-transform: uppercase;
  color: var(--black); line-height: 1;
  letter-spacing: .01em; margin: 0;
}
.cart-count-badge {
  display: inline-flex; align-items: center;
  background: var(--gray-100); color: var(--gray-600);
  font-size: 13px; font-weight: 600;
  padding: 5px 14px; border-radius: 20px;
  margin-top: 4px;
}

/* 2-kolom layout */
.cart-layout { padding: 36px 0 80px; background: var(--gray-50); }
.cart-layout .pg {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}

/* Cart items kolom */
.cart-items-list {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}
.cart-items-list .cart-item:first-child { border-top: none; }
.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--gray-100);
  position: relative;
  transition: background var(--transition);
}
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: var(--gray-50); }

.cart-item__thumb {
  width: 80px; height: 80px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; overflow: hidden; flex-shrink: 0;
}
.cart-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-item__thumb a { display: block; width: 100%; height: 100%; }

.cart-item__brand {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--orange); margin-bottom: 3px;
}
.cart-item__name { font-size: 14px; font-weight: 500; color: var(--black); line-height: 1.35; margin-bottom: 4px; }
.cart-item__name a { color: inherit; text-decoration: none; }
.cart-item__name a:hover { color: var(--orange); }
.cart-item__sku { font-family: monospace; font-size: 11px; color: var(--gray-400); margin-bottom: 5px; }
.cart-item__link { font-size: 12px; font-weight: 600; color: var(--orange); transition: color var(--transition); }
.cart-item__link:hover { color: var(--orange-dark); text-decoration: underline; }

/* Qty controls */
.qty-ctrl {
  display: flex; align-items: center;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden; flex-shrink: 0;
}
.qty-ctrl .qty-minus,
.qty-ctrl .qty-plus {
  width: 34px; height: 40px; border: none;
  background: var(--gray-50);
  font-size: 16px; color: #555;
  cursor: pointer; transition: background var(--transition);
  line-height: 1;
}
.qty-ctrl .qty-minus:hover,
.qty-ctrl .qty-plus:hover { background: var(--gray-100); color: var(--black); }
.qty-ctrl .qty-input {
  width: 44px; height: 40px; border: none;
  border-left: 1.5px solid var(--gray-200);
  border-right: 1.5px solid var(--gray-200);
  text-align: center; font-size: 14px; font-weight: 600;
  outline: none; font-family: var(--font-body);
  -moz-appearance: textfield;
}
.qty-ctrl .qty-input::-webkit-outer-spin-button,
.qty-ctrl .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Eenheidsprijs */
.cart-item__unit-price { text-align: right; flex-shrink: 0; min-width: 80px; }
.cart-item__unit-price .price-row {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 4px;
}
.cart-item__unit-price .price-val { font-size: 13px; color: var(--gray-600); }
.cart-item__unit-price .price-label { font-size: 11px; color: var(--gray-400); }
.cart-item__unit-price .woocommerce-Price-amount { font-size: 13px; color: var(--gray-600); }

/* Regeltotaal */
.cart-item__total { text-align: right; flex-shrink: 0; min-width: 72px; }
.cart-item__total .total-val { font-size: 16px; font-weight: 700; color: var(--black); }
.cart-item__total .woocommerce-Price-amount { font-size: 16px; font-weight: 700; color: var(--black); }

/* Verwijder knop */
.cart-item__remove {
  position: absolute; top: 14px; right: 16px;
  width: 28px; height: 28px;
  background: transparent; border: none;
  border-radius: 6px; cursor: pointer;
  color: #bbb;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
}
.cart-item__remove:hover { color: #e74c3c; background: rgba(231,76,60,.08); }
.cart-item__remove svg { width: 16px; height: 16px; }

/* Verder winkelen */
.cart-continue {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--gray-600);
  padding: 4px 0; transition: color var(--transition);
  text-decoration: none;
}
.cart-continue:hover { color: var(--black); }

/* Altijd Handig! strip */
/* Lengte-keuze (meerlagenbuis op rol) */
.prod-length { margin: 4px 0 6px; }
.prod-length__label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--black); margin-bottom: 9px; }
.prod-length__label svg { color: var(--orange); }
.prod-length__opts { display: flex; flex-direction: column; gap: 7px; }
.prod-length__opt {
  display: grid;
  grid-template-columns: 64px 1fr auto 22px;
  align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer; font-family: var(--font-body);
  transition: border-color var(--transition), background var(--transition);
}
.prod-length__opt:hover { border-color: var(--gray-400); }
.prod-length__opt.is-active { border-color: var(--orange); background: #fff7ed; }
.prod-length__m { font-size: 15px; font-weight: 800; color: var(--black); }
.prod-length__pm { font-size: 12.5px; color: var(--gray-500, #888); }
.prod-length__total { font-size: 15px; font-weight: 700; color: var(--black); white-space: nowrap; }
.prod-length__check { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--gray-300); color: transparent; transition: all var(--transition); }
.prod-length__opt.is-active .prod-length__check { background: var(--orange); border-color: var(--orange); color: #fff; }
.prod-length__more { display: block; margin-top: 4px; padding: 9px 14px; font-size: 13px; color: var(--gray-600); text-decoration: none; border: 1px dashed var(--gray-300); border-radius: 10px; transition: border-color var(--transition); }
.prod-length__more:hover { border-color: var(--orange); }
.prod-length__more strong { color: var(--orange); }
@media (max-width: 420px) {
  .prod-length__opt { grid-template-columns: 52px 1fr auto 20px; gap: 8px; padding: 10px 12px; }
  .prod-length__pm { font-size: 11.5px; }
}

/* Buigveer-upsell op de productpagina (onder de winkelwagenknop) */
.prod-veer {
  display: block;
  background: linear-gradient(180deg, #fff7ed, #fffdfa);
  border: 1px solid rgba(249,115,22,.28);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0 4px;
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.prod-veer:hover { border-color: var(--orange); box-shadow: 0 6px 18px rgba(249,115,22,.12); }
.prod-veer__head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 14px; color: var(--black); margin-bottom: 10px;
}
.prod-veer__head svg { color: var(--orange); flex-shrink: 0; }
.prod-veer__row { display: flex; align-items: center; gap: 11px; }
.prod-veer__img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; border-radius: 6px; background: #fff; }
.prod-veer__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prod-veer__name { font-size: 13px; font-weight: 600; color: #222; line-height: 1.3; }
.prod-veer__hint { font-size: 12px; color: var(--gray-500, #888); }
.prod-veer__add {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  background: var(--orange); color: #fff;
  border-radius: 8px; padding: 8px 12px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: background var(--transition);
}
.prod-veer:hover .prod-veer__add { background: var(--orange-dark); }
.prod-veer__price { font-weight: 700; }
@media (max-width: 380px) {
  .prod-veer__add { padding: 8px 10px; font-size: 12px; }
  .prod-veer__hint { display: none; }
}

/* Buigveer-upsell op de winkelwagen ("Buig je wel veilig?") */
.veer-upsell {
  background: linear-gradient(180deg, #fff7ed, #fffdfa);
  border: 1px solid rgba(249,115,22,.28);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 20px;
}
.veer-upsell__head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-heading);
  font-size: 16px; font-weight: 800; color: var(--black);
}
.veer-upsell__icon { color: var(--orange); flex-shrink: 0; }
.veer-upsell__text { font-size: 13px; color: var(--gray-600); line-height: 1.55; margin: 6px 0 14px; }
.veer-upsell__items { display: flex; flex-direction: column; gap: 10px; }
.veer-upsell__item {
  display: flex; align-items: center; gap: 12px;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 10px;
  padding: 10px 12px;
}
.veer-upsell__img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; border-radius: 6px; }
.veer-upsell__info { flex: 1; min-width: 0; }
.veer-upsell__name { font-size: 13px; font-weight: 600; color: #222; line-height: 1.35; margin-bottom: 3px; }
.veer-upsell__price { font-size: 14px; font-weight: 700; color: var(--black); }
.veer-upsell__price .woocommerce-Price-amount { font-size: 14px; font-weight: 700; color: var(--black); }
.veer-upsell__btw { font-size: 11px; font-weight: 400; color: #aaa; }
.veer-upsell__add {
  flex-shrink: 0;
  background: var(--orange); color: #fff;
  border: none; border-radius: 8px;
  padding: 9px 14px; font-size: 13px; font-weight: 700;
  font-family: var(--font-body); cursor: pointer;
  transition: background var(--transition);
}
.veer-upsell__add:hover { background: var(--orange-dark); }
@media (max-width: 480px) {
  .veer-upsell__item { flex-wrap: wrap; }
  .veer-upsell__add { width: 100%; margin-top: 4px; }
}

.upsell-strip {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 20px;
}
.upsell-strip__title {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--black);
  padding: 11px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: var(--gray-50);
}
.upsell-item {
  display: flex; flex-direction: row; align-items: center;
  gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: background var(--transition);
}
.upsell-item:last-child { border-bottom: none; }
.upsell-item:hover { background: #fafafa; }
.upsell-item__img {
  width: 72px; height: 72px;
  object-fit: contain; flex-shrink: 0;
  display: block;
}
.upsell-item__info { flex: 1; min-width: 0; }
.upsell-item__name { font-size: 13px; font-weight: 500; color: #222; line-height: 1.35; margin-bottom: 4px; }
.upsell-item__price { font-size: 14px; font-weight: 700; color: var(--black); }
.upsell-item__price .woocommerce-Price-amount { font-size: 14px; font-weight: 700; color: var(--black); }
.upsell-item__add {
  flex-shrink: 0; padding: 7px 14px;
  background: var(--orange); border: none;
  color: var(--white); border-radius: 6px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background var(--transition);
  font-family: var(--font-body); white-space: nowrap;
}
.upsell-item__add:hover { background: var(--orange-dark); }

/* Order summary sidebar */
.order-summary { position: sticky; top: 90px; }
.summary-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 24px;
}
.summary-card__title { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 16px; }
.summary-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0; font-size: 14px; color: var(--black);
}
.summary-row .label { color: var(--gray-600); font-weight: 400; }
.summary-row .val { font-weight: 600; }
.summary-row .val .woocommerce-Price-amount { font-size: 14px; font-weight: 600; }
.summary-divider { height: 1px; background: var(--gray-200); margin: 12px 0; }
.summary-row--total { padding: 8px 0 4px; }
.summary-row--total .label { font-size: 15px; font-weight: 700; color: var(--black); }
.summary-row--total .val { font-size: 22px; font-weight: 800; color: var(--black); }
.summary-row--total .val .woocommerce-Price-amount { font-size: 22px; font-weight: 800; }
.summary-row--discount .val { color: var(--green); }
.summary-row--shipping .val { color: var(--green); font-weight: 700; }

.summary-cta {
  display: block; width: 100%;
  padding: 15px 0;
  background: #F97316; color: #fff;
  border: none; border-radius: 10px;
  font-size: 16px; font-weight: 700;
  text-align: center; cursor: pointer;
  transition: background var(--transition);
  font-family: var(--font-body);
  letter-spacing: .01em;
  margin-top: 20px;
  text-decoration: none;
  line-height: 1.4;
}
.summary-cta:hover { background: #d68910; color: #fff; }

.summary-secure {
  display: flex; align-items: center; gap: 6px;
  justify-content: center;
  font-size: 11.5px; color: var(--gray-400);
  margin-top: 10px; text-align: center; line-height: 1.4;
}

.summary-tp {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; padding-top: 14px; padding-bottom: 12px;
  border-top: 1px solid var(--gray-100);
}
.summary-tp__stars { display: flex; gap: 2px; }
.summary-tp__star {
  width: 16px; height: 16px;
  background: #00b67a;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
.summary-tp__star--half { background: linear-gradient(90deg, #00b67a 50%, rgba(0,0,0,.1) 50%); }
.summary-tp__text { font-size: 11.5px; color: var(--gray-400); font-weight: 500; }
.summary-tp__text strong { color: #555; font-weight: 700; }

/* Lege winkelwagen */
.cart-empty-state { padding: 60px 0 80px; background: var(--gray-50); }
.cart-empty-inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 60px 20px;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px;
  text-align: center; color: var(--gray-400); font-size: 14px;
  max-width: 480px; margin: 0 auto;
}
.cart-empty-inner h2 { font-family: var(--font-heading); font-size: 26px; font-weight: 800; text-transform: uppercase; color: var(--black); margin: 8px 0 0; }
.cart-empty-inner p { color: var(--gray-600); margin: 0; }

/* ============================================
   WooCommerce notices — clean, in thema
   (bijv. "… is toegevoegd aan je winkelwagen")
============================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-left: 4px solid var(--green);
  border-radius: 10px;
  padding: 15px 18px;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--black);
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  list-style: none;
}
.woocommerce-info  { border-left-color: var(--orange); }
.woocommerce-error { border-left-color: var(--red); }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: "";
  position: static;
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin: 0;
  border-radius: 50%;
  font-size: 0; color: transparent;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.woocommerce-info::before  { background-color: var(--orange); }
.woocommerce-error::before { background-color: var(--red); }

.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
  margin-left: auto;
  flex: 0 0 auto;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  line-height: 1.2;
  transition: background .2s;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover { background: var(--orange-dark); color: #fff; }

@media (max-width: 560px) {
  .woocommerce-message a.button,
  .woocommerce-info a.button,
  .woocommerce-error a.button { flex: 1 0 100%; margin: 12px 0 0; text-align: center; }
}

/* WooCommerce default cart neutraliseren */
.woocommerce-cart .woocommerce { padding: 0 !important; max-width: none !important; border: none !important; box-shadow: none !important; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) {
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { padding: 0 20px; }
}
/* Verwijder border/padding van het form-element zelf */
form.woocommerce-cart-form { border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
/* Neutraliseer alle WooCommerce borders op cart_item divs */
.cart-items-list .cart_item,
.cart-items-list .cart-item { border: none !important; border-bottom: 1px solid rgba(0,0,0,.06) !important; }
.cart-items-list .cart_item:last-child,
.cart-items-list .cart-item:last-child { border-bottom: none !important; }

/* Prullebak: WooCommerce zet .remove { color: red !important; position: absolute; top:0; left:0 } — override alles */
.woocommerce-cart-form .cart-item__remove.remove {
  color: #bbb !important;
  background: transparent !important;
  border-radius: 6px !important;
  position: absolute !important;
  top: 14px !important;
  left: auto !important;
  right: 16px !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}
.woocommerce-cart-form .cart-item__remove.remove svg { width: 16px !important; height: 16px !important; font-size: 16px !important; }
.woocommerce-cart-form .cart-item__remove.remove:hover {
  color: #e74c3c !important;
  background: rgba(231,76,60,.08) !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .cart-layout .pg { grid-template-columns: 1fr; }
  .order-summary { position: static; }
}
@media (max-width: 768px) {
  .cart-page-header h1 { font-size: 28px; }

  /* Cart item → compacte 2-koloms kaart: thumb links, info + voetrij rechts */
  .cart-item {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "thumb info"
      "thumb foot";
    column-gap: 14px;
    row-gap: 12px;
    padding: 16px 44px 16px 16px; /* ruimte rechts voor de absolute verwijder-knop */
    align-items: start;
  }
  .cart-item__thumb { grid-area: thumb; width: 64px; height: 64px; }
  .cart-item__info  { grid-area: info; }
  .cart-item__link  { display: none; } /* "Bekijk product" weg op mobiel — naam is al klikbaar */

  /* Voetrij: qty links, regeltotaal rechts — beide in dezelfde grid-cel */
  .qty-ctrl {
    grid-area: foot;
    justify-self: start;
    align-self: center;
  }
  .qty-ctrl .qty-minus,
  .qty-ctrl .qty-plus { width: 38px; height: 38px; }
  .qty-ctrl .qty-input { width: 40px; height: 38px; }

  .cart-item__unit-price { display: none; } /* prijs p/st weg, totaal blijft */
  .cart-item__total {
    display: block;
    grid-area: foot;
    justify-self: end;
    align-self: center;
    min-width: 0;
  }

  .cart-item__remove { top: 12px; right: 12px; }
}

/* ============================================
   CHECKOUT — co-* namespace
============================================ */

/* Header */
.co-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 0;
  position: sticky; top: 0; z-index: 900;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.co-header .pg { display: flex; align-items: center; justify-content: space-between; }
.co-header__center { display: flex; align-items: center; }
.co-header__back {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--gray-600); font-weight: 500;
  transition: color .2s;
}
.co-header__back:hover { color: var(--orange); }
.co-header__secure {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--gray-600); font-weight: 500;
}
.co-header__secure svg { color: #27ae60; }

/* Footer */
.co-footer { background: #1a1a1a; padding: 18px 0; }
.co-footer .pg { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.co-footer__links { display: flex; gap: 20px; }
.co-footer__links a { font-size: 12px; color: rgba(255,255,255,.4); transition: color .2s; }
.co-footer__links a:hover { color: rgba(255,255,255,.7); }
.co-footer__copy { font-size: 12px; color: rgba(255,255,255,.2); }
.co-footer__payments { display: flex; gap: 6px; align-items: center; }
.co-footer .pay-badge { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; padding: 3px 6px; display: flex; align-items: center; }

/* Layout grid */
.co-layout { padding: 36px 0 80px; background: var(--gray-50); min-height: 60vh; }
.co-layout *, .co-layout *::before, .co-layout *::after { box-sizing: border-box; }
.co-layout > .pg {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 28px !important;
  align-items: start !important;
}
/* Neutraliseer WC wrappers op checkout — voorkom breedte-beperkingen */
.woocommerce-checkout .woocommerce,
.woocommerce-page.woocommerce-checkout .woocommerce {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}
/* ── Checkout notices wrapper positie ────────────────────────────────────── */
.woocommerce-checkout .woocommerce-notices-wrapper {
  max-width: var(--container);
  margin: 20px auto 0;
  padding: 0 32px;
}
/* Verberg WooCommerce's eigen error-opmaak — JS vervangt dit */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error { display: none !important; }
.woocommerce-NoticeGroup-checkout { display: none !important; }

/* ── Onze eigen foutmelding component ────────────────────────────────────── */
.co-notice {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  font-family: var(--font-body);
}
.co-notice--error {
  border: 1.5px solid #fad0cc;
  background: #fff;
  box-shadow: 0 2px 12px rgba(231,76,60,.07);
}
.co-notice__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  background: #fff4f3;
  border-bottom: 1px solid #fad0cc;
  font-size: 13.5px;
  font-weight: 700;
  color: #b91c1c;
}
.co-notice__head svg { flex-shrink: 0; stroke: #b91c1c; }
.co-notice__body { padding: 4px 0; }
.co-notice__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid #fef2f2;
  font-size: 13px;
  color: var(--black);
  line-height: 1.5;
}
.co-notice__row:last-child { border-bottom: none; }
.co-notice__dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin-top: 7px;
}
.co-notice__text strong { font-weight: 700; }

/* Sectie kaarten */
.co-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.co-section__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--gray-100);
}
.co-section__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--black);
}
.co-section__num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--orange); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.co-section__link {
  font-size: 12.5px; color: var(--orange); font-weight: 600; transition: color .2s;
}
.co-section__link:hover { color: var(--orange-dark); text-decoration: underline; }
.co-section__body { padding: 24px; }

/* Veld rijen */
.co-row { display: grid; gap: 14px; margin-bottom: 14px; }
.co-row:last-child { margin-bottom: 0; }
.co-row--2 { grid-template-columns: 1fr 1fr; }
.co-row--13 { grid-template-columns: 130px 1fr; }
.co-row > * { min-width: 0; width: 100%; }

/* WooCommerce veld stijlen binnen co-section */
.co-section .form-row { margin: 0 0 14px; padding: 0; display: block; width: 100%; box-sizing: border-box; }
.co-row .form-row { margin: 0; }
/* WooCommerce wraps inputs in a span — zorg dat die block + vol-breed is */
.co-section .form-row .woocommerce-input-wrapper { display: block; width: 100%; }
/* Verwijder WC float-layout die de grid kapot maakt */
.co-section .form-row.form-row-wide,
.co-section .form-row.form-row-first,
.co-section .form-row.form-row-last { float: none !important; width: 100% !important; clear: none !important; }
.co-section .form-row label,
.co-section .form-row > label { font-size: 12.5px; font-weight: 600; color: var(--black); margin-bottom: 5px; display: block; }
.co-section .form-row label .optional { color: var(--gray-400); font-weight: 400; }
.co-section .form-row label .required { color: var(--orange); }
.co-section .form-row input.input-text,
.co-section .form-row input[type="text"],
.co-section .form-row input[type="email"],
.co-section .form-row input[type="tel"],
.co-section .form-row input[type="password"],
.co-section .form-row select,
.co-section .form-row textarea {
  width: 100%;
  height: 44px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 0 14px;
  font-size: 14px; font-family: var(--font-body);
  color: var(--black); background: var(--white);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.co-section .form-row textarea { height: auto; min-height: 80px; padding: 12px 14px; resize: vertical; }
.co-section .form-row input.input-text:focus,
.co-section .form-row input[type="text"]:focus,
.co-section .form-row input[type="email"]:focus,
.co-section .form-row input[type="tel"]:focus,
.co-section .form-row select:focus,
.co-section .form-row textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.1);
}
.co-section .form-row select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
/* Groen weghalen op gevalideerde velden — te veel visuele ruis */
.co-section .woocommerce-validated .input-text,
.co-section .woocommerce-validated input { border-color: var(--gray-200) !important; }
/* Rood op ongeldige velden */
.co-section .woocommerce-invalid .input-text,
.co-section .woocommerce-invalid input { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(231,76,60,.08) !important; }
.co-section .form-row .woocommerce-error { font-size: 11.5px; color: var(--red, #e74c3c); margin-top: 4px; }

/* Bedrijfsgegevens blok — altijd zichtbaar, muted als niet-actief */
.co-company {
  margin-top: 14px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s;
}
.co-company__label {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
}
.co-company__chk { width: 18px; height: 18px; accent-color: var(--orange); flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.co-company__toggle { font-size: 13.5px; color: var(--gray-600); cursor: pointer; line-height: 1.5; font-weight: 500; }
.co-company__toggle span { color: var(--gray-400); font-weight: 400; }
.co-company__always {
  padding: 0 16px 16px;
  border-top: 1px solid var(--gray-200);
}
.co-company__always .form-row { margin-bottom: 0; }
.co-company__fields {
  display: none;
  padding: 0 16px 16px;
}
.co-company.open .co-company__fields { display: block; }
.co-company.open { border-color: var(--orange); }
.co-company.open .co-company__toggle { color: var(--black); }

/* Zakelijk checkbox */
.co-check {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; margin-bottom: 14px;
}
.co-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--orange); flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.co-check span { font-size: 13.5px; color: var(--black); line-height: 1.5; }
.co-check em { color: var(--gray-600); font-style: normal; }

/* Account aanmaken bij checkout */
.co-create-account {
  margin-top: 14px; padding: 14px 16px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
}
.co-check--account { margin-bottom: 0; align-items: flex-start; }
.co-check--account span { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
.co-check--account strong { display: block; font-size: 13.5px; color: var(--black); font-weight: 700; margin-bottom: 1px; }

/* Login-reminder bij checkout (terugkerende klant) */
.woocommerce-form-login-toggle { max-width: 1200px; margin: 0 auto 4px; }
.woocommerce-form-login.login {
  max-width: 1200px; margin: 0 auto 22px; padding: 22px 24px;
  background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.woocommerce-form-login.login > p:first-of-type { margin-top: 0; color: var(--gray-600); font-size: 13.5px; }
.woocommerce-form-login.login .form-row { margin-bottom: 14px; }
.woocommerce-form-login.login label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--black); }
.woocommerce-form-login.login .input-text {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 1px solid var(--gray-300, #d1d5db); border-radius: 9px; font-size: 14.5px;
}
.woocommerce-form-login.login .input-text:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.woocommerce-form-login.login .woocommerce-form-login__rememberme { font-weight: 400; color: var(--gray-600); display: flex; align-items: center; gap: 8px; }
.woocommerce-form-login.login .woocommerce-form-login__rememberme input { width: 16px; height: 16px; accent-color: var(--orange); }
.woocommerce-form-login.login .button {
  background: var(--orange); color: #fff; border: none; border-radius: 9px;
  padding: 11px 22px; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.woocommerce-form-login.login .button:hover { background: var(--orange-dark, #ea580c); }
.woocommerce-form-login.login .lost_password a { font-size: 13px; color: var(--gray-600); }

/* Bedrijfsgegevens blok */
/* (co-company styles staan hierboven — oud blok verwijderd) */

/* Ander bezorgadres */
.co-ship-toggle { margin-top: 8px; }
.co-ship-toggle .co-check { margin-bottom: 8px; }
.co-ship-fields { display: none; padding-top: 16px; }
.co-ship-fields.open { display: block; }

/* Verzend opties */
.co-options { display: flex; flex-direction: column; gap: 8px; }
.co-option {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.co-option input[type="radio"] { display: none; }
.co-option:hover { border-color: var(--gray-400); }
.co-option.selected { border-color: var(--orange); background: rgba(249,115,22,.04); }
.co-option__radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--gray-200); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s;
}
.co-option.selected .co-option__radio { border-color: var(--orange); }
.co-option.selected .co-option__radio::after {
  content: ''; width: 8px; height: 8px;
  background: var(--orange); border-radius: 50%;
}
.co-option__info { flex: 1; }
.co-option__name { font-size: 14px; font-weight: 600; color: var(--black); }
.co-option__desc { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.co-option__price { font-size: 14px; font-weight: 700; color: var(--black); flex-shrink: 0; }
.co-badge-free { font-size: 12px; font-weight: 700; color: #27ae60; background: rgba(39,174,96,.1); padding: 2px 8px; border-radius: 4px; }

/* Verzekerd verzenden — checkbox-optie (zelfde look als verzendoptie) */
.co-option--insurance { margin-top: 8px; }
.co-option--insurance input[type="checkbox"] { display: none; }
.co-option__check {
  width: 18px; height: 18px; border-radius: 5px;
  border: 2px solid var(--gray-200); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
}
.co-option--insurance.selected,
.co-option--insurance:has(input:checked) { border-color: var(--orange); background: rgba(249,115,22,.04); }
.co-option--insurance.selected .co-option__check,
.co-option--insurance:has(input:checked) .co-option__check { border-color: var(--orange); background: var(--orange); }
.co-option--insurance.selected .co-option__check::after,
.co-option--insurance:has(input:checked) .co-option__check::after {
  content: ''; width: 5px; height: 9px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.co-option__sub { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.co-option__icon--insurance {
  width: 42px; height: 32px; border-radius: 5px; flex-shrink: 0;
  background: rgba(39,174,96,.1);
  display: flex; align-items: center; justify-content: center;
  color: #27ae60;
}

/* Betaalmethode sectie — reset + reskin WC #payment */
.co-section--payment .co-section__body { padding: 20px 24px 24px; }
.co-section--payment #payment { background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important; }
.co-section--payment #payment ul.payment_methods,
.co-section--payment #payment ul.wc_payment_methods {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  background: none !important; border: none !important;
}
.co-section--payment .wc_payment_method {
  border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  overflow: hidden; transition: border-color .2s;
}
.co-section--payment .wc_payment_method label {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--black);
  transition: background .2s;
  margin: 0;
}
.co-section--payment .wc_payment_method label img {
  max-height: 26px; width: auto; display: block; flex-shrink: 0;
}
.co-section--payment .wc_payment_method input[type="radio"] { display: none; }
/* Custom radio dot voor betaalmethode */
.co-section--payment .wc_payment_method label::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--gray-200); flex-shrink: 0;
  transition: border-color .2s;
}
.co-section--payment .wc_payment_method.co-pm-active { border-color: var(--orange); }
.co-section--payment .wc_payment_method.co-pm-active label { background: rgba(249,115,22,.04); }
.co-section--payment .wc_payment_method.co-pm-active label::before {
  border-color: var(--orange);
  background: radial-gradient(circle, var(--orange) 38%, transparent 38%);
}
/* :has() support voor moderne browsers */
.co-section--payment .wc_payment_method:has(input:checked) { border-color: var(--orange); }
.co-section--payment .wc_payment_method:has(input:checked) label { background: rgba(249,115,22,.04); }
.co-section--payment .wc_payment_method:has(input:checked) label::before {
  border-color: var(--orange);
  background: radial-gradient(circle, var(--orange) 38%, transparent 38%);
}
/* Payment box (gateway velden) */
.co-section--payment .payment_box {
  background: var(--gray-50) !important; border: none !important;
  border-top: 1px solid var(--gray-100); padding: 14px 16px !important;
  margin: 0 !important; border-radius: 0 !important;
  font-size: 13.5px; color: var(--gray-600);
}
.co-section--payment .payment_box p { margin: 0; }
.co-section--payment .payment_box select {
  width: 100%; height: 44px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  padding: 0 14px; font-size: 14px; font-family: var(--font-body);
  color: var(--black); background: var(--white); outline: none;
  margin-top: 10px; -webkit-appearance: none; appearance: none;
}

/* Opmerkingen wrapper (boven betaal-knop) */
.co-notes-wrap { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-100); }
.co-notes-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.co-notes-title { font-size: 13px; font-weight: 600; color: var(--black); }
.co-notes-opt { font-size: 12px; color: var(--gray-400); }
.co-notes-wrap .form-row { margin: 0; }

/* Submit knop (#place_order van WooCommerce) */
.co-section--payment .place-order { padding: 0 !important; margin-top: 20px !important; }
.co-section--payment #place_order {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; padding: 16px !important;
  background: var(--orange) !important; color: var(--white) !important;
  border: none !important; border-radius: var(--radius) !important;
  font-size: 16px !important; font-weight: 700 !important; cursor: pointer !important;
  transition: background .2s !important; font-family: var(--font-body) !important;
  letter-spacing: .02em !important; box-shadow: none !important;
}
.co-section--payment #place_order:hover { background: var(--orange-dark) !important; }
.co-section--payment .woocommerce-privacy-policy-text {
  font-size: 12px; color: var(--gray-400); text-align: center; margin-top: 10px;
}
.co-section--payment .woocommerce-privacy-policy-text a { color: var(--orange); }
.co-section--payment #payment .form-row.place-order::before { display: none; }

/* Sidebar: order summary */
.co-sidebar { position: sticky; top: 80px; }
.co-summary {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 10px; overflow: hidden; margin-bottom: 14px;
}
.co-summary__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.co-summary__title { font-size: 14px; font-weight: 700; color: var(--black); }
.co-summary__edit { font-size: 12px; color: var(--orange); font-weight: 600; transition: color .2s; }
.co-summary__edit:hover { color: var(--orange-dark); text-decoration: underline; }

.co-summary__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--gray-100);
}
.co-summary__item:last-child { border-bottom: none; }
.co-summary__thumb {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  padding: 4px; position: relative;
  /* geen overflow:hidden — badge moet buiten de thumb uitsteken */
}
.co-summary__thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border-radius: 4px; /* clips afbeelding aan ronde hoeken */
}
.co-summary__qty {
  position: absolute; top: -7px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--black); color: var(--white);
  border-radius: 20px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; z-index: 1;
}
.co-summary__info { flex: 1; min-width: 0; }
.co-summary__name { font-size: 12.5px; font-weight: 500; color: var(--black); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-summary__sku { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.co-summary__price { font-size: 13px; font-weight: 700; color: var(--black); flex-shrink: 0; }

/* Totalen */
.co-summary__totals { padding: 16px 20px; }
.co-sum-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 13.5px; }
.co-sum-row .lbl { color: var(--gray-600); }
.co-sum-row .val { font-weight: 600; }
.co-sum-divider { height: 1px; background: var(--gray-200); margin: 10px 0; }
.co-sum-row--total .lbl { font-size: 15px; font-weight: 700; color: var(--black); }
.co-sum-row--total .val { font-size: 21px; font-weight: 800; color: var(--black); }
.co-sum-note { font-size: 11px; color: var(--gray-400); margin-top: 6px; text-align: right; }
.co-free { color: #27ae60; font-weight: 700; }

/* USP blok */
.co-usp {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 10px; overflow: hidden;
}
.co-usp__head {
  padding: 13px 18px 11px; border-bottom: 1px solid var(--gray-100);
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--gray-400);
}
.co-usp__item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--gray-100);
}
.co-usp__item:last-child { border-bottom: none; }
.co-usp__icon {
  width: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
}
.co-usp__label { font-size: 13px; font-weight: 600; color: var(--black); }
.co-usp__sub { font-size: 11.5px; color: var(--gray-600); margin-top: 1px; }

/* Betaallogos onder USP blok */
.co-pay-logos {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  padding: 12px 18px;
  border-top: 1px solid var(--gray-100);
  background: var(--white);
}
/* In de summary card heeft de card zelf al 24px padding onderaan */
.summary-card .co-pay-logos { padding-bottom: 0; }
.co-pay-logo {
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 5px; padding: 4px 7px; line-height: 0;
}
.co-pay-logo img { display: block; height: 18px; width: auto; }

/* WooCommerce notices op checkout */
.woocommerce-checkout .woocommerce-NoticeGroup { max-width: 860px; margin: 0 auto 16px; padding: 0 40px; }

/* co-forms inner flex wrapper */
.co-forms { display: flex; flex-direction: column; min-width: 0; }

/* Opmerkingen sectie — grijs nummer badge */
.co-section__num--gray { background: var(--gray-200) !important; color: var(--gray-600) !important; }
.co-section__num-opt { font-size: 13px; font-weight: 400; color: var(--gray-400); margin-left: 4px; }

/* Verzendoptie icoon */
.co-option__icon--ship {
  width: 42px; height: 32px; border-radius: 5px; flex-shrink: 0;
  background: #e8f4fd;
  display: flex; align-items: center; justify-content: center;
  color: #2980b9;
}

/* Zorg dat eventuele co-notes-wrap restanten in betaal-sectie verborgen zijn */
.co-section--payment .co-notes-wrap { display: none; }

/* Submit wrap (terms + SSL) onder betaalmethode */
.co-submit-wrap {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-100);
}
.co-terms-note {
  font-size: 12.5px; color: var(--gray-600);
  margin-bottom: 16px; line-height: 1.6;
}
.co-terms-note a { color: var(--orange); text-decoration: underline; }
.co-ssl-note {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 12px; color: var(--gray-400); margin-top: 10px; text-align: center;
}

/* #place_order als flex rij voor icoon */
.co-section--payment #place_order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Fix place-order form-row layout */
.co-section--payment .form-row.place-order,
.co-section--payment .woocommerce-checkout-payment .place-order {
  display: block !important;
  padding: 0 !important;
}
/* Verberg WC privacy tekst — we tonen eigen co-terms-note */
.co-section--payment .woocommerce-privacy-policy-text { display: none !important; }

/* Credit card icoon vóór #place_order tekst via CSS ::before */
.co-section--payment #place_order::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  flex-shrink: 0;
}

/* ── Adres info-melding ──────────────────────────────────────────────────── */
.co-addr-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f7ff;
  border: 1px solid #d0e8ff;
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: 13px;
  color: #3a6ea5;
  margin-bottom: 18px;
  line-height: 1.4;
}
.co-addr-hint svg { flex-shrink: 0; opacity: .75; }

/* ── Full-width wrapper ──────────────────────────────────────────────────── */
.co-field--full { margin-bottom: 14px; width: 100%; }

/* ── Stad + Land rij: gelijke hoogte selects en inputs ──────────────────── */
.co-row--addr-bottom { align-items: start; }
.co-row--addr-bottom .co-field-wrap,
.co-row--addr-bottom .form-row { margin-bottom: 0 !important; }

/* ── Postcode | Huisnummer | Toevoeging (3-koloms) ──────────────────────── */
.co-row--pc-hnr-tov {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 12px;
  margin-bottom: 14px;
  align-items: end; /* inputs op dezelfde basislijn */
}
.co-row--pc-hnr-tov > * { min-width: 0; width: 100%; box-sizing: border-box; }
/* WC form-row in grid: margin/padding wegpoetsen zodat hoogte gelijk is */
.co-row--pc-hnr-tov .form-row {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.co-row--pc-hnr-tov .form-row label {
  display: block;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
}
.co-row--pc-hnr-tov .form-row .woocommerce-input-wrapper { display: block; width: 100%; }
.co-row--pc-hnr-tov .form-row input.input-text,
.co-row--pc-hnr-tov .form-row select { width: 100% !important; box-sizing: border-box !important; }

/* co-row--2 grids: form-row margin ook wegnemen voor strakke uitlijning */
.co-row--2 .form-row { margin: 0 !important; padding: 0 !important; float: none !important; width: 100% !important; }
.co-row--2 .co-field-wrap { margin: 0; }

/* ── Co-field-wrap: custom label+input wrapper (voor huisnummer e.d.) ─── */
.co-field-wrap,
.co-field-auto-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* co-field-label: zelfde styling als WC form-row labels */
.co-field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 5px;
  line-height: 1.4;
}
/* Oranje sterretje, geen stippellijntje — zelfde als WC .required */
.co-field-label abbr.required,
.co-field-label abbr {
  color: var(--orange);
  text-decoration: none !important;
  border-bottom: none !important;
  cursor: default;
}
/* WC abbr.required ook geen stippellijntje */
.co-section abbr.required {
  text-decoration: none !important;
  border-bottom: none !important;
  cursor: default;
}
/* Inputs inside custom wrappers: volledige checkout-input styling */
.co-field-wrap input.input-text,
.co-field-auto-wrap input.input-text {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius) !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  color: var(--black) !important;
  background: var(--white) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
}
.co-field-wrap input.input-text:focus,
.co-field-auto-wrap input.input-text:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.1) !important;
}
/* woocommerce-input-wrapper als block zodat input vol breed kan */
.co-field-wrap .woocommerce-input-wrapper,
.co-field-auto-wrap .woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
}

/* ── Auto-fill veld label badge ─────────────────────────────────────────── */
.co-field-auto-wrap { display: flex; flex-direction: column; }
.co-auto-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--orange);
  color: #fff;
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 7px;
  vertical-align: middle;
  line-height: 1;
  height: 18px;
}

/* ── Auto-fill readonly input ────────────────────────────────────────────── */
.co-input-auto {
  background: var(--gray-50) !important;
  color: var(--gray-400) !important;
  cursor: default;
  border-color: var(--gray-200) !important;
}
.co-input-auto.co-auto-filled {
  background: #f0faf4 !important;
  color: var(--black) !important;
  border-color: #27ae60 !important;
}

/* ── Select2 (WooCommerce Land dropdown) ─────────────────────────────────── */
.co-section .select2-container { width: 100% !important; }
.co-section .select2-container .select2-selection--single {
  height: 44px !important;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius) !important;
  background: var(--white) !important;
  outline: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}
.co-section .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  padding: 0 36px 0 14px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  color: var(--black) !important;
}
.co-section .select2-container .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 12px !important;
}
.co-section .select2-container .select2-selection--single .select2-selection__arrow b {
  border-color: #aaa transparent transparent !important;
}
.co-section .select2-container--open .select2-selection--single {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.1) !important;
}
.select2-dropdown {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
.select2-results__option--highlighted { background: var(--orange) !important; }
.select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  outline: none !important;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--orange) !important;
}

/* ── Lookup status text ──────────────────────────────────────────────────── */
.co-lookup-status {
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
  display: block;
}
.co-lookup-status--ok      { color: #27ae60; }
.co-lookup-status--error   { color: #e74c3c; }
.co-lookup-status--loading { color: var(--gray-500); }

/* ── Handmatig invullen knop ─────────────────────────────────────────────── */
.co-manual-link { margin: 6px 0 16px; }
.co-btn-manual {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--orange);
  background: rgba(249,115,22,.07);
  border: 1.5px solid rgba(249,115,22,.35);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  line-height: 1;
}
.co-btn-manual:hover {
  background: rgba(249,115,22,.13);
  border-color: var(--orange);
}

/* ── B2B default block ───────────────────────────────────────────────────── */
.co-b2b-block { margin-top: 14px; }
.co-b2b-fields { display: block; }

/* ── Particulier opt-out knop ────────────────────────────────────────────── */
.co-particulier-link { margin: 14px 0 0; }
.co-btn-particulier {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--gray-700);
  background: #fff;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  line-height: 1;
}
.co-btn-particulier:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(249,115,22,.04);
}
.co-btn-particulier--active {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(249,115,22,.06);
}

/* Responsive */
@media (max-width: 1024px) {
  .co-layout > .pg { grid-template-columns: 1fr !important; }
  .co-sidebar { position: static; order: -1; } /* samenvatting boven het formulier op mobiel/tablet */
  /* Voorkom dat min-width:auto van grid-items de kolom breder maakt dan de viewport */
  .co-layout > .pg > .co-form,
  .co-layout > .pg > .co-sidebar { min-width: 0; }
}
@media (max-width: 768px) {
  .co-layout > .pg { padding: 0 20px; gap: 20px !important; }
  .co-row--2 { grid-template-columns: 1fr; }
  .co-row--pc-hnr-tov { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .co-row--pc-hnr-tov > *:last-child { grid-column: 1 / -1; }
  .co-header .pg { gap: 12px; }
  .co-header__back span { display: none; }
  .co-footer .pg { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Bestelsamenvatting: artikellijst inklapbaar, totaal blijft staan */
  .co-summary .co-summary__toggle { display: flex; }
  .co-summary__items { display: none; }
  .co-summary.is-open .co-summary__items { display: block; }

  /* USP-blok weg op mobiel — trust zit al in header & footer, scheelt scrollen */
  .co-usp { display: none; }

  /* Section-head: titel en link onder elkaar zodat "Inloggen →" niet tegen de titel botst */
  .co-section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .co-section__link { padding-left: 38px; } /* uitlijnen met titel-tekst (naast het nummer-bolletje) */
}

/* Toggle-knop bestelsamenvatting (alleen mobiel zichtbaar) */
.co-summary__toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 4px;
  background: none; border: none;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; color: var(--orange);
  cursor: pointer;
}
.co-summary__toggle-chev { transition: transform .2s ease; flex-shrink: 0; }
.co-summary.is-open .co-summary__toggle-chev { transform: rotate(180deg); }

/* ============================================
   NIEUWE HERO (hero-wrap) — v2
============================================ */

@keyframes heroFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.hero-wrap { background: var(--white); padding: 20px 0 22px; }
.hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 14px; align-items: stretch; }

/* Banner */
.hero-banner {
  border-radius: 10px; padding: 46px 52px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; min-height: 300px;
  background: linear-gradient(135deg, #eef3fb 0%, #f5f8ff 60%, #edf2fa 100%);
  border-bottom: 1px solid #dde4f0;
}
/* Accent lijn bovenaan banner */
.hero-banner::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, rgba(249,115,22,.55) 0%, rgba(249,115,22,.18) 50%, transparent 100%);
  z-index: 2;
}
.hero-banner::before {
  content: ''; position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(135deg, #FFFDF7 0%, #FFF8E6 45%, #FFF1C6 100%);
  animation: heroFade 5s ease-in-out infinite alternate;
  z-index: 1;
}

.hero-content { position: relative; z-index: 3; max-width: 540px; }
.hero-h1 {
  font-family: var(--font-heading); font-size: clamp(40px, 4vw, 56px);
  font-weight: 800; text-transform: uppercase; line-height: 1.0;
  letter-spacing: .01em; margin-bottom: 14px; color: var(--black);
}
.hero-h1 em { font-style: normal; display: block; color: var(--orange); }
.hero-sub { font-size: 15px; line-height: 1.65; margin-bottom: 28px; color: #333; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--orange); color: var(--white);
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .07em;
  padding: 13px 26px; border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.hero-cta:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,115,22,.28); }

/* Trustpilot in hero */
.hero-wrap .hero-trust { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; }
.tp { display: flex; align-items: center; gap: 8px; }
.tp-logo { height: 17px; display: block; }
.tp-stars { display: flex; gap: 2px; align-items: center; }
.tp-info { display: flex; align-items: center; gap: 5px; }
.tp-score { font-size: 13px; font-weight: 700; color: var(--black); }
.tp-sep { color: var(--gray-400); font-size: 12px; }
.tp-label { font-size: 12.5px; font-weight: 700; color: var(--black); }

/* Product kolom */
.prod-col { display: flex; flex-direction: column; gap: 10px; }
.prod-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.prod-col-title { font-family: var(--font-heading); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--black); }
.prod-col-link { font-size: 12px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .05em; }
.prod-col-link:hover { text-decoration: underline; }

/* Hero productkaarten */
.hero-wrap .pc {
  flex: 1; background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: 10px; padding: 11px 14px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.hero-wrap .pc::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .28s ease;
}
.hero-wrap .pc:hover::after { transform: scaleX(1); }
.hero-wrap .pc:hover { border-color: var(--orange); box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
.hero-wrap .pc-img { width: 66px; height: 66px; flex-shrink: 0; background: transparent; border-bottom: none; padding: 0; border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-wrap .pc-img img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.3); mix-blend-mode: multiply; max-height: none; }
.hero-wrap .pc-info { flex: 1; min-width: 0; }
.hero-wrap .pc-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; display: inline-block; margin-bottom: 3px; }
.hero-wrap .b-sale { background: var(--orange); color: var(--white); }
.hero-wrap .b-new  { background: var(--black); color: var(--white); }
.hero-wrap .b-pop  { background: var(--gray-100); color: #555; }
.hero-wrap .pc-name { font-size: 12.5px; font-weight: 600; color: var(--black); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.hero-wrap .pc-price { font-family: var(--font-price); font-size: 15px; font-weight: 600; color: var(--black); }
.hero-wrap .pc-old { font-size: 11px; color: var(--gray-400); text-decoration: line-through; margin-left: 5px; }
.hero-wrap .pc-add { flex-shrink: 0; background: var(--orange); color: var(--white); border: none; border-radius: var(--radius); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition), transform var(--transition); }
.hero-wrap .pc-add:hover { background: var(--orange-dark); transform: scale(1.08); }

/* Review kaart — geen oranje hover */
.hero-wrap .pc-review::after { display: none !important; }
.hero-wrap .pc-review:hover { transform: none; border-color: #00b67a !important; box-shadow: 0 4px 16px rgba(0,182,122,.1); }

/* Qty controls */
.qty-wrap { display: inline-flex; align-items: center; }
.qty-btn { width: 26px; height: 26px; border: 1.5px solid var(--gray-200); background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--gray-600); transition: all var(--transition); user-select: none; }
.qty-btn:first-child { border-radius: 5px 0 0 5px; }
.qty-btn:last-child  { border-radius: 0 5px 5px 0; }
.qty-btn:hover { border-color: var(--orange); color: var(--orange); background: rgba(249,115,22,.05); }
.qty-input { width: 34px; height: 26px; border: 1.5px solid var(--gray-200); border-left: none; border-right: none; text-align: center; font-size: 13px; font-weight: 600; font-family: var(--font-body); color: var(--black); background: var(--white); outline: none; -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* iOS: snel achter elkaar tikken op knoppen niet als dubbeltik-zoom interpreteren */
button,
a.button,
[role="button"],
.qty-btn,
.pc-qty__btn,
.pc-btn,
.pp-add-full,
.wa-cart-btn,
.doos-btn-hp,
.pc-wish-btn,
.subcat-card,
.prod-card .pc-qty__btn {
  touch-action: manipulation;
}

/* Promo tiles */
.promo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pt {
  background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 10px;
  padding: 18px 22px; display: flex; align-items: center; gap: 16px;
  cursor: pointer; position: relative; overflow: hidden; text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.pt::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.pt:hover::before { transform: scaleX(1); }
.pt:hover { border-color: rgba(249,115,22,.4); box-shadow: 0 4px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.pt-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: rgba(249,115,22,.1); display: flex; align-items: center; justify-content: center; color: var(--orange); transition: background var(--transition), color var(--transition); }
.pt:hover .pt-icon { background: var(--orange); color: var(--white); }
.pt-text { flex: 1; min-width: 0; }
.pt-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--orange); white-space: nowrap; margin-bottom: 2px; }
.pt-title { font-family: var(--font-heading); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--black); white-space: nowrap; line-height: 1.1; }
.pt-arrow { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--gray-200); display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: border-color var(--transition), color var(--transition), background var(--transition); }
.pt:hover .pt-arrow { border-color: var(--orange); color: var(--orange); background: rgba(249,115,22,.06); }

/* ══════════════════════════════════════════════
   PROMO TILE POPUPS
   ══════════════════════════════════════════════ */

.promo-pop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.promo-pop-overlay.open {
  display: flex;
}

.promo-pop {
  background: var(--white);
  border-radius: 16px;
  width: 100%;
  max-width: 780px;
  max-height: 84vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .24);
  animation: promopopIn .22s cubic-bezier(.34, 1.3, .64, 1);
}
@keyframes promopopIn {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.promo-pop-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}
.promo-pop-eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--orange);
  margin-bottom: 5px;
}
.promo-pop-h {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--black);
  line-height: 1.1;
}
.promo-pop-x {
  background: var(--gray-100);
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
  margin-left: 16px;
}
.promo-pop-x:hover {
  background: var(--gray-200);
  color: var(--black);
}
.promo-pop-scroll {
  overflow-y: auto;
  padding: 22px 28px 28px;
  flex: 1;
}

/* ── Meest verkocht: 2-col ranked list ── */
.pp-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.pp-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition);
}
.pp-item:hover {
  background: var(--gray-50);
}
.pp-rank {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--gray-300);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.pp-item:nth-child(-n+3) .pp-rank {
  color: var(--orange);
}
.pp-img {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pp-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(1.1);
}
.pp-info {
  flex: 1;
  min-width: 0;
}
.pp-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.pp-price {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--black);
}
.pp-price small {
  font-size: 10px;
  font-weight: 400;
  color: var(--gray-400);
}
.pp-price .pp-old {
  color: var(--gray-400);
  font-weight: 400;
  font-size: 11.5px;
  margin: 0 2px 0 1px;
  text-decoration: line-through;
}

/* ── Nieuw assortiment: 3-col card grid ── */
.pp-new-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pp-card {
  display: block;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  overflow: hidden;
}
.pp-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s ease;
}
.pp-card:hover::after { transform: scaleX(1); }
.pp-card:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.pp-new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--black);
  color: var(--white);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 4px;
}
.pp-card-img {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
}
.pp-card-img img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(1.1);
}
.pp-card-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.4;
  margin-bottom: 6px;
}
.pp-card-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}
.pp-card-price small {
  font-size: 10px;
  font-weight: 400;
  color: var(--gray-400);
}

/* ── Actie popup: 2-col layout (image + content) ── */
.promo-pop--actie .promo-pop-scroll {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.promo-pop--actie .wa-exp-img {
  flex-shrink: 0;
  width: 190px;
  background: var(--gray-50);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo-pop--actie .wa-exp-img img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ── Popup updates (overrides) ── */

/* Meest verkocht: single scrollable column */
.pp-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pp-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: inherit;
  transition: background var(--transition);
  border-bottom: 1px solid var(--gray-100);
}
.pp-item:last-child { border-bottom: none; }
.pp-item:hover { background: var(--gray-50); }
.pp-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.pp-bekijken {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .03em;
  transition: color var(--transition);
}
.pp-bekijken:hover { color: var(--orange-dark); }

/* Nieuw assortiment: card with footer */
.pp-card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
  color: inherit;
}
.pp-card:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.pp-card-link {
  display: block;
  padding: 14px 14px 10px;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.pp-card-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.pp-card-foot .qty-wrap { flex: 1; }

/* Weekactie button fix: vertically center text */
.wa-cart-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Nergens goedkoper groter */
.wa-ngg {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--orange);
}

/* ── Voeg toe knop in popups ── */
.pp-add-full {
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0 13px;
  height: 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-add-full:hover { background: var(--orange-dark); transform: translateY(-1px); }

/* Weekactie popup: afbeelding verticaal centreren */
.promo-pop--actie .promo-pop-scroll {
  align-items: center;
}
.promo-pop--actie .wa-exp-img {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Weekactie popup: afbeelding echt centreren (override vaste height) */
.promo-pop--actie .wa-exp-img {
  height: auto !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.promo-pop--actie .wa-exp-img img {
  max-width: 100% !important;
  max-height: 200px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* ── Legal pagina's ─────────────────────────────────────────────────── */
.entry-content .legal-meta { font-size: 12.5px; color: var(--gray-400); margin-bottom: 40px; }
.entry-content .legal-wrap h2,
.entry-content h2 { font-size: 16px; font-weight: 700; color: var(--black); margin: 36px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200); }
.entry-content .art-nr { color: var(--orange); font-size: 12px; font-weight: 600; margin-right: 8px; }
.entry-content p { font-size: 14.5px; color: #444; line-height: 1.8; margin-bottom: 12px; }
.entry-content ol, .entry-content ul { padding-left: 20px; margin-bottom: 12px; }
.entry-content li { font-size: 14.5px; color: #444; line-height: 1.8; margin-bottom: 6px; }
.entry-content ol li { list-style: decimal; }
.entry-content ul li { list-style: disc; }
.entry-content .legal-section { margin-bottom: 8px; }
.entry-content h3 { font-size: 14px; font-weight: 700; color: var(--black); margin: 20px 0 8px; }
.entry-content strong { color: var(--black); }
.entry-content a { color: var(--orange); }
.entry-content a:hover { color: var(--orange-dark); }


/* ============================================================
   MOBILE ANIMATIES
   ============================================================ */
@keyframes uspSlideIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE OPTIMALISATIE — volledig responsief
   ============================================================ */

/* ── Hamburger knop ── */
.mob-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.mob-menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
  transform-origin: center;
}
.mob-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mob-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mob-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Overlay ── */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1100;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .28s;
}
.mob-overlay.open { opacity: 1; }

/* ── Drawer ── */
.mob-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 90vw);
  height: 100dvh;
  background: var(--white);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow: 4px 0 32px rgba(0,0,0,.18);
  overflow-y: auto;
}
.mob-drawer.open { transform: translateX(0); }

.mob-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.mob-drawer__close {
  width: 36px; height: 36px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--black);
  transition: background var(--transition), border-color var(--transition);
}
.mob-drawer__close:hover { background: var(--gray-100); border-color: var(--gray-400); }

.mob-drawer__search { padding: 14px 16px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.mob-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 22px;
  padding: 10px 16px;
  color: var(--gray-400);
}
.mob-search-wrap input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--black);
  width: 100%;
}
.mob-search-wrap input::placeholder { color: var(--gray-400); }

.mob-drawer__nav { flex: 1; padding: 8px 0; }
.mob-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.mob-nav-link:last-child { border-bottom: none; }
.mob-nav-link svg { color: var(--orange); flex-shrink: 0; }
.mob-nav-link--muted svg { color: var(--gray-400); }
.mob-nav-link:hover { background: var(--gray-50); color: var(--orange); }
.mob-nav-link:hover svg { color: var(--orange); }

/* Sectiekop in mobiel menu */
.mob-nav-section {
  padding: 16px 20px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
}
/* Merk-rij: zelfde icoon+tekst stijl, met subtiel logo rechts als herkenning */
/* .mob-nav-link voor extra specificiteit zodat WooCommerce's `.woocommerce img` deze niet overschrijft op categoriepagina's */
.mob-nav-link .mob-nav-logo { height: 15px; width: auto; max-width: 64px; object-fit: contain; margin-left: auto; opacity: .85; flex-shrink: 0; }

.mob-drawer__footer {
  padding: 16px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.mob-footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition);
}
.mob-footer-btn--ghost {
  border: 1.5px solid var(--gray-200);
  color: var(--black);
}
.mob-footer-btn--ghost:hover { border-color: var(--orange); color: var(--orange); }
.mob-footer-btn--orange { background: var(--orange); color: var(--white); }
.mob-footer-btn--orange:hover { background: var(--orange-dark); }

/* ── Breakpoint: tablet + mobiel ── */
@media (max-width: 768px) {
  /* Hamburger tonen, desktop nav verbergen */
  .mob-menu-btn { display: flex; }
  .mob-overlay { display: block; pointer-events: none; }
  .mob-overlay.open { pointer-events: all; }
  .header-nav { display: none; }
  .mob-hide { display: none !important; }

  /* Minder padding op container */
  .pg { padding-left: 16px !important; padding-right: 16px !important; }

  /* Header top: logo links, cart + hamburger rechts */
  .header-top .pg { gap: 12px; }

  /* Hero tekst iets kleiner */
  .hero-title-text { font-size: 32px; }

  /* Section-headers: iets groter maar compact op mobiel */
  .section-hdr { margin-bottom: 16px; align-items: center; flex-wrap: nowrap; gap: 8px; }
  .section-hdr h2 { font-size: 23px; white-space: nowrap; flex-shrink: 1; min-width: 0; }
  .see-all { white-space: nowrap; flex-shrink: 0; font-size: 11px; }
  .subcat-section .hdr-title { font-size: 23px; }
  .extras-section .hdr-title { font-size: 23px; }

  /* ── Cat-grid: 2×2 grid ── */
  .cat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    overflow-x: unset;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    scrollbar-width: unset;
  }
  .cat-grid::-webkit-scrollbar { display: block; }
  .cat-card {
    flex: none;
    scroll-snap-align: unset;
    height: 200px;
  }
  /* Compactere body in 2×2 */
  .cat-body { padding: 10px 12px 12px; }
  .cat-title { font-size: 14px; margin-bottom: 4px; }
  .cat-brand { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-desc { display: none; }
  .cat-tag  { display: none; }
  .cat-link { padding: 5px 10px; font-size: 10.5px; }
  /* Product images in cat-cards op mobiel: directe posities i.p.v. container-scale */
  /* Geen container transform — individuele prod-wraps krijgen mobiel-specifieke posities */
  .cat-uponor-card .cat-products,
  .cat-grohe-card .cat-products { transform: none !important; }
  /* Ventilatie: iets meer naar boven gestuurd */
  .cat-ventil-card .cat-products { transform: scale(0.6); transform-origin: top center; }

  /* Uponor: links → midden → rechts, duidelijk gespreid */
  .cat-uponor-card .cat-prod-wrap:nth-child(1) {
    width: 58px !important; top: 14px !important; left: 4px !important;
    right: auto !important; bottom: auto !important; opacity: .5 !important;
  }
  .cat-uponor-card .cat-prod-wrap:nth-child(2) {
    width: 72px !important; top: 42px !important; left: 26% !important;
    right: auto !important; bottom: auto !important; opacity: .75 !important;
  }
  .cat-uponor-card .cat-prod-wrap:nth-child(3) {
    width: 80px !important; top: 40px !important; right: 4px !important;
    left: auto !important; bottom: auto !important;
  }

  /* Grohe: links boven → rechts midden → centrum */
  .cat-grohe-card .cat-prod-wrap:nth-child(1) {
    width: 50px !important; top: 12px !important; left: 4px !important;
    right: auto !important; bottom: auto !important; opacity: .6 !important;
  }
  .cat-grohe-card .cat-prod-wrap:nth-child(2) {
    width: 66px !important; top: 38px !important; right: 5px !important;
    left: auto !important; bottom: auto !important; opacity: .8 !important;
  }
  .cat-grohe-card .cat-prod-wrap:nth-child(3) {
    width: 80px !important; top: 36px !important; left: 24% !important;
    right: auto !important; bottom: auto !important;
  }

  /* ── Prod-card image: minder hoog op mobiel ── */
  .prod-card .pc-img { height: 160px; }
  .prod-card .pc-img img { max-height: 130px; }

  /* ── Homepage product slider: touch-native ── */
  .prod-slider-viewport {
    overflow-x: auto !important;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: default;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
  }
  .prod-slider-viewport::-webkit-scrollbar { display: none; }
  .prod-grid {
    transform: none !important;
    transition: none !important;
    gap: 12px;
  }
  .prod-grid .prod-card {
    flex: 0 0 56vw;
    scroll-snap-align: start;
  }
  .ps-btn { display: none !important; }
  /* Eerste kaart begint niet tegen de rand */
  .prod-slider-viewport { scroll-padding-left: 20px; }

  /* ── Shop per categorie: 2-rij horizontale carrousel ──
     Twee rijen die je opzij swipet. ~2 kolommen zichtbaar + een "peek"
     van de volgende kolom als hint dat er meer is. Loopt edge-to-edge. */
  .subcat-section .pg { position: relative; }
  .subcat-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 41vw;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* edge-to-edge: scroll loopt tot schermrand, eerste tegel lijnt met content */
    margin: 0 -16px;
    padding: 4px 16px 14px;
    scroll-padding-left: 16px;
  }
  .subcat-grid::-webkit-scrollbar { display: none; }
  .subcat-card {
    flex: none;
    scroll-snap-align: start;
    padding: 16px 10px 13px;
    margin: 0;
    height: 100%;
    justify-content: flex-start;
  }
  .subcat-card img { height: 78px; margin-bottom: 9px; }
  .subcat-card span { font-size: 12px; overflow-wrap: break-word; word-break: break-word; text-align: center; width: 100%; }
  /* Wide kaart loopt gewoon mee als normale cel in de carrousel */
  .subcat-card--wide {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 10px 13px;
    max-width: none;
    gap: 0;
  }
  .subcat-card--wide img { height: 78px !important; width: auto !important; max-width: 110px; margin-bottom: 9px !important; }
  .subcat-card--wide span { text-align: center !important; font-size: 12px !important; width: 100% !important; }
  /* Subtiele fade aan de rechterrand als extra "er is meer"-hint */
  .subcat-section .pg::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 14px;
    width: 36px;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 88%);
    pointer-events: none;
    z-index: 2;
  }
  /* Swipe-hint: voortgangsbalk + kort label onder de carrousel */
  .subcat-swipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
  }
  .subcat-swipe__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gray-400);
  }
  .subcat-swipe__label { transition: opacity .3s ease; }
  .subcat-swipe--scrolled .subcat-swipe__label { opacity: 0; }
  .subcat-swipe__label svg { animation: subcatSwipeNudge 1.8s ease-in-out infinite; }
  @keyframes subcatSwipeNudge {
    0%, 100% { transform: translateX(0); opacity: .6; }
    50%      { transform: translateX(4px); opacity: 1; }
  }
  .subcat-swipe__track {
    position: relative;
    width: 84px; height: 4px;
    background: var(--gray-200);
    border-radius: 999px;
    overflow: hidden;
  }
  .subcat-swipe__thumb {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 40%;
    background: var(--orange);
    border-radius: 999px;
    transition: left .12s linear;
  }

  /* Product modal stapelen */
  .prod-modal__layout { grid-template-columns: 1fr; }
  .prod-modal__img-col {
    border-radius: 16px 16px 0 0;
    border-right: none;
    border-bottom: 1px solid var(--gray-100);
    min-height: 220px;
    padding: 24px;
  }
  .prod-modal__img-col img { max-height: 160px; }
  .prod-modal__info { padding: 20px; }
  .prod-modal { max-height: 95dvh; }

  /* ── Categorie modal (grote cat-cards): bottom sheet op mobiel ── */
  .cat-overlay { padding: 0; align-items: flex-end; }
  .cat-modal { max-width: 100%; border-radius: 20px 20px 0 0; max-height: 90dvh; }
  .cat-modal-hdr { padding: 12px 16px; }
  .cat-modal-hdr-title { font-size: 18px; }
  .cat-modal-fulllink { display: none; }
  .cat-modal-body { padding: 12px; }
  .cat-modal-prods { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cat-modal-prod-img { height: 110px; }
  .cat-modal-prod-img img { max-height: 80px; }
  .cat-modal-prod-body { padding: 8px 10px 4px; }
  .cat-modal-prod-foot { padding: 0 10px 10px; }
  .cat-modal-prod-name { font-size: 11px; }
  .cat-modal-prod-price { font-size: 14px; }
  .cat-modal-prod-btn { font-size: 11px; padding: 7px 6px; }
  .cat-modal-footer { padding: 10px 12px; }
  .cat-modal-nav { padding: 7px 12px; font-size: 11px; }

  /* ── Catpop (subcat-cards popup): bottom sheet op mobiel ── */
  .catpop-overlay { padding: 0 !important; align-items: flex-end !important; overflow-y: visible; }
  .catpop-modal { max-width: 100% !important; border-radius: 20px 20px 0 0 !important; max-height: 88dvh !important; transform: none !important; }
  .catpop-overlay.open .catpop-modal { transform: none !important; }

  /* Verberg cart panel op mobiel — geen ruimte */
  .catpop-cart-panel { display: none !important; }

  /* Compacte header: logo + separator verbergen */
  .catpop-header { padding: 12px 16px; }
  .catpop-header-logo { display: none !important; }
  .catpop-header-sep { display: none !important; }
  .catpop-header-fullcat { display: none; }
  .catpop-header-catname { font-size: 17px; }

  /* Product grid: 2 kolommen (.products meegenomen i.v.m. globale ul.products 3-koloms regel) */
  .catpop-products-ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Kleinere product afbeeldingen */
  .catpop-products-ul li.product-card .pc-img { height: 100px !important; }
  .catpop-products-ul li.product-card .pc-img img { max-height: 75px !important; }
  .catpop-products-ul li.product-card .pc-body { padding: 8px 8px 4px !important; }
  .catpop-products-ul li.product-card .pc-foot { padding: 0 8px 8px !important; }
  .catpop-products-ul li.product-card .pc-title { font-size: 11px !important; }
  .catpop-products-ul li.product-card .pc-price-excl { font-size: 13px !important; }

  /* Cart form: teller (volle breedte) bovenaan, knop eronder — beide passen netjes */
  .catpop-products-ul li.product-card .pc-cart-form { flex-direction: column !important; gap: 6px !important; }
  .catpop-products-ul li.product-card .pc-qty { display: flex !important; width: 100% !important; }
  .catpop-products-ul li.product-card .pc-qty__input { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
  .catpop-products-ul li.product-card .pc-btn--cart { width: 100% !important; font-size: 11.5px !important; padding: 8px 4px !important; justify-content: center !important; }

  /* Compact grid padding */
  .catpop-grid { padding: 12px 12px 8px; }

  /* Compacte nav footer */
  .catpop-nav { padding: 10px 12px; }
  .catpop-nav-btn { padding: 7px 12px; font-size: 11px; }

  /* Product kaarten: zorg dat ze niet te smal worden */
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13px; }

  /* WooCommerce checkout fix */
  .woocommerce-checkout .col2-set { width: 100%; float: none; margin: 0; }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review { width: 100%; float: none; }

  /* Cart tabel mobiel */
  .woocommerce-cart-form__cart-item .product-thumbnail { display: none; }

  /* B2B hero stat card zit al in 1fr kolom bij 1024px */
  .b2bhero-cta { flex-wrap: wrap; }
  .b2bhero-cta__primary,
  .b2bhero-cta__ghost { width: 100%; justify-content: center; }

  /* ── Weekactie: teaser leesbaar op mobiel ── */
  .wa-teaser { flex-wrap: nowrap; gap: 10px; padding: 12px 16px; align-items: center; }
  .wa-teaser-img { width: 60px; height: 60px; flex-shrink: 0; }
  .wa-teaser-info { min-width: 0; flex: 1; }
  .wa-teaser-eyebrow { font-size: 11px; margin-bottom: 3px; }
  .wa-teaser-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.35; }
  .wa-teaser-logo { height: 13px; }
  .wa-teaser-price-wrap { flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 3px; }
  .wa-teaser-old { display: none; }
  .wa-teaser-price { font-size: 17px; line-height: 1; }
  .wa-teaser-discount { font-size: 11px; padding: 3px 7px; }
  .wa-teaser-arrow { flex-shrink: 0; }

  /* ── Weekactie expanded: single column ── */
  .wa-expanded {
    grid-template-columns: 1fr !important;
    gap: 20px;
    padding: 20px 16px;
  }
  .wa-exp-img { height: 150px; }
  .wa-exp-img img { max-width: 130px; max-height: 130px; }
  .wa-exp-price { font-size: 30px; }
  .wa-exp-header { flex-wrap: wrap; gap: 10px; }

  /* ── Nieuwsbrief balk: input full-width ── */
  .cta-bar-form { flex-direction: column; }
  .cta-bar-form input { width: 100%; }
  .cta-bar-form button { width: 100%; }

  /* Promo bar mobiel: lichtere/fellere oranje met een mooie diagonale fade */
  .promo-bar { background: linear-gradient(135deg, #ffb13d 0%, #fa9f22 48%, #f3941a 100%); }
  /* Promo bar: 2 regels op mobiel, geen horizontaal scrollen */
  .promo-bar .pg { flex-direction: column !important; flex-wrap: wrap !important; align-items: center; gap: 3px; padding-top: 7px !important; padding-bottom: 7px !important; overflow: visible; }
  .promo-bar .promo-sep { display: none !important; }
  .promo-bar .promo-item { padding: 0; white-space: nowrap; }

  /* ── Hero: single column, prod-col verborgen ── */
  .hero-grid {
    grid-template-columns: 1fr !important;
  }
  .prod-col { display: none !important; }
  .hero-banner { min-height: auto; padding: 24px 20px 28px; }
  .hero-h1 { font-size: clamp(22px, 7vw, 32px); }
  .hero-sub { font-size: 14px; }

  /* ── Promo bar: toon alleen Trustpilot + vandaag besteld ── */
  .promo-bar .pg > *:nth-child(n+4) { display: none !important; }

  /* ── Hero bottom strip: tekst niet afsnijden ── */
  .hero-bottom-strip .pg { gap: 8px; }
  .hero-strip-item { padding: 12px 10px; }
  .hero-strip-item__title { font-size: 11px; }

  /* ── Promo row: swipeable carousel, uitgelijnd met content ── */
  .promo-row {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .promo-row::-webkit-scrollbar { display: none; }
  .promo-row .pt {
    flex: 0 0 calc(80vw - 32px);
    scroll-snap-align: start;
    transform: none !important;
    padding: 14px 16px;
    min-width: 0;
  }
  .promo-row .pt .pt-title { font-size: 15px; white-space: normal; line-height: 1.2; }
  .promo-row .pt .pt-icon  { width: 36px; height: 36px; flex-shrink: 0; }
  .promo-row .pt .pt-arrow { width: 26px; height: 26px; flex-shrink: 0; }

  /* ── Promo popups: juiste verhoudingen op mobiel ── */
  /* ── Promo popups: bottom sheet op mobiel ── */
  .promo-pop-overlay { padding: 0; align-items: flex-end; }
  .promo-pop { border-radius: 20px 20px 0 0; max-height: 88dvh; }
  .promo-pop-hdr { padding: 14px 18px; }
  .promo-pop-body { padding: 16px 18px; }
  .promo-pop-scroll { padding: 0 16px 24px; }

  /* Meest verkocht: wrap actions naar aparte rij */
  .pp-item { flex-wrap: wrap; padding: 10px 0; gap: 8px 10px; }
  .pp-rank { flex-shrink: 0; }
  .pp-img { width: 44px; height: 44px; flex-shrink: 0; }
  .pp-info { flex: 1; min-width: 0; }
  .pp-name { font-size: 11px; white-space: normal; }
  .pp-price { font-size: 12px; }
  /* Actions op aparte rij, uitgelijnd met de info (offset = rank+gap+img+gap) */
  .pp-actions { width: 100%; padding-left: 74px; gap: 8px; flex-wrap: nowrap; }
  .pp-actions .qty-wrap { display: none; }
  .pp-add-full { flex: 1; height: 30px; font-size: 10.5px; }
  .pp-bekijken { font-size: 10.5px; white-space: nowrap; }

  /* Nieuw assortiment: 2 kolommen i.p.v. 3 */
  .pp-new-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* Kaart-footer: teller + knop gestapeld op volle breedte (knop niet meer afgesneden) */
  .pp-card-foot { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .pp-card-foot .qty-wrap { display: flex; width: 100%; flex: none; }
  .pp-card-foot .qty-wrap .qty-btn { height: 36px; width: 36px; flex: none; }
  .pp-card-foot .qty-wrap .qty-input { flex: 1 1 0; width: auto; min-width: 0; height: 36px; }
  .pp-card-foot .pp-add-full { width: 100%; height: 38px; flex: none; }

  /* Actie van de week: foto bovenaan i.p.v. links — klant scrolt i.p.v. zijwaarts */
  .promo-pop--actie .promo-pop-scroll {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .promo-pop--actie .wa-exp-img {
    width: 100%;
    align-self: stretch;
    height: 180px;
  }
  /* Content mag volledig de breedte gebruiken */
  .promo-pop--actie .promo-pop-scroll > div:last-child { width: 100%; min-width: 0; }

  /* ── Reviews-sectie: geen overflow + meta op 1 rij ── */
  .reviews-tp-bar { flex-wrap: wrap; gap: 8px 12px; justify-content: center; padding: 12px 16px; max-width: 100%; }
  .reviews-tp-sep { display: none; }
  .reviews-tp-meta { display: flex; flex-direction: row; align-items: center; gap: 6px; }
  .reviews-tp-meta .reviews-tp-label { font-size: 13px; }
  .reviews-tp-meta .reviews-tp-count { font-size: 12px; }
  .reviews-grid { overflow: hidden; }

  /* ── USP bar: slide-animatie (rechts in, links uit) ── */
  .usp-strip { overflow: hidden; }
  .usp-strip .pg { position: relative; min-height: 44px; overflow: hidden; justify-content: center; flex-wrap: nowrap; }
  .usp-item {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex: none !important;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
  }
  .usp-item.usp-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto;
  }
  .usp-item.usp-leaving {
    opacity: 0 !important;
    transform: translateX(-100%) !important;
  }
  .usp-item-text { overflow: hidden; min-width: 0; }

  /* ── Bedrijfsaccount: perks naast elkaar op 1 rij ── */
  .b2b-perks {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    margin-bottom: 24px;
  }
  .b2b-perk {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
  }
  .b2b-perk-icon { flex-shrink: 0; width: 32px; height: 32px; }
  .b2b-perk strong { font-size: 12px; line-height: 1.3; }
  .b2b-perk span { display: none; }
  .b2b-perk--gift::before { font-size: 8px; padding: 2px 6px; }
}

/* ── Breakpoint: kleine telefoons ── */
@media (max-width: 480px) {
  /* Prod-grid kaarten: houd 72vw ook op klein scherm */
  .prod-grid .prod-card { flex: 0 0 66vw; }
  /* Smallere kaart → compactere teller zodat "In winkelwagen" niet afbreekt */
  .prod-card .pc-foot .pc-btn--cart { padding-left: 4px; padding-right: 4px; }
  ul.products.columns-3 { grid-template-columns: repeat(2, 1fr) !important; }
  ul.products.columns-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Subcat card iets breder op klein scherm */
  .subcat-card { flex: 0 0 42vw; }

  /* Zoekresultaten: 2 kolommen */
  ul.products.columns-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hero: kleinere tekst */
  .hero-title-text { font-size: 26px; }
  .hero { min-height: auto; padding: 32px 0; }

  /* Footer */
  .footer-bottom .pg { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }

  /* Spaarbak cards */
  .spaarbak__cards { grid-template-columns: 1fr !important; }

  /* Contact quick cards */
  .quick-contact .pg { grid-template-columns: 1fr !important; }

  /* Page header stacked */
  .page-header .pg { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Prestatietips: verminder onnodige animaties op mobiel ── */
@media (max-width: 768px) {
  [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .subcat-card:hover { transform: none; }
  .prod-card:hover { transform: none; }
}

/* ═══ AJAX toevoegen aan winkelwagen: knop-states + popup ═══ */
.pc-spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ogoSpin .6s linear infinite;
}
@keyframes ogoSpin { to { transform: rotate(360deg); } }
.pc-btn--loading { pointer-events: none; opacity: .9; }
.pc-btn--added {
  background: #16a34a !important;
  gap: 6px;
}
.pc-btn--added:hover { background: #16a34a !important; }

/* Popup-melding (toast) */
.ogo-cart-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: 0 12px 40px -8px rgba(16,24,40,.28);
  opacity: 0;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.ogo-cart-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ogo-cart-toast__icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #16a34a;
  display: flex; align-items: center; justify-content: center;
}
.ogo-cart-toast__body { min-width: 0; flex: 1; line-height: 1.3; }
.ogo-cart-toast__body strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--black); }
.ogo-cart-toast__body span {
  display: block; font-size: 12.5px; color: var(--gray-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ogo-cart-toast__link {
  flex-shrink: 0;
  font-size: 12.5px; font-weight: 700; color: var(--orange);
  text-decoration: none; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px;
  transition: background .15s;
}
.ogo-cart-toast__link:hover { background: rgba(249,115,22,.1); }
/* Net boven de zwevende winkelwagen-knop op mobiel */
@media (max-width: 768px) {
  .ogo-cart-toast { bottom: 84px; }
}

/* ── Touch targets: minimaal 44px op mobiel (mis-taps voorkomen) ── */
@media (max-width: 768px) {
  .mob-menu-btn { width: 44px; height: 44px; }
  .card-qty-hp__btn,
  .cat-modal-qty__btn,
  .catpop-qty-btn { min-width: 40px; min-height: 44px; }
  .qty-input, .card-qty-hp__input { min-height: 44px; }
  .cart-qty .qty-minus, .cart-qty .qty-plus { min-width: 42px; min-height: 44px; }
  .pc-btn--cart, .prod-add-btn { min-height: 46px; }
}

/* ── Weekactie-teller: native browser-spinners uit (dubbele +/− voorkomen) ── */
.wa-qty input::-webkit-outer-spin-button,
.wa-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wa-qty input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ── Checkout: veld-markering bij validatiefouten ── */
.co-form .ogo-field-invalid input,
.co-form .ogo-field-invalid select,
.co-form .ogo-field-invalid textarea {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, .12) !important;
}

/* PostNL bezorgopties-blok in de checkout — huisstijl-restyle van de plugin-markup */
.ogo-postnl-table { width: 100%; border-collapse: collapse; }
.ogo-postnl-table td { padding: 0; border: none; }
.ogo-postnl-table .postnl-co-tr-container > td { padding-top: 14px; }

#postnl_checkout_option { border: 1.5px solid #e5e7eb; border-radius: 12px; overflow: hidden; padding: 0; background: #fff; }
#postnl_checkout_option .postnl_checkout_tab_list { display: flex; margin: 0; padding: 0; list-style: none; border-bottom: 1.5px solid #e5e7eb; }
#postnl_checkout_option .postnl_checkout_tab_list > li { flex: 1; margin: 0; }
#postnl_checkout_option .postnl_checkout_tab_list .postnl_checkout_tab { display: block; padding: 13px 8px; text-align: center; font-weight: 700; font-size: 13.5px; letter-spacing: .01em; background: #f9fafb; color: #6b7280; cursor: pointer; border: none; margin: 0; transition: color .15s, background .15s; }
#postnl_checkout_option .postnl_checkout_tab_list > li.active .postnl_checkout_tab { background: #fff; color: #F97316; box-shadow: inset 0 -2.5px 0 #F97316; }
#postnl_checkout_option .postnl_content { padding: 10px 12px 12px; }
#postnl_checkout_option .postnl_content_desc { color: #6b7280; font-size: 13px; padding: 2px 4px 6px; background: none; }
#postnl_checkout_option .postnl_list, #postnl_checkout_option .postnl_sub_list { list-style: none; margin: 0; padding: 0; }
#postnl_checkout_option .postnl_list > li { margin: 0; padding: 0; background: none; border: none; }
#postnl_checkout_option .list_title { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 13px; color: #374151; padding: 10px 4px 6px; background: none; border: none; }
#postnl_checkout_option .list_title .distance { font-weight: 500; }
#postnl_checkout_option .postnl_sub_list > li { margin: 4px 0; border: 1.5px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 0; transition: border-color .15s, background .15s, box-shadow .15s; }
#postnl_checkout_option .postnl_sub_list > li:hover { border-color: #d1d5db; }
#postnl_checkout_option .postnl_sub_list > li.active { border-color: #F97316; background: #FFF7ED; box-shadow: 0 0 0 1px #F97316 inset; }
#postnl_checkout_option .postnl_sub_list label, #postnl_checkout_option .postnl_sub_radio_label { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; margin: 0; font-size: 14px; color: #111827; }
#postnl_checkout_option input[type="radio"] { accent-color: #F97316; width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
#postnl_checkout_option .company { font-weight: 600; }
#postnl_checkout_option .distance { color: #9ca3af; font-size: 12px; margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {
  #postnl_checkout_option .postnl_checkout_tab_list .postnl_checkout_tab { font-size: 12.5px; padding: 11px 4px; }
}

/* Subtiele PostNL-tijden-disclaimer */
.ogo-postnl-note { color: #9ca3af; font-size: 12px; line-height: 1.5; padding: 8px 4px 2px; }

/* Wachtwoord vergeten / nieuw wachtwoord — kaartstijl */
.ogo-reset-head { text-align: center; padding: 8px 0 18px; }
.ogo-reset-icon { width: 48px; height: 48px; border-radius: 12px; background: #FFF7ED; color: #F97316; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ogo-reset-head h1 { font-family: var(--font-heading); font-size: 24px; font-weight: 800; text-transform: uppercase; color: var(--black, #111); margin: 0 0 6px; }
.ogo-reset-head p { font-size: 14px; color: var(--gray-600, #6b7280); margin: 0; line-height: 1.55; }
.ogo-reset-form .ogo-field { margin-bottom: 14px; }
.ogo-reset-form .ogo-btn { width: 100%; margin-top: 4px; }
.ogo-reset-back { text-align: center; margin: 14px 0 0; font-size: 13px; }
.ogo-reset-back a { color: var(--gray-600, #6b7280); text-decoration: none; }
.ogo-reset-back a:hover { color: #F97316; }