/* =========================================================================
 *  DEV-2562 — Productpagina (single product)
 *  Wordt alleen geladen op is_product() (zie inc/product-page.php).
 *  De pagina wordt door Elementor-template #546 gerenderd; we verbergen/
 *  vervangen specifieke onderdelen via theme-CSS (route C, hybride).
 * ========================================================================= */

/* -------------------------------------------------------------------------
 *  Punt 1 — SKU boven de titel verbergen.
 *  Bron: Elementor icon-list widget #723da71 in template #546 (native WC-SKU,
 *  "SKU: ..."). Er is geen stabiele class die deze icon-list onderscheidt van
 *  de voorraad/USP icon-lists, dus we targeten de element-id.
 * ---------------------------------------------------------------------- */
body.single-product .elementor-element-723da71 {
	display: none !important;
}

/* -------------------------------------------------------------------------
 *  Punt 4 — grijze "Veilige verzending"-balk verbergen.
 *  .wc-verzendkosten is de stabiele output-class van de shortcode
 *  [handystairs_verzendkosten] (functions.php); .elementor-element-6635176 is
 *  de Elementor-widget-wrapper eromheen (backup mocht de class ooit wijzigen).
 * ---------------------------------------------------------------------- */
body.single-product .wc-verzendkosten,
body.single-product .elementor-element-6635176 {
	display: none !important;
}

/* -------------------------------------------------------------------------
 *  Punt 2 — Voorraad + geschatte levering blok (onder de prijs).
 *  Gerenderd door shortcode [hps_voorraad_levering] (zie inc/product-page.php),
 *  geplaatst in Elementor-template #546 op de plek van de oude voorraad-widget.
 * ---------------------------------------------------------------------- */
.hps-stock-delivery {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 6px 0 4px;
	font-size: 16px;
	line-height: 1.4;
}
.hps-stock-delivery .hps-sd__icon {
	color: #3caf66; /* merk-groen */
	font-size: 20px;
	line-height: 1;
}
.hps-stock-delivery .hps-sd__stock {
	font-weight: 700;
	color: #1d1d1b;
}
.hps-stock-delivery .hps-sd__eta {
	flex-basis: 100%; /* levertijd op een eigen regel onder "Op voorraad" */
	color: #6b7280;
}
.hps-stock-delivery .hps-sd__eta strong {
	color: #1d1d1b;
	font-weight: 600;
}

/* Oude losse [geschatte_levering]-widget (#c5f7730) verbergen: de levertijd zit
   nu in het gecombineerde blok hierboven, onder de prijs. */
body.single-product .elementor-element-c5f7730 {
	display: none !important;
}

/* -------------------------------------------------------------------------
 *  Punt 5 — USP-blok (5 kaarten) onder de "In winkelwagen"-knop.
 *  Gerenderd door shortcode [hps_usp_blok] (zie inc/product-page.php).
 * ---------------------------------------------------------------------- */
.hps-usp-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px 0 6px;
}
.hps-usp-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
}
.hps-usp-card__icon {
	flex: 0 0 auto;
	color: #234c73; /* navy/blauw (volgens mockup) */
	font-size: 20px;
	line-height: 1.35;
	width: 22px;
	text-align: center;
}
.hps-usp-card__body {
	display: flex;
	flex-direction: column;
}
.hps-usp-card__title {
	font-weight: 700;
	color: #1d1d1b;
	font-size: 15px;
	line-height: 1.3;
}
.hps-usp-card__text {
	color: #6b7280;
	font-size: 13.5px;
	line-height: 1.45;
	margin-top: 2px;
}

/* -------------------------------------------------------------------------
 *  Punt 3 — Afhaalregel (magazijn-bewust) onder de knop.
 *  Gerenderd door shortcode [hps_afhaal] (zie inc/product-page.php).
 * ---------------------------------------------------------------------- */
.hps-pickup {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0;
	color: #6b7280;
	font-size: 15px;
	line-height: 1.45;
}
.hps-pickup__icon {
	flex: 0 0 auto;
	color: #3caf66; /* merk-groen, past bij de truck bij de levertijd */
	font-size: 18px;
	line-height: 1.4;
}
.hps-pickup__text strong {
	color: #1d1d1b;
}

/* -------------------------------------------------------------------------
 *  Feedbackronde juli 2026, punt 2 — Witruimte onder de productgalerij.
 *
 *  De linkerkolom (galerij) wordt door de langere rechterkolom (titel, prijs,
 *  USP's) opgerekt; onder de galerij ontstond ±480px leeg wit. Variant A:
 *  de galerij "plakt" tijdens het scrollen onder de sticky header, zodat de
 *  foto in beeld blijft zolang de productinfo rechts doorloopt.
 *  (Variant B — USP-blokken onder de galerij — besproken met Tim; zie
 *  FEEDBACK-TIM verslag.)
 * ---------------------------------------------------------------------- */
@media (min-width: 992px) {
	.single-product .elementor-widget-woocommerce-product-images {
		position: sticky;
		top: 220px; /* hoogte sticky header (±200px) + marge */
	}
}