/*
Theme Name:   Valoir
Theme URI:    https://www.valoir.nl
Description:  Child theme voor Valoir: monochrome huisstijl (onyx, grafiet, staal, zilver, mist, wit) met Bodoni Moda en Jost, afgestemd op WooCommerce.
Author:       Valoir
Template:     twentytwentyfive
Version:      1.4.0
Requires at least: 6.7
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  valoir
*/

/* ---------- Basis ---------- */

.valoir-label {
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Secundaire link: zilveren onderstreping, onyx bij hover */
.is-style-valoir-underline a,
a.valoir-underline {
	border-bottom: 1px solid var(--wp--preset--color--zilver);
	padding-bottom: 4px;
}
.is-style-valoir-underline a:hover,
a.valoir-underline:hover {
	border-bottom-color: currentColor;
}

/* Lichte knopvariant (op donkere vlakken) */
.wp-block-button.is-style-valoir-light .wp-block-button__link {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--onyx);
}
.wp-block-button.is-style-valoir-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--zilver);
	color: var(--wp--preset--color--onyx);
}

/* Fotoplaatshouders in de patronen; verdwijnen zodra je een eigen afbeelding plaatst */
.valoir-placeholder {
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	padding: 16px;
	font-size: 13px;
	line-height: 20px;
}

/* ---------- Header ---------- */

.valoir-announcement p {
	margin: 0;
}
.valoir-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--onyx);
}
.valoir-logo img {
	display: block;
	height: 28px;
	width: auto;
}
@media (max-width: 600px) {
	.valoir-logo img {
		height: 20px;
	}
}

/* ---------- WooCommerce ---------- */

/* Productkaarten: geen rondingen, geen schaduw, beeld op mist */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-product {
	text-align: left;
}
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
	background: var(--wp--preset--color--mist);
	border-radius: 0;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-components-product-name,
.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 22px;
	line-height: 28px;
	padding: 16px 0 4px;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.wc-block-components-product-price {
	color: var(--wp--preset--color--onyx);
	font-weight: 500;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.wc-block-components-product-price del {
	color: var(--wp--preset--color--staal);
	font-weight: 400;
	opacity: 1;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	text-decoration: none;
}

/* Sale-badge in plaats van rood: zwart label */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--onyx);
	color: var(--wp--preset--color--wit);
	border: 0;
	border-radius: 0;
	min-height: 0;
	min-width: 0;
	line-height: 16px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Alle WooCommerce-knoppen in Valoir-stijl */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button:not(.is-link),
.wp-block-button__link.add_to_cart_button {
	background: var(--wp--preset--color--onyx);
	color: var(--wp--preset--color--wit);
	border: 0;
	border-radius: 0;
	padding: 16px 32px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	line-height: 1.33;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--grafiet);
	color: var(--wp--preset--color--wit);
}
.woocommerce div.product form.cart .button {
	min-height: 56px;
	width: 100%;
}

/* Maatkeuze (dropdown); met een swatch-plugin worden dit knoppen */
.woocommerce div.product form.cart .variations select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
	border: 1px solid var(--wp--preset--color--staal);
	border-radius: 0;
	background: var(--wp--preset--color--wit);
	min-height: 48px;
	padding: 0 16px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
}
.woocommerce div.product form.cart .variations th label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Tabs op de productpagina als rustige lijst */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--zilver);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 24px 0 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 12px 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 1px solid var(--wp--preset--color--onyx);
}

/* Meldingen: zwart-wit, geen paars of groen */
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
	border-top-color: var(--wp--preset--color--onyx);
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--onyx);
	border-radius: 0;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--onyx);
}

/* Maattabel */
.valoir-maattabel table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
}
.valoir-maattabel th,
.valoir-maattabel td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--zilver);
	padding: 12px 16px 12px 0;
	text-align: left;
}
.valoir-maattabel thead th {
	border-bottom-color: var(--wp--preset--color--onyx);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* ---------- Nieuwsbrief ---------- */

.valoir-nieuwsbrief {
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
}
.valoir-nieuwsbrief__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.valoir-nieuwsbrief input[type="email"] {
	flex: 1 1 260px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--staal);
	border-radius: 0;
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--onyx);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
}
.valoir-nieuwsbrief input[type="email"]:focus {
	outline: 2px solid var(--wp--preset--color--onyx);
	outline-offset: 2px;
}
.valoir-nieuwsbrief button {
	min-height: 48px;
	cursor: pointer;
}
.valoir-nieuwsbrief__toestemming {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 12px;
	font-size: 13px;
	line-height: 20px;
	color: var(--wp--preset--color--staal);
}
.valoir-nieuwsbrief__toestemming input {
	margin-top: 3px;
	accent-color: var(--wp--preset--color--onyx);
}
.valoir-nieuwsbrief__toestemming a {
	text-decoration: underline;
}
.valoir-nieuwsbrief__melding {
	padding: 16px;
	background: var(--wp--preset--color--mist);
	text-align: center;
}
.valoir-nieuwsbrief__honing {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* H1 als klein label in de hero */
h1.valoir-label {
	font-family: var(--wp--preset--font-family--sans);
}