/* ==========================================================================
   Prestige Detailing — button (pd-button)
   Figma: Dark 12:2160, White 179:6374, Mobile 204:6424.
   Rendered inside #wrap_all, so every rule is paired: ".pd-btn .x" + "#top #wrap_all .pd-btn .x".
   Shared from pd-main-nav: --pd-nav-* tokens, font, and the .pd-nav-t cap trim.
   ========================================================================== */

/* ---------- Tokens ---------- */
.pd-btn {
	--pd-btn-ink: 255, 255, 255;         /* Dark style: white ink */
	--pd-btn-fs: 16px;
	--pd-btn-lh: 24px;
	--pd-btn-ls: 0.03em;                 /* 0.48px @ 16 */
	--pd-btn-py: 24px;                   /* cap box to edge */
	--pd-btn-px: 32px;
	--pd-btn-arm: 8px;                   /* bracket arm */
	--pd-btn-bar: 2px;                   /* bracket stroke */
	--pd-btn-fill: 0.08;
	--pd-btn-fill-on: 0.16;              /* hover / focus — same as the nav's .pd-btn-bracket */

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

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

/* White style: #161414 ink */
.pd-btn .pd-btn__link--white,
#top #wrap_all .pd-btn .pd-btn__link--white {
	--pd-btn-ink: 22, 20, 20;
}

/* ---------- Root ---------- */
.pd-btn,
#top #wrap_all .pd-btn {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-top: var(--pd-btn-mt-f, var(--pd-btn-mt-now));
	margin-bottom: var(--pd-btn-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

.pd-btn.pd-btn--center,
#top #wrap_all .pd-btn.pd-btn--center {
	justify-content: center;
}

.pd-btn.pd-btn--right,
#top #wrap_all .pd-btn.pd-btn--right {
	justify-content: flex-end;
}

/* ---------- Button ---------- */
.pd-btn .pd-btn__link,
#top #wrap_all .pd-btn .pd-btn__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-btn-py);
	padding-bottom: var(--pd-btn-py);
	padding-left: var(--pd-btn-px);
	padding-right: var(--pd-btn-px);
	border-width: 0;
	border-style: none;
	border-radius: 0;
	box-shadow: none;
	color: rgb(var(--pd-btn-ink));
	background-color: rgba(var(--pd-btn-ink), var(--pd-btn-fill));
	/* Corner brackets: 8 bars, arm × stroke, one per corner edge */
	background-image:
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink)));
	background-size:
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm),
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm),
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm),
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm);
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
	background-repeat: no-repeat;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-btn-fs);  /* em letter-spacing reads THIS, not Enfold's 13px body */
	font-weight: 400;
	font-style: normal;
	letter-spacing: var(--pd-btn-ls);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.25s ease;
}

.pd-btn .pd-btn__link:hover,
.pd-btn .pd-btn__link:focus-visible,
#top #wrap_all .pd-btn .pd-btn__link:hover,
#top #wrap_all .pd-btn .pd-btn__link:focus-visible {
	color: rgb(var(--pd-btn-ink));
	background-color: rgba(var(--pd-btn-ink), var(--pd-btn-fill-on));
	text-decoration: none;
}

.pd-btn .pd-btn__link:focus,
#top #wrap_all .pd-btn .pd-btn__link:focus {
	outline-style: none;
}

.pd-btn .pd-btn__link:focus-visible,
#top #wrap_all .pd-btn .pd-btn__link:focus-visible {
	outline: 2px solid rgb(var(--pd-btn-ink));
	outline-offset: 4px;
}

.pd-btn .pd-btn__link--nolink,
#top #wrap_all .pd-btn .pd-btn__link--nolink {
	cursor: default;
}

/* Label: the shared cap trim; 24px from its cap box to each edge */
.pd-btn .pd-btn__label,
#top #wrap_all .pd-btn .pd-btn__label {
	--fs: var(--pd-btn-fs);
	--lh: var(--pd-btn-lh);
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* ---------- Phones: full width (Figma 204:6424, 343 @ 375) ---------- */
@media (max-width: 767px) {
	.pd-btn.pd-btn--mfull .pd-btn__link,
	#top #wrap_all .pd-btn.pd-btn--mfull .pd-btn__link {
		width: 100%;
		white-space: normal;
	}
}

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