.w-grid-item, .w-grid-item-h { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.w-grid-item, .w-grid-item-h, .w-grid-item-h > .w-vwrapper { overflow: visible !important; }
.w-grid-item-h > .w-vwrapper { position: relative; }

.w-grid-item.product .post_image {
	position: relative;
	aspect-ratio: 9 / 6!important;
	background: #F2ECE1;
	border-radius: 14px;
	overflow: hidden;
	transition: transform .5s cubic-bezier(.4, .2, .2, 1), box-shadow .4s ease;
	box-shadow:
		0 1px 2px rgba(31, 26, 42, 0.05),
		0 8px 24px -12px rgba(82, 63, 109, 0.18);
}
.w-grid-item .post_image > a,
.w-grid-item .post_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.w-grid-item .post_image img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.w-grid-item:hover .post_image {
	transform: translateY(-4px) !important;
	box-shadow:
		0 1px 2px rgba(31, 26, 42, 0.05),
		0 24px 48px -16px rgba(82, 63, 109, 0.32),
		0 8px 16px -8px rgba(184, 146, 72, 0.18);
}
.w-grid-item:hover .post_image img { transform: scale(1.04); }
.product-card-price {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 500;
	color: var(--purple-700);
	margin-top: 4px;
	font-feature-settings: "tnum";
}

/* Alleen de foto + knoppen bewegen bij hover. Item, wrappers en tekst blijven
   exact op hun plek (sommige grids/carousels liften anders het hele item). */
.w-grid-item:hover,
.w-grid-item:hover > .w-grid-item-h,
.w-grid-item:hover > .w-grid-item-h > .w-vwrapper,
.w-grid-item:hover .w-vwrapper > .w-vwrapper {
	transform: none !important;
}

/* donkere gradient onderlangs bij hover (leesbaarheid van de knop) */
.w-grid-item .post_image::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 60%, rgba(31, 26, 42, 0.20) 100%);
	opacity: 0;
	transition: opacity .3s ease;
}
.w-grid-item:hover .post_image::after { opacity: 1; }

/* Knop-overlay over de foto: de .w-html-wrapper die de add-to-cart-knop bevat.
   We mikken via :has() op de wrapper die de knop écht bevat (niet op een vast
   volgnummer als usg_html_2), zodat het blijft werken als je de grid-layout
   herschikt. Verschijnt bij hover en komt mee omhoog (-4px). */
.w-grid-item.product .w-html:has(.add_to_cart_button) {
	position: absolute;
	top: 0; left: 0; right: 0;
	aspect-ratio: 9 / 6;           /* zelfde vlak als de foto */
	margin: 0;
	z-index: 3;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s cubic-bezier(.4, .2, .2, 1);
	pointer-events: none;
}
.w-grid-item:hover .w-html:has(.add_to_cart_button) {
	opacity: 1;
	transform: translateY(-4px) !important;
	pointer-events: auto;
}

/* "Toevoegen aan winkelwagen" — frosted cream pil (.product-quick .btn).
   Gescoped tot de grid-kaart, zodat dezelfde shortcode elders normaal blijft. */
.w-grid-item.product .w-html .add_to_cart_button {
	position: absolute;
	left: 14px; right: 14px; bottom: 14px;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(250, 246, 240, 0.88) !important;
	color: #2A1F40 !important;
	border: 1px solid rgba(250, 246, 240, 0.4) !important;
	border-radius: 999px !important;
	padding: 11px 14px !important;
	font-family: var(--font-sans, 'Manrope', sans-serif) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	box-shadow: 0 8px 24px -8px rgba(31, 26, 42, 0.4);
	transition: background .2s ease, box-shadow .2s ease;
}
.w-grid-item.product .w-html .add_to_cart_button:hover {
	background: #fff !important;
	color: #2A1F40 !important;
	box-shadow: 0 12px 28px -8px rgba(31, 26, 42, 0.5);
}
.w-grid-item.product .w-html .add_to_cart_button.added { background: #C9A961 !important; }

/* Info: titel + prijs in ontwerpstijl, strak op elkaar */
.products-grid .w-grid-item .post_title,
.products-grid .w-grid-item .post_title a {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(22px, 1.5vw, 27px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.005em;
	color: #1F1A2A;
}
.w-grid-item .product_field.price,
.w-grid-item .price,
.w-grid-item .price .amount,
.w-grid-item .price .amount bdi {
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 500;
	color: #523F6D;
}

.w-grid-item .product-card-meta { margin-bottom: 6px; margin-left: 4px;}
.w-grid-item .post_title { margin-bottom: 4px !important; }
.w-grid-item .product_field.price { margin-top: 0 !important; }
/* Iets minder afstand tussen foto en tekstblok */
.w-grid-item-h > .w-vwrapper > .w-vwrapper { margin-top: 14px !important; }

.w-grid-item.outofstock .price,
.w-grid-item.outofstock .price .amount,
.w-grid-item.outofstock .price .amount bdi {
	color: #9A93A6;
	text-decoration: line-through;
}

.product-card-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 8px;
	min-height: 16px;
}


.product-card-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-sans, 'Manrope', sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}
.product-card-tag::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
	flex: none;
}
.product-card-tag.new,
.product-card-tag.special { color: #B89248; }            /* goud */
.product-card-tag.sold    { color: #5B5466; }            /* gedempt grijs-paars */

/* Categorie — zachte taupe, kleine caps */
.product-card-cat {
	font-family: var(--font-sans, 'Manrope', sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #9A93A6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.w-grid-item.product .w-html:has(.sold-badge) { position: absolute; top: 12px; left: 12px; z-index: 4; margin: 0; }
.w-grid-item.product .w-html:empty { display: none; }
.sold-badge {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 999px;
	background: rgba(42, 31, 64, 0.9);
	color: #FAF6F0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .01em;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 22px -8px rgba(31, 26, 42, 0.45);
}

/* Touch/mobiel: geen hover -> knop gewoon zichtbaar onder de foto */
@media (hover: none) {
	.w-grid-item.product .w-html:has(.add_to_cart_button) {
		position: static;
		aspect-ratio: auto;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
	.w-grid-item.product .w-html .add_to_cart_button {
		position: static;
		left: auto; right: auto; bottom: auto;
		width: 100%;
		margin-top: 12px;
	}
	.w-grid-item .post_image::after { display: none; }
}

.pagination.navigation { margin-top: 48px; }
.pagination.navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-sans, 'Manrope', sans-serif);
}
.pagination.navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 8px;
	border-radius: 999px;
	background: transparent;
	color: #2A1F40;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	transition: background .2s ease, color .2s ease;
}
.pagination.navigation a.page-numbers:hover {
	background: rgba(82, 63, 109, 0.10);
	color: #2A1F40;
}
/* Actieve pagina = gevulde paarse cirkel */
.pagination.navigation .page-numbers.current {
	width: 48px;
	background: #523F6D;
	color: #FFFFFF;
}
/* Beletselteken */
.pagination.navigation .page-numbers.dots {
	min-width: 20px;
	color: #8B8597;
	background: transparent;
}
.pagination.navigation .page-numbers.dots:hover { background: transparent; }

/* Vorige / Volgende = tekst met pijl (geen cirkel) */
.pagination.navigation .prev.page-numbers,
.pagination.navigation .next.page-numbers {
	width: auto;
	min-width: 0;
	gap: 10px;
	padding: 0 12px;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12px;
	font-weight: 600;
}
.pagination.navigation .prev.page-numbers::before {
	content: "\2190"; /* ← */
	font-size: 17px;
	line-height: 1;
}
.pagination.navigation .next.page-numbers::after {
	content: "\2192"; /* → */
	font-size: 17px;
	line-height: 1;
}
/* Eventuele lege Impreza-pseudo's neutraliseren (voorkomt extra tussenruimte) */
.pagination.navigation .next.page-numbers::before,
.pagination.navigation .prev.page-numbers::after { content: none; }

/* Impreza verbergt het label (font-size:0) en toont een eigen icoon.
   Wij tonen juist het wóórd "Vorige/Volgende" en onderdrukken dat icoon. */
.pagination.navigation .prev.page-numbers span,
.pagination.navigation .next.page-numbers span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.pagination.navigation .prev.page-numbers span::before,
.pagination.navigation .prev.page-numbers span::after,
.pagination.navigation .next.page-numbers span::before,
.pagination.navigation .next.page-numbers span::after {
	content: none;
	display: none;
}

.no-touch .pagination>:not(.custom) a.page-numbers:not(.current):hover { background: transparent!important;}

@media (max-width: 480px) {
	.pagination.navigation .page-numbers { min-width: 40px; height: 40px; font-size: 14px; }
	.pagination.navigation .prev.page-numbers,
	.pagination.navigation .next.page-numbers { padding: 0 8px; font-size: 11px; }

	.w-grid-item.product .w-html:has(.add_to_cart_button){display:none!important;}
}