/* ==========================================================================
   Collectie "De lade"
   ========================================================================== */

.as-coll { padding: clamp(40px, 6vw, 88px) 0 var(--section); background: var(--linnen); }
.as-coll__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: clamp(24px, 3vw, 40px); }
.as-coll__title { margin: 0 0 .2em; font: 700 clamp(3.4rem, 6.4vw, 6.4rem)/.95 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-coll__intro { max-width: 52ch; margin: 0; font-size: 1.12rem; }
.as-coll__count { margin: 0; font: 400 1.5rem/1 var(--f-h1); letter-spacing: .08em; color: var(--taupe-diep); }
.as-coll__count span { color: var(--kop); }

/* Tabbladen */
.as-coll__tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.as-tab {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.25rem;
	border-radius: 40px;
	background: rgba(255, 255, 255, .55);
	color: var(--kop);
	font-weight: 500;
	text-decoration: none;
	transition: background-color .3s, color .3s, transform .3s var(--ease);
}
.as-tab span { font: 400 1rem/1 var(--f-h1); letter-spacing: .06em; color: var(--taupe-diep); transition: color .3s; }
.as-tab:hover { background: var(--wit); transform: translateY(-2px); }
.as-tab.is-active { background: var(--kop); color: var(--wit); }
.as-tab.is-active span { color: var(--mint); }

/* Filters */
.as-coll__filters { margin-bottom: clamp(28px, 3vw, 44px); }
.as-filter { margin: 0; padding: 0; border: 0; min-width: 0; }
.as-filter__label { padding: 0; margin-bottom: .55rem; font: 400 1rem/1 var(--f-h1); letter-spacing: .1em; color: var(--taupe-diep); }
.as-filter--stones { margin-bottom: 1.2rem; }
.as-filter__scroll { display: flex; gap: .5rem; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.as-filter__scroll::-webkit-scrollbar { display: none; }
.as-fchip { flex: none; cursor: pointer; }
.as-fchip input, .as-seg__opt input, .as-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.as-fchip span {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem 1rem .35rem .4rem;
	border-radius: 40px;
	background: var(--wit);
	font-size: .98rem;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: 0 8px 18px -16px rgba(59, 52, 45, .7);
	transition: background-color .3s, color .3s, transform .3s var(--ease);
}
.as-fchip input[value=""] + span { padding-left: 1rem; }
.as-fchip__gem { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: var(--linnen) var(--img) var(--pos, center) / 260% no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset -3px -4px 7px rgba(40, 34, 28, .25); }
.as-fchip:hover span { transform: translateY(-2px); }
.as-fchip input:checked + span { background: var(--kop); color: var(--wit); }
.as-fchip input:focus-visible + span, .as-seg__opt input:focus-visible + span, .as-switch input:focus-visible + .as-switch__ui { outline: 2px solid var(--kop); outline-offset: 3px; }

.as-filter__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2rem 2rem; }
.as-seg { display: inline-flex; padding: 4px; border-radius: 40px; background: rgba(255, 255, 255, .55); }
.as-seg__opt { cursor: pointer; }
.as-seg__opt span { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 40px; font-weight: 500; transition: background-color .3s, color .3s; }
.as-seg__opt input:checked + span { background: var(--wit); box-shadow: 0 6px 14px -10px rgba(59, 52, 45, .7); }
.as-seg__swatch { width: 14px; height: 14px; border-radius: 50%; }
.as-seg__swatch--goud { background: linear-gradient(135deg, #f6e5a8, #c99a3d 50%, #b1832b); }
.as-seg__swatch--zilver { background: linear-gradient(135deg, #fbfbfb, #b9bcc0 50%, #9a9ea3); }

.as-filter--toggles { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; padding-bottom: .4rem; }
.as-switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .98rem; }
.as-switch__ui { position: relative; width: 40px; height: 22px; border-radius: 12px; background: rgba(59, 52, 45, .2); transition: background-color .3s; }
.as-switch__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--wit); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .3s var(--ease); }
.as-switch input:checked + .as-switch__ui { background: var(--kop); }
.as-switch input:checked + .as-switch__ui::after { transform: translateX(18px); }
.as-filter__reset { margin-left: auto; padding-bottom: .5rem; }

/* Raster met ritme */
.as-coll__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: clamp(32px, 3vw, 48px) clamp(16px, 2vw, 32px);
	transition: opacity .35s var(--ease);
}
.is-loading .as-coll__grid { opacity: .35; pointer-events: none; }
.as-coll__grid .as-piece { user-select: auto; }
.as-piece--big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.as-piece--big .as-piece__media { flex: 1; display: flex; }
.as-piece--big .as-piece__media .as-piece__open { aspect-ratio: auto; flex: 1; min-height: 420px; }
.as-piece--big .as-piece__open .as-swap__a { position: absolute; inset: 0; }
.as-piece--big .as-piece__title { font: 700 clamp(1.9rem, 2.4vw, 2.4rem)/1.05 var(--f-h2); letter-spacing: .02em; }
.as-piece.is-new { animation: as-card-in .7s var(--ease) both; }
@keyframes as-card-in { from { opacity: 0; transform: translateY(24px); } }

.as-coll__more { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(40px, 5vw, 64px); }
.as-coll__more[hidden] { display: none; }
.as-coll__loader { display: none; gap: 6px; }
.is-appending .as-coll__loader { display: inline-flex; }
.is-appending [data-coll-next] { display: none; }
.as-coll__loader i { width: 9px; height: 9px; border-radius: 50%; background: var(--taupe); animation: as-dot 1s ease-in-out infinite; }
.as-coll__loader i:nth-child(2) { animation-delay: .15s; }
.as-coll__loader i:nth-child(3) { animation-delay: .3s; }
@keyframes as-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-6px); opacity: 1; } }

/* Lege staat */
.as-coll__empty[hidden] { display: none; }
.as-empty { max-width: 560px; margin: clamp(24px, 4vw, 56px) auto; padding: clamp(32px, 4vw, 56px); border-radius: 6px; background: var(--wit); text-align: center; }
.as-empty__mono { width: 90px; margin: 0 auto 1rem; color: var(--taupe); }
.as-empty__title { margin-bottom: .6rem; font: 700 clamp(2rem, 3vw, 2.6rem)/1.05 var(--f-h2); color: var(--kop); }

@media (max-width: 1199px) { .as-coll__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 799px) {
	.as-coll__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-piece--big { grid-row: auto; }
	.as-piece--big .as-piece__media .as-piece__open { aspect-ratio: 1; min-height: 0; }
	.as-filter__reset { margin-left: 0; }
}
@media (max-width: 459px) {
	.as-coll__grid { gap: 28px 12px; }
	.as-piece__title { font-size: 1rem; }
	.as-piece--big .as-piece__title { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) { .as-piece.is-new { animation: none; } }