/* ==========================================================================
   WooCommerce in huisstijl
   MOBILE FIRST: basis = 390px, opschalen met min-width.

   WooCommerce gebruikt twee soorten opmaak door elkaar: de klassieke
   (ul.products) en de nieuwere op blokken (wc-block-…). Beide staan
   hieronder, zodat het werkt ongeacht welke een pagina toevallig gebruikt.
   ========================================================================== */


/* ==========================================================================
   0. GRONDREGELS VOOR KNOPPEN OP PRODUCTKAARTEN

   Twee dingen moeten hier tegelijk kloppen, en ze bijten elkaar snel:

   1. De knop mag niet in de breedte inklappen. Gebeurt dat wel, dan breekt
      de tekst per letter af.
   2. De knop mag niet in de hoogte meegroeien. De productkaart is een
      kolom, dus alles wat hier flex-grow krijgt, rekt verticaal uit tot
      een blok of zelfs een cirkel.

   Daarom: vaste hoogte via min-height, volle breedte van de kaart, en
   uitdrukkelijk GEEN groei. De regel margin-top:auto duwt elke knop naar
   de onderkant van zijn kaart, zodat ze over een hele rij op één lijn
   staan, ook als de ene titel twee regels loopt en de andere één.
   ========================================================================== */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.wc-block-grid__product-add-to-cart .button,
.wc-block-components-product-button__button,
.wp-block-woocommerce-product-button a,
.wp-block-woocommerce-product-button button,
[class*="product-button"] a,
[class*="product-button"] button {
	/* Nooit per letter afbreken. */
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
	white-space: normal;

	/* Nooit uitrekken in de hoogte. */
	flex: 0 0 auto;
	align-self: stretch;
	height: auto;
	box-sizing: border-box;
}

/* De omhulsels waar die knoppen in zitten: volle breedte, geen groei. */
.wc-block-grid__product-add-to-cart,
.wc-block-components-product-button,
.wp-block-woocommerce-product-button,
.wp-block-woocommerce-empty-cart-block [class*="product-button"] {
	display: block;
	width: 100%;
	min-width: 0;
	flex: 0 0 auto;
	margin-top: auto;
	text-align: left;
}

/* Rasters en kaarten netjes houden. */
.wc-block-grid__products,
.wp-block-woocommerce-product-template,
.wc-block-grid__product,
.wp-block-woocommerce-product-template > li,
.wc-block-grid__product > *,
.wp-block-woocommerce-product-template > li > * {
	min-width: 0;
}

.wc-block-grid__product,
.wp-block-woocommerce-product-template > li {
	align-items: stretch;
	word-break: normal;
	overflow-wrap: break-word;
}


/* ==========================================================================
   1. Paginabreedte en koppen
   ========================================================================== */

.woocommerce main,
.woocommerce-page main {
	padding-left: 0;
	padding-right: 0;
}

.woocommerce-products-header,
.woocommerce-products-header__title,
.woocommerce-loop-category__title {
	padding-left: var(--bc-gutter);
	padding-right: var(--bc-gutter);
}

.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
	margin: 20px 0 8px;
	font-size: var(--bc-fs-kop);
	font-weight: 700;
	color: var(--bc-bruin);
}

.term-description,
.woocommerce-products-header p {
	padding: 0 var(--bc-gutter);
	font-size: var(--bc-fs-body-plus);
	color: var(--bc-body);
}

.woocommerce-result-count,
.woocommerce-ordering {
	padding: 0 var(--bc-gutter);
	font-size: var(--bc-fs-meta);
	color: var(--bc-meta);
}

.woocommerce-ordering select {
	font-family: var(--bc-font);
	font-size: var(--bc-fs-meta);
	border: 1px solid var(--bc-rand);
	border-radius: var(--bc-radius-pill);
	padding: 8px 12px;
	color: var(--bc-body);
	background: var(--bc-wit);
}


/* ==========================================================================
   2. Productraster
   ========================================================================== */

.woocommerce ul.products,
.wc-block-grid__products,
.wp-block-woocommerce-product-template {
	list-style: none;
	margin: 16px 0 0;
	padding: 0 var(--bc-gutter);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 12px;
	align-items: stretch;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template > li {
	width: auto;
	margin: 0;
	float: none;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	/* De kaart vult de volle hoogte van zijn vak, zodat de knop onderaan
	   kan uitlijnen met die van de buurkaart. */
	height: 100%;
}

.woocommerce ul.products li.product img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--bc-radius-klein);
	border: 1px solid var(--bc-rand);
	margin: 0 0 4px;
	background: var(--bc-creme);
	flex: 0 0 auto;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wc-block-components-product-name,
.wp-block-woocommerce-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title a {
	padding: 0;
	margin: 0;
	font-size: var(--bc-fs-body);
	font-weight: 700;
	line-height: 1.3;
	color: var(--bc-bruin);
	text-align: left;
	text-decoration: none;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price,
.wc-block-components-product-price {
	margin: 0;
	font-size: var(--bc-fs-body);
	font-weight: 400;
	color: var(--bc-meta);
	text-align: left;
}

.woocommerce ul.products li.product .price del,
.wc-block-grid__product-price del {
	color: var(--bc-meta);
	opacity: 0.7;
	margin-right: 4px;
}

.woocommerce ul.products li.product .price ins,
.wc-block-grid__product-price ins {
	text-decoration: none;
	font-weight: 700;
	color: var(--bc-oranje-tekst);
}

/* De knop zelf: pill met vaste hoogte, onderaan de kaart. */
.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .button,
.wc-block-components-product-button__button,
.wp-block-woocommerce-product-button a,
.wp-block-woocommerce-product-button button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--bc-tap);
	margin: auto 0 0;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-oranje);
	color: var(--bc-wit);
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce ul.products li.product .button:hover,
.wc-block-grid__product-add-to-cart .button:hover,
.wc-block-components-product-button__button:hover,
.wp-block-woocommerce-product-button a:hover,
.wp-block-woocommerce-product-button button:hover {
	background: var(--bc-oranje-hover);
	color: var(--bc-wit);
}

/* "Winkelwagen bekijken" verschijnt ná het toevoegen, onder de knop.
   Een tweede oranje pill zou de kaart overheersen, dus dit wordt een
   bescheiden tekstlink. */
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product a.added_to_cart {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 6px 0 0;
	padding: 2px 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--bc-oranje-tekst);
	font-size: var(--bc-fs-meta);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: underline;
}

.woocommerce ul.products li.product .added_to_cart:hover {
	background: none;
	color: var(--bc-oranje);
}

/* Het ronde laadicoon dat WooCommerce op de knop zet, mag de hoogte
   niet veranderen. */
.woocommerce ul.products li.product .button.loading::after,
.woocommerce ul.products li.product .button.added::after {
	position: static;
	margin-left: 6px;
	font-size: 1em;
}


/* ==========================================================================
   3. Badges
   ========================================================================== */

.bc-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 3px 9px;
	border-radius: var(--bc-radius-pill);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--bc-wit);
}

.bc-badge--oranje { background: var(--bc-oranje); }
.bc-badge--blauw  { background: var(--bc-blauw); }

.woocommerce div.product .summary .bc-badge {
	position: static;
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 8px;
}

.woocommerce span.onsale,
.wc-block-grid__product-onsale {
	position: absolute;
	top: 8px;
	right: 8px;
	left: auto;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 3px 9px;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-blauw);
	border: 0;
	color: var(--bc-wit);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.5;
}


/* ==========================================================================
   4. Productpagina
   ========================================================================== */

.woocommerce div.product {
	padding: 0 var(--bc-gutter);
}

.woocommerce div.product .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin-bottom: 16px;
}

.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--bc-radius-kaart);
	border: 1px solid var(--bc-rand);
}

.woocommerce div.product .summary {
	width: 100%;
	float: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.woocommerce div.product .summary > * {
	max-width: 100%;
}

.woocommerce div.product .product_title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bc-bruin);
}

.woocommerce div.product p.price {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--bc-oranje-tekst);
}

.woocommerce div.product p.price del {
	font-weight: 400;
	color: var(--bc-meta);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: var(--bc-fs-body-plus);
	line-height: 1.55;
}

.woocommerce div.product form.cart {
	width: 100%;
	margin: 6px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.woocommerce div.product form.cart .quantity input.qty {
	width: 64px;
	min-height: var(--bc-tap);
	padding: 8px;
	text-align: center;
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body-plus);
	border: 1px solid var(--bc-rand);
	border-radius: var(--bc-radius-klein);
	color: var(--bc-body);
}

.woocommerce div.product .single_add_to_cart_button {
	flex: 1 1 180px;
	min-width: 180px;
	min-height: var(--bc-tap);
	padding: 12px 20px;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-oranje);
	color: var(--bc-wit);
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body-plus);
	font-weight: 700;
}

.woocommerce div.product .single_add_to_cart_button:hover {
	background: var(--bc-oranje-hover);
}

.woocommerce div.product .product_meta {
	font-size: var(--bc-fs-meta);
	color: var(--bc-meta);
}

/* Bundels: de lijst met inbegrepen producten. */
.woosb-wrap,
.woosb-products {
	width: 100%;
}

.woosb-product .woosb-title .woosb-name {
	font-weight: 700;
	color: var(--bc-bruin);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 24px 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom-color: var(--bc-rand);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--bc-creme);
	border-color: var(--bc-rand);
	border-radius: var(--bc-radius-mini) var(--bc-radius-mini) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body);
	font-weight: 700;
	color: var(--bc-bruin);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--bc-wit);
}


/* --- Beoordelingen -------------------------------------------------------
   Het tabblad "Beoordelingen": de uitleg hoe we controleren dat een
   beoordeling van een koper komt, de lijst en het formulier. Met #reviews
   ervoor, zodat deze regels winnen van de standaardopmaak van WooCommerce
   zonder !important. */

#reviews .woocommerce-Reviews-title {
	margin: 0 0 12px;
	font-family: var(--bc-font);
	font-size: var(--bc-fs-kop-klein);
	font-weight: 700;
	line-height: 1.3;
	color: var(--bc-bruin);
}

.bc-reviews-uitleg {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: var(--bc-radius-mini);
	background: var(--bc-creme);
	color: var(--bc-bruin);
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body);
	line-height: 1.5;
}

.bc-reviews-uitleg__icoon {
	flex: 0 0 auto;
	color: var(--bc-oranje-tekst);
}

#reviews .woocommerce-noreviews {
	margin: 0 0 18px;
	font-size: var(--bc-fs-body-plus);
	color: var(--bc-meta);
}

/* De lijst. Zonder profielfoto (zie inc/reviews.php), dus geen inspringing. */
#reviews #comments ol.commentlist {
	margin: 0 0 24px;
	padding: 0;
}

#reviews #comments ol.commentlist li .comment-text {
	margin: 0 0 12px;
	padding: 14px 16px 4px;
	border: 1px solid var(--bc-rand);
	border-radius: var(--bc-radius-klein);
}

#reviews .woocommerce-review__author {
	color: var(--bc-bruin);
}

#reviews .woocommerce-review__verified {
	font-style: normal;
	font-size: var(--bc-fs-meta);
	color: var(--bc-meta);
}

.woocommerce #reviews .star-rating,
.woocommerce #reviews p.stars a {
	color: var(--bc-oranje);
}

/* Het formulier, in dezelfde stijl als de formulieren elders op de site. */
#reviews #review_form #respond {
	font-family: var(--bc-font);
	color: var(--bc-body);
}

#reviews #review_form .comment-reply-title {
	display: block;
	margin: 4px 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bc-bruin);
}

#reviews #review_form #respond p {
	margin: 0 0 14px;
}

#reviews #review_form .comment-notes {
	font-size: var(--bc-fs-klein);
	color: var(--bc-meta);
}

#reviews #review_form #respond label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bc-bruin);
}

#reviews #review_form #respond .required {
	color: var(--bc-oranje-tekst);
}

#reviews #review_form #respond input[type="text"],
#reviews #review_form #respond input[type="email"],
#reviews #review_form #respond textarea,
#reviews #review_form #respond select {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--bc-rand);
	border-radius: 12px;
	background: var(--bc-wit);
	color: var(--bc-body);
	font-family: var(--bc-font);
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
}

#reviews #review_form #respond textarea {
	min-height: 120px;
	resize: vertical;
}

#reviews #review_form #respond input:focus,
#reviews #review_form #respond textarea:focus,
#reviews #review_form #respond select:focus {
	outline: none;
	border-color: var(--bc-oranje);
	box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.18);
}

#reviews #review_form #respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

#reviews #review_form #respond .comment-form-cookies-consent input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--bc-oranje);
}

#reviews #review_form #respond .comment-form-cookies-consent label {
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bc-body);
}

#reviews #review_form #respond .form-submit input#submit,
#reviews #review_form #respond .form-submit .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-oranje);
	color: var(--bc-wit);
	font-family: var(--bc-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

#reviews #review_form #respond .form-submit input#submit:hover,
#reviews #review_form #respond .form-submit input#submit:focus-visible {
	background: var(--bc-oranje-hover);
}


/* ==========================================================================
   5. Gerelateerde producten en kruisverkoop
   ========================================================================== */

.woocommerce .related > h2,
.woocommerce .up-sells > h2,
.woocommerce .cross-sells > h2,
.wc-block-grid__title {
	margin: 28px 0 0;
	padding: 0 var(--bc-gutter);
	font-size: var(--bc-fs-kop);
	font-weight: 700;
	color: var(--bc-bruin);
	text-align: left;
}

.woocommerce .related ul.products,
.woocommerce .up-sells ul.products,
.woocommerce .cross-sells ul.products {
	padding-left: 0;
	padding-right: 0;
}


/* ==========================================================================
   6. Lege winkelwagen
   ========================================================================== */

.wc-block-cart__empty-cart__title,
.cart-empty {
	font-size: var(--bc-fs-kop);
	font-weight: 700;
	color: var(--bc-bruin);
	text-align: center;
}

.wp-block-woocommerce-empty-cart-block h2,
.wp-block-woocommerce-empty-cart-block h3 {
	font-size: var(--bc-fs-kop);
	font-weight: 700;
	color: var(--bc-bruin);
	text-align: left;
	padding: 0 var(--bc-gutter);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products,
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-template {
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 12px;
}

.wp-block-woocommerce-empty-cart-block hr {
	border: 0;
	border-top: 1px solid var(--bc-rand);
	margin: 24px var(--bc-gutter);
}


/* ==========================================================================
   7. Winkelwagen, afrekenen en account
   ========================================================================== */

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
	padding: 0 var(--bc-gutter);
}

.woocommerce table.shop_table {
	border-color: var(--bc-rand);
	border-radius: var(--bc-radius-klein);
	font-size: var(--bc-fs-body-plus);
}

.woocommerce table.shop_table th {
	font-family: var(--bc-font);
	color: var(--bc-bruin);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3 {
	font-size: var(--bc-fs-kop);
	font-weight: 700;
	color: var(--bc-bruin);
}

/* Losse knoppen buiten de productkaarten: winkelwagen, afrekenen, account. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--bc-tap);
	padding: 12px 20px;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-oranje);
	color: var(--bc-wit);
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body-plus);
	font-weight: 700;
	line-height: 1.25;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover {
	background: var(--bc-oranje-hover);
	color: var(--bc-wit);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body-plus);
	padding: 12px;
	border: 1px solid var(--bc-rand);
	border-radius: var(--bc-radius-klein);
	color: var(--bc-body);
	max-width: 100%;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 16px var(--bc-gutter);
	border-top-color: var(--bc-oranje);
	border-radius: var(--bc-radius-klein);
	background: var(--bc-creme);
	font-size: var(--bc-fs-body-plus);
	color: var(--bc-body);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--bc-oranje);
}


/* ==========================================================================
   8. Opschalen
   ========================================================================== */

@media (min-width: 700px) {

	.woocommerce main,
	.woocommerce-page main {
		max-width: 1120px;
		margin: 0 auto;
	}

	.woocommerce ul.products,
	.wc-block-grid__products,
	.wp-block-woocommerce-product-template,
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products,
	.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px 24px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.woocommerce-products-header__title,
	.woocommerce-products-header .page-title,
	.term-description,
	.woocommerce-result-count,
	.woocommerce-ordering,
	.woocommerce div.product,
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout .woocommerce,
	.woocommerce-account .woocommerce,
	.wc-block-grid__title,
	.wp-block-woocommerce-empty-cart-block h2,
	.wp-block-woocommerce-empty-cart-block h3 {
		padding-left: 40px;
		padding-right: 40px;
	}

	.woocommerce-products-header__title,
	.woocommerce-products-header .page-title {
		font-size: 28px;
		margin-top: 32px;
	}

	.woocommerce div.product .woocommerce-product-gallery {
		width: 48%;
		float: left;
		margin-right: 4%;
	}

	.woocommerce div.product .summary {
		width: 48%;
		float: right;
	}

	.woocommerce div.product .product_title {
		font-size: 30px;
	}

	.woocommerce .related ul.products,
	.woocommerce .up-sells ul.products,
	.woocommerce .cross-sells ul.products {
		padding-left: 0;
		padding-right: 0;
	}
}