/*
 * Productpagina (WoodXL) — aanvulling op de Elementor-template "WoodXL Productpagina".
 * Alleen wat de WooCommerce-widgets niet zelf kunnen; kleuren/fonts via Elementor-globals.
 */

/* ---------- Galerij: hoofdafbeelding vierkant, duimnagels 76px op een rij ---------- */
.wxl-gallery {
	.woocommerce-product-gallery__image img {
		aspect-ratio: 1 / 1;
		object-fit: contain;
		background: var(--e-global-color-wxlcream);
	}

	.flex-control-thumbs {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		/* Elementor compenseert de li-padding met -5px; die padding staat op 0 */
		margin-right: 0 !important;
		margin-left: 0 !important;

		/* Elementor zet padding op li (thumbnail-spacing); tussenruimte doet de flex-gap */
		li {
			width: 76px !important;
			margin: 0 !important;
			padding: 0 !important;
			float: none !important;
		}

		/* Tegel 76x76 met binnenruimte, zoals in het ontwerp */
		img {
			box-sizing: border-box;
			width: 76px !important;
			max-width: none !important;
			height: 76px !important;
			padding: 8px;
			aspect-ratio: 1 / 1;
			object-fit: contain;
			background: var(--e-global-color-wxlcream);
			opacity: 1 !important;
			cursor: pointer;
			transition: border-color 0.15s ease;

			&:hover {
				border-color: var(--e-global-color-wxlorsoft) !important;
			}
		}

		img.flex-active {
			border-color: var(--e-global-color-primary) !important;
		}
	}

	/* Aanbiedingslabel in dezelfde stijl als de badges op de productkaart */
	span.onsale {
		top: 14px !important;
		left: 14px !important;
		right: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 6px 12px !important;
		border-radius: 5px !important;
		background: var(--e-global-color-primary) !important;
		font-family: var(--e-global-typography-wxlbadge-font-family), sans-serif;
		font-size: 11px !important;
		font-weight: 700;
		letter-spacing: 0.03em;
		line-height: 1 !important;
		text-transform: uppercase;
		color: var(--e-global-color-wxlwhite) !important;
	}

	.woocommerce-product-gallery__trigger {
		top: 14px !important;
		right: 14px !important;
	}
}

/* ---------- Winkelwagenformulier ---------- */
.wxl-atc {
	/* Variaties: label boven knoppen */
	table.variations {
		margin: 0 0 4px;
		border: 0;

		tr {
			display: block;
			margin-bottom: 20px;
		}

		th,
		td {
			display: block;
			padding: 0;
			border: 0;
			background: none;
			text-align: start;
		}

		th.label {
			margin-bottom: 10px;
			line-height: 1;

			label {
				font-family: var(--e-global-typography-secondary-font-family), sans-serif;
				font-size: 12.5px;
				font-weight: 600;
				letter-spacing: 0.04em;
				text-transform: uppercase;
				color: var(--e-global-color-secondary);
			}
		}

		select.wxl-var-select {
			display: none !important;
		}

		.reset_variations {
			display: inline-block;
			margin-top: 8px;
			font-size: 12px;
			color: var(--e-global-color-wxltaupel);
			text-decoration: underline;
		}
	}

	.wxl-var-opts {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	/* !important: kit- en widget-knopstijl gelden ook voor deze <button>s */
	.wxl-var-opt {
		min-height: 0 !important;
		margin: 0 !important;
		padding: 9px 16px !important;
		border: 1.5px solid var(--e-global-color-wxlgray2) !important;
		border-radius: 7px !important;
		background: var(--e-global-color-wxlwhite) !important;
		box-shadow: none !important;
		font-family: var(--e-global-typography-text-font-family), sans-serif !important;
		font-size: 13.5px !important;
		font-weight: 700 !important;
		letter-spacing: 0 !important;
		line-height: 1.2 !important;
		text-transform: none !important;
		color: var(--e-global-color-wxlbrown) !important;
		cursor: pointer;
		transition: border-color 0.15s ease;

		&:hover,
		&:focus-visible {
			border-color: var(--e-global-color-wxlorsoft) !important;
		}

		&.is-active {
			border-color: var(--e-global-color-primary) !important;
			background: var(--e-global-color-wxlorlt) !important;
			color: var(--e-global-color-accent) !important;
		}

		&:disabled {
			opacity: 0.4;
			text-decoration: line-through;
			cursor: not-allowed;
		}
	}

	/* Variatieprijs/-voorraad: prijs staat al bovenaan (Product Price-widget) */
	.woocommerce-variation-availability,
	.woocommerce-variation-description:empty {
		display: none;
	}

	/* Variatieprijs staat bovenaan in de prijs-widgets (.wxl-price, via JS) */
	.woocommerce-variation-price {
		display: none;
	}

	/* Voorraadregel van WooCommerce in het formulier: staat apart onder de knop (Stock-widget) */
	.elementor-add-to-cart > p.stock {
		display: none;
	}

	/* Aantal + knop op één rij */
	form.cart:not(.variations_form),
	.woocommerce-variation-add-to-cart,
	.e-atc-qty-button-holder {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 12px;
		margin: 0;
	}

	/* Formulier van een eenvoudig product mag wrappen (lengtekeuze boven aantal + knop) */
	form.cart:not(.variations_form) {
		flex-wrap: wrap;
	}

	.single_add_to_cart_button {
		flex: 1 1 auto;
		min-height: 52px;
		margin: 0 !important;
	}

	.quantity {
		margin: 0 !important;
	}
}

/* Stepper: [ – ] 1 [ + ] */
.wxl-qty {
	display: flex !important;
	align-items: stretch;
	flex: none;
	overflow: hidden;
	border: 1.5px solid var(--e-global-color-wxlgray2);
	border-radius: 8px;

	/* !important: de knopstijl van de add-to-cart-widget geldt voor alle buttons in .cart */
	.wxl-qty__btn {
		width: 40px;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: var(--e-global-color-wxlcream) !important;
		font-family: var(--e-global-typography-text-font-family), sans-serif !important;
		font-size: 18px !important;
		line-height: 1;
		color: var(--e-global-color-secondary) !important;
		cursor: pointer;

		&:hover,
		&:focus-visible {
			background: var(--e-global-color-wxlorlt) !important;
			color: var(--e-global-color-accent) !important;
		}
	}

	input.qty {
		width: 44px !important;
		min-height: 52px;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		font-family: var(--e-global-typography-primary-font-family), sans-serif;
		font-size: 15px;
		font-weight: 700;
		text-align: center;
		color: var(--e-global-color-secondary);
		-moz-appearance: textfield;

		&::-webkit-inner-spin-button,
		&::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}
}

/* ---------- Voorraadregel: groene stip ---------- */
.wxl-stock .stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;

	&::before {
		content: "";
		flex: none;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: currentColor;
	}

	&.available-on-backorder {
		color: var(--e-global-color-accent) !important;
	}

	&.out-of-stock {
		color: var(--e-global-color-wxltaupel) !important;
	}
}

/* ---------- Sterren (rating onder titel + reviews) ---------- */
.wxl-rating .woocommerce-product-rating {
	align-items: center;
	gap: 10px;
	margin: 0;

	/* clearfix-pseudo's tellen in flex mee als item (+gap) */
	&::before,
	&::after {
		display: none !important;
	}

	.star-rating {
		margin: 0;
	}

	.woocommerce-review-link {
		text-decoration: underline;
	}
}

/* ---------- Tabs: onderstreepte tabbalk ---------- */
.wxl-tabs .woocommerce-tabs {
	ul.wc-tabs {
		display: flex;
		gap: 4px;
		margin: 0 0 30px !important;
		padding: 0 !important;
		overflow-x: auto;
		border-bottom: 2px solid var(--e-global-color-wxlgray2);
		scrollbar-width: none;

		&::before,
		&::after,
		li::before,
		li::after {
			display: none !important;
		}

		li {
			flex: none;
			margin: 0 0 -2px !important;
			padding: 0 !important;
			border: 0 !important;
			border-bottom: 3px solid transparent !important;
			border-radius: 0 !important;
			background: none !important;

			a {
				display: block;
				padding: 14px 22px !important;
			}

			&.active {
				border-bottom-color: var(--e-global-color-primary) !important;
			}
		}
	}

	.woocommerce-Tabs-panel {
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;

		> h2:first-child {
			display: none;
		}

		p {
			max-width: 720px;
		}
	}

	/* Technische specificaties */
	table.shop_attributes {
		width: 100%;
		max-width: 560px;
		margin: 0;
		border: 0;
		border-collapse: collapse;

		tr {
			border-bottom: 1px solid var(--e-global-color-wxlgray2);
		}

		th,
		td {
			width: auto;
			padding: 11px 0 !important;
			border: 0 !important;
			background: none !important;
			font-family: var(--e-global-typography-text-font-family), sans-serif;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			text-align: start;
			text-transform: none;
		}

		th {
			width: 45%;
			color: var(--e-global-color-wxltaupel);
		}

		td {
			color: var(--e-global-color-wxlbrown);

			p {
				margin: 0;
				padding: 0;
			}
		}
	}
}

/* ---------- Reviews: scoreblok + kaarten ---------- */
.wxl-tabs #reviews {
	.woocommerce-Reviews-title {
		display: flex;
		align-items: center;
		gap: 16px;
		margin: 0 0 30px;
	}

	.wxl-score__num {
		font-family: var(--e-global-typography-wxlscore-font-family), sans-serif;
		font-size: 44px;
		font-weight: 700;
		line-height: 1;
		color: var(--e-global-color-secondary);
	}

	.wxl-score__meta {
		display: flex;
		flex-direction: column;
		gap: 6px;

		.star-rating {
			margin: 0;
		}
	}

	.wxl-score__count {
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: 13px;
		font-weight: 400;
		text-transform: none;
		color: var(--e-global-color-wxltaupel);
	}

	#comments ol.commentlist {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
		margin: 0 0 40px;
		padding: 0;

		&::before,
		&::after {
			display: none;
		}

		li.review {
			margin: 0;
			padding: 24px;
			border: 1px solid var(--e-global-color-wxlgray2);
			border-radius: 12px;
			background: var(--e-global-color-wxlwhite);
		}

		.comment_container {
			display: block;
		}

		img.avatar {
			display: none;
		}

		.comment-text {
			display: flex;
			flex-direction: column;
			margin: 0 !important;
			padding: 0 !important;
			border: 0 !important;
		}

		.star-rating {
			float: none;
			order: 1;
			margin: 0 0 12px;
		}

		.description {
			order: 2;

			p {
				margin: 0 0 14px;
				font-size: 14.5px;
				color: var(--e-global-color-wxlbrown);
			}
		}

		.meta {
			order: 3;
			margin: 0 !important;
			font-family: var(--e-global-typography-secondary-font-family), sans-serif;
			font-size: 12.5px;
			color: var(--e-global-color-wxltaupel);

			.woocommerce-review__author {
				font-weight: 600;
				text-transform: uppercase;
				color: var(--e-global-color-secondary);
			}

			.woocommerce-review__dash,
			.woocommerce-review__published-date {
				font-family: var(--e-global-typography-text-font-family), sans-serif;
				font-size: 12px;
			}
		}
	}

	#review_form_wrapper {
		max-width: 720px;

		#respond input#submit {
			padding: 14px 26px;
			border-radius: 6px;
			background: var(--e-global-color-primary);
			font-family: var(--e-global-typography-accent-font-family), sans-serif;
			font-size: 14px;
			font-weight: 600;
			text-transform: uppercase;
			color: var(--e-global-color-wxlwhite);

			&:hover {
				background: var(--e-global-color-accent);
			}
		}

		textarea,
		input[type="text"],
		input[type="email"] {
			border: 1.5px solid var(--e-global-color-wxlgray2);
			border-radius: 8px;
			background: var(--e-global-color-wxlwhite);
		}

		.stars a {
			color: var(--e-global-color-wxlgold);
		}

		.comment-reply-title {
			display: block;
			margin-bottom: 12px;
			font-family: var(--e-global-typography-wxlh4-font-family), sans-serif;
			font-size: 15px;
			font-weight: 700;
			text-transform: uppercase;
			color: var(--e-global-color-secondary);
		}
	}
}

.wxl-tabs .star-rating,
.wxl-rating .star-rating {
	color: var(--e-global-color-wxlgold);
}

@media (max-width: 1024px) {
	.wxl-tabs #reviews #comments ol.commentlist {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	/* Mobiel: thumbnails iets kleiner, horizontaal scrollbaar i.p.v. wrappen */
	.wxl-gallery .flex-control-thumbs {
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;

		li {
			flex: none;
			width: 64px !important;
		}

		img {
			width: 64px !important;
			height: 64px !important;
			padding: 6px;
		}
	}

	.wxl-tabs .woocommerce-tabs ul.wc-tabs li a {
		padding: 12px 14px !important;
	}

	.wxl-tabs #reviews .wxl-score__num {
		font-size: 36px;
	}
}