/*
Theme Name: LouxLoux 2026
Theme URI: https://louxloux.nl
Author: LouxLoux
Description: Custom high-end theme for LouxLoux jewelry & fashion.
Version: 1.11.3
Requires PHP: 7.4
Text Domain: louxloux
*/

/* Base reset — kept minimal, design tokens load separately via functions.php */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-2);
	padding-bottom: var(--space-2);
}

.site-header__logo {
	display: block;
	flex-shrink: 0;
}

.site-header__logo img {
	display: block;
	height: 156px;
	width: auto;
}

.site-header__nav ul {
	display: flex;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__nav a {
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.site-header__actions {
	display: flex;
	gap: var(--space-3);
}

.site-header__icon {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	position: relative;
}

.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-2);
}

.mobile-menu-toggle__bar {
	width: 22px;
	height: 2px;
	background: var(--color-text);
}

@media (max-width: 780px) {
	.site-header__logo img {
		height: 108px;
	}
	.site-header__nav {
		display: none;
		width: 100%;
		order: 3;
	}
	.site-header__nav.is-open {
		display: block;
	}
	.site-header__nav ul {
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-3) 0;
	}
	.mobile-menu-toggle {
		display: flex;
	}
	.site-header__inner {
		flex-wrap: wrap;
	}
}

.site-footer {
	margin-top: var(--space-6);
	border-top: 1px solid var(--color-line);
	background: var(--color-bg-raised);
	padding-top: var(--space-6);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--space-5);
}

.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__col li {
	margin-bottom: var(--space-2);
}

.site-footer__col a {
	text-decoration: none;
	color: var(--color-text-soft);
}

.site-footer__social {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.site-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	color: var(--color-text-soft);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer__social-icon:hover,
.site-footer__social-icon:focus-visible {
	color: var(--color-text);
	border-color: var(--color-accent);
}

.site-footer__bottom {
	margin-top: var(--space-5);
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-line);
	font-size: 13px;
	color: var(--color-text-soft);
}

@media (max-width: 780px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
}

.hero {
	position: relative;
	/* Vol-scherm hero (Paris-referentie): vult samen met de header exact de
	   eerste viewport en maakt daarna al scrollend plaats voor de content.
	   --header-h wordt door interactions.js op de echte headerhoogte gezet;
	   de fallback is een bewuste onderschatting zodat de fold zonder JS in
	   elk geval volledig gevuld blijft. */
	min-height: calc(100vh - var(--header-h, 64px));
	min-height: calc(100svh - var(--header-h, 64px));
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--color-text);
}

.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transform: scale(1.07);
	transition: transform 2.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero.is-visible .hero__bg {
	transform: scale(1);
}

.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(20, 15, 10, 0.62) 0%, rgba(20, 15, 10, 0.28) 48%, rgba(20, 15, 10, 0) 72%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.hero__content {
	position: relative;
	max-width: 480px;
	text-align: left;
}

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	pointer-events: none;
}

.hero__scroll::after {
	content: '';
	width: 1px;
	height: 56px;
	background: linear-gradient(180deg, var(--color-gold) 0%, rgba(201, 165, 102, 0) 100%);
	transform-origin: top;
	animation: hero-scroll-line 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-scroll-line {
	0% { transform: scaleY(0); opacity: 1; }
	55% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

.eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-gold);
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-gold);
}

.hero__title {
	/* Expliciet serif: op slides 2/3 is de titel een <p> (één h1 per pagina)
	   en die zou anders terugvallen op de body-sans. */
	font-family: var(--font-serif);
	font-size: clamp(48px, 7.5vw, 92px);
	font-weight: 340;
	letter-spacing: 0.01em;
	line-height: 1.05;
	color: #fff;
	margin-bottom: var(--space-3);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

.hero__subtitle {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.86);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
	margin-bottom: var(--space-4);
}

.btn {
	display: inline-block;
	padding: 14px 32px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.08em;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--light {
	border: 1px solid #fff;
	color: #fff;
}

.btn--light:hover {
	background: #fff;
	color: var(--color-text);
}

.btn--dark {
	border: 1px solid var(--color-accent);
	color: var(--color-text);
}

.btn--dark:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

@media (max-width: 780px) {
	.hero__scrim {
		background: linear-gradient(180deg, rgba(20, 15, 10, 0.35) 0%, rgba(20, 15, 10, 0.7) 100%);
	}
	.hero__content {
		max-width: 100%;
		text-align: center;
		margin: 0 auto;
	}
	.hero__content .eyebrow {
		border-bottom: none;
		padding-bottom: 0;
	}
	.hero__title {
		font-size: clamp(40px, 11vw, 52px);
	}
}

.featured {
	background: var(--color-accent-soft);
	padding: var(--space-6) 0;
	overflow: hidden;
}

.featured__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: center;
}

.featured__image {
	position: relative;
}

.featured__image::before {
	content: '';
	position: absolute;
	top: -16px;
	left: -16px;
	right: 16px;
	bottom: 16px;
	border: 1px solid var(--color-gold);
	z-index: 0;
}

.featured__image img {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}

.featured__content .eyebrow {
	color: var(--color-text);
	border-bottom-color: var(--color-text);
}

.featured__title {
	font-family: var(--font-serif);
	font-size: 40px;
	line-height: 1.15;
	margin-bottom: var(--space-3);
}

.featured__excerpt {
	color: var(--color-text-soft);
	max-width: 40ch;
	margin-bottom: var(--space-3);
}

.featured__price {
	font-size: 20px;
	margin-bottom: var(--space-4);
}

.featured__price del {
	color: var(--color-text-soft);
	margin-right: var(--space-2);
}

.featured__price ins {
	text-decoration: none;
	color: var(--color-text);
}

@media (max-width: 780px) {
	.featured__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.featured__image img {
		aspect-ratio: 5 / 6;
	}
}

.trust-bar {
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	padding: var(--space-4) 0;
}

.trust-bar__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

/* Standaard/homepage-variant toont 3 items (geen herroepingsrecht-item). */
.trust-bar__inner--3 {
	grid-template-columns: repeat(3, 1fr);
}

.trust-bar__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.trust-bar__item p {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--color-text-soft);
}

@media (max-width: 780px) {
	.hero__title { font-size: clamp(40px, 11vw, 52px); }
	.trust-bar__inner {
		grid-template-columns: 1fr 1fr;
	}
}

.editorial {
	padding: var(--space-6) 0;
}

.editorial__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	align-items: center;
}

.editorial__link {
	text-decoration: underline;
	color: var(--color-accent-text);
}

.bestsellers {
	padding-bottom: var(--space-6);
}

.bestsellers__title {
	text-align: center;
	margin-bottom: var(--space-5);
}

.bestsellers__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

.product-card {
	position: relative;
}

.product-card__link {
	text-decoration: none;
	color: var(--color-text);
	display: block;
}

.product-card__wishlist {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 2;
}

.product-card__wishlist .woosw-btn {
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--color-text);
	font-size: 0;
	line-height: 32px;
	cursor: pointer;
	position: relative;
}

.product-card__wishlist .woosw-btn::before {
	content: "\2661";
	font-size: 16px;
}

.product-card__wishlist .woosw-btn.woosw-added::before {
	content: "\2665";
}

.product-card__image {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--color-bg-raised);
	margin-bottom: var(--space-2);
}

.product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-card__image-alt {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.product-card:hover .product-card__image-alt {
	opacity: 1;
}

.product-card__title {
	display: block;
	font-size: 15px;
	margin-bottom: 2px;
}

.product-card__price {
	display: block;
	font-size: 13px;
	color: var(--color-text-soft);
}

@media (max-width: 780px) {
	.editorial__inner {
		grid-template-columns: 1fr;
	}
	.bestsellers__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

.shop-archive {
	padding-top: var(--space-5);
	padding-bottom: var(--space-6);
}

.shop-archive__breadcrumb {
	font-size: 13px;
	color: var(--color-text-soft);
	margin-bottom: var(--space-4);
}

.shop-archive__breadcrumb a {
	color: var(--color-text-soft);
	text-decoration: underline;
}

.shop-archive__header {
	margin-bottom: var(--space-5);
}

.shop-archive__title {
	font-size: 36px;
	margin-bottom: var(--space-2);
}

.shop-archive__header .term-description {
	max-width: 640px;
	color: var(--color-text-soft);
}

.shop-archive__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-line);
	font-size: 13px;
	color: var(--color-text-soft);
}

.shop-archive__toolbar .woocommerce-notices-wrapper {
	flex: 1 0 100%;
	order: -1;
}

.shop-archive .woocommerce-ordering select {
	appearance: none;
	background: var(--color-bg-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232B231C'/%3E%3C/svg%3E") no-repeat right 12px center;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	padding: 8px 32px 8px 12px;
	font-size: 13px;
	color: var(--color-text);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.shop-archive .woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--color-accent);
}

.shop-archive ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
	justify-content: center;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce's own core CSS adds a float-clearfix ::before/::after to
   ul.products (content:" "; display:table;) — under our display:grid these
   become real (invisible) grid items, silently shifting every real product
   over by one track. Neutralize them so the grid only ever contains the
   actual <li> products. */
.shop-archive ul.products::before,
.shop-archive ul.products::after {
	content: none;
	display: none;
}

.shop-archive ul.products li.product {
	margin: 0;
	width: auto;
	float: none;
}

.woocommerce-pagination {
	margin-top: var(--space-5);
	text-align: center;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: inline-block;
	min-width: 36px;
	padding: 8px;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	color: var(--color-text);
	font-size: 13px;
}

.woocommerce-pagination .current {
	background: var(--color-text);
	color: var(--color-bg);
	border-color: var(--color-text);
}

@media (max-width: 780px) {
	.shop-archive ul.products {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}
	.shop-archive__toolbar {
		flex-wrap: wrap;
	}
}

.product-page {
	padding-top: var(--space-5);
	padding-bottom: var(--space-6);
}

.product-page .woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--color-text-soft);
	margin-bottom: var(--space-4);
}

.product-page .woocommerce-breadcrumb a {
	color: var(--color-text-soft);
	text-decoration: underline;
}

.product-page div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: start;
}

.product-page .woocommerce-product-gallery {
	position: relative;
}

.product-page .woocommerce-product-gallery__image {
	border-radius: 2px;
	overflow: hidden;
}

.product-page .flex-control-thumbs {
	display: flex;
	gap: var(--space-2);
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
}

.product-page .flex-control-thumbs li {
	width: 72px;
}

.product-page .flex-control-thumbs img {
	border-radius: 2px;
	border: 1px solid transparent;
	cursor: pointer;
}

.product-page .flex-control-thumbs img.flex-active {
	border-color: var(--color-accent);
}

.product-page .product_title {
	font-size: 32px;
	margin-bottom: var(--space-2);
}

.product-page p.price {
	font-size: 20px;
	margin-bottom: var(--space-4);
	color: var(--color-text) !important;
}

.product-page p.price del {
	color: var(--color-text-soft);
	margin-right: var(--space-2);
}

.product-page p.price ins {
	text-decoration: none;
}

.product-page .woocommerce-product-details__short-description {
	color: var(--color-text-soft);
	margin-bottom: var(--space-4);
}

.product-page form.cart {
	margin-bottom: var(--space-4);
}

.product-page .single_add_to_cart_button {
	display: inline-block;
	padding: 14px 40px;
	background: var(--color-text) !important;
	color: var(--color-bg) !important;
	border: none;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.product-page .single_add_to_cart_button:hover {
	opacity: 0.85;
}

.entry-summary .quantity input.qty {
	font-family: inherit;
	font-size: 14px;
	width: 70px;
	padding: 10px 12px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-bg-raised);
	color: var(--color-text);
	text-align: center;
	transition: border-color 0.2s ease;
}

.entry-summary .quantity input.qty:focus {
	outline: none;
	border-color: var(--color-accent);
}

/* Wishlist button on the product page — same button rendered by the
   Smart Wishlist plugin as the icon-only heart on product cards
   (see .product-card__wishlist .woosw-btn above), but here it sits
   directly in the summary with its own label, so it needs a distinct,
   more subdued treatment than the primary add-to-cart button. */
.entry-summary > .woosw-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding: 12px 24px;
	background: transparent;
	border: 1px solid var(--color-accent);
	border-radius: 2px;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.entry-summary > .woosw-btn::before {
	content: "\2661";
	font-size: 14px;
	line-height: 1;
}

.entry-summary > .woosw-btn:hover,
.entry-summary > .woosw-btn:focus-visible {
	background: var(--color-accent);
	color: var(--color-bg);
}

.entry-summary > .woosw-btn:focus-visible {
	outline: none;
}

.entry-summary > .woosw-btn.woosw-added {
	border-color: var(--color-gold);
	background: var(--color-accent-soft);
}

.entry-summary > .woosw-btn.woosw-added::before {
	content: "\2665";
}

.product-page .woocommerce-tabs {
	margin-top: var(--space-6);
	grid-column: 1 / -1;
}

.product-page .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-4);
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
	border-bottom: 1px solid var(--color-line);
}

.product-page .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--space-2) 0 var(--space-3);
	text-decoration: none;
	color: var(--color-text-soft) !important;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.product-page .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-text) !important;
	border-bottom: 2px solid var(--color-accent);
}

.related.products.shop-archive {
	grid-column: 1 / -1;
	margin-top: var(--space-6);
	padding: 0;
}

.related.products.shop-archive .shop-archive__title {
	font-size: 24px;
}

.related.products.shop-archive ul.products {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 780px) {
	.product-page div.product {
		grid-template-columns: 1fr;
	}
	.related.products.shop-archive ul.products {
		grid-template-columns: 1fr 1fr;
	}
}

.product-page table.variations {
	width: 100%;
	margin-bottom: var(--space-3);
}

.product-page table.variations tr {
	display: block;
	margin-bottom: var(--space-3);
}

.product-page table.variations label {
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-soft);
	margin-bottom: var(--space-2);
}

.product-page table.variations select {
	width: 100%;
	max-width: 320px;
	appearance: none;
	background: var(--color-bg-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232B231C'/%3E%3C/svg%3E") no-repeat right 12px center;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	padding: 10px 32px 10px 12px;
	font-size: 14px;
	color: var(--color-text);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.product-page table.variations select:focus {
	outline: none;
	border-color: var(--color-accent);
}

.product-page .woocommerce-variation-availability {
	margin: var(--space-2) 0 var(--space-3);
}

.product-page .woocommerce-variation-availability .stock.in-stock {
	color: var(--color-success);
	font-size: 13px;
}

.product-page .woocommerce-variation-availability .stock.out-of-stock {
	color: var(--color-error);
	font-size: 13px;
}

.product-page .woocommerce-variation-price .price {
	font-size: 20px;
	margin-bottom: var(--space-3);
}

.product-page a.reset_variations {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: 12px;
	color: var(--color-text-soft);
	text-decoration: underline;
}

.product-material-care {
	margin: var(--space-4) 0;
	padding: var(--space-3) 0;
	border-top: 1px solid var(--color-line);
}

.product-material-care__title {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--space-2);
}

.product-material-care p {
	color: var(--color-text-soft);
	font-size: 14px;
}

.product-personalization {
	margin-bottom: var(--space-4);
}

.product-personalization label {
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-soft);
	margin-bottom: var(--space-2);
}

.product-personalization__surcharge {
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-text);
}

.product-personalization input[type="text"] {
	width: 100%;
	max-width: 320px;
	padding: 10px 12px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	font-size: 14px;
	font-family: var(--font-sans);
}

.ring-guide {
	padding-top: var(--space-5);
	padding-bottom: var(--space-6);
	max-width: 720px;
}

.ring-guide__title {
	font-size: 36px;
	margin-bottom: var(--space-2);
}

.ring-guide__intro {
	color: var(--color-text-soft);
	margin-bottom: var(--space-5);
}

.ring-guide__section-title {
	font-size: 20px;
	margin-bottom: var(--space-3);
}

.ring-guide__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.ring-guide__step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-accent-soft);
	color: var(--color-text);
	font-size: 13px;
	margin-bottom: var(--space-2);
}

.ring-guide__calculator {
	background: var(--color-bg-raised);
	padding: var(--space-5);
	margin-bottom: var(--space-6);
	border: 1px solid var(--color-line);
	border-radius: 12px;
}

.ring-guide__calculator-label {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-soft);
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-line);
}

.ring-guide__calculator-title {
	font-family: var(--font-serif);
	font-size: 30px;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}

.ring-guide__calculator label[for] {
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-soft);
	margin-bottom: var(--space-2);
}

.ring-guide__calculator-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.ring-guide__calculator-row input {
	font-family: inherit;
	font-size: 20px;
	padding: 14px 18px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	width: 180px;
	background: var(--color-bg-raised);
	color: var(--color-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ring-guide__calculator-row input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
}

.ring-guide__result {
	font-family: var(--font-serif);
	font-size: 26px;
	color: var(--color-gold);
}

.ring-guide__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-5);
}

.ring-guide__table th,
.ring-guide__table td {
	text-align: left;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-line);
	font-size: 14px;
	transition: background 0.2s ease;
}

.ring-guide__table th {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
	color: var(--color-text-soft);
}

.ring-guide__table tr.is-match td {
	background: var(--color-gold);
	color: #fff;
	font-weight: 600;
}

.ring-guide__note {
	color: var(--color-text-soft);
}

@media (max-width: 780px) {
	.ring-guide__steps {
		grid-template-columns: 1fr;
	}
}

.content-page {
	padding-top: var(--space-5);
	padding-bottom: var(--space-6);
	max-width: 760px;
}

.content-page__title {
	font-size: 36px;
	margin-bottom: var(--space-5);
}

.content-page__body {
	color: var(--color-text);
	font-size: 15px;
	line-height: 1.8;
}

.content-page__body h2 {
	font-size: 22px;
	margin-top: var(--space-5);
	margin-bottom: var(--space-2);
}

.content-page__body h3 {
	font-size: 18px;
	margin-top: var(--space-4);
	margin-bottom: var(--space-2);
}

.content-page__body p {
	margin: 0 0 var(--space-3);
}

.content-page__body ul,
.content-page__body ol {
	margin: 0 0 var(--space-3);
	padding-left: 1.4em;
	color: var(--color-text);
}

.content-page__body li {
	margin-bottom: var(--space-1);
}

.content-page__body a {
	color: var(--color-text);
	text-decoration: underline;
}

.content-page__body strong {
	font-weight: 600;
}

.content-page__intro {
	color: var(--color-text-soft);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 var(--space-4);
	max-width: 52ch;
}

.contact-form {
	max-width: 480px;
}

.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__field {
	margin-bottom: var(--space-3);
}

.contact-form__field label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-soft);
	margin-bottom: var(--space-1);
}

.contact-form__field input,
.contact-form__field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-bg-raised);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 14px;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}

.contact-form__field textarea {
	resize: vertical;
}

.contact-form .btn {
	border: none;
	cursor: pointer;
	background: var(--color-text);
	color: var(--color-bg);
}

.contact-form .btn:hover {
	opacity: 0.85;
}

.contact-form__success {
	padding: var(--space-3);
	background: var(--color-bg-raised);
	border: 1px solid var(--color-success);
	color: var(--color-success);
	border-radius: 2px;
	max-width: 480px;
}

.contact-form__errors {
	padding: var(--space-3);
	background: var(--color-bg-raised);
	border: 1px solid var(--color-error);
	border-radius: 2px;
	max-width: 480px;
	margin-bottom: var(--space-3);
}

.contact-form__errors ul {
	margin: 0;
	padding-left: 1.2em;
	color: var(--color-error);
	font-size: 14px;
}

.faq-list {
	max-width: 680px;
}

.faq-item {
	border-bottom: 1px solid var(--color-line);
	padding: var(--space-3) 0;
}

.faq-item__question {
	cursor: pointer;
	font-size: 16px;
	color: var(--color-text);
	list-style: none;
	padding-right: var(--space-4);
	position: relative;
}

.faq-item__question::-webkit-details-marker {
	display: none;
}

.faq-item__question::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 0;
	font-size: 18px;
	color: var(--color-text-soft);
}

.faq-item[open] .faq-item__question::after {
	content: '\2212';
}

.faq-item__answer {
	padding-top: var(--space-2);
	color: var(--color-text-soft);
	font-size: 14px;
	line-height: 1.7;
}

.faq-item__answer a {
	color: var(--color-text);
	text-decoration: underline;
}

.shop-cart {
	padding: var(--space-6) 0;
}

.shop-cart__title {
	margin-bottom: var(--space-4);
}

.shop-cart .cart-empty {
	margin-bottom: var(--space-4);
}

.shop-cart .return-to-shop .button {
	display: inline-block;
	padding: 14px 32px;
	border: 1px solid var(--color-accent);
	color: var(--color-text);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.08em;
	transition: background 0.2s ease, color 0.2s ease;
}

.shop-cart .return-to-shop .button:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

.shop-cart__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-4);
}

.shop-cart__table th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-soft);
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-line);
}

.shop-cart__table td {
	padding: var(--space-3) var(--space-2);
	border-bottom: 1px solid var(--color-line);
	vertical-align: middle;
}

.shop-cart__table .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
}

.shop-cart__table .product-name a {
	color: var(--color-text);
	font-family: var(--font-serif);
	text-decoration: none;
}

.shop-cart__table .remove {
	color: var(--color-text-soft);
	text-decoration: none;
	font-size: 20px;
}

.shop-cart__table .qty {
	width: 60px;
	padding: 8px;
	border: 1px solid var(--color-line);
	text-align: center;
}

.shop-cart__table .actions {
	border-bottom: none;
	padding-top: var(--space-4);
}

.shop-cart__table .actions .coupon {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	margin-right: var(--space-3);
}

/* WooCommerce core ships ".woocommerce-cart table.cart td.actions .coupon
   .input-text" with higher selector specificity than a normal theme rule
   can match here, so the coupon field is pinned by its unique WooCommerce
   id (#coupon_code) to guarantee this styling actually wins. */
.shop-cart__table .actions .input-text,
#coupon_code {
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-bg-raised);
	font-family: inherit;
	font-size: 14px;
	color: var(--color-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.shop-cart__table .actions .input-text:focus,
#coupon_code:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
}

.shop-cart__table .actions .coupon button.button {
	padding: 12px 20px;
	background: transparent;
	border: 1px solid var(--color-accent);
	border-radius: 2px;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.shop-cart__table .actions .coupon button.button:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

.shop-cart__collaterals {
	max-width: 420px;
	margin-left: auto;
}

.shop-cart__collaterals .cart_totals {
	background: var(--color-bg-raised);
	border: 1px solid var(--color-line);
	padding: var(--space-4);
}

.shop-cart__collaterals table {
	width: 100%;
}

.shop-cart__collaterals table th,
.shop-cart__collaterals table td {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-line);
}

.shop-cart__collaterals .order-total {
	font-family: var(--font-serif);
	font-size: 20px;
}

.shop-cart__collaterals .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: var(--space-3);
	padding: 16px;
	background: var(--color-text);
	color: var(--color-bg);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 14px;
	transition: background 0.2s ease;
}

.shop-cart__collaterals .checkout-button:hover {
	background: var(--color-accent);
}

@media (max-width: 780px) {
	.shop-cart__table thead {
		display: none;
	}
	.shop-cart__table tr {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		padding: var(--space-3) 0;
	}
	.shop-cart__table td {
		border-bottom: none;
		padding: 4px 0;
	}
	.shop-cart__table .actions {
		width: 100%;
	}
	.shop-cart__collaterals {
		max-width: 100%;
	}
}

.gift-wrap-option {
	padding: var(--space-3);
	border: 1px solid var(--color-line);
	margin-bottom: var(--space-3);
	background: var(--color-bg-raised);
}

.gift-wrap-option label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-serif);
	font-size: 15px;
	cursor: pointer;
}

.gift-wrap-option__note {
	margin: 4px 0 0 26px;
	font-size: 13px;
	color: var(--color-text-soft);
}

.mini-cart {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
}

.mini-cart.is-open {
	visibility: visible;
	/* De volledige-viewport container blijft click-through (pointer-events: none
	   overerft van .mini-cart) — alleen het zichtbare paneel zelf hoeft klikbaar
	   te zijn. Zonder dit ving deze container, ook al is-ie leeg/transparant,
	   elke klik ernaast op — inclusief knoppen op de onderliggende pagina (bv.
	   wishlist "Toevoegen aan winkelwagen"), zonder ze door te laten. */
}

.mini-cart.is-open .mini-cart__panel {
	pointer-events: auto;
}

.mini-cart__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(43, 35, 28, 0.4);
	opacity: 0;
	transition: opacity 0.25s ease;
	/* Puur visuele dimming, geen klik-om-te-sluiten meer (zie interactions.js) —
	   laat klikken gewoon door naar de onderliggende pagina (bv. wishlist-acties). */
	pointer-events: none;
}

.mini-cart.is-open .mini-cart__backdrop {
	opacity: 1;
}

.mini-cart__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 100%);
	background: var(--color-bg-raised);
	display: flex;
	flex-direction: column;
	padding: var(--space-4);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
}

.mini-cart.is-open .mini-cart__panel {
	transform: translateX(0);
}

.mini-cart__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-serif);
	font-size: 20px;
	margin-bottom: var(--space-4);
}

.mini-cart__close {
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--color-text);
}

.mini-cart__items {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.mini-cart__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: var(--space-3);
	align-items: center;
}

.mini-cart__item-image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
}

.mini-cart__item-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mini-cart__item-title {
	color: var(--color-text);
	text-decoration: none;
	font-size: 14px;
}

.mini-cart__item-qty {
	font-size: 13px;
	color: var(--color-text-soft);
}

.mini-cart__item-remove {
	color: var(--color-text-soft);
	text-decoration: none;
	font-size: 18px;
}

.mini-cart__subtotal {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-serif);
	font-size: 18px;
	border-top: 1px solid var(--color-line);
	padding-top: var(--space-3);
	margin-bottom: var(--space-3);
}

.mini-cart__cart-link,
.mini-cart__checkout-link {
	display: block;
	text-align: center;
	margin-bottom: var(--space-2);
}

.mini-cart__empty {
	color: var(--color-text-soft);
}

/* Shown when the AJAX add-to-cart call comes back with data.error (e.g. an
   out-of-stock race condition) — Taak 3, geparkeerd; opgelost in Taak 7. */
.mini-cart__error {
	padding: var(--space-3);
	background: var(--color-error-bg);
	border-radius: 2px;
	color: var(--color-error);
	font-size: 14px;
}

.site-header__cart-count {
	position: absolute;
	top: -6px;
	right: -10px;
	background: var(--color-gold);
	/* --color-bg-raised (white) text on --color-gold measured 2.32:1 (fails
	   WCAG AA); --color-text on the same gold measures 6.66:1 — audited 29
	   juli 2026 (Task 7). */
	color: var(--color-text);
	font-size: 11px;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* ==========================================================================
   Checkout
   ==========================================================================
   Form fields, secondary buttons, and the payment-method list follow the
   refined "premium" input pattern established for the cart/product pages
   (see .entry-summary .quantity input.qty, .entry-summary > .woosw-btn,
   #coupon_code above): border-radius: 2px, subtle focus box-shadow, and a
   transitioned hover/focus state on every interactive element — no flat,
   untransitioned borders. #place_order stays the one filled, primary,
   dark button; everything around it gets the lighter outline treatment. */

.checkout-progress {
	display: flex;
	justify-content: center;
	gap: var(--space-4);
	list-style: none;
	margin: var(--space-5) 0 var(--space-4);
	padding: 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-soft);
}

.checkout-progress__step {
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-line);
}

.checkout-progress__step.is-current {
	color: var(--color-text);
	border-bottom-color: var(--color-gold);
}

.checkout-progress__step.is-done {
	color: var(--color-accent-text);
}

.woocommerce-checkout .form-row label {
	font-size: 13px;
	color: var(--color-text-soft);
	margin-bottom: 4px;
	display: block;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-bg-raised);
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--color-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
}

.woocommerce-checkout #order_review,
.woocommerce-checkout table.shop_table {
	background: var(--color-bg-raised);
	padding: var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: 2px;
}

.woocommerce-checkout ul.wc_payment_methods {
	list-style: none;
	padding: 0;
	margin: var(--space-3) 0;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	border: 1px solid var(--color-line);
	border-radius: 2px;
	padding: var(--space-3);
	margin-bottom: var(--space-2);
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label {
	cursor: pointer;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method input.input-radio {
	accent-color: var(--color-accent);
	cursor: pointer;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:hover {
	border-color: var(--color-accent);
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:has(input.input-radio:checked) {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
}

.woocommerce-checkout #place_order {
	width: 100%;
	padding: 16px;
	background: var(--color-text);
	color: var(--color-bg);
	border: none;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.woocommerce-checkout #place_order:hover {
	background: var(--color-accent);
}

/*
 * The coupon-toggle and login-toggle notice boxes render on
 * woocommerce_before_checkout_form, before the <form class="checkout
 * woocommerce-checkout"> element opens, so they're never a descendant of
 * that form. Scoped explicitly to `body.woocommerce-checkout` (the body
 * class WooCommerce also adds on this page) rather than relying on the class
 * happening to be present on an ancestor element elsewhere in the markup.
 */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--color-accent-soft);
	border: none;
	border-radius: 2px;
	padding: var(--space-3);
	font-size: 14px;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * The coupon and login forms themselves render as SIBLINGS of the
 * .woocommerce-form-coupon-toggle / .woocommerce-form-login-toggle notice
 * boxes (not nested inside them), and also outside the checkout <form> —
 * confirmed live via DOM inspection on /checkout/. #coupon_code and the
 * main .woocommerce-checkout .input-text rule above already reach the
 * coupon/username/password text inputs because they carry those classes
 * globally (or because `.woocommerce-checkout` also matches via the body
 * class). What was genuinely unstyled (confirmed live — plain grey default
 * button, "Windows 95" look) is the apply-coupon submit button, which no
 * existing rule targeted at all. Same treatment applied preemptively to the
 * login form's submit button and "remember me" checkbox label, which share
 * the same gap for the same reason (not verified live: the login toggle
 * only renders for logged-out visitors, and this session is authenticated
 * as an admin — verified instead against WooCommerce's stable, unchanged
 * checkout/form-login.php template markup).
 */
body.woocommerce-checkout .woocommerce-form-coupon button.button,
body.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit {
	padding: 12px 20px;
	background: transparent;
	border: 1px solid var(--color-accent);
	border-radius: 2px;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

body.woocommerce-checkout .woocommerce-form-coupon button.button:hover,
body.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

body.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: var(--space-3);
	font-size: 13px;
	color: var(--color-text-soft);
	cursor: pointer;
}

/*
 * WooCommerce enhances the country/state <select> fields with Select2
 * (confirmed live via DOM inspection on /checkout/: the native <select> is
 * clipped to 1x1px — `select2-hidden-accessible` — and a sibling
 * `.select2-container` renders the visible widget instead). The plain
 * `.woocommerce-checkout select { ... }` rule above therefore styles an
 * invisible element; Select2's own default widget (4px radius, a plain
 * dark grey/default border, no matching focus treatment) is what customers
 * actually see. Brought in line with the same refined pattern used
 * everywhere else on checkout.
 */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-bg-raised);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-checkout .select2-container--default .select2-selection__rendered {
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--color-text);
}

body.woocommerce-checkout .select2-container--open .select2-selection--single,
body.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
}

/* The open dropdown panel is appended directly to <body> by Select2, so it
   is reached the same way as the coupon/login notice boxes above. */
body.woocommerce-checkout .select2-dropdown {
	border-color: var(--color-line);
	border-radius: 2px;
	font-family: var(--font-sans);
}

body.woocommerce-checkout .select2-results__option--highlighted[aria-selected] {
	background-color: var(--color-accent) !important;
}

.woocommerce-checkout .trust-bar {
	background: transparent;
	padding: var(--space-3) 0 0;
	margin: var(--space-3) 0 0;
	border-top: 1px solid var(--color-line);
}

.woocommerce-checkout .trust-bar__inner {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

@media (max-width: 780px) {
	.checkout-progress {
		gap: var(--space-3);
		font-size: 11px;
	}
}

/* ==========================================================================
   Wishlist page ([woosw_list])
   ==========================================================================
   Live DOM verified 29 juli 2026: div.woosw-list > table.woosw-items >
   tbody > tr.woosw-item, cells .woosw-item--remove/--image/--info/--actions
   (info holds .woosw-item--name > a, .woosw-item--price, .woosw-item--time,
   .woosw-item--stock; actions holds .woosw-item--atc .add_to_cart_button).
   The "Toevoegen aan winkelwagen" button follows the refined premium
   button pattern established for cart/checkout (see .entry-summary >
   .woosw-btn, the Checkout section above): border-radius: 2px, a
   transitioned border-color/background, and a subtle focus box-shadow —
   no flat, untransitioned borders. */

.woosw-list {
	max-width: var(--content-max);
	margin: var(--space-6) auto;
	padding: 0 var(--space-4);
}

.woosw-items {
	width: 100%;
	border-collapse: collapse;
}

.woosw-item {
	border-bottom: 1px solid var(--color-line);
}

.woosw-item--remove,
.woosw-item--image,
.woosw-item--info,
.woosw-item--actions {
	padding: var(--space-3) var(--space-2);
	vertical-align: middle;
}

.woosw-item--image img {
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.woosw-item--name {
	font-family: var(--font-serif);
	font-size: 16px;
	margin-bottom: 4px;
}

.woosw-item--name a {
	color: var(--color-text);
	text-decoration: none;
	display: block;
	transition: color 0.2s ease;
}

.woosw-item--name a:hover,
.woosw-item--name a:focus-visible {
	color: var(--color-accent-text);
}

.woosw-item--name a:focus-visible {
	outline: none;
	text-decoration: underline;
}

.woosw-item--price {
	color: var(--color-text-soft);
	font-size: 14px;
}

.woosw-item--price del {
	color: var(--color-text-soft);
	margin-right: var(--space-2);
}

.woosw-item--price ins {
	text-decoration: none;
	color: var(--color-text);
}

.woosw-item--time,
.woosw-item--stock {
	font-size: 12px;
	color: var(--color-text-soft);
	margin-top: 4px;
}

.woosw-item--atc .add_to_cart_button,
.woosw-item--atc .button {
	display: inline-block;
	padding: 10px 24px;
	background: transparent;
	border: 1px solid var(--color-accent);
	border-radius: 2px;
	color: var(--color-text);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.woosw-item--atc .add_to_cart_button:hover,
.woosw-item--atc .button:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

.woosw-item--atc .add_to_cart_button:focus-visible,
.woosw-item--atc .button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
}

.woosw-item--atc .added_to_cart {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: 12px;
	color: var(--color-text-soft);
	text-decoration: underline;
}

/* Live DOM correction (found while adding the focus-visible state below): the
   plugin renders this control as a bare <span> with its "×" glyph painted by
   its own icon-font ::before rule — not the <a> this block originally assumed.
   A selector of `.woosw-item--remove a` therefore never matched anything on
   the live site, and (more importantly) a plain <span> with no tabindex is
   not keyboard-focusable at all, so Tab could never reach it. Retargeted to
   `span` and made focusable via interactions.js (tabindex/role/keydown), so
   the focus-visible ring below is now actually reachable. */
.woosw-item--remove span {
	color: var(--color-text-soft);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	transition: color 0.2s ease, box-shadow 0.2s ease;
}

.woosw-item--remove span:hover,
.woosw-item--remove span:focus-visible {
	color: var(--color-text);
}

.woosw-item--remove span:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
	border-radius: 2px;
}

/* Share-link row rendered below the table (live-verified: .woosw-actions >
   .woosw-copy, containing a label span, a readonly url input, and a
   "Kopiëren" button) — kept quiet/utility, not a primary CTA. */
.woosw-copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-line);
	font-size: 12px;
	color: var(--color-text-soft);
}

.woosw-copy-label {
	white-space: nowrap;
}

.woosw-copy-url input {
	min-width: 220px;
	padding: 6px 10px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-bg-raised);
	color: var(--color-text-soft);
	font-size: 12px;
	transition: border-color 0.2s ease;
}

.woosw-copy-url input:focus {
	outline: none;
	border-color: var(--color-accent);
}

.woosw-copy-btn .button {
	padding: 6px 14px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: transparent;
	color: var(--color-text-soft);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.woosw-copy-btn .button:hover,
.woosw-copy-btn .button:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-text);
}

.woosw-copy-btn .button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
}

.woosw-list__cta {
	display: inline-block;
	margin-top: var(--space-3);
}

@media (max-width: 780px) {
	.woosw-item {
		display: grid;
		grid-template-columns: auto 80px 1fr;
		grid-template-areas:
			"remove image info"
			"remove image actions";
		gap: var(--space-2);
		align-items: start;
		padding: var(--space-3) 0;
	}
	.woosw-item--remove { grid-area: remove; }
	.woosw-item--image { grid-area: image; }
	.woosw-item--info { grid-area: info; padding: 0; }
	.woosw-item--actions { grid-area: actions; padding: 0; }

	.woosw-copy {
		flex-direction: column;
		align-items: flex-start;
	}
	.woosw-copy-url input {
		width: 100%;
		min-width: 0;
	}
}

/* ==========================================================================
   404 — page not found
   ========================================================================== */

.not-found {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
}

.not-found__search {
	margin: var(--space-4) 0;
}

.not-found__search .search-form {
	display: flex;
	gap: var(--space-2);
	justify-content: center;
}

.not-found__search .search-field {
	flex: 1;
	max-width: 320px;
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-bg-raised);
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--color-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.not-found__search .search-field:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
}

.not-found__search .search-submit {
	padding: 12px 20px;
	background: transparent;
	border: 1px solid var(--color-accent);
	border-radius: 2px;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.not-found__search .search-submit:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

.not-found__cta {
	display: inline-block;
}

/* .content-page__body a { text-decoration: underline; } outranks the bare
   .btn { text-decoration: none; } by specificity (two classes beat one
   class + one element) and leaked an underline onto this button — caught
   during live testing, 29 juli 2026 (Task 7). */
.content-page__body .not-found__cta {
	text-decoration: none;
}

@media (max-width: 480px) {
	.not-found__search .search-form {
		flex-direction: column;
	}
}

/* ==========================================================================
   My Account
   ==========================================================================
   Was completely unstyled — plain bullet-list navigation, default WP forms,
   zero visual continuity with the rest of the site. Audited + live DOM
   verified 29 juli 2026 (Task 7): WooCommerce wraps
   .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content in a
   div.woocommerce inside body.woocommerce-account; the active nav item is
   li.is-active (not a BEM --active modifier). Scoped to body.woocommerce-account
   throughout so nothing here collides with the out-of-stock "Notify Me"
   widget on product pages, which coincidentally reuses .woocommerce-form-login.

   Regression fix, 29 juli 2026: the rules below were scoped to
   body.woocommerce-account generically, which also matches the logged-out
   state (div#customer_login login/register form — the only *meaningful*
   child of div.woocommerce there). That single child got auto-placed into
   the two-column grid's first (220px) track, crushing the login/register
   fields. The .container padding rule was also unscoped enough to leak into
   header.php/footer.php's own .container elements (reused site-wide), adding
   104px of unwanted vertical padding there on every My Account page. Fixed
   by: (1) scoping the two-column grid to .logged-in, so the logged-out
   login/register form gets normal block flow instead of a forced grid
   column; (2) scoping the padding rule to the actual My Account content
   wrapper (.content-page, from page.php) instead of the generic .container
   class. */

body.woocommerce-account .content-page {
	padding-top: var(--space-5);
	padding-bottom: var(--space-6);
}

body.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--space-5);
	align-items: start;
}

/* WooCommerce's own .woocommerce::before/::after clearfix (content: " ";
   display: table;) becomes an implicit grid item once the parent is
   display: grid, which pushed .woocommerce-MyAccount-content into row 2
   instead of column 2 — caught during live testing, 29 juli 2026 (Task 7). */
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after {
	content: none;
}

/* WooCommerce core still ships .woocommerce-MyAccount-navigation with
   float: left; width: 30% and .woocommerce-MyAccount-content with
   float: right; width: 68% — leftovers from its old float-based two-column
   layout. Those percentages resolved against our grid cells (30% of 220px
   = 66px, 68% of the content track ≈ 307px) and squeezed both columns down
   to a fraction of their intended width — caught during live testing,
   29 juli 2026 (Task 7). */
/* min-width: 0 overrides the implicit min-content sizing every grid item
   gets by default — without it, wide children (e.g. the orders table below)
   push their track wider than the available column, causing horizontal
   page scroll on mobile. Setting it on grid-template-columns alone
   (minmax(0, 1fr)) is not enough because the 780px media query below
   re-declares grid-template-columns without the minmax — this has to live
   on the grid items themselves to hold regardless of which media query is
   active. Confirmed live at ~375-606px viewports, 29 juli 2026 (regression
   fix): scrollWidth matched clientWidth again after adding this. */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--color-bg-raised);
	border: 1px solid var(--color-line);
	border-radius: 2px;
	overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--color-line);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 12px var(--space-3);
	color: var(--color-text-soft);
	text-decoration: none;
	font-size: 14px;
	transition: background 0.2s ease, color 0.2s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
	background: var(--color-accent-soft);
	color: var(--color-text);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--color-text);
	color: var(--color-bg);
}

body.woocommerce-account .woocommerce-MyAccount-content {
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text);
}

body.woocommerce-account .woocommerce-MyAccount-content > p {
	margin: 0 0 var(--space-3);
}

body.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--color-accent-text);
}

body.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-bg-raised);
	border: 1px solid var(--color-line);
}

body.woocommerce-account table.shop_table th,
body.woocommerce-account table.shop_table td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-line);
	text-align: left;
	font-size: 14px;
}

body.woocommerce-account table.shop_table th {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--color-text-soft);
}

body.woocommerce-account .woocommerce-Address {
	background: var(--color-bg-raised);
	border: 1px solid var(--color-line);
	border-radius: 2px;
	padding: var(--space-4);
	margin-bottom: var(--space-3);
	max-width: 420px;
}

body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-3);
}

body.woocommerce-account .woocommerce-Address-title .edit {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent-text);
}

body.woocommerce-account .form-row label {
	font-size: 13px;
	color: var(--color-text-soft);
	margin-bottom: 4px;
	display: block;
}

body.woocommerce-account .input-text,
body.woocommerce-account select,
body.woocommerce-account textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-bg-raised);
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--color-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-account .input-text:focus,
body.woocommerce-account select:focus,
body.woocommerce-account textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
}

body.woocommerce-account button[type="submit"],
body.woocommerce-account a.button {
	display: inline-block;
	padding: 12px 24px;
	background: var(--color-text);
	color: var(--color-bg);
	border: none;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.2s ease;
}

body.woocommerce-account button[type="submit"]:hover,
body.woocommerce-account a.button:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

/* WooCommerce's order-row "Annuleren" action shares the plain .button class
   with "Bekijken"/"Betalen" — giving it the same solid primary treatment
   made a destructive action look identical to a neutral/positive one. Found
   during code review, 29 juli 2026. */
body.woocommerce-account a.button.cancel {
	background: transparent;
	border: 1px solid var(--color-line);
	color: var(--color-text-soft);
}

body.woocommerce-account a.button.cancel:hover {
	background: transparent;
	border-color: var(--color-error);
	color: var(--color-error);
}

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: var(--space-3);
	background: var(--color-accent-soft);
	border-radius: 2px;
	font-size: 14px;
}

body.woocommerce-account .woocommerce-error {
	background: var(--color-error-bg);
	color: var(--color-error);
}

@media (max-width: 780px) {
	body.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}
	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		overflow-x: auto;
	}
	body.woocommerce-account .woocommerce-MyAccount-navigation li {
		border-bottom: none;
		border-right: 1px solid var(--color-line);
		flex-shrink: 0;
	}
	body.woocommerce-account .woocommerce-Address {
		max-width: 100%;
	}
}

/* ==========================================================================
   Out-of-stock "Notify Me" widget
   ==========================================================================
   Was rendering as a raw WordPress block-button default (bold, no uppercase,
   no letter-spacing, cramped line-height) — the plugin's wrapper <form>
   coincidentally reuses the class .woocommerce-form-login, so this is
   deliberately scoped to body.wcsob-outofstock-product (the plugin's own
   body class, added only when this widget is present) rather than the bare
   .woocommerce-form-login class, to avoid touching the real login form on
   checkout/My Account. Audited + live DOM verified 29 juli 2026 (Task 7). */

body.wcsob-outofstock-product .woocommerce-form-login {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	max-width: 420px;
	padding: var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-bg-raised);
	margin: var(--space-3) 0;
}

body.wcsob-outofstock-product .woocommerce-form-login input[type="email"] {
	flex: 1;
	min-width: 180px;
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-bg-raised);
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--color-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.wcsob-outofstock-product .woocommerce-form-login input[type="email"]:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.15);
}

body.wcsob-outofstock-product .woocommerce-form-login button {
	padding: 12px 24px;
	background: transparent;
	border: 1px solid var(--color-accent);
	border-radius: 2px;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

body.wcsob-outofstock-product .woocommerce-form-login button:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

@media (max-width: 480px) {
	body.wcsob-outofstock-product .woocommerce-form-login {
		flex-direction: column;
	}
}

/* ==========================================================================
   Maat-bubbels (homepage) + gedeeld schuifpaneel
   ========================================================================== */

.size-finder {
	padding: var(--space-6) 0;
}

.size-finder__title {
	text-align: center;
	margin: 0 0 var(--space-5);
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.12;
}

.size-finder__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

/* Compacte variant voor op categoriepagina's (Ringen/Kettingen) — zelfde
   trigger-gedrag als de homepage-bubbels, maar als losse pil i.p.v. een
   groot kaart-blok, zodat hij past in de archiefkop naast de titel. */
.size-finder__inline-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: var(--space-3) 0 0;
	padding: 10px 20px;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	background: var(--color-bg-raised);
	color: var(--color-text);
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.size-finder__inline-trigger:hover,
.size-finder__inline-trigger:focus-visible {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

.size-finder__inline-trigger:focus-visible {
	outline: none;
}

.size-finder__bubble {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-5);
	background: linear-gradient(155deg, var(--color-bg-raised) 55%, var(--color-accent-soft) 145%);
	border: 1px solid var(--color-line);
	border-radius: 16px;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.size-finder__bubble::after {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 165, 102, 0.18), transparent 70%);
	pointer-events: none;
}

.size-finder__bubble:hover,
.size-finder__bubble:focus-visible {
	border-color: var(--color-accent);
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(43, 35, 28, 0.10);
}

.size-finder__bubble:focus-visible {
	outline: none;
}

.size-finder__bubble-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-bg);
	border: 1px solid var(--color-accent-soft);
	color: var(--color-accent);
	position: relative;
	z-index: 1;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.size-finder__bubble:hover .size-finder__bubble-icon {
	background: var(--color-accent-soft);
	border-color: var(--color-gold);
	transform: scale(1.06);
}

.size-finder__bubble-title {
	font-family: var(--font-serif);
	font-size: 22px;
	color: var(--color-text);
	position: relative;
	z-index: 1;
}

.size-finder__bubble-hint {
	font-size: 13px;
	color: var(--color-text-soft);
	position: relative;
	z-index: 1;
}

.size-finder__bubble-arrow {
	margin-top: auto;
	padding-top: var(--space-2);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-accent-text);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
	z-index: 1;
	transition: gap 0.25s ease;
}

.size-finder__bubble:hover .size-finder__bubble-arrow {
	gap: 10px;
}

@media (max-width: 780px) {
	.size-finder__inner {
		grid-template-columns: 1fr;
	}
}

.size-finder-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	height: 100%;
	width: min(440px, 100%);
	max-width: none;
	max-height: none;
	margin: 0;
	padding: var(--space-4);
	border: none;
	background: var(--color-bg-raised);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
}

.size-finder-panel.is-open {
	transform: translateX(0);
}

.size-finder-panel::backdrop {
	background: rgba(43, 35, 28, 0.4);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.size-finder-panel.is-open::backdrop {
	opacity: 1;
}

.size-finder-panel__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-4);
}

.size-finder-panel__title {
	font-family: var(--font-serif);
	font-size: 20px;
}

.size-finder-panel__close {
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--color-text);
}

.size-finder-panel__content {
	display: none;
}

.size-finder-panel__content.is-active {
	display: block;
}

.size-finder-panel__link {
	display: inline-block;
	margin-top: var(--space-3);
	font-size: 13px;
	color: var(--color-accent-text);
	text-decoration: underline;
}

.necklace-guide__intro {
	color: var(--color-text-soft);
	margin-bottom: var(--space-3);
}

.necklace-guide__options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.necklace-guide__option {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--space-3);
	background: var(--color-bg-raised);
	border: 1px solid var(--color-line);
	border-radius: 8px;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.necklace-guide__option:hover,
.necklace-guide__option:focus-visible {
	border-color: var(--color-accent);
}

.necklace-guide__option:focus-visible {
	outline: none;
}

.necklace-guide__option.is-selected {
	border-color: var(--color-gold);
	background: var(--color-accent-soft);
}

.necklace-guide__option-name {
	font-family: var(--font-serif);
	font-size: 15px;
	color: var(--color-text);
}

.necklace-guide__option-cm {
	font-size: 12px;
	color: var(--color-text-soft);
}

.necklace-guide__description {
	min-height: 1.6em;
	color: var(--color-gold);
	margin-bottom: var(--space-3);
}

@media (max-width: 480px) {
	.necklace-guide__options {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Cadeauquiz (homepage)
   ========================================================================== */

.gift-quiz {
	padding: var(--space-6) 0;
	background: var(--color-accent-soft);
	position: relative;
	overflow: hidden;
}

.gift-quiz::before {
	content: '';
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 165, 102, 0.16), transparent 70%);
	pointer-events: none;
}

.gift-quiz__inner {
	max-width: 640px;
	text-align: center;
	position: relative;
	background: var(--color-bg-raised);
	border: 1px solid var(--color-line);
	border-radius: 20px;
	padding: var(--space-6) var(--space-5);
	box-shadow: 0 20px 48px rgba(43, 35, 28, 0.08);
}

.gift-quiz__inner .eyebrow {
	display: inline-block;
	padding: 4px 16px;
	border: 1px solid var(--color-accent-soft);
	border-radius: 999px;
	margin-bottom: var(--space-3);
}

.gift-quiz__title {
	margin-bottom: var(--space-4);
}

.gift-quiz__progress {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: var(--space-5);
}

.gift-quiz__progress-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-line);
	transition: background 0.25s ease, transform 0.25s ease;
}

.gift-quiz__progress-dot.is-active {
	background: var(--color-gold);
	transform: scale(1.3);
}

.gift-quiz__step {
	display: none;
}

.gift-quiz__step.is-active {
	display: block;
}

.gift-quiz__question {
	font-family: var(--font-serif);
	font-size: 24px;
	margin-bottom: var(--space-4);
}

.gift-quiz__answers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

.gift-quiz__answer {
	padding: 14px 26px;
	background: transparent;
	border: 1px solid var(--color-accent);
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.gift-quiz__answer:hover,
.gift-quiz__answer:focus-visible {
	background: var(--color-accent);
	color: var(--color-bg);
}

.gift-quiz__answer:focus-visible {
	outline: none;
}

.gift-quiz__results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-4);
	text-align: left;
	margin: var(--space-4) 0;
}

.gift-quiz__results[aria-busy="true"]::after {
	content: '';
	grid-column: 1 / -1;
	height: 120px;
}

.gift-quiz__fallback-link {
	display: inline-block;
	margin-top: var(--space-3);
	font-size: 13px;
	color: var(--color-accent-text);
	text-decoration: underline;
}

.gift-quiz__error {
	grid-column: 1 / -1;
	padding: var(--space-3);
	background: var(--color-error-bg);
	border-radius: 2px;
	color: var(--color-error);
	font-size: 14px;
}

@media (max-width: 480px) {
	.gift-quiz__answers {
		flex-direction: column;
	}
}

/* ============================================================
   Homepage-polish v1.8.0 — gefaseerde hero-intro, sectiekoppen,
   hover- en reveal-verfijning (Paris-referentie).
   Alle begin-verborgen states hangen aan .reveal, dat uitsluitend
   door interactions.js wordt toegevoegd wanneer motion is
   toegestaan — zonder JS of met reduced-motion blijft alles
   gewoon zichtbaar.
   ============================================================ */

/* Hero: eyebrow → titel → subtitel → knop komen na elkaar binnen */
.hero.reveal .hero__content > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero.reveal.is-visible .hero__content.is-active > * {
	opacity: 1;
	transform: none;
}

.hero.reveal.is-visible .hero__content.is-active > *:nth-child(1) { transition-delay: 0.25s; }
.hero.reveal.is-visible .hero__content.is-active > *:nth-child(2) { transition-delay: 0.4s; }
.hero.reveal.is-visible .hero__content.is-active > *:nth-child(3) { transition-delay: 0.55s; }
.hero.reveal.is-visible .hero__content.is-active > *:nth-child(4) { transition-delay: 0.7s; }

.hero.reveal .hero__scroll {
	opacity: 0;
	transition: opacity 1s ease 1.2s;
}

.hero.reveal.is-visible .hero__scroll {
	opacity: 1;
}

/* Sectiekoppen: één duidelijke schaal voor de grote serif-titels */
.featured__title,
.editorial__text h2,
.bestsellers__title {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.12;
}

.section-eyebrow {
	margin: 0;
}

.section-eyebrow--center {
	text-align: center;
}

/* Editorial-fallback: grote serif-quote wanneer er (nog) geen beeld is */
.editorial__quote {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 340;
	font-size: clamp(34px, 3.8vw, 54px);
	line-height: 1.18;
	color: var(--color-accent);
	max-width: 8em;
}

.editorial__quote::before {
	content: '„';
	display: block;
	font-size: 1.6em;
	line-height: 0.4;
	color: var(--color-gold);
}

/* Productkaarten: rustige zoom en titel-onderstreping bij hover */
.product-card__image img {
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}

.product-card:hover .product-card__image img {
	transform: scale(1.05);
}

.product-card__title {
	transition: color 0.2s ease;
}

.product-card:hover .product-card__title {
	color: var(--color-gold);
}

/* Gespreide reveal: items binnen een sectie komen na elkaar binnen */
.trust-bar.reveal .trust-bar__item,
.bestsellers.reveal .product-card {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.trust-bar.reveal.is-visible .trust-bar__item,
.bestsellers.reveal.is-visible .product-card {
	opacity: 1;
	transform: none;
}

.trust-bar.reveal.is-visible .trust-bar__item:nth-child(2) { transition-delay: 0.08s; }
.trust-bar.reveal.is-visible .trust-bar__item:nth-child(3) { transition-delay: 0.16s; }
.trust-bar.reveal.is-visible .trust-bar__item:nth-child(4) { transition-delay: 0.24s; }

.bestsellers.reveal.is-visible .product-card:nth-child(2) { transition-delay: 0.06s; }
.bestsellers.reveal.is-visible .product-card:nth-child(3) { transition-delay: 0.12s; }
.bestsellers.reveal.is-visible .product-card:nth-child(4) { transition-delay: 0.18s; }
.bestsellers.reveal.is-visible .product-card:nth-child(5) { transition-delay: 0.24s; }
.bestsellers.reveal.is-visible .product-card:nth-child(6) { transition-delay: 0.3s; }
.bestsellers.reveal.is-visible .product-card:nth-child(7) { transition-delay: 0.36s; }
.bestsellers.reveal.is-visible .product-card:nth-child(8) { transition-delay: 0.42s; }

/* ============================================================
   Hero-slider v1.9.0 — Paris-stijl cover-slider: curtain-
   overgang in twee lagen, slide-teller, pijlen en Ken Burns.
   Zonder tweede slide-afbeelding (Customizer) gedraagt de hero
   zich exact als voorheen; alle animaties respecteren
   reduced-motion via de globale regel in tokens.css.
   ============================================================ */

.hero__slides,
.hero__slide {
	position: absolute;
	inset: 0;
}

.hero__slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/* In slider-modus vervangt Ken Burns de eenmalige intro-zoom:
   elke keer dat een slide actief wordt, zoomt zijn beeld traag uit. */
.hero--slider .hero__bg {
	transform: none;
	transition: none;
}

.hero--slider .hero__slide.is-active .hero__bg {
	animation: hero-kenburns 9s ease-out both;
}

@keyframes hero-kenburns {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}

/* Curtain-overgang: twee panelen vegen kort na elkaar over het beeld;
   halverwege (achter de panelen) wisselt JS de actieve slide. */
.hero__curtain {
	position: absolute;
	inset: 0;
	z-index: 3;
	transform: scaleX(0);
	pointer-events: none;
}

.hero__curtain--1 {
	background: var(--color-accent-soft);
}

.hero__curtain--2 {
	background: var(--color-text);
}

.hero--transitioning .hero__curtain--1 {
	animation: hero-curtain 1.1s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.hero--transitioning .hero__curtain--2 {
	animation: hero-curtain 1.1s cubic-bezier(0.76, 0, 0.24, 1) 0.09s both;
}

@keyframes hero-curtain {
	0% { transform: scaleX(0); transform-origin: left; }
	49.9% { transform: scaleX(1); transform-origin: left; }
	50% { transform: scaleX(1); transform-origin: right; }
	100% { transform: scaleX(0); transform-origin: right; }
}

/* Captions gestapeld in hetzelfde grid-vak; alleen de actieve is zichtbaar */
.hero--slider .hero__inner {
	display: grid;
}

.hero--slider .hero__content {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.hero--slider .hero__content.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Teller en pijlen */
.hero__nav {
	position: absolute;
	right: var(--space-5);
	bottom: var(--space-5);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	color: rgba(255, 255, 255, 0.85);
}

.hero__counter {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	letter-spacing: 0.18em;
}

.hero__counter-current {
	color: var(--color-gold);
}

.hero__counter-sep {
	width: 28px;
	height: 1px;
	background: rgba(255, 255, 255, 0.4);
}

.hero__arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.hero__arrow svg {
	width: 20px;
	height: 20px;
}

.hero__arrow:hover {
	border-color: var(--color-gold);
	background: rgba(201, 165, 102, 0.18);
}

.hero__arrow:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
}

@media (max-width: 780px) {
	.hero__nav {
		right: var(--space-4);
		bottom: var(--space-4);
		gap: var(--space-3);
	}
	.hero__arrow {
		width: 40px;
		height: 40px;
	}
	.hero__counter-sep {
		width: 18px;
	}
}