/* Arctichome stoelengids: kaarten, filters, detailpagina en tools.
   Zelfde catalogus-taal als de rest van het thema. */

.ah-breed--gids { max-width: 1240px; }

/* ---------- productkaart ---------- */

.ah-kaartje { position: relative; display: flex; flex-direction: column; }
.ah-kaartje__beeld {
	display: block; position: relative; overflow: hidden;
	border-radius: var(--ah-radius); background: var(--ah-berk);
	aspect-ratio: 1 / 1; margin-bottom: 12px;
}
.ah-kaartje__beeld img { width: 100%; height: 100%; object-fit: cover; }
.ah-kaartje__winkel {
	position: absolute; left: 10px; bottom: 10px;
	background: rgba(255, 255, 255, .93); color: var(--ah-inkt);
	font-size: .74rem; padding: 3px 9px; border-radius: 4px;
}
.ah-kaartje__titel { font-size: 1.02rem; margin: 0 0 .3em; line-height: 1.3; }
.ah-kaartje__titel a { color: var(--ah-inkt); }
.ah-kaartje__titel a:hover { color: var(--ah-fjord); text-decoration: none; }
.ah-kaartje__specs { font-size: .84rem; color: var(--ah-grijs); margin: 0 0 .55em; }
.ah-kaartje__voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.ah-kaartje__prijs { font-size: .95rem; font-weight: 600; }

.ah-hart {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	background: rgba(255, 255, 255, .93); border: 1px solid var(--ah-mist);
	border-radius: 50%; width: 32px; height: 32px; cursor: pointer;
	font-size: 1rem; line-height: 1; color: var(--ah-inkt);
	display: flex; align-items: center; justify-content: center;
}
.ah-hart:hover, .ah-hart.is-aan { color: #a8443f; border-color: #a8443f; }
.ah-hart-groot {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	background: none; border: 1px solid var(--ah-inkt); border-radius: var(--ah-radius);
	padding: 9px 16px; font: inherit; font-size: .9rem; color: var(--ah-inkt); margin-bottom: 18px;
}
.ah-hart-groot.is-aan { border-color: #a8443f; color: #a8443f; }

.ah-bol { display: inline-flex; gap: 3px; }
.ah-bol i {
	width: 7px; height: 7px; border-radius: 50%;
	border: 1px solid var(--ah-fjord); display: block;
}
.ah-bol i.is-vol { background: var(--ah-fjord); }

.ah-chip {
	display: inline-block; border: 1px solid var(--ah-mist); background: var(--ah-wit);
	border-radius: var(--ah-radius); padding: 6px 13px; font: inherit;
	font-size: .86rem; color: var(--ah-inkt); cursor: pointer;
}
.ah-chip:hover { border-color: var(--ah-fjord); color: var(--ah-fjord); }
.ah-chip--stil { cursor: default; background: var(--ah-berk); border-color: var(--ah-berk); }
.ah-chip--stil:hover { color: var(--ah-inkt); border-color: var(--ah-berk); }

/* ---------- hero van de categorie ---------- */

.ah-cathero {
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
	padding-bottom: 34px; margin-bottom: 26px; border-bottom: 1px solid var(--ah-mist);
}
.ah-cathero--kaal { grid-template-columns: 1fr; max-width: 760px; }
.ah-cathero h1 { margin-bottom: .35em; }
.ah-cathero__sub { color: var(--ah-grijs); }
.ah-cathero__acties { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 20px; }
.ah-cathero__beeld img { width: 100%; border-radius: 8px; }

.ah-noor-byline { display: inline-flex; align-items: center; gap: 10px; font-size: .87rem; color: var(--ah-grijs); }
.ah-noor-byline:hover { text-decoration: none; color: var(--ah-fjord); }
.ah-noor-byline .ah-noor__foto { border-radius: 50%; }

/* ---------- filterbalk ---------- */

.ah-fbalk {
	position: sticky; top: 66px; z-index: 30;
	display: flex; flex-wrap: wrap; gap: 8px;
	background: var(--ah-wit); padding: 12px 0;
	border-bottom: 1px solid var(--ah-mist); margin-bottom: 14px;
}
.ah-fdrop { position: relative; }
.ah-fknop {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--ah-mist); background: var(--ah-wit);
	border-radius: var(--ah-radius); padding: 7px 13px;
	font: inherit; font-size: .88rem; color: var(--ah-inkt); cursor: pointer;
}
.ah-fknop:hover, .ah-fdrop.open .ah-fknop { border-color: var(--ah-fjord); color: var(--ah-fjord); }
.ah-fknop em {
	font-style: normal; background: var(--ah-fjord); color: #fff;
	font-size: .72rem; border-radius: 8px; padding: 0 6px; line-height: 16px;
}
.ah-fknop i { font-size: .7rem; font-style: normal; }
.ah-fpaneel {
	display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
	min-width: 228px; max-height: 320px; overflow-y: auto;
	background: var(--ah-wit); border: 1px solid var(--ah-mist);
	border-radius: var(--ah-radius); padding: 7px;
	box-shadow: 0 8px 24px rgba(30, 37, 40, .08);
}
.ah-fdrop.open .ah-fpaneel { display: block; }
.ah-fopt {
	display: flex; align-items: center; gap: 9px;
	padding: 7px 9px; border-radius: 4px; font-size: .88rem; color: var(--ah-inkt);
}
.ah-fopt:hover { background: var(--ah-berk); text-decoration: none; }
.ah-fbox {
	width: 15px; height: 15px; flex: 0 0 auto;
	border: 1px solid var(--ah-mist); border-radius: 3px; background: var(--ah-wit);
}
.ah-fopt.is-on .ah-fbox { background: var(--ah-fjord); border-color: var(--ah-fjord); }
.ah-ftel { margin-left: auto; color: var(--ah-grijs); font-size: .8rem; }

.ah-fstatus { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 26px; font-size: .88rem; }
.ah-ftag {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--ah-berk); border-radius: var(--ah-radius);
	padding: 4px 10px; color: var(--ah-inkt); font-size: .84rem;
}
.ah-ftag:hover { text-decoration: none; color: var(--ah-fjord); }
.ah-fwis { color: var(--ah-grijs); font-size: .84rem; }

.ah-pag__status { font-size: .85rem; color: var(--ah-grijs); margin: 40px 0 8px; }
.ah-pag__balk { height: 2px; background: var(--ah-mist); border-radius: 2px; overflow: hidden; }
.ah-pag__vul { display: block; height: 100%; background: var(--ah-fjord); }

/* ---------- redactiekaart ---------- */

.ah-kaartje--redactie {
	background: var(--ah-berk); border-radius: 8px; padding: 22px 20px;
	justify-content: center;
}
.ah-kaartje--leem { background: #F3EAE1; }
.ah-redactie__soort { font-size: .8rem; color: var(--ah-grijs); margin: 0 0 .5em; }
.ah-redactie__kop { font-size: 1.1rem; margin: 0 0 .5em; }
.ah-redactie__tekst { font-size: .88rem; color: var(--ah-grijs); margin: 0 0 1em; }
.ah-redactie__link { font-size: .88rem; }

/* ---------- soorten en winkels ---------- */

.ah-soorten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ah-soort { display: block; color: var(--ah-inkt); }
.ah-soort:hover { text-decoration: none; color: var(--ah-fjord); }
.ah-soort__beeld {
	display: block; aspect-ratio: 1 / 1; background: var(--ah-wit);
	border: 1px solid var(--ah-mist); border-radius: var(--ah-radius);
	overflow: hidden; margin-bottom: 10px;
}
.ah-soort__beeld img { width: 100%; height: 100%; object-fit: cover; }
.ah-soort__naam { display: block; font-size: .95rem; font-weight: 500; }
.ah-soort__tel { display: block; font-size: .8rem; color: var(--ah-grijs); }

.ah-merken { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-merk {
	display: inline-flex; align-items: baseline; gap: 7px;
	border: 1px solid var(--ah-mist); background: var(--ah-wit);
	border-radius: var(--ah-radius); padding: 7px 13px;
	font-size: .88rem; color: var(--ah-inkt);
}
.ah-merk:hover { border-color: var(--ah-fjord); color: var(--ah-fjord); text-decoration: none; }
.ah-merk span { color: var(--ah-grijs); font-size: .8rem; }

/* ---------- detailpagina ---------- */

.ah-detail {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px;
	align-items: start; margin-bottom: 52px;
}
.ah-detail__media { position: sticky; top: 92px; }
.ah-detail__pack {
	background: var(--ah-wit); border: 1px solid var(--ah-mist);
	border-radius: 8px; padding: 28px; display: flex; justify-content: center;
}
.ah-detail__pack img { max-height: 460px; width: auto; object-fit: contain; }
.ah-detail__scenes { grid-column: 1 / 2; display: grid; gap: 18px; margin-top: 18px; }
.ah-detail__scene { margin: 0; }
.ah-detail__scene img { width: 100%; border-radius: var(--ah-radius); aspect-ratio: 3 / 2; object-fit: cover; }
.ah-detail__scenecap { font-size: .84rem; color: var(--ah-grijs); margin-top: .5em; }
.ah-detail__scenecap strong { color: var(--ah-inkt); display: block; }

.ah-detail__winkel {
	display: inline-block; background: var(--ah-berk);
	border-radius: 4px; padding: 3px 9px; font-size: .78rem; margin-bottom: 10px;
}
.ah-detail__titel { margin-bottom: .3em; }
.ah-detail__prijs { font-size: 1.28rem; font-weight: 600; margin-bottom: .8em; }
.ah-detail__prijsnoot { display: block; font-size: .8rem; font-weight: 400; color: var(--ah-grijs); margin-top: 4px; }
.ah-prijsbadge { font-size: .74rem; font-weight: 500; border-radius: 4px; padding: 2px 8px; }
.ah-prijsbadge--dal { background: #E4EDE6; color: #2F5D3A; }
.ah-prijsbadge--stijg { background: #F1E7E2; color: #7A4A38; }
.ah-detail__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.ah-detail__tekst { margin-bottom: 26px; }

.ah-detail__specs { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 30px; }
.ah-detail__specs th, .ah-detail__specs td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--ah-mist); vertical-align: top; }
.ah-detail__specs th { font-weight: 500; color: var(--ah-grijs); width: 42%; }

.ah-oordeel { border-top: 1px solid var(--ah-mist); padding-top: 24px; margin-bottom: 28px; }
.ah-oordeel h2 { font-size: 1.2rem; }
.ah-oordeel__assen { display: grid; gap: 10px; margin-bottom: 16px; }
.ah-oordeel__as { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .9rem; }
.ah-oordeel__motivatie { font-size: .95rem; }

.ah-voorwie { border-top: 1px solid var(--ah-mist); padding-top: 24px; margin-bottom: 26px; }
.ah-voorwie h2 { font-size: 1.2rem; }
.ah-voorwie__kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ah-voorwie__kop { font-family: var(--ah-sans); font-size: .88rem; font-weight: 600; margin-bottom: .6em; }
.ah-voorwie__kop--wel { color: #2F5D3A; }
.ah-voorwie__kop--niet { color: #7A4A38; }
.ah-voorwie ul { margin: 0; padding-left: 1.1em; font-size: .92rem; }
.ah-voorwie li { margin-bottom: .35em; }

.ah-detail__bron { font-size: .86rem; color: var(--ah-grijs); border-top: 1px solid var(--ah-mist); padding-top: 16px; }

.ah-faq { max-width: 760px; margin: 0 0 52px; }
.ah-faq__item { border-bottom: 1px solid var(--ah-mist); padding: 14px 0; }
.ah-faq__item summary { cursor: pointer; font-weight: 500; }
.ah-faq__item p { margin: .8em 0 0; font-size: .95rem; color: var(--ah-grijs); }

.ah-ladder, .ah-anders, .ah-verder { margin-bottom: 52px; }
.ah-ladder h2, .ah-anders h2, .ah-verder h2 { font-size: 1.35rem; margin-bottom: .8em; }
.ah-ladder__kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 620px; }
.ah-ladder__label { font-size: .84rem; color: var(--ah-grijs); margin-bottom: .7em; }

.ah-vergelijk { overflow-x: auto; margin: 26px 0 44px; }
.ah-vergelijk table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .92rem; }
.ah-vergelijk th, .ah-vergelijk td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ah-mist); vertical-align: top; }
.ah-vergelijk th { font-weight: 500; color: var(--ah-grijs); width: 26%; }
.ah-vergelijk img { border-radius: var(--ah-radius); }

.ah-cat-tekst { max-width: 760px; margin-top: 52px; }
.ah-cat-tekst h2 { font-size: 1.35rem; margin-top: 1.6em; }

/* ---------- bewaarlijst ---------- */

.ah-mandpagina { max-width: 720px; }
.ah-mandrij { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ah-mist); padding: 12px 0; }
.ah-mandrij__weg { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--ah-grijs); font-size: 1rem; }
.ah-fav { display: flex; align-items: center; gap: 13px; flex: 1 1 auto; color: var(--ah-inkt); }
.ah-fav:hover { text-decoration: none; color: var(--ah-fjord); }
.ah-fav__media { width: 74px; height: 74px; flex: 0 0 auto; border-radius: var(--ah-radius); overflow: hidden; background: var(--ah-berk); }
.ah-fav__media img { width: 100%; height: 100%; object-fit: cover; }
.ah-fav__body { display: flex; flex-direction: column; gap: 3px; font-size: .92rem; }
.ah-fav__body span { color: var(--ah-grijs); font-size: .84rem; }
.ah-fav__weg { background: none; border: 0; cursor: pointer; color: var(--ah-grijs); margin-left: auto; }
.ah-mandpagina__voet { margin-top: 22px; }
.ah-mandpagina__totaal { font-size: 1.02rem; }
.ah-mandpagina__acties { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.ah-mandpagina__noot { font-size: .82rem; color: var(--ah-grijs); }
.ah-mandpagina__gedeeld { background: var(--ah-berk); border-radius: var(--ah-radius); padding: 16px 18px; margin-bottom: 18px; }

/* ---------- swipe ---------- */

.ah-swipe { max-width: 640px; }
.ah-swipe__stage { position: relative; height: 460px; margin-bottom: 18px; }
.ah-swipe__stapel { position: absolute; inset: 0; }
.ah-swipe-kaart {
	position: absolute; inset: 0; background: var(--ah-wit);
	border: 1px solid var(--ah-mist); border-radius: 8px; overflow: hidden;
	display: flex; flex-direction: column; touch-action: none; user-select: none;
}
.ah-swipe-kaart[data-diepte="1"] { transform: scale(.97) translateY(9px); }
.ah-swipe-kaart[data-diepte="2"] { transform: scale(.94) translateY(18px); }
.ah-swipe-kaart__media { flex: 1 1 auto; overflow: hidden; background: var(--ah-berk); }
.ah-swipe-kaart__media img { width: 100%; height: 100%; object-fit: cover; }
.ah-swipe-kaart__body { padding: 15px 18px; border-top: 1px solid var(--ah-mist); }
.ah-swipe-kaart__titel { font-size: 1.05rem; margin: .25em 0; }
.ah-swipe-kaart__meta { font-size: .86rem; color: var(--ah-grijs); margin: 0; }
.ah-swipe-kaart__winkel { font-size: .76rem; color: var(--ah-grijs); }
.ah-swipe-kaart__badge {
	position: absolute; top: 20px; padding: 5px 12px; border-radius: 4px;
	font-size: .82rem; opacity: 0; pointer-events: none;
}
.ah-swipe-kaart__badge--ja { left: 20px; background: #E4EDE6; color: #2F5D3A; }
.ah-swipe-kaart__badge--nee { right: 20px; background: #F1E7E2; color: #7A4A38; }
.ah-swipe__klaar { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.ah-swipe__knoppen { display: flex; justify-content: center; gap: 18px; margin-bottom: 12px; }
.ah-swipe__btn {
	width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
	border: 1px solid var(--ah-mist); background: var(--ah-wit);
	font-size: 1.15rem; color: var(--ah-inkt);
}
.ah-swipe__btn--ja:hover { border-color: #a8443f; color: #a8443f; }
.ah-swipe__btn--nee:hover { border-color: var(--ah-grijs); }
.ah-swipe__voortgang { text-align: center; font-size: .86rem; color: var(--ah-grijs); }
.ah-swipe__favorieten { margin-top: 40px; }
.ah-swipe__favorieten h2 { font-size: 1.3rem; }
.ah-swipe__favgrid { display: grid; gap: 10px; margin-bottom: 14px; }
.ah-swipe__leeg { font-size: .9rem; color: var(--ah-grijs); }

/* ---------- keuzehulp ---------- */

.ah-hulp { max-width: 640px; }
.ah-hulp__teller { font-size: .84rem; color: var(--ah-grijs); margin-bottom: .6em; }
.ah-hulp__vraag { font-size: 1.5rem; margin-bottom: .9em; }
.ah-hulp__opties { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.ah-hulp__optie { text-align: left; }
.ah-hulp__terug { background: none; border: 0; cursor: pointer; color: var(--ah-grijs); font: inherit; font-size: .86rem; padding: 0; }
.ah-hulp__grid { display: grid; gap: 10px; margin-bottom: 18px; }
.ah-hulp__deelbaar { font-size: .86rem; color: var(--ah-grijs); }

@media (max-width: 1000px) {
	.ah-soorten { grid-template-columns: repeat(3, 1fr); }
	.ah-detail { grid-template-columns: 1fr; gap: 30px; }
	.ah-detail__media { position: static; }
	.ah-detail__scenes { grid-column: 1; }
	.ah-cathero { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.ah-soorten { grid-template-columns: repeat(2, 1fr); }
	.ah-voorwie__kolommen { grid-template-columns: 1fr; }
	.ah-ladder__kolommen { grid-template-columns: 1fr; }
	.ah-fbalk { top: 62px; overflow-x: auto; flex-wrap: nowrap; }
	.ah-swipe__stage { height: 400px; }
}