/* ==========================================================================
   Product detail page (PDP)
   ==========================================================================

   Owns every `.pdp-*` class and the `.mockup` device frame. Loaded after
   components.css and before responsive.css, so it can lean on the shared
   button, card and accordion styles and still be overridden by the global
   breakpoint file if that ever becomes necessary.

   Rules of the road for this file:

   - No new design tokens. Colours, type sizes, spacing, radii and shadows all
     come from base.css custom properties, so a brand change stays a one-file
     change.
   - Spacing is the 8px scale from base.css (--space-1 = 4px, --space-2 = 8px,
     --space-4 = 16px, --space-6 = 32px, --space-8 = 48px). Nothing here invents
     an off-grid value.
   - Every image sits in a fixed aspect-ratio box. The page must not reflow when
     a screenshot finishes loading, and roughly two thirds of the catalogue has
     no screenshot at all, so both states have to occupy identical space.
   - Mobile first. The sidebar is a normal block until there is room for it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */

.pdp {
	background: var(--color-surface);
}

/* The global `section { padding-block: var(--space-10) }` rule is too heavy for
   sections that are stacked inside one column; each PDP section sets its own. */
.pdp section {
	padding-block: 0;
}

.pdp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
	align-items: start;
	padding-block: var(--space-8);
}

/* Core's flow layout puts margin-block on the children of a default-layout
   group. Inside a grid that fights the gap, so it is cleared here. */
.pdp-layout > *,
.pdp-main > * {
	margin-block: 0;
}

.pdp-main {
	min-width: 0; /* Lets long tables and pre blocks shrink instead of overflowing. */
}

.pdp-tail {
	padding-bottom: var(--space-8);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */

.pdp-section {
	padding-block: var(--space-8) 0;
}

.pdp-main > .pdp-section:first-child,
.pdp-main .wp-block-group:first-child > .pdp-section:first-child {
	padding-top: 0;
}

.pdp-section__head {
	margin-bottom: var(--space-5);
}

.pdp-section__title {
	margin: 0;
	font-size: var(--fs-xl);
	line-height: var(--lh-tight);
	color: var(--color-ink);
	letter-spacing: -0.01em;
}

.pdp-section__lead {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-md);
	color: var(--color-ink-soft);
	max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Device mockup

   One frame, used by the hero, the gallery, the overview and the related
   cards. Fixed 16:10 with a fake browser chrome bar. When there is no artwork
   the same box holds a labelled panel, so a product with screenshots and a
   product without occupy exactly the same space — no CLS either way.
   -------------------------------------------------------------------------- */

.mockup {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
}

.mockup__bar {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface-alt);
	border-bottom: 1px solid var(--color-border);
}

.mockup__bar span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-border);
}

.mockup__screen {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--color-surface-alt);
}

.mockup__screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.mockup__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--space-4);
	text-align: center;
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-surface-alt));
}

.mockup__empty span {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-primary);
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.pdp-hero {
	padding-block: var(--space-6) var(--space-8);
	background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-surface) 100%);
	border-bottom: 1px solid var(--color-border);
}

.pdp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: center;
}

.pdp-crumbs {
	margin-bottom: var(--space-5);
	font-size: var(--fs-xs);
	color: var(--color-ink-soft);
}

.pdp-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdp-crumbs li + li::before {
	content: "/";
	margin-right: var(--space-2);
	color: var(--color-ink-faint);
}

.pdp-crumbs a {
	color: inherit;
	text-decoration: none;
}

.pdp-crumbs a:hover,
.pdp-crumbs a:focus-visible {
	text-decoration: underline;
}

.pdp-crumbs [aria-current="page"] {
	color: var(--color-ink);
	font-weight: 600;
}

.pdp-hero__ident {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.pdp-hero__logo {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-md);
	object-fit: contain;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: var(--space-1);
	flex: 0 0 auto;
}

.pdp-hero__title {
	margin: 0;
	font-size: var(--fs-2xl);
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
	color: var(--color-primary);
}

.pdp-hero__tagline {
	margin: var(--space-1) 0 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pdp-hero__summary {
	margin: var(--space-5) 0 0;
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	color: var(--color-ink-soft);
	max-width: 58ch;
}

/* Fact chips. A <dl> because these really are term/definition pairs; the
   visual chip is just how the pair is drawn. */
.pdp-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-5) 0 0;
}

.pdp-facts__item {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: var(--fs-xs);
	box-shadow: var(--shadow-sm);
}

.pdp-facts__item dt {
	margin: 0;
	color: var(--color-ink-faint);
	font-weight: 500;
}

.pdp-facts__item dd {
	margin: 0;
	color: var(--color-ink);
	font-weight: 700;
}

.pdp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.pdp-hero__buy .btn,
.pdp-hero__buy .edd-submit {
	width: auto;
}

.pdp-hero__trust {
	margin-top: var(--space-4);
}

.pdp-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
}

.pdp-rating__stars {
	color: #f59e0b;
	letter-spacing: 0.05em;
}

.pdp-rating__value {
	font-weight: 700;
	color: var(--color-ink);
}

.pdp-rating__count {
	font-weight: 400;
	color: var(--color-ink-faint);
}

/* --------------------------------------------------------------------------
   2. Gallery
   -------------------------------------------------------------------------- */

.pdp-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdp-gallery figure {
	margin: 0;
}

.pdp-gallery figcaption {
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-ink-soft);
}

/* The whole screenshot is the lightbox trigger, so the button has to be a
   transparent wrapper rather than look like a button. */
.pdp-gallery__open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: var(--radius-md);
}

.pdp-gallery__open:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.pdp-gallery__open .mockup {
	transition: transform var(--transition), box-shadow var(--transition);
}

.pdp-gallery__open:hover .mockup {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

/* Lightbox (assets/js/product.js). Hidden entirely until JS opens it. */
.pdp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: var(--space-5);
	background: rgba(15, 23, 42, 0.88);
}

.pdp-lightbox[hidden] {
	display: none;
}

.pdp-lightbox img {
	max-width: min(1200px, 92vw);
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.pdp-lightbox__caption {
	margin-top: var(--space-4);
	color: #fff;
	font-size: var(--fs-sm);
	text-align: center;
}

.pdp-lightbox__close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: var(--fs-lg);
	line-height: 1;
	cursor: pointer;
}

.pdp-lightbox__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Overview
   -------------------------------------------------------------------------- */

.pdp-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
}

.pdp-overview__text > :first-child {
	margin-top: 0;
}

.pdp-overview__lead {
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	color: var(--color-ink-soft);
}

.pdp-ticks {
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-2);
}

/* The tick is a real inline SVG in the markup, not a CSS pseudo-element, so it
   has to be given a size here — an unsized inline SVG expands to fill its
   container. Grid rather than padding so long lines wrap flush under
   themselves instead of under the tick. */
.pdp-ticks li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
	color: var(--color-ink-soft);
}

.pdp-ticks svg {
	width: 20px;
	height: 20px;
	margin-top: 0.15em;
	color: var(--color-success);
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   4 / 6 / 7. Card grids (features, benefits, use cases)
   -------------------------------------------------------------------------- */

.pdp-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdp-card {
	position: relative;
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.pdp-card:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.pdp-card__num {
	display: block;
	margin-bottom: var(--space-3);
	font-size: var(--fs-sm);
	font-weight: 800;
	color: var(--color-accent);
	letter-spacing: 0.08em;
}

.pdp-card__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-3);
	border-radius: var(--radius-md);
	background: var(--color-primary-light);
	color: var(--color-primary);
}

.pdp-card__icon svg {
	width: 24px;
	height: 24px;
}

.pdp-card__title {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-tight);
	color: var(--color-ink);
}

.pdp-card__desc {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   5. Comparison table
   -------------------------------------------------------------------------- */

/* Horizontal scroll is confined to the wrapper so a wide table can never widen
   the page itself. tabindex is added by product.js so the scroll area is
   reachable from the keyboard. */
.pdp-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.pdp-table-wrap:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.pdp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	background: var(--color-surface);
}

.pdp-table th,
.pdp-table td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
}

.pdp-table thead th {
	background: var(--color-surface-alt);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-ink-soft);
	white-space: nowrap;
}

.pdp-table thead th.is-highlight {
	background: var(--color-primary);
	color: #fff;
}

.pdp-table tbody th {
	font-weight: 600;
	color: var(--color-ink);
}

.pdp-table tbody tr:last-child th,
.pdp-table tbody tr:last-child td {
	border-bottom: 0;
}

.pdp-table__cell.is-highlight {
	background: var(--color-primary-light);
	font-weight: 700;
	color: var(--color-primary);
}

.pdp-mark {
	display: inline-flex;
	align-items: center;
}

.pdp-mark svg {
	width: 18px;
	height: 18px;
}

.pdp-mark--yes {
	color: var(--color-success);
}

.pdp-mark--no {
	color: var(--color-ink-faint);
}

/* --------------------------------------------------------------------------
   8. Installation steps
   -------------------------------------------------------------------------- */

.pdp-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-5);
}

.pdp-steps__item {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--space-4);
	align-items: start;
}

/* The connecting rail is drawn from the item itself, so adding or removing a
   step never leaves an orphaned line behind. */
.pdp-steps__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 40px;
	bottom: calc(var(--space-5) * -1);
	width: 2px;
	background: var(--color-border);
}

.pdp-steps__num {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-weight: 800;
	font-size: var(--fs-sm);
}

.pdp-steps__title {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-md);
	color: var(--color-ink);
	line-height: var(--lh-tight);
}

.pdp-steps__desc {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
}

.pdp-steps__more {
	margin: var(--space-5) 0 0;
	font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   9. Compatibility badges
   -------------------------------------------------------------------------- */

.pdp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
	font-size: var(--fs-xs);
}

.pdp-badge__label {
	color: var(--color-ink-soft);
	font-weight: 600;
}

.pdp-badge__value {
	color: var(--color-primary);
	font-weight: 800;
}

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */

.pdp-faq {
	border-top: 1px solid var(--color-border);
}

.pdp-faq .accordion-trigger {
	font-size: var(--fs-base);
	gap: var(--space-4);
}

.pdp-faq .accordion-panel p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
	max-width: 70ch;
}

/* --------------------------------------------------------------------------
   11. Changelog timeline
   -------------------------------------------------------------------------- */

.pdp-timeline {
	margin: 0;
	padding: 0 0 0 var(--space-5);
	list-style: none;
	border-left: 2px solid var(--color-border);
	display: grid;
	gap: var(--space-5);
}

.pdp-timeline__item {
	position: relative;
}

.pdp-timeline__item::before {
	content: "";
	position: absolute;
	left: calc(var(--space-5) * -1 - 5px);
	top: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
}

.pdp-timeline__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
}

.pdp-timeline__version {
	font-weight: 800;
	color: var(--color-ink);
}

.pdp-timeline__date {
	font-size: var(--fs-xs);
	color: var(--color-ink-faint);
}

.pdp-timeline__desc {
	margin: var(--space-1) 0 0;
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   12. Related products
   -------------------------------------------------------------------------- */

.pdp-related {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pdp-related .product-card {
	overflow: hidden;
}

.pdp-related .product-card__media {
	aspect-ratio: auto;
	border-bottom: 0;
	background: none;
}

.pdp-related .product-card__media .mockup {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pdp-related .product-card__body {
	padding: var(--space-4);
}

/* --------------------------------------------------------------------------
   13. Final CTA
   -------------------------------------------------------------------------- */

.pdp-cta {
	padding-block: 0 var(--space-10);
}

.pdp-cta__panel {
	padding: var(--space-8) var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-surface-dark);
	text-align: center;
}

.pdp-cta__title {
	margin: 0;
	font-size: var(--fs-xl);
	line-height: var(--lh-tight);
	color: #fff;
}

.pdp-cta__lead {
	margin: var(--space-3) 0 0;
	color: #cbd5e1;
}

.pdp-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

.pdp-cta__actions .pdp-buy,
.pdp-cta__actions .btn--block {
	width: auto;
	display: inline-flex;
}

.pdp-cta__meta {
	margin: var(--space-5) 0 0;
	font-size: var(--fs-sm);
}

.pdp-cta__meta a {
	color: #cbd5e1;
}

/* An outline button on a dark panel needs light borders; the base .btn--ghost
   assumes a light background. */
.btn--on-dark {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.btn--on-dark:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.pdp-aside {
	min-width: 0;
}

.pdp-aside__inner {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

.pdp-buybox__price {
	margin: 0 0 var(--space-4);
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.pdp-buybox__price strong {
	font-size: var(--fs-xl);
	color: var(--color-primary);
	line-height: 1;
}

.pdp-buybox__price span {
	font-size: var(--fs-sm);
	color: var(--color-ink-faint);
}

.pdp-buybox .btn + .btn,
.pdp-buybox .pdp-buy + .btn {
	margin-top: var(--space-3);
}

.pdp-buybox__note {
	margin: var(--space-3) 0 0;
	font-size: var(--fs-xs);
	color: var(--color-ink-faint);
	text-align: center;
}

.pdp-aside__facts {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
	display: grid;
	gap: var(--space-2);
}

.pdp-aside__facts > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
	font-size: var(--fs-xs);
}

.pdp-aside__facts dt {
	margin: 0;
	color: var(--color-ink-faint);
}

.pdp-aside__facts dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
	color: var(--color-ink);
}

.pdp-aside__block {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.pdp-aside__heading {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-ink-faint);
}

.pdp-aside__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-2);
	font-size: var(--fs-sm);
}

.pdp-tags,
.pdp-share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdp-tags a,
.pdp-tags span,
.pdp-share a {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: var(--fs-xs);
	color: var(--color-ink-soft);
	text-decoration: none;
}

.pdp-tags a:hover,
.pdp-share a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

/* Tablet */
@media (min-width: 48em) {
	.pdp-hero {
		padding-block: var(--space-8) var(--space-10);
	}

	.pdp-hero__title {
		font-size: var(--fs-3xl);
	}

	.pdp-gallery,
	.pdp-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pdp-section__title {
		font-size: var(--fs-2xl);
	}

	.pdp-cta__panel {
		padding: var(--space-10) var(--space-8);
	}
}

/* Desktop: hero splits, sidebar appears and sticks. */
@media (min-width: 64em) {
	.pdp-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--space-8);
	}

	.pdp-layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: var(--space-10);
		padding-block: var(--space-10);
	}

	/* Sticky only where there is room. The offset clears the site header; the
	   max-height plus overflow means a long sidebar can still be scrolled
	   rather than having its lower half trapped off-screen. */
	.pdp-aside__inner {
		position: sticky;
		top: var(--space-6);
		max-height: calc(100vh - var(--space-10));
		overflow-y: auto;
	}

	.pdp-cards--features,
	.pdp-cards--benefits,
	.pdp-cards--usecases {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pdp-overview {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
		gap: var(--space-8);
	}

	.pdp-overview.is-single {
		grid-template-columns: minmax(0, 1fr);
	}

	.pdp-section {
		padding-block: var(--space-10) 0;
	}
}

/* Wide desktop: the related grid gets its full four columns. */
@media (min-width: 75em) {
	.pdp-related {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pdp-card,
	.pdp-gallery__open .mockup {
		transition: none;
	}

	.pdp-card:hover,
	.pdp-gallery__open:hover .mockup {
		transform: none;
	}
}

@media print {
	.pdp-aside,
	.pdp-cta,
	.pdp-lightbox {
		display: none;
	}

	.pdp-layout {
		display: block;
	}
}