/* Prijzen in kaartjes, zoals de prijslijst-story. */
.lk-prijzen { max-width: 520px; margin: 2.5rem auto 0; display: grid; gap: 0.9rem; }
.lk-prijsrij {
	display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem;
	padding: 0.9rem 1.4rem 0.9rem 1rem;
	background: var(--wp--preset--color--kaart, #FBF3EA);
	border-radius: 16px 18px 15px 17px / 17px 15px 18px 16px;
	box-shadow: 0 10px 28px -20px rgba(60, 40, 30, 0.35);
}
.lk-icoonvlak {
	display: grid; place-items: center; width: 62px; height: 62px;
	border-radius: 48% 52% 50% 50% / 55% 45% 55% 45%;
	background: var(--wp--preset--color--poeder, #E7B9A1);
	color: var(--wp--preset--color--inkt, #2E2724);
	position: relative;
}
.lk-icoonvlak::after {
	content: ""; position: absolute; right: -0.7rem; top: 18%; bottom: 18%;
	border-right: 1px solid var(--wp--preset--color--terra, #CE9175);
}
.lk-icoonvlak.is-salie { background: var(--wp--preset--color--salie-licht, #D1C2A6); }
.lk-prijstekst { display: grid; line-height: 1.4; padding-left: 0.5rem; }
.lk-prijstekst strong { font-size: 1.2rem; font-weight: 600; }
.lk-prijstekst { color: var(--wp--preset--color--grijs, #6B625C); }
.lk-prijstekst strong { color: var(--wp--preset--color--inkt, #2E2724); }
.lk-rekenvoorbeeld { text-align: center; font-size: 0.875rem; margin-top: 0.5rem; }

/* Stofjes-overzicht. */
.lk-stofjesgrid {
	list-style: none; padding: 0; margin: 2.5rem 0 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.5rem 1.25rem;
}
.lk-stofjesgrid li { display: grid; justify-items: center; text-align: center; position: relative; }
.lk-stofjesgrid img {
	/* height: auto, anders wint height="160" van de afbeelding van aspect-ratio en wordt het rondje ovaal. */
	width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 5px var(--wp--preset--color--linnen, #F6E9DC), 0 0 0 6px var(--wp--preset--color--terra, #CE9175);
}
.lk-stofnaam { margin-top: 0.75rem; font-size: 0.9rem; color: var(--wp--preset--color--grijs, #6B625C); }
/* Per kleur (Alle stofjes op een rij): kleiner, drie naast elkaar op de telefoon. De code is hier het belangrijkst. */
.lk-stofjesgrid.is-per-kleur { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 1.25rem 0.9rem; margin-top: 1.25rem; }
.lk-stofjesgrid.is-per-kleur .lk-stofnaam { margin-top: 0.6rem; font-weight: 600; color: var(--wp--preset--color--inkt, #2E2724); letter-spacing: 0.04em; }

/* Reviews. */
.lk-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.lk-review { margin: 0; padding: 1.5rem; background: var(--wp--preset--color--kaart, #FBF3EA); border-radius: 16px; }
.lk-review blockquote { margin: 0.5rem 0 1rem; font-style: italic; }
.lk-review figcaption { font-family: var(--wp--preset--font-family--sans); font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wp--preset--color--grijs, #6B625C); }

/* Sterren: een lichte rij met daarover een terra rij zo breed als het cijfer (4,6 = vier en een halve ster). */
.lk-sterren { position: relative; display: inline-block; line-height: 1; white-space: nowrap; color: rgba(206, 145, 117, 0.3); letter-spacing: 0.08em; }
.lk-sterren-vol { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--wp--preset--color--terra, #CE9175); }

/* Onder de producttitel: sterren, cijfer en aantal, als link naar de reviews. */
.lk-sterren-kop {
	display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
	margin: -0.25rem 0 0.25rem; font-size: 0.95rem; text-decoration: none;
	color: var(--wp--preset--color--inkt, #2E2724);
}
.lk-sterren-kop .lk-sterren { font-size: 1.15rem; }
.lk-sterren-kop .lk-sterren-cijfer { font-weight: 600; }
.lk-sterren-kop .lk-sterren-aantal { color: var(--wp--preset--color--grijs, #6B625C); text-decoration: underline; text-underline-offset: 3px; }
.lk-sterren-kop:hover .lk-sterren-aantal { color: var(--wp--preset--color--inkt, #2E2724); }

/* Onderaan de productpagina: het gemiddelde, gecentreerd. */
.lk-reviews-overzicht { display: flex; justify-content: center; margin: 2rem auto 0; }
.lk-reviews-gemiddelde { display: grid; justify-items: center; gap: 0.4rem; }
.lk-reviews-cijfer { font-family: var(--wp--preset--font-family--schreef, Georgia, serif); font-size: 3rem; line-height: 1; }
.lk-reviews-gemiddelde .lk-sterren { font-size: 1.35rem; }
.lk-reviews-totaal { font-size: 0.875rem; color: var(--wp--preset--color--grijs, #6B625C); }
.lk-reviews-uitleg { max-width: 40rem; margin: 2rem auto 0; font-size: 0.875rem; color: var(--wp--preset--color--grijs, #6B625C); }

/* Formulier via Review sturen (review-uitnodiging.php). Sterren van 5 naar 1 in de HTML, met row-reverse links-naar-rechts: ~ kleurt de lagere mee. */
.lk-review-schrijven {
	max-width: 34rem; margin: 3rem auto 0; padding: 1.75rem 1.5rem;
	background: var(--wp--preset--color--kaart, #FBF3EA);
	border-radius: 16px 18px 15px 17px / 17px 15px 18px 16px;
	scroll-margin-top: 6rem;
}
.lk-review-schrijven h3 { margin-top: 0; }
.lk-review-formulier label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.lk-review-formulier input[type="text"], .lk-review-formulier textarea {
	width: 100%; box-sizing: border-box; padding: 0.7rem 0.85rem; font: inherit; font-size: 16px;
	border: 1px solid rgba(46, 39, 36, 0.25); border-radius: 10px; background: #fff;
}
.lk-review-hint { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--wp--preset--color--grijs, #6B625C); }
.lk-sterren-kiezen { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.15rem; border: 0; margin: 0 0 1rem; padding: 0; }
.lk-sterren-kiezen legend { width: 100%; font-weight: 600; margin-bottom: 0.3rem; padding: 0; }
.lk-sterren-kiezen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lk-sterren-kiezen label { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: rgba(206, 145, 117, 0.3); }
.lk-sterren-kiezen input:checked ~ label,
.lk-sterren-kiezen label:hover, .lk-sterren-kiezen label:hover ~ label { color: var(--wp--preset--color--terra, #CE9175); }
.lk-sterren-kiezen input:focus-visible + label { outline: 2px solid var(--wp--preset--color--inkt, #2E2724); outline-offset: 2px; border-radius: 8px; }
.lk-review-melding { padding: 0.75rem 1rem; border-radius: 10px; background: #fff; border-left: 4px solid var(--wp--preset--color--terra, #CE9175); }
.lk-review-artikel { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(206, 145, 117, 0.35); }
.lk-review-artikel h4 { margin: 0 0 0.5rem; }
.lk-reviews-leeg { max-width: 34rem; margin: 2rem auto 0; }

/* Meer stofjes achter een knop (toon="12"): de knop in de stijl van een omlijnde knop, weg zodra het open is. */
.lk-meer-stofjes > summary { list-style: none; display: flex; justify-content: center; margin-top: 2rem; cursor: pointer; }
.lk-meer-stofjes > summary::-webkit-details-marker { display: none; }
.lk-meer-stofjes > summary .wp-element-button {
	background: transparent; color: var(--wp--preset--color--inkt, #2E2724);
	border: 1.5px solid currentColor;
}
.lk-meer-stofjes > summary:hover .wp-element-button { background: var(--wp--preset--color--inkt, #2E2724); color: #fff; }
.lk-meer-stofjes[open] > summary { display: none; }

/* Stofje groot bekijken: het rondje is een knop, het venster toont het stofje vierkant en zo groot mogelijk. */
.lk-stof-knop { appearance: none; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 50%; cursor: zoom-in; }
.lk-stof-knop:focus-visible { outline: 2px solid var(--wp--preset--color--inkt, #2E2724); outline-offset: 8px; }
.lk-stof-venster {
	width: min(92vw, calc(100vh - 7rem), 900px); max-width: none; max-height: none;
	margin: auto; padding: 0; border: 0; border-radius: 18px; overflow: visible;
	background: var(--wp--preset--color--linnen, #F6E9DC);
}
.lk-stof-venster::backdrop { background: rgba(46, 39, 36, 0.75); }
.lk-stof-venster figure { margin: 0; }
.lk-stof-venster img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px 18px 0 0; background: var(--wp--preset--color--kaart, #FBF3EA); }
.lk-stof-venster figcaption { padding: 0.75rem 1rem; text-align: center; font-family: var(--wp--preset--font-family--schreef); }
.lk-stof-venster button {
	position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(251, 243, 234, 0.92); color: var(--wp--preset--color--inkt, #2E2724);
	font-size: 1.8rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(46, 39, 36, 0.2);
}
.lk-stof-venster button:focus-visible { outline: 2px solid var(--wp--preset--color--inkt, #2E2724); outline-offset: 2px; }
.lk-stof-vorige { left: 0.75rem; top: calc(50% - 22px - 1.4rem); }
.lk-stof-volgende { right: 0.75rem; top: calc(50% - 22px - 1.4rem); }
.lk-stof-sluit { right: 0.75rem; top: 0.75rem; }
/* Een foto uit een galerij (stapelfoto's): eigen verhouding, past altijd op het scherm. */
.lk-stof-venster.is-foto { width: fit-content; }
.lk-stof-venster.is-foto img { aspect-ratio: auto; object-fit: contain; } /* maat zet onderdelen.js */
.lk-stof-venster figcaption:empty { display: none; }
.lk-stof-venster.is-foto:has(figcaption:empty) img { border-radius: 18px; }
.lk-sterren-kiezen .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }