/* KOM shop — mobiele grid-fix voor WooCommerce/Divi productoverzichten.

   De overzichtspagina's (Divi Theme Builder) zitten in een .kom-grid wrapper.
   Op telefoon gingen de kaarten naar halve breedte, links uitgelijnd, met een
   lege goot rechts. Oorzaak: Divi's eigen regel
   .et-db #et-boc .et-l .et_pb_shop ul.products.columns-X li.product { width:48% }
   (1 ID = #et-boc) wint van .kom-grid's width:100%, terwijl de grid-track wel
   volle breedte is. Resultaat: kaart vult maar 48% van de track.

   Fix: forceer op telefoon een echte 2-koloms grid en laat li/anchor/img/titel
   de track vullen. De selectoren gebruiken TWEE ID's (#page-container #et-boc),
   dus strikt hogere specificiteit dan Divi's regel -> winnen ongeacht de
   laadvolgorde van Divi's dynamische theme-builder CSS. */

@media (max-width: 980px) {
  #page-container #et-boc .kom-grid ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #page-container #et-boc .kom-grid ul.products li.product {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
  }

  /* Link in normale block-flow: beeld/titel/prijs/CTA stapelen en de kaart
     groeit mee (li heeft overflow:hidden voor de afgeronde hoek). */
  #page-container #et-boc .kom-grid ul.products li.product > a,
  #page-container #et-boc .kom-grid ul.products li.product a.woocommerce-LoopProduct-link {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  #page-container #et-boc .kom-grid ul.products li.product a img,
  #page-container #et-boc .kom-grid ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
  }

  /* Titel: vaste themahoogte (59.5px) los, anders loopt een 3-regelige titel
     over de prijs heen. height auto + line-clamp uit -> box groeit mee. */
  #page-container #et-boc .kom-grid ul.products li.product .woocommerce-loop-product__title,
  #page-container #et-boc .kom-grid ul.products li.product h2,
  #page-container #et-boc .kom-grid ul.products li.product h3 {
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    -webkit-line-clamp: none !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    /* Strakker tekstblok: minder lucht rond de titel. */
    padding: 12px 14px 2px !important;
  }

  /* Prijs donkerder (brand-plum) voor beter contrast/leesbaarheid. */
  #page-container #et-boc .kom-grid ul.products li.product .price {
    padding: 0 14px !important;
    font-size: 14px !important;
    color: #3b1633 !important;
  }

  /* Subtiele, chique "Bekijk" CTA onder de prijs. Via .price::after omdat het
     thema op de kaart-link al een absolute ::after-overlay gebruikt. De hele
     kaart is al een link; dit is puur een visuele aanwijzing. */
  #page-container #et-boc .kom-grid ul.products li.product .price::after {
    content: "Bekijk \2192";
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 8px 0 14px !important;
    font-family: "Lato", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #b8985a !important;
  }

  /* Subcategorie-tegels: nette, uitgelijnde 2-koloms grid met gelijke
     rijhoogtes en gecentreerde labels (was: vaste 117px-kolommen + verticaal
     gecentreerd -> smalle tegels, te veel wrap en verticale versprong). */
  #page-container #et-boc .kom-cat-tabs ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 12px !important;
  }

  #page-container #et-boc .kom-cat-tabs ul.products li.product-category {
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  #page-container #et-boc .kom-cat-tabs ul.products li.product-category > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 100% !important;
    min-height: 60px !important;
  }

  /* Labels mogen wrappen i.p.v. afkappen, maar woorden blijven heel
     (geen word-break, anders "Borrelhapj-es"). */
  #page-container #et-boc .kom-cat-tabs ul.products li.product-category h2,
  #page-container #et-boc .kom-cat-tabs ul.products li.product-category .woocommerce-loop-category__title {
    margin: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    width: auto !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
}