/* LuxeFashion WooCommerce: winkel, categorie, productpagina, lege staten. */

/*
 * Productpagina-content krijgt hier zijn leesbare breedte. Stond voorheen op
 * de selector `.woocommerce`, maar die class staat niet alleen op een
 * wrapper-div — WooCommerce's eigen body_class() zet hem ook rechtstreeks op
 * <body> op elke winkel/categorie/productpagina. Daardoor werd <body> zelf
 * naar 1320px geboxt, en daarmee ook de header en de archiefbanner (allebei
 * kinderen van body). Nu specifiek op de echte contentwrapper van de
 * productpagina (main#lf-main > .ct-container-full), die Blocksy bewust
 * ongestyled/full-bleed laat.
 */
#lf-main .ct-container-full {
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 24px 64px;
}

/*
 * Winkel/categorie-archieven hebben geen eigen PHP-template (zoals de
 * homepage/over ons/contact wel hebben) — WooCommerce/Blocksy rendert ze via
 * Blocksy's eigen archiefbanner (.hero-section) en containersysteem
 * (.ct-container). Dit blok stijlt Blocksy's eigen structuur zodat
 * winkel/categorie er hetzelfde uitzien als de rest van de site, zonder de
 * WooCommerce-loop/paginering/sortering zelf aan te raken.
 */
.hero-section[data-type="type-2"] {
	background-color: var(--lf-deep) !important;
	background-image: none !important;
	min-height: 0;
}
.hero-section[data-type="type-2"] > figure {
	display: none; /* categoriebanner gebruikt anders een willekeurige productfoto als achtergrond */
}
.hero-section[data-type="type-2"] > [class*="ct-container"] {
	min-height: 0;
	padding: 40px 24px !important;
}
.hero-section[data-type="type-2"] .page-title {
	color: var(--lf-on-dark) !important;
}
.hero-section[data-type="type-2"] .term-description {
	color: var(--lf-on-dark-muted);
}

/* Contentbreedte gelijktrekken met de rest van de site (Blocksy's eigen container stond op 1290px). */
#lf-main .ct-container:not(.ct-container-narrow) {
	max-width: 1400px;
}

/* ---------- Paginatitel (shop/categorie) ---------- */
.woocommerce-products-header {
	margin-bottom: 28px;
}
.woocommerce-products-header__title,
.page-title {
	font-family: var(--lf-font-heading);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 600;
	color: var(--lf-ink);
	margin: 0 0 8px;
}
.term-description {
	font-family: var(--lf-font-body);
	font-size: 14px;
	color: var(--lf-muted);
	max-width: 60ch;
}

/* Categorielabel onder de productnaam (winkel-, categorie- en gerelateerde-productenraster). */
.entry-meta .meta-categories a {
	color: var(--lf-muted);
}

/* ---------- Sorteren ---------- */
.woocommerce-ordering {
	margin: 0 0 28px;
}
/*
 * Selector matcht Blocksy's eigen .woo-listing-top .woocommerce-ordering
 * select (zelfde specificiteit als hun basisregel height:40px/font-size:14px)
 * zodat onze breedte/padding daadwerkelijk wint — met alleen ".woocommerce-
 * ordering select" verloor dat eerder van Blocksy's eigen, specifiekere
 * regel, vandaar het te brede vakje. Bewust in een @media min-width:690px
 * gezet: Blocksy schakelt de select onder 690px zelf om naar een compacte,
 * onzichtbare 34x34px icoon-knop (het sorteericoontje ernaast doet het
 * zichtbare werk) — dat gedrag laten we intact.
 */
@media (min-width: 690px) {
	.woo-listing-top .woocommerce-ordering select {
		max-width: 220px;
		height: auto;
		padding: 10px 32px 10px 14px;
		border: 1px solid var(--lf-line);
		background: #FFFFFF;
		font-family: var(--lf-font-body);
		font-size: 13px;
		line-height: 1.4;
		color: var(--lf-ink);
	}
}
.woocommerce-result-count {
	font-family: var(--lf-font-body);
	font-size: 13px;
	color: var(--lf-muted);
}

/* ---------- Productraster ---------- */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.products li.product {
	margin: 0 !important;
	position: relative;
}
ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	color: var(--lf-ink);
}
/*
 * Hele kaart klikbaar via de "stretched link"-techniek: de producttitel
 * blijft de enige echte link (geen genest anker), en dit ::after-element
 * spant zich via position:absolute + inset:0 uit over ul.products
 * li.product (die al position:relative heeft), zodat een klik overal op de
 * kaart naar de productpagina gaat.
 */
ul.products li.product a.woocommerce-LoopProduct-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: #F1F1EE;
	margin-bottom: 12px;
	transition: transform 0.4s ease;
}
/* :hover/:focus-within op li.product (niet op de losse links): de stretched
   link ligt boven de andere elementen, dus een a:hover-selector op de
   onderliggende beeld-link zou nooit meer vuren. */
ul.products li.product:hover img {
	transform: scale(1.03);
}
ul.products li.product a.woocommerce-LoopProduct-link:focus-visible {
	outline: none;
}
ul.products li.product:focus-within {
	outline: 2px solid var(--lf-ink);
	outline-offset: 4px;
}
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--lf-font-body);
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 4px;
}
ul.products li.product .price {
	font-family: var(--lf-font-body);
	font-size: 14px;
	color: var(--lf-muted);
}
ul.products li.product .price ins { text-decoration: none; color: var(--lf-ink); font-weight: 600; }
ul.products li.product .price del { opacity: 0.6; }
ul.products li.product .star-rating { display: none; }

ul.products li.product.outofstock img { opacity: 0.55; }
ul.products li.product.outofstock .woocommerce-loop-product__title::after {
	content: 'Uitverkocht';
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.4px;
	background: var(--lf-line);
	color: var(--lf-ink);
}

/* Custom sale badge (Code Snippet "salebadge") */
.custom-sale-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--lf-sage);
	color: #FFFFFF;
	font-family: var(--lf-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	white-space: nowrap;
}
.custom-sale-badge__percent {
	display: inline-block;
	padding: 1px 6px;
	background: var(--lf-dark);
	border-radius: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2px;
}
@media (max-width: 480px) {
	.custom-sale-badge {
		font-size: 10px;
		padding: 3px 8px;
		gap: 5px;
	}
	.custom-sale-badge__percent {
		font-size: 9px;
		padding: 1px 5px;
	}
}

@media (max-width: 960px) {
	ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	ul.products { gap: 14px; }
}

/* ---------- Lege staat ---------- */
.lf-empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 64px 24px;
}
.lf-empty-state p {
	font-family: var(--lf-font-body);
	color: var(--lf-muted);
	margin: 0 0 20px;
}

/* Productpagina-opmaak zit in assets/css/product.css (alleen daar geladen,
   via lf_enqueue_assets()). */

/*
 * ---------- Voortgangsbalk gratis verzending ----------
 * Herbruikbare component (lf_render_free_shipping_bar() in
 * inc/woocommerce.php): getoond in zowel de mini-cart als op de
 * winkelwagenpagina (via lf_free_shipping_progress_notice(), gehaakt op
 * woocommerce_proceed_to_checkout). Hier sitewide gestyled i.p.v. in
 * cart-checkout.css, want shop.css laadt op elke pagina zodra WooCommerce
 * actief is en de mini-cart staat sitewide in footer.php.
 */
.lf-shipping-bar {
	margin: 0 0 20px;
	font-family: var(--lf-font-body);
}
.lf-shipping-bar__label {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--lf-muted);
	text-align: center;
}
.lf-shipping-bar.is-reached .lf-shipping-bar__label {
	color: var(--lf-sage);
	font-weight: 600;
}
.lf-shipping-bar__track {
	height: 6px;
	border-radius: 3px;
	background: #F1F1EE;
	overflow: hidden;
}
.lf-shipping-bar__fill {
	height: 100%;
	border-radius: 3px;
	background: var(--lf-mint);
	transition: width 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
	.lf-shipping-bar__fill { transition: none; }
}

/*
 * ---------- Mini-cart (pop-up na "toevoegen aan winkelwagen") ----------
 * Statische omlijsting staat sitewide in footer.php met [hidden]; header.js
 * zet .is-open op woocommerce's eigen "added_to_cart"-event. Inhoud wordt
 * ververst via WooCommerce's bestaande add-to-cart-fragments (geen eigen
 * AJAX-laag).
 */
.lf-mini-cart[hidden] { display: none; }
body.lf-no-scroll { overflow: hidden; }
.lf-mini-cart {
	position: fixed;
	inset: 0;
	z-index: 9999;
}
.lf-mini-cart__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 19, 18, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
	border: none;
	padding: 0;
	cursor: pointer;
}
.lf-mini-cart__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(400px, 100%);
	background: #FFFFFF;
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	padding: 24px;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
}
.lf-mini-cart.is-open .lf-mini-cart__backdrop { opacity: 1; }
.lf-mini-cart.is-open .lf-mini-cart__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
	.lf-mini-cart__backdrop,
	.lf-mini-cart__panel { transition: none; }
}
.lf-mini-cart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 20px;
}
.lf-mini-cart__title {
	font-family: var(--lf-font-heading);
	font-size: 19px;
	font-weight: 600;
	color: var(--lf-ink);
}
.lf-mini-cart__close {
	background: none !important;
	border: none !important;
	padding: 4px !important;
	font-size: 24px;
	line-height: 1;
	color: var(--lf-muted) !important;
	cursor: pointer;
}
.lf-mini-cart__added {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
}
.lf-mini-cart__added-img {
	width: 56px;
	height: 70px;
	object-fit: cover;
	background: #F1F1EE;
	flex-shrink: 0;
}
.lf-mini-cart__added-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.lf-mini-cart__added-label {
	font-size: 11px;
	color: var(--lf-muted);
}
.lf-mini-cart__added-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--lf-ink);
}
.lf-mini-cart__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 20px;
	padding-top: 16px;
	border-top: 1px solid var(--lf-line);
	font-size: 14px;
	color: var(--lf-ink);
}
.lf-mini-cart__subtotal span:last-child { font-weight: 700; }
.lf-mini-cart__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}
.lf-mini-cart__btn {
	display: block;
	width: 100%;
	padding: 15px;
	text-align: center;
	font-family: var(--lf-font-body);
	font-size: 14px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	text-decoration: none;
}
.lf-mini-cart__btn--primary {
	background: var(--lf-mint) !important;
	color: var(--lf-ink) !important;
}
.lf-mini-cart__btn--primary:hover,
.lf-mini-cart__btn--primary:focus {
	background: var(--lf-mint-dark) !important;
	color: var(--lf-ink) !important;
	opacity: 1;
}
.lf-mini-cart__btn--secondary {
	background: #FFFFFF !important;
	color: var(--lf-ink) !important;
	border: 1px solid var(--lf-line) !important;
}
.lf-mini-cart__btn--secondary:hover {
	background: #F7F7F4 !important;
}
.lf-mini-cart__btn:focus-visible {
	outline: 2px solid var(--lf-ink);
	outline-offset: 2px;
}
@media (max-width: 480px) {
	.lf-mini-cart__panel { width: 100%; padding: 20px; }
}

/* ---------- Related products ---------- */
.related.products {
	grid-column: 1 / -1;
	margin-top: 56px;
	border-top: 1px solid var(--lf-line);
	padding-top: 40px;
}
.related.products > h2 {
	font-family: var(--lf-font-heading);
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 24px;
}