/* ==========================================================================
   Prestige Detailing — categories carousel (pd-categories)
   Figma 178:5918 (@1728, on #161414): pd-text-block's head (On dark) + rule + text in a 580 column
   (the rule runs on to the LEFT screen edge), 48px prev/next bottom-right of it (rest: white at 8%,
   white chevron; hover / focus: red). 72 below, a row of 343 × 400 category cards, 12 apart, that
   spans the SCREEN and centres the current card (5 in view at 1728, the outer two cut). Each card is
   the category image cropped to the card, a #161414 gradient over its lower half and the name, 22/32
   medium, centred, its baseline 40 above the card's foot, 32 in from each side. 8px dots 40 below.
   Mobile (204:6078 @375): 300 × 350 cards (same ratio), 16 in = the column edge, the row runs on to
   the right screen edge so the next card peeks in; gradient over the lower 4/7 to 88%; name 24 in,
   baseline 32 up. Between, the card ramps 300 → 343 with the viewport.
   The script measures the distance to each screen edge (--pd-ct-bleed-l / -r) and reads the focus
   (--pd-ct-focus) and first card (--pd-ct-start) back off the root; the CSS decides all three.
   The head is pd-text-block's markup; its rules are CARRIED below, scoped to .pd-ct, so no sibling
   stylesheet has to be current on the server.
   Rendered inside #wrap_all, so every rule is paired: ".pd-ct .x" + "#top #wrap_all .pd-ct .x".
   Vendor sheet (css/vendor/splide-core.min.css) loads first; pre-mount rules sit behind
   .pd-ct:not(.pd-ct--ready) so the two cannot fight.
   ========================================================================== */

@property --pd-fb       { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --pd-nav-tt   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-nav-tb   { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens (ramps: 375 → 1728) ---------- */
.pd-ct {
	/* Shared site tokens — same values as pd-main-nav / pd-text-block */
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;

	--pd-ct-ink: 22, 20, 20;                                              /* #161414 — the section */
	--pd-ct-wh: 255, 255, 255;
	--pd-ct-red: #d60c0c;

	--pd-ct-text-w: 580px;
	--pd-ct-head-gap: clamp(48px, calc(41.35px + 1.7738vw), 72px);        /* head → cards */
	--pd-ct-arrows-gap: clamp(28px, calc(25.78px + 0.5913vw), 36px);      /* stacked: text → arrows */
	--pd-ct-btn: clamp(40px, calc(37.783px + 0.5913vw), 48px);
	--pd-ct-btn-gap: 8px;
	--pd-ct-icon: 24px;

	--pd-ct-gap: 12px;                                                    /* read by the script too */
	--pd-ct-card-w: clamp(300px, calc(288.08px + 3.1781vw), 343px);       /* 300 @375 → 343 @1728 */
	--pd-ct-card-ratio: 343 / 400;                                        /* = 300 / 350 */
	--pd-ct-name-fs: 22px;                                                /* 22/32 medium (both frames) */
	--pd-ct-name-lh: 32px;
	--pd-ct-name-x: clamp(24px, calc(21.78px + 0.5913vw), 32px);          /* name inset, each side */
	--pd-ct-name-y: clamp(32px, calc(29.78px + 0.5913vw), 40px);          /* baseline → card foot */
	--pd-ct-fade-top: 50%;                                                /* gradient: lower half… */
	--pd-ct-fade-a: 1;                                                    /* …to #161414 */
	--pd-ct-dots-gap: 40px;                                               /* cards → dots (both frames) */
	--pd-ct-dot: 8px;
	--pd-ct-dot-gap: 10px;

	/* Read by the script: centre the current card, starting on the 3rd (Figma: dot 3 lit) */
	--pd-ct-focus: center;
	--pd-ct-start: 2;
	/* Screen-edge bleed actually used (0 without the script) */
	--pd-ct-bll: var(--pd-ct-bleed-l, 0px);
	--pd-ct-brr: var(--pd-ct-bleed-r, 0px);

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

@media (max-width: 1199px) {
	.pd-ct.pd-ct--scale { --pd-ct-mt-now: calc(var(--pd-ct-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-ct.pd-ct--scale { --pd-ct-mt-now: calc(var(--pd-ct-mt, 0px) * 0.6); }
}
/* Phones (Figma 204:6078): the first card on the column edge, the row runs on to the right screen edge */
@media (max-width: 767px) {
	.pd-ct {
		--pd-ct-focus: start;
		--pd-ct-start: 0;
		--pd-ct-bll: 0px;
		--pd-ct-fade-top: 42.857%;                                        /* 150 / 350 */
		--pd-ct-fade-a: 0.88;
	}
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav / pd-text-block ---------- */
.pd-ct .pd-nav-t,
#top #wrap_all .pd-ct .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.pd-ct { --pd-fb: 1; }
}

/* ---------- CARRIED: pd-text-block rules, scoped to .pd-ct ----------
   Generated by preview/carry.php from ../pd-text-block/css/pd-text-block.css.
   Do not edit by hand: re-run it. validate.php fails on any drift. */

.pd-ct .pd-tb {
	--pd-nav-white: #fff;
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;
	--pd-tb-ink: 255, 255, 255;
	--pd-tb-w: 580px;
	--pd-tb-l1-fs: clamp(24px, calc(21.78px + 0.5913vw), 32px);
	--pd-tb-l2-fs: clamp(32px, calc(27.57px + 1.1826vw), 48px);
	--pd-tb-l2-lh: clamp(32px, calc(28.67px + 0.8869vw), 44px);
	--pd-tb-title-gap: clamp(8px, calc(6.89px + 0.2956vw), 12px);
	--pd-tb-rule-gap: clamp(32px, calc(29.78px + 0.5913vw), 40px);
	--pd-tb-text-fs: clamp(16px, calc(15.45px + 0.1478vw), 18px);
	--pd-tb-text-lh: clamp(24px, calc(22.89px + 0.2956vw), 28px);
	--pd-tb-lg-fs: clamp(18px, calc(16.89px + 0.2956vw), 22px);
	--pd-tb-lg-lh: clamp(28px, calc(26.89px + 0.2956vw), 32px);
	--pd-tb-block-gap: clamp(40px, calc(33.35px + 1.7738vw), 64px);
	--pd-tb-checks-gap: clamp(24px, calc(21.78px + 0.5913vw), 32px);
	--pd-tb-item-gap: clamp(28px, calc(25.78px + 0.5913vw), 36px);
	--pd-tb-li-gap: 4px;
	--pd-tb-indent: 27px;
	--pd-tb-tick: 40px;
	--pd-tb-tick-icon: 24px;
	--pd-tb-tick-gap: 16px;
	--pd-tb-para-gap: calc(2 * var(--pd-tb-text-lh) - var(--pd-cap) * var(--pd-tb-text-fs));
	--pd-tb-gw: calc(min(var(--pd-tb-w), 100vw - 32px) * 0.25);
	--pd-tb-mt-now: var(--pd-tb-mt, 0px);
}

.pd-ct .pd-tb.pd-tb--light {
	--pd-tb-ink: 22, 20, 20;
}

.pd-ct .pd-tb .pd-nav-t,
.pd-ct .pd-tb .pd-tb__text > p,
.pd-ct .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6),
#top #wrap_all .pd-ct .pd-tb .pd-nav-t,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text > p,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6) {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

.pd-ct .pd-tb .pd-tb__text > :is(ul, ol) > li:first-child,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text > :is(ul, ol) > li:first-child {
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	text-box-trim: trim-start;
	text-box-edge: cap alphabetic;
	text-box: trim-start cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
}

.pd-ct .pd-tb .pd-tb__text > :is(ul, ol) > li:last-child,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text > :is(ul, ol) > li:last-child {
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	text-box-trim: trim-end;
	text-box-edge: cap alphabetic;
	text-box: trim-end cap alphabetic;
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

.pd-ct .pd-tb .pd-tb__text > :is(ul, ol) > li:only-child,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text > :is(ul, ol) > li:only-child {
	text-box-trim: trim-both;
	text-box: trim-both cap alphabetic;
}

.pd-ct .pd-tb,
#top #wrap_all .pd-ct .pd-tb {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-rule-gap);
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--pd-tb-mt-f, var(--pd-tb-mt-now));
	margin-bottom: var(--pd-tb-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: rgb(var(--pd-tb-ink));
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-text-fs);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

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

.pd-ct .pd-tb .pd-tb__col,
#top #wrap_all .pd-ct .pd-tb .pd-tb__col {
	width: min(var(--pd-tb-w), 100%);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: 0;
}

.pd-ct .pd-tb.pd-tb--left .pd-tb__col,
#top #wrap_all .pd-ct .pd-tb.pd-tb--left .pd-tb__col {
	margin-left: 0;
	margin-right: auto;
}

.pd-ct .pd-tb .pd-tb__head,
.pd-ct .pd-tb .pd-tb__title,
#top #wrap_all .pd-ct .pd-tb .pd-tb__head,
#top #wrap_all .pd-ct .pd-tb .pd-tb__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-tb-title-gap);
}

.pd-ct .pd-tb .pd-tb__title,
#top #wrap_all .pd-ct .pd-tb .pd-tb__title {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-l2-fs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: rgb(var(--pd-tb-ink));
	overflow-wrap: break-word;
}

.pd-ct .pd-tb .pd-tb__main,
#top #wrap_all .pd-ct .pd-tb .pd-tb__main {
	--fs: var(--pd-tb-l2-fs);
	--lh: var(--pd-tb-l2-lh);
	max-width: 100%;
	font-weight: 700;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: rgb(var(--pd-tb-ink));
}

.pd-ct .pd-tb .pd-tb__sub,
#top #wrap_all .pd-ct .pd-tb .pd-tb__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 4px;
	row-gap: var(--pd-tb-title-gap);
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-l1-fs);
	font-weight: 400;
	line-height: 1;
	white-space: normal;
	color: rgb(var(--pd-tb-ink));
}

.pd-ct .pd-tb .pd-tb__accent,
#top #wrap_all .pd-ct .pd-tb .pd-tb__accent {
	--fs: var(--pd-tb-l1-fs);
	--lh: var(--pd-tb-l1-fs);
	max-width: 100%;
	font-weight: 400;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.pd-ct .pd-tb .pd-tb__grad,
#top #wrap_all .pd-ct .pd-tb .pd-tb__grad {
	background-image: linear-gradient(90deg, rgba(var(--pd-tb-ink), 0.4) 0, rgb(var(--pd-tb-ink)) var(--pd-tb-gw));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.pd-ct .pd-tb .pd-tb__note,
#top #wrap_all .pd-ct .pd-tb .pd-tb__note {
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(var(--pd-tb-ink), 0.64);
}

.pd-ct .pd-tb .pd-tb__rule,
#top #wrap_all .pd-ct .pd-tb .pd-tb__rule {
	position: relative;
	display: block;
	flex: none;
	width: 100%;
	height: 1px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	background-color: rgba(var(--pd-tb-ink), 0.4);
}

.pd-ct .pd-tb.pd-tb--bleed .pd-tb__rule,
#top #wrap_all .pd-ct .pd-tb.pd-tb--bleed .pd-tb__rule {
	width: min(var(--pd-tb-w), 100%);
	margin-left: auto;
	margin-right: 0;
}

.pd-ct .pd-tb.pd-tb--bleed.pd-tb--left .pd-tb__rule,
#top #wrap_all .pd-ct .pd-tb.pd-tb--bleed.pd-tb--left .pd-tb__rule {
	margin-left: 0;
	margin-right: auto;
}

.pd-ct .pd-tb.pd-tb--bleed .pd-tb__rule::before,
#top #wrap_all .pd-ct .pd-tb.pd-tb--bleed .pd-tb__rule::before {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	right: auto;
	width: var(--pd-tb-bleed, 100vw);
	height: 1px;
	background-color: rgba(var(--pd-tb-ink), 0.4);
}

.pd-ct .pd-tb.pd-tb--bleed.pd-tb--left .pd-tb__rule::before,
#top #wrap_all .pd-ct .pd-tb.pd-tb--bleed.pd-tb--left .pd-tb__rule::before {
	left: auto;
	right: 100%;
}

.pd-ct .pd-tb .pd-tb__body,
#top #wrap_all .pd-ct .pd-tb .pd-tb__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-block-gap);
}

.pd-ct .pd-tb .pd-tb__text,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-para-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-text-fs);
	line-height: var(--pd-tb-text-lh);
	font-weight: 400;
	letter-spacing: 0;
	color: rgba(var(--pd-tb-ink), 0.72);
	overflow-wrap: break-word;
}

.pd-ct .pd-tb .pd-tb__text > p,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text > p {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	color: rgba(var(--pd-tb-ink), 0.72);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pd-ct .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6),
#top #wrap_all .pd-ct .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6) {
	--fs: var(--pd-tb-lg-fs);
	--lh: var(--pd-tb-lg-lh);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	color: rgb(var(--pd-tb-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pd-ct .pd-tb .pd-tb__text > :is(ul, ol),
#top #wrap_all .pd-ct .pd-tb .pd-tb__text > :is(ul, ol) {
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: var(--pd-tb-indent);
	padding-right: 0;
	list-style-type: disc;
	list-style-position: outside;
	color: rgba(var(--pd-tb-ink), 0.72);
}

.pd-ct .pd-tb .pd-tb__text > ol,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text > ol {
	list-style-type: decimal;
}

.pd-ct .pd-tb .pd-tb__text > :is(ul, ol) > li,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text > :is(ul, ol) > li {
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	display: list-item;
	margin-top: 0;
	margin-bottom: var(--pd-tb-li-gap);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-size: var(--fs);
	line-height: var(--lh);
	color: inherit;
	list-style-type: inherit;
}

.pd-ct .pd-tb .pd-tb__text :is(strong, b),
#top #wrap_all .pd-ct .pd-tb .pd-tb__text :is(strong, b) {
	font-weight: 700;
	color: rgb(var(--pd-tb-ink));
}

.pd-ct .pd-tb .pd-tb__text a,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text a {
	color: rgb(var(--pd-tb-ink));
	text-decoration-line: underline;
	text-underline-offset: 0.15em;
	border-bottom-width: 0;
}

.pd-ct .pd-tb .pd-tb__text a:hover,
.pd-ct .pd-tb .pd-tb__text a:focus-visible,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text a:hover,
#top #wrap_all .pd-ct .pd-tb .pd-tb__text a:focus-visible {
	color: rgb(var(--pd-tb-ink));
	text-decoration-line: none;
}

/* ---------- end CARRIED ---------- */

/* The head's rule and the card row run to the screen edges; the section clips the surplus.
   `clip`, not `hidden`: no scroll container, so sticky and fixed keep working. */
.container_wrap:has(.pd-ct),
.avia-section:has(.pd-ct),
#top #wrap_all .container_wrap:has(.pd-ct),
#top #wrap_all .avia-section:has(.pd-ct) {
	overflow-x: clip;
	overflow-y: visible;
}

/* ---------- Root: head, cards ---------- */
.pd-ct,
#top #wrap_all .pd-ct {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-ct-head-gap);
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--pd-ct-mt-f, var(--pd-ct-mt-now));
	margin-bottom: var(--pd-ct-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: rgb(var(--pd-ct-wh));
	font-family: var(--pd-nav-font);
	-webkit-font-smoothing: antialiased;
}

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

/* ---------- Head: text column | arrows, bottoms aligned (cap box = margin box) ---------- */
.pd-ct .pd-ct__head,
#top #wrap_all .pd-ct .pd-ct__head {
	display: grid;
	grid-template-columns: minmax(0, var(--pd-ct-text-w)) auto;
	justify-content: space-between;
	align-items: end;
	column-gap: var(--pd-ct-btn-gap);
	row-gap: var(--pd-ct-arrows-gap);
	min-width: 0;
}

.pd-ct.pd-ct--noarrows .pd-ct__head,
#top #wrap_all .pd-ct.pd-ct--noarrows .pd-ct__head {
	grid-template-columns: minmax(0, var(--pd-ct-text-w));
}

/* Phones: arrows under the text */
@media (max-width: 767px) {
	.pd-ct .pd-ct__head,
	#top #wrap_all .pd-ct .pd-ct__head {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
	}
}

/* The nested text block fills the column; its own margins are panel-less here */
.pd-ct .pd-ct__head .pd-tb,
#top #wrap_all .pd-ct .pd-ct__head .pd-tb {
	margin-top: 0;
	margin-bottom: 0;
}

.pd-ct .pd-ct__arrows,
#top #wrap_all .pd-ct .pd-ct__arrows {
	display: flex;
	align-items: center;
	column-gap: var(--pd-ct-btn-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

.pd-ct .pd-ct__arrow,
#top #wrap_all .pd-ct .pd-ct__arrow {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--pd-ct-btn);
	height: var(--pd-ct-btn);
	min-width: 0;
	min-height: 0;
	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-style: none;
	border-radius: 0;
	box-shadow: none;
	background-image: none;
	background-color: rgba(var(--pd-ct-wh), 0.08);   /* rest (Figma 178:5927) */
	color: rgb(var(--pd-ct-wh));
	line-height: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Hover / keyboard focus: red (Figma 178:5931). Not gated on (hover: hover). */
.pd-ct .pd-ct__arrow:hover:not(:disabled),
.pd-ct .pd-ct__arrow:focus-visible,
#top #wrap_all .pd-ct .pd-ct__arrow:hover:not(:disabled),
#top #wrap_all .pd-ct .pd-ct__arrow:focus-visible {
	background-color: var(--pd-ct-red);
}

.pd-ct .pd-ct__arrow:focus-visible,
#top #wrap_all .pd-ct .pd-ct__arrow:focus-visible {
	outline: 2px solid rgb(var(--pd-ct-wh));
	outline-offset: 2px;
}

.pd-ct .pd-ct__arrow:disabled,
#top #wrap_all .pd-ct .pd-ct__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

/* The exported lucide chevron (white), as an <img> */
.pd-ct .pd-ct__chev,
#top #wrap_all .pd-ct .pd-ct__chev {
	display: block;
	flex: 0 0 auto;
	width: var(--pd-ct-icon);
	height: var(--pd-ct-icon);
	max-width: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	border-width: 0;
	border-radius: 0;
	box-shadow: none;
	pointer-events: none;
}

.pd-ct .pd-ct__arrow--prev .pd-ct__chev,
#top #wrap_all .pd-ct .pd-ct__arrow--prev .pd-ct__chev {
	transform: rotate(180deg);
}

/* ---------- Carousel: spans the screen (desktop) / runs on to the right edge (phones) ---------- */
.pd-ct .pd-ct__splide,
#top #wrap_all .pd-ct .pd-ct__splide {
	min-width: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: calc(-1 * var(--pd-ct-bll));
	margin-right: calc(-1 * var(--pd-ct-brr));
}

.pd-ct .pd-ct__list,
#top #wrap_all .pd-ct .pd-ct__list {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style-type: none;
}

/* Fixed card width (Splide autoWidth reads it; it writes the gap as the slide's margin-right) */
.pd-ct .pd-ct__slide,
#top #wrap_all .pd-ct .pd-ct__slide {
	width: var(--pd-ct-card-w);
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style-type: none;
}

/* The card: image cropped to 343 × 400 (the Figma mask is a plain rectangle), gradient, name */
.pd-ct .pd-ct__card,
#top #wrap_all .pd-ct .pd-ct__card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--pd-ct-card-ratio);
	overflow: hidden;
	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-style: none;
	border-radius: 0;
	background-color: rgba(var(--pd-ct-wh), 0.08);   /* only seen without an image */
	color: rgb(var(--pd-ct-wh));
	text-decoration: none;
	outline-style: none;
	-webkit-tap-highlight-color: transparent;
}

.pd-ct .pd-ct__card::after,
#top #wrap_all .pd-ct .pd-ct__card::after {
	content: "";
	position: absolute;
	top: var(--pd-ct-fade-top);
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, rgba(var(--pd-ct-ink), 0), rgba(var(--pd-ct-ink), var(--pd-ct-fade-a)));
	pointer-events: none;
}

.pd-ct .pd-ct__card:focus-visible::before,
#top #wrap_all .pd-ct .pd-ct__card:focus-visible::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	box-shadow: inset 0 0 0 2px var(--pd-ct-red);   /* inset: the track clips anything outside the card */
	pointer-events: none;
}

.pd-ct .pd-ct__img,
#top #wrap_all .pd-ct .pd-ct__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	border-width: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* The name: anchored on its baseline, so a two-line name grows upwards */
.pd-ct .pd-ct__name,
#top #wrap_all .pd-ct .pd-ct__name {
	--fs: var(--pd-ct-name-fs);
	--lh: var(--pd-ct-name-lh);
	position: absolute;
	right: var(--pd-ct-name-x);
	bottom: var(--pd-ct-name-y);
	left: var(--pd-ct-name-x);
	z-index: 1;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-left: 0;
	margin-right: 0;
	font-family: var(--pd-nav-font);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	color: rgb(var(--pd-ct-wh));
	overflow-wrap: break-word;
	transition: color 0.25s ease;
}

/* Hover / keyboard focus: the photo eases in, the name turns red */
.pd-ct .pd-ct__card:hover .pd-ct__img,
.pd-ct .pd-ct__card:focus-visible .pd-ct__img,
#top #wrap_all .pd-ct .pd-ct__card:hover .pd-ct__img,
#top #wrap_all .pd-ct .pd-ct__card:focus-visible .pd-ct__img {
	transform: scale(1.05);
}

.pd-ct .pd-ct__card:hover .pd-ct__name,
.pd-ct .pd-ct__card:focus-visible .pd-ct__name,
#top #wrap_all .pd-ct .pd-ct__card:hover .pd-ct__name,
#top #wrap_all .pd-ct .pd-ct__card:focus-visible .pd-ct__name {
	color: var(--pd-ct-red);
}

/* ---------- Dots: Splide's pagination, 8px, 18 apart, white 20% / red when active ---------- */
.pd-ct .pd-ct__dots,
#top #wrap_all .pd-ct .pd-ct__dots {
	column-gap: var(--pd-ct-dot-gap);
	row-gap: var(--pd-ct-dot-gap);
	margin-top: var(--pd-ct-dots-gap);
	margin-right: var(--pd-ct-brr);   /* centred on the column, not on the bleeding row */
	margin-bottom: 0;
	margin-left: var(--pd-ct-bll);
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style-type: none;
}

.pd-ct .pd-ct__dots > li,
#top #wrap_all .pd-ct .pd-ct__dots > li {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	line-height: 0;
}

.pd-ct .pd-ct__dot,
#top #wrap_all .pd-ct .pd-ct__dot {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: var(--pd-ct-dot);
	height: var(--pd-ct-dot);
	min-width: 0;
	min-height: 0;
	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-style: none;
	border-radius: 50%;
	box-shadow: none;
	background-image: none;
	background-color: rgba(var(--pd-ct-wh), 0.2);
	opacity: 1;
	transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.pd-ct .pd-ct__dot:hover,
#top #wrap_all .pd-ct .pd-ct__dot:hover {
	background-color: rgba(var(--pd-ct-wh), 0.4);
}

.pd-ct .pd-ct__dot.is-active,
#top #wrap_all .pd-ct .pd-ct__dot.is-active {
	background-color: var(--pd-ct-red);
}

.pd-ct .pd-ct__dot:focus-visible,
#top #wrap_all .pd-ct .pd-ct__dot:focus-visible {
	outline: 2px solid rgb(var(--pd-ct-wh));
	outline-offset: 2px;
}

/* ---------- Everything fits: no arrows needed (Splide 4.1's is-overflow) ---------- */
.pd-ct.pd-ct--fits .pd-ct__arrows,
#top #wrap_all .pd-ct.pd-ct--fits .pd-ct__arrows {
	visibility: hidden;
}

/* ---------- Before Splide mounts (and without JavaScript): a plain scrolling row ---------- */
.pd-ct:not(.pd-ct--ready) .pd-ct__track,
#top #wrap_all .pd-ct:not(.pd-ct--ready) .pd-ct__track {
	overflow-x: auto;
	scrollbar-width: none;
}

.pd-ct:not(.pd-ct--ready) .pd-ct__track::-webkit-scrollbar,
#top #wrap_all .pd-ct:not(.pd-ct--ready) .pd-ct__track::-webkit-scrollbar {
	display: none;
}

.pd-ct:not(.pd-ct--ready) .pd-ct__list,
#top #wrap_all .pd-ct:not(.pd-ct--ready) .pd-ct__list {
	display: flex;
	column-gap: var(--pd-ct-gap);
}

.pd-ct:not(.pd-ct--ready) .pd-ct__slide,
#top #wrap_all .pd-ct:not(.pd-ct--ready) .pd-ct__slide {
	flex: 0 0 auto;
}

.pd-ct:not(.pd-ct--ready) .pd-ct__arrows,
#top #wrap_all .pd-ct:not(.pd-ct--ready) .pd-ct__arrows {
	visibility: hidden;   /* keeps its space: no jump when the script mounts */
}

@media (prefers-reduced-motion: reduce) {
	.pd-ct .pd-ct__arrow,
	.pd-ct .pd-ct__img,
	.pd-ct .pd-ct__name,
	.pd-ct .pd-ct__dot,
	#top #wrap_all .pd-ct .pd-ct__arrow,
	#top #wrap_all .pd-ct .pd-ct__img,
	#top #wrap_all .pd-ct .pd-ct__name,
	#top #wrap_all .pd-ct .pd-ct__dot {
		transition: none;
	}
}