/* CERADOS Productweergave – ontwerp A (scherpe hoeken, petrol knoppen) */
:root {
	--cpw-petrol: #0F6072;
	--cpw-petrol-donker: #0b4a58;
	--cpw-inkt: #1d1c1a;
	--cpw-tekst: #3a3733;
	--cpw-grijs: #5f5b55;
	--cpw-lijn: #e6e1d8;
	--cpw-zand: #F4F3F0;
	--cpw-zand-donker: #ebe5db;
	--cpw-groen: #21702C;
	--cpw-oranje: #FF6600;
}

.cpw-icon { flex: 0 0 auto; }

/* Kleine kop boven titels */
.cpw-eyebrow,
.cpw-label,
.cpw-kaart-eyebrow {
	font-family: Inter, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cpw-grijs);
}
.cpw-label { margin-bottom: 10px; }

.cpw-h2 {
	font-family: Poppins, sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	margin: 6px 0 0;
	color: #000;
}

.cpw-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: Inter, sans-serif;
	font-weight: 600;
	color: var(--cpw-petrol);
	text-decoration: none;
}
.cpw-link:hover { color: var(--cpw-petrol-donker); text-decoration: underline; }

/* Chips */
.cpw-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cpw-chip {
	margin: 0;
	background: #fff;
	border: 1px solid var(--cpw-lijn);
	padding: 8px 14px;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--cpw-inkt);
}

/* Showroom-status en levertijd */
.cpw-status,
.cpw-levertijd {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: Inter, sans-serif;
	font-size: 15px;
}
.cpw-status--ja { color: var(--cpw-groen); font-weight: 600; }
.cpw-status--nee { color: var(--cpw-tekst); }
.cpw-levertijd { font-weight: 500; color: var(--cpw-inkt); }

/* Andere formaten */
.cpw-formaten-lijst { display: flex; flex-wrap: wrap; gap: 8px; }
.cpw-formaat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 96px;
	padding: 10px 16px;
	border: 1px solid var(--cpw-lijn);
	background: #fff;
	color: var(--cpw-inkt);
	text-decoration: none;
	font-family: Inter, sans-serif;
}
.cpw-formaat span { font-size: 13px; color: var(--cpw-grijs); }
.cpw-formaat:hover { border-color: var(--cpw-petrol); color: var(--cpw-inkt); }
.cpw-formaat.is-actief { background: var(--cpw-petrol); border-color: var(--cpw-petrol); color: #fff; }
.cpw-formaat.is-actief span { color: #d9e8ec; }

/* Koopblok (container in Elementor met klasse cpw-koopblok) */
.cpw-koopblok { border: 1px solid var(--cpw-lijn); }
.cpw-koopblok .price { color: var(--cpw-petrol); }

/* Blok met John */
.cpw-showroom {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: var(--cpw-zand-donker);
	padding: 20px;
	font-family: Inter, sans-serif;
}
.cpw-john-foto {
	width: 84px !important;
	height: 84px !important;
	object-fit: cover;
	object-position: top;
	border-radius: 999px;
	flex: 0 0 84px;
}
.cpw-showroom-tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cpw-showroom-titel { font-size: 17px; color: #000; }
.cpw-showroom-tekst p { margin: 0; font-size: 15px; line-height: 1.5; color: #45413c; }
.cpw-showroom-tekst .cpw-showroom-tijden { font-size: 14px; }

/* Service-strook */
.cpw-service {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1px;
	background: var(--cpw-lijn);
	border: 1px solid var(--cpw-lijn);
	font-family: Inter, sans-serif;
}
.cpw-service li { margin: 0; background: #fff; padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.cpw-service strong { font-size: 16px; color: #000; }
.cpw-service span { font-size: 14px; color: var(--cpw-grijs); }

/* Productinformatie (WooCommerce Extra informatie) */
.cpw-specs { border: 1px solid var(--cpw-lijn); }
.cpw-faq-sectie { max-width: 860px; }
.cpw-faq-sectie .cpw-h2 { margin: 0 0 20px; }
.cpw-specs table.woocommerce-product-attributes,
.cpw-specs table.shop_attributes {
	width: 100%;
	border: 0 !important;
	border-collapse: collapse;
	margin: 0;
	background: #fff;
	font-family: Inter, sans-serif;
	font-size: 15px;
}
.cpw-specs table.woocommerce-product-attributes th,
.cpw-specs table.woocommerce-product-attributes td,
.cpw-specs table.shop_attributes th,
.cpw-specs table.shop_attributes td {
	border: 0 !important;
	border-bottom: 1px solid #efebe4 !important;
	background: #fff !important;
	padding: 12px 20px !important;
	text-align: left;
	vertical-align: top;
	font-style: normal !important;
}
.cpw-specs table th { width: 45%; font-weight: 400 !important; color: var(--cpw-grijs); }
.cpw-specs table td { font-weight: 500; color: var(--cpw-inkt); }
.cpw-specs table td p { margin: 0; font-style: normal !important; }
.cpw-specs table tr:last-child th,
.cpw-specs table tr:last-child td { border-bottom: 0 !important; }

/* Veelgestelde vragen */
.cpw-faq { display: flex; flex-direction: column; gap: 8px; font-family: Inter, sans-serif; }
.cpw-faq-item { background: #fff; border: 1px solid var(--cpw-lijn); }
.cpw-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 22px;
	font-size: 17px;
	font-weight: 600;
	color: var(--cpw-inkt);
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.cpw-faq-item summary::-webkit-details-marker { display: none; }
.cpw-faq-item summary::after { content: "+"; font-weight: 400; }
.cpw-faq-item[open] summary::after { content: "–"; }
.cpw-faq-item summary:focus-visible { outline: 2px solid var(--cpw-petrol); outline-offset: 2px; }
.cpw-faq-item p { margin: 0; padding: 0 22px 20px; font-size: 16px; line-height: 1.6; color: var(--cpw-tekst); }

/* Projecten */
.cpw-projecten-kop {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 20px;
}
.cpw-projecten-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cpw-project { display: flex; flex-direction: column; gap: 10px; color: var(--cpw-inkt); text-decoration: none; font-family: Inter, sans-serif; }
.cpw-project-foto { position: relative; display: block; background: var(--cpw-lijn); }
.cpw-project-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cpw-project-titel { font-size: 16px; }
.cpw-project:hover .cpw-project-titel { color: var(--cpw-petrol); }

/* Labels */
.cpw-badge {
	display: inline-block;
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 10px;
	line-height: 1.2;
}
.cpw-project-foto .cpw-badge { position: absolute; top: 12px; left: 12px; }
.cpw-badge--petrol { background: var(--cpw-petrol); color: #fff; }
.cpw-badge--groen { background: var(--cpw-groen); color: #fff; }
.cpw-badge--oranje { background: var(--cpw-oranje); color: #fff; }
.cpw-badge--wit { background: #fff; color: #000; }

/* Productkaartje */
.cpw-kaart { color: var(--cpw-inkt); text-decoration: none; }
.cpw-kaart-foto { position: relative; overflow: hidden; background: var(--cpw-lijn); }
.cpw-kaart-foto img.cpw-kaart-img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.cpw-kaart:hover .cpw-kaart-img { transform: scale(1.03); }
.cpw-kaart-labels {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.cpw-kaart-tekst { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; font-family: Inter, sans-serif; }
.cpw-kaart-eyebrow { font-size: 12px; }
.cpw-kaart-titel {
	margin: 0 !important;
	font-family: Inter, sans-serif !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--cpw-inkt) !important;
}
.cpw-kaart:hover .cpw-kaart-titel { color: var(--cpw-petrol) !important; }
.cpw-kaart-meta { font-size: 14px; color: var(--cpw-grijs); }
.cpw-kaart-prijs { margin-top: 6px; font-size: 14px; color: var(--cpw-grijs); }
.cpw-kaart-prijs .amount { font-size: 19px; font-weight: 700; color: var(--cpw-petrol); }

/* Showroomkaart in het raster */
.cpw-showroomkaart { color: #fff; text-decoration: none; }
.cpw-showroomkaart:hover { background-color: var(--cpw-petrol-donker) !important; }

/* Look-tegels boven het overzicht */
.cpw-looks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	font-family: Inter, sans-serif;
}
.cpw-look { display: flex; flex-direction: column; gap: 8px; color: var(--cpw-inkt); text-decoration: none; }
.cpw-look-foto { display: block; overflow: hidden; background: var(--cpw-lijn); }
.cpw-look-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .3s ease; }
.cpw-look:hover img { transform: scale(1.03); }
.cpw-look-naam { font-weight: 600; font-size: 15px; }
.cpw-look-aantal { color: var(--cpw-grijs); font-weight: 400; }

/* Vaste balk onderaan op mobiel */
.cpw-mobiele-balk {
	position: fixed !important;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	width: 100% !important;
	margin: 0 !important;
	background: #fff;
	padding: 10px 16px !important;
	box-shadow: 0 -3px 12px rgba(0, 0, 0, .12);
}
.cpw-mobiele-balk .elementor-button { width: 100%; justify-content: center; }

/* Voorrang boven de standaard linkkleur van het Elementor-thema */
body a.cpw-formaat,
body a.cpw-formaat strong,
body a.cpw-project,
body a.cpw-look,
body a.cpw-kaart,
body .cpw-kaart a { color: var(--cpw-inkt); text-decoration: none; }
body a.cpw-formaat:hover,
body a.cpw-formaat:hover strong { color: var(--cpw-petrol); }
body a.cpw-link { color: var(--cpw-petrol); }
body a.cpw-link:hover { color: var(--cpw-petrol-donker); }
body a.cpw-showroomkaart,
body a.cpw-showroomkaart * { color: #fff; }

@media (max-width: 767px) {
	body.single-product,
	body.tax-product_cat,
	body.post-type-archive-product { padding-bottom: 76px; }

	.cpw-h2 { font-size: 24px; }
	.cpw-showroom { padding: 16px; gap: 14px; }
	.cpw-john-foto { width: 64px !important; height: 64px !important; flex-basis: 64px; }
	.cpw-formaten-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cpw-formaat { min-width: 0; padding: 10px; }
	.cpw-service li { padding: 14px 16px; }
	.cpw-faq-item summary { padding: 15px 16px; font-size: 16px; }
	.cpw-faq-item p { padding: 0 16px 16px; font-size: 15px; }
	.cpw-looks { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 4px; }
	.cpw-look { flex: 0 0 104px; }
	.cpw-look-aantal { display: none; }
	.cpw-kaart-titel { font-size: 15px !important; }
	.cpw-kaart-meta { font-size: 13px; }
	.cpw-kaart-prijs .amount { font-size: 16px; }
	.cpw-kaart-labels { left: 8px; bottom: 8px; }
	.cpw-kaart-labels .cpw-badge { font-size: 11px; padding: 4px 7px; }
	.cpw-projecten-grid { display: flex; overflow-x: auto; gap: 10px; }
	.cpw-project { flex: 0 0 260px; }
}

.cpw-project-meta { font-size: 14px; color: var(--cpw-petrol); margin-top: -6px; }