/* ==========================================================================
   Productcatalogus (templates/products_abc, catalog_category, catalog_product).
   Alleen op die pagina's geladen (SiteController: extraCss). Bouwt voort op de
   projectopmaak van het thema; de accentkleur komt uit --hm-accent (layout).
   ========================================================================== */

.catalog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 4px; }

.catalog-price { font-size: 16px; line-height: 1.4; color: #333; }
.catalog-price strong { font-size: 18px; color: var(--hm-accent-text, var(--hm-accent, #333)); }
.catalog-price del { color: #999; font-size: 14px; margin-right: 2px; }
.catalog-price--request { font-style: italic; color: #666; }
.catalog-from, .catalog-unit { font-size: 13px; color: #777; }

.catalog-stock { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; }
.catalog-stock--ok { background: #e6f4ea; color: #1e6b34; }
.catalog-stock--warn { background: #fff4e0; color: #8a5300; }
.catalog-stock--off { background: #f1f1f1; color: #666; }

/* Productkaart in de categorie. Het thema geeft .recent-work .item een vaste
   maximale hoogte met overflow: hidden (alleen een foto); hier staan naam en
   prijs onder de foto, dus die grens vervalt. Het hover-vlak (.img-caption,
   position: absolute; height: 100%) blijft binnen de fotolink. */
.catalog-products .item { max-height: none; overflow: visible; margin-bottom: 26px; }
.catalog-products .item > a:first-child { position: relative; overflow: hidden; }
/* Kaarten zijn niet even hoog (prijs over één of twee regels): elke rij van vier
   begint links, anders blijft een kaart achter een hogere hangen. */
@media only screen and (min-width: 768px) {
  .catalog-products .item:nth-child(4n+1) { clear: left; }
}
.catalog-card-title { margin: 10px 0 2px; font-size: 16px; line-height: 1.3; }
.catalog-card-title a { color: inherit; text-decoration: none; }
.catalog-card-title a:hover { text-decoration: underline; }

/* Prijsblok op de productpagina */
.catalog-box { padding: 16px 18px; border: 1px solid #e5e5e5; border-radius: 6px; background: #fafafa; }
.catalog-box .catalog-price strong { font-size: 24px; }
.catalog-box .button { margin-top: 10px; }
.catalog-sku { margin: 6px 0 0; font-size: 13px; color: #777; }
.catalog-summary { font-size: 16px; line-height: 1.6; }

/* Zelfde breedte als de projectfoto's bij een raster dat niet vol is */
.catalog-products .item img.pic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }