/* ==========================================================================
   Prestige Detailing — wide image slider (pd-slider-wide)
   Figma "Frame 1820548694" 29:2261: 1408 × 550 photo, 48px arrows 20px in (white; red on hover),
   8px dots (10 apart) 32px below. Fills its container (content width).
   Rendered inside #wrap_all, so every rule is paired:
   ".pd-sw .x" + "#top #wrap_all .pd-sw .x". Tokens-only rules are not.
   Vendor sheet (css/vendor/splide-core.min.css) loads first; pre-mount rules
   sit behind .pd-sw:not(.pd-sw--ready) so the two cannot fight.
   ========================================================================== */

/* ---------- Tokens (ramps: 375 → 1728) ---------- */
.pd-sw {
	--pd-sw-dark: #161414;
	--pd-sw-red: #d60c0c;
	--pd-sw-white: #fff;
	--pd-sw-dim: rgba(255, 255, 255, 0.2);                           /* inactive dot */
	--pd-sw-dim-hover: rgba(255, 255, 255, 0.5);
	--pd-sw-btn: clamp(40px, calc(37.783px + 0.5913vw), 48px);     /* 48 @ 1728 */
	--pd-sw-inset: clamp(12px, calc(9.783px + 0.5913vw), 20px);    /* 20 @ 1728 */
	--pd-sw-icon: 24px;
	--pd-sw-dot: 8px;
	--pd-sw-dot-gap: 10px;
	--pd-sw-dot-hit: 24px;                                           /* tap height; the dot sits centred */
	--pd-sw-dots-space: clamp(24px, calc(21.783px + 0.5913vw), 32px); /* image → dots, 32 @ 1728 */
	--pd-sw-ratio: 1408 / 550;
	--pd-sw-ratio-now: var(--pd-sw-ratio);
	--pd-sw-focus: 50% 50%;

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

@media (max-width: 1199px) {
	.pd-sw.pd-sw--scale { --pd-sw-mt-now: calc(var(--pd-sw-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-sw.pd-sw--scale { --pd-sw-mt-now: calc(var(--pd-sw-mt, 0px) * 0.6); }
}

/* Ratio select — one block per choice (pd_sw_ratios()) */
.pd-sw.pd-sw--r-banner    { --pd-sw-ratio: 1408 / 550; }
.pd-sw.pd-sw--r-wide      { --pd-sw-ratio: 16 / 9; }
.pd-sw.pd-sw--r-landscape { --pd-sw-ratio: 4 / 3; }

/* Ratio on phones — one block per choice (pd_sw_mobile_ratios()); "same" keeps the ratio above */
@media (max-width: 767px) {
	.pd-sw.pd-sw--m-same      { --pd-sw-ratio-now: var(--pd-sw-ratio); }
	.pd-sw.pd-sw--m-landscape { --pd-sw-ratio-now: 4 / 3; }
	.pd-sw.pd-sw--m-square    { --pd-sw-ratio-now: 1 / 1; }
}

/* Dot colour select */
.pd-sw.pd-sw--dots-light { --pd-sw-dim: rgba(255, 255, 255, 0.2); --pd-sw-dim-hover: rgba(255, 255, 255, 0.5); }
.pd-sw.pd-sw--dots-dark  { --pd-sw-dim: rgba(22, 20, 20, 0.2);    --pd-sw-dim-hover: rgba(22, 20, 20, 0.5); }

/* Image focus select */
.pd-sw.pd-sw--pos-top    { --pd-sw-focus: 50% 0%; }
.pd-sw.pd-sw--pos-center { --pd-sw-focus: 50% 50%; }
.pd-sw.pd-sw--pos-bottom { --pd-sw-focus: 50% 100%; }

/* ---------- Root ---------- */
.pd-sw,
#top #wrap_all .pd-sw {
	position: relative;
	display: flow-root;   /* keeps the dots' negative bottom margin inside: the element ends on the dot */
	width: 100%;
	margin-top: var(--pd-sw-mt-f, var(--pd-sw-mt-now));
	margin-bottom: var(--pd-sw-mb, 0px);
}

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

.pd-sw .pd-sw__splide,
#top #wrap_all .pd-sw .pd-sw__splide {
	position: relative;
}

/* ---------- Track + slides ---------- */
.pd-sw .pd-sw__list,
#top #wrap_all .pd-sw .pd-sw__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;
}

.pd-sw .pd-sw__slide,
#top #wrap_all .pd-sw .pd-sw__slide {
	margin-left: 0;
	padding-top: 0;
	padding-bottom: 0;
	list-style-type: none;
	aspect-ratio: var(--pd-sw-ratio-now);
	overflow: hidden;
	background-color: var(--pd-sw-dark);
}

.pd-sw .pd-sw__img,
#top #wrap_all .pd-sw .pd-sw__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: var(--pd-sw-focus);
}

/* Before Splide mounts (and for a single image): first slide only, full width */
.pd-sw:not(.pd-sw--ready) .pd-sw__slide,
#top #wrap_all .pd-sw:not(.pd-sw--ready) .pd-sw__slide {
	width: 100%;
}

.pd-sw:not(.pd-sw--ready) .pd-sw__slide + .pd-sw__slide,
#top #wrap_all .pd-sw:not(.pd-sw--ready) .pd-sw__slide + .pd-sw__slide {
	display: none;
}

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

/* ---------- Arrows: 48 squares, 20 in from the sides, centred ---------- */
.pd-sw .pd-sw__arrows,
#top #wrap_all .pd-sw .pd-sw__arrows {
	position: absolute;
	top: 50%;
	left: var(--pd-sw-inset);
	right: var(--pd-sw-inset);
	display: flex;
	justify-content: space-between;
	align-items: center;
	transform: translateY(-50%);
	pointer-events: none;
}

.pd-sw .pd-sw__arrow,
#top #wrap_all .pd-sw .pd-sw__arrow {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--pd-sw-btn);
	height: var(--pd-sw-btn);
	min-width: 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: var(--pd-sw-white);   /* both arrows: white, dark chevron */
	color: var(--pd-sw-dark);
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Enfold's button:hover background must not win on a (sticky) touch tap */
.pd-sw .pd-sw__arrow:hover,
#top #wrap_all .pd-sw .pd-sw__arrow:hover {
	background-color: var(--pd-sw-white);
}

@media (hover: hover) {
	.pd-sw .pd-sw__arrow:hover:not(:disabled),
	#top #wrap_all .pd-sw .pd-sw__arrow:hover:not(:disabled) {
		background-color: var(--pd-sw-red);   /* hover: red, white chevron */
		color: var(--pd-sw-white);
	}
}

.pd-sw .pd-sw__arrow:focus-visible,
#top #wrap_all .pd-sw .pd-sw__arrow:focus-visible {
	background-color: var(--pd-sw-red);
	color: var(--pd-sw-white);
	outline: 2px solid var(--pd-sw-white);
	outline-offset: -6px;
}

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

/* The exported lucide chevron, painted in currentColor */
.pd-sw .pd-sw__chev,
#top #wrap_all .pd-sw .pd-sw__chev {
	display: block;
	flex: 0 0 auto;
	width: var(--pd-sw-icon);
	height: var(--pd-sw-icon);
	background-color: currentColor;
	-webkit-mask-image: url("../img/chevron-right.svg");
	mask-image: url("../img/chevron-right.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.pd-sw .pd-sw__arrow--prev .pd-sw__chev,
#top #wrap_all .pd-sw .pd-sw__arrow--prev .pd-sw__chev {
	transform: rotate(180deg);
}

/* ---------- Dots: 8px, 10 apart, 32 below the photo ----------
   Each button is (dot + gap) wide and --pd-sw-dot-hit tall, so the pitch is the design's 18px
   and the tap target is bigger than the dot. The row's margins take the hit padding back out,
   so the dot itself sits exactly --pd-sw-dots-space below the photo and the element ends on it. */
.pd-sw .pd-sw__dots,
#top #wrap_all .pd-sw .pd-sw__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: calc(var(--pd-sw-dots-space) - (var(--pd-sw-dot-hit) - var(--pd-sw-dot)) / 2);
	margin-bottom: calc((var(--pd-sw-dot-hit) - var(--pd-sw-dot)) / -2);
	margin-left: 0;
	margin-right: 0;
	line-height: 0;
}

.pd-sw .pd-sw__dot,
#top #wrap_all .pd-sw .pd-sw__dot {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(var(--pd-sw-dot) + var(--pd-sw-dot-gap));
	height: var(--pd-sw-dot-hit);
	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: transparent;
	color: var(--pd-sw-dim);
	cursor: pointer;
	transition: color 0.2s ease;
}

.pd-sw .pd-sw__dot::before,
#top #wrap_all .pd-sw .pd-sw__dot::before {
	content: "";
	display: block;
	width: var(--pd-sw-dot);
	height: var(--pd-sw-dot);
	border-radius: 50%;
	background-color: currentColor;
}

/* Enfold's own button:hover background must not win on a (sticky) touch hover either */
.pd-sw .pd-sw__dot:hover,
#top #wrap_all .pd-sw .pd-sw__dot:hover {
	background-color: transparent;
}

@media (hover: hover) {
	.pd-sw .pd-sw__dot:hover,
	#top #wrap_all .pd-sw .pd-sw__dot:hover {
		color: var(--pd-sw-dim-hover);
	}
}

.pd-sw .pd-sw__dot.is-active,
#top #wrap_all .pd-sw .pd-sw__dot.is-active {
	color: var(--pd-sw-red);
	cursor: default;
}

.pd-sw .pd-sw__dot:focus,
#top #wrap_all .pd-sw .pd-sw__dot:focus {
	outline-style: none;
}

.pd-sw .pd-sw__dot:focus-visible::before,
#top #wrap_all .pd-sw .pd-sw__dot:focus-visible::before {
	outline: 2px solid var(--pd-sw-red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.pd-sw .pd-sw__arrow,
	#top #wrap_all .pd-sw .pd-sw__arrow,
	.pd-sw .pd-sw__dot,
	#top #wrap_all .pd-sw .pd-sw__dot {
		transition: none;
	}
}