/* =========================================================
 * Casa Tre Pettirossi – winkel (productkaarten en productpagina)
 * ========================================================= */

/* Productkaarten: 4 naast elkaar, op tablet en mobiel 2 */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 16px !important;
	margin: 0 0 1.5em !important;
	padding: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: #fff;
	border-radius: var(--ctp-radius);
	box-shadow: var(--ctp-schaduw);
	padding: 12px 12px 18px !important;
	text-align: center;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--ctp-schaduw-hover); }
.woocommerce ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1; }

/* Label "Aanbieding" (plug-in ctp-functies) binnen de foto, linksboven, zoals op de oude site.
   Astra zet het label buiten de productlink, in .astra-shop-thumbnail-wrap; die wordt het ankerpunt. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { position: relative; }
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > span.onsale.ctp-onsale { top: 12px; left: 12px; }
@media (max-width: 600px) {
	.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > span.onsale.ctp-onsale { top: 8px; left: 8px; padding: 4px 8px; font-size: 10px; }
}
.woocommerce ul.products li.product img { border-radius: 12px; background: var(--ctp-creme); margin: 0 0 12px !important; }
.woocommerce ul.products li.product .ast-woo-product-category { display: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: Amiri, serif;
	font-weight: 400;
	font-size: clamp(17px, 1.6vw, 19px) !important;
	line-height: 1.25;
	color: var(--ctp-groen);
	margin: 0 0 6px;
}
.woocommerce ul.products li.product .price { margin: 4px 0 10px; color: var(--ctp-groen); }
.woocommerce ul.products li.product .button { margin-top: auto !important; align-self: center; }
@media (max-width: 921px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}

/* Productpagina */
.single-product .product_title {
	font-family: Amiri, serif;
	font-weight: 400;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	color: var(--ctp-groen);
}
.single-product div.product .woocommerce-product-gallery img { border-radius: var(--ctp-radius); }
/* Label "Aanbieding" op de productpagina: dezelfde rustige pil als in de winkel, binnen de foto linksboven
   (WooCommerce en Astra maken er anders een groot rondje van dat half buiten de foto steekt). */
.woocommerce-js.single-product div.product span.onsale.ctp-onsale,
.single-product div.product span.onsale.ctp-onsale {
	top: 14px;
	left: 14px;
	right: auto;
	min-width: 0;
	min-height: 0;
	line-height: 1.3;
	padding: 6px 12px;
	font-size: 12px;
	z-index: 9;
}
@media (max-width: 600px) {
	.woocommerce-js.single-product div.product span.onsale.ctp-onsale,
	.single-product div.product span.onsale.ctp-onsale { top: 10px; left: 10px; }
}
.single-product .woocommerce-tabs ul.tabs li a { font-weight: 600; }
.single-product .related.products > h2 {
	font-family: Amiri, serif;
	font-weight: 400;
	text-align: center;
	font-size: clamp(26px, 3vw, 32px);
}

/* ---------- Winkelmand, afrekenen, bedankpagina en account ---------- */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
	text-align: center;
	font-family: Amiri, serif;
	font-weight: 400;
	font-size: clamp(32px, 4vw, 44px);
	margin: .4em 0 .6em;
}
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* Kortingscodeveld verbergen: de introductiekorting gaat via de knop */
.woocommerce-cart .coupon,
.woocommerce-form-coupon-toggle,
.checkout_coupon { display: none !important; }

/* Knoppen in de winkel: olijfgroene pil (zoals op de rest van de site) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	background: var(--ctp-olijf) !important;
	color: var(--ctp-olijf-tekst) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 20px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	line-height: 1.2 !important;
	text-transform: uppercase;
	text-decoration: none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--ctp-olijf-hover) !important;
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] { opacity: .55; }

/* Witte kaarten rond winkelmand, totalen en bestelling */
.woocommerce-cart-form,
.woocommerce .cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-order-details,
.woocommerce-customer-details {
	background: #fff;
	border-radius: var(--ctp-radius);
	box-shadow: var(--ctp-schaduw);
	padding: clamp(14px, 2.5vw, 24px);
}

/* Artikelnummer (SKU) niet tonen op de productpagina: het staat er voor Google (productcode),
   niet voor de klant. */
.single-product .product_meta .sku_wrapper { display: none !important; }