/* ==========================================================================
   Sieraad "Het paspoort"
   ========================================================================== */

.as-jewel { padding-bottom: var(--section); background: var(--linnen); }
.as-jewel__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 72px); padding: 0 var(--edge) 0 0; }

/* Foto's */
.as-jewel__gallery { min-width: 0; }
.as-jewel__track { display: grid; gap: 12px; }
.as-jewel__shot { position: relative; margin: 0; aspect-ratio: 4 / 4.6; overflow: hidden; background: var(--wit); }
.as-jewel__shot:first-child { aspect-ratio: 4 / 4.2; }
.as-jewel__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.as-jewel__zoom img, .as-jewel__shot .as-ph { width: 100%; height: 100%; object-fit: cover; }
.as-jewel__dots { display: none; }

/* Informatie, blijft in beeld */
.as-jewel__info { min-width: 0; }
.as-jewel__sticky { position: sticky; top: calc(var(--header-h) + 24px); padding-top: clamp(32px, 5vw, 72px); }
.as-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; font-size: .95rem; color: var(--taupe-diep); }
.as-crumbs a { text-decoration: none; }
.as-crumbs a:hover { color: var(--roze-diep); }
.as-jewel__title { margin: .2rem 0 .5rem; font: 700 clamp(3rem, 4.4vw, 4.6rem)/.98 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-jewel__price { margin-bottom: 1.4rem; font-size: 1.35rem; font-weight: 500; color: var(--kop); }
.as-jewel__desc { margin-bottom: 1.6rem; }
.as-jewel__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2rem; }
.as-jewel__sold { margin-bottom: 2rem; padding: 1.3rem 1.5rem; border-radius: 6px; background: var(--kiezel); }
.as-jewel__sold p { margin-bottom: 1rem; }
.is-sold .as-jewel__zoom img { filter: grayscale(.35); }

/* Paspoort */
.as-passport { margin-bottom: 1.6rem; padding: 1.4rem 1.5rem 1.2rem; border-radius: 6px; background: var(--wit); box-shadow: 0 20px 40px -34px rgba(59, 52, 45, .8); }
.as-passport__head { margin: 0 0 .8rem; font: 400 1.15rem/1 var(--f-h1); letter-spacing: .14em; color: var(--taupe-diep); }
.as-passport__list { margin: 0; }
.as-passport__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .55rem .6rem; border-radius: 4px; }
.as-passport__row:nth-child(odd) { background: #F7F3EE; }
.as-passport__row dt { font-weight: 500; color: var(--kop); }
.as-passport__row dd { margin: 0; }

/* Keurmerk */
.as-hallmark { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.6rem; padding: 1.1rem 1.3rem; border-radius: 6px; background: rgba(255, 255, 255, .55); }
.as-hallmark__seal {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 58px;
	height: 58px;
	border-radius: 47% 53% 50% 48% / 52% 46% 54% 48%;
	background: radial-gradient(circle at 35% 30%, #D97AA0, var(--roze) 45%, var(--roze-diep) 100%);
	box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .25), inset 0 2px 5px rgba(255, 255, 255, .3);
	color: rgba(255, 255, 255, .92);
	transform: rotate(-8deg);
}
.as-hallmark__seal .as-mono { width: 58%; height: auto; }
.as-hallmark__title { margin: 0 0 .2rem; font: 700 1.5rem/1 var(--f-h2); color: var(--kop); }
.as-hallmark__text { margin: 0; font-size: .95rem; line-height: 1.5; }

/* Uitklapblokken */
.as-acc { display: grid; gap: .5rem; }
.as-acc__item { border-radius: 6px; background: rgba(255, 255, 255, .55); }
.as-acc__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; font-weight: 500; color: var(--kop); cursor: pointer; list-style: none; }
.as-acc__item summary::-webkit-details-marker { display: none; }
.as-acc__item summary .as-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.as-acc__item[open] summary .as-icon { transform: rotate(180deg); }
.as-acc__item p { margin: 0; padding: 0 1.2rem 1.2rem; font-size: .98rem; }

/* Past hierbij */
.as-related { padding-top: clamp(64px, 8vw, 120px); }
.as-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-bottom: 1.6rem; }

/* Schermvullende foto's */
.as-lightbox { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; margin: 0; padding: 0; border: 0; background: rgba(28, 24, 20, .96); color: var(--wit); }
.as-lightbox::backdrop { background: transparent; }
.as-lightbox__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.as-lightbox__track::-webkit-scrollbar { display: none; }
.as-lightbox__slide { flex: none; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: clamp(16px, 4vw, 56px); scroll-snap-align: center; }
.as-lightbox__slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.as-lightbox .as-qv__close { position: fixed; top: 18px; right: 18px; background: rgba(255, 255, 255, .12); color: var(--wit); }
.as-lightbox__count { position: fixed; left: 50%; bottom: 20px; margin: 0; font: 400 1.2rem/1 var(--f-h1); letter-spacing: .1em; transform: translateX(-50%); }

@media (max-width: 999px) {
	.as-jewel__grid { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
	.as-jewel__track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: 6vw; scroll-padding-inline: 6vw; }
	.as-jewel__track::-webkit-scrollbar { display: none; }
	.as-jewel__shot, .as-jewel__shot:first-child { flex: none; width: 88vw; aspect-ratio: 4 / 4.4; scroll-snap-align: center; }
	.as-jewel__dots { display: flex; justify-content: center; gap: 6px; padding-top: 12px; }
	.as-jewel__dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(59, 52, 45, .25); transition: background-color .3s, transform .3s; }
	.as-jewel__dots span.is-active { background: var(--kop); transform: scale(1.3); }
	.as-jewel__sticky { position: static; padding: 24px var(--gutter) 0; }
	.as-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}