/* ===== Description (blijft los) ===== */
.wcb-blazor-extra { margin-top: .35rem; }
.wcb-blazor-desc  { font-size: 12px; line-height: 1.45; color: var(--wcb-desc-color); }

/* ===== SVG sizing for thumbnail ===== */
/* 1) Maak de imagecontainer zelf even breed als jij wilt */
.wcb-has-svg .wc-block-cart-item__image,
.wcb-has-svg .wc-block-components-product-image {
  width: var(--wcb-svg-width) !important;
  min-width: var(--wcb-svg-width) !important;
  height: auto !important;
  aspect-ratio: auto !important;       /* voorkom geforceerd vierkant */
  flex: 0 0 var(--wcb-svg-width) !important; /* voor layouts met flex-basis */
}

/* Sommige thema’s gebruiken pseudo-aspectratio’s/padding; zet die uit */
.wcb-has-svg .wc-block-components-product-image::before,
.wcb-has-svg .wc-block-components-product-image::after {
  content: none !important;
}

/* 2) Het <img> zelf moet 100% van de container pakken */
.wcb-has-svg .wc-block-cart-item__image img,
.wcb-has-svg .wc-block-components-product-image img,
.wcb-has-svg .wc-block-components-product-image__image {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block;
}

/* ===== (Optioneel) Checkout samenvatting wat kleiner ===== */
.wc-block-checkout .wcb-has-svg .wc-block-components-product-image,
.wc-block-checkout .wcb-has-svg .wc-block-cart-item__image {
  width: calc(var(--wcb-svg-width) * 0.8) !important;
  min-width: calc(var(--wcb-svg-width) * 0.8) !important;
  flex-basis: calc(var(--wcb-svg-width) * 0.8) !important;
}

/* ===== FrameEditor knop styling (licht) ===== */
.wcb-blazor-edit-wrap { margin-top: .35rem; }
.wcb-blazor-edit { display: inline-block; }


/* ===== Mobile: toon SVG-thumbnail in klassieke cart ===== */
/* Woo gebruikt vaak 768px; sommige thema's 782px – pak beide */
@media (max-width: 782px), (max-width: 768px) {
  /* Cart tabel is responsief via .shop_table_responsive – woo verbergt de thumbnail kolom.
     Zet 'm terug ALEEEN voor onze items met SVG. */
  .woocommerce-cart table.shop_table_responsive tr.cart_item.wcb-has-svg td.product-thumbnail {
    display: block !important;           /* Woo zet 'none' → wij tonen 'm weer */
    margin-bottom: .5rem;
  }

  /* De SVG zelf netjes laten schalen */
  .woocommerce-cart tr.cart_item.wcb-has-svg td.product-thumbnail .blazor-thumbnail,
  .woocommerce-cart tr.cart_item.wcb-has-svg td.product-thumbnail img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }
}