/* Interieurpagina productgids: kaarten, filters, detailpagina.
   Volgt het thema-palet (kalk/espresso/olijf/oker) en de zachte neumorfe schaduwen. */

/* --- Grid --- */
.ip-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 1.5rem 0 2.5rem;
}
.ip-grid--inline {
	margin: 1.75rem 0;
}
@media (max-width: 900px) {
	.ip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ip-grid { grid-template-columns: 1fr; }
}

/* --- Kaart --- */
.ip-card {
	background: var(--wp--preset--color--white, #FBFAF6);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 8px 8px 20px rgba(42, 39, 35, 0.08), -6px -6px 16px rgba(255, 255, 255, 0.7);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	display: flex;
	flex-direction: column;
}
.ip-card:hover {
	transform: translateY(-4px);
	box-shadow: 10px 14px 28px rgba(42, 39, 35, 0.12), -6px -6px 16px rgba(255, 255, 255, 0.7);
}
.ip-card.is-hidden { display: none; }

.ip-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: #fff;
	overflow: hidden;
}
.ip-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 0.35s ease;
}
.ip-card:hover .ip-card__media img { transform: scale(1.03); }

.ip-card__body {
	padding: 1.1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
}
.ip-card__shop {
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olive, #5E6B49);
	background: rgba(94, 107, 73, 0.1);
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
}
.ip-card__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.15rem;
	line-height: 1.25;
	margin: 0;
}
.ip-card__title a {
	color: var(--wp--preset--color--ink, #2A2723);
	text-decoration: none;
}
.ip-card__title a:hover { color: var(--wp--preset--color--olive, #5E6B49); }
.ip-card__oneliner {
	font-size: 0.9rem;
	color: var(--wp--preset--color--taupe, #8C8578);
	margin: 0;
	flex: 1;
}
.ip-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.35rem;
}
.ip-card__price {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #2A2723);
}
.ip-card__type {
	font-size: 0.78rem;
	color: var(--wp--preset--color--taupe, #8C8578);
}

/* --- Filters --- */
.ip-filters {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: var(--wp--preset--color--card, #EFEBE2);
	border-radius: 18px;
	padding: 1.15rem 1.3rem;
	box-shadow: inset 3px 3px 8px rgba(42, 39, 35, 0.06), inset -3px -3px 8px rgba(255, 255, 255, 0.6);
	margin: 1.75rem 0 0.5rem;
}
.ip-filters__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}
.ip-filters__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe, #8C8578);
	min-width: 3.6rem;
}
.ip-chip {
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #2A2723);
	background: var(--wp--preset--color--white, #FBFAF6);
	border: 1px solid var(--wp--preset--color--line, #DAD5C9);
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ip-chip:hover { border-color: var(--wp--preset--color--olive, #5E6B49); }
.ip-chip.is-active {
	background: var(--wp--preset--color--olive, #5E6B49);
	border-color: var(--wp--preset--color--olive, #5E6B49);
	color: var(--wp--preset--color--white, #FBFAF6);
}
.ip-chip--static {
	cursor: default;
	background: rgba(94, 107, 73, 0.08);
	border-color: transparent;
	color: var(--wp--preset--color--olive-deep, #48522F);
}
.ip-grid-count {
	font-size: 0.85rem;
	color: var(--wp--preset--color--taupe, #8C8578);
	margin: 0.75rem 0 0;
}
.ip-grid-empty {
	background: var(--wp--preset--color--card, #EFEBE2);
	border-radius: 14px;
	padding: 1.5rem;
	text-align: center;
	color: var(--wp--preset--color--taupe, #8C8578);
}

/* --- Detailpagina --- */
.ip-detail {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 2.5rem;
	align-items: start;
	margin: 1.5rem 0 2.5rem;
}
@media (max-width: 820px) {
	.ip-detail { grid-template-columns: 1fr; gap: 1.5rem; }
}
.ip-detail__media {
	background: #fff;
	border-radius: 20px;
	padding: 1.5rem;
	box-shadow: 8px 8px 20px rgba(42, 39, 35, 0.08), -6px -6px 16px rgba(255, 255, 255, 0.7);
}
.ip-detail__media img {
	width: 100%;
	height: auto;
	display: block;
}
.ip-detail__info {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.ip-detail__crumb {
	font-size: 0.85rem;
	text-decoration: none;
}
.ip-detail__title {
	font-size: clamp(1.7rem, 3.5vw, 2.4rem);
	line-height: 1.12;
	margin: 0;
}
.ip-detail__price {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.6rem;
	font-weight: 600;
	margin: 0;
}
.ip-detail__pricenote {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--wp--preset--color--taupe, #8C8578);
	margin-top: 0.2rem;
}
.ip-detail__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.ip-detail__content p { margin: 0 0 0.9rem; }
.ip-detail__specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.ip-detail__specs th,
.ip-detail__specs td {
	text-align: left;
	padding: 0.55rem 0.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line, #DAD5C9);
}
.ip-detail__specs th {
	color: var(--wp--preset--color--taupe, #8C8578);
	font-weight: 600;
	width: 40%;
}
.ip-detail__source {
	font-size: 0.8rem;
	color: var(--wp--preset--color--taupe, #8C8578);
	border-left: 3px solid var(--wp--preset--color--ochre, #BB8A3C);
	padding-left: 0.8rem;
}
.ip-related { margin: 3rem 0 1.5rem; }

/* --- Swipe-modus --- */
.ip-swipe { max-width: 480px; margin: 2rem auto; }
.ip-swipe__stage {
	position: relative;
	height: 520px;
	touch-action: none;
}
.ip-swipe-card {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--white, #FBFAF6);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 10px 12px 28px rgba(42, 39, 35, 0.14), -6px -6px 16px rgba(255, 255, 255, 0.7);
	display: flex;
	flex-direction: column;
	user-select: none;
	cursor: grab;
}
.ip-swipe-card:active { cursor: grabbing; }
.ip-swipe-card[data-depth="1"] { transform: translateY(14px) scale(0.96); }
.ip-swipe-card[data-depth="2"] { transform: translateY(28px) scale(0.92); }
.ip-swipe-card__media {
	flex: 1;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	min-height: 0;
}
.ip-swipe-card__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	pointer-events: none;
}
.ip-swipe-card__body {
	padding: 1rem 1.3rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	border-top: 1px solid var(--wp--preset--color--line, #DAD5C9);
}
.ip-swipe-card__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.2rem;
	line-height: 1.2;
	margin: 0;
}
.ip-swipe-card__meta {
	font-size: 0.9rem;
	color: var(--wp--preset--color--taupe, #8C8578);
	margin: 0;
}
.ip-swipe-card__badge {
	position: absolute;
	top: 1.2rem;
	padding: 0.4rem 0.9rem;
	border-radius: 10px;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0;
	pointer-events: none;
	transform: rotate(-8deg);
}
.ip-swipe-card__badge--like {
	left: 1.2rem;
	color: #fff;
	background: var(--wp--preset--color--olive, #5E6B49);
}
.ip-swipe-card__badge--nope {
	right: 1.2rem;
	color: #fff;
	background: #A65B4B;
	transform: rotate(8deg);
}
.ip-swipe__actions {
	display: flex;
	justify-content: center;
	gap: 1.4rem;
	margin: 1.3rem 0 0.4rem;
}
.ip-swipe__btn {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	background: var(--wp--preset--color--white, #FBFAF6);
	box-shadow: 6px 6px 14px rgba(42, 39, 35, 0.12), -4px -4px 10px rgba(255, 255, 255, 0.7);
	transition: transform 0.15s ease;
}
.ip-swipe__btn:hover { transform: scale(1.08); }
.ip-swipe__btn--nope { color: #A65B4B; }
.ip-swipe__btn--like { color: var(--wp--preset--color--olive, #5E6B49); font-size: 1.7rem; }
.ip-swipe__progress {
	text-align: center;
	font-size: 0.85rem;
	color: var(--wp--preset--color--taupe, #8C8578);
	margin: 0.4rem 0 0;
}
.ip-swipe__done {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	text-align: center;
	background: var(--wp--preset--color--card, #EFEBE2);
	border-radius: 22px;
	padding: 2rem;
}
.ip-swipe__likes { margin-top: 2.5rem; }
.ip-swipe__likes-empty {
	font-size: 0.9rem;
	color: var(--wp--preset--color--taupe, #8C8578);
}
.ip-swipe__likes-grid {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin: 1rem 0;
}
.ip-fav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--wp--preset--color--white, #FBFAF6);
	border-radius: 14px;
	padding: 0.6rem 2.6rem 0.6rem 0.6rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #2A2723);
	box-shadow: 5px 5px 12px rgba(42, 39, 35, 0.08), -3px -3px 8px rgba(255, 255, 255, 0.7);
	transition: transform 0.2s ease;
}
.ip-fav:hover { transform: translateX(4px); color: var(--wp--preset--color--olive, #5E6B49); }
.ip-fav__media {
	flex: 0 0 76px;
	height: 60px;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ip-fav__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ip-fav__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.88rem;
	min-width: 0;
}
.ip-fav__body strong {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	line-height: 1.2;
}
.ip-fav__body span { color: var(--wp--preset--color--taupe, #8C8578); }
.ip-fav__remove {
	position: absolute;
	right: 0.7rem;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: none;
	color: var(--wp--preset--color--taupe, #8C8578);
	font-size: 0.9rem;
	cursor: pointer;
	padding: 0.3rem;
}
.ip-fav__remove:hover { color: #A65B4B; }

/* CTA-balk op de categoriepagina */
.ip-swipe-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	background: var(--wp--preset--color--olive, #5E6B49);
	color: var(--wp--preset--color--white, #FBFAF6);
	border-radius: 16px;
	padding: 1rem 1.4rem;
	margin: 1.5rem 0 0;
}
.ip-swipe-cta p { margin: 0; font-size: 0.95rem; }
.ip-swipe-cta a {
	color: var(--wp--preset--color--white, #FBFAF6);
	background: rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
}
.ip-swipe-cta a:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }

/* Done-overlay echt verbergen zolang er kaarten liggen */
.ip-swipe__done[hidden] { display: none; }

/* --- Verhalende productgalerij (ontwerp C) --- */
.ip-detail--story {
	grid-template-areas:
		"pack info"
		"scenes info";
	grid-template-rows: auto 1fr;
}
.ip-detail--story .ip-detail__media { grid-area: pack; }
.ip-detail--story .ip-detail__info { grid-area: info; }
.ip-detail__scenes {
	grid-area: scenes;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	min-width: 0;
}
@media (max-width: 820px) {
	.ip-detail--story {
		grid-template-areas:
			"pack"
			"info"
			"scenes";
		grid-template-rows: auto;
	}
}
.ip-detail__pack {
	display: flex;
	justify-content: center;
}
.ip-detail__pack img {
	max-width: 78%;
	height: auto;
	display: block;
}
.ip-detail__scene {
	margin: 0;
}
.ip-detail__scene img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 16px;
	display: block;
	box-shadow: 8px 8px 20px rgba(42, 39, 35, 0.08);
}
.ip-detail__scenecap {
	display: flex;
	gap: 0.7rem;
	align-items: baseline;
	padding: 0.6rem 0.2rem 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--taupe, #8C8578);
}
.ip-detail__scenecap strong {
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink, #2A2723);
	font-size: 0.95rem;
}

/* --- Paginering (shop-stijl: vlak, gecentreerd, met voortgang) --- */
.ip-pagination-status {
	text-align: center;
	font-size: 0.9rem;
	color: var(--wp--preset--color--taupe, #8C8578);
	margin: 2.2rem 0 0.5rem;
}
.ip-pagination-bar {
	width: 200px;
	height: 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--line, #DAD5C9);
	margin: 0 auto 1.4rem;
	overflow: hidden;
}
.ip-pagination-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--wp--preset--color--olive, #5E6B49);
}
.ip-pagination { margin: 0 0 1.5rem; }
.ip-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0;
	margin: 0;
}
.ip-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.6rem;
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #2A2723);
	background: none;
	border: 1px solid transparent;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ip-pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--line, #DAD5C9);
	background: var(--wp--preset--color--white, #FBFAF6);
	color: var(--wp--preset--color--ink, #2A2723);
}
.ip-pagination .page-numbers.current {
	background: var(--wp--preset--color--olive, #5E6B49);
	color: var(--wp--preset--color--white, #FBFAF6);
}
.ip-pagination .page-numbers.dots { min-width: auto; color: var(--wp--preset--color--taupe, #8C8578); }
.ip-pagination .page-numbers.prev,
.ip-pagination .page-numbers.next {
	gap: 0.4rem;
	padding: 0 1.1rem;
	border: 1px solid var(--wp--preset--color--line, #DAD5C9);
	background: var(--wp--preset--color--white, #FBFAF6);
}
.ip-pagination .page-numbers.prev { margin-right: 0.6rem; }
.ip-pagination .page-numbers.next { margin-left: 0.6rem; }
.ip-pagination .page-numbers.prev:hover,
.ip-pagination .page-numbers.next:hover {
	border-color: var(--wp--preset--color--olive, #5E6B49);
	color: var(--wp--preset--color--olive, #5E6B49);
}
.ip-grid-count a { color: var(--wp--preset--color--olive, #5E6B49); }

/* --- Categorietekst onder het grid --- */
.ip-cat-tekst {
	max-width: 720px;
	margin: 3.5rem auto 1rem;
	border-top: 1px solid var(--wp--preset--color--line, #DAD5C9);
	padding-top: 2.5rem;
}
.ip-cat-tekst h2 {
	font-size: 1.5rem;
	margin: 1.8em 0 0.5em;
}
.ip-cat-tekst h2:first-child { margin-top: 0; }
.ip-cat-tekst p { margin: 0 0 1em; }
.ip-cat-tekst ul { margin: 0 0 1em; padding-left: 1.2em; }
.ip-cat-tekst li { margin-bottom: 0.35em; }