/*
 * Theme Name:  Made By Melissa Den Helder
 * Theme URI:   https://madebymelissa.nl
 * Description: Elegant botanisch WooCommerce thema voor handgemaakte tumblers en bekers. Met ingebouwde print-upload functionaliteit en volledige WooCommerce integratie.
 * Author:      WM Diensten Internet IT & Media
 * Version:     1.0.0
 * Requires at least: 6.0
 * Requires PHP: 8.0
 * License:     GNU General Public License v2 or later
 * Text Domain: madebymelissa
 * Tags:        woocommerce, elegant, botanical, custom-logo, full-width-template
 */

/* ─────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────── */
:root {
  --white:       #ffffff;
  --off-white:   #faf8f5;
  --cream:       #f4efe8;
  --blush:       #f0e6dc;
  --sage:        #c8d5c0;
  --sage-dark:   #8a9e80;
  --taupe:       #b5a89a;
  --brown:       #7a6455;
  --dark:        #2c2420;
  --black:       #1a1210;
  --accent:      #c4956a;
  --accent-lt:   #ddb898;

  --font-script:  'Great Vibes', cursive;
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;

  --transition: 0.28s ease;
  --shadow-soft: 0 4px 30px rgba(44,36,32,0.08);
}

/* ─────────────────────────────────────
   RESET & BASE
───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  margin: 0;
  background: var(--off-white);
  color: var(--dark);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--brown); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 1rem;
}

p { margin: 0 0 1rem; }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--taupe); border-radius: 2px; }

/* ─────────────────────────────────────
   LAYOUT
───────────────────────────────────── */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; }

.mbm-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* ─────────────────────────────────────
   TYPOGRAPHY HELPERS
───────────────────────────────────── */
.mbm-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.mbm-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.mbm-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--dark);
  line-height: 1.2;
}
.mbm-section-title em {
  font-style: italic;
  color: var(--accent);
}

.mbm-divider {
  width: 38px;
  height: 1px;
  background: var(--taupe);
  margin: 0.9rem 0 2.5rem;
}
.mbm-divider--center { margin-left: auto; margin-right: auto; }

.mbm-section-head { text-align: center; }
.mbm-section-head .mbm-eyebrow { justify-content: center; }
.mbm-section-head .mbm-eyebrow::before { display: none; }

/* ─────────────────────────────────────
   NAVIGATION
───────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250,248,245,0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(181,168,154,0.22);
}

.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2.5rem;
  height: 135px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo */
.site-branding a {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.site-branding .logo-script {
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--dark);
  display: block;
}
.site-branding .logo-name {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
  display: block;
  margin-top: 2px;
}
.site-branding img { max-height: 125px; width: auto; }
.site-title, .site-description { display: none; }

/* Navigation */
.main-navigation ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 2.5rem;
}
/* Dropdown niet als flex rij */
.main-navigation ul ul,
.mbm-nav-dropdown {
  display: none;
  flex-direction: column;
  gap: 0;
}
.main-navigation a {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown);
  text-decoration: none;
  transition: color var(--transition);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: var(--accent); }

/* Header right */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}



/* ── Winkelwagen knop ───────────────── */
.mbm-cart-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
  text-decoration: none;
  border: 1px solid var(--dark) !important;
  background: var(--dark) !important;
  padding: 0.6rem 1.3rem !important;
  border-radius: 0 !important;
  white-space: nowrap;
  line-height: 1 !important;
  transition: all var(--transition);
}
.mbm-cart-btn svg { flex-shrink: 0; }
.mbm-cart-btn:hover {
  background: transparent !important;
  color: var(--dark) !important;
  border-color: var(--dark) !important;
}
.mbm-cart-label { display: inline; }
.mbm-cart-count {
  background: var(--accent);
  color: white;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  font-size: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}



/* Mobile toggle */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(181,168,154,0.6);
  color: var(--brown);
  padding: 0.4rem 0.7rem;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}

/* ─────────────────────────────────────
   BUTTONS
───────────────────────────────────── */
.mbm-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-block;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 0.88rem 2.2rem !important;
  border: 1px solid var(--dark) !important;
  background: var(--dark) !important;
  color: var(--white) !important;
  cursor: pointer;
  transition: all var(--transition) !important;
  border-radius: 0 !important;
  text-decoration: none;
  line-height: 1 !important;
}
.mbm-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: transparent !important;
  color: var(--dark) !important;
}

.mbm-btn--outline {
  background: transparent !important;
  color: var(--dark) !important;
  border-color: rgba(181,168,154,0.7) !important;
}
.mbm-btn--outline:hover {
  background: var(--dark) !important;
  color: var(--white) !important;
  border-color: var(--dark) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--white) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--brown) !important;
  border-color: var(--brown) !important;
}

/* ─────────────────────────────────────
   FORMS
───────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea,
select,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper textarea,
.woocommerce-input-wrapper select {
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.5) !important;
  border-radius: 0 !important;
  color: var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 300 !important;
  padding: 0.75rem 1rem !important;
  outline: none !important;
  transition: border-color var(--transition) !important;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: var(--taupe) !important; }

label,
.woocommerce form .form-row label {
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--brown) !important;
  display: block !important;
  margin-bottom: 0.4rem !important;
}

/* ─────────────────────────────────────
   HERO (front-page)
───────────────────────────────────── */
.mbm-hero {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mbm-hero__text {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4rem 5rem 5rem;
  position: relative;
  overflow: hidden;
}
.mbm-hero__text::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 15% 85%, rgba(196,149,106,0.1) 0%, transparent 55%);
  pointer-events: none;
}

.mbm-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--dark);
  margin-bottom: 1.5rem;
}
.mbm-hero__title em { font-style: italic; color: var(--accent); }

.mbm-hero__sub {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--taupe);
  max-width: 380px;
  margin-bottom: 2.5rem;
}

.mbm-hero__visual {
  background: var(--blush);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}
.mbm-hero__circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(181,168,154,0.3);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.mbm-hero__circle:nth-child(1) { width: 360px; height: 360px; }
.mbm-hero__circle:nth-child(2) { width: 480px; height: 480px; border-color: rgba(181,168,154,0.15); }

.mbm-hero__tumbler {
  position: relative; z-index: 2;
  animation: mbmFloat 5s ease-in-out infinite;
}
@keyframes mbmFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-18px) rotate(2deg); }
}
.mbm-hero__tagline {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--brown);
  opacity: 0.55;
  position: relative; z-index: 2;
}

/* ─────────────────────────────────────
   USP FEATURES
───────────────────────────────────── */
.mbm-features {
  padding: 5rem 0;
  background: var(--off-white);
  border-top: 1px solid rgba(181,168,154,0.25);
  border-bottom: 1px solid rgba(181,168,154,0.25);
}
.mbm-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.5rem;
}
.mbm-feature {
  text-align: center;
  padding: 2.5rem 1.8rem;
  background: var(--white);
  border: 1px solid rgba(181,168,154,0.35);
  box-shadow: 0 2px 12px rgba(44,36,32,0.04);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.mbm-feature:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 8px 28px rgba(44,36,32,0.09);
}
.mbm-feature__icon { font-size: 2rem; display: block; margin-bottom: 1.2rem; }
.mbm-feature__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 0.6rem;
}
.mbm-feature p {
  font-size: 0.78rem;
  color: var(--taupe);
  line-height: 1.7;
  margin: 0;
}

/* ─────────────────────────────────────
   WOOCOMMERCE — PRODUCT GRID
───────────────────────────────────── */
.mbm-shop-section {
  padding: 5.5rem 0;
  background: var(--off-white);
}

/* ── Sectie koptekst gecentreerd ─────────────────── */
.mbm-shop-section .mbm-section-head,
.woocommerce-products-header {
  text-align: center;
  margin-bottom: 3rem;
}

/* ── Resultaten / sorteerbalk ────────────────────── */
.woocommerce-result-count,
.woocommerce-ordering {
  display: inline-block;
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
  float: right;
}

/* ── Productgrid — overschrijf WC columns-klassen ── */
.woocommerce ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
  width: 100% !important;
}

/* Elke producttegel als gewone blok-cel */
.woocommerce ul.products li.product,
.woocommerce ul.products.columns-3 li.product {
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.30) !important;
  box-shadow: 0 2px 14px rgba(44,36,32,0.05) !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  clear: none !important;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
  position: relative;
  overflow: hidden;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(196,149,106,0.6) !important;
  box-shadow: 0 10px 32px rgba(44,36,32,0.10) !important;
}

/* Productafbeelding */
.woocommerce ul.products li.product a img {
  height: 220px !important;
  width: 100% !important;
  object-fit: cover !important;
  transition: transform 0.45s ease !important;
  display: block !important;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04) !important;
}

/* Productnaam */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  padding: 1rem 1.2rem 0.2rem !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Prijs */
.woocommerce ul.products li.product .price {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--accent) !important;
  padding: 0.15rem 1.2rem 0.8rem !important;
  display: block !important;
  margin: 0 !important;
}

/* Toevoegen aan winkelwagen */
.woocommerce ul.products li.product a.button {
  margin: 0 1.2rem 1.2rem !important;
  width: calc(100% - 2.4rem) !important;
}

/* Aanbieding-badge */
.woocommerce ul.products li.product .onsale {
  background: var(--accent) !important;
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.12em !important;
  border-radius: 40px !important;
  top: 1rem !important;
  left: 1rem !important;
  min-height: auto !important;
  min-width: auto !important;
  padding: 0.25rem 0.8rem !important;
  line-height: 1.4 !important;
  z-index: 2 !important;
}

/* Ordering/results */
.woocommerce-result-count,
.woocommerce-ordering select {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
  color: var(--taupe) !important;
}

/* Filter pills (if using WC layered nav) */
.woocommerce .widget_layered_nav ul li a,
.woocommerce .widget_price_filter .price_slider_amount .button {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
}

/* ─────────────────────────────────────
   WOOCOMMERCE — SINGLE PRODUCT
───────────────────────────────────── */
.mbm-single-section {
  padding: 3rem 0 6rem;
  background: var(--cream);
}

/* ── Witte kaart — breadcrumb erboven ───────────── */
.mbm-single-section .woocommerce-breadcrumb {
  max-width: 1200px;
  margin: 0 auto 1.5rem !important;
  padding: 0 2rem !important;
  display: block !important;
}

.mbm-single-section .woocommerce > .woocommerce-notices-wrapper,
.mbm-single-section .woocommerce > nav.woocommerce-breadcrumb { display: block; }

/* De kaart zelf */
.mbm-single-section .woocommerce div.product {
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.22) !important;
  box-shadow: 0 4px 32px rgba(44,36,32,0.07) !important;
  padding: 3.5rem !important;
  display: grid !important;
  grid-template-columns: 52% 1fr !important;
  gap: 4.5rem !important;
  align-items: start !important;
}

/* ── Productafbeelding ──────────────────────────── */
.woocommerce div.product div.images {
  position: static !important;
}
.woocommerce div.product div.images img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  background: var(--off-white) !important;
}
/* Verberg de lelijke lichtblauwe placeholder achtergrond */
.woocommerce div.product div.images .woocommerce-product-gallery__image a {
  display: block !important;
  background: var(--off-white) !important;
}

/* Gallery thumbnails */
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex !important;
  gap: 0.5rem !important;
  margin-top: 0.75rem !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  border: 2px solid transparent !important;
  transition: border-color var(--transition) !important;
  opacity: 0.65 !important;
  width: 76px !important;
  height: 76px !important;
  object-fit: cover !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li.flex-active img {
  border-color: var(--accent) !important;
  opacity: 1 !important;
}

/* ── Product samenvatting ───────────────────────── */
.woocommerce div.product div.summary {
  padding-top: 0 !important;
}

/* ── Titel ──────────────────────────────────────── */
.woocommerce div.product .product_title {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 2.8vw, 2.8rem) !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  line-height: 1.15 !important;
  margin: 0.5rem 0 0.75rem !important;
}

/* ── Prijs ──────────────────────────────────────── */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display) !important;
  font-size: 1.9rem !important;
  font-weight: 400 !important;
  color: var(--accent) !important;
  display: block !important;
  margin: 0 0 1.5rem !important;
  padding-bottom: 1.5rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.25) !important;
}

/* ── Korte beschrijving ─────────────────────────── */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 0.88rem !important;
  color: var(--taupe) !important;
  line-height: 1.9 !important;
  margin: 0 0 1.5rem !important;
}

/* ── Lange beschrijving — altijd zichtbaar ──────── */
.mbm-product-description {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: #2c2420 !important;
  line-height: 1.9 !important;
  margin: 0 0 1.5rem !important;
  padding: 1.25rem 1.5rem !important;
  background: #f4efe8 !important;
  border-left: 3px solid #c4956a !important;
}
.mbm-product-description,
.mbm-product-description p,
.mbm-product-description li,
.mbm-product-description span {
  color: #2c2420 !important;
  font-size: 0.95rem !important;
}
.mbm-product-description p { margin-bottom: 0.75rem !important; }
.mbm-product-description p:last-child { margin-bottom: 0 !important; }
.mbm-product-description h2, .mbm-product-description h3 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  color: #2c2420 !important;
  margin-bottom: 0.5rem !important;
}

/* Verberg dubbele "Beschrijving" koptekst in de tab */
.woocommerce div.product .woocommerce-tabs #tab-description h2:first-child {
  display: none !important;
}

/* ── Form: knop direct, geen aantal veld ────────── */
.woocommerce div.product form.cart {
  display: block !important;
  margin-bottom: 1.5rem !important;
}
.woocommerce div.product form.cart::before { display: none !important; }

/* Verberg het aantal veld */
.woocommerce div.product form.cart .quantity {
  display: none !important;
}

/* ── Toevoegen aan winkelwagen knop ─────────────── */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .button {
  width: 100% !important;
  background: var(--dark) !important;
  color: var(--white) !important;
  border: 2px solid var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  padding: 1rem 2rem !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  height: 54px !important;
  white-space: nowrap !important;
  margin-top: 0 !important;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover {
  background: transparent !important;
  color: var(--dark) !important;
}

/* ── Product meta (categorie etc.) ─────────────── */
.woocommerce div.product .product_meta {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  color: var(--taupe) !important;
  margin-top: auto !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(181,168,154,0.2) !important;
}
.woocommerce div.product .product_meta a { color: var(--accent) !important; }

/* ── Tabs — volle breedte onder de kaart ────────── */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1 !important;
  margin-top: 0 !important;
  padding-top: 2.5rem !important;
  border-top: 1px solid rgba(181,168,154,0.2) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none !important;
  margin: 0 0 -1px !important;
  padding: 0 !important;
  display: flex !important;
  border-bottom: 1px solid rgba(181,168,154,0.3) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  padding: 0.9rem 1.6rem !important;
  display: block !important;
  border-bottom: 2px solid transparent !important;
  transition: all var(--transition) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  padding: 1.5rem 0 0 !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: #2c2420 !important;
  line-height: 1.9 !important;
}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li {
  color: #2c2420 !important;
}

/* Beschrijving tab */
.woocommerce div.product .woocommerce-tabs #tab-description h2 {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  margin: 0 0 1rem !important;
}
.woocommerce div.product .woocommerce-tabs #tab-description p {
  margin-bottom: 1rem !important;
}

/* Beoordelingen tab — visueel gescheiden van beschrijving */
.woocommerce div.product .woocommerce-tabs #tab-reviews {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* ── Voordelen balk ─────────────────────────────── */
.mbm-product-perks {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 1.2rem 0 1.5rem !important;
  border: 1px solid rgba(181,168,154,0.25) !important;
  background: var(--off-white) !important;
}
.mbm-product-perks__item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.85rem 1.1rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
  color: var(--dark) !important;
  border-bottom: 1px solid rgba(181,168,154,0.2) !important;
}
.mbm-product-perks__item:last-child { border-bottom: none !important; }
.mbm-product-perks__icon {
  font-size: 1rem !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  text-align: center !important;
}
.mbm-product-perks__text strong {
  display: block !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
}
.mbm-product-perks__text span {
  font-size: 0.72rem !important;
  color: var(--taupe) !important;
}

/* ── Betaalmethoden grid (zelfde stijl als voordelen) */
.mbm-payment-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border: 1px solid rgba(181,168,154,0.25) !important;
  background: var(--off-white) !important;
  margin: 0.5rem 0 1.5rem !important;
}
.mbm-payment-grid__item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.85rem 1.1rem !important;
  border-right: 1px solid rgba(181,168,154,0.2) !important;
  border-bottom: 1px solid rgba(181,168,154,0.2) !important;
}
.mbm-payment-grid__item:nth-child(even) { border-right: none !important; }
.mbm-payment-grid__item:nth-last-child(-n+2) { border-bottom: none !important; }
.mbm-payment-grid__icon svg {
  width: 40px !important;
  height: 26px !important;
  display: block !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(44,36,32,0.1) !important;
  border-radius: 3px !important;
}
.mbm-payment-grid__text strong {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
}
.mbm-payment-grid__text span {
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  color: var(--taupe) !important;
}

/* ─────────────────────────────────────
   PRINT UPLOAD SECTIE
───────────────────────────────────── */
.mbm-upload-box {
  background: var(--cream);
  border: 1px solid rgba(181,168,154,0.3);
  padding: 1.6rem;
  margin: 1.5rem 0;
}
.mbm-upload-box__title {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--accent) !important;
  margin-bottom: 0.3rem !important;
}
.mbm-upload-box__hint {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--taupe);
  letter-spacing: 0.06em;
  margin-bottom: 1rem !important;
}

.mbm-dropzone {
  border: 1px dashed rgba(181,168,154,0.7);
  padding: 2.2rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  background: var(--white);
}
.mbm-dropzone:hover,
.mbm-dropzone.is-over {
  border-color: var(--accent);
  background: rgba(196,149,106,0.04);
}
.mbm-dropzone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100% !important; height: 100% !important;
  padding: 0 !important; border: none !important;
}
.mbm-dropzone__icon {
  display: block;
  font-size: 1.8rem;
  color: var(--taupe);
  margin-bottom: 0.5rem;
}
.mbm-dropzone p {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--taupe);
  line-height: 1.65;
  margin: 0;
}
.mbm-dropzone strong { color: var(--accent); }

.mbm-upload-preview {
  display: none;
  margin-top: 1rem;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  padding: 0.8rem;
  border: 1px solid rgba(181,168,154,0.3);
}
.mbm-upload-preview.is-visible { display: flex; }
.mbm-upload-preview img {
  width: 56px; height: 56px;
  object-fit: contain;
  border: 1px solid rgba(181,168,154,0.4);
}
.mbm-upload-preview__name {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--brown);
  letter-spacing: 0.06em;
  flex: 1;
}
.mbm-remove-upload {
  background: transparent;
  border: 1px solid var(--taupe);
  color: var(--taupe);
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: all var(--transition);
}
.mbm-remove-upload:hover { border-color: var(--brown); color: var(--brown); }

/* ─────────────────────────────────────
   WOOCOMMERCE — REVIEWS (beoordelingen)
───────────────────────────────────── */
.woocommerce-Reviews .woocommerce-Reviews-title { display: none !important; }

/* Review form */
.woocommerce #review_form #respond {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.woocommerce #review_form #respond .comment-reply-title {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  margin-bottom: 1.2rem !important;
}
.woocommerce #review_form #respond label {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  display: block !important;
  margin-bottom: 0.4rem !important;
}
.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
  width: 100% !important;
  border: 1px solid rgba(181,168,154,0.4) !important;
  border-radius: 0 !important;
  background: var(--white) !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--dark) !important;
  padding: 0.75rem 1rem !important;
  box-shadow: none !important;
  outline: none !important;
  resize: vertical !important;
  transition: border-color 0.2s !important;
}
.woocommerce #review_form #respond textarea:focus,
.woocommerce #review_form #respond input:focus {
  border-color: var(--accent) !important;
}
.woocommerce #review_form #respond .form-submit input[type="submit"] {
  background: var(--dark) !important;
  color: var(--white) !important;
  border: 2px solid var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 0.9rem 2.5rem !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  box-shadow: none !important;
}
.woocommerce #review_form #respond .form-submit input[type="submit"]:hover {
  background: transparent !important;
  color: var(--dark) !important;
}

/* Sterren */
.woocommerce .stars a { color: var(--accent) !important; }
.woocommerce-product-rating .star-rating span::before,
.woocommerce .star-rating span::before { color: var(--accent) !important; }

/* Geen beoordelingen tekst */
.woocommerce-noreviews {
  font-size: 0.85rem !important;
  color: var(--taupe) !important;
  margin-bottom: 1.5rem !important;
}

/* ─────────────────────────────────────
   WOOCOMMERCE — GERELATEERDE PRODUCTEN
───────────────────────────────────── */
.related.products,
.upsells.products {
  margin-top: 4rem !important;
  padding-top: 3rem !important;
  border-top: 1px solid rgba(181,168,154,0.2) !important;
  clear: both !important;
}
.related.products > h2,
.upsells.products > h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.4rem, 2vw, 2rem) !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  margin-bottom: 2rem !important;
  letter-spacing: 0.02em !important;
}

/* Grid — zelfde als shop */
.related.products ul.products,
.upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.2rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Product tegel */
.related.products ul.products li.product,
.upsells.products ul.products li.product {
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.2) !important;
  padding: 0 !important;
  position: relative !important;
  transition: box-shadow 0.3s !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}
.related.products ul.products li.product:hover,
.upsells.products ul.products li.product:hover {
  box-shadow: 0 4px 20px rgba(44,36,32,0.1) !important;
}

/* Afbeelding */
.related.products ul.products li.product a img,
.upsells.products ul.products li.product a img {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  display: block !important;
  background: var(--off-white) !important;
}

/* Tekst gebied */
.related.products ul.products li.product .woocommerce-loop-product__title,
.upsells.products ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 0.9rem !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  padding: 0.6rem 0.85rem 0.2rem !important;
  margin: 0 !important;
}
.related.products ul.products li.product .price,
.upsells.products ul.products li.product .price {
  font-family: var(--font-display) !important;
  font-size: 0.9rem !important;
  color: var(--accent) !important;
  padding: 0 0.85rem 0.85rem !important;
  display: block !important;
  margin: 0 !important;
}
.related.products ul.products li.product .button,
.upsells.products ul.products li.product .button {
  display: none !important;
}

/* ─────────────────────────────────────
   WOOCOMMERCE — CART
───────────────────────────────────── */
.mbm-page-section { padding: 4rem 0 6rem; background: var(--off-white); min-height: 60vh; }
.mbm-page-section .entry-title { display: none; }

.mbm-cart-section { padding: 4rem 0 6rem; background: var(--off-white); }

/* ── Paginatitel ─────────────────────────────────── */
.woocommerce-cart h1,
.woocommerce-cart .entry-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  margin-bottom: 2.5rem !important;
  text-align: center !important;
}

/* ── Layout: tabel links, totaal rechts ─────────── */
.woocommerce-cart .woocommerce {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.woocommerce-cart form.woocommerce-cart-form {
  background: var(--white);
  border: 1px solid rgba(181,168,154,0.28);
  box-shadow: 0 2px 16px rgba(44,36,32,0.05);
}
.woocommerce-cart .cart-collaterals {
  margin-top: 2.5rem !important;
}

/* ── Tabel header ────────────────────────────────── */
.woocommerce table.cart {
  border: none;
  width: 100%;
  border-collapse: collapse;
}
.woocommerce table.cart th {
  font-family: var(--font-body) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  background: var(--cream) !important;
  padding: 1rem 1.4rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.25) !important;
  font-weight: 400 !important;
}

/* ── Tabelrijen ──────────────────────────────────── */
.woocommerce table.cart td {
  padding: 1.4rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.15) !important;
  vertical-align: middle !important;
  background: var(--white) !important;
}
.woocommerce table.cart tr:last-child td {
  border-bottom: none !important;
}

/* Productafbeelding */
.woocommerce table.cart td.product-thumbnail img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border: 1px solid rgba(181,168,154,0.2) !important;
}

/* Productnaam */
.woocommerce table.cart td.product-name a {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  text-decoration: none !important;
}
.woocommerce table.cart td.product-name a:hover {
  color: var(--accent) !important;
}
.woocommerce table.cart td.product-name .variation {
  font-size: 0.72rem !important;
  color: var(--taupe) !important;
  margin-top: 0.3rem !important;
}

/* Prijs */
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  color: var(--accent) !important;
}

/* Verwijder-knop */
.woocommerce table.cart a.remove {
  color: var(--taupe) !important;
  font-size: 1.3rem !important;
  line-height: 1 !important;
  transition: color var(--transition) !important;
  text-decoration: none !important;
}
.woocommerce table.cart a.remove:hover { color: #b85c5c !important; }

/* Aantal veld */
.woocommerce table.cart .quantity input {
  border: 1px solid rgba(181,168,154,0.4) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  width: 60px !important;
  text-align: center !important;
  padding: 0.4rem !important;
}

/* Winkelwagen bijwerken knop */
.woocommerce table.cart td.actions .button[name="update_cart"] {
  background: transparent !important;
  border: 1px solid rgba(181,168,154,0.5) !important;
  color: var(--taupe) !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: 0 !important;
  transition: all var(--transition) !important;
}
.woocommerce table.cart td.actions .button[name="update_cart"]:hover {
  border-color: var(--dark) !important;
  color: var(--dark) !important;
}

/* ── Totaalvak ───────────────────────────────────── */
.woocommerce .cart-collaterals .cart_totals {
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.28) !important;
  box-shadow: 0 2px 16px rgba(44,36,32,0.05) !important;
  padding: 0 !important;
  max-width: 480px !important;
  margin-left: auto !important;
}
.woocommerce .cart-collaterals .cart_totals h2 {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  padding: 1.4rem 2rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.2) !important;
  margin: 0 !important;
  background: var(--cream) !important;
}
.woocommerce .cart-collaterals .cart_totals table {
  width: 100% !important;
  padding: 0 2rem !important;
  display: table !important;
}
.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  color: var(--taupe) !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid rgba(181,168,154,0.12) !important;
}
.woocommerce .cart-collaterals .cart_totals .order-total th,
.woocommerce .cart-collaterals .cart_totals .order-total td {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  border: none !important;
  padding: 1.2rem 0 1.4rem !important;
}
.woocommerce .cart-collaterals .cart_totals .order-total td .woocommerce-Price-amount {
  color: var(--accent) !important;
  font-size: 1.5rem !important;
}

/* ── Afrekenen knop ──────────────────────────────── */
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout,
.wc-proceed-to-checkout {
  padding: 0 2rem 2rem !important;
}

/* Afrekenen knop — alle mogelijke selectors */
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout .checkout-button,
.woocommerce a.checkout-button,
.woocommerce-page a.checkout-button,
a.checkout-button,
.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout .button {
  display: block !important;
  width: 100% !important;
  background: var(--dark) !important;
  color: var(--white) !important;
  border: 2px solid var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 1.1rem 2rem !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce-page a.checkout-button:hover,
a.checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
  background: transparent !important;
  color: var(--dark) !important;
  border-color: var(--dark) !important;
}

/* ─────────────────────────────────────
   WOOCOMMERCE — CHECKOUT
───────────────────────────────────── */
.mbm-checkout-section { padding: 4rem 0 6rem; }

.woocommerce #customer_details h3,
.woocommerce #order_review_heading {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  padding-bottom: 0.8rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.25) !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce #payment {
  background: var(--cream) !important;
  border: 1px solid rgba(181,168,154,0.3) !important;
  border-radius: 0 !important;
}
.woocommerce #payment ul.payment_methods li label {
  font-family: var(--font-body) !important;
  color: var(--dark) !important;
}

/* ── Plaats bestelling knop ─────────────────────── */
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
  background: var(--dark) !important;
  color: var(--white) !important;
  border: 2px solid var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  padding: 1rem 3rem !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: 280px !important;
  min-width: 0 !important;
  float: none !important;
  display: inline-block !important;
  height: 54px !important;
}
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover {
  background: transparent !important;
  color: var(--dark) !important;
}

/* Rij met "Terug naar winkelwagen" en knop netjes naast elkaar */
.woocommerce-checkout .actions,
.woocommerce #payment div.place-order {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 1.5rem !important;
  padding: 1.5rem !important;
  background: transparent !important;
  border: none !important;
}

/* ─────────────────────────────────────
   WOOCOMMERCE — NOTICES
───────────────────────────────────── */
.woocommerce-message,
.woocommerce-info {
  border-top: 2px solid var(--accent) !important;
  background: var(--cream) !important;
  color: var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
}
.woocommerce-error {
  border-top: 2px solid var(--brown) !important;
  background: var(--blush) !important;
  color: var(--dark) !important;
  font-family: var(--font-body) !important;
}

/* ─────────────────────────────────────
   BREADCRUMBS
───────────────────────────────────── */
.woocommerce-breadcrumb {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
  color: var(--taupe) !important;
  padding: 1rem 0 !important;
  margin-bottom: 0 !important;
}
.woocommerce-breadcrumb a { color: var(--accent) !important; }

/* ─────────────────────────────────────
   SIDEBAR / WIDGETS
───────────────────────────────────── */
.widget-area .widget {
  background: var(--white);
  border: 1px solid rgba(181,168,154,0.2);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.widget-area .widget-title {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(181,168,154,0.25);
  margin-bottom: 1rem !important;
}
.widget-area .widget ul { list-style: none; margin: 0; padding: 0; }
.widget-area .widget ul li {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(181,168,154,0.1);
  font-size: 0.82rem;
  color: var(--taupe);
}
.widget-area .widget ul li a { color: var(--brown); }
.widget-area .widget ul li a:hover { color: var(--accent); }

/* ─────────────────────────────────────
   PAGINATION
───────────────────────────────────── */
.woocommerce-pagination ul {
  list-style: none;
  margin: 3rem 0 0; padding: 0;
  display: flex; gap: 0.4rem; justify-content: center;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(181,168,154,0.35);
  color: var(--taupe);
  transition: all var(--transition);
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

/* ─────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────── */
/* Reveal: standaard zichtbaar zodat inhoud nooit verdwijnt zonder JS */
.mbm-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
/* JS voegt .mbm-js-ready toe aan <body> — dan pas animeren */
.mbm-js-ready .mbm-reveal {
  opacity: 0;
  transform: translateY(22px);
}
.mbm-js-ready .mbm-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────
   FOOTER
───────────────────────────────────── */
.site-footer {
  background: var(--dark);
  padding: 4rem 0 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(181,168,154,0.1);
  margin-bottom: 1.5rem;
}
.footer-brand .footer-script {
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--accent-lt);
  display: block;
  margin-bottom: 0.2rem;
}
.footer-brand .footer-name {
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
  display: block;
  margin-bottom: 1rem;
}
.footer-brand p {
  font-size: 0.78rem;
  color: rgba(181,168,154,0.55);
  line-height: 1.75;
  margin: 0;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col ul a {
  font-size: 0.78rem;
  color: rgba(181,168,154,0.5);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--accent-lt); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom p {
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: rgba(181,168,154,0.28);
  margin: 0;
}
.footer-bottom a { color: rgba(181,168,154,0.4); }
.footer-bottom a:hover { color: var(--accent-lt); }

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */
@media (max-width: 1024px) {
  .mbm-hero { grid-template-columns: 1fr; }
  .mbm-hero__visual { display: none; }
  .woocommerce div.product { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Productgrid: 2 kolommen op tablet */
  .woocommerce ul.products,
  .woocommerce ul.products.columns-1,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Gerelateerde producten: 2 kolommen op tablet */
  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mbm-payment-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .header-inner { padding: 0 1.2rem; }
  .main-navigation { display: none; }
  .main-navigation.is-open {
    display: block;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: var(--off-white);
    border-bottom: 1px solid rgba(181,168,154,0.25);
    padding: 1.2rem 2rem;
    z-index: 190;
  }
  .main-navigation.is-open ul { flex-direction: column; gap: 1rem; }
  .menu-toggle { display: block; }

  .mbm-hero__text { padding: 3.5rem 1.5rem; }
  .mbm-shop-section, .mbm-single-section, .mbm-cart-section, .mbm-checkout-section { padding: 3rem 0 4rem; }
  .mbm-container { padding: 0 1.2rem; }

  /* Productgrid: 1 kolom op mobiel */
  .woocommerce ul.products,
  .woocommerce ul.products.columns-1,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5 {
    grid-template-columns: 1fr !important;
  }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}

/* ─────────────────────────────────────
   AFREKENEN KNOP — HARDE OVERRIDE
───────────────────────────────────── */
.wc-proceed-to-checkout,
.wc-proceed-to-checkout *,
div.wc-proceed-to-checkout {
  padding: 0 !important;
}
.wc-proceed-to-checkout > a,
.wc-proceed-to-checkout > a.button,
.wc-proceed-to-checkout a,
.checkout-button,
a.checkout-button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--dark) !important;
  background-color: var(--dark) !important;
  color: #ffffff !important;
  border: 2px solid var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 1.1rem 2rem !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
}
.wc-proceed-to-checkout > a:hover,
.wc-proceed-to-checkout a:hover,
a.checkout-button:hover,
.checkout-button:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dark) !important;
  border-color: var(--dark) !important;
}

/* ─────────────────────────────────────
   WOOCOMMERCE BLOKKEN — AFREKENEN KNOP
   (wc-block-components-button)
───────────────────────────────────── */

/* Winkelwagen knop — vol breed */
.wc-block-cart__submit-button,
.wc-block-components-button.wp-element-button.wc-block-cart__submit-button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--dark) !important;
  background-color: #2c2420 !important;
  color: #ffffff !important;
  border: 2px solid #2c2420 !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 1.1rem 2rem !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
}

/* Alle andere blok-knoppen */
a.wc-block-components-button,
.wc-block-components-button {
  background: var(--dark) !important;
  background-color: #2c2420 !important;
  color: #ffffff !important;
  border: 2px solid #2c2420 !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 1.1rem 2rem !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

/* Plaats bestelling knop — NIET vol breed */
.wc-block-checkout__place-order .wc-block-components-button,
.wc-block-checkout__place-order button,
button.wc-block-components-button.wc-block-checkout__place-order-button {
  width: auto !important;
  display: inline-block !important;
  float: none !important;
  padding: 1rem 3rem !important;
}

.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #2c2420 !important;
  border-color: #2c2420 !important;
  opacity: 1 !important;
}
.wc-block-components-button__text {
  color: inherit !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}



/* ── HARDE OVERRIDE: Plaats bestelling knop ─────── */
button#place_order,
input#place_order,
#place_order {
  width: auto !important;
  max-width: 280px !important;
  display: inline-block !important;
  float: none !important;
}

/* ─────────────────────────────────────
   WOOCOMMERCE — MIJN ACCOUNT
───────────────────────────────────── */

/* Wrapper: witte kaart met zijbalk */
.woocommerce-account .woocommerce {
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.22) !important;
  box-shadow: 0 4px 32px rgba(44,36,32,0.07) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
}

/* Navigatie zijbalk */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--cream) !important;
  border-right: 1px solid rgba(181,168,154,0.22) !important;
  padding: 2rem 0 !important;
  min-height: 400px !important;
  float: none !important;
  flex: 0 0 220px !important;
  width: 220px !important;
  grid-column: unset !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(181,168,154,0.15) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--brown) !important;
  padding: 0.9rem 1.5rem !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  border-left: 3px solid transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--accent) !important;
  background: rgba(196,149,106,0.06) !important;
  border-left-color: var(--accent) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a {
  color: var(--accent) !important;
  background: rgba(196,149,106,0.08) !important;
  border-left-color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Content gebied */
.woocommerce-account .woocommerce-MyAccount-content {
  padding: 2.5rem !important;
  float: none !important;
  flex: 1 !important;
  width: auto !important;
  grid-column: unset !important;
}

/* Welkomsttekst */
.woocommerce-account .woocommerce-MyAccount-content p {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--taupe) !important;
  line-height: 1.8 !important;
  margin-bottom: 1rem !important;
}
.woocommerce-account .woocommerce-MyAccount-content p strong {
  color: var(--dark) !important;
  font-weight: 600 !important;
}
.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--accent) !important;
  text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
  text-decoration: underline !important;
}

/* Sectie titels */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.25) !important;
}

/* Bestellingen tabel */
.woocommerce-account .woocommerce-orders-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
}
.woocommerce-account .woocommerce-orders-table th {
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.3) !important;
  text-align: left !important;
  background: var(--off-white) !important;
}
.woocommerce-account .woocommerce-orders-table td {
  padding: 0.85rem 1rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.15) !important;
  color: var(--dark) !important;
  vertical-align: middle !important;
}
.woocommerce-account .woocommerce-orders-table tr:last-child td {
  border-bottom: none !important;
}
.woocommerce-account .woocommerce-orders-table .button {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid var(--dark) !important;
  color: var(--dark) !important;
  padding: 0.4rem 1rem !important;
  border-radius: 0 !important;
  transition: all 0.2s !important;
}
.woocommerce-account .woocommerce-orders-table .button:hover {
  background: var(--dark) !important;
  color: var(--white) !important;
}

/* Formulieren (accountdetails, adressen) */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields {
  max-width: 520px !important;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row label {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  display: block !important;
  margin-bottom: 0.4rem !important;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row input,
.woocommerce-account .woocommerce-MyAccount-content .form-row select {
  width: 100% !important;
  border: 1px solid rgba(181,168,154,0.4) !important;
  border-radius: 0 !important;
  background: var(--white) !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--dark) !important;
  padding: 0.75rem 1rem !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row select:focus {
  border-color: var(--accent) !important;
}
.woocommerce-account .woocommerce-MyAccount-content .button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
  background: var(--dark) !important;
  color: var(--white) !important;
  border: 2px solid var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 0.9rem 2.5rem !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  box-shadow: none !important;
  margin-top: 1rem !important;
}
.woocommerce-account .woocommerce-MyAccount-content .button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
  background: transparent !important;
  color: var(--dark) !important;
}

/* Mijn account — mobiel */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    border-right: none !important;
    border-bottom: 1px solid rgba(181,168,154,0.22) !important;
    min-height: auto !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 1.5rem !important;
  }
}

/* ── Account dashboard ──────────────────────────── */
.mbm-account-welcome {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 2rem !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.25) !important;
}
.mbm-account-welcome__text {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--taupe) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
}
.mbm-account-logout {
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  border: 1px solid rgba(181,168,154,0.4) !important;
  padding: 0.4rem 1rem !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}
.mbm-account-logout:hover {
  border-color: var(--dark) !important;
  color: var(--dark) !important;
}

/* Sectie titels */
.mbm-account-section-title {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  margin: 0 0 1.25rem !important;
}

/* Bestellingen tabel */
.mbm-orders-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  margin-bottom: 1rem !important;
}
.mbm-orders-table th {
  font-size: 0.62rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  padding: 0.6rem 1rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.3) !important;
  text-align: left !important;
  background: var(--off-white) !important;
}
.mbm-orders-table td {
  padding: 0.8rem 1rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.12) !important;
  color: var(--dark) !important;
  vertical-align: middle !important;
}
.mbm-orders-table tr:last-child td { border-bottom: none !important; }
.mbm-orders-table a { color: var(--accent) !important; text-decoration: none !important; }

/* Order status badges */
.mbm-order-status {
  font-size: 0.62rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 20px !important;
}
.mbm-order-status--processing { background: rgba(138,158,128,0.15) !important; color: #5a7a50 !important; }
.mbm-order-status--completed  { background: rgba(196,149,106,0.12) !important; color: var(--accent) !important; }
.mbm-order-status--pending    { background: rgba(181,168,154,0.2)  !important; color: var(--taupe) !important; }
.mbm-order-status--cancelled  { background: rgba(180,80,80,0.1)    !important; color: #b45050 !important; }

/* Kleine knop */
.mbm-btn-small {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid var(--dark) !important;
  color: var(--dark) !important;
  padding: 0.35rem 0.9rem !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  display: inline-block !important;
}
.mbm-btn-small:hover {
  background: var(--dark) !important;
  color: var(--white) !important;
}

/* Alle bestellingen link */
.mbm-account-all-orders {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 0.5rem !important;
}

/* Geen bestellingen */
.mbm-account-no-orders {
  padding: 2rem !important;
  background: var(--off-white) !important;
  text-align: center !important;
  border: 1px dashed rgba(181,168,154,0.4) !important;
}
.mbm-account-no-orders p {
  color: var(--taupe) !important;
  font-size: 0.88rem !important;
  margin-bottom: 1rem !important;
}

/* Annuleer knop */
.mbm-btn-cancel {
  border-color: rgba(180,80,80,0.4) !important;
  color: #b45050 !important;
  margin-left: 0.4rem !important;
}
.mbm-btn-cancel:hover {
  background: #b45050 !important;
  border-color: #b45050 !important;
  color: var(--white) !important;
}

/* Betaal knop */
.mbm-btn-pay {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  margin-left: 0.4rem !important;
}
.mbm-btn-pay:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--white) !important;
}

/* ─────────────────────────────────────────
   ORDER PAY PAGINA
───────────────────────────────────────── */

/* Hoofdtabel met bestelling overzicht */
.woocommerce-checkout-payment,
.woocommerce table.shop_table.order_details,
.woocommerce table.woocommerce-table--order-details {
  border: none !important;
  border-collapse: collapse !important;
  width: 100% !important;
  font-family: var(--font-body) !important;
  margin-bottom: 2rem !important;
}

.woocommerce table.shop_table th,
.woocommerce table.woocommerce-table--order-details th {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  background: var(--off-white) !important;
  padding: 0.75rem 1.25rem !important;
  border: none !important;
  border-bottom: 1px solid rgba(181,168,154,0.3) !important;
  font-weight: 400 !important;
}

.woocommerce table.shop_table td,
.woocommerce table.woocommerce-table--order-details td {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--dark) !important;
  padding: 0.9rem 1.25rem !important;
  border: none !important;
  border-bottom: 1px solid rgba(181,168,154,0.12) !important;
  vertical-align: middle !important;
}

/* Subtotaal / Verzending / Totaal rijen */
.woocommerce table.shop_table tfoot tr th,
.woocommerce table.shop_table tfoot tr td {
  border-bottom: 1px solid rgba(181,168,154,0.2) !important;
  font-size: 0.85rem !important;
  color: var(--taupe) !important;
  background: transparent !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
}

/* Totaal rij — prominenter */
.woocommerce table.shop_table tfoot tr.order-total th,
.woocommerce table.shop_table tfoot tr.order-total td,
.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td {
  font-size: 1rem !important;
  color: var(--dark) !important;
  font-weight: 600 !important;
  border-top: 2px solid rgba(181,168,154,0.3) !important;
  border-bottom: none !important;
  padding-top: 1.1rem !important;
}

/* Betaalmethoden sectie */
.woocommerce #payment {
  background: var(--cream) !important;
  border: 1px solid rgba(181,168,154,0.3) !important;
  border-radius: 0 !important;
  padding: 1.5rem !important;
}

.woocommerce #payment ul.payment_methods {
  border-bottom: 1px solid rgba(181,168,154,0.25) !important;
  padding-bottom: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  list-style: none !important;
  padding-left: 0 !important;
}

.woocommerce #payment ul.payment_methods li {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid rgba(181,168,154,0.15) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
.woocommerce #payment ul.payment_methods li:last-child {
  border-bottom: none !important;
}

.woocommerce #payment ul.payment_methods li label {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--dark) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex: 1 !important;
}

/* Betaalmethode beschrijvingstekst */
.woocommerce #payment .payment_box {
  background: rgba(181,168,154,0.1) !important;
  border: 1px solid rgba(181,168,154,0.25) !important;
  padding: 1rem 1.25rem !important;
  margin: 0.5rem 0 0 1.5rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: var(--taupe) !important;
  line-height: 1.7 !important;
  border-radius: 0 !important;
}
.woocommerce #payment .payment_box::before {
  border-bottom-color: rgba(181,168,154,0.25) !important;
}

/* Radio buttons */
.woocommerce #payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--accent) !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Order pay knop */
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
  background: var(--dark) !important;
  color: var(--white) !important;
  border: 2px solid var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  padding: 1rem 3rem !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  width: auto !important;
  max-width: 300px !important;
  display: inline-block !important;
  float: none !important;
}
.woocommerce #payment #place_order:hover {
  background: transparent !important;
  color: var(--dark) !important;
}

.woocommerce #payment div.place-order {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: right !important;
}

/* ─────────────────────────────────────
   MOBIELE WEERGAVE — GLOBAAL
───────────────────────────────────────── */

/* Split grid (homepage "Waarom op maat" sectie) */
.mbm-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  /* Hero */
  .mbm-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .mbm-hero__visual {
    min-height: 280px !important;
    order: -1 !important;
  }
  .mbm-hero__text {
    padding: 3rem 1.5rem !important;
  }

  /* Split grid — onder elkaar */
  .mbm-split-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* Features grid */
  .mbm-features__grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Productpagina */
  .woocommerce div.product {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Betaalmethoden grid */
  .mbm-payment-grid {
    grid-template-columns: 1fr !important;
  }

  /* Mijn account */
  .woocommerce-account .woocommerce {
    flex-direction: column !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    flex: none !important;
    width: 100% !important;
    min-height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(181,168,154,0.22) !important;
    padding: 1rem 0 !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: none !important;
    border-right: 1px solid rgba(181,168,154,0.15) !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 1.5rem !important;
  }
}

@media (max-width: 600px) {
  /* Features: 1 kolom */
  .mbm-features__grid {
    grid-template-columns: 1fr !important;
  }

  /* Voordelen balk */
  .mbm-product-perks {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Bestellingen tabel op mobiel */
  .mbm-orders-table thead { display: none !important; }
  .mbm-orders-table tr {
    display: block !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid rgba(181,168,154,0.2) !important;
  }
  .mbm-orders-table td {
    display: block !important;
    padding: 0.2rem 0 !important;
    border-bottom: none !important;
  }
  .mbm-orders-table td:last-child {
    margin-top: 0.5rem !important;
  }

  /* Account welkom */
  .mbm-account-welcome__text {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
}

/* ─────────────────────────────────────
   MOBIELE VERFIJNINGEN
───────────────────────────────────────── */
@media (max-width: 768px) {

  /* Productpagina kaart — padding op mobiel */
  .woocommerce div.product {
    padding: 1.5rem !important;
    margin: 0 !important;
  }

  /* Witte kaart raakt schermranden niet */
  .woocommerce-page .mbm-single-section .mbm-container,
  .mbm-single-section .mbm-container {
    padding: 0 !important;
  }
  .woocommerce div.product {
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }

  /* Gerelateerde producten — 2 koloms op mobiel */
  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tabs beschrijving padding */
  .woocommerce div.product .woocommerce-tabs {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Productomschrijving blok */
  .mbm-product-description {
    padding: 1rem !important;
  }

  /* Prijs op mobiel iets kleiner */
  .woocommerce div.product p.price,
  .woocommerce div.product span.price {
    font-size: 1.6rem !important;
  }
}

/* ─────────────────────────────────────
   ORDERBEVESTIGING PAGINA
───────────────────────────────────────── */

/* Bedankt header */
.woocommerce-order .woocommerce-thankyou-order-received,
p.woocommerce-thankyou-order-received {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  text-align: center !important;
  margin-bottom: 0.5rem !important;
}

/* Wrapper */
.woocommerce-order {
  max-width: 780px !important;
  margin: 0 auto !important;
}

/* Groene vinkje weg, vervang door eigen stijl */



/* Bevestigings tekst blok */
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order .woocommerce-thankyou-order-details-heading {
  text-align: center !important;
}

/* Intro tekst */
.woocommerce-order > p:first-of-type {
  text-align: center !important;
  font-family: var(--font-body) !important;
  color: var(--taupe) !important;
  font-size: 0.9rem !important;
  margin-bottom: 2rem !important;
}

/* Sectie titels */
.woocommerce-order h2 {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  margin: 2rem 0 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.25) !important;
}

/* Bestelling tabel */
.woocommerce-order .woocommerce-table--order-details {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-body) !important;
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.22) !important;
}
.woocommerce-order .woocommerce-table--order-details thead th {
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  background: var(--off-white) !important;
  padding: 0.75rem 1.25rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.25) !important;
  font-weight: 400 !important;
}
.woocommerce-order .woocommerce-table--order-details tbody td {
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.12) !important;
  color: var(--dark) !important;
  font-size: 0.88rem !important;
}
.woocommerce-order .woocommerce-table--order-details tfoot th,
.woocommerce-order .woocommerce-table--order-details tfoot td {
  padding: 0.7rem 1.25rem !important;
  font-size: 0.85rem !important;
  color: var(--taupe) !important;
  border-bottom: 1px solid rgba(181,168,154,0.12) !important;
}
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
  font-size: 1rem !important;
  color: var(--dark) !important;
  font-weight: 600 !important;
  border-top: 2px solid rgba(181,168,154,0.3) !important;
  border-bottom: none !important;
}

/* Klantgegevens blokken */
.woocommerce-order .woocommerce-customer-details address {
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.22) !important;
  padding: 1.5rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--dark) !important;
  line-height: 1.8 !important;
  font-style: normal !important;
}

/* Bedankt bericht bovenaan — centreren met accent */
.woocommerce-order::before {
  content: '✦';
  display: block !important;
  text-align: center !important;
  color: var(--accent) !important;
  font-size: 1.2rem !important;
  margin-bottom: 1rem !important;
}

@media (max-width: 600px) {
}

/* Orderbevestiging — verfijningen */

/* Bedankt tekst groter en centraal */
.woocommerce-order p.woocommerce-thankyou-order-received {
  font-family: var(--font-display) !important;
  font-size: 1.8rem !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}

/* Orderbevestiging — overzicht balk fix */



/* Zorg dat € en bedrag op één regel staan */
.woocommerce-order .woocommerce-order-overview li span,
.woocommerce-order .woocommerce-order-overview li a,
.woocommerce-order .woocommerce-order-overview li time,
.woocommerce-order .woocommerce-order-overview .woocommerce-Price-amount {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--dark) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  word-break: break-word !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.woocommerce-order .woocommerce-order-overview .woocommerce-Price-currencySymbol {
  display: inline !important;
}

@media (max-width: 700px) {
  .woocommerce-order .woocommerce-order-overview {
    grid-template-columns: 1fr 1fr !important;
  }
  .woocommerce-order .woocommerce-order-overview li {
    border-bottom: 1px solid rgba(181,168,154,0.15) !important;
  }
  .woocommerce-order .woocommerce-order-overview li:nth-child(2n) {
    border-right: none !important;
  }
}

/* ─────────────────────────────────────
   ORDERBEVESTIGING — OVERZICHT BALK
───────────────────────────────────────── */
.woocommerce-order .woocommerce-order-overview {
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.25) !important;
  box-shadow: 0 4px 24px rgba(44,36,32,0.06) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  padding: 0 !important;
  margin: 1.5rem 0 2.5rem !important;
  list-style: none !important;
}
.woocommerce-order .woocommerce-order-overview::after,
.woocommerce-order .woocommerce-order-overview::before {
  display: none !important;
}
.woocommerce-order .woocommerce-order-overview li {
  display: block !important;
  float: none !important;
  width: auto !important;
  padding: 1.5rem !important;
  border-right: 1px solid rgba(181,168,154,0.2) !important;
  border-bottom: none !important;
  margin: 0 !important;
}
.woocommerce-order .woocommerce-order-overview li:last-child {
  border-right: none !important;
}
.woocommerce-order .woocommerce-order-overview li strong {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  font-weight: 400 !important;
  margin-bottom: 0.4rem !important;
}
.woocommerce-order .woocommerce-order-overview li span,
.woocommerce-order .woocommerce-order-overview li a,
.woocommerce-order .woocommerce-order-overview li time,
.woocommerce-order .woocommerce-order-overview li .woocommerce-Price-amount {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--dark) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  display: inline !important;
}

@media (max-width: 600px) {
  .woocommerce-order .woocommerce-order-overview {
    grid-template-columns: 1fr 1fr !important;
  }
  .woocommerce-order .woocommerce-order-overview li:nth-child(2n) {
    border-right: none !important;
  }
  .woocommerce-order .woocommerce-order-overview li {
    border-bottom: 1px solid rgba(181,168,154,0.15) !important;
  }
}

/* Betaalmethode rij — zelfde stijl als andere tabel rijen */
.woocommerce-order .woocommerce-table--order-details tfoot .woocommerce-table__line-item td,
.woocommerce-order .woocommerce-table--order-details tfoot .woocommerce-table__line-item th,
.woocommerce-order-details tfoot tr.woocommerce-table__line-item th,
.woocommerce-order-details tfoot tr.woocommerce-table__line-item td,
.woocommerce-order .wc-item-meta,
.woocommerce-order tr.woocommerce-table__line-item--payment th,
.woocommerce-order tr.woocommerce-table__line-item--payment td {
  font-weight: 400 !important;
  font-size: 0.88rem !important;
  color: var(--taupe) !important;
}

/* Betaalmethode specifiek */
.woocommerce-order .woocommerce-order-overview + section th,
.woocommerce-order .woocommerce-order-overview + section td,
.woocommerce-order table.woocommerce-table--order-details + section th,
.woocommerce-order table.woocommerce-table--order-details + section td,
.woocommerce-order .woocommerce-customer-details ~ section th,
.woocommerce-order .woocommerce-customer-details ~ section td,
.woocommerce-order-details + .woocommerce-order-details th,
.woocommerce-order-details + .woocommerce-order-details td {
  font-weight: 400 !important;
}

/* Onderste sectie van order tabel — betaalmethode */
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
  font-weight: 400 !important;
  font-size: 0.88rem !important;
  color: var(--taupe) !important;
  border-top: none !important;
}

/* Betaalmethode rij onderaan besteltabel */
.woocommerce-order .woocommerce-table--order-details tfoot tr th,
.woocommerce-order .woocommerce-table--order-details tfoot tr td {
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  color: var(--taupe) !important;
  padding: 0.7rem 1.25rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.12) !important;
  border-top: none !important;
  background: transparent !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.woocommerce-order .woocommerce-table--order-details tfoot .order-total th,
.woocommerce-order .woocommerce-table--order-details tfoot .order-total td {
  font-size: 1rem !important;
  color: var(--dark) !important;
  font-weight: 600 !important;
  border-top: 2px solid rgba(181,168,154,0.3) !important;
  border-bottom: none !important;
}

/* ─────────────────────────────────────
   404 PAGINA
───────────────────────────────────────── */
.mbm-404-section {
  min-height: calc(70vh - 72px);
  display: flex;
  align-items: center;
  background: var(--cream);
}
.mbm-404-inner {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
.mbm-404-number {
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 10rem);
  font-weight: 300;
  color: rgba(196,149,106,0.2);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
}
.mbm-404-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--dark);
  margin: 1.5rem 0 1rem;
}
.mbm-404-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--taupe);
  line-height: 1.9;
  margin-bottom: 2.5rem;
}
.mbm-404-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.mbm-404-btn {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.9rem 2.5rem;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-block;
}
.mbm-404-btn--primary {
  background: var(--dark);
  color: var(--white);
  border: 2px solid var(--dark);
}
.mbm-404-btn--primary:hover {
  background: transparent;
  color: var(--dark);
}
.mbm-404-btn--secondary {
  background: transparent;
  color: var(--dark);
  border: 2px solid rgba(181,168,154,0.5);
}
.mbm-404-btn--secondary:hover {
  border-color: var(--dark);
}

/* ─────────────────────────────────────
   ORDERBEVESTIGING — ADRES & BETAALMETHODE
───────────────────────────────────────── */

/* Factuur en verzendadres — 2 koloms grid */
.woocommerce-order .woocommerce-customer-details {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
  margin-top: 2rem !important;
}
.woocommerce-order .woocommerce-customer-details h2 {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.6rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.25) !important;
}
.woocommerce-order .woocommerce-customer-details address {
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.22) !important;
  border-radius: 0 !important;
  padding: 1.5rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--dark) !important;
  line-height: 1.9 !important;
  font-style: normal !important;
}
.woocommerce-order .woocommerce-customer-details address p {
  margin: 0 !important;
}

/* Betaalmethode rij — zelfde gewicht als andere rijen */
.woocommerce-order .woocommerce-table--order-details tfoot tr th,
.woocommerce-order .woocommerce-table--order-details tfoot tr td {
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  color: var(--taupe) !important;
  padding: 0.75rem 1.25rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.12) !important;
  border-top: none !important;
  background: transparent !important;
  text-transform: none !important;
}
/* Totaal rij blijft prominent */
.woocommerce-order .woocommerce-table--order-details tfoot .order-total th,
.woocommerce-order .woocommerce-table--order-details tfoot .order-total td {
  font-size: 1rem !important;
  color: var(--dark) !important;
  font-weight: 600 !important;
  border-top: 2px solid rgba(181,168,154,0.3) !important;
  border-bottom: none !important;
}

@media (max-width: 600px) {
  .woocommerce-order .woocommerce-customer-details {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Bestelgegevens tabel — Aantal | Product | Prijs */
.woocommerce-order .woocommerce-table--order-details .woocommerce-table__product-quantity {
  width: 80px !important;
  text-align: center !important;
  color: var(--dark) !important;
  font-size: 0.88rem !important;
}
.woocommerce-order .woocommerce-table--order-details thead th.woocommerce-table__product-quantity {
  text-align: center !important;
}
.woocommerce-order .woocommerce-table--order-details tfoot th[colspan="2"] {
  text-align: right !important;
  color: var(--taupe) !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
}
/* Betaalmethode — niet vet */
.woocommerce-order .woocommerce-table--order-details tfoot tr th,
.woocommerce-order .woocommerce-table--order-details tfoot tr td {
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  color: var(--taupe) !important;
  border-top: none !important;
}
/* Totaal rij blijft prominent */
.woocommerce-order .woocommerce-table--order-details tfoot .order-total th,
.woocommerce-order .woocommerce-table--order-details tfoot .order-total td {
  font-size: 1rem !important;
  color: var(--dark) !important;
  font-weight: 600 !important;
  border-top: 2px solid rgba(181,168,154,0.3) !important;
}

/* Tabel footer — labels links, waarden links */
.woocommerce-order .woocommerce-table--order-details tfoot tr th[colspan="2"] {
  text-align: left !important;
  padding-left: 1.25rem !important;
}
.woocommerce-order .woocommerce-table--order-details tfoot tr td {
  text-align: left !important;
}

/* Adresblokken — gelijke hoogte en scherpe hoeken */
.woocommerce-order .woocommerce-customer-details {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
  align-items: stretch !important;
  margin-top: 2rem !important;
}
.woocommerce-order .woocommerce-customer-details section {
  display: flex !important;
  flex-direction: column !important;
}
.woocommerce-order .woocommerce-customer-details address {
  flex: 1 !important;
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.22) !important;
  border-radius: 0 !important;
  padding: 1.5rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--dark) !important;
  line-height: 1.9 !important;
  font-style: normal !important;
}
.woocommerce-order .woocommerce-customer-details address p {
  margin: 0 !important;
}
.woocommerce-order .woocommerce-customer-details .mbm-address-phone::before {
  content: '📞 ' !important;
}
.woocommerce-order .woocommerce-customer-details .mbm-address-email::before {
  content: '✉ ' !important;
}
/* Verberg WooCommerce eigen icons */
.woocommerce-customer-details--phone::before,
.woocommerce-customer-details--email::before {
  display: none !important;
}

@media (max-width: 600px) {
  .woocommerce-order .woocommerce-customer-details {
    grid-template-columns: 1fr !important;
  }
}

/* Alle tabel headers gelijke stijl */
.woocommerce-order .woocommerce-table--order-details thead th {
  font-family: var(--font-body) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  font-weight: 400 !important;
  background: var(--off-white) !important;
  padding: 0.75rem 1.25rem !important;
  border-bottom: 1px solid rgba(181,168,154,0.25) !important;
}
/* Betaalmethode rij — niet vet */
.woocommerce-order .woocommerce-table--order-details tfoot tr:not(.order-total) th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:not(.order-total) td {
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  color: var(--taupe) !important;
}

/* AANTAL header — zelfde stijl als PRODUCT en PRIJS */
.woocommerce-order .woocommerce-table--order-details thead th.woocommerce-table__product-quantity {
  font-family: var(--font-body) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--taupe) !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Product prijs cel — zelfde stijl als rest */
.woocommerce-order .woocommerce-table--order-details tbody td.product-total,
.woocommerce-order .woocommerce-table--order-details tbody td.woocommerce-table__product-total {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  letter-spacing: 0 !important;
}
.woocommerce-order .woocommerce-table--order-details tbody td.product-total .woocommerce-Price-amount,
.woocommerce-order .woocommerce-table--order-details tbody td.product-total bdi {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
}

/* Prijscel in besteltabel — forceer body font op alle child elementen */
.woocommerce-table--order-details tbody .product-total *,
.woocommerce-table--order-details tbody .woocommerce-table__product-total * {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  font-style: normal !important;
}

/* span.amount altijd body font — ook in besteltabel */
.woocommerce-table--order-details span.woocommerce-Price-amount.amount,
.woocommerce-table--order-details span.woocommerce-Price-amount.amount *,
table.order_details span.woocommerce-Price-amount.amount,
table.order_details span.woocommerce-Price-amount.amount * {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ─────────────────────────────────────
   HEADER — ACCOUNT KNOP & DROPDOWN
───────────────────────────────────────── */
.mbm-account-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  padding: 0.4rem 0;
  transition: color 0.2s;
}
.mbm-account-btn:hover {
  color: var(--accent);
}
.mbm-account-label {
  white-space: nowrap;
}
.mbm-account-menu {
  position: relative;
}
.mbm-account-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--white);
  border: 1px solid rgba(181,168,154,0.25);
  box-shadow: 0 8px 32px rgba(44,36,32,0.1);
  min-width: 160px;
  z-index: 999;
}
.mbm-account-dropdown a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(181,168,154,0.15);
  transition: background 0.15s, color 0.15s;
}
.mbm-account-dropdown a:last-child {
  border-bottom: none;
}
.mbm-account-dropdown a:hover {
  background: var(--cream);
  color: var(--accent);
}
.mbm-account-menu:hover .mbm-account-dropdown {
  display: block;
}

@media (max-width: 768px) {
  .mbm-account-label {
    display: none;
  }
}

/* ─────────────────────────────────────
   LOGIN MODAL
───────────────────────────────────────── */
.mbm-welcome-btn {
  color: var(--taupe) !important;
}
.mbm-login-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mbm-login-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.mbm-login-modal.is-open {
  display: block;
}
.mbm-login-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44,36,32,0.45);
  backdrop-filter: blur(3px);
}
.mbm-login-modal__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  width: 100%;
  max-width: 420px;
  padding: 3rem 2.5rem 2rem;
}
.mbm-login-modal__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--taupe);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.mbm-login-modal__close:hover {
  color: var(--dark);
}
.mbm-login-modal__header {
  text-align: center;
  margin-bottom: 1.75rem;
}
.mbm-login-modal__diamond {
  color: var(--accent);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.5rem;
}
.mbm-login-modal__header h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--dark);
  margin: 0;
}

/* Login form velden */
.mbm-login-modal__box .login label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  display: block;
  margin-bottom: 0.35rem;
}
.mbm-login-modal__box .login input[type="text"],
.mbm-login-modal__box .login input[type="password"] {
  width: 100%;
  border: 1px solid rgba(181,168,154,0.4);
  border-radius: 0;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--dark);
  background: var(--off-white);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
  margin-bottom: 1rem;
}
.mbm-login-modal__box .login input[type="text"]:focus,
.mbm-login-modal__box .login input[type="password"]:focus {
  border-color: var(--accent);
  background: var(--white);
}
.mbm-login-modal__box .login input[type="submit"] {
  width: 100%;
  background: var(--dark);
  color: var(--white);
  border: 2px solid var(--dark);
  padding: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 0.5rem;
}
.mbm-login-modal__box .login input[type="submit"]:hover {
  background: transparent;
  color: var(--dark);
}
.mbm-login-modal__box .login .forgetmenot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--taupe);
  margin-bottom: 0;
}
.mbm-login-modal__footer {
  text-align: center;
  margin-top: 1.25rem;
}
.mbm-login-modal__footer a {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--taupe);
  text-decoration: none;
  border-bottom: 1px solid rgba(181,168,154,0.4);
  transition: color 0.2s;
}
.mbm-login-modal__footer a:hover {
  color: var(--accent);
}

/* ─────────────────────────────────────
   NAV — WELKOM, MIJN ACCOUNT & DROPDOWN
───────────────────────────────────────── */
.mbm-nav-list {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2.5rem !important;
  align-items: center !important;
}
.mbm-nav-list > li > a,
.mbm-nav-list > li > button.mbm-login-trigger {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--dark) !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: color 0.2s !important;
}
.mbm-nav-list > li > a:hover,
.mbm-nav-list > li > button.mbm-login-trigger:hover {
  color: var(--accent) !important;
}

/* Dropdown */
.mbm-has-dropdown {
  position: relative !important;
}
.mbm-nav-dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding-top: 1rem !important;
  background: transparent !important;
  z-index: 999 !important;
  min-width: 160px !important;
}
/* Onzichtbare brug tussen menu item en dropdown */
.mbm-has-dropdown::after {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  height: 1rem !important;
}
.mbm-has-dropdown:hover .mbm-nav-dropdown {
  display: block !important;
}
.mbm-nav-dropdown__inner {
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.25) !important;
  box-shadow: 0 8px 32px rgba(44,36,32,0.1) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mbm-nav-dropdown li a {
  display: block !important;
  padding: 0.75rem 1.25rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
  color: var(--dark) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(181,168,154,0.15) !important;
  transition: background 0.15s, color 0.15s !important;
  text-transform: none !important;
}
.mbm-nav-dropdown li:last-child a {
  border-bottom: none !important;
}
.mbm-nav-dropdown li a:hover {
  background: var(--cream) !important;
  color: var(--accent) !important;
}

/* ─────────────────────────────────────
   NIEUWSBRIEF — HOMEPAGE SECTIE
───────────────────────────────────────── */
.mbm-newsletter-section {
  background: var(--dark);
  padding: 5rem 0;
  text-align: center;
}
.mbm-newsletter-inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.mbm-newsletter-diamond {
  color: var(--accent);
  font-size: 1rem;
  display: block;
  margin-bottom: 1rem;
}
.mbm-newsletter-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  margin: 0 0 0.75rem;
}
.mbm-newsletter-sub {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
  margin: 0 0 2rem;
}
.mbm-newsletter-input-row {
  display: flex;
  gap: 0;
  max-width: 440px;
  margin: 0 auto;
}
.mbm-newsletter-email {
  flex: 1;
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  background: rgba(255,255,255,0.07);
  color: var(--white);
  padding: 0.85rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s;
}
.mbm-newsletter-email::placeholder { color: rgba(255,255,255,0.3); }
.mbm-newsletter-email:focus { border-color: var(--accent); }
.mbm-newsletter-section .mbm-btn,
.mbm-newsletter-submit {
  background: var(--accent) !important;
  color: var(--white) !important;
  border: 1px solid var(--accent) !important;
  padding: 0.85rem 1.75rem !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: background 0.3s !important;
}
.mbm-newsletter-section .mbm-btn:hover,
.mbm-newsletter-submit:hover {
  background: var(--accent-lt) !important;
}
.mbm-newsletter-privacy {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  margin: 0.75rem 0 0;
}
.mbm-newsletter-success {
  text-align: center;
  padding: 1rem 0;
}
.mbm-newsletter-code-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 0 0 0.5rem;
}
.mbm-newsletter-code {
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.mbm-newsletter-code-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

/* ─────────────────────────────────────
   NIEUWSBRIEF — POPUP
───────────────────────────────────────── */
.mbm-nl-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.mbm-nl-popup.is-open { display: block; }
.mbm-nl-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44,36,32,0.5);
  backdrop-filter: blur(4px);
}
.mbm-nl-popup__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 720px;
  width: calc(100% - 2rem);
  overflow: hidden;
}
.mbm-nl-popup__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s;
}
.mbm-nl-popup__close:hover { color: var(--white); }
.mbm-nl-popup__left {
  background: var(--dark);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mbm-nl-popup__tag {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
}
.mbm-nl-popup__left h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--white);
  margin: 0 0 1rem;
  line-height: 1.3;
}
.mbm-nl-popup__left p {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  margin: 0;
}
.mbm-nl-popup__right {
  background: var(--white);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mbm-nl-popup__label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  display: block;
  margin-bottom: 0.4rem;
}
.mbm-nl-popup__input {
  width: 100%;
  border: 1px solid rgba(181,168,154,0.4);
  background: var(--off-white);
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--dark);
  outline: none;
  box-sizing: border-box;
  border-radius: 0;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s;
}
.mbm-nl-popup__input:focus { border-color: var(--accent); background: var(--white); }
.mbm-nl-popup__btn {
  width: 100%;
  background: var(--dark);
  color: var(--white);
  border: 2px solid var(--dark);
  padding: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 0;
}
.mbm-nl-popup__btn:hover { background: transparent; color: var(--dark); }
.mbm-nl-popup__privacy {
  font-size: 0.7rem;
  color: var(--taupe);
  margin: 0.6rem 0 0;
  text-align: center;
}
.mbm-nl-popup__success { text-align: center; }
.mbm-nl-popup__check {
  color: var(--accent);
  font-size: 1.2rem;
  display: block;
  margin-bottom: 0.5rem;
}
.mbm-nl-popup__code {
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--dark);
  margin: 0.25rem 0;
}
.mbm-nl-popup__note {
  font-size: 0.72rem;
  color: var(--taupe);
  margin: 0.5rem 0 0;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .mbm-nl-popup__box { grid-template-columns: 1fr; }
  .mbm-nl-popup__left { padding: 2rem 1.5rem 1rem; }
  .mbm-nl-popup__right { padding: 1.5rem; }
  .mbm-newsletter-input-row { flex-direction: column; }
  .mbm-newsletter-email { border-right: 1px solid rgba(255,255,255,0.2); border-bottom: none; }
}

/* ─────────────────────────────────────
   HERO — PRODUCT ROTATIE ANIMATIE
───────────────────────────────────────── */
.mbm-hero__tumbler-img {
  width: 220px;
  max-width: 100%;
  animation: mbm-rotate-y 8s linear infinite;
  transform-style: preserve-3d;
  filter: drop-shadow(0 20px 40px rgba(44,36,32,0.2));
}

@keyframes mbm-rotate-y {
  0%   { transform: perspective(600px) rotateY(0deg); }
  100% { transform: perspective(600px) rotateY(360deg); }
}

/* Pauzeer bij hover */
.mbm-hero__tumbler:hover .mbm-hero__tumbler-img {
  animation-play-state: paused;
}

/* ─────────────────────────────────────
   HOMEPAGE PRODUCTGRID — 3 KOLOMMEN
───────────────────────────────────────── */
.mbm-products-section .products.columns-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  align-items: start !important;
}
.mbm-products-section .products.columns-3 li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
/* Placeholder afbeelding zelfde hoogte als echte */
.mbm-products-section .woocommerce-placeholder,
.mbm-products-section img.woocommerce-placeholder {
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  object-fit: cover !important;
}

/* ─────────────────────────────────────
   HOMEPAGE PRODUCTGRID — FORCE 3 KOLOMMEN
───────────────────────────────────────── */
.mbm-product-grid-wrap ul.products,
.mbm-product-grid-wrap ul.products.columns-3,
.mbm-product-grid-wrap .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 1.5rem !important;
  float: none !important;
  width: 100% !important;
}

.mbm-product-grid-wrap ul.products li.product,
.mbm-product-grid-wrap .wc-block-grid__product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

/* Placeholder zelfde hoogte */
.mbm-product-grid-wrap .woocommerce-placeholder {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  display: block !important;
}

@media (max-width: 600px) {
  .mbm-product-grid-wrap ul.products,
  .mbm-product-grid-wrap ul.products.columns-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────
   HOMEPAGE PRODUCTGRID — NUCLEAIRE OPTIE
   Dekt shortcode + blokken + legacy
───────────────────────────────────────── */
.mbm-product-grid-wrap *,
.mbm-product-grid-wrap *::before,
.mbm-product-grid-wrap *::after {
  box-sizing: border-box;
}

/* Shortcode: ul.products */
.mbm-product-grid-wrap ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
  clear: both !important;
}
.mbm-product-grid-wrap ul.products::before,
.mbm-product-grid-wrap ul.products::after { display: none !important; }
.mbm-product-grid-wrap ul.products > li {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Blokken: wc-block-grid */
.mbm-product-grid-wrap .wc-block-grid .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
}
.mbm-product-grid-wrap .wc-block-grid .wc-block-grid__product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────
   HOMEPAGE PRODUCTGRID — GELIJKE HOOGTE KAARTEN
───────────────────────────────────────── */
.mbm-product-grid-wrap ul.products {
  align-items: stretch !important;
}
.mbm-product-grid-wrap ul.products > li.product {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
/* Knop altijd onderaan */
.mbm-product-grid-wrap ul.products > li.product .woocommerce-loop-product__title {
  flex: 1 !important;
}
.mbm-product-grid-wrap ul.products > li.product .button,
.mbm-product-grid-wrap ul.products > li.product .add_to_cart_button {
  margin-top: auto !important;
}

/* ─────────────────────────────────────
   PRODUCTKAARTEN — GELIJKE HOOGTE (HARD FIX)
───────────────────────────────────────── */

/* Grid items zelfde hoogte */
.mbm-product-grid-wrap ul.products,
.mbm-product-grid-wrap .wc-block-grid__products {
  align-items: stretch !important;
}

/* Elke kaart: flex kolom zodat inhoud zich verspreidt */
.mbm-product-grid-wrap ul.products li.product,
.mbm-product-grid-wrap .wc-block-grid__product {
  display: flex !important;
  flex-direction: column !important;
}

/* Afbeelding blok: vaste hoogte */
.mbm-product-grid-wrap ul.products li.product a img,
.mbm-product-grid-wrap ul.products li.product .woocommerce-placeholder {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Titel neemt beschikbare ruimte */
.mbm-product-grid-wrap ul.products li.product .woocommerce-loop-product__title,
.mbm-product-grid-wrap ul.products li.product h2 {
  flex-grow: 1 !important;
  min-height: 3.5em !important;
}

/* Prijs en knop altijd aan de onderkant */
.mbm-product-grid-wrap ul.products li.product .price {
  margin-top: auto !important;
}

/* ─────────────────────────────────────
   SENDY PLUGIN — PICK-UP PUNT KNOP
───────────────────────────────────────── */
/* Selecteer pick-up-punt knop */
#wcpbc-select-pickup-point,
.wcpbc-select-pickup-point,
button.wcpbc-select-pickup-point,
input[type="button"].wcpbc-select-pickup-point,
.woocommerce .wcpbc-select-pickup-point,
#wcpbc_pickup_point_section button,
#wcpbc_pickup_point_section input[type="button"] {
  background: var(--dark) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1.8rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  display: inline-block !important;
  margin-top: 0.5rem !important;
}

#wcpbc-select-pickup-point:hover,
.wcpbc-select-pickup-point:hover,
#wcpbc_pickup_point_section button:hover,
#wcpbc_pickup_point_section input[type="button"]:hover {
  background: var(--brown) !important;
  color: var(--white) !important;
}

/* ─────────────────────────────────────
   SENDY — PICK-UP PUNT KNOP (EXACTE SELECTOR)
───────────────────────────────────────── */
.sendy-checkout-content button {
  background: var(--dark) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1.8rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  display: inline-block !important;
  margin-top: 0.5rem !important;
  box-shadow: none !important;
}
.sendy-checkout-content button:hover {
  background: var(--brown) !important;
}

/* ─────────────────────────────────────
   CHECKOUT — CHECKBOX UITLIJNING
───────────────────────────────────────── */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout label.checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
}
.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-checkout label.checkbox input[type="checkbox"] {
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
}

/* ─────────────────────────────────────
   WC BLOKKEN — CHECKBOX FIX
───────────────────────────────────────── */
.wc-block-components-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  position: relative !important;
}

/* Verberg de echte input maar houd hem klikbaar */
.wc-block-components-checkbox__input {
  position: absolute !important;
  opacity: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  cursor: pointer !important;
  z-index: 1 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 0 !important;
}

/* SVG mark = het zichtbare vakje */
.wc-block-components-checkbox__mark {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 1.5px solid var(--taupe) !important;
  background: var(--white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Label tekst */
.wc-block-components-checkbox__label {
  line-height: 1.4 !important;
  vertical-align: middle !important;
}

/* ─────────────────────────────────────
   WC BLOKKEN — CHECKBOX LABEL NAAST VAKJE
───────────────────────────────────────── */
.wc-block-components-checkbox label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

/* ─────────────────────────────────────
   CONTACT PAGINA
───────────────────────────────────────── */
.mbm-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}

.mbm-contact-info__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--dark);
  margin-bottom: 2rem;
  font-weight: 400;
}

.mbm-contact-info__block {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--blush);
}
.mbm-contact-info__block:last-child {
  border-bottom: none;
}

.mbm-contact-info__label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.3rem;
}

.mbm-contact-info__value {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin: 0;
}

.mbm-contact-info__value--sub {
  font-size: 0.82rem;
  color: var(--taupe);
  margin-top: 0.3rem;
}

.mbm-contact-info__link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-lt);
  transition: color 0.2s;
}
.mbm-contact-info__link:hover {
  color: var(--brown);
}

@media (max-width: 768px) {
  .mbm-contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ─────────────────────────────────────
   OVER MELISSA PAGINA
───────────────────────────────────────── */
.mbm-about-hero { padding: 5rem 0 3rem; background: var(--off-white); text-align: center; }

.mbm-about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 3rem;
}
.mbm-about-text p { font-size: 1.05rem; line-height: 1.85; color: var(--dark); margin-bottom: 1.2rem; }
.mbm-about-subtitle { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--dark); margin-bottom: 1.5rem; }
.mbm-about-blockquote {
  background: var(--blush);
  border-left: 3px solid var(--accent);
  padding: 2rem 2.5rem;
  margin: 0;
}
.mbm-about-blockquote p { font-family: var(--font-script); font-size: 1.6rem; color: var(--brown); margin: 0 0 0.8rem; }
.mbm-about-blockquote cite { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--taupe); }
.mbm-about-full p { font-size: 1.05rem; line-height: 1.85; color: var(--dark); margin-bottom: 1.2rem; max-width: 760px; }
.mbm-about-usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; }
.mbm-about-usp { text-align: center; padding: 2rem 1rem; background: var(--off-white); }
.mbm-about-usp__icon { font-size: 1.4rem; color: var(--accent); display: block; margin-bottom: 0.8rem; }
.mbm-about-usp strong { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }
.mbm-about-usp p { font-size: 0.88rem; color: var(--taupe); margin: 0; }

@media (max-width: 768px) {
  .mbm-about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .mbm-about-usps { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────
   OP MAAT DRUKKEN PAGINA
───────────────────────────────────────── */
.mbm-opmaat-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1rem; }
.mbm-opmaat-step { padding: 2.5rem 2rem; background: var(--cream); position: relative; }
.mbm-opmaat-step__num { font-family: var(--font-display); font-size: 3.5rem; color: var(--accent); opacity: 0.3; line-height: 1; display: block; margin-bottom: 0.5rem; }
.mbm-opmaat-step__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; color: var(--dark); margin-bottom: 0.8rem; }
.mbm-opmaat-step__text { font-size: 0.9rem; color: var(--taupe); line-height: 1.7; margin: 0; }
.mbm-opmaat-options-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.mbm-opmaat-option { text-align: center; padding: 2rem 1rem; background: var(--off-white); border: 1px solid var(--blush); }
.mbm-opmaat-option__icon { font-size: 2rem; display: block; margin-bottom: 0.8rem; }
.mbm-opmaat-option strong { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem; }
.mbm-opmaat-option p { font-size: 0.85rem; color: var(--taupe); margin: 0; }
.mbm-opmaat-notice { background: var(--blush); padding: 1.2rem 2rem; border-left: 3px solid var(--accent); font-size: 0.9rem; color: var(--brown); }
.mbm-opmaat-notice a { color: var(--accent); }

@media (max-width: 768px) {
  .mbm-opmaat-steps { grid-template-columns: 1fr; }
  .mbm-opmaat-options-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────
   VERZENDING & RETOUR PAGINA
───────────────────────────────────────── */
.mbm-vr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.mbm-vr-block__title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--dark); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--accent); }
.mbm-vr-item { margin-bottom: 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--blush); }
.mbm-vr-item:last-child { border-bottom: none; }
.mbm-vr-item h3 { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); margin-bottom: 0.5rem; }
.mbm-vr-item p { font-size: 0.95rem; color: var(--dark); line-height: 1.7; margin: 0; }
.mbm-vr-item--notice { background: var(--blush); padding: 1rem 1.2rem; border-left: 3px solid var(--accent); border-bottom: none !important; }
.mbm-vr-item--notice p { font-weight: 500; }
.mbm-vr-list { margin: 0; padding-left: 1.2rem; }
.mbm-vr-list li { font-size: 0.95rem; color: var(--dark); line-height: 1.7; margin-bottom: 0.3rem; }

@media (max-width: 768px) { .mbm-vr-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────
   VEELGESTELDE VRAGEN PAGINA
───────────────────────────────────────── */
.mbm-faq-category { margin-bottom: 3rem; }
.mbm-faq-category__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--accent); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--blush); }
.mbm-faq-list { display: flex; flex-direction: column; gap: 0; }
.mbm-faq-item { border-bottom: 1px solid var(--blush); }
.mbm-faq-item__question {
  width: 100%; background: none; border: none; text-align: left;
  padding: 1.1rem 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--dark);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  transition: color 0.2s;
}
.mbm-faq-item__question:hover { color: var(--accent); }
.mbm-faq-item__icon { font-size: 1.3rem; color: var(--accent); flex-shrink: 0; transition: transform 0.25s; }
.mbm-faq-item__question[aria-expanded="true"] .mbm-faq-item__icon { transform: rotate(45deg); }
.mbm-faq-item__answer { padding: 0 0 1.2rem; }
.mbm-faq-item__answer p { font-size: 0.92rem; color: var(--taupe); line-height: 1.75; margin: 0; }
.mbm-faq-cta { text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--blush); }
.mbm-faq-cta p { margin-bottom: 1rem; color: var(--taupe); }

/* ─────────────────────────────────────
   CONTACT PAGINA — REVISIE
───────────────────────────────────────── */
.mbm-contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: start;
}

.mbm-contact-block-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 2rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--accent);
}

/* Formulier velden */
.mbm-contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.mbm-cf-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.mbm-cf-field { display: flex; flex-direction: column; gap: 0.4rem; }
.mbm-cf-field label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
}
.mbm-cf-field label span { color: var(--accent); }
.mbm-cf-field input,
.mbm-cf-field select,
.mbm-cf-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--dark);
  background: var(--white);
  border: 1px solid var(--blush);
  border-radius: 0;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.2s;
  outline: none;
}
.mbm-cf-field input:focus,
.mbm-cf-field select:focus,
.mbm-cf-field textarea:focus { border-color: var(--accent); }
.mbm-cf-field textarea { resize: vertical; min-height: 140px; }
.mbm-cf-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b5a89a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* Succes bericht */
.mbm-contact-success {
  background: var(--sage);
  padding: 1.2rem 1.5rem;
  border-left: 3px solid var(--sage-dark);
}
.mbm-contact-success p { font-size: 0.95rem; color: var(--dark); margin: 0; }

/* Bedrijfsgegevens blokken */
.mbm-contact-info__value--sub {
  font-size: 0.82rem;
  color: var(--taupe);
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* Rekeninggegevens */
.mbm-contact-bank {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--blush);
}
.mbm-contact-bank__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  background: var(--cream);
  padding: 2rem 2.5rem;
}
.mbm-contact-bank__item {}
.mbm-contact-bank__item .mbm-contact-info__value {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .mbm-contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .mbm-cf-row--2 { grid-template-columns: 1fr; }
  .mbm-contact-bank__grid { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ─────────────────────────────────────
   CONTACT — 2 KOLOMMEN GEGEVENS + BREED FORMULIER
───────────────────────────────────────── */
.mbm-contact-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--blush);
}
.mbm-contact-details__col {}

.mbm-contact-info__value--iban {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Formulier vol breed */
.mbm-contact-form-section { max-width: 100%; }
.mbm-cf-row--3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
}

@media (max-width: 768px) {
  .mbm-contact-details { grid-template-columns: 1fr; gap: 2rem; }
  .mbm-cf-row--3 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────
   CONTACT — FIXES SPACING + STIJL
───────────────────────────────────────── */

/* Minder ruimte tussen blokken */
.mbm-contact-info__block {
  margin-bottom: 1rem !important;
  padding-bottom: 1rem !important;
}

/* IBAN zelfde stijl als andere waarden */
.mbm-contact-info__value--iban {
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

/* KvK + BTW naast elkaar */
.mbm-contact-kvkbtw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.mbm-contact-kvkbtw .mbm-contact-info__block {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ─────────────────────────────────────
   CONTACT — SPACING + IBAN FIX
───────────────────────────────────────── */
.mbm-contact-info__block {
  margin-bottom: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}
/* IBAN exact zelfde als andere waarden */
.mbm-contact-info__value--iban {
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-family: var(--font-body) !important;
  color: var(--dark) !important;
}

/* ─────────────────────────────────────
   CONTACT — MINDER RUIMTE BOVEN FORMULIER
───────────────────────────────────────── */
.mbm-contact-details {
  margin-bottom: 2rem !important;
  padding-bottom: 2rem !important;
}
.mbm-contact-form-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ─────────────────────────────────────
   WINKEL PAGINA — FORCE 3 KOLOMMEN GRID
───────────────────────────────────────── */
.woocommerce-page ul.products,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  float: none !important;
  width: 100% !important;
  clear: both !important;
}
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Gelijke kaarth hoogte */
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  flex: 1 !important;
}

/* Afbeeldingen zelfde hoogte */
.woocommerce-page ul.products li.product a img,
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product .woocommerce-placeholder,
.woocommerce ul.products li.product .woocommerce-placeholder {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 768px) {
  .woocommerce-page ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .woocommerce-page ul.products,
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────
   WINKEL — KNOP ALTIJD ONDERAAN
───────────────────────────────────────── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  flex-grow: 1 !important;
  min-height: 3.5em !important;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  margin-top: auto !important;
}

/* ─────────────────────────────────────
   WINKEL — CATEGORIEFILTERBALK
───────────────────────────────────────── */
.mbm-shop-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--blush);
}

.mbm-shop-filter__item {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  text-decoration: none;
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--blush);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mbm-shop-filter__item:hover {
  color: var(--dark);
  border-color: var(--taupe);
}

.mbm-shop-filter__item--active {
  background: var(--dark);
  color: var(--white) !important;
  border-color: var(--dark);
}

/* ─────────────────────────────────────
   PRODUCTPAGINA — COMPACTE LAYOUT
───────────────────────────────────────── */

/* Afbeelding kleiner */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
  width: 44% !important;
  max-height: 480px !important;
}
.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img {
  max-height: 420px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Summary iets breder door kleinere afbeelding */
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  width: 52% !important;
}

/* Vergrootglas icoontje tonen */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  display: block !important;
}

/* Beschrijving preview */
.mbm-product-description-preview {
  margin: 0.8rem 0 1rem;
  padding: 0;
}
.mbm-product-desc-short {
  font-size: 0.9rem;
  color: var(--taupe);
  line-height: 1.7;
  margin: 0 0 0.6rem;
}
.mbm-product-desc-more {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-lt);
  padding-bottom: 1px;
  transition: color 0.2s;
}
.mbm-product-desc-more:hover { color: var(--brown); }

/* ─────────────────────────────────────
   PRODUCTPAGINA — VERGROOTGLAS IN AFBEELDING
───────────────────────────────────────── */
.woocommerce div.product div.images {
  position: relative !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 10 !important;
  width: 2.2rem !important;
  height: 2.2rem !important;
  background: rgba(255,255,255,0.85) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  float: none !important;
}

/* ─────────────────────────────────────
   FOOTER — COMPACTE NIEUWSBRIEF STRIP
───────────────────────────────────────── */
.footer-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.8rem 0;
  margin: 1.5rem 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-newsletter__left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
}
.footer-newsletter__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--white);
  font-weight: 400;
}
.footer-newsletter__sub {
  font-size: 0.75rem;
  color: var(--taupe);
  letter-spacing: 0.06em;
}
.footer-newsletter__right {
  flex: 1;
  max-width: 480px;
}
.footer-newsletter__form {
  display: flex;
  gap: 0;
}
.footer-newsletter__input {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-right: none;
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--white);
  outline: none;
}
.footer-newsletter__input::placeholder { color: rgba(181,168,154,0.5); }
.footer-newsletter__input:focus { border-color: var(--accent); }
.footer-newsletter__btn {
  background: var(--accent);
  color: var(--white);
  border: 1px solid var(--accent);
  padding: 0.65rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.footer-newsletter__btn:hover { background: var(--accent-lt); }
.footer-newsletter__privacy {
  font-size: 0.72rem;
  color: rgba(181,168,154,0.5);
  margin-top: 0.4rem;
}
.footer-newsletter__privacy a { color: var(--taupe); }
.footer-newsletter__success p { color: var(--taupe); font-size: 0.88rem; margin: 0 0 0.25rem; }
.footer-newsletter__code { color: var(--accent-lt); font-size: 1rem; letter-spacing: 0.1em; }

@media (max-width: 768px) {
  .footer-newsletter { flex-direction: column; align-items: flex-start; }
  .footer-newsletter__right { max-width: 100%; width: 100%; }
}

/* ─────────────────────────────────────
   MOBIEL — WINKEL & PRODUCTPAGINA FIXES
───────────────────────────────────────── */
@media (max-width: 768px) {

  /* Winkel: 2 kolommen op mobiel ipv 3 */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem !important;
  }

  /* Producttitel niet te groot, geen afbreking */
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Knop niet afsnijden */
  .woocommerce ul.products li.product .button,
  .woocommerce-page ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce-page ul.products li.product .add_to_cart_button {
    font-size: 0.55rem !important;
    padding: 0.6rem 0.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }

  /* Productpagina: afbeelding bovenaan vol breed */
  .woocommerce div.product div.images,
  .woocommerce-page div.product div.images {
    width: 100% !important;
    max-height: 340px !important;
    margin-bottom: 1.5rem !important;
  }
  .woocommerce div.product div.images img,
  .woocommerce-page div.product div.images img {
    max-height: 320px !important;
  }

  /* Summary vol breed onder afbeelding */
  .woocommerce div.product div.summary,
  .woocommerce-page div.product div.summary {
    width: 100% !important;
  }

  /* Producttitel kleiner op mobiel */
  .woocommerce div.product .product_title,
  .woocommerce-page div.product .product_title {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
  }

  /* Verberg dubbele beschrijving op mobiel — toon alleen short */
  .mbm-product-description-preview .mbm-product-desc-short {
    font-size: 0.88rem !important;
  }
}

/* Winkel: 1 kolom op kleine telefoons */
@media (max-width: 400px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* Verberg WooCommerce standaard short description — wij tonen eigen preview */
.woocommerce div.product .woocommerce-product-details__short-description {
  display: none !important;
}

/* ═══════════════════════════════════════
   BUG FIX 1: HOMEPAGE KNOPPEN SYNCHROON
   Knop staat altijd onderaan ongeacht titelhoogte
═══════════════════════════════════════ */

/* Winkelknop altijd onderaan in productkaart */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.mbm-product-grid-wrap ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Afbeelding: vaste hoogte zodat alle kaarten gelijk starten */
.woocommerce ul.products li.product > a:first-child,
.woocommerce ul.products li.product > a:first-of-type {
  flex-shrink: 0 !important;
}

/* Titel vult de ruimte op zodat prijs + knop naar beneden zakken */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  flex: 1 1 auto !important;
  margin-bottom: 0 !important;
}

/* Prijs en knop altijd aan de onderkant */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce-page ul.products li.product .button,
.woocommerce-page ul.products li.product .add_to_cart_button {
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  align-self: stretch !important;
}


/* ═══════════════════════════════════════
   BUG FIX 1B: PRODUCTAFBEELDING VOLLEDIG ZICHTBAAR
   Tumbler wordt niet afgesneden — object-fit: contain
═══════════════════════════════════════ */

/* Hoofdafbeelding: volledig zichtbaar, niet afgesneden */
.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--off-white) !important;
  display: block !important;
}

/* Thumbnails ook contain */
.woocommerce div.product div.images .flex-control-thumbs li img {
  object-fit: contain !important;
  background: var(--off-white) !important;
}

/* Winkelgrid afbeeldingen: cover blijft goed voor kaartjes */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  object-fit: cover !important;
  height: 260px !important;
}


/* ═══════════════════════════════════════
   BUG FIX 2: PRODUCTTITEL LEESBAAR — NIET OVER FOTO
   De .summary blijft altijd ONDER de .images staan
═══════════════════════════════════════ */

/* Productpagina kaart: grid met vaste kolommen op desktop */
.woocommerce div.product {
  display: grid !important;
  grid-template-columns: 44% 1fr !important;
  grid-template-rows: auto !important;
  gap: 4rem !important;
  align-items: start !important;
  position: relative !important;
}

/* Afbeelding altijd in kolom 1 */
.woocommerce div.product div.images {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  width: auto !important;
  float: none !important;
  z-index: 1 !important;
}

/* Summary (titel + prijs + knop) altijd in kolom 2 — NOOIT over foto */
.woocommerce div.product div.summary {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  float: none !important;
  width: auto !important;
  clear: none !important;
}

/* Tabs vullen volle breedte onderaan */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

/* Producttitel: altijd zichtbaar, donkere achtergrond verwijderd */
.woocommerce div.product .product_title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.6rem, 2.5vw, 2.8rem) !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  background: transparent !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 0 0.75rem !important;
}

/* Mobiel: alles onder elkaar, titel NOOIT over foto */
@media (max-width: 900px) {
  .woocommerce div.product {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .woocommerce div.product div.images {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-height: 340px !important;
    overflow: hidden !important;
  }

  .woocommerce div.product div.summary {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .woocommerce div.product .woocommerce-tabs {
    grid-row: 3 !important;
  }

  /* Thumbnails op mobiel */
  .woocommerce div.product div.images .flex-control-thumbs {
    display: flex !important;
    gap: 0.4rem !important;
    margin-top: 0.5rem !important;
  }
}

/* ═══════════════════════════════════════
   OVERRIDE: Verwijder max-height beperkingen op productpagina afbeelding
═══════════════════════════════════════ */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
  max-height: none !important;
}
.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img {
  max-height: 520px !important;
  height: auto !important;
  object-fit: contain !important;
  background: var(--off-white) !important;
}

@media (max-width: 900px) {
  .woocommerce div.product div.images,
  .woocommerce-page div.product div.images {
    max-height: none !important;
    overflow: visible !important;
  }
  .woocommerce div.product div.images img,
  .woocommerce-page div.product div.images img {
    max-height: 400px !important;
    object-fit: contain !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════
   DEFINITIEVE FIX: PRODUCTPAGINA LAYOUT
   Thumbnails en summary overlappen NOOIT
═══════════════════════════════════════ */

/* Stap 1: Zet de product wrapper op display:block zodat
   WooCommerce's eigen float-layout kan werken,
   en wij controle houden via clearfix */
.woocommerce div.product,
.woocommerce-page div.product {
  display: block !important;
  overflow: hidden !important; /* clearfix */
  padding: 3.5rem !important;
  background: var(--white) !important;
  border: 1px solid rgba(181,168,154,0.22) !important;
  box-shadow: 0 4px 32px rgba(44,36,32,0.07) !important;
}

/* Stap 2: Afbeeldingen blok — links, 45% breed */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
  float: left !important;
  width: 45% !important;
  clear: left !important;
  position: relative !important;
  margin-right: 4rem !important;
  margin-bottom: 2rem !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Stap 3: Afbeelding zelf — volledig zichtbaar */
.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  background: var(--off-white) !important;
  display: block !important;
}

/* Stap 4: Thumbnails — BINNEN het images blok, nooit eroverheen */
.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce-page div.product div.images .flex-control-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 0.75rem !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative !important; /* blijft binnen images */
  z-index: 1 !important;
  clear: both !important;
  width: 100% !important;
}

.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce-page div.product div.images .flex-control-thumbs li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce-page div.product div.images .flex-control-thumbs li img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  background: var(--off-white) !important;
  border: 2px solid transparent !important;
  opacity: 0.65 !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li.flex-active img {
  border-color: var(--accent) !important;
  opacity: 1 !important;
}

/* Stap 5: Summary — rechts naast afbeelding, nooit eronder/eroverheen */
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  float: right !important;
  width: calc(55% - 4rem) !important;
  clear: none !important;
  position: relative !important;
  z-index: 5 !important;
  overflow: visible !important;
  padding-top: 0 !important;
}

/* Stap 6: Tabs — altijd ná beide kolommen */
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
  clear: both !important;
  float: none !important;
  width: 100% !important;
  display: block !important;
  margin-top: 2rem !important;
  padding-top: 2.5rem !important;
  border-top: 1px solid rgba(181,168,154,0.2) !important;
  grid-column: unset !important;
  grid-row: unset !important;
}

/* Stap 7: Mobiel — alles onder elkaar */
@media (max-width: 900px) {
  .woocommerce div.product,
  .woocommerce-page div.product {
    padding: 1.5rem !important;
  }

  .woocommerce div.product div.images,
  .woocommerce-page div.product div.images {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 1.5rem !important;
    display: block !important;
  }

  .woocommerce div.product div.summary,
  .woocommerce-page div.product div.summary {
    float: none !important;
    width: 100% !important;
    display: block !important;
    clear: both !important;
  }

  /* Thumbnails compact op mobiel */
  .woocommerce div.product div.images .flex-control-thumbs li img,
  .woocommerce-page div.product div.images .flex-control-thumbs li img {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ═══════════════════════════════════════
   V4 FIX: THUMBNAILS NOOIT OVER TITEL
   Kernprobleem: WooCommerce flexslider zet thumbnails
   buiten de normale documentflow. Oplossing: wrapper
   met expliciete min-height + summary altijd eronder.
═══════════════════════════════════════ */

/* De hele productpagina wrapper: block, geen grid, geen flex */
.woocommerce div.product,
.woocommerce-page div.product {
  display: block !important;
  overflow: visible !important;
}

/* images div: ALTIJD block, nooit floating op mobiel */
.woocommerce div.product div.images {
  display: block !important;
  overflow: visible !important; /* thumbnails mogen ruimte innemen */
  position: relative !important;
}

/* Thumbnails: onderdeel van de normale flow, GEEN absolute positie */
.woocommerce div.product div.images ol.flex-control-nav.flex-control-thumbs,
.woocommerce div.product div.images .flex-control-thumbs {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin: 0.75rem 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  z-index: auto !important;
}

/* Elk thumbnail item */
.woocommerce div.product div.images .flex-control-thumbs li {
  float: none !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Summary: ALTIJD na de images div — gebruik margin-top als veiligheidsmarge */
.woocommerce div.product div.summary {
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  background: var(--white) !important; /* Zorgt dat summary altijd leesbaar is */
}

/* MOBIEL: harde scheiding — summary begint PAS na images + thumbnails */
@media (max-width: 900px) {
  .woocommerce div.product div.images,
  .woocommerce-page div.product div.images {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    display: block !important;
    overflow: visible !important;
    /* padding-bottom zorgt dat thumbnails ruimte hebben */
    padding-bottom: 0 !important;
  }

  /* Maak ruimte voor de thumbnails via min-height berekening */
  .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    display: block !important;
    width: 100% !important;
  }

  .woocommerce div.product div.summary,
  .woocommerce-page div.product div.summary {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    display: block !important;
    /* Genoeg ruimte boven zodat thumbnails er nooit overheen komen */
    margin-top: 1rem !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    background: var(--white) !important;
  }

  /* Producttitel: witte achtergrond zodat hij altijd leesbaar is */
  .woocommerce div.product .product_title {
    background: var(--white) !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
    padding-top: 0.5rem !important;
  }
}