/* Eén gedeelde catalogusopmaak voor alle meters en diepvries-schappen. */
.catalog-main { padding: 28px 16px 48px; }
.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.product-card, .product-card button, .card-text { min-width: 0; }
.product-card button { border-radius: 14px; }
.card-text { width: 100%; gap: 4px; padding: 12px 12px 10px; overflow-wrap: anywhere; }
.card-text strong { font-size: 14px; line-height: 1.35; letter-spacing: -.015em; margin: 0; }
.card-text small { font-size: 11px; line-height: 1.4; letter-spacing: .025em; }
.card-text > span { font-size: 12px; line-height: 1.4; }
.card-text small:empty { display: none; }
.card-action { min-height: 44px; align-items: center; gap: 6px; padding: 10px 12px 12px; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.card-action > span { flex-shrink: 0; }
.product-card .product-visual { height: 150px; background: #fff; }
.product-card .product-visual img { padding: 12px; }
.filters { flex-wrap: wrap; overflow-x: visible; gap: 8px; }
.filter { min-height: 42px; padding: 9px 12px; }
.search-box, .search-box input { min-width: 0; }
/* Uniforme afstand tussen detailblokken en tussen opeenvolgende regels. */
.dialog-product { padding-bottom: 24px; }
.dialog-product > .product-visual-large { height: 250px; background: #fff; }
.dialog-heading, .dialog-product > section { margin: 0 20px; }
.dialog-heading { padding: 20px 0; }
.dialog-heading h2 { line-height: 1.2; overflow-wrap: anywhere; }
.dialog-heading p { line-height: 1.5; }
.dialog-product > section { padding: 20px 0 0; }
.dialog-product > section > h3 { margin: 0 0 9px; }
.dialog-product > section > p { margin: 0; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.dialog-product > section > p + p { margin-top: 6px; }
.dialog-product > section > .allergen-list + p { margin-top: 8px; }
.dialog-product > section > :last-child { margin-bottom: 0; }
.image-disclaimer { margin: 8px 20px 0; }
.nutrition-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nutrition-table th, .nutrition-table td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.nutrition-table th { text-align: left; font-weight: 500; }
.nutrition-table td { text-align: right; white-space: nowrap; }
.packaging-variants figure { margin: 0; }
.packaging-variants img { display: block; width: 100%; max-height: 220px; object-fit: contain; background: #fff; }
.packaging-variants figcaption { margin-top: 8px; font-weight: 600; }
@media (max-width: 639px) {
 .catalog-main { padding-inline: 10px; }
 .card-text { padding: 9px 7px 7px; }
 .card-text strong { font-size: 13px; hyphens: none; text-wrap: balance; word-break: normal; }
 .card-text small { font-size: 10px; }
 .card-text > span { font-size: 10px; }
 .card-action { padding: 8px 7px; font-size: 10px; gap: 3px; }
 .product-card .product-visual { height: 120px; }
 .product-card .product-visual img { padding: 8px; }
}
@media (min-width: 640px) {
 .catalog-main { padding: 36px 28px 64px; }
 .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
 .product-card .product-visual { height: 180px; }
 .product-card .product-visual img { padding: 16px; }
 .card-text { padding: 12px 14px 10px; }
 .card-text strong { font-size: 16px; }
 .card-text small { font-size: 12px; }
 .card-text > span { font-size: 13px; }
 .card-action { padding: 10px 14px 14px; font-size: 13px; }
}
@media (min-width: 920px) {
 .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 540px) and (max-width: 639px) {
 .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 359px) { .card-text strong { font-size: 12px; } }
/* Align the smaller chive packshot with Samson naturel. */
img[src*="samson-bieslook.webp"]{transform:scale(1.14,1.10);transform-origin:center}
img[src*="shefa-roomkaas-olijven-150g.png"]{transform:scale(1.31);transform-origin:center}
img[src*="amstelvelder-gerookte-gouda-125g.png"]{transform:scale(.88,.93);transform-origin:center}
img[src*="mini-geit-naturel-gelijk.png"]{transform:scaleY(1.08);transform-origin:center}

/* Approved detail labels: keep existing sizes, spacing and product headings. */
.dialog-product > section > h3 {
  color: var(--green-700, #276c58);
  font-weight: 700;
}

/* Apply the label/value size contrast only to actual field rows. */
.dialog-product > section > p.detail-field-row {
  font-size: 15px;
}

.dialog-product .detail-field-label {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: normal;
  color: var(--green-700, #276c58);
  text-transform: none;
}

.dialog-product > section > h3 {
  letter-spacing: normal;
}

/* Allergen emphasis changes weight only, never the surrounding text size/font. */
.dialog-product section p strong:not(.detail-field-label),
.dialog-product section p b,
.dialog-product .allergen {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: 700;
}

/* Allergen lists use red text without a badge background or border. */
.dialog-product .allergen-list {
  display: block;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.6;
}
.dialog-product .allergen {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--danger, #a43b2e);
}

/* Allergens in the ingredient sentence match the red allergen list. */
.dialog-product .ingredient-allergen {
  color: var(--danger, #a43b2e);
}

/* Consistent punctuation with a small gap after each section heading. */
.dialog-product > section > h3::after {
  content: ":";
  margin-left: 0.12em;
  position: relative;
  top: -0.05em;
}

/* The diaeresis in Ingrediënten raises the word optically; lift its colon to match. */
.dialog-product > section > h3.ingredient-heading::after {
  top: -0.1em;
}

/* Give the two narrow Elite Blondie wrappers more room in the product cards. */
#product-grid .product-visual:has(img[src$="product-92-web.jpg"]),
#product-grid .product-visual:has(img[src$="product-95-web.jpg"]) {
  height: 180px;
}

/* Black & White has more white margin in its square packshot than the white bar. */
#product-grid .product-visual:has(img[src$="elite-black-white-biscuit-snapshot.png"]) img,
.dialog-product .product-visual-large:has(img[src$="elite-black-white-biscuit-snapshot.png"]) img {
  transform: scale(1.25);
  transform-origin: center;
}

/* Give the slim coffee-mousse wrapper the same taller photo area as the Blondie bars. */
#product-grid .product-visual:has(img[src$="elite-coffee-mousse-snapshot.png"]) {
  height: 260px;
}
#product-grid .product-visual:has(img[src$="elite-coffee-mousse-snapshot.png"]) img {
  transform: scale(1.25);
  transform-origin: center;
}
@media (max-width: 639px) {
  #product-grid .product-visual:has(img[src$="product-92-web.jpg"]),
  #product-grid .product-visual:has(img[src$="product-95-web.jpg"]) {
    height: 140px;
  }
  #product-grid .product-visual:has(img[src$="elite-coffee-mousse-snapshot.png"]) {
    height: 200px;
  }
}