/* ==========================================================================
   Prestige Detailing — gallery archive (pd-gallery)
   Figma "Gallery_archive" 14:984 (1728 frame, 1408 content). Rendered inside
   #wrap_all, so every rule is paired: ".pd-gal .x" + "#top #wrap_all .pd-gal .x".
   Shared from pd-main-nav: --pd-nav-* tokens, font, and the .pd-nav-t cap trim.
   ========================================================================== */

/* ---------- Tokens (ramps: 375 → 1728) ---------- */
.pd-gal {
	--pd-gal-dark: #161414;
	--pd-gal-line: rgba(255, 255, 255, 0.2);
	--pd-gal-tint: rgba(255, 255, 255, 0.08);
	--pd-gal-tint-hover: rgba(255, 255, 255, 0.16);

	--pd-gal-gap: clamp(56px, calc(44.91px + 2.9564vw), 96px);        /* brands → photos */
	--pd-gal-more-gap: clamp(32px, calc(27.57px + 1.1826vw), 48px);   /* photos → button */
	--pd-gal-grid-gap: clamp(8px, calc(6.89px + 0.2956vw), 12px);

	--pd-gal-arrow: 48px;
	--pd-gal-arrow-gap: 40px;
	--pd-gal-hang: calc(var(--pd-gal-arrow) + var(--pd-gal-arrow-gap)); /* arrows sit outside the column */
	--pd-gal-edge: 16px;                                                /* ...but never closer to the screen edge */

	--pd-gal-card-h: 200px;
	--pd-gal-peek: 0px;                                                 /* part of the next card shown at the end */
	--pd-gal-cols-now: 3;

	/* Margins: inline --pd-gal-mt / --pd-gal-mb from the panel; the ramp only writes -now */
	--pd-gal-mt-now: var(--pd-gal-mt, 0px);
}

.pd-gal.pd-gal--cols-2 { --pd-gal-cols-now: 2; }
.pd-gal.pd-gal--cols-4 { --pd-gal-cols-now: 4; }

@media (max-width: 1199px) {
	.pd-gal.pd-gal--scale { --pd-gal-mt-now: calc(var(--pd-gal-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-gal.pd-gal--scale { --pd-gal-mt-now: calc(var(--pd-gal-mt, 0px) * 0.6); }
}
@media (max-width: 767px) {
	.pd-gal,
	.pd-gal.pd-gal--cols-4 { --pd-gal-cols-now: 2; --pd-gal-hang: 0px; --pd-gal-peek: 40px; }
}

/* ---------- Root ---------- */
.pd-gal,
#top #wrap_all .pd-gal {
	display: flex;
	flex-direction: column;
	row-gap: var(--pd-gal-gap);
	width: 100%;
	margin-top: var(--pd-gal-mt-f, var(--pd-gal-mt-now));
	margin-bottom: var(--pd-gal-mb, 0px);
	color: var(--pd-nav-white);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

.pd-gal *,
#top #wrap_all .pd-gal * {
	box-sizing: border-box;
}

/* Lists: normalise margin, padding and list-style — never display */
.pd-gal .pd-gal__list,
.pd-gal .pd-gal__grid,
.pd-gal .pd-gal__brand,
.pd-gal .pd-gal__item,
#top #wrap_all .pd-gal .pd-gal__list,
#top #wrap_all .pd-gal .pd-gal__grid,
#top #wrap_all .pd-gal .pd-gal__brand,
#top #wrap_all .pd-gal .pd-gal__item {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style: none;
	background-image: none;
}

/* ---------- Corner brackets (brand cards + Load more): 8px × 2px L at each corner ---------- */
.pd-gal .pd-gal-corners,
#top #wrap_all .pd-gal .pd-gal-corners {
	position: relative;
}

.pd-gal .pd-gal-corners::after,
#top #wrap_all .pd-gal .pd-gal-corners::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
	background-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px, 8px 2px, 2px 8px, 8px 2px, 2px 8px;
	background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
	background-repeat: no-repeat;
}

/* ---------- Brand strip (Splide 4) ----------
   Vendor-classed: .pd-gal__brands (.splide, added by the script), .pd-gal__track (.splide__track),
   .pd-gal__list (.splide__list), .pd-gal__brand (.splide__slide), .pd-gal__arrows (.splide__arrows).
   display / position / overflow on the first four live ONLY behind the pre-mount guard
   ".pd-gal__brands:not(.pd-gal__brands--ready)". splide-core has no rule for .splide__arrows or .splide__arrow. */
.pd-gal .pd-gal__brands,
#top #wrap_all .pd-gal .pd-gal__brands {
	align-items: center;
	column-gap: var(--pd-gal-arrow-gap);
	/* Hang the arrows outside the column when the page has room; % is the column width */
	margin-left: min(0px, max(calc(-1 * var(--pd-gal-hang)), calc((100% - 100vw) / 2 + var(--pd-gal-edge))));
	margin-right: min(0px, max(calc(-1 * var(--pd-gal-hang)), calc((100% - 100vw) / 2 + var(--pd-gal-edge))));
}

/* The row itself: prev | track | next. .splide sets position + visibility only, so flex is ours. */
.pd-gal .pd-gal__brands,
.pd-gal .pd-gal__brands.splide,
#top #wrap_all .pd-gal .pd-gal__brands,
#top #wrap_all .pd-gal .pd-gal__brands.splide {
	display: flex;
}

/* The arrows wrapper steps out of the layout so the two buttons are flex items of the row */
.pd-gal .pd-gal__arrows,
#top #wrap_all .pd-gal .pd-gal__arrows {
	display: contents;
}

.pd-gal .pd-gal__arrow,
#top #wrap_all .pd-gal .pd-gal__arrow {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--pd-gal-arrow);
	height: var(--pd-gal-arrow);
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	border-width: 0;
	border-radius: 0;
	background-color: var(--pd-nav-red);
	color: var(--pd-nav-white);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.pd-gal .pd-gal__arrow--prev,
#top #wrap_all .pd-gal .pd-gal__arrow--prev {
	order: -1;
}

.pd-gal .pd-gal__arrow--next,
#top #wrap_all .pd-gal .pd-gal__arrow--next {
	order: 1;
}

.pd-gal .pd-gal__arrow:hover,
#top #wrap_all .pd-gal .pd-gal__arrow:hover {
	opacity: 0.88;
}

.pd-gal .pd-gal__arrow:focus-visible,
.pd-gal .pd-gal__brands:focus-visible,
.pd-gal .pd-gal__more:focus-visible,
.pd-gal .pd-gal__link:focus-visible,
#top #wrap_all .pd-gal .pd-gal__arrow:focus-visible,
#top #wrap_all .pd-gal .pd-gal__brands:focus-visible,
#top #wrap_all .pd-gal .pd-gal__more:focus-visible,
#top #wrap_all .pd-gal .pd-gal__link:focus-visible {
	outline: 1px solid var(--pd-nav-white);
	outline-offset: 4px;
}

/* Splide sets [disabled] at either end (type: slide) */
.pd-gal .pd-gal__arrow:disabled,
#top #wrap_all .pd-gal .pd-gal__arrow:disabled {
	background-color: var(--pd-gal-tint);
	opacity: 1;
	cursor: default;
}

.pd-gal .pd-gal__chev,
#top #wrap_all .pd-gal .pd-gal__chev {
	display: block;
	width: 24px;
	height: 24px;
	max-width: none;
}

.pd-gal .pd-gal__arrow--prev .pd-gal__chev,
#top #wrap_all .pd-gal .pd-gal__arrow--prev .pd-gal__chev {
	transform: rotate(180deg);
}

/* Everything fits: nothing to page through. Arrows keep their space; the row centres. */
.pd-gal .pd-gal__brands.is-initialized:not(.is-overflow) .pd-gal__arrow,
#top #wrap_all .pd-gal .pd-gal__brands.is-initialized:not(.is-overflow) .pd-gal__arrow {
	visibility: hidden;
}

.pd-gal .pd-gal__brands.is-initialized:not(.is-overflow) .pd-gal__list,
#top #wrap_all .pd-gal .pd-gal__brands.is-initialized:not(.is-overflow) .pd-gal__list {
	justify-content: center;
}

/* Phones swipe; the arrows stand down */
@media (max-width: 767px) {
	.pd-gal .pd-gal__arrow,
	#top #wrap_all .pd-gal .pd-gal__arrow {
		display: none;
	}
}

/* Track: a size container, so the CSS decides how many whole cards fit (the script reads --pd-gal-n) */
.pd-gal .pd-gal__track,
#top #wrap_all .pd-gal .pd-gal__track {
	flex: 1 1 0;
	min-width: 0;
	container-type: inline-size;
	container-name: pd-gal-vp;
}

/* n whole cards that overlap by 2px, after the peek: w = (V − peek + 2(n − 1)) / n */
.pd-gal .pd-gal__list,
#top #wrap_all .pd-gal .pd-gal__list {
	--pd-gal-n: 2;
}

@container pd-gal-vp (min-width: 524px)  { .pd-gal .pd-gal__list, #top #wrap_all .pd-gal .pd-gal__list { --pd-gal-n: 3; } }
@container pd-gal-vp (min-width: 698px)  { .pd-gal .pd-gal__list, #top #wrap_all .pd-gal .pd-gal__list { --pd-gal-n: 4; } }
@container pd-gal-vp (min-width: 872px)  { .pd-gal .pd-gal__list, #top #wrap_all .pd-gal .pd-gal__list { --pd-gal-n: 5; } }
@container pd-gal-vp (min-width: 1046px) { .pd-gal .pd-gal__list, #top #wrap_all .pd-gal .pd-gal__list { --pd-gal-n: 6; } }
@container pd-gal-vp (min-width: 1220px) { .pd-gal .pd-gal__list, #top #wrap_all .pd-gal .pd-gal__list { --pd-gal-n: 7; } }
@container pd-gal-vp (min-width: 1394px) { .pd-gal .pd-gal__list, #top #wrap_all .pd-gal .pd-gal__list { --pd-gal-n: 8; } }

/* ----- Pre-mount (and no-JS): the same geometry Splide will set, natively scrollable ----- */
.pd-gal .pd-gal__brands:not(.pd-gal__brands--ready) .pd-gal__track,
#top #wrap_all .pd-gal .pd-gal__brands:not(.pd-gal__brands--ready) .pd-gal__track {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pd-gal .pd-gal__brands:not(.pd-gal__brands--ready) .pd-gal__track::-webkit-scrollbar,
#top #wrap_all .pd-gal .pd-gal__brands:not(.pd-gal__brands--ready) .pd-gal__track::-webkit-scrollbar {
	display: none;
}

.pd-gal .pd-gal__brands:not(.pd-gal__brands--ready) .pd-gal__list,
#top #wrap_all .pd-gal .pd-gal__brands:not(.pd-gal__brands--ready) .pd-gal__list {
	display: flex;                                   /* splide-core also says flex; its padding is !important 0 */
}

.pd-gal .pd-gal__brands:not(.pd-gal__brands--ready) .pd-gal__brand,
#top #wrap_all .pd-gal .pd-gal__brands:not(.pd-gal__brands--ready) .pd-gal__brand {
	width: calc((100cqw - var(--pd-gal-peek) + 2px * (var(--pd-gal-n) - 1)) / var(--pd-gal-n));
	margin-right: -2px;
	scroll-snap-align: start;
}

.pd-gal .pd-gal__brands:not(.pd-gal__brands--ready) .pd-gal__brand:last-child,
#top #wrap_all .pd-gal .pd-gal__brands:not(.pd-gal__brands--ready) .pd-gal__brand:last-child {
	margin-right: 0;
}

/* ----- Card (width and the 2px overlap come from Splide once mounted) ----- */
.pd-gal .pd-gal__brand,
#top #wrap_all .pd-gal .pd-gal__brand {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	row-gap: 32px;                                   /* logo box → name cap top (124 → 156) */
	height: var(--pd-gal-card-h);
	padding-top: 36px;
	padding-left: 8px;
	padding-right: 8px;
	background-color: var(--pd-gal-dark);
	box-shadow: inset 0 0 0 1px var(--pd-gal-line);
}

.pd-gal .pd-gal__logo,
#top #wrap_all .pd-gal .pd-gal__logo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 120px;
	max-width: 100%;
	height: 88px;
}

.pd-gal .pd-gal__logo-img,
#top #wrap_all .pd-gal .pd-gal__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.pd-gal .pd-gal__name,
#top #wrap_all .pd-gal .pd-gal__name {
	--fs: 22px;
	--lh: 32px;
	max-width: 100%;
	font-weight: 400;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	color: var(--pd-nav-white);
}

/* ---------- Photos ---------- */
.pd-gal .pd-gal__photos,
#top #wrap_all .pd-gal .pd-gal__photos {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--pd-gal-more-gap);
}

.pd-gal .pd-gal__grid,
#top #wrap_all .pd-gal .pd-gal__grid {
	display: grid;
	grid-template-columns: repeat(var(--pd-gal-cols-now), minmax(0, 1fr));
	gap: var(--pd-gal-grid-gap);
	width: 100%;
	margin-right: 0;
}

.pd-gal .pd-gal__item,
#top #wrap_all .pd-gal .pd-gal__item {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 173 / 150;                         /* 461.33 × 400: a third of 1408 less gaps */
	background-color: var(--pd-gal-tint);
}

.pd-gal .pd-gal__link,
#top #wrap_all .pd-gal .pd-gal__link {
	display: block;
	width: 100%;
	height: 100%;
	border-bottom-width: 0;
	text-decoration: none;
}

.pd-gal .pd-gal__img,
#top #wrap_all .pd-gal .pd-gal__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	transition: transform 0.6s ease;
}

.pd-gal .pd-gal__link:hover .pd-gal__img,
#top #wrap_all .pd-gal .pd-gal__link:hover .pd-gal__img {
	transform: scale(1.04);
}

.pd-gal .pd-gal__item.is-new,
#top #wrap_all .pd-gal .pd-gal__item.is-new {
	animation: pd-gal-in 0.5s ease both;
}

@keyframes pd-gal-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- Load more ---------- */
.pd-gal .pd-gal__more-row,
#top #wrap_all .pd-gal .pd-gal__more-row {
	display: flex;
	justify-content: center;
}

.pd-gal .pd-gal__more,
#top #wrap_all .pd-gal .pd-gal__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 24px;
	padding-right: 32px;
	padding-bottom: 24px;
	padding-left: 32px;
	border-width: 0;
	border-radius: 0;
	background-color: var(--pd-gal-tint);
	color: var(--pd-nav-white);
	font-family: var(--pd-nav-font);
	cursor: pointer;
	transition: background-color 0.25s ease;         /* same as the nav's .pd-btn-bracket and pd-button */
}

.pd-gal .pd-gal__more:hover,
#top #wrap_all .pd-gal .pd-gal__more:hover {
	background-color: var(--pd-gal-tint-hover);
}

.pd-gal .pd-gal__more[aria-busy="true"],
#top #wrap_all .pd-gal .pd-gal__more[aria-busy="true"] {
	cursor: progress;
}

.pd-gal .pd-gal__more-text,
#top #wrap_all .pd-gal .pd-gal__more-text {
	--fs: 16px;
	--lh: 24px;
	font-weight: 400;
	letter-spacing: 0.03em;                          /* 0.48 @ 16 */
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pd-nav-white);
}

/* No script: nothing to reveal the templates, so no button */
.pd-gal:not(.pd-gal--ready) .pd-gal__more-row,
#top #wrap_all .pd-gal:not(.pd-gal--ready) .pd-gal__more-row {
	display: none;
}

/* ---------- Lightbox: body-level Magnific popup, above pd-main-nav's fixed bar (9990) ---------- */
.mfp-bg.pd-gal-mfp,
#top > .mfp-bg.pd-gal-mfp {
	z-index: 10000;
}

.mfp-wrap.pd-gal-mfp,
#top > .mfp-wrap.pd-gal-mfp {
	z-index: 10001;
}