/* ==========================================================================
   Winkelwagen en afrekenen
   Ruimte aan de zijkanten, zodat tekst en bedragen niet tegen de rand
   van het scherm plakken. MOBILE FIRST.
   ========================================================================== */

/* De pagina zelf. Het !important staat er omdat de blokthema-opmaak van
   deze twee pagina's over de volle breedte gaat; hier willen we dat niet. */
.woocommerce-cart .wp-site-blocks > main,
.woocommerce-checkout .wp-site-blocks > main,
.woocommerce-cart main.wp-block-group,
.woocommerce-checkout main.wp-block-group,
.woocommerce-cart main.wp-block-post-content,
.woocommerce-checkout main.wp-block-post-content {
	box-sizing: border-box;
	padding-left: var(--bc-gutter, 16px) !important;
	padding-right: var(--bc-gutter, 16px) !important;
}

/* De blokken van WooCommerce mogen niet breder worden dan die ruimte. */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout,
.wc-block-components-sidebar-layout {
	box-sizing: border-box;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Bedragen in de rechterkolom afgeknipt zien worden is lelijk en
   verwarrend; ze mogen nooit over twee regels of half weg vallen. */
.wc-block-cart-item__total,
.wc-block-components-order-summary-item__total-price,
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
	white-space: nowrap;
}

/* De regels in de winkelwagen: de tekstkolom mag krimpen, zodat het
   bedrag rechts altijd past. */
.wc-block-cart-items__row .wc-block-cart-item__wrap {
	min-width: 0;
}

.wc-block-cart-item__prices,
.wc-block-components-product-name {
	overflow-wrap: anywhere;
}

/* De knop onderaan loopt netjes mee met dezelfde marge. */
.wc-block-cart__submit-container,
.wc-block-components-checkout-place-order-button {
	box-sizing: border-box;
}


/* ==========================================================================
   De lege winkelwagen — "Nieuw in de winkel"

   WooCommerce legt hier een raster van drie kolommen neer, maar geeft de
   losse producten daarbinnen een breedte van 25%. Elk product kreeg zo
   76 px in een kolom van 304, en de knoptekst viel letter voor letter
   uiteen. Hieronder vult elk product gewoon zijn eigen kolom.
   ========================================================================== */

.wc-block-grid__products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-grid__products .wc-block-grid__product {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center;
}

.wc-block-grid__product .wc-block-grid__product-title,
.wc-block-grid__product .wc-block-grid__product-price,
.wc-block-grid__product .wc-block-grid__product-link {
	word-break: normal;
	overflow-wrap: break-word;
}

.wc-block-grid__product .wc-block-grid__product-title {
	font-size: 14px;
	line-height: 1.35;
	color: var(--bc-body, #4A3525);
}

.wc-block-grid__product .wc-block-grid__product-image img {
	width: 100%;
	height: auto;
}

/* De knop eronder in dezelfde vorm als de rest van de site. */
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto !important;
	height: auto !important;
	min-height: 44px;
	padding: 12px 20px !important;
	border: 0 !important;
	border-radius: var(--bc-radius-pill, 99px) !important;
	background: var(--bc-oranje, #E87722) !important;
	color: var(--bc-wit, #FFFFFF) !important;
	font-family: var(--bc-font, sans-serif);
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	word-break: normal !important;
	overflow-wrap: normal;
}

.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .wp-block-button__link:focus-visible {
	background: var(--bc-oranje-hover, #D0630F) !important;
	color: var(--bc-wit, #FFFFFF) !important;
}

/* De "Winkelwagen bekijken"-link hoort hier evenmin thuis. */
.wc-block-grid__product .added_to_cart {
	display: none !important;
}


/* ==========================================================================
   Opschalen naar grotere schermen
   ========================================================================== */

@media (min-width: 700px) {

	.woocommerce-cart .wp-site-blocks > main,
	.woocommerce-checkout .wp-site-blocks > main,
	.woocommerce-cart main.wp-block-group,
	.woocommerce-checkout main.wp-block-group,
	.woocommerce-cart main.wp-block-post-content,
	.woocommerce-checkout main.wp-block-post-content {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.woocommerce-cart .wp-block-woocommerce-cart,
	.woocommerce-checkout .wp-block-woocommerce-checkout {
		max-width: 1120px;
	}
}