/**
 * Shop Kit · Product content — the product page's content blocks (markup: blocks.php).
 *
 * Theme-agnostic: nothing here knows the page around the blocks. The page template owns the sections, their H2s and
 * the gaps between them; these rules own what is inside a section. A store sets the look by redefining the --sk-pdp-*
 * tokens (Love Pharm: assets/css/pdp.css maps them onto its --plp-* / system tokens; README.md lists every token
 * with the value the store's demo uses). The defaults below are declared on :where(:root) — zero specificity — so a
 * store's own :root (or any narrower) declaration wins whatever the order the stylesheets load in.
 *
 * The register: square corners, hairlines, no shadows, no fills; RTL through logical properties; one breakpoint, the
 * kit's desktop line (993px = Shoptimizer's and Bootstrap's "lg"): below it a value reads its --*-narrow twin, which
 * defaults to the wide value.
 */

:where(:root) {
	/* colour */
	--sk-pdp-ink: #1a1a1a;
	--sk-pdp-muted: #6b6560;
	--sk-pdp-line: #e2e2e2;                     /* every hairline */
	--sk-pdp-focus: #1a1a1a;                    /* the keyboard focus ring (the FAQ's questions) */

	/* measures */
	--sk-pdp-measure: 70ch;                     /* prose and the box list */
	--sk-pdp-wide: 820px;                       /* the diagrams, the spec table, the FAQ */

	/* text */
	--sk-pdp-text-size: 1em;                    /* prose, the parts list, the box list, the FAQ's answers */
	--sk-pdp-text-leading: 1.6;
	--sk-pdp-para-gap: 1em;
	--sk-pdp-tracking: normal;                  /* the blocks' letter-spacing (a theme's body tracking is not inherited) */

	/* the hero's H2 (= the overview section's heading) and the shortcode frames' headings */
	--sk-pdp-h2-size: 1.375em;
	--sk-pdp-h2-size-narrow: var(--sk-pdp-h2-size);
	--sk-pdp-h2-weight: 600;
	--sk-pdp-h2-leading: 1.3;
	--sk-pdp-h2-gap: 20px;                      /* H2 → its text */

	/* features */
	--sk-pdp-features-cols: 3;
	--sk-pdp-features-cols-narrow: 2;
	--sk-pdp-features-gap: 32px 24px;           /* rows, columns */
	--sk-pdp-features-gap-narrow: var(--sk-pdp-features-gap);
	--sk-pdp-features-top: 36px;                /* the text above → the grid */
	--sk-pdp-feature-gap: 10px;                 /* icon → title → text */
	--sk-pdp-icon: 32px;
	--sk-pdp-icon-narrow: var(--sk-pdp-icon);
	--sk-pdp-icon-color: var(--sk-pdp-ink);
	--sk-pdp-icon-stroke: 1.5;                  /* px at any icon size (non-scaling stroke) */
	--sk-pdp-feature-title-size: 1em;
	--sk-pdp-feature-title-weight: 600;
	--sk-pdp-feature-text-size: 0.9375em;
	--sk-pdp-feature-leading: 1.5;

	/* parts */
	--sk-pdp-parts-image: 400px;                /* the diagram's width beside the list */
	--sk-pdp-parts-gap: 40px;
	--sk-pdp-parts-gap-narrow: var(--sk-pdp-parts-gap);
	--sk-pdp-parts-row: 14px;                   /* a row's padding, top and bottom */
	--sk-pdp-parts-leading: 1.5;
	--sk-pdp-parts-name-weight: 600;
	--sk-pdp-marker: 24px;                      /* the square number box (as the diagram's markers) */
	--sk-pdp-marker-gap: 12px;
	--sk-pdp-marker-size: 12px;
	--sk-pdp-marker-weight: 600;

	/* dimensions */
	--sk-pdp-numbers-size: 0.9375em;
	--sk-pdp-numbers-gap: 20px;                 /* the numbers line → the drawings */
	--sk-pdp-dims-gap: 40px;
	--sk-pdp-dims-gap-narrow: var(--sk-pdp-dims-gap);
	--sk-pdp-dims-rule-inset: 12%;              /* the hairline between the drawings: 100% − 2 × this */

	/* specs */
	--sk-pdp-specs-size: 0.9375em;
	--sk-pdp-specs-pad: 10px;                   /* a row's padding, top and bottom */
	--sk-pdp-specs-label-width: 38%;
	--sk-pdp-specs-label-gap: 16px;
	--sk-pdp-specs-group-size: 0.875em;
	--sk-pdp-specs-group-weight: 600;
	--sk-pdp-specs-group-top: 26px;             /* air over a group's title (not the first) */
	--sk-pdp-specs-group-bottom: 8px;

	/* box */
	--sk-pdp-box-row: 12px;

	/* FAQ */
	--sk-pdp-faq-q-size: 1.0625em;
	--sk-pdp-faq-q-size-narrow: var(--sk-pdp-faq-q-size);
	--sk-pdp-faq-q-weight: 500;
	--sk-pdp-faq-q-pad: 18px;                   /* the question row's padding, top and bottom */
	--sk-pdp-faq-q-pad-narrow: var(--sk-pdp-faq-q-pad);
	--sk-pdp-faq-a-bottom: 20px;
	--sk-pdp-faq-para-gap: 0.8em;               /* between an answer's paragraphs */
	--sk-pdp-faq-a-end: 32px;                   /* the answer kept clear of the chevron's column */
	--sk-pdp-faq-a-end-narrow: var(--sk-pdp-faq-a-end);
	--sk-pdp-faq-q-leading: 1.4;
	--sk-pdp-faq-q-mt: 0;                       /* the question's own margins (a store whose FAQ keeps its theme's h3 rhythm) */
	--sk-pdp-faq-q-mb: 0;
	--sk-pdp-faq-q-gap: 16px;                   /* between the question and the chevron */
	--sk-pdp-faq-line: var(--sk-pdp-line);      /* the FAQ's hairlines */
	--sk-pdp-chevron: 0.5em;
	--sk-pdp-chevron-stroke: 1.5px;
	--sk-pdp-motion: 240ms;                     /* the answer's slide and the chevron's turn; read by product-content.js (a harness sets 0ms) */

	/* the legacy mechanism block */
	--sk-pdp-mechanism-gap: 40px;
	--sk-pdp-mechanism-gap-narrow: 24px;
	--sk-pdp-mechanism-image-height: 300px;

	/* a shortcode's own frame (outside the page template: a category's FAQ, an article) */
	--sk-pdp-block-gap: 40px;                   /* air above a framed block */
	--sk-pdp-intro-gap: 8px;                    /* a framed block's heading → its intro line */
}

/* ---------- shared: tracking, prose, headings */
.sk-pdp-prose,
.sk-pdp-features,
.sk-pdp-parts,
.sk-pdp-dims__numbers,
.sk-pdp-specs,
.sk-pdp-box,
.sk-pdp-faq,
.sk-pdp-mechanism,
.sk-pdp-block__intro {
	letter-spacing: var(--sk-pdp-tracking);
}
.sk-pdp-prose {
	max-width: var(--sk-pdp-measure);
	font-size: var(--sk-pdp-text-size);
	line-height: var(--sk-pdp-text-leading);
	color: var(--sk-pdp-ink);
}
.sk-pdp-prose > * {
	margin-block: 0 var(--sk-pdp-para-gap);
}
.sk-pdp-faq__in > * {
	margin-block: 0 var(--sk-pdp-faq-para-gap);
}
.sk-pdp-prose > :last-child,
.sk-pdp-faq__in > :last-child {
	margin-block-end: 0;
}
.sk-pdp-prose :is(ul, ol),
.sk-pdp-faq__in :is(ul, ol) {
	padding-inline-start: 1.25em;
	margin-inline: 0;
}
.sk-pdp-prose li,
.sk-pdp-faq__in li {
	margin: 0;
}
.sk-pdp-prose :is(h2, h3),
.sk-pdp-faq__in :is(h2, h3) {
	font-size: 1em;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}
.sk-pdp-prose a,
.sk-pdp-faq__in a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.sk-pdp-prose strong,
.sk-pdp-faq__in strong {
	font-weight: 600;
}

.sk-pdp-hero__title,
.sk-pdp-block__title,
.sk-pdp-mechanism__title {
	margin: 0 0 var(--sk-pdp-h2-gap);
	padding: 0;
	font-family: inherit;
	font-size: var(--sk-pdp-h2-size);
	font-weight: var(--sk-pdp-h2-weight);
	line-height: var(--sk-pdp-h2-leading);
	letter-spacing: var(--sk-pdp-tracking);
	text-transform: none;
	color: var(--sk-pdp-ink);
	text-wrap: balance;
}

/* ---------- features: a grid of icon + title + text */
.sk-pdp-features {
	display: grid;
	grid-template-columns: repeat(var(--sk-pdp-features-cols), minmax(0, 1fr));
	gap: var(--sk-pdp-features-gap);
	margin: var(--sk-pdp-features-top) 0 0;
	padding: 0;
	list-style: none;
}
.sk-pdp-features:first-child {
	margin-block-start: 0;
}
.sk-pdp-features .sk-pdp-features__item {
	display: flex;
	flex-direction: column;
	gap: var(--sk-pdp-feature-gap);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sk-pdp-features .sk-pdp-features__icon {
	display: block;
	flex: none;
	width: var(--sk-pdp-icon);
	height: var(--sk-pdp-icon);
	color: var(--sk-pdp-icon-color);
	stroke-width: var(--sk-pdp-icon-stroke);
}
.sk-pdp-features .sk-pdp-features__title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: var(--sk-pdp-feature-title-size);
	font-weight: var(--sk-pdp-feature-title-weight);
	line-height: var(--sk-pdp-feature-leading);
	letter-spacing: inherit;
	text-transform: none;
	color: var(--sk-pdp-ink);
}
.sk-pdp-features .sk-pdp-features__text {
	margin: 0;
	font-size: var(--sk-pdp-feature-text-size);
	line-height: var(--sk-pdp-feature-leading);
	color: var(--sk-pdp-muted);
}
.sk-pdp-features__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- parts: the diagram (trimmed to the product, unframed) beside the numbered list, on the wide measure;
   the grid's first column is the inline start (the right in RTL) — the drawing flush with the content edge, its top
   on the list's first hairline */
.sk-pdp-parts {
	display: grid;
	grid-template-columns: minmax(0, var(--sk-pdp-parts-image)) minmax(0, 1fr);
	gap: var(--sk-pdp-parts-gap);
	align-items: start;
	max-width: var(--sk-pdp-wide);
}
.sk-pdp-parts--text {
	grid-template-columns: minmax(0, 1fr);
}
.sk-pdp-parts .sk-pdp-parts__figure {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.sk-pdp-parts .sk-pdp-parts__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.sk-pdp-parts .sk-pdp-parts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sk-pdp-parts .sk-pdp-parts__item {
	display: grid;
	grid-template-columns: var(--sk-pdp-marker) minmax(0, 1fr);
	gap: var(--sk-pdp-marker-gap);
	margin: 0;
	padding: var(--sk-pdp-parts-row) 0;
	border-top: 1px solid var(--sk-pdp-line);
	font-size: var(--sk-pdp-text-size);
	line-height: var(--sk-pdp-parts-leading);
	color: var(--sk-pdp-ink);
	list-style: none;
}
.sk-pdp-parts .sk-pdp-parts__item:last-child {
	border-bottom: 1px solid var(--sk-pdp-line);
}
.sk-pdp-parts__n {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: var(--sk-pdp-marker);
	height: var(--sk-pdp-marker);
	border: 1px solid var(--sk-pdp-ink);
	font-size: var(--sk-pdp-marker-size);
	font-weight: var(--sk-pdp-marker-weight);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.sk-pdp-parts__name {
	font-weight: var(--sk-pdp-parts-name-weight);
}

/* ---------- dimensions: the numbers line, then the two drawings unframed, one short hairline between them */
.sk-pdp-dims__numbers {
	margin: 0 0 var(--sk-pdp-numbers-gap);
	font-size: var(--sk-pdp-numbers-size);
	font-variant-numeric: tabular-nums;
	color: var(--sk-pdp-ink);
}
.sk-pdp-dims {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sk-pdp-dims-gap);
	max-width: var(--sk-pdp-wide);
}
.sk-pdp-dims--pair::before {
	content: "";
	position: absolute;
	top: var(--sk-pdp-dims-rule-inset);
	bottom: var(--sk-pdp-dims-rule-inset);
	inset-inline-start: 50%;
	width: 1px;
	background: var(--sk-pdp-line);
}
.sk-pdp-dims .sk-pdp-dims__figure {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.sk-pdp-dims .sk-pdp-dims__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- specs: a two-column hairline table, grouped; no fills, no links */
.sk-pdp-specs {
	width: 100%;
	max-width: var(--sk-pdp-wide);
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: none;
	font-size: var(--sk-pdp-specs-size);
	color: var(--sk-pdp-ink);
}
.sk-pdp-specs tr {
	background: none;
}
.sk-pdp-specs .sk-pdp-specs__label,
.sk-pdp-specs .sk-pdp-specs__value,
.sk-pdp-specs .sk-pdp-specs__group-title {
	padding: var(--sk-pdp-specs-pad) 0;
	border: 0;
	border-bottom: 1px solid var(--sk-pdp-line);
	background: none;
	font-size: inherit;
	line-height: 1.5;
	text-align: start;
	vertical-align: top;
}
.sk-pdp-specs .sk-pdp-specs__label {
	width: var(--sk-pdp-specs-label-width);
	padding-inline-end: var(--sk-pdp-specs-label-gap);
	font-weight: 400;
	color: var(--sk-pdp-muted);
}
.sk-pdp-specs .sk-pdp-specs__value {
	font-weight: 400;
	color: var(--sk-pdp-ink);
}
.sk-pdp-specs .sk-pdp-specs__group-title {
	padding-top: var(--sk-pdp-specs-group-top);
	padding-bottom: var(--sk-pdp-specs-group-bottom);
	font-size: var(--sk-pdp-specs-group-size);
	font-weight: var(--sk-pdp-specs-group-weight);
	color: var(--sk-pdp-ink);
}
.sk-pdp-specs .sk-pdp-specs__group:first-child .sk-pdp-specs__group-title {
	padding-top: 0;
}

/* ---------- box: one item per row, hairlines */
.sk-pdp-box {
	max-width: var(--sk-pdp-measure);           /* ch of the list's own size, not the page's */
	margin: 0;
	font-size: var(--sk-pdp-text-size);
	padding: 0;
	list-style: none;
}
.sk-pdp-box .sk-pdp-box__item {
	margin: 0;
	padding: var(--sk-pdp-box-row) 0;
	border-top: 1px solid var(--sk-pdp-line);
	font-size: inherit;
	line-height: 1.5;
	color: var(--sk-pdp-ink);
	list-style: none;
}
.sk-pdp-box .sk-pdp-box__item:last-child {
	border-bottom: 1px solid var(--sk-pdp-line);
}

/* ---------- FAQ: native details / summary between hairlines, a thin chevron; one open at a time. The answer's slide
   is product-content.js (a CSS-only close janks on mobile Safari); the outer answer box carries no padding (a box
   cannot be shorter than its padding — the slide would jump), the inner one does */
.sk-pdp-faq {
	max-width: var(--sk-pdp-wide);
	border-bottom: 1px solid var(--sk-pdp-faq-line);
	color: var(--sk-pdp-ink);
}
.sk-pdp-faq .sk-pdp-faq__item {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--sk-pdp-faq-line);
}
.sk-pdp-faq .sk-pdp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-pdp-faq-q-gap);
	margin: 0;
	padding: var(--sk-pdp-faq-q-pad) 0;
	cursor: pointer;
	list-style: none;
}
.sk-pdp-faq__q::-webkit-details-marker {
	display: none;
}
.sk-pdp-faq__q::after {
	content: "";
	flex: none;
	width: var(--sk-pdp-chevron);
	height: var(--sk-pdp-chevron);
	margin-top: -0.15em;
	border: solid currentColor;
	border-width: 0 var(--sk-pdp-chevron-stroke) var(--sk-pdp-chevron-stroke) 0;   /* physical on purpose: the glyph is symmetric, transform ignores direction */
	transform: rotate(45deg);
	transition: transform var(--sk-pdp-motion) ease, margin-top var(--sk-pdp-motion) ease;
}
.sk-pdp-faq__item[open] > .sk-pdp-faq__q::after {
	margin-top: 0.15em;
	transform: rotate(-135deg);
}
/* enhanced: `open` is set when a slide starts opening and kept until a closing one ends, so the chevron follows
   .is-open instead — the script sets it as the slide completes */
.sk-pdp-faq.is-js .sk-pdp-faq__item[open]:not(.is-open) > .sk-pdp-faq__q::after {
	margin-top: -0.15em;
	transform: rotate(45deg);
}
.sk-pdp-faq__q:focus {
	outline: none;
}
.sk-pdp-faq__q:focus-visible {
	outline: 2px solid var(--sk-pdp-focus);
	outline-offset: 2px;
}
.sk-pdp-faq .sk-pdp-faq__q-text {
	flex: 1 1 auto;
	margin: var(--sk-pdp-faq-q-mt) 0 var(--sk-pdp-faq-q-mb);
	padding: 0;
	font-family: inherit;
	font-size: var(--sk-pdp-faq-q-size);
	font-weight: var(--sk-pdp-faq-q-weight);
	line-height: var(--sk-pdp-faq-q-leading);
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
}
.sk-pdp-faq__a {
	font-size: var(--sk-pdp-text-size);
	line-height: var(--sk-pdp-text-leading);
}
.sk-pdp-faq__in {
	padding: 0 0 var(--sk-pdp-faq-a-bottom);
	padding-inline-end: var(--sk-pdp-faq-a-end);
}
/* ---------- the legacy mechanism block: text beside its image (the image first: the right in RTL, on top on the phone) */
.sk-pdp-mechanism {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: var(--sk-pdp-mechanism-gap);
	max-width: var(--sk-pdp-wide);
}
.sk-pdp-mechanism .sk-pdp-mechanism__media {
	order: -1;
	margin: 0;
}
.sk-pdp-mechanism .sk-pdp-mechanism__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--sk-pdp-mechanism-image-height);
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- a shortcode's own frame (outside the page template) */
.sk-pdp-block {
	margin-block: var(--sk-pdp-block-gap) 0;
}
.sk-pdp-block:first-child {
	margin-block-start: 0;
}
.sk-pdp-block__title:has(+ .sk-pdp-block__intro) {
	margin-block-end: var(--sk-pdp-intro-gap);
}
.sk-pdp-block__intro {
	margin: 0 0 var(--sk-pdp-h2-gap);
	color: var(--sk-pdp-muted);
}

/* ---------- below the kit's desktop line */
@media (max-width: 992px) {
	.sk-pdp-hero__title,
	.sk-pdp-block__title,
	.sk-pdp-mechanism__title {
		font-size: var(--sk-pdp-h2-size-narrow);
	}
	.sk-pdp-features {
		grid-template-columns: repeat(var(--sk-pdp-features-cols-narrow), minmax(0, 1fr));
		gap: var(--sk-pdp-features-gap-narrow);
	}
	.sk-pdp-features .sk-pdp-features__icon {
		width: var(--sk-pdp-icon-narrow);
		height: var(--sk-pdp-icon-narrow);
	}
	.sk-pdp-parts {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sk-pdp-parts-gap-narrow);
	}
	.sk-pdp-dims {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sk-pdp-dims-gap-narrow);
	}
	.sk-pdp-dims--pair::before {
		top: 50%;
		bottom: auto;
		inset-inline: var(--sk-pdp-dims-rule-inset);
		width: auto;
		height: 1px;
	}
	.sk-pdp-faq .sk-pdp-faq__q {
		padding-block: var(--sk-pdp-faq-q-pad-narrow);
	}
	.sk-pdp-faq .sk-pdp-faq__q-text {
		font-size: var(--sk-pdp-faq-q-size-narrow);
	}
	.sk-pdp-faq__in {
		padding-inline-end: var(--sk-pdp-faq-a-end-narrow);
	}
	.sk-pdp-mechanism {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sk-pdp-mechanism-gap-narrow);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk-pdp-faq__q::after {
		transition: none;
	}
}