/* ============================================================
   v3.0 — TEGELWERK
   Kleurvlakken per tegel, statische USP-strip, strakke
   sectie-koppen, zwarte pill-CTA's, takeaware-stijl raster.
   Hero (op homepage) blijft v2.5 papier-warm.
   ============================================================ */

:root {
  --color-page-bg: #FAFAFA;
  --color-ink: #1A1A1A;
  --color-card-bg: #FFFFFF;
  --tile-radius: 18px;
  --pill-radius: 9999px;
  --tile-gap: 16px;
  --series-red:       #C8102E;
  --series-red-soft:  #F5DAD9;
  --series-blue:      #2C5AA8;
  --series-blue-soft: #D9E3F2;
  --series-yellow:    #F5C518;
  --series-yellow-soft: #FCEFC2;
  --series-navy:      #003D7A;
  --series-navy-soft: #C9D6E5;
  --series-charcoal:  #1A1A1A;
}
body { background: var(--color-page-bg) !important; }

/* === Version banner (bovenaan elke v3-pagina) =============== */
.v3-banner {
  background: var(--series-charcoal);
  color: #fff;
  padding: 10px 24px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.v3-banner__tag {
  background: var(--series-yellow);
  color: var(--series-charcoal);
  padding: 3px 10px;
  border-radius: var(--pill-radius);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.v3-banner__nav { display: flex; gap: 18px; }
.v3-banner__nav a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.v3-banner__nav a:hover { color: #fff; }
.v3-banner__nav a.is-current { color: var(--series-yellow); }

/* === Decoratieve confetti weg in níet-hero secties ========== */
.products-section .deco,
.categories-section .deco,
.reviews-section .deco { display: none !important; }

/* === USP-strip: statisch =================================== */
.usp-strip {
  background: #fff !important;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  padding: 14px 0 !important;
}
.usp-strip__inner {
  overflow: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  padding: 4px 24px !important;
}
.marquee-track {
  animation: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  gap: 24px !important;
  flex-wrap: wrap;
  transform: none !important;
  width: 100% !important;
  padding: 0 !important;
  white-space: normal !important;
}
/* Cutoff = grootte van de eerste (niet-duplicate) set, nu 4 i.p.v. 6 sinds
   "Geproduceerd in Breda" + "Bulk korting vanaf 75 stuks" verwijderd zijn. */
.marquee-item:nth-child(n+5) { display: none !important; }
.marquee-item {
  color: var(--series-charcoal) !important;
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.marquee-item em {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--series-charcoal) !important;
}
.marquee-item__dot {
  background: var(--series-yellow) !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  margin-left: 10px;
  align-self: center !important;
}

/* === Section heading: strak, geen 01/02/03 ================== */
.section-heading,
.section-heading--editorial {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 32px !important;
  gap: 16px;
}
.section-heading__number { display: none !important; }
.section-heading__meta {
  color: #6B7280 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  flex-shrink: 0;
}
.section-heading__title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--series-charcoal) !important;
  margin: 0 !important;
  line-height: 1.05 !important;
}
.section-heading__title em,
.section-heading__title br { display: none !important; }

/* === Product cards: kleurvlak per serie ===================== */
.products-section {
  background: var(--color-page-bg) !important;
  padding: 64px 0 !important;
}
.products-grid { gap: var(--tile-gap) !important; }
.product-card {
  background: #fff !important;
  border: none !important;
  border-radius: var(--tile-radius) !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden !important;
  transition: transform 0.2s ease !important;
}
.product-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}
/* Hele card klikbaar via stretched-link op bestaande titel-link */
.product-card { position: relative !important; }
.product-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Img neemt klikken niet meer over; ze gaan door naar de stretched-link */
.product-card__image img { pointer-events: none !important; }
/* Houd actions/badge bovenop zodat ze nog eigen click krijgen */
.product-card__badge,
.product-card__actions { z-index: 3 !important; position: relative; }
.product-card__action-btn { position: relative; z-index: 3 !important; }
.product-card:nth-child(1),
.product-card:nth-child(2),
.product-card:nth-child(3),
.product-card:nth-child(4) { border-top: none !important; }
.product-card .product-card__image {
  padding: 24px !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.products-grid > .product-card:nth-child(1) .product-card__image,
.products-grid > .product-card:nth-child(5n+1) .product-card__image { background: var(--series-red-soft) !important; }
.products-grid > .product-card:nth-child(2) .product-card__image,
.products-grid > .product-card:nth-child(5n+2) .product-card__image { background: var(--series-blue-soft) !important; }
.products-grid > .product-card:nth-child(3) .product-card__image,
.products-grid > .product-card:nth-child(5n+3) .product-card__image { background: var(--series-yellow-soft) !important; }
.products-grid > .product-card:nth-child(4) .product-card__image,
.products-grid > .product-card:nth-child(5n+4) .product-card__image { background: var(--series-navy-soft) !important; }
.products-grid > .product-card:nth-child(5n+5) .product-card__image { background: #FCE4D6 !important; }
.product-card__image img {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
}
.product-card__body {
  padding: 16px 20px 20px !important;
  background: #fff !important;
}
.product-card__category {
  color: #6B7280 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 6px;
}
.product-card__title { margin: 0 0 8px !important; }
.product-card__title a {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--series-charcoal) !important;
  letter-spacing: -0.01em !important;
}
.product-card__price-current {
  color: var(--series-charcoal) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}
/* Badges verbergen — duplicaat met in-image stempels en zaten op rare plekken */
.product-card__badge,
.product-gallery__badge { display: none !important; }
/* Verlanglijst + snel-bekijken-knoppen uit (doen niets in preview) */
.product-card__actions { display: none !important; }

/* === Categorie-cards: kleurvlak per categorie =============== */
.categories-section {
  background: var(--color-page-bg) !important;
  padding: 32px 0 64px !important;
}
.categories-grid { gap: var(--tile-gap) !important; }
.category-card {
  border-radius: var(--tile-radius) !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  aspect-ratio: 4 / 5;
  transition: transform 0.2s ease;
}
.category-card:hover { transform: translateY(-3px); }
/* Kleurvlak per categorie (rood/antraciet/geel/navy via mix-blend-mode) eraf
   op verzoek Herriaan 25 aug 2026 — productfoto's plain tonen i.p.v. getint. */
.categories-grid > .category-card { background: var(--color-white) !important; }
.category-card__image {
  object-position: center bottom !important;
}
.category-card__overlay {
  background: linear-gradient(transparent 40%, rgba(0,0,0,0.55) 100%) !important;
  padding: 24px !important;
}
.category-card__title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
}
.category-card__count { color: rgba(255,255,255,0.85) !important; font-size: 13px !important; }
.category-card__arrow {
  background: #fff !important;
  color: var(--series-charcoal) !important;
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  box-shadow: none !important;
}

/* === Reviews =============================================== */
.reviews-section {
  background: #fff !important;
  padding: 64px 0 !important;
}
.reviews-grid { gap: var(--tile-gap) !important; }
.review-card {
  background: var(--color-page-bg) !important;
  border: none !important;
  border-radius: var(--tile-radius) !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 28px !important;
}
.review-card__text {
  color: var(--series-charcoal) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-style: normal !important;
}
.review-card__name { color: var(--series-charcoal) !important; }

/* === Algemene buttons ====================================== */
.btn--primary {
  background: var(--series-charcoal) !important;
  color: #fff !important;
  border-radius: var(--pill-radius) !important;
  box-shadow: none !important;
  border: none !important;
}
.btn--primary:hover { background: #000 !important; }
.btn--accent {
  background: var(--series-yellow) !important;
  color: var(--series-charcoal) !important;
  border-radius: var(--pill-radius) !important;
  box-shadow: none !important;
  border: none !important;
  font-weight: 700 !important;
}
.btn--accent:hover { background: #E6B414 !important; }

/* === Breadcrumbs (shop, product) ============================ */
.breadcrumbs {
  padding: 20px 0 !important;
  background: var(--color-page-bg) !important;
}
.breadcrumbs__list {
  font-size: 13px !important;
  color: #6B7280 !important;
}
.breadcrumbs__link {
  color: #6B7280 !important;
  text-decoration: none !important;
}
.breadcrumbs__link:hover { color: var(--series-charcoal) !important; }
.breadcrumbs__current { color: var(--series-charcoal) !important; font-weight: 600 !important; }
.breadcrumbs__separator { color: #D1D5DB !important; margin: 0 8px; }

/* === Shop layout =========================================== */
.shop-layout {
  background: var(--color-page-bg) !important;
  padding: 32px 0 64px !important;
}
.shop-sidebar {
  background: #fff !important;
  border-radius: var(--tile-radius) !important;
  padding: 28px !important;
  border: none !important;
  box-shadow: none !important;
}
.filter-group {
  border-bottom: 1px solid #E5E7EB !important;
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
}
.filter-group:last-child { border-bottom: none !important; }
/* Prijsfilter uit (slider werkt niet in deze preview) */
.shop-sidebar .filter-group:nth-of-type(2) { display: none !important; }
.filter-group__title {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--series-charcoal) !important;
  margin-bottom: 14px !important;
  text-transform: none !important;
}
.filter-item {
  padding: 6px 0 !important;
  color: #4B5563 !important;
  font-size: 14px !important;
}
.filter-item:hover { color: var(--series-charcoal) !important; }
.filter-item__count {
  color: #9CA3AF !important;
  font-size: 12px !important;
  background: transparent !important;
  padding: 0 !important;
}
.color-filters {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  flex-wrap: nowrap !important;
}
.color-filter {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 14px !important;
  color: #4B5563 !important;
  transition: background 0.15s ease;
}
.color-filter:hover { background: #F3F4F6 !important; color: var(--series-charcoal) !important; }
.color-filter.active { background: #F3F4F6 !important; color: var(--series-charcoal) !important; }
.color-filter__dot {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px #E5E7EB !important;
  flex-shrink: 0;
  display: inline-block !important;
}

.shop-toolbar {
  background: #fff !important;
  border-radius: var(--tile-radius) !important;
  padding: 16px 20px !important;
  margin-bottom: var(--tile-gap) !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px;
}
.shop-toolbar__count { color: #6B7280 !important; font-size: 13px !important; }
.shop-toolbar__sort select {
  border-radius: var(--pill-radius) !important;
  border: 1px solid #E5E7EB !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  background: #fff !important;
}
/* View-toggle uit (raster/lijst doen niets in deze preview) */
.shop-toolbar__view { display: none !important; }

/* === Product detail page ==================================== */
.product-detail { background: var(--color-page-bg) !important; padding: 24px 0 48px !important; }
.product-gallery,
.product-gallery__main {
  background: #fff !important;
  border-radius: var(--tile-radius) !important;
  border: none !important;
  box-shadow: none !important;
}
.product-gallery__main {
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 32px !important;
  background: var(--series-red-soft) !important;  /* fallback voor product 1 */
}
.product-info {
  background: transparent !important;
  padding: 0 24px !important;
}
.product-info__title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--series-charcoal) !important;
  margin: 12px 0 8px !important;
  line-height: 1.05 !important;
}
.product-info__price {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--series-charcoal) !important;
}
.product-option__label {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--series-charcoal) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.product-option__select,
.product-option select {
  border-radius: var(--pill-radius) !important;
  border: 1px solid #E5E7EB !important;
  padding: 10px 16px !important;
  background: #fff !important;
}
.quantity-selector {
  border-radius: var(--pill-radius) !important;
  border: 1px solid #E5E7EB !important;
  background: #fff !important;
  overflow: hidden;
}
.quantity-selector__btn {
  background: #fff !important;
  color: var(--series-charcoal) !important;
  border: none !important;
}
.quantity-selector__btn:hover { background: #F3F4F6 !important; }

.color-siblings {
  background: #fff !important;
  border-radius: var(--tile-radius) !important;
  padding: 20px !important;
  border: none !important;
  box-shadow: none !important;
}
.color-siblings__label {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--series-charcoal) !important;
  text-transform: none !important;
  margin-bottom: 12px !important;
}
.color-siblings__grid { gap: 10px !important; }
.color-sibling {
  border-radius: 12px !important;
  border: 2px solid transparent !important;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.color-sibling:hover { transform: translateY(-2px); }
.color-sibling.is-current { border-color: var(--series-charcoal) !important; }
.color-sibling__name {
  font-size: 12px !important;
  color: var(--series-charcoal) !important;
  padding: 6px 8px !important;
}

.product-trust {
  background: var(--series-yellow-soft) !important;
  border-radius: var(--tile-radius) !important;
  padding: 20px !important;
  border: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.product-trust__item {
  background: transparent !important;
  border: none !important;
}
.product-trust__icon { color: var(--series-charcoal) !important; }

.product-tabs__nav {
  border-bottom: 1px solid #E5E7EB !important;
  gap: 4px !important;
}
.product-tabs__tab {
  border: none !important;
  background: transparent !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
}
.product-tabs__tab.active {
  color: var(--series-charcoal) !important;
  border-bottom-color: var(--series-charcoal) !important;
  background: transparent !important;
}
.product-tabs__content {
  padding: 24px 0 !important;
  background: transparent !important;
  border: none !important;
}
.specs-table {
  background: #fff !important;
  border-radius: var(--tile-radius) !important;
  overflow: hidden;
  border: 1px solid #E5E7EB !important;
}
.specs-table th, .specs-table td {
  padding: 14px 20px !important;
}

.related-products {
  background: var(--color-page-bg) !important;
  padding: 64px 0 !important;
}

/* === Contact page =========================================== */
.contact-section {
  background: var(--color-page-bg) !important;
  padding: 48px 0 64px !important;
}
.contact-layout {
  gap: var(--tile-gap) !important;
}
.contact-info-card {
  border-radius: var(--tile-radius) !important;
  padding: 28px !important;
  border: none !important;
  box-shadow: none !important;
  background: #fff !important;
  position: relative;
  overflow: hidden;
}
.contact-info > .contact-info-card:nth-child(1) { background: var(--series-yellow) !important; }
.contact-info > .contact-info-card:nth-child(2) { background: var(--series-red) !important; color: #fff !important; }
.contact-info > .contact-info-card:nth-child(3) { background: var(--series-charcoal) !important; color: #fff !important; }
.contact-info > .contact-info-card:nth-child(4) { background: var(--series-navy) !important; color: #fff !important; }

.contact-info-card__icon {
  background: rgba(0,0,0,0.08) !important;
  border-radius: 50% !important;
  width: 44px !important; height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px !important;
}
.contact-info > .contact-info-card:nth-child(2) .contact-info-card__icon,
.contact-info > .contact-info-card:nth-child(3) .contact-info-card__icon,
.contact-info > .contact-info-card:nth-child(4) .contact-info-card__icon {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
.contact-info-card__title {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: inherit !important;
  margin-bottom: 4px !important;
}
.contact-info-card__text {
  color: inherit !important;
  opacity: 0.85;
  font-size: 14px !important;
}

.contact-form-wrapper {
  background: #fff !important;
  border-radius: var(--tile-radius) !important;
  padding: 32px !important;
  border: none !important;
  box-shadow: none !important;
}
.contact-form__title {
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 2.8vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--series-charcoal) !important;
  margin: 0 0 6px !important;
}
.contact-form__subtitle { color: #6B7280 !important; margin-bottom: 24px !important; }
.contact-form__label {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--series-charcoal) !important;
  margin-bottom: 6px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  border-radius: 12px !important;
  border: 1px solid #E5E7EB !important;
  background: #fff !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-family: var(--font-primary) !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--series-charcoal) !important;
  outline: none !important;
}
.contact-map {
  border-radius: var(--tile-radius) !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
}

/* === FAQ (shop) ============================================ */
.faq-section { background: #fff !important; padding: 64px 0 !important; }
.faq-grid { gap: var(--tile-gap) !important; }
.faq-item {
  background: var(--color-page-bg) !important;
  border-radius: var(--tile-radius) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 24px !important;
}
.faq-item__question {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--series-charcoal) !important;
}
.faq-item__icon { color: var(--series-charcoal) !important; }
.faq-item__answer { color: #4B5563 !important; }

/* === Mobile ================================================= */
@media (max-width: 900px) {
  .section-heading,
  .section-heading--editorial {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .v3-banner { padding: 8px 16px; font-size: 12px; gap: 12px; }
  .v3-banner__nav { gap: 12px; }
}

@media (max-width: 768px) {
  /* === Header compactering — voorkomt overflow rechts =========== */
  .header__inner {
    gap: 4px !important;
    padding: 10px 0 !important;
  }
  .header__logo {
    font-size: 14px !important;
    flex-shrink: 0;
    gap: 6px !important;
  }
  .header__logo img,
  .header__logo-img {
    height: 28px !important;
  }
  .header__actions {
    gap: 2px !important;
    flex-shrink: 0;
    margin-left: auto;
  }
  .header__action-btn {
    width: 32px !important;
    height: 32px !important;
  }
  /* Op mobile: zoeken + wishlist verbergen, alleen winkelwagen houden */
  .header__actions > button[aria-label="Zoeken"],
  .header__actions > button[aria-label="Verlanglijst"] {
    display: none !important;
  }
  /* "Mijn Account" label verbergen op mobile, alleen icon-link */
  .header__account {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    position: relative;
  }
  .header__account i,
  .header__account svg {
    text-indent: 0;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  /* Lang-switcher compact */
  .lang-switcher__toggle {
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  /* Hamburger duidelijk zichtbaar */
  .header__menu-toggle {
    width: 36px !important;
    height: 36px !important;
    margin-left: 4px;
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: var(--series-charcoal);
    cursor: pointer;
  }
  .header__menu-toggle:hover { background: #F3F4F6; }
  .header__menu-toggle.is-open {
    background: var(--series-charcoal);
    color: #fff;
    border-color: var(--series-charcoal);
  }

  /* Mobile drawer (uitschuif-menu) */
  .mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    z-index: 1000;
    box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    padding: 24px;
    transition: right 0.25s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .mobile-drawer.is-open { right: 0; }
  .mobile-drawer__close {
    align-self: flex-end;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: var(--series-charcoal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }
  .mobile-drawer__close svg { color: var(--series-charcoal); }
  .mobile-drawer__link {
    display: block;
    padding: 14px 8px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--series-charcoal);
    border-bottom: 1px solid #F3F4F6;
    text-decoration: none;
  }
  .mobile-drawer__link:hover { color: var(--series-red); }
  .mobile-drawer__link.is-current { color: var(--series-red); }
  .mobile-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mobile-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }
  body.no-scroll { overflow: hidden; }
}
/* Buiten mobile: verberg drawer-elementen */
@media (min-width: 769px) {
  .mobile-drawer,
  .mobile-drawer__backdrop { display: none !important; }
}

@media (max-width: 768px) {
  /* === USP-strip: 3 kern-USPs, single row, rustige typografie === */
  .usp-strip__inner { padding: 10px 16px !important; }
  .marquee-track {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  /* Toon op mobile alleen 3 essentiële USPs (FSC, levertijd, eigen ontwerp).
     Was FSC/levertijd/bulk; "bulk korting" is uit de marquee-set verwijderd,
     positie 4 is nu "Eigen ontwerp bedrukken? Tuurlijk" (past net zo goed). */
  .marquee-item { display: none !important; }
  .marquee-item:nth-child(1),
  .marquee-item:nth-child(2),
  .marquee-item:nth-child(4) {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    white-space: normal;
    color: var(--series-charcoal) !important;
  }
  .marquee-item__dot {
    width: 5px !important;
    height: 5px !important;
    margin-left: 0 !important;
    margin-right: 4px;
    order: -1;
    flex-shrink: 0;
  }

  /* === V3 banner blijft compact ================================ */
  .v3-banner {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 6px 12px !important;
    font-size: 11px !important;
    gap: 8px !important;
  }
  .v3-banner__tag {
    font-size: 10px;
    padding: 2px 8px;
  }
  .v3-banner__nav { gap: 10px !important; }

  /* === Shop sidebar verbergen op mobile (fase 2 = bottom-sheet drawer) === */
  .shop-sidebar { display: none !important; }
  .shop-toolbar { width: 100% !important; }

  /* === Contact map: vaste ratio, niet te smal ================== */
  .contact-map iframe,
  .contact-map {
    width: 100% !important;
    min-height: 280px !important;
    aspect-ratio: 4 / 3;
    border-radius: var(--tile-radius) !important;
  }
}

/* === Puntzakmaat variation swatches (fase1 look) — Katama 26-05-2026 ============ */
.variable-items-wrapper.button-variable-items-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}
li.button-variable-item {
  border: 1.5px solid var(--color-border) !important;
  border-radius: 10px !important;
  background: var(--color-white) !important;
  box-shadow: none !important;
  margin: 0 !important;
  overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
li.button-variable-item .variable-item-span {
  padding: 9px 15px !important;
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: var(--color-text) !important;
  min-width: auto !important;
  width: auto !important;
}
li.button-variable-item:hover:not(.selected):not(.radio-disabled):not(.disabled) {
  border-color: var(--color-primary) !important;
}
li.button-variable-item:hover:not(.selected):not(.radio-disabled):not(.disabled) .variable-item-span {
  color: var(--color-primary) !important;
}
li.button-variable-item.selected {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  box-shadow: none !important;
}
li.button-variable-item.selected .variable-item-span {
  color: var(--color-white) !important;
}
li.button-variable-item.radio-disabled,
li.button-variable-item.disabled {
  opacity: .4 !important;
}
@media (max-width: 768px) {
  .variable-items-wrapper.button-variable-items-wrapper { gap: 6px; }
  li.button-variable-item .variable-item-span { padding: 8px 12px !important; font-size: 13px !important; }
}
/* ============================================================================== */

/* === Mobile single-product grid-blowout fix — Katama 26-05-2026 ================
   1fr-track (=minmax(auto,1fr)) expandeerde tot min-content (586px) van een kind,
   waardoor de product-info kolom overflowde op mobile. minmax(0,1fr)+min-width:0
   dwingt de kolom naar containerbreedte; swatches (flex-wrap) en color-siblings
   (auto-fill) reflowen dan netjes. */
@media (max-width: 1024px) {
  .product-detail__inner { grid-template-columns: minmax(0, 1fr) !important; }
  .product-detail__inner > * { min-width: 0 !important; }
}
/* ============================================================================== */

/* === Offerte-aanvragen pagina (ID 13439) — intro + form on-brand — Katama 28-05-2026 === */
.fz-offerte-form .elementor-section .elementor-container {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.fz-offerte-form .elementor-widget-wrap {
  padding: 8px 20px 56px !important;
}
.fz-offerte-form .elementor-widget-heading h1 {
  font-family: var(--font-primary) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 5vw, 40px) !important;
  line-height: 1.15 !important;
  color: var(--color-text) !important;
  margin: 12px 0 16px !important;
}
.fz-offerte-form .elementor-widget-text-editor {
  color: var(--color-text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin-bottom: 8px !important;
}
.fz-offerte-form .elementor-widget-text-editor p {
  margin: 0 0 14px !important;
}

/* Form fields */
.fz-offerte-form .elementor-field-group {
  margin-bottom: 18px !important;
}
.fz-offerte-form .elementor-field-group > label {
  display: block !important;
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--color-text) !important;
  margin-bottom: 6px !important;
}
.fz-offerte-form .elementor-field-group .elementor-field-textual,
.fz-offerte-form .elementor-field-group textarea,
.fz-offerte-form .elementor-field-group input[type="text"],
.fz-offerte-form .elementor-field-group input[type="email"],
.fz-offerte-form .elementor-field-group input[type="tel"],
.fz-offerte-form .elementor-field-group input[type="number"],
.fz-offerte-form .elementor-field-group input[type="date"] {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  background: var(--color-white) !important;
  font-family: var(--font-secondary, var(--font-primary)) !important;
  font-size: 15px !important;
  color: var(--color-text) !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: border-color .15s ease;
}
.fz-offerte-form .elementor-field-group .elementor-field-textual:focus,
.fz-offerte-form .elementor-field-group textarea:focus,
.fz-offerte-form .elementor-field-group input:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
}
.fz-offerte-form .elementor-field-group textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Checkbox groups */
.fz-offerte-form .elementor-field-subgroup {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.fz-offerte-form .elementor-field-subgroup.elementor-subgroup-inline {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px 20px !important;
}
.fz-offerte-form .elementor-field-subgroup .elementor-field-option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.fz-offerte-form .elementor-field-subgroup .elementor-field-option label {
  font-weight: 400 !important;
  font-size: 15px !important;
  color: var(--color-text) !important;
  margin: 0 !important;
  cursor: pointer !important;
}
.fz-offerte-form .elementor-field-subgroup input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--color-primary) !important;
  margin: 0 !important;
}

/* File upload */
.fz-offerte-form .elementor-field-group input[type="file"] {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1px dashed var(--color-border) !important;
  border-radius: 8px !important;
  background: var(--color-white) !important;
  font-size: 14px !important;
  color: var(--color-text-secondary) !important;
}

/* Submit button */
.fz-offerte-form .elementor-button[type="submit"],
.fz-offerte-form .elementor-form .elementor-button {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  width: auto !important;
  cursor: pointer !important;
  transition: background-color .15s ease;
}
.fz-offerte-form .elementor-button[type="submit"]:hover,
.fz-offerte-form .elementor-form .elementor-button:hover {
  background-color: var(--color-primary-hover) !important;
}

/* === Productpagina parity (puntzak) === */
.fz-fase1-single-product .fz-maten-hint { margin: 12px 0 0; font-size: 14px; }
.fz-fase1-single-product .fz-maten-hint a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.fz-fase1-single-product .fz-usp-badges { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 16px; }
.fz-fase1-single-product .fz-usp-badges li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); }
.fz-fase1-single-product .fz-usp-badges i { width: 18px; height: 18px; color: var(--color-primary); }
.fz-fase1-single-product .fz-specs, .fz-fase1-single-product .fz-toepassingen { padding: 32px 0; }
.fz-fase1-single-product .fz-specs h2, .fz-fase1-single-product .fz-toepassingen h2 { font-size: 24px; font-weight: 700; margin: 0 0 16px; }
.fz-fase1-single-product .fz-specs__table { width: 100%; max-width: 600px; border-collapse: collapse; }
.fz-fase1-single-product .fz-specs__table th, .fz-fase1-single-product .fz-specs__table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 14px; }
.fz-fase1-single-product .fz-specs__table th { font-weight: 600; width: 35%; color: var(--color-text); }
.fz-fase1-single-product .fz-toepassingen__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-width: 760px; }
.fz-fase1-single-product .fz-toepassingen__list li { position: relative; padding-left: 26px; font-size: 15px; }
.fz-fase1-single-product .fz-toepassingen__list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-primary); }

/* === P4: Single product add-to-cart button (was zwart) → groen primary ============ */
body.single-product .product-info form.cart .single_add_to_cart_button,
body.single-product form.cart button.single_add_to_cart_button {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: pointer !important;
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease !important;
}
body.single-product .product-info form.cart .single_add_to_cart_button:hover,
body.single-product form.cart button.single_add_to_cart_button:hover {
  background-color: var(--color-primary-hover) !important;
  box-shadow: var(--shadow-md) !important;
}
body.single-product .product-info form.cart .single_add_to_cart_button:active,
body.single-product form.cart button.single_add_to_cart_button:active {
  transform: translateY(1px) !important;
}
body.single-product .product-info form.cart .single_add_to_cart_button.disabled,
body.single-product .product-info form.cart .single_add_to_cart_button.wc-variation-selection-needed,
body.single-product form.cart button.single_add_to_cart_button.disabled,
body.single-product form.cart button.single_add_to_cart_button.wc-variation-selection-needed {
  background-color: var(--color-text-light) !important;
  color: var(--color-white) !important;
  cursor: not-allowed !important;
  opacity: .8 !important;
  box-shadow: none !important;
}

/* P4: quantity-input naast de groene knop (was los zwevend) */
/* P4 layout: quantity + button NAAST elkaar in flex-row (default was block, qty boven button) */
body.single-product form.cart .woocommerce-variation-add-to-cart,
body.single-product form.cart .variations_button {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
body.single-product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button,
body.single-product form.cart .variations_button .single_add_to_cart_button {
  flex: 1 1 220px !important;
  min-width: 220px !important;
}
body.single-product form.cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
body.single-product form.cart .quantity input.qty {
  width: 72px !important;
  padding: 12px 8px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 999px !important;
  background: var(--color-white) !important;
  font-family: var(--font-primary) !important;
  font-size: 16px !important;
  text-align: center !important;
  color: var(--color-text) !important;
}

/* === P3: Lege Puntzakmaat-container weg ============================================ */
/* woo-variation-swatches geeft th.label + td.value een grijze achtergrond + border.
   Op deze single-product layout met display:block voor de rijen ziet dat eruit
   als een lege box bovenop de PZ-knoppen. Strip de styling, behoud alleen het label. */
body.single-product .variations,
body.single-product .variations tbody,
body.single-product .variations tr,
body.single-product .variations th.label,
body.single-product .variations td.value {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.single-product .variations th.label {
  padding: 0 0 8px 0 !important;
  height: auto !important;
}
body.single-product .variations th.label label {
  display: block !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--color-text) !important;
  margin: 0 !important;
}
body.single-product .variations td.value {
  padding: 0 !important;
}
body.single-product .variations td.value > ul.variable-items-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
body.single-product .variations td.value > ul.variable-items-wrapper > li.variable-item {
  margin: 0 !important;
}
body.single-product .variations .reset_variations {
  display: inline-block !important;
  margin-top: 10px !important;
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
  text-decoration: none !important;
}
body.single-product .variations .reset_variations:hover {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}

/* === H5: section-padding +30-40% voor ademend verticaal ritme op homepage ========== */
body.home .products-section,
body.home .categories-section,
body.home .reviews-section,
body.home .cta-banner,
body.home .seo-content,
body.home .contact-channels {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
body.home .categories-section { padding-top: 64px !important; }
@media (max-width: 768px) {
  body.home .products-section,
  body.home .categories-section,
  body.home .reviews-section,
  body.home .cta-banner,
  body.home .seo-content,
  body.home .contact-channels {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* === P6: Toepassingen als bullets ipv tegelgrid =================================== */
body.single-product .fz-toepassingen .fz-toepassingen__list {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 760px !important;
  margin: 0 !important;
}
body.single-product .fz-toepassingen .fz-toepassingen__list li {
  padding: 6px 0 6px 26px !important;
  font-size: 15px !important;
}
body.single-product .fz-toepassingen .fz-toepassingen__list li::before {
  top: 13px !important;
  width: 8px !important;
  height: 8px !important;
}

/* === S4: prijsformaat €6,49 ipv € 6,49 (visual tightening) ========================= */
body.woocommerce-shop .woocommerce-Price-amount bdi,
body.single-product .woocommerce-Price-amount bdi,
.products .woocommerce-Price-amount bdi { letter-spacing: -0.01em !important; }
.woocommerce-Price-currencySymbol { margin-right: 0 !important; }

/* === H3: product-categorie count styling op homepage =============================== */
.categories-section .woocommerce-loop-category__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 12px 0 4px;
  text-align: center;
}
.categories-section .woocommerce-loop-category__title mark.count { display: none !important; }
.categories-section .fz-cat-count {
  display: block;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 4px;
}

/* === Maten Overzicht-tabel per puntzak-productpage ================================ */
.fz-maten-tabel { padding: 56px 0; background: var(--color-page-bg); }
.fz-maten-tabel h2 { font-family: var(--font-display); font-size: 32px; font-weight: 700; margin: 0 0 8px; color: var(--color-text); }
.fz-maten-tabel h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 8px 0 12px; color: var(--color-text); }
.fz-maten-tabel__intro { font-size: 15px; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 24px; max-width: 760px; }
.fz-maten-tabel__wrap { background: var(--color-white); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.fz-maten-tabel__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fz-maten-tabel__table thead th { background: var(--color-page-bg); padding: 16px 20px; text-align: left; font-weight: 700; color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.fz-maten-tabel__table tbody th, .fz-maten-tabel__table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--color-border); text-align: left; font-weight: 400; color: var(--color-text); background: transparent; }
.fz-maten-tabel__table tbody tr:last-child th, .fz-maten-tabel__table tbody tr:last-child td { border-bottom: 0; }
.fz-maten-tabel__table tbody tr:nth-child(even) th, .fz-maten-tabel__table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.025); }
.fz-maten-tabel__table tbody th { font-weight: 600; }
@media (max-width: 640px) {
  .fz-maten-tabel { padding: 40px 0; }
  .fz-maten-tabel h2 { font-size: 26px; }
  .fz-maten-tabel h3 { font-size: 18px; }
  .fz-maten-tabel__table { font-size: 14px; }
  .fz-maten-tabel__table thead th, .fz-maten-tabel__table tbody th, .fz-maten-tabel__table tbody td { padding: 12px 14px; }
}

/* === P1: Magnifier zoom-icoon in product-gallery (was browser-emoji) =============== */
/* WP rendert <img class="emoji" alt="🔍"> binnen .woocommerce-product-gallery__trigger.
   Verberg de emoji, render een Lucide zoom-in SVG als background. */
body.single-product .woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 99 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background-color: var(--color-white) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cline x1='11' x2='11' y1='8' y2='14'/%3E%3Cline x1='8' x2='14' y1='11' y2='11'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  box-shadow: var(--shadow-md) !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  transition: background-color .15s ease, transform .15s ease !important;
}
body.single-product .woocommerce-product-gallery__trigger:hover {
  background-color: var(--color-page-bg) !important;
  transform: scale(1.05) !important;
}
body.single-product .woocommerce-product-gallery__trigger > * {
  display: none !important;
}

/* === P5: Puntzakmaat als dropdown ipv 8 pillen op productpage ====================== */
/* woo-variation-swatches rendert standaard een <ul.variable-items-wrapper> met buttons
   en hide de native <select>. Voor referentie-parity (dropdown) draaien we dat om:
   verberg de UL, toon de select met brand-styling. */
body.single-product .variations td.value > ul.variable-items-wrapper { display: none !important; }
body.single-product .variations select.woo-variation-raw-select,
body.single-product .variations select#puntzakmaat {
  display: block !important;
  width: 100% !important;
  max-width: 320px !important;
  padding: 12px 36px 12px 16px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 999px !important;
  background-color: var(--color-white) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  font-family: var(--font-primary) !important;
  font-size: 15px !important;
  color: var(--color-text) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
body.single-product .variations select#puntzakmaat:focus {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* P4: qty-input specificity bump (was overruled door eerdere theme regel naar 80px/8px) */
body.single-product form.cart .quantity input.qty,
form.cart .quantity input.qty {
  width: 72px !important;
  border-radius: 999px !important;
}

/* Offerte-form: gekozen bestandsnaam onder de upload-knop (UX-bevestiging) */
.fz-upload-filename {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  word-break: break-all;
}
.fz-upload-filename.is-filled {
  color: var(--color-text);
  font-weight: 600;
}
.fz-upload-filename.is-filled::before {
  content: "\2713\00a0\00a0";
  color: var(--color-primary);
}

/* === Offerte-CTA in hoofdnav (Willem-feedback 15 jun: offerte prominent maken) ===
 * Donkere merktekst (#1B3A4B) i.p.v. wit op het goud: wit-op-goud haalde maar
 * 2.13:1 (onder WCAG AA), donker-op-goud ~5.7:1. Goud blijft de merkkleur. */
.nav__link--cta {
  background: var(--color-accent) !important;
  color: var(--color-topbar, #1B3A4B) !important;
  font-weight: 700 !important;
}
.nav__link--cta:hover,
.nav__link--cta:focus-visible {
  background: var(--color-accent-hover) !important;
  color: var(--color-topbar, #1B3A4B) !important;
}
.nav__link--cta.active::after { content: none !important; }


/* === WPML dev-site front-end banner verbergen (staging) ===
   WPML toont op een development-sitekey een front-end balk
   ("This site is registered on wpml.org as a development site")
   voor ALLE bezoekers. Op de productie-key verdwijnt die vanzelf;
   tot die tijd verbergen we 'm zodat de staging-review schoon is. */
.otgs-development-site-front-end { display: none !important; }


/* ===================================================================
   WooCommerce Cart- & Checkout-blokken in v3-lijn (Willem-feedback:
   "afrekenen en winkelwagen passen niet in het ontwerp").
   De cart/checkout draaien op de WC Block-editor (.wp-block-woocommerce-*),
   niet de klassieke shortcode. Default-styling = donkere/grijze knoppen +
   ink-cirkel-steppers + alignwide-overflow links. Hier naar het v3-palet
   (groen #2D9B4E primair, ink #1A1A1A, border #E5E7EB, radius 8px).
   =================================================================== */

/* 1) Alignwide-overflow: de cart trok via .alignwide negatieve marges
   (left:-56px → tabel viel links buiten beeld). Centreren binnen de container. */
body.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
body.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide {
    max-width: var(--container-max, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2) Hoeveelheid-stepper (was ink-zwarte cirkels) → v3 outline-groen */
.wc-block-components-quantity-selector {
    border-color: var(--color-border, #E5E7EB) !important;
    border-radius: var(--btn-radius, 8px) !important;
    /* WC's default vaste breedte (~107px) is te smal voor 40+40+50px
       (knoppen + verbreed input hieronder) → knopt anders over de rand.
       fit-content i.p.v. auto (Codex-review PR 140): auto kan de container
       in block-layout over de volle celbreedte uitrekken i.p.v. krimpen
       naar de children — fit-content shrink-wrapt altijd. */
    width: fit-content !important;
}
/* Dubbele class + body-scope nodig: WC's cart.css/packages-style.css laden ná
   v3-overrides en zetten de knop ink-zwart met gelijke !important-specificiteit. */
body.woocommerce-cart .wc-block-components-quantity-selector__button.wc-block-components-quantity-selector__button,
body.woocommerce-checkout .wc-block-components-quantity-selector__button.wc-block-components-quantity-selector__button {
    background: var(--color-white, #fff) !important;
    color: var(--color-primary, #2D9B4E) !important;
    font-weight: 700 !important;
    /* De cart-page draait op het page-fase1-template; `.fase1-page-content button`
       (pill: bg #1A1A1A, radius 999px, padding 14px 28px) lekt naar deze WC-block-
       knoppen en maakt de stepper log (56px per knop). Padding/radius resetten →
       compacte stepper die past bij de 64x80 productthumb. */
    padding: 0 !important;
    border-radius: 0 !important;
    min-width: 40px !important;
    width: 40px !important;
}
/* 2c) Aantal-invoerveld: geen eigen breedte → erfde WC's te smalle default,
   waardoor een 2-cijferig aantal (bv. "10") afgekapt rendert. Zelfde dubbele
   class + body-scope als de stepper-knoppen hierboven (specificiteit-strijd
   met WC's eigen cart.css/packages-style.css, die ná v3-overrides laadt).
   Native number-spinner-pijltjes weg: die eten anders ruimte van de 2 cijfers. */
body.woocommerce-cart .wc-block-components-quantity-selector__input.wc-block-components-quantity-selector__input,
body.woocommerce-checkout .wc-block-components-quantity-selector__input.wc-block-components-quantity-selector__input {
    width: 50px !important;
    min-width: 50px !important;
    text-align: center !important;
    -moz-appearance: textfield !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
body.woocommerce-cart .wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
body.woocommerce-checkout .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
body.woocommerce-checkout .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button.wc-block-components-quantity-selector__button:hover,
body.woocommerce-cart .wc-block-components-quantity-selector__button.wc-block-components-quantity-selector__button:focus,
body.woocommerce-checkout .wc-block-components-quantity-selector__button.wc-block-components-quantity-selector__button:hover {
    background: var(--color-primary, #2D9B4E) !important;
    color: #fff !important;
}

/* 2b) Verwijder-knop: erfde dezelfde `.fase1-page-content button`-pill (donkere
   #1A1A1A-pill met alleen het prullenbak-icoon → oogde als een toggle-switch).
   Terug naar een kaal icoon-knopje, subtiel grijs met groene hover. */
body.woocommerce-cart .wc-block-cart-item__remove-link,
body.woocommerce-checkout .wc-block-cart-item__remove-link {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    color: var(--color-text-secondary, #6B7280) !important;
}
body.woocommerce-cart .wc-block-cart-item__remove-link:hover,
body.woocommerce-checkout .wc-block-cart-item__remove-link:hover {
    background: transparent !important;
    color: var(--color-primary, #2D9B4E) !important;
}

/* 3) Primaire WC-block-knoppen (Afrekenen / Plaats bestelling) → v3-groen.
   WC zet de achtergrond op het button-element; .contained dekt beide knoppen. */
.wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background-color: var(--color-primary, #2D9B4E) !important;
    border-radius: var(--btn-radius, 8px) !important;
    font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif !important;
    font-weight: 700 !important;
}
.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background-color: var(--color-primary-hover, #248a42) !important;
}
/* WC tekent de knop-achtergrond soms via ::before/__background-laag */
.wc-block-components-button.contained .wc-block-components-button__text { color: #fff !important; }

/* 4) Tekstlinks/secundaire accenten (coupon-toggle, "verder winkelen") → v3-groen i.p.v. default-blauw */
.wc-block-components-cart .wc-block-components-totals-item__label ~ a,
.wc-block-components-button.text,
.wc-block-components-totals-coupon__button.text,
a.wc-block-components-totals-coupon-link {
    color: var(--color-primary, #2D9B4E) !important;
}

/* 5) Sidebar-totalen + step-koppen in v3-typografie */
.wc-block-components-totals-item__value,
.wc-block-components-order-summary__title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title {
    font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif !important;
    color: var(--color-text, #1A1A1A) !important;
}
.wc-block-components-sidebar .wc-block-components-panel {
    border-radius: var(--card-radius, 12px) !important;
}

/* 6) Cross-sell productkaarten ("Maak je bestelling compleet") renderen via het
   Product Collection-blok (.wp-block-woocommerce-product-collection), niet de
   klassieke loop. Default = ink-zwarte pill-knop (#1A1A1A) + ink-prijs, wat afweek
   van de groene categorie-productkaarten (prijs + knop #1C8341, radius 10px).
   Hier gelijkgetrokken met de categorie-kaart. Cross-sells zijn de enige
   productkaarten op de cart-pagina, dus body.woocommerce-cart-scope is veilig.
   Dubbele class + body-scope: WC's product-collection-style laadt ná v3-overrides
   met gelijke !important-specificiteit. */
body.woocommerce-cart .wc-block-components-product-button__button.add_to_cart_button {
    background-color: var(--color-primary, #1C8341) !important;
    color: var(--color-white, #fff) !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
}
body.woocommerce-cart .wc-block-components-product-button__button.add_to_cart_button:hover,
body.woocommerce-cart .wc-block-components-product-button__button.add_to_cart_button:focus {
    background-color: var(--color-primary-hover, #156A33) !important;
    color: var(--color-white, #fff) !important;
}
body.woocommerce-cart .wc-block-woocommerce-product-price,
body.woocommerce-cart .wp-block-woocommerce-product-price {
    color: var(--color-primary, #1C8341) !important;
    font-weight: 700 !important;
}

/* === USP-strip: gecontainerde uitlijning + iets hoger ===
   De witte band blijft full-width, maar de USP-items lijnen nu uit op de site-container
   (1140px, gecentreerd) zodat de eerste/laatste USP gelijkloopt met de hero-tekst i.p.v.
   edge-to-edge. Plus wat meer verticale lucht zodat het een bewuste band wordt. */
.usp-strip {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}
.usp-strip__inner {
    width: min(100%, 1140px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media (max-width: 1200px) {
    .usp-strip__inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* === Dynamische bestseller-kaart: hele kaart klikbaar (stretched link) === */
.product-card__link {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
}

/* === Footer-betaalstrip: witte achtergrondplaat voor contrast (audit 30 jul 2026) ===
   De merk-badges (PayPal/Visa/Bancontact/iDEAL-outline) zijn ontworpen voor lichte
   achtergronden en zaten zonder eigen achtergrond direct op de donkere footer
   (--color-topbar #1B3A4B) — gemeten WCAG-contrast tot 1.01:1, ruim onder de 3:1-norm
   voor grafische elementen. Alleen Wero kreeg dit eerder een losse fix (PR #102,
   wordmark wit gerecolored); i.p.v. elk merk apart te recoloren (en daarmee officiële
   merkkleuren te wijzigen) krijgt de hele strip nu een lichte kaart, zodat alle
   merken hun eigen kleuren houden. */
.footer__payment {
    background: var(--color-card-bg, #fff);
    padding: 10px 16px;
    border-radius: 8px;
}