/* Shop-banner: ocher achtergrond met rasterlijnen, groot groen haags-logo in het
 * midden, en de cursor-gestuurde beeld-trail (zoals de homepage-hero). Vervangt
 * de oude foto-banner. */

/* De oude foto-banner uit de mu-plugin verbergen. */
.haags-page-banner {
	display: none !important;
}

.hg-shop-banner {
	position: relative;
	/* Boven de reveal-footer (z-index:0), net als <main>, zodat de footer aan de
	 * bovenkant van de shop-pagina's netjes wordt afgedekt (en pas onderaan bij het
	 * scrollen onthuld wordt). */
	z-index: 1;
	width: 100%;
	height: clamp(220px, 28vw, 360px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #e6c044;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size:
		100px 100%,
		20px 100%;
	background-position:
		-2px 0,
		-1px 0;
}

.hg-shop-banner * {
	box-sizing: border-box;
}

/* Groen logo, groot en gecentreerd, boven de trail. Faadt bij het laden in. */
.hg-shop-banner__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	pointer-events: none;
	animation: hg-banner-logo-in .8s cubic-bezier(.5, .5, 0, 1) .15s both;
}

@keyframes hg-banner-logo-in {
	from {
		opacity: 0;
		transform: translateY(26px) rotate(-2deg);
	}
	to {
		opacity: 1;
		transform: translateY(0) rotate(0deg);
	}
}

.hg-shop-banner__logo {
	display: block;
	width: min(82vw, 54rem);
	max-height: 93%;
	height: auto;
	object-fit: contain;
	user-select: none;
	/* Smoothing voor het 3D-tilt-effect (JS zet de rotatie). */
	transition: transform .35s cubic-bezier(.5, .5, 0, 1);
	transform-origin: center center;
	backface-visibility: hidden;
	will-change: transform;
}

/* Het logo linkt naar de homepage. Het content-blok zelf blijft
 * pointer-events: none (de banner eromheen hoort bij de trail); alleen de link
 * vangt de muis. De trail luistert daarom op de hele banner (ShopBanner.js). */
.hg-shop-banner__logo-link {
	display: block;
	pointer-events: auto;
	border-radius: 1rem;
}

.hg-shop-banner__logo-link:focus-visible {
	outline: 3px solid #1e7a54;
	outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.hg-shop-banner__content {
		animation: none;
	}
	.hg-shop-banner__logo {
		transition: none;
	}
}

/* ============================================
   Cursor-gestuurde beeld-trail (identiek aan de homepage-hero).
   ============================================ */
.rotating-image-trail {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
}

.rotating-image-trail__collection {
	opacity: 0;
	pointer-events: none;
}

.rotating-image-trail__list {
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	flex-flow: wrap;
	display: flex;
}

.rotating-image-trail__item {
	z-index: 10;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.rotating-image-trail__card {
	aspect-ratio: 1 / 1;
	width: clamp(6rem, 9vw, 9rem);
	position: relative;
}

.rotating-image-trail__card-img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

[data-trail-item="hidden"] {
	transform: translate(-50%, -50%) scale(0) rotate(-20deg);
	position: absolute;
}

[data-trail-item="visible"] {
	transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
	transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
	position: absolute;
}

[data-trail-item="transition-out"] {
	transform: translate(-50%, -50%) scale(0) rotate(180deg);
	transition: transform 0.8s cubic-bezier(0.625, 0, 0.875, 0);
	position: absolute;
}

@media (prefers-reduced-motion: reduce) {
	[data-trail-item="visible"],
	[data-trail-item="transition-out"] {
		transition: none;
	}
}

/* Onzichtbare paginatitel (h1) voor zoekmachines en schermlezers: de banner
 * toont alleen het logo (ShopBanner::render). */
.hg-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}