/*
Theme Name: Style Mode Lochem
Theme URI: https://stylemodelochem.nl/
Author: TMS Media
Author URI: https://tmsmedia.nl/
Description: Child theme van Bagberry voor Style Mode Lochem. Damesmode uit Lochem. Alle maatwerk staat hier, zodat updates van het moederthema niets overschrijven.
Template: bagberry
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stylemode-lochem
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style
*/

/* ==========================================================================
   Style Mode Lochem — maatwerk
   --------------------------------------------------------------------------
   Kleuren en lettertypes staan in theme.json, niet hier.
   Dit bestand is voor CSS die je in theme.json niet kwijt kunt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typografie
   -------------------------------------------------------------------------- */

/* Koppen in de serif van de gevelvlaggen, met wat meer lucht eromheen. */
.wp-block-post-title,
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3 {
	font-family: var(--wp--preset--font-family--heading-font);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Navigatie en labels: klein, rustig gespatieerd. */
.wp-block-navigation .wp-block-navigation-item__label {
	letter-spacing: var(--wp--custom--typography--letter-spacing--menu);
	text-transform: uppercase;
	font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   2. Knoppen
   -------------------------------------------------------------------------- */

.wp-block-button__link,
.wc-block-components-button,
button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button {
	border-radius: 0;
	letter-spacing: var(--wp--custom--typography--letter-spacing--button);
	text-transform: uppercase;
	font-size: 0.8125rem;
	font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Omlijnde variant: lijn in plaats van vlak. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--primary);
	border-width: 1px;
}

/* --------------------------------------------------------------------------
   3. Productoverzicht
   -------------------------------------------------------------------------- */

/* Modefoto's zijn staand. 3:4 houdt de rijen gelijk zonder bijsnijden. */
.wc-block-grid__product-image img,
.wp-block-post-featured-image img,
ul.products li.product img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}

/* Rustige hover: het beeld doet het werk, niet het effect. */
.wc-block-grid__product-image,
ul.products li.product a img {
	overflow: hidden;
}

.wc-block-grid__product-image img,
ul.products li.product a img {
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.wc-block-grid__product:hover .wc-block-grid__product-image img,
ul.products li.product:hover a img {
	transform: scale(1.03);
}

/* Prijs mag niet schreeuwen. */
.woocommerce-Price-amount,
.wc-block-grid__product-price {
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   4. Merkenbalk (pattern: Merken van Style Mode Lochem)
   -------------------------------------------------------------------------- */

.sml-brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 4rem);
}

.sml-brands img {
	max-height: 46px;
	width: auto;
	opacity: 0.6;
	filter: grayscale(1);
	/* De logo's hebben een witte achtergrond; multiply laat die wegvallen
	   tegen elke lichte sectiekleur. */
	mix-blend-mode: multiply;
	transition: opacity 0.25s ease, filter 0.25s ease;
}

.sml-brands img:hover {
	opacity: 1;
	filter: grayscale(0);
}

@media (max-width: 600px) {
	.sml-brands img {
		max-height: 32px;
	}
}

/* --------------------------------------------------------------------------
   5. Toegankelijkheid
   -------------------------------------------------------------------------- */

/* Zichtbare focus voor toetsenbordgebruik — Bagberry laat dit weg. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}