/* ==========================================================================
   Prestige Detailing — USP strip (pd-usp)
   Figma: 331:2881 (4 × 280 cards, 48 | 1px rule | 48, @ 1728).
   Rendered inside #wrap_all, so every rule is paired: ".pd-usp .x" + "#top #wrap_all .pd-usp .x".
   Self-contained: carries its own copy of pd-main-nav's shared tokens and the
   .pd-nav-t cap trim, so it never depends on the nav stylesheet being current.
   No !important, no margin/padding shorthands.
   ========================================================================== */

@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 ---------- */
.pd-usp {
	/* Shared site tokens — same values as pd-main-nav */
	--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-usp-ink: 255, 255, 255;
	--pd-usp-card: 280px;                               /* card width at the design size */
	--pd-usp-gap: clamp(20px, 2.7778vw, 48px);          /* card ↔ rule: 48 @ 1728 */
	--pd-usp-rule-h: clamp(88px, 6.9444vw, 120px);      /* 120 @ 1728 */
	--pd-usp-rule-a: 0.4;
	--pd-usp-icon: clamp(44px, 4.375vw, 56px);          /* 56 from 1280 up */
	--pd-usp-icon-gap: 20px;                            /* icon → title cap box */
	--pd-usp-copy-gap: 14px;                            /* title cap box → text cap box */
	--pd-usp-title-fs: clamp(17px, 1.2732vw, 22px);     /* 22 @ 1728 */
	--pd-usp-title-ls: -0.02em;                         /* -0.44px @ 22 */
	--pd-usp-text-fs: clamp(15px, 1.0417vw, 18px);      /* 18 @ 1728 */
	--pd-usp-text-lh: calc(var(--pd-usp-text-fs) * 28 / 18);
	--pd-usp-text-a: 0.72;
	--pd-usp-row-gap: 40px;                             /* 2 × 2 grid, tablets */

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

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

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-usp .pd-nav-t,
#top #wrap_all .pd-usp .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-usp { --pd-fb: 1; }
}

/* ---------- Strip: cards and rules in one row, centred ---------- */
.pd-usp,
#top #wrap_all .pd-usp {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	column-gap: var(--pd-usp-gap);
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--pd-usp-mt-f, var(--pd-usp-mt-now));
	margin-bottom: var(--pd-usp-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	color: rgb(var(--pd-usp-ink));
	font-family: var(--pd-nav-font);
	font-style: normal;
	text-align: center;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Card: icon over a flex column of trimmed text, so every gap is cap box to cap box ---------- */
.pd-usp .pd-usp__item,
#top #wrap_all .pd-usp .pd-usp__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--pd-usp-icon-gap);
	flex: 0 1 var(--pd-usp-card);
	min-width: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.pd-usp .pd-usp__icon,
#top #wrap_all .pd-usp .pd-usp__icon {
	flex: 0 0 auto;
	width: var(--pd-usp-icon);
	height: var(--pd-usp-icon);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
}

.pd-usp .pd-usp__img,
#top #wrap_all .pd-usp .pd-usp__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
	border-style: none;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
}

.pd-usp .pd-usp__copy,
#top #wrap_all .pd-usp .pd-usp__copy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-usp-copy-gap);
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.pd-usp .pd-usp__title,
#top #wrap_all .pd-usp .pd-usp__title {
	--fs: var(--pd-usp-title-fs);
	--lh: var(--pd-usp-title-fs);
	color: rgb(var(--pd-usp-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: var(--pd-usp-title-ls);
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.pd-usp .pd-usp__text,
#top #wrap_all .pd-usp .pd-usp__text {
	--fs: var(--pd-usp-text-fs);
	--lh: var(--pd-usp-text-lh);
	color: rgba(var(--pd-usp-ink), var(--pd-usp-text-a));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	overflow-wrap: break-word;
}

/* ---------- Rule: 1px, 40% white, centred on the card height ---------- */
.pd-usp .pd-usp__rule,
#top #wrap_all .pd-usp .pd-usp__rule {
	display: block;
	flex: 0 0 1px;
	align-self: center;
	width: 1px;
	height: var(--pd-usp-rule-h);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	background-color: rgba(var(--pd-usp-ink), var(--pd-usp-rule-a));
}

.pd-usp.pd-usp--norule .pd-usp__rule,
#top #wrap_all .pd-usp.pd-usp--norule .pd-usp__rule {
	visibility: hidden;
}

/* ---------- Tablets: 2 × 2. Children run card, rule, card, rule… — every 4th is the rule that ends a row ---------- */
@media (max-width: 989px) {
	.pd-usp,
	#top #wrap_all .pd-usp {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
		row-gap: var(--pd-usp-row-gap);
	}

	.pd-usp .pd-usp__rule:nth-child(4n),
	#top #wrap_all .pd-usp .pd-usp__rule:nth-child(4n) {
		display: none;
	}
}

/* ---------- Hide on (the panel's "Hide on" select — one block per choice) ---------- */
@media (max-width: 989px) {
	.pd-usp.pd-usp--hide-990,
	#top #wrap_all .pd-usp.pd-usp--hide-990 {
		display: none;
	}
}

@media (max-width: 767px) {
	.pd-usp.pd-usp--hide-768,
	#top #wrap_all .pd-usp.pd-usp--hide-768 {
		display: none;
	}
}