/*
 * De Osightly-productpagina's: Osightly, Osightly Free, de upgrade, het adviesgesprek en Lens.
 *
 * Tot 30 september stond deze opmaak als eigen CSS in Tatsu, op product 8440 alleen. Onica wil
 * dat alle Osightly-producten er hetzelfde uitzien; daarom staat hij nu hier, en laadt de plugin
 * hem op elk product uit Osightly_Productpagina::producten(). Alles hangt onder
 * body.osightly-productpagina, dus andere producten van de winkel raakt dit niet.
 *
 * De regels zijn letterlijk overgenomen; alleen de body-klasse is ervoor gezet. Staat de CSS in
 * Tatsu op 8440 er nog, dan is dat dubbel maar onschuldig.
 */

/* ── De kassa in twee kolommen ─────────────────────────────────────────────────── */

@media (min-width: 769px) {
	body.osightly-productpagina form.checkout.woocommerce-checkout {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 0 40px;
		align-items: start;
	}

	/* Factuurgegevens links */
	body.osightly-productpagina form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 100%;
		align-self: start;
	}

	/* Besteltitel rechts, bovenaan */
	body.osightly-productpagina form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		margin-top: 0;
	}

	/* Besteloverzicht direct onder de titel */
	body.osightly-productpagina form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		width: 100%;
		align-self: start;
	}
}

@media (max-width: 768px) {
	body.osightly-productpagina form.checkout.woocommerce-checkout {
		display: block !important;
	}
}

/* De kolom met bestelnotities, de voet van de site en de hero weg */
body.osightly-productpagina form.checkout #customer_details .col-2,
body.osightly-productpagina #tatsu-footer-container,
body.osightly-productpagina #hero-section {
	display: none !important;
}

/* Factuurgegevens vullen de hele linkerkolom */
body.osightly-productpagina form.checkout #customer_details .col-1 {
	width: 100% !important;
	float: none !important;
}

/* ── Artikelnummer, categorie en deelknoppen weg ───────────────────────────────── */

body.osightly-productpagina .product_meta,
body.osightly-productpagina .sku_wrapper,
body.osightly-productpagina .posted_in,
body.osightly-productpagina .tagged_as,
body.osightly-productpagina .woocommerce-product-sharing,
body.osightly-productpagina .woocommerce-tabs .additional_information_tab,
body.osightly-productpagina .woocommerce-tabs #tab-additional_information,
body.osightly-productpagina a.custom-share-button,
body.osightly-productpagina .summary.entry-summary > p:has(a.custom-share-button) {
	display: none !important;
}

/* ── De productomschrijving als inklapbare blokken ─────────────────────────────── */

@font-face {
	font-family: 'hknova-semiboldr';
	src: url('/wp-content/uploads/typehub/custom/hknova-semiboldr/hknova-semiboldr.woff2') format('woff2'),
		url('/wp-content/uploads/typehub/custom/hknova-semiboldr/hknova-semiboldr.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

body.osightly-productpagina #tab-description details.osightly-vouw {
	margin: 0 0 2px;
}

body.osightly-productpagina #tab-description details.osightly-vouw > summary {
	cursor: pointer;
	display: block;
	list-style: none;
	position: relative;
	padding: 13px 40px 13px 0;
}

body.osightly-productpagina #tab-description details.osightly-vouw > summary::-webkit-details-marker {
	display: none;
}

body.osightly-productpagina #tab-description details.osightly-vouw > summary h3 {
	display: inline;
	margin: 0;
	font-family: 'hknova-semiboldr', sans-serif;
	font-size: 20px;
	line-height: 1.4;
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
}

body.osightly-productpagina #tab-description details.osightly-vouw > summary::after {
	content: "+";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'hknova-semiboldr', sans-serif;
	font-size: 24px;
	line-height: 1;
	font-weight: normal;
}

body.osightly-productpagina #tab-description details.osightly-vouw[open] > summary::after {
	content: "\2212";
}

body.osightly-productpagina #tab-description details.osightly-vouw > *:last-child {
	margin-bottom: 24px;
}

/* ── De afrekenpagina en "Order ontvangen" bij een Osightly-bestelling ─────────────
   De pagina Afrekenen (7418) geldt voor de hele winkel en heeft in zijn inhoud, onder de
   kassa, Tatsu-secties met de Osees-voet. Bij een Osightly-bestelling blijft alleen de
   sectie met de kassa of de bedanktekst staan. .tatsu-r1bkThUWRF is de sectie die Onica op
   30 september op "Order ontvangen" aanwees; die staat er los bij voor het geval :has() in
   een oude browser niet werkt. */

body.osightly-kassa #page-content .tatsu-section:not(:has(.woocommerce)),
body.osightly-kassa .tatsu-r1bkThUWRF.tatsu-section,
body.osightly-kassa #tatsu-footer-container,
body.osightly-kassa .title-module-wrap {
	display: none !important;
}

/* Zonder de paginatitel schuift de kassa onder de Osightly-kop; dezelfde ruimte als op de
   productpagina's. */
body.osightly-kassa #page-content {
	padding-top: 110px;
}

/* ── Letter ────────────────────────────────────────────────────────────────────────
   Typehub gaf kopjes, knoppen en velden in de winkel Montserrat, Lato of Raleway, van Google
   Fonts. Die laden op de Osightly-pagina's niet meer (4.43.1), dus zonder dit vielen ze terug op
   een schreefletter. Nu HK Nova, zoals de rest van Osightly. */

body.osightly-productpagina :is(h1, h2, h3, h4, h5, h6, label, input, select, textarea, button, .button,
	#order_review_heading, .woocommerce-billing-fields h3, .woocommerce-additional-fields h3,
	.shop_table, .woocommerce-tabs .tabs li a, .woocommerce-info, .woocommerce-message, .woocommerce-error,
	.product_title, .price, .single_add_to_cart_button, #place_order) {
	font-family: 'Osightly Nova', 'hknova-semiboldr', sans-serif !important;
}

body.osightly-productpagina :is(h1, h2, h3, #order_review_heading, .woocommerce-billing-fields h3, .product_title) {
	font-weight: 700 !important;
}