/* =========================================================
   Brand imagery
   Every media box owns a fixed aspect ratio so the grid never
   shifts while photographs load.
   ========================================================= */

/* ---------------------------------------------------------
   Missing-asset placeholder
   --------------------------------------------------------- */

.img-missing {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--sp-2);
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: var(--sp-4);
	border: 1.5px dashed var(--ink-300);
	border-radius: var(--radius);
	background: repeating-linear-gradient(
		45deg,
		var(--surface-2),
		var(--surface-2) 10px,
		var(--surface-3) 10px,
		var(--surface-3) 20px
	);
	color: var(--ink-500);
	text-align: center;
}

.img-missing__icon {
	font-size: 1.5rem;
	line-height: 1;
	opacity: 0.6;
}

.img-missing__text {
	font-size: var(--fs-xs);
	font-weight: 600;
	max-width: 18ch;
}

/* ---------------------------------------------------------
   Branding lockups
   --------------------------------------------------------- */

.brand__logo {
	width: auto;
	height: 54px;
	object-fit: contain;
}

@media (max-width: 480px) {
	.brand__logo { height: 42px; }
	.brand__text { display: none; }
}

.site-footer .brand__logo { height: 50px; }

/* ---------------------------------------------------------
   Hero banners
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Reward tiles
   --------------------------------------------------------- */

/* The supplied artwork carries a baked-in red price band under the product.
   Anchoring the crop to the top keeps the product and drops that band, so the
   translatable name and points pill below are the only labels on screen. */
.reward__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	background: #fff;
	overflow: hidden;
}

.reward__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform var(--dur) var(--ease);
}

.reward:hover .reward__img { transform: scale(1.05); }

.reward--featured .reward__media { background: #fff; }

.reward__media .img-missing { aspect-ratio: 4 / 3; border: 0; border-radius: 0; }

/* ---------------------------------------------------------
   Certificate scans
   --------------------------------------------------------- */

.cert {
	justify-items: stretch;
	text-align: center;
}

.cert__media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	margin-bottom: var(--sp-3);
	border-radius: var(--radius-sm);
	background: #fff;
	border: 1px solid var(--line);
	overflow: hidden;
}

.cert__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.cert__media .img-missing {
	aspect-ratio: 3 / 4;
	border: 0;
	border-radius: 0;
}

@media (min-width: 1000px) {
	/* Descriptions are hidden on wide screens; the scan carries the meaning. */
	.cert__text { display: none; }
}

/* ---------------------------------------------------------
   Product cards
   --------------------------------------------------------- */

.product { padding: 0; overflow: hidden; }

.product__media {
	position: relative;
	display: block;
	width: auto;
	margin: var(--sp-3) var(--sp-3) 0;
	aspect-ratio: 7 / 5;
	border-radius: var(--radius);
	background: var(--surface-2);
	overflow: visible;
}

.product__img,
.product__media .img-missing { border-radius: var(--radius); }

.product__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.product:hover .product__img { transform: scale(1.04); }

.product__media .img-missing {
	aspect-ratio: 7 / 5;
	border: 0;
	border-radius: 0;
}

.product__media .product__icon {
	position: absolute;
	left: var(--sp-3);
	bottom: calc(var(--sp-4) * -1);
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 50%;
	background: var(--teal-500);
	color: var(--navy-900);
	box-shadow: var(--shadow-sm);
}

.product__body { padding: calc(var(--sp-6) + 4px) var(--sp-5) var(--sp-5); }

/* ---------------------------------------------------------
   Tutorial step screenshots
   --------------------------------------------------------- */





/* ---------------------------------------------------------
   Awards gallery
   --------------------------------------------------------- */

.gallery__tile {
	display: block;
	padding: 0;
	aspect-ratio: 3 / 2;
	border: 0;
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.gallery__tile:hover .gallery__img { transform: scale(1.06); }

.gallery__zoom {
	background: rgba(255, 255, 255, 0.9);
	color: var(--brand);
}

.lightbox__panel--photo {
	width: min(880px, 100%);
	padding: var(--sp-4);
	gap: var(--sp-3);
}

.lightbox__image {
	width: 100%;
	max-height: 72vh;
	object-fit: contain;
	border-radius: var(--radius);
	background: var(--surface-2);
}

.lightbox__count {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text-muted);
}

/* ---------------------------------------------------------
   Store badges
   --------------------------------------------------------- */

.store-badge {
	display: inline-block;
	border-radius: 10px;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.store-badge img {
	height: 52px;
	width: auto;
}

.store-badge:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.app-band__art {
	width: min(100%, 280px);
	filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}

/* =========================================================
   Award winners marquee
   The track is a flex row of fixed-fraction slides. Slide
   count per view is the only thing that changes by breakpoint.
   ========================================================= */

.marquee {
	--slides: 1.25;
	position: relative;
	overflow: hidden;
}

@media (min-width: 480px)  { .marquee { --slides: 1.8; } }
@media (min-width: 640px)  { .marquee { --slides: 2.4; } }
@media (min-width: 900px)  { .marquee { --slides: 3.4; } }
@media (min-width: 1200px) { .marquee { --slides: 4.4; } }

.marquee__viewport {
	overflow: hidden;
	cursor: grab;
	/* Let the browser own vertical scrolling; we only take the horizontal axis. */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	padding-block: var(--sp-2);
}

.marquee__viewport.is-dragging { cursor: grabbing; }

.marquee__track {
	display: flex;
	gap: var(--sp-4);
	margin: 0;
	padding: 0 var(--gutter);
	list-style: none;
	will-change: transform;
}

.marquee__item {
	flex: 0 0 calc((100% - var(--gutter) * 2) / var(--slides));
	min-width: 0;
}

/* Photographs must never be dragged out of the page as a ghost image. */
.marquee__track img {
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

/* Soft edges so slides fade in and out rather than being cut off. */
.marquee::before,
.marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: clamp(24px, 6vw, 90px);
	pointer-events: none;
}

.marquee::before {
	left: 0;
	background: linear-gradient(90deg, var(--sec-bg), transparent);
}

.marquee::after {
	right: 0;
	background: linear-gradient(270deg, var(--sec-bg), transparent);
}

/* ---------------------------------------------------------
   Controls
   --------------------------------------------------------- */

.marquee__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.marquee__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 42px;
	padding: 0 0.9rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--ink-700);
	font-size: var(--fs-xs);
	font-weight: 700;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.marquee__btn:hover {
	border-color: var(--teal-500);
	color: var(--teal-700);
	box-shadow: var(--shadow-sm);
}

.marquee__btn:not(.marquee__btn--play) {
	width: 42px;
	padding: 0;
}

/* Pause glyph, which becomes a play triangle once the marquee is held. */
.marquee__icon--pause {
	width: 10px;
	height: 12px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.marquee__btn--play.is-paused .marquee__icon--pause {
	width: 0;
	height: 0;
	border-left: 10px solid currentColor;
	border-right: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

@media (max-width: 559px) {
	/* Swipe is the primary control on touch; keep only play/pause. */
	.marquee__btn:not(.marquee__btn--play) { display: none; }
}

/* =========================================================
   Clickable product cards
   One stretched link covers the card; the toggle and the
   subcategory links sit above it and stay independent.
   ========================================================= */

.product--linked { position: relative; }

.product__link {
	color: inherit;
	text-decoration: none;
}

/* The hit area: covers the whole card, sits under the controls. */
.product--linked .product__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius-lg);
}

/* Anything interactive inside the card must clear the stretched link. */
.product__toggle,
.product__panel,
.product__list a {
	position: relative;
	z-index: 2;
}

/* --- hover / focus affordance --- */

.product--linked { cursor: pointer; }

.product--linked:hover,
.product--linked:focus-within {
	border-color: var(--teal-100);
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.product {
	transition:
		transform 0.3s var(--ease),
		border-color 0.3s var(--ease),
		box-shadow 0.3s var(--ease);
}

.product--linked:hover .product__title,
.product--linked:focus-within .product__title {
	color: var(--teal-700);
}

.product--linked:hover .product__img {
	transform: scale(1.06);
}

/* Keyboard focus needs a visible ring on the card, not just the text. */
.product__link:focus-visible::after {
	outline: 3px solid var(--teal-600);
	outline-offset: 3px;
}

/* --- "View range" cue on cards with no subcategory list --- */

.product__cue {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line-soft);
	width: 100%;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--brand);
}

.product__cue .icon {
	transition: transform var(--dur) var(--ease);
}

.product--linked:hover .product__cue .icon {
	transform: translateX(4px);
}

/* --- subcategory rows are links now --- */

.product__list a {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	padding: 0.3rem 0;
	color: var(--ink-700);
	font-size: var(--fs-sm);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.product__list a:hover {
	color: var(--teal-700);
	transform: translateX(3px);
}

.product__list a .icon {
	margin-top: 4px;
	color: var(--teal-600);
}

@media (prefers-reduced-motion: reduce) {
	.product,
	.product__img,
	.product__list a,
	.product__cue .icon {
		transition: none;
	}

	.product--linked:hover { transform: none; }
	.product--linked:hover .product__img { transform: none; }
}

/* =========================================================
   Clickable reward tiles
   Same stretched-link pattern as the product cards.
   ========================================================= */

.reward--linked { position: relative; }

.reward__link {
	color: inherit;
	text-decoration: none;
}

.reward--linked .reward__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius);
}

.reward--linked { cursor: pointer; }

.reward--linked:hover,
.reward--linked:focus-within {
	transform: translateY(-4px);
	border-color: var(--teal-100);
	box-shadow: var(--shadow-lg);
}

.reward--linked:hover .reward__name,
.reward--linked:focus-within .reward__name {
	color: var(--teal-700);
}

.reward--linked:hover .reward__points {
	background: var(--teal-500);
	color: var(--navy-900);
}

.reward__link:focus-visible::after {
	outline: 3px solid var(--teal-600);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.reward--linked:hover { transform: none; }
}