/* ===========================
   Mix & Match – compacte, responsieve stijl (6/5/4/3/2 kolommen)
   =========================== */

/* Container en breadcrumbs (consistent met single) */
.mmx-page .mmx-container{ max-width: 1200px; margin: 0 auto; padding: 20px; }
.mmx-page .woocommerce-breadcrumb{
  margin: 20px 0 10px 0;
  display:flex;align-items:center;flex-wrap:wrap;gap:.4em;
  color: var(--text-color);
}
.mmx-page .woocommerce-breadcrumb a{ color:var(--text-color); text-decoration:none; }
.mmx-page .woocommerce-breadcrumb a:hover{ text-decoration:underline; }

/* Zijkant-padding zodat niets tegen de rand plakt */
.mmx-left-wrap{ padding: 0 20px 20px 20px; }

/* Rechterkolom sticky – GEcentreerd binnen de kolom */
.product-right .mmx-sticky{
  position: sticky; top: 120px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 20px;
  max-width: 560px;          /* centreren binnen rechterkolom */
  margin-inline: auto;       /* center */
}

/* Kop & prijs compacter, consistent met thema */
.product-right .product-title{
  font-size: clamp(22px,2.6vw,30px);
  margin:.1em 0 .15em 0; line-height:1.1; color:var(--secondary-color);
}
.product-right .product-price{
  font-size: 1rem; color: var(--secondary-color); display:flex;
}

/* === Controls rechts (Kies doos + teller) === */
.mm-controls{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
}
@media (max-width: 640px){
  .mm-controls{ grid-template-columns: 1fr; gap:8px; }
}
.mm-cap-label{ font-weight:600; color:var(--secondary-color); font-size:.95rem; }
#mm-capacity{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background: var(--beige-color);
  border: 1px solid #ddd; border-radius: 8px;
  padding: 8px 10px; font-size: .95rem; color: var(--secondary-color);
  min-width: 132px; line-height:1.2;
}
#mm-capacity:focus{ outline:none; border-color:var(--primary-color); box-shadow:0 0 0 2px rgba(212,163,41,.22); }
.mm-controls .mm-remaining{ font-weight:700; color:var(--secondary-color); font-size:.95rem; }

/* === GRID – 6 kolommen zonder overflow === */
.mm-grid-wrap{ padding: 0 0 10px 0; }
.mm-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 16px;
}
@media (max-width: 1280px){ .mm-grid{ grid-template-columns: repeat(5, minmax(140px, 1fr)); } }
@media (max-width: 1100px){ .mm-grid{ grid-template-columns: repeat(4, minmax(150px, 1fr)); } }
@media (max-width: 1024px){ .mm-grid{ grid-template-columns: repeat(3, minmax(160px, 1fr)); } }
@media (max-width: 640px) { .mm-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); } }

/* Kaarten – gelijk uitgelijnd, controls onderaan */
.mm-item{
  background:#fff; border:1px solid #e6e6e6; border-radius:12px;
  display:flex; flex-direction:column; gap:8px; padding:10px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.mm-item:hover{ border-color:#dadada; box-shadow:0 2px 10px rgba(0,0,0,.05); }

/* Thumbnail */
.mm-media{
  aspect-ratio:1/1; background:var(--beige-color);
  border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.mm-media img{ width:100%; height:100%; object-fit:contain }

/* Titel / prijs (klein & strak) */
.mm-title{
  font-weight:600; color:var(--secondary-color); line-height:1.2;
  font-size:.92rem; min-height: 2.4em; /* ~2 regels voor gelijke hoogte */
}
.mm-price{ font-size:.95rem; color:var(--secondary-color); }

/* Badge met aantal vakken */
.mm-badge{
  display:inline-block; font-size:.8rem; padding:2px 8px; border:1px solid #ddd;
  border-radius:999px; background:#fff; color:var(--secondary-color);
}

/* Controls onderaan en identieke afmetingen */
:root{
  --mm-ctl-h: 34px;
  --mm-br: 8px;
  --mm-bd: 1px solid #ddd;
  --mm-font: .92rem;
}
.mm-qty{
  display:flex; gap:6px; align-items:center; margin-top:auto; /* push naar onderkant */
}
.mm-qty input[type="number"]{
  width:48px; text-align:center; padding:0 8px; font-size:var(--mm-font);
  border: var(--mm-bd); border-radius: var(--mm-br);
  color: var(--secondary-color); background:#fff;
  height: var(--mm-ctl-h); line-height: calc(var(--mm-ctl-h) - 2px);
}
.mm-qty input[type="number"]:focus{
  outline:none; border-color:var(--primary-color);
  box-shadow:0 0 0 2px rgba(212,163,41,.22);
}
.mm-qty .mm-plus, .mm-qty .mm-minus{
  width: 34px; height: var(--mm-ctl-h);
  line-height: calc(var(--mm-ctl-h) - 2px);
  text-align:center; cursor:pointer;
  border: var(--mm-bd); border-radius: var(--mm-br);
  background: var(--beige-color); color: var(--secondary-color);
  transition: all .2s ease;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: .92rem; font-weight: 600;
}
.mm-qty .mm-plus:hover, .mm-qty .mm-minus:hover{ border-color:var(--primary-color); }

/* --- BELANGRIJK: knop niet paars; forceer thema-kleur op M&M pagina --- */
.mmx-page .product-right form.cart .single_add_to_cart_button{
  background-color: var(--primary-color) !important;
  color: var(--white-color) !important;
}
.mmx-page .product-right form.cart .single_add_to_cart_button:hover{
  filter: brightness(0.98);
}
.mmx-page .product-right form.cart .single_add_to_cart_button:disabled{
  opacity:.6; cursor:not-allowed;
}

/* Notices / helpertekst */
.woocommerce-notices-wrapper,.woocommerce-message,.woocommerce-error,.woocommerce-info{ margin:12px 20px; }
.mm-note{ color:#b00; margin:.5rem 0; padding:0 20px; }

/* --- Forceer thema-geel voor de Add to cart knop op de Mix & Match pagina --- */
.mmx-page .product-right form.cart button.single_add_to_cart_button.button.alt,
.mmx-page .product-right form.cart .single_add_to_cart_button.button.alt,
.mmx-page .product-right form.cart .button.alt.single_add_to_cart_button,
.mmx-page .product-right form.cart .single_add_to_cart_button {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--white-color) !important;
  background-image: none !important; /* neutraliseert eventuele gradients */
  box-shadow: none !important;
}

/* Hover/disabled consistent */
.mmx-page .product-right form.cart .single_add_to_cart_button:hover { filter: brightness(0.98); }
.mmx-page .product-right form.cart .single_add_to_cart_button:disabled { opacity:.6; cursor:not-allowed; }

/* Rechterpaneel gecentreerd */
.product-right .mmx-sticky { max-width:560px; margin-inline:auto; }

/* Forceer themageel op M&M pagina, wint van .button.alt */
.mmx-page .product-right form.cart button.single_add_to_cart_button.button.alt,
.mmx-page .product-right form.cart .single_add_to_cart_button.button.alt,
.mmx-page .product-right form.cart .button.alt.single_add_to_cart_button,
.mmx-page .product-right form.cart .single_add_to_cart_button {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--white-color) !important;
  background-image: none !important; /* geen Woo gradients */
  box-shadow: none !important;
}
.mmx-page .product-right form.cart .single_add_to_cart_button:hover { filter: brightness(0.98); }
.mmx-page .product-right form.cart .single_add_to_cart_button:disabled { opacity:.6; cursor:not-allowed; }

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt {
    background-color: var(--primary-color) !important;
    padding: 14px 24px;
}