/* ==========================================================================
   Theme variables
   ========================================================================== */

:root {
	--color-primary: #fbde01;
}

/* ==========================================================================
   Shop button — custom "read more" CTA on product cards
   ========================================================================== */

.shop-btn-read-more {
	display: block;
	padding: 10px 18px;
	background-color: var(--color-primary);
	color: #000;
	width: auto;
	font-style: normal;
	text-decoration: none;
	font-weight: 600;
	text-align: center;
	border-radius: 0px;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.shop-btn-read-more:hover,
.shop-btn-read-more:focus {
	background-color: #000;
	color: #fff;
}

/* ==========================================================================
   Product archive — WooCommerce block overrides
   ========================================================================== */

/* Hide default add-to-cart buttons in the product template block */
.wp-block-woocommerce-product-template .product_type_variable.button,
.wp-block-woocommerce-product-template .adf_prc_custom_btn {
	display: none !important;
}

.wp-block-woocommerce-product-template
	li.wc-block-product
	> a.button.wp-element-button.product_type_simple,
.wp-block-button.wc-block-components-product-button.wp-block-button__width-100
	.wp-block-button__link {
	display: none !important;
}

/* Show custom shop button in place of hidden defaults */
.wp-block-woocommerce-product-template
	li.wc-block-product
	> a.shop-btn-read-more {
	display: block !important;
}

/* Square product thumbnails in grid/list blocks */
.wc-block-components-product-image img,
.wc-block-grid__product-image img {
	aspect-ratio: 1 / 1;
}

/* Hide default block price (displayed elsewhere on the card) */
.wc-block-components-product-price {
	display: none;
}

/* Sale badge uses brand yellow */
.wc-block-components-product-sale-badge__text {
	background-color: var(--color-primary) !important;
}

/* ==========================================================================
   Single product — variation attribute table
   ========================================================================== */

.single-product form.cart .variations {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 12px;
	margin: 0 0 12px;
	margin-bottom: 0px !important;
}

.single-product form.cart .variations tr {
	background: #fff;
}

.single-product form.cart .variations th.label,
.single-product form.cart .variations td.value {
	padding: 0;
	vertical-align: top;
}

.single-product form.cart .variations th.label {
	width: 180px;
	padding: 10px 16px 0 0;
}

.single-product form.cart .variations th.label label {
	display: inline-block;
	font-weight: 600;
	font-size: 0.95rem;
	color: #111;
}

/* Relative positioning anchors the "Wissen" reset link */
.single-product form.cart .variations td.value {
	position: relative;
}

/* Custom-styled variation dropdowns with chevron arrow */
.single-product form.cart .variations td.value select {
	width: 100%;
	min-height: 46px;
	padding: 0 44px 0 14px;
	border: 1px solid #cfcfcf;
	border-radius: 8px;
	background-color: #fff;
	color: #111;
	font-size: 0.95rem;
	line-height: 1.2;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, #111 50%),
		linear-gradient(135deg, #111 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% - 2px),
		calc(100% - 14px) calc(50% - 2px);
	background-size:
		6px 6px,
		6px 6px;
	background-repeat: no-repeat;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.single-product form.cart .variations td.value select:focus {
	outline: none;
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* "Wissen" — absolutely positioned below the select field */
.single-product form.cart .reset_variations {
	position: absolute;
	right: 10px;
	bottom: -30px;
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	color: #111;
}

.single-product form.cart .reset_variations:hover,
.single-product form.cart .reset_variations:focus {
	color: #000;
	text-decoration-thickness: 2px;
}

/* Stack label above select on small screens */
@media (max-width: 640px) {
	.single-product form.cart .variations th.label,
	.single-product form.cart .variations td.value {
		display: block;
		width: 100%;
	}

	.single-product form.cart .variations th.label {
		padding: 0 0 6px;
	}
}

/* ==========================================================================
   Single product — quantity + add to cart
   ========================================================================== */

.single-product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product .wc-block-add-to-cart-form form.cart {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 12px;
	align-items: end;
	margin-top: 12px;
}

.single-product form.cart .woocommerce-variation-add-to-cart .quantity,
.woocommerce div.product .wc-block-add-to-cart-form form.cart .quantity {
	margin: 0;
}

.single-product form.cart .woocommerce-variation-add-to-cart .quantity .qty,
.woocommerce div.product .wc-block-add-to-cart-form form.cart .quantity .qty {
	width: 100%;
	min-height: 46px;
	padding: 0 12px;
	border: 1px solid #cfcfcf;
	border-radius: 8px;
	background: #fff;
	color: #111;
	font-size: 0.95rem;
	line-height: 1.2;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.single-product
	form.cart
	.woocommerce-variation-add-to-cart
	.quantity
	.qty:focus,
.woocommerce
	div.product
	.wc-block-add-to-cart-form
	form.cart
	.quantity
	.qty:focus {
	outline: none;
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.single-product
	form.cart
	.woocommerce-variation-add-to-cart
	.single_add_to_cart_button,
.woocommerce
	div.product
	.wc-block-add-to-cart-form
	form.cart
	button.single_add_to_cart_button {
	width: 100%;
	min-height: 46px;
	padding: 12px 18px;
	border: 1px solid #000;
	border-radius: 8px;
	background: var(--color-primary);
	color: #000;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.single-product
	form.cart
	.woocommerce-variation-add-to-cart
	.single_add_to_cart_button:hover,
.single-product
	form.cart
	.woocommerce-variation-add-to-cart
	.single_add_to_cart_button:focus,
.woocommerce
	div.product
	.wc-block-add-to-cart-form
	form.cart
	button.single_add_to_cart_button:hover,
.woocommerce
	div.product
	.wc-block-add-to-cart-form
	form.cart
	button.single_add_to_cart_button:focus {
	background: #000;
	color: #fff;
	border-color: #000;
}

.single-product
	form.cart
	.woocommerce-variation-add-to-cart
	.single_add_to_cart_button:disabled,
.single-product
	form.cart
	.woocommerce-variation-add-to-cart
	.single_add_to_cart_button.disabled,
.woocommerce
	div.product
	.wc-block-add-to-cart-form
	form.cart
	button.single_add_to_cart_button:disabled,
.woocommerce
	div.product
	.wc-block-add-to-cart-form
	form.cart
	button.single_add_to_cart_button.disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Stack quantity above button on small screens */
@media (max-width: 640px) {
	.single-product form.cart .woocommerce-variation-add-to-cart,
	.woocommerce div.product .wc-block-add-to-cart-form form.cart {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Price calculator plugin (addf_prc)
   ========================================================================== */

.addf_prc_input_field {
	background-color: #fff !important;
}

/* Calculator hidden by default */
.addf_prc_selection_option_heading,
.addf_prc_result_section_heading,
.addf_prc_cal_table,
.addf_prc_table_for_variation_price_table {
	display: none !important;
}

/* Shown only when the form has .show-calc (set by JS for "Per lengte meter") */
.variations_form.show-calc .addf_prc_selection_option_heading,
.variations_form.show-calc .addf_prc_result_section_heading,
.variations_form.show-calc .addf_prc_table_for_variation_price_table,
form.cart.show-calc .addf_prc_selection_option_heading,
form.cart.show-calc .addf_prc_result_section_heading,
form.cart.show-calc .addf_prc_table_for_variation_price_table {
	display: block !important;
}
.variations_form.show-calc .addf_prc_cal_table,
form.cart.show-calc .addf_prc_cal_table {
	display: table !important;
}

/* ==========================================================================
   Category grid shortcode / block
   ========================================================================== */

.kanvas-category-grid {
	display: grid;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.kanvas-category-grid__item {
	display: block;
	color: inherit;
	text-decoration: none;
}

.kanvas-category-grid__image-wrap {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	background: #f3f3f3;
	aspect-ratio: 4 / 3;
}

.kanvas-category-grid__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}

.kanvas-category-grid__item:hover .kanvas-category-grid__image,
.kanvas-category-grid__item:focus .kanvas-category-grid__image {
	transform: scale(1.03);
}

.kanvas-category-grid__image.is-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, #ececec, #dadada);
}

.kanvas-category-grid__title {
	display: block;
	margin-top: 10px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

@media (max-width: 1024px) {
	.kanvas-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.kanvas-category-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ==========================================================================
   Product specifications table
   ========================================================================== */

.wp-block-table th.wp-block-product-specifications-item__label {
	min-width: 200px;
	background-color: #e2e2e2;
	color: #000;
}
.wp-block-product-specifications-item {
	border-bottom: 1px solid #000;
}