/* Vislokaal 2026: één schaal voor de hele site (Claude, 17 oktober 2026, avond).
 * Gemeten bij Coolblue, Jumbo, HelloFresh, Picnic, Deutsche See, Otto en Zalando (zie grid/summary.md in het project):
 * inhoud maximaal ~1250px breed, koppen H1 ~40px (mobiel ~30), productnaam ~30, H2 ~28, knoppen 40 tot 48px met 16px tekst.
 * Onze templates zaten daar ruim boven (H1 tot 72px, knoppen tot 64px) en elk op een eigen breedte (1180 tot 1560px).
 *
 * Grid: alles op de breedte van header, footer en categorie: 1284px met 16px zijkant = 1252px inhoud.
 * Breakpoints: mobiel tot 767, tablet 768 tot 980, desktop vanaf 981 (de grens van Divi en het menu).
 * Schaal (desktop / tablet / mobiel):
 *   Hero home 48 / 40 / 34   Paginatitel 40 / 34 / 30   Productnaam 32 / 30 / 26
 *   Sectiekop 28 / 26 / 24   Kleine kop 22 / 20 / 20    Knoppen 48px hoog, 16px tekst
 * Uitzetten: in inc/chrome.php de regel met 'vl26-scale' weghalen. */

/* ---------- Grid ---------- */
.vl26-pg .vl26-pg-wrap:not(.vl26-pg-wrap--narrow) { max-width: 1284px !important; }
.vl26-ht .vl26-ht-wrap { max-width: 1284px !important; padding-left: 16px !important; padding-right: 16px !important; }
.vl26r-wrap { max-width: 1284px !important; padding-left: 16px !important; padding-right: 16px !important; }
body.vl26-cart #main-content .et_pb_row { max-width: 1252px !important; }
body.vl26-thankyou #main-content .et_pb_row:not(.checkout-hide) { max-width: 1252px !important; }
@media (min-width: 981px) {
	#main-content.vl26-pdp-main .vl26-pdp-wrap,
	#main-content.vl26-pdp-main .woocommerce-notices-wrapper:not(:empty) { max-width: 1284px !important; padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------- Koppen: desktop ---------- */
#main-content.vl26-hm .vl26-hh__h1,
#main-content.vl26-hm .vl26-hm-h1 { font-size: 48px !important; line-height: 1.08 !important; }

body.vl26-cat #left-area .woocommerce-products-header h1.vl-cat-h1,
body.vl26-cart .vl26-cart-head h1,
.vl26-pg .vl26-pg-h1, .vl26-pg .vl26-pg-whero__card .vl26-pg-h1, .vl26-pg .vl26-sv-hero .vl26-pg-h1, .vl26-pg--feestdagen .vl26-fd-hero .vl26-pg-h1,
.vl26-ht .vl26-ht-hero__title,
.vl26r .vl26r-h1,
body.vl26-thankyou .vl26-ty-hero h1 { font-size: 40px !important; line-height: 1.15 !important; }

#main-content.vl26-pdp-main .vl26-pdp-h1 { font-size: 32px !important; line-height: 1.2 !important; }

#main-content.vl26-hm .vl26-hm-h2, #main-content.vl26-hm .vl26-hm-h2--left, #main-content.vl26-hm .vl26-hv__h3,
body.vl26-cat #left-area .vl26-h2,
#main-content.vl26-pdp-main .vl26-pdp-h2,
.vl26-pg .vl26-pg-h2, .vl26-pg .vl26-pg-display__title,
body.vl26-cart .vl26-faq__head h2, body.vl26-cart .vl26-compleet h2, body.vl26-cart .vl26-koelbox h2,
.vl26-ht .vl26-ht-h2, .vl26-ht .vl26-ht-display, .vl26-ht .vl26-ht-prose h2,
.vl26r .vl26r-h2,
body.vl26-thankyou .vl26-ty-head h2, body.vl26-thankyou .vl-cook > h2 { font-size: 28px !important; line-height: 1.2 !important; }

#main-content.vl26-hm .vl26-hm-h3,
body.vl26-cat #left-area .vl26-portions__title, body.vl26-cat #left-area .vl26-bundle__title,
#main-content.vl26-pdp-main .vl26-pdp-rcp__title,
.vl26-pg .vl26-sv-area__title, .vl26-pg .vl26-sv-ask__title, .vl26-pg .vl26-pg-menu__title, .vl26-pg .vl26-fd-card__title,
body.vl26-thankyou .woocommerce-order-details__title, body.vl26-thankyou .vl26-ty-account h2 { font-size: 22px !important; line-height: 1.25 !important; }

/* Kaartkoppen in winkelmand en checkout */
body.vl26-cart .cart_totals .vl26-sum-title,
body.vl26-checkout .checkout-right .vis-cart-title { font-size: 24px !important; }
body.vl26-checkout .checkout-left .vis_shipping_title { font-size: 28px !important; }

/* Prijzen en cijfers */
#main-content.vl26-pdp-main .vl26-pdp-price__now { font-size: 28px !important; }
#main-content.vl26-pdp-main .vl26-pdp-card__name { font-size: 20px !important; line-height: 1.25 !important; }
#main-content.vl26-pdp-main .vl26-pdp-card__price { font-size: 20px !important; }
#main-content.vl26-pdp-main .vl26-pdp-rev__num { font-size: 32px !important; }
body.vl26-cart .cart_totals tr.order-total td, body.vl26-cart .cart_totals tr.order-total td strong { font-size: 24px !important; }

/* ---------- Knoppen: 48px hoog, 16px tekst ---------- */
#main-content.vl26-hm .vl26-hh__btn,
#main-content.vl26-hm .vl26-hm-btn,
#main-content.vl26-pdp-main .vl26-pdp-btn--buy,
body.vl26-cart .cart_totals .wc-proceed-to-checkout a.checkout-button,
body.vl26-cart .vl26-sticky__btn,
body.vl26-cart .vl26-empty__link,
body.vl26-checkout .vis_shipping_footer a.next_step,
body.vl26-checkout #place_order,
.vl26r-actions .vl26r-btn,
body.vl26-thankyou .vl26-ty-btn, body.vl26-thankyou .vl26-ty-account__btn { min-height: 48px !important; height: auto !important; font-size: 16px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.vl26-pg .vl26-pg-btn, .vl26-ht .vl26-ht-btn { min-height: 48px !important; font-size: 16px !important; }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
	#main-content.vl26-hm .vl26-hh__h1, #main-content.vl26-hm .vl26-hm-h1 { font-size: 40px !important; }
	body.vl26-cat #left-area .woocommerce-products-header h1.vl-cat-h1,
	body.vl26-cart .vl26-cart-head h1,
	.vl26-pg .vl26-pg-h1, .vl26-pg .vl26-pg-whero__card .vl26-pg-h1, .vl26-pg .vl26-sv-hero .vl26-pg-h1, .vl26-pg--feestdagen .vl26-fd-hero .vl26-pg-h1,
	.vl26-ht .vl26-ht-hero__title,
	.vl26r .vl26r-h1,
	body.vl26-thankyou .vl26-ty-hero h1 { font-size: 34px !important; }
	#main-content.vl26-pdp-main .vl26-pdp-h1 { font-size: 30px !important; }
	#main-content.vl26-hm .vl26-hm-h2, #main-content.vl26-hm .vl26-hm-h2--left, #main-content.vl26-hm .vl26-hv__h3,
	body.vl26-cat #left-area .vl26-h2,
	#main-content.vl26-pdp-main .vl26-pdp-h2,
	.vl26-pg .vl26-pg-h2, .vl26-pg .vl26-pg-display__title,
	body.vl26-cart .vl26-faq__head h2, body.vl26-cart .vl26-compleet h2, body.vl26-cart .vl26-koelbox h2,
	.vl26-ht .vl26-ht-h2, .vl26-ht .vl26-ht-display, .vl26-ht .vl26-ht-prose h2,
	.vl26r .vl26r-h2,
	body.vl26-thankyou .vl26-ty-head h2, body.vl26-thankyou .vl-cook > h2 { font-size: 26px !important; }
	#main-content.vl26-hm .vl26-hm-h3,
	body.vl26-cat #left-area .vl26-portions__title, body.vl26-cat #left-area .vl26-bundle__title,
	#main-content.vl26-pdp-main .vl26-pdp-rcp__title,
	.vl26-pg .vl26-sv-area__title, .vl26-pg .vl26-sv-ask__title, .vl26-pg .vl26-pg-menu__title, .vl26-pg .vl26-fd-card__title,
	body.vl26-thankyou .woocommerce-order-details__title, body.vl26-thankyou .vl26-ty-account h2 { font-size: 20px !important; }
	#main-content.vl26-pdp-main .vl26-pdp-rev__num { font-size: 28px !important; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 767px) {
	#main-content.vl26-hm .vl26-hh__h1, #main-content.vl26-hm .vl26-hm-h1 { font-size: 34px !important; line-height: 1.1 !important; }
	body.vl26-cat #left-area .woocommerce-products-header h1.vl-cat-h1,
	body.vl26-cart .vl26-cart-head h1,
	.vl26-pg .vl26-pg-h1, .vl26-pg .vl26-pg-whero__card .vl26-pg-h1, .vl26-pg .vl26-sv-hero .vl26-pg-h1, .vl26-pg--feestdagen .vl26-fd-hero .vl26-pg-h1,
	.vl26-ht .vl26-ht-hero__title,
	.vl26r .vl26r-h1,
	body.vl26-thankyou .vl26-ty-hero h1 { font-size: 30px !important; }
	#main-content.vl26-pdp-main .vl26-pdp-h1 { font-size: 26px !important; }
	#main-content.vl26-hm .vl26-hm-h2, #main-content.vl26-hm .vl26-hm-h2--left, #main-content.vl26-hm .vl26-hv__h3,
	body.vl26-cat #left-area .vl26-h2,
	#main-content.vl26-pdp-main .vl26-pdp-h2,
	.vl26-pg .vl26-pg-h2, .vl26-pg .vl26-pg-display__title,
	body.vl26-cart .vl26-faq__head h2, body.vl26-cart .vl26-compleet h2, body.vl26-cart .vl26-koelbox h2,
	.vl26-ht .vl26-ht-h2, .vl26-ht .vl26-ht-display, .vl26-ht .vl26-ht-prose h2,
	.vl26r .vl26r-h2,
	body.vl26-thankyou .vl26-ty-head h2, body.vl26-thankyou .vl-cook > h2 { font-size: 24px !important; }
	body.vl26-checkout .checkout-left .vis_shipping_title { font-size: 24px !important; }
	#main-content.vl26-pdp-main .vl26-pdp-price__now { font-size: 26px !important; }
}

/* Recept op tablet (768 tot 980): de foto bovenaan niet meer zo hoog als het scherm */
@media (min-width: 768px) and (max-width: 980px) {
	.vl26r-hero__media { aspect-ratio: 2 / 1 !important; }
}


/* ---------- Productkaarten in categorie en zoeken (Claude, 17 oktober 2026, avond) ----------
 * Zoals de grote shops (project: grid-breakpoints-vislokaal.md): vanaf 1200 breed vier kaarten per rij van ongeveer 275 tot 300 breed
 * (Deutsche See en Jumbo doen hetzelfde), productnaam 18px (Heading/H5 in Figma) en prijs 22px (Price/Card).
 * Filterbalk en producten zijn even breed als de header (1252), zodat de pagina niet meer ingeknepen lijkt.
 * Mobiel blijft zoals de filtermodule het doet (2 per rij, naam 16px). De knop op de kaart staat in atc.css. */
@media (min-width: 768px) {
	.allproducts .product .wrap-inner .woocommerce-loop-product__link .woocommerce-loop-product__title { font-size: 18px !important; line-height: 1.25 !important; }
	.allproducts .product .wrap-inner .fusion-price-rating .price,
	.allproducts .product .wrap-inner .fusion-price-rating .price .amount,
	.allproducts .product .wrap-inner .fusion-price-rating .price bdi { font-size: 22px !important; line-height: 1.15 !important; }
}
@media (min-width: 981px) {
	body.vl26-cat { --v26-gutter: 0px; }
	body.vl-filters.tax-product_cat #left-area .vlf,
	body.vl-filters.tax-product_cat #left-area .allproducts,
	body.search-results #left-area .allproducts { max-width: none !important; width: auto !important; margin-left: -12px !important; margin-right: -12px !important; }
	body.search-results #left-area .allproducts { margin-bottom: 0 !important; }
	body.search-results #left-area .allproducts > .product { padding: 0 12px 24px !important; }
}
@media (min-width: 1200px) {
	body.vl-filters.tax-product_cat #left-area .allproducts > .product,
	body.search-results #left-area .allproducts > .product { width: 25% !important; max-width: 25% !important; flex: 0 0 25% !important; }
	body.vl-filters.tax-product_cat #left-area .allproducts > .product > .wrap-inner,
	body.search-results #left-area .allproducts > .product > .wrap-inner { padding-left: 24px !important; padding-right: 24px !important; }
}