/* GENERATED from preview/pd-single.src.css by preview/pair.py — every selector
   carries its "#top #wrap_all" twin. Edit the source and re-run. */
/* ==========================================================================
   Prestige Detailing — single blog post (pd-single)
   Figma: Blog > Details (31:2446), 1728 frame, 1408 content.
   SELF-CONTAINED: carries its own copy of the shared tokens, the .pd-nav-t cap
   trim, the pd-woo product card rules and the pd-blog card rules, all scoped to
   .pd-single — it never depends on another package's stylesheet.
   Longhands only. Ramps are exact at 1728: clamp(LO, calc(HI - (1728px - 100vw) * k), HI).
   ========================================================================== */

@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; }

/* ---------- Root + tokens ---------- */
.pd-single,
#top #wrap_all .pd-single {
	/* 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;
	/* Unregistered copies the TRIM reads (a harness may override these with the real font metrics;
	   the design constants above also feed rhythm and are never overridden) */
	--pd-cap-t: var(--pd-cap);
	--pd-asc-t: var(--pd-asc);
	--pd-desc-t: var(--pd-desc);

	--pd-sg-ink: #fff;
	--pd-sg-red: #d60c0c;
	--pd-sg-red-hover: #b30a0a;
	--pd-sg-bg: #161414;
	--pd-sg-panel: #242222;
	--pd-sg-line: rgba(255, 255, 255, 0.4);
	--pd-sg-tint: rgba(255, 255, 255, 0.08);
	--pd-sg-tint-hover: rgba(255, 255, 255, 0.16);

	--pd-sg-px: clamp(16px, calc(160px - (1728px - 100vw) * 0.106430), 160px);
	--pd-sg-pt: clamp(48px, calc(140px - (1728px - 100vw) * 0.067997), 140px);
	--pd-sg-pb: clamp(96px, calc(200px - (1728px - 100vw) * 0.076866), 200px);
	--pd-sg-head-w: 580px;

	/* Head */
	--pd-sg-title-fs: clamp(32px, calc(48px - (1728px - 100vw) * 0.011826), 48px);
	--pd-sg-head-gap: clamp(32px, calc(48px - (1728px - 100vw) * 0.011826), 48px);
	--pd-sg-meta-fs: clamp(18px, calc(22px - (1728px - 100vw) * 0.002956), 22px);
	--pd-sg-meta-lh: clamp(28px, calc(32px - (1728px - 100vw) * 0.002956), 32px);
	--pd-sg-meta-gap: clamp(12px, calc(24px - (1728px - 100vw) * 0.008869), 24px);
	--pd-sg-hero-mt: clamp(48px, calc(96px - (1728px - 100vw) * 0.035477), 96px);
	--pd-sg-row-mt: clamp(64px, calc(120px - (1728px - 100vw) * 0.041389), 120px);
	--pd-sg-hero-ratio: 1408 / 600;

	/* Row: box 400 · gap · content 698 (1194, centred in 1408) */
	--pd-sg-side: 400px;
	--pd-sg-main: 698px;
	--pd-sg-col-gap: clamp(48px, calc(96px - (1728px - 100vw) * 0.090909), 96px);

	/* Content rhythm (cap box to cap box) */
	--pd-sg-gap: clamp(48px, calc(64px - (1728px - 100vw) * 0.011826), 64px);
	--pd-sg-body-fs: 16px;
	--pd-sg-body-lh: 24px;
	--pd-sg-para: calc(2 * var(--pd-sg-body-lh) - var(--pd-cap) * var(--pd-sg-body-fs));   /* one blank line: 36.5 */
	--pd-sg-lead-fs: clamp(18px, calc(22px - (1728px - 100vw) * 0.002956), 22px);
	--pd-sg-lead-lh: clamp(28px, calc(32px - (1728px - 100vw) * 0.002956), 32px);
	--pd-sg-bar: 3px;
	--pd-sg-bar-gap: 22px;
	/* The red bar spans the lead's LINE boxes: these are the half-leading + ascent/descent overhangs */
	--pd-sg-bar-lt: calc((var(--pd-sg-lead-lh) - (var(--pd-asc) + var(--pd-desc)) * var(--pd-sg-lead-fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--pd-sg-lead-fs));
	--pd-sg-bar-lb: calc((var(--pd-sg-lead-lh) - (var(--pd-asc) + var(--pd-desc)) * var(--pd-sg-lead-fs)) / 2 + var(--pd-desc) * var(--pd-sg-lead-fs));

	/* Box */
	--pd-sg-box-py: clamp(48px, calc(96px - (1728px - 100vw) * 0.035477), 96px);
	--pd-sg-box-px: clamp(24px, calc(48px - (1728px - 100vw) * 0.017738), 48px);
	--pd-sg-arm: 8px;
	--pd-sg-stroke: 2px;

	/* Related blogs */
	--pd-sg-rel-gap: clamp(32px, calc(40px - (1728px - 100vw) * 0.005913), 40px);
	--pd-sg-rel-grid: clamp(48px, calc(72px - (1728px - 100vw) * 0.017738), 72px);
	--pd-sg-h-top: clamp(24px, calc(32px - (1728px - 100vw) * 0.005913), 32px);
	--pd-sg-h-main: clamp(36px, calc(48px - (1728px - 100vw) * 0.008869), 48px);

	/* pd-blog card tokens (same values as pd-blog) */
	--pd-blog-dark: #161414;
	--pd-blog-tile: #242222;
	--pd-blog-chip: rgba(255, 255, 255, 0.2);
	--pd-blog-cols: 4;
	--pd-blog-col-gap: clamp(16px, calc(40px - (1728px - 100vw) * 0.017738), 40px);
	--pd-blog-row-gap: clamp(48px, calc(72px - (1728px - 100vw) * 0.017738), 72px);
	--pd-blog-card-gap: clamp(24px, calc(32px - (1728px - 100vw) * 0.005913), 32px);
	--pd-blog-text-w: 87.578%;
	--pd-blog-chip-gap: 8px;
	--pd-blog-chip-px: 8px;
	--pd-blog-chip-py: 6px;
	--pd-blog-chip-fs: 14px;
	--pd-blog-chip-lh: 20px;
	--pd-blog-title-fs: clamp(18px, calc(22px - (1728px - 100vw) * 0.002956), 22px);
	--pd-blog-title-lh: clamp(24px, calc(28px - (1728px - 100vw) * 0.002956), 28px);
	--pd-blog-body-fs: 16px;
	--pd-blog-body-lh: 24px;

	/* Related products */
	--pd-sg-pp: 3;          /* cards per view — the script reads nothing but the DOM */
	--pd-sg-card-gap: 12px;

	position: relative;
	display: block;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	background-color: var(--pd-sg-bg);
	color: var(--pd-sg-ink);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-align: left;
	overflow-x: clip;
}

.pd-single *,
.pd-single *::before,
.pd-single *::after,
#top #wrap_all .pd-single *,
#top #wrap_all .pd-single *::before,
#top #wrap_all .pd-single *::after {
	box-sizing: border-box;
}

.pd-single a,
#top #wrap_all .pd-single a {
	color: inherit;
	text-decoration: none;
	border-bottom-width: 0;
}

/* Element resets are written as article.pd-single … = (0,1,2) / (2,1,2): they beat Enfold's
   colour-set rules (#top #wrap_all .all_colors h2 / p / span = 2,1,1) and still lose to every
   class rule of ours (0,2,0 / 2,2,0). */
article.pd-single h1,
article.pd-single h2,
article.pd-single h3,
article.pd-single p,
article.pd-single figure,
#top #wrap_all article.pd-single h1,
#top #wrap_all article.pd-single h2,
#top #wrap_all article.pd-single h3,
#top #wrap_all article.pd-single p,
#top #wrap_all article.pd-single figure {
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	font-family: inherit;
}

article.pd-single h1,
article.pd-single h2,
article.pd-single h3,
#top #wrap_all article.pd-single h1,
#top #wrap_all article.pd-single h2,
#top #wrap_all article.pd-single h3 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: 400;
}

article.pd-single span,
#top #wrap_all article.pd-single span {
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.pd-single ul.pd-single__meta,
.pd-single ul.pd-single__tags,
.pd-single ul.pd-single__share,
.pd-single ul.pd-single__rel-grid,
#top #wrap_all .pd-single ul.pd-single__meta,
#top #wrap_all .pd-single ul.pd-single__tags,
#top #wrap_all .pd-single ul.pd-single__share,
#top #wrap_all .pd-single ul.pd-single__rel-grid {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	list-style: none;
}

.pd-single .pd-single__meta > li,
.pd-single .pd-single__prod-list > li,
.pd-single .pd-single__tags > li,
.pd-single .pd-single__share > li,
.pd-single .pd-single__rel-grid > li,
#top #wrap_all .pd-single .pd-single__meta > li,
#top #wrap_all .pd-single .pd-single__prod-list > li,
#top #wrap_all .pd-single .pd-single__tags > li,
#top #wrap_all .pd-single .pd-single__share > li,
#top #wrap_all .pd-single .pd-single__rel-grid > li {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.pd-single svg,
#top #wrap_all .pd-single svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
}

.pd-single .screen-reader-text,
#top #wrap_all .pd-single .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	margin-top: 0;
	margin-bottom: 0;
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-single .pd-nav-t,
#top #wrap_all .pd-single .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc-t) + var(--pd-desc-t)) * var(--fs)) / 2 + (var(--pd-asc-t) - var(--pd-cap-t)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc-t) + var(--pd-desc-t)) * var(--fs)) / 2 + var(--pd-desc-t) * 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-single,
#top #wrap_all .pd-single { --pd-fb: 1; }
}

/* ==========================================================================
   Page frame
   ========================================================================== */
.pd-single .pd-single__in,
#top #wrap_all .pd-single .pd-single__in {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-top: var(--pd-sg-pt);
	padding-bottom: var(--pd-sg-pb);
	padding-left: var(--pd-sg-px);
	padding-right: var(--pd-sg-px);
}

/* ---------- Head: title · 48 · rule · 48 · meta ---------- */
.pd-single .pd-single__head,
#top #wrap_all .pd-single .pd-single__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-sg-head-gap);
}

.pd-single .pd-single__title,
#top #wrap_all .pd-single .pd-single__title {
	color: var(--pd-sg-ink);
	font-family: var(--pd-nav-font);
	--fs: var(--pd-sg-title-fs);
	--lh: calc(var(--pd-sg-title-fs) * 0.916667);
	max-width: var(--pd-sg-head-w);
	font-weight: 700;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

/* Rule from the viewport edge to the end of the 580 column (740 @ 1728) */
.pd-single .pd-single__rule,
#top #wrap_all .pd-single .pd-single__rule {
	display: block;
	width: calc(var(--pd-sg-px) + var(--pd-sg-head-w));
	max-width: calc(100% + var(--pd-sg-px));
	height: 1px;
	margin-left: calc(-1 * var(--pd-sg-px));
	background-color: var(--pd-sg-line);
}

.pd-single .pd-single__meta,
#top #wrap_all .pd-single .pd-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--pd-sg-meta-gap);
	row-gap: 12px;
}

.pd-single .pd-single__meta-item,
#top #wrap_all .pd-single .pd-single__meta-item {
	display: flex;
	align-items: center;
	column-gap: 8px;
}

.pd-single .pd-single__meta-item + .pd-single__meta-item::before,
#top #wrap_all .pd-single .pd-single__meta-item + .pd-single__meta-item::before {
	content: "/";
	display: block;
	margin-right: calc(var(--pd-sg-meta-gap) - 8px);
	font-size: var(--pd-sg-meta-fs);
	line-height: var(--pd-sg-meta-lh);
	opacity: 0.4;
}

.pd-single .pd-single__meta-item svg,
#top #wrap_all .pd-single .pd-single__meta-item svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--pd-sg-red);
}

.pd-single .pd-single__meta-t,
#top #wrap_all .pd-single .pd-single__meta-t {
	--fs: var(--pd-sg-meta-fs);
	--lh: var(--pd-sg-meta-lh);
	white-space: nowrap;
}

/* ---------- Featured image: 1408 × 600 crop ---------- */
.pd-single .pd-single__hero,
#top #wrap_all .pd-single .pd-single__hero {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--pd-sg-hero-ratio);
	margin-top: var(--pd-sg-hero-mt);
	margin-bottom: 0;
	overflow: hidden;
	background-color: var(--pd-sg-panel);
}

.pd-single .pd-single__hero-img,
#top #wrap_all .pd-single .pd-single__hero-img {
	border-radius: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin-top: 0;
	margin-bottom: 0;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	box-shadow: none;
}

/* ---------- Row: box · content ---------- */
.pd-single .pd-single__row,
#top #wrap_all .pd-single .pd-single__row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	column-gap: var(--pd-sg-col-gap);
	width: 100%;
	margin-top: var(--pd-sg-row-mt);
}

.pd-single .pd-single__side,
#top #wrap_all .pd-single .pd-single__side {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: var(--pd-sg-side);
	width: var(--pd-sg-side);
}

.pd-single .pd-single__main,
#top #wrap_all .pd-single .pd-single__main {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-sg-gap);
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	min-width: 0;
	max-width: var(--pd-sg-main);
}

/* ==========================================================================
   "Book your appointment!" box — #242222 with 8 × 2 white corner brackets
   ========================================================================== */
.pd-single .pd-single__box,
#top #wrap_all .pd-single .pd-single__box {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: 40px;
	padding-top: var(--pd-sg-box-py);
	padding-bottom: var(--pd-sg-box-py);
	padding-left: var(--pd-sg-box-px);
	padding-right: var(--pd-sg-box-px);
	background-color: var(--pd-sg-panel);
	background-image:
		linear-gradient(var(--pd-sg-ink), var(--pd-sg-ink)),
		linear-gradient(var(--pd-sg-ink), var(--pd-sg-ink)),
		linear-gradient(var(--pd-sg-ink), var(--pd-sg-ink)),
		linear-gradient(var(--pd-sg-ink), var(--pd-sg-ink)),
		linear-gradient(var(--pd-sg-ink), var(--pd-sg-ink)),
		linear-gradient(var(--pd-sg-ink), var(--pd-sg-ink)),
		linear-gradient(var(--pd-sg-ink), var(--pd-sg-ink)),
		linear-gradient(var(--pd-sg-ink), var(--pd-sg-ink));
	background-repeat: no-repeat;
	background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
	background-size:
		var(--pd-sg-arm) var(--pd-sg-stroke), var(--pd-sg-stroke) var(--pd-sg-arm),
		var(--pd-sg-arm) var(--pd-sg-stroke), var(--pd-sg-stroke) var(--pd-sg-arm),
		var(--pd-sg-arm) var(--pd-sg-stroke), var(--pd-sg-stroke) var(--pd-sg-arm),
		var(--pd-sg-arm) var(--pd-sg-stroke), var(--pd-sg-stroke) var(--pd-sg-arm);
}

.pd-single .pd-single__box-title,
#top #wrap_all .pd-single .pd-single__box-title {
	color: var(--pd-sg-ink);
	font-family: var(--pd-nav-font);
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	margin-top: 0;
	margin-bottom: 0;
	text-transform: uppercase;
}

.pd-single .pd-single__box-top,
#top #wrap_all .pd-single .pd-single__box-top {
	--fs: 22px;
	--lh: 22px;
	letter-spacing: -0.03em;
}

.pd-single .pd-single__box-main,
#top #wrap_all .pd-single .pd-single__box-main {
	--fs: 36px;
	--lh: 36px;
	font-weight: 700;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
}

.pd-single .pd-single__grad,
#top #wrap_all .pd-single .pd-single__grad {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0, var(--pd-sg-ink) 76px);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.pd-single .pd-single__box-text,
#top #wrap_all .pd-single .pd-single__box-text {
	--fs: 16px;
	--lh: 24px;
	opacity: 0.72;
}

.pd-single .pd-single__box-btn,
#top #wrap_all .pd-single .pd-single__box-btn {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 59px;
	padding-top: 24px;
	padding-bottom: 23px;
	padding-left: 32px;
	padding-right: 32px;
	background-color: var(--pd-sg-red);
	color: var(--pd-sg-ink);
	transition: background-color 0.25s ease;
}

.pd-single .pd-single__box-btn:hover,
#top #wrap_all .pd-single .pd-single__box-btn:hover {
	background-color: var(--pd-sg-red-hover);
	color: var(--pd-sg-ink);
}

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

.pd-single .pd-single__box-btn-t,
#top #wrap_all .pd-single .pd-single__box-btn-t {
	--fs: 16px;
	--lh: 24px;
	letter-spacing: 0.03em;
	text-align: center;
	text-transform: uppercase;
}

/* ==========================================================================
   Post content — the_content(). Every text block is cap-trimmed, and every gap
   is cap box to cap box: margin-top = var(--g) − tt, margin-bottom = −tb.
   ========================================================================== */
.pd-single .pd-single__content,
#top #wrap_all .pd-single .pd-single__content {
	display: flow-root;
	--fs: var(--pd-sg-body-fs);
	--lh: var(--pd-sg-body-lh);
	font-size: var(--pd-sg-body-fs);
	line-height: var(--pd-sg-body-lh);
	color: rgba(255, 255, 255, 0.72);
	overflow-wrap: break-word;
}

/* Rhythm: 64 between blocks, one blank line between runs of text */
.pd-single .pd-single__content > *,
#top #wrap_all .pd-single .pd-single__content > * {
	--g: var(--pd-sg-gap);
	margin-top: calc(var(--g) - var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

.pd-single .pd-single__content > :is(p, ul, ol) + :is(p, ul, ol),
#top #wrap_all .pd-single .pd-single__content > :is(p, ul, ol) + :is(p, ul, ol) {
	--g: var(--pd-sg-para);
}

/* A barred block's gaps run from its BAR (line boxes), as in Figma */
.pd-single .pd-single__content > :is(h2, h3, blockquote, .wp-block-quote, .wp-block-pullquote),
#top #wrap_all .pd-single .pd-single__content > :is(h2, h3, blockquote, .wp-block-quote, .wp-block-pullquote) {
	--g: calc(var(--pd-sg-gap) + var(--pd-sg-bar-lt));
}

.pd-single .pd-single__content > :is(h2, h3, blockquote, .wp-block-quote, .wp-block-pullquote) + *,
#top #wrap_all .pd-single .pd-single__content > :is(h2, h3, blockquote, .wp-block-quote, .wp-block-pullquote) + * {
	--g: calc(var(--pd-sg-gap) + var(--pd-sg-bar-lb));
}

.pd-single .pd-single__content > :first-child,
#top #wrap_all .pd-single .pd-single__content > :first-child {
	--g: 0px;
}

/* A lead block first: its bar top meets the top of the box beside it */
.pd-single .pd-single__content > :first-child:is(h2, h3, blockquote, .wp-block-quote, .wp-block-pullquote),
#top #wrap_all .pd-single .pd-single__content > :first-child:is(h2, h3, blockquote, .wp-block-quote, .wp-block-pullquote) {
	--g: var(--pd-sg-bar-lt);
}

/* Text leaves: trimmed */
.pd-single .pd-single__content > p:not(:has(> img, > iframe, > video, > object, > embed)),
.pd-single .pd-single__content > :is(h1, h2, h3, h4, h5, h6),
.pd-single .pd-single__content li,
.pd-single .pd-single__content :is(blockquote, .wp-block-quote, .wp-block-pullquote) p,
.pd-single .pd-single__content :is(blockquote, .wp-block-quote, .wp-block-pullquote) cite,
.pd-single .pd-single__content figcaption,
#top #wrap_all .pd-single .pd-single__content > p:not(:has(> img, > iframe, > video, > object, > embed)),
#top #wrap_all .pd-single .pd-single__content > :is(h1, h2, h3, h4, h5, h6),
#top #wrap_all .pd-single .pd-single__content li,
#top #wrap_all .pd-single .pd-single__content :is(blockquote, .wp-block-quote, .wp-block-pullquote) p,
#top #wrap_all .pd-single .pd-single__content :is(blockquote, .wp-block-quote, .wp-block-pullquote) cite,
#top #wrap_all .pd-single .pd-single__content figcaption {
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc-t) + var(--pd-desc-t)) * var(--fs)) / 2 + (var(--pd-asc-t) - var(--pd-cap-t)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc-t) + var(--pd-desc-t)) * var(--fs)) / 2 + var(--pd-desc-t) * 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;
}

.pd-single .pd-single__content > p,
#top #wrap_all .pd-single .pd-single__content > p {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Lead / sub-heading with the red bar (Figma: 22/32 white, 3px bar, 22 apart) */
.pd-single .pd-single__content > :is(h2, h3),
#top #wrap_all .pd-single .pd-single__content > :is(h2, h3) {
	font-family: var(--pd-nav-font);
	--fs: var(--pd-sg-lead-fs);
	--lh: var(--pd-sg-lead-lh);
	--pd-sg-bar-top: calc(var(--pd-nav-tt) - var(--pd-sg-bar-lt));
	--pd-sg-bar-bottom: calc(var(--pd-nav-tb) - var(--pd-sg-bar-lb));
	position: relative;
	padding-left: calc(var(--pd-sg-bar) + var(--pd-sg-bar-gap));
	color: var(--pd-sg-ink);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.pd-single .pd-single__content > :is(blockquote, .wp-block-quote, .wp-block-pullquote),
#top #wrap_all .pd-single .pd-single__content > :is(blockquote, .wp-block-quote, .wp-block-pullquote) {
	--fs: var(--pd-sg-lead-fs);
	--lh: var(--pd-sg-lead-lh);
	--pd-sg-bar-top: calc(-1 * var(--pd-sg-bar-lt));
	--pd-sg-bar-bottom: calc(-1 * var(--pd-sg-bar-lb));
	position: relative;
	display: flow-root;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: calc(var(--pd-sg-bar) + var(--pd-sg-bar-gap));
	padding-right: 0;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	background-color: transparent;
	color: var(--pd-sg-ink);
	font-size: var(--pd-sg-lead-fs);
	font-style: normal;
	line-height: var(--pd-sg-lead-lh);
	text-align: left;
}

.pd-single .pd-single__content > :is(h2, h3, blockquote, .wp-block-quote, .wp-block-pullquote)::before,
#top #wrap_all .pd-single .pd-single__content > :is(h2, h3, blockquote, .wp-block-quote, .wp-block-pullquote)::before {
	content: "";
	position: absolute;
	top: var(--pd-sg-bar-top);
	bottom: var(--pd-sg-bar-bottom);
	left: 0;
	width: var(--pd-sg-bar);
	background-color: var(--pd-sg-red);
}

.pd-single .pd-single__content :is(blockquote, .wp-block-quote, .wp-block-pullquote) p,
#top #wrap_all .pd-single .pd-single__content :is(blockquote, .wp-block-quote, .wp-block-pullquote) p {
	margin-top: calc(var(--pd-sg-para) - var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: inherit;
	font-size: var(--fs);
	font-style: normal;
}

.pd-single .pd-single__content :is(blockquote, .wp-block-quote, .wp-block-pullquote) > p:first-child,
#top #wrap_all .pd-single .pd-single__content :is(blockquote, .wp-block-quote, .wp-block-pullquote) > p:first-child {
	margin-top: calc(-1 * var(--pd-nav-tt));
}

.pd-single .pd-single__content :is(blockquote, .wp-block-quote, .wp-block-pullquote) cite,
#top #wrap_all .pd-single .pd-single__content :is(blockquote, .wp-block-quote, .wp-block-pullquote) cite {
	--fs: 14px;
	--lh: 20px;
	display: block;
	margin-top: calc(24px - var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
	font-style: normal;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	opacity: 0.56;
}

.pd-single .pd-single__content > :is(h4, h5, h6),
#top #wrap_all .pd-single .pd-single__content > :is(h4, h5, h6) {
	font-family: var(--pd-nav-font);
	--fs: 18px;
	--lh: 28px;
	color: var(--pd-sg-ink);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.pd-single .pd-single__content > h1,
#top #wrap_all .pd-single .pd-single__content > h1 {
	font-family: var(--pd-nav-font);
	--fs: var(--pd-sg-lead-fs);
	--lh: var(--pd-sg-lead-lh);
	color: var(--pd-sg-ink);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

/* Lists: each li is a trimmed leaf */
.pd-single .pd-single__content > :is(ul, ol),
#top #wrap_all .pd-single .pd-single__content > :is(ul, ol) {
	margin-left: 0;
	margin-right: 0;
	padding-left: 24px;
	padding-right: 0;
	list-style-position: outside;
}

.pd-single .pd-single__content > ul,
#top #wrap_all .pd-single .pd-single__content > ul {
	list-style-type: square;
}

.pd-single .pd-single__content > ol,
#top #wrap_all .pd-single .pd-single__content > ol {
	list-style-type: decimal;
}

.pd-single .pd-single__content li,
#top #wrap_all .pd-single .pd-single__content li {
	margin-top: calc(var(--lh) - var(--pd-cap) * var(--fs) + 8px - var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
	margin-left: 0;
	padding-left: 4px;
}

.pd-single .pd-single__content li:first-child,
#top #wrap_all .pd-single .pd-single__content li:first-child {
	margin-top: calc(-1 * var(--pd-nav-tt));
}

.pd-single .pd-single__content li::marker,
#top #wrap_all .pd-single .pd-single__content li::marker {
	color: var(--pd-sg-red);
}

.pd-single .pd-single__content li :is(ul, ol),
#top #wrap_all .pd-single .pd-single__content li :is(ul, ol) {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-left: 24px;
}

/* Inline */
.pd-single .pd-single__content a,
#top #wrap_all .pd-single .pd-single__content a {
	color: var(--pd-sg-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--pd-sg-red);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.pd-single .pd-single__content a:hover,
#top #wrap_all .pd-single .pd-single__content a:hover {
	color: var(--pd-sg-red);
}

.pd-single .pd-single__content :is(strong, b),
#top #wrap_all .pd-single .pd-single__content :is(strong, b) {
	color: var(--pd-sg-ink);
	font-weight: 600;
}

.pd-single .pd-single__content :is(em, i),
#top #wrap_all .pd-single .pd-single__content :is(em, i) {
	font-style: italic;
}

.pd-single .pd-single__content :is(code, kbd),
#top #wrap_all .pd-single .pd-single__content :is(code, kbd) {
	padding-left: 4px;
	padding-right: 4px;
	background-color: var(--pd-sg-tint);
	color: var(--pd-sg-ink);
	font-size: 0.875em;
}

/* Media: full column width, never upscaled past its own size */
.pd-single .pd-single__content img,
#top #wrap_all .pd-single .pd-single__content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: 0;
	margin-bottom: 0;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-radius: 0;
	box-shadow: none;
}

.pd-single .pd-single__content > :is(figure, .wp-block-image, .wp-caption, .wp-block-embed, .wp-block-video, .wp-block-gallery),
#top #wrap_all .pd-single .pd-single__content > :is(figure, .wp-block-image, .wp-caption, .wp-block-embed, .wp-block-video, .wp-block-gallery) {
	display: flow-root;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.pd-single .pd-single__content :is(figure, .wp-caption) img,
#top #wrap_all .pd-single .pd-single__content :is(figure, .wp-caption) img {
	width: 100%;
}

.pd-single .pd-single__content :is(iframe, video),
#top #wrap_all .pd-single .pd-single__content :is(iframe, video) {
	display: block;
	width: 100%;
	max-width: 100%;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
}

.pd-single .pd-single__content .wp-block-embed iframe,
#top #wrap_all .pd-single .pd-single__content .wp-block-embed iframe {
	height: auto;
	aspect-ratio: 16 / 9;
}

.pd-single .pd-single__content figcaption,
.pd-single .pd-single__content .wp-caption-text,
#top #wrap_all .pd-single .pd-single__content figcaption,
#top #wrap_all .pd-single .pd-single__content .wp-caption-text {
	--fs: 14px;
	--lh: 20px;
	margin-top: calc(16px - var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
	padding-top: 0;
	padding-bottom: 0;
	color: rgba(255, 255, 255, 0.56);
	text-align: left;
}

.pd-single .pd-single__content .alignleft,
#top #wrap_all .pd-single .pd-single__content .alignleft {
	float: left;
	max-width: 50%;
	margin-right: 32px;
	margin-bottom: 16px;
}

.pd-single .pd-single__content .alignright,
#top #wrap_all .pd-single .pd-single__content .alignright {
	float: right;
	max-width: 50%;
	margin-left: 32px;
	margin-bottom: 16px;
}

.pd-single .pd-single__content .aligncenter,
#top #wrap_all .pd-single .pd-single__content .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.pd-single .pd-single__content > hr,
.pd-single .pd-single__content > .wp-block-separator,
#top #wrap_all .pd-single .pd-single__content > hr,
#top #wrap_all .pd-single .pd-single__content > .wp-block-separator {
	display: block;
	width: 100%;
	height: 1px;
	margin-left: 0;
	margin-right: 0;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	background-color: var(--pd-sg-line);
	opacity: 1;
}

.pd-single .pd-single__content table,
#top #wrap_all .pd-single .pd-single__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--pd-sg-body-fs);
	line-height: var(--pd-sg-body-lh);
}

.pd-single .pd-single__content :is(th, td),
#top #wrap_all .pd-single .pd-single__content :is(th, td) {
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
	background-color: transparent;
	color: inherit;
	text-align: left;
}

.pd-single .pd-single__content th,
#top #wrap_all .pd-single .pd-single__content th {
	color: var(--pd-sg-ink);
	font-weight: 600;
}

.pd-single .pd-single__pages,
#top #wrap_all .pd-single .pd-single__pages {
	display: flex;
	column-gap: 8px;
}

/* ==========================================================================
   Related products — pd-woo card, 3 per view, snap-scrolling row + dots
   ========================================================================== */
.pd-single .pd-single__prod,
#top #wrap_all .pd-single .pd-single__prod {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: 32px;
	min-width: 0;
}

.pd-single .pd-single__prod-title,
#top #wrap_all .pd-single .pd-single__prod-title {
	color: var(--pd-sg-ink);
	font-family: var(--pd-nav-font);
	--fs: 24px;
	--lh: 24px;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.pd-single .pd-single__prod-track,
#top #wrap_all .pd-single .pd-single__prod-track {
	container-type: inline-size;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.pd-single .pd-single__prod-track::-webkit-scrollbar,
#top #wrap_all .pd-single .pd-single__prod-track::-webkit-scrollbar {
	display: none;
}

/* Mouse drag (the script adds the classes; touch keeps the native scroll) */
.pd-single .pd-single__prod-track.is-draggable,
#top #wrap_all .pd-single .pd-single__prod-track.is-draggable {
	cursor: grab;
}

.pd-single .pd-single__prod-track.is-dragging,
#top #wrap_all .pd-single .pd-single__prod-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
	-webkit-user-select: none;
}

.pd-single .pd-single__prod-track.is-dragging img,
#top #wrap_all .pd-single .pd-single__prod-track.is-dragging img {
	-webkit-user-drag: none;
}

.pd-single ul.pd-single__prod-list,
#top #wrap_all .pd-single ul.pd-single__prod-list {
	padding-left: 0;
	padding-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style: none;
	display: flex;
	align-items: stretch;
	column-gap: var(--pd-sg-card-gap);
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}

.pd-single .pd-single__prod-list > .pd-woo-card,
#top #wrap_all .pd-single .pd-single__prod-list > .pd-woo-card {
	flex-grow: 0;
	flex-shrink: 0;
	width: calc((100cqw - (var(--pd-sg-pp) - 1) * var(--pd-sg-card-gap)) / var(--pd-sg-pp));
	scroll-snap-align: start;
}

.pd-single .pd-single__dots,
#top #wrap_all .pd-single .pd-single__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.pd-single .pd-single__dots[hidden],
#top #wrap_all .pd-single .pd-single__dots[hidden] {
	display: none;
}

.pd-single .pd-single__dot,
#top #wrap_all .pd-single .pd-single__dot {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	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-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	cursor: pointer;
}

.pd-single .pd-single__dot::before,
#top #wrap_all .pd-single .pd-single__dot::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	transition: background-color 0.2s ease;
}

.pd-single .pd-single__dot:hover::before,
#top #wrap_all .pd-single .pd-single__dot:hover::before {
	background-color: rgba(255, 255, 255, 0.56);
}

.pd-single .pd-single__dot.is-active::before,
#top #wrap_all .pd-single .pd-single__dot.is-active::before {
	background-color: var(--pd-sg-red);
}

.pd-single .pd-single__dot:focus-visible,
#top #wrap_all .pd-single .pd-single__dot:focus-visible {
	outline: 2px solid var(--pd-sg-ink);
	outline-offset: -2px;
}

/* pd-woo product card (copied from pd-shop, scoped here) */
.pd-single .pd-woo-card,
#top #wrap_all .pd-single .pd-woo-card {
	display: flex;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.pd-single .pd-woo-card__link,
#top #wrap_all .pd-single .pd-woo-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var(--pd-sg-ink);
	transition: color 0.3s ease;
}

.pd-single .pd-woo-card__media,
#top #wrap_all .pd-single .pd-woo-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background-color: var(--pd-sg-panel);
	overflow: hidden;
	transition: background-color 0.3s ease;
}

.pd-single .pd-woo-card__media img,
#top #wrap_all .pd-single .pd-woo-card__media img {
	border-radius: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	padding-top: 10%;
	padding-bottom: 10%;
	padding-left: 10%;
	padding-right: 10%;
	margin-top: 0;
	margin-bottom: 0;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}

.pd-single .pd-woo-card__link:hover .pd-woo-card__media img,
#top #wrap_all .pd-single .pd-woo-card__link:hover .pd-woo-card__media img {
	transform: scale(1.04);
}

.pd-single .pd-woo-card__body,
#top #wrap_all .pd-single .pd-woo-card__body {
	display: grid;
	grid-template-rows: auto 1fr;
	row-gap: 28px;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	padding-top: 32px;
	padding-bottom: 32px;
	padding-left: 24px;
	padding-right: 24px;
	background-color: var(--pd-sg-panel);
	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.pd-single .pd-woo-card__name,
#top #wrap_all .pd-single .pd-woo-card__name {
	--fs: 16px;
	--lh: 22px;
	/* clamped to 2 lines: Chrome drops text-box trim on line-clamp boxes, so this
	   one always uses the metric margins (same numbers as the trim) */
	--pd-fb: 1;
	text-box-trim: none;
	text-box: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(var(--lh) + var(--pd-cap) * var(--fs) + var(--pd-fb) * (var(--lh) - var(--pd-cap) * var(--fs)));
	opacity: 0.72;
	overflow-wrap: anywhere;
	transition: opacity 0.25s ease;
}

.pd-single .pd-woo-card__price,
#top #wrap_all .pd-single .pd-woo-card__price {
	--fs: 18px;
	--lh: 28px;
	align-self: end;
	font-weight: 600;
}

.pd-single .pd-woo-card__price del,
#top #wrap_all .pd-single .pd-woo-card__price del {
	opacity: 0.56;
	font-weight: 400;
	color: inherit;
}

.pd-single .pd-woo-card__price ins,
#top #wrap_all .pd-single .pd-woo-card__price ins {
	text-decoration: none;
	background-color: transparent;
	color: inherit;
}

.pd-single .pd-woo-card__price .woocommerce-Price-amount,
#top #wrap_all .pd-single .pd-woo-card__price .woocommerce-Price-amount {
	color: inherit;
}

.pd-single .pd-woo-card__link:hover,
#top #wrap_all .pd-single .pd-woo-card__link:hover {
	color: var(--pd-sg-bg);
}

.pd-single .pd-woo-card__link:hover .pd-woo-card__media,
.pd-single .pd-woo-card__link:hover .pd-woo-card__body,
#top #wrap_all .pd-single .pd-woo-card__link:hover .pd-woo-card__media,
#top #wrap_all .pd-single .pd-woo-card__link:hover .pd-woo-card__body {
	background-color: var(--pd-sg-ink);
}

.pd-single .pd-woo-card__link:hover .pd-woo-card__body,
#top #wrap_all .pd-single .pd-woo-card__link:hover .pd-woo-card__body {
	box-shadow: inset 0 1px 0 0 rgba(22, 20, 20, 0.08);
}

.pd-single .pd-woo-card__link:focus-visible,
#top #wrap_all .pd-single .pd-woo-card__link:focus-visible {
	outline: 2px solid var(--pd-sg-ink);
	outline-offset: -2px;
}

/* ==========================================================================
   Line · Tags · Share
   ========================================================================== */
.pd-single .pd-single__line,
#top #wrap_all .pd-single .pd-single__line {
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--pd-sg-line);
}

.pd-single .pd-single__group,
#top #wrap_all .pd-single .pd-single__group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 20px;
}

.pd-single .pd-single__label,
#top #wrap_all .pd-single .pd-single__label {
	color: var(--pd-sg-ink);
	font-family: var(--pd-nav-font);
	--fs: 22px;
	--lh: 32px;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
	font-weight: 400;
}

.pd-single .pd-single__tags,
#top #wrap_all .pd-single .pd-single__tags {
	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
	row-gap: 8px;
}

.pd-single .pd-single__tag,
#top #wrap_all .pd-single .pd-single__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
	background-color: var(--pd-sg-tint);
	color: var(--pd-sg-ink);
}

.pd-single .pd-single__tag-t,
#top #wrap_all .pd-single .pd-single__tag-t {
	--fs: 16px;
	--lh: 24px;
	letter-spacing: 0.03em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.pd-single .pd-single__share,
#top #wrap_all .pd-single .pd-single__share {
	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
	row-gap: 8px;
}

.pd-single .pd-single__share-btn,
#top #wrap_all .pd-single .pd-single__share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 16px;
	padding-right: 16px;
	background-color: var(--pd-sg-red);
	color: var(--pd-sg-ink);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.pd-single .pd-single__share-btn:hover,
.pd-single .pd-single__share-btn.is-copied,
#top #wrap_all .pd-single .pd-single__share-btn:hover,
#top #wrap_all .pd-single .pd-single__share-btn.is-copied {
	background-color: var(--pd-sg-ink);
	color: var(--pd-sg-red);
}

.pd-single .pd-single__share-btn:focus-visible,
#top #wrap_all .pd-single .pd-single__share-btn:focus-visible {
	outline: 2px solid var(--pd-sg-ink);
	outline-offset: 2px;
}

.pd-single .pd-single__share-btn svg,
#top #wrap_all .pd-single .pd-single__share-btn svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Copy-link toast. It lives on <body>, OUTSIDE .pd-single, so its rules are
   written (and paired with #top) on their own root class and carry their own
   tokens — nothing here reads the section's custom properties.
   ========================================================================== */
.pd-single-toast,
#top .pd-single-toast {
	position: fixed;
	z-index: 10000;                       /* over pd-main-nav's fixed bar (9990) */
	left: 50%;
	right: auto;
	bottom: 24px;
	display: flex;
	align-items: center;
	max-width: calc(100vw - 32px);
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 27px;                   /* 24 + the 3px bar */
	padding-right: 24px;
	background-color: #242222;
	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-repeat: no-repeat;
	background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
	background-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px, 8px 2px, 2px 8px, 8px 2px, 2px 8px;
	box-shadow: inset 3px 0 0 0 #d60c0c;
	color: #fff;
	font-family: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.pd-single-toast.is-on,
#top .pd-single-toast.is-on {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.pd-single-toast__t,
#top .pd-single-toast__t {
	display: block;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: inherit;
	white-space: nowrap;
}

@media (min-width: 600px) {
	.pd-single-toast,
#top .pd-single-toast {
		left: auto;
		right: 32px;
		bottom: 32px;
		transform: translate(0, 12px);
	}

	.pd-single-toast.is-on,
#top .pd-single-toast.is-on {
		transform: translate(0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-single-toast,
#top .pd-single-toast {
		transition: opacity 0.01s linear, visibility 0.01s linear;
		transform: none;
	}

	.pd-single-toast.is-on,
#top .pd-single-toast.is-on {
		transform: none;
	}
}

/* ==========================================================================
   More related Blogs — pd-blog card (copied, scoped here)
   ========================================================================== */
.pd-single .pd-single__rel,
#top #wrap_all .pd-single .pd-single__rel {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-sg-rel-grid);
	padding-left: var(--pd-sg-px);
	padding-right: var(--pd-sg-px);
	padding-bottom: 0;
}

.pd-single .pd-single__rel-head,
#top #wrap_all .pd-single .pd-single__rel-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-sg-rel-gap);
}

.pd-single .pd-single__h,
#top #wrap_all .pd-single .pd-single__h {
	color: var(--pd-sg-ink);
	font-family: var(--pd-nav-font);
	display: flex;
	flex-direction: column;
	row-gap: 12px;
	max-width: var(--pd-sg-head-w);
	margin-top: 0;
	margin-bottom: 0;
	text-transform: uppercase;
}

.pd-single .pd-single__h-top,
#top #wrap_all .pd-single .pd-single__h-top {
	--fs: var(--pd-sg-h-top);
	--lh: var(--pd-sg-h-top);
	letter-spacing: -0.03em;
}

.pd-single .pd-single__h-top .pd-single__grad,
#top #wrap_all .pd-single .pd-single__h-top .pd-single__grad {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0, var(--pd-sg-ink) 145px);
}

.pd-single .pd-single__h-main,
#top #wrap_all .pd-single .pd-single__h-main {
	--fs: var(--pd-sg-h-main);
	--lh: calc(var(--pd-sg-h-main) * 0.916667);
	font-weight: 700;
	letter-spacing: -0.04em;
}

.pd-single .pd-single__rel-grid,
#top #wrap_all .pd-single .pd-single__rel-grid {
	display: grid;
	grid-template-columns: repeat(var(--pd-blog-cols), minmax(0, 1fr));
	column-gap: var(--pd-blog-col-gap);
	row-gap: var(--pd-blog-row-gap);
}

.pd-single .pd-blog__item,
#top #wrap_all .pd-single .pd-blog__item {
	display: block;
	min-width: 0;
}

.pd-single .pd-blog__card,
#top #wrap_all .pd-single .pd-blog__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-blog-card-gap);
	color: var(--pd-sg-ink);
}

.pd-single .pd-blog__card:focus-visible,
#top #wrap_all .pd-single .pd-blog__card:focus-visible {
	outline: 2px solid var(--pd-sg-ink);
	outline-offset: 4px;
}

.pd-single .pd-blog__media,
#top #wrap_all .pd-single .pd-blog__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--pd-blog-tile);
}

.pd-single .pd-blog__img,
#top #wrap_all .pd-single .pd-blog__img {
	border-radius: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.4s ease;
}

.pd-single .pd-blog__mark,
#top #wrap_all .pd-single .pd-blog__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 56%;
	aspect-ratio: 462 / 155;
	transform: translate(-50%, -50%);
	opacity: 0.2;
}

.pd-single .pd-blog__chips,
#top #wrap_all .pd-single .pd-blog__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--pd-blog-chip-gap);
	row-gap: var(--pd-blog-chip-gap);
}

.pd-single .pd-blog__chip,
#top #wrap_all .pd-single .pd-blog__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--pd-blog-chip-py);
	padding-right: var(--pd-blog-chip-px);
	padding-bottom: var(--pd-blog-chip-py);
	padding-left: var(--pd-blog-chip-px);
	background-color: var(--pd-blog-chip);
	color: var(--pd-sg-ink);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.pd-single .pd-blog__chip-t,
#top #wrap_all .pd-single .pd-blog__chip-t {
	--fs: var(--pd-blog-chip-fs);
	--lh: var(--pd-blog-chip-lh);
	white-space: nowrap;
}

.pd-single .pd-blog__title,
#top #wrap_all .pd-single .pd-blog__title {
	font-family: var(--pd-nav-font);
	--fs: var(--pd-blog-title-fs);
	--lh: var(--pd-blog-title-lh);
	max-width: var(--pd-blog-text-w);
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: var(--pd-sg-ink);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.pd-single .pd-blog__excerpt,
#top #wrap_all .pd-single .pd-blog__excerpt {
	--fs: var(--pd-blog-body-fs);
	--lh: var(--pd-blog-body-lh);
	max-width: var(--pd-blog-text-w);
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: rgba(255, 255, 255, 0.72);
}

.pd-single .pd-blog__dots,
#top #wrap_all .pd-single .pd-blog__dots {
	color: var(--pd-sg-red);
}

.pd-single .pd-blog__card:hover .pd-blog__img,
.pd-single .pd-blog__card:focus-visible .pd-blog__img,
#top #wrap_all .pd-single .pd-blog__card:hover .pd-blog__img,
#top #wrap_all .pd-single .pd-blog__card:focus-visible .pd-blog__img {
	filter: grayscale(0);
}

.pd-single .pd-blog__card:hover .pd-blog__chip--cat,
.pd-single .pd-blog__card:focus-visible .pd-blog__chip--cat,
#top #wrap_all .pd-single .pd-blog__card:hover .pd-blog__chip--cat,
#top #wrap_all .pd-single .pd-blog__card:focus-visible .pd-blog__chip--cat {
	background-color: var(--pd-sg-ink);
	color: var(--pd-blog-dark);
}

.pd-single .pd-blog__card:hover .pd-blog__chip--date,
.pd-single .pd-blog__card:focus-visible .pd-blog__chip--date,
#top #wrap_all .pd-single .pd-blog__card:hover .pd-blog__chip--date,
#top #wrap_all .pd-single .pd-blog__card:focus-visible .pd-blog__chip--date {
	background-color: var(--pd-sg-red);
}

/* ==========================================================================
   Responsive (not in Figma — extrapolated)
   ========================================================================== */
@media (max-width: 1279px) {
	.pd-single,
#top #wrap_all .pd-single { --pd-blog-cols: 2; }
}

/* Below 1200 the box no longer fits beside the text: one centred column, box after the content */
@media (max-width: 1199px) {
	.pd-single .pd-single__row,
#top #wrap_all .pd-single .pd-single__row {
		flex-direction: column;
		align-items: center;
		row-gap: var(--pd-sg-gap);
	}

	.pd-single .pd-single__main,
#top #wrap_all .pd-single .pd-single__main {
		flex-basis: auto;
		width: 100%;
	}

	.pd-single .pd-single__side,
#top #wrap_all .pd-single .pd-single__side {
		order: 2;
		flex-basis: auto;
		width: 100%;
		max-width: var(--pd-sg-main);
	}
}

@media (max-width: 767px) {
	.pd-single,
#top #wrap_all .pd-single { --pd-sg-hero-ratio: 3 / 2; }
}

@media (max-width: 599px) {
	/* The meta row wraps here: drop the "/" separators so no line starts with one */
	.pd-single .pd-single__meta,
#top #wrap_all .pd-single .pd-single__meta {
		column-gap: 20px;
	}

	.pd-single .pd-single__meta-item + .pd-single__meta-item::before,
#top #wrap_all .pd-single .pd-single__meta-item + .pd-single__meta-item::before {
		content: none;
	}

	.pd-single,
#top #wrap_all .pd-single {
		--pd-sg-pp: 2;
		--pd-sg-card-gap: 8px;
	}

	.pd-single .pd-woo-card__body,
#top #wrap_all .pd-single .pd-woo-card__body {
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 16px;
		padding-right: 16px;
		row-gap: 16px;
	}

	.pd-single .pd-woo-card__name,
#top #wrap_all .pd-single .pd-woo-card__name {
		--fs: 14px;
		--lh: 20px;
	}

	.pd-single .pd-woo-card__price,
#top #wrap_all .pd-single .pd-woo-card__price {
		--fs: 16px;
		--lh: 24px;
	}

	.pd-single .pd-single__box-main,
#top #wrap_all .pd-single .pd-single__box-main {
		--fs: 30px;
		--lh: 30px;
	}

	/* Related blogs: a swipeable row, 80% cards */
	.pd-single .pd-single__rel-grid,
#top #wrap_all .pd-single .pd-single__rel-grid {
		display: flex;
		column-gap: 16px;
		margin-left: calc(-1 * var(--pd-sg-px));
		margin-right: calc(-1 * var(--pd-sg-px));
		padding-left: var(--pd-sg-px);
		padding-right: var(--pd-sg-px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--pd-sg-px);
		scrollbar-width: none;
	}

	.pd-single .pd-single__rel-grid::-webkit-scrollbar,
#top #wrap_all .pd-single .pd-single__rel-grid::-webkit-scrollbar {
		display: none;
	}

	.pd-single .pd-single__rel-grid > .pd-blog__item,
#top #wrap_all .pd-single .pd-single__rel-grid > .pd-blog__item {
		flex-grow: 0;
		flex-shrink: 0;
		width: 80%;
		scroll-snap-align: start;
	}

	.pd-single .pd-single__content .alignleft,
.pd-single .pd-single__content .alignright,
#top #wrap_all .pd-single .pd-single__content .alignleft,
#top #wrap_all .pd-single .pd-single__content .alignright {
		float: none;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-single .pd-woo-card__media img,
.pd-single .pd-blog__img,
.pd-single .pd-blog__chip,
.pd-single .pd-single__box-btn,
.pd-single .pd-single__share-btn,
#top #wrap_all .pd-single .pd-woo-card__media img,
#top #wrap_all .pd-single .pd-blog__img,
#top #wrap_all .pd-single .pd-blog__chip,
#top #wrap_all .pd-single .pd-single__box-btn,
#top #wrap_all .pd-single .pd-single__share-btn {
		transition: none;
	}

	.pd-single .pd-single__prod-track,
#top #wrap_all .pd-single .pd-single__prod-track {
		scroll-behavior: auto;
	}

	.pd-single .pd-woo-card__link:hover .pd-woo-card__media img,
#top #wrap_all .pd-single .pd-woo-card__link:hover .pd-woo-card__media img {
		transform: none;
	}
}