/**
 * Mockups op de productpagina.
 *
 * De previewkolom is gemaakt voor een platte tegel: die vult de kolom en de
 * tekst blijft leesbaar tot ver onder de 400 px. Een mockup is een scène met
 * lucht eromheen, en dan is diezelfde kolom te smal — op 390 px bleef er van het
 * canvas negentig pixels over.
 *
 * Dus: staat er een mockup in, dan mag hij op een smal scherm de marge van de
 * galerij opeten. Niet met negatieve marges (die moeten de opvulling van het
 * thema exact raden), maar door die opvulling zelf terug te brengen. Kent de
 * browser :has() niet, dan verandert er niets en staat de mockup er gewoon
 * kleiner in.
 */

@media (max-width: 720px) {
  .product-gallery:has(.cmpl-preview-tile--mockup) {
    padding-left: 12px;
    padding-right: 12px;
  }

  .cmpl-product-preview:has(.cmpl-preview-tile--mockup) {
    margin-left: -6px;
    margin-right: -6px;
  }
}

/*
 * Een scène heeft zijn eigen achtergrond en zijn eigen schaduw. De lijst van de
 * previewtegel eromheen maakt er een lijst om een lijst van.
 */
.cmpl-preview-tile--mockup {
  background: none;
  border: 0;
  box-shadow:none;
  overflow: hidden;
  border-radius: var(--r-vlak);
}

.cmpl-preview-tile--mockup .cmpl-preview-tile__render {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Het generieke WooCommerce-plaatje weg zodra wij zelf een beeld tonen.
 *
 * Deze regel stond als <style> midden in de HTML van het previewblok. Daar deed
 * hij zijn werk, maar hij telde ook mee als tekst: de CSS-selector stond
 * letterlijk in de `textContent` van de sectie, en dat is wat een schermlezer
 * voorleest en een zoekmachine indexeert.
 */
.cmpl-product-preview ~ a.product-gallery__main,
.cmpl-product-preview + a.product-gallery__main { display: none; }