/**
 * Piece page (Figma: Product Detail, PDP-Desktop / PDP-Tablet / PDP-Mobile, Product-Lightbox-Desktop).
 * Phones first. Tokens only; breakpoint literals carry the token name (decision 1).
 * The piece card, status badge, buttons and torn edges come from collection.css and global.css.
 */

.aa-piece-page > *,
:is(.aa-piece, .aa-piece__summary, .aa-piece__description, .aa-piece__content, .aa-price, .aa-related__inner) > * {
	margin-block: 0;
}

/* ---------- Breadcrumbs (Figma layer "Breadcrumbs") ---------- */

/* Phones: a dark band with "‹ Carousel Art", tearing into the cream panel. */
.aa-piece-crumbs {
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--margin);
	background-color: var(--wp--custom--color--bg--nav);
}

/* custom.breakpoint.tablet = 768px */
@media (max-width: 767.98px) {

	/* Show the Section crumb (not Home, as on About Us) as the back link. */
	.aa-piece-crumbs .aa-breadcrumbs li:first-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.aa-piece-crumbs .aa-breadcrumbs li:nth-child(2) {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.aa-piece-crumbs .aa-breadcrumbs li:nth-child(2)::after {
		content: none;
	}

	.aa-piece-crumbs .aa-breadcrumbs li:nth-child(2) a::before {
		content: "";
		flex: none;
		inline-size: var(--wp--preset--spacing--24);
		block-size: var(--wp--preset--spacing--24);
		margin-inline-end: var(--wp--preset--spacing--4);
		background-color: var(--wp--custom--color--border--gold-subtle);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 7l-5 5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 7l-5 5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	}
}

/* ---------- Panel (cream, torn top edge) ---------- */
.aa-piece.is-style-torn-page-to-band {
	--aa-torn-color: var(--wp--custom--color--bg--nav);
	box-sizing: border-box;

	/* Phones: the image starts right under the torn edge (Figma). */
	padding: var(--wp--custom--torn-edge--page-to-band) 0 var(--wp--preset--spacing--48);
	background-color: var(--wp--custom--color--bg--panel);
	color: var(--wp--custom--color--text--on-light);
}

.aa-piece__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--32);
}

/* ---------- Gallery ---------- */
.aa-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	min-inline-size: 0;
}

/* Order everywhere: image, dots, thumbnails, "Click image to enlarge" (the reading and tab order). */
.aa-gallery > .aa-gallery__enlarge {
	align-self: center;
}

.aa-gallery__rail {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	min-inline-size: 0;
	padding-inline: var(--wp--preset--spacing--margin);
}

/* Phones: the image stage runs edge to edge, square (Figma 390 × 390). */
.aa-gallery__mat {
	position: relative;
	box-sizing: border-box;
	inline-size: 100%;
	aspect-ratio: 1;
	background-color: var(--wp--custom--color--bg--panel);
}

.aa-gallery__main {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	touch-action: pan-y;
}

.aa-gallery__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* Focus on the image link: ring inside the mat, so it isn't clipped at the screen edge. */
.aa-gallery__main:focus-visible {
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: inset var(--wp--preset--shadow--focus-ring-light);
}

/* Overlays: status badge (collection.css), counter chip, zoom. */
.aa-gallery__counter {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--16);
	inset-inline-start: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--12);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--bg--nav);
	color: var(--wp--custom--color--text--primary);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
	pointer-events: none;
}

.aa-gallery__zoom {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--16);
	inset-inline-end: var(--wp--preset--spacing--16);
	background-color: var(--wp--custom--color--bg--nav);
	color: var(--wp--custom--color--accent--gold-light);
}

.aa-gallery__zoom:hover {
	border-color: var(--wp--custom--color--accent--gold-hover);
	color: var(--wp--custom--color--accent--gold-hover);
}

/* Dots (phones): position only, never the only way to know where you are (counter chip). */
.aa-gallery__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	min-block-size: var(--wp--preset--spacing--24);
}

.aa-gallery__dot {
	inline-size: var(--wp--preset--spacing--8);
	block-size: var(--wp--preset--spacing--8);
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--text--on-light);
	border-radius: var(--wp--custom--radius--pill);
}

.aa-gallery__dot.is-active {
	background-color: var(--wp--custom--color--text--on-light);
}

/* "Click image to enlarge": Body/Small link, ink on cream, 44px target. */
.aa-gallery .aa-gallery__enlarge {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--tap-target--base);
	padding-inline: var(--wp--preset--spacing--8);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--custom--color--text--on-light);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
	text-decoration: none;
}

.aa-gallery .aa-gallery__enlarge:hover {
	color: var(--wp--custom--color--text--on-light);
	text-decoration: underline;
}

.aa-gallery .aa-gallery__enlarge:focus-visible {
	outline: var(--wp--custom--border-width--focus) solid transparent;
	background-color: var(--wp--custom--color--bg--panel);
	box-shadow: var(--wp--preset--shadow--focus-ring-light);
	color: var(--wp--custom--color--text--on-light);
	text-decoration: underline;
}

/* Thumbnails (Figma: Gallery thumbnail): bg/panel-deep; active = 2px gold border and a 4px gold bar. */
.aa-gallery__thumbs,
.aa-lightbox__thumbs {
	display: flex;
	gap: var(--wp--preset--spacing--12);
	margin: 0;
	padding: var(--wp--preset--spacing--4);
	list-style: none;
	overflow: auto;
	scrollbar-width: none;
}

.aa-gallery__thumbs > li,
.aa-lightbox__thumbs > li {
	flex: none;
	margin: 0;
}

.aa-gallery__thumb {
	position: relative;
	box-sizing: border-box;
	display: block;
	inline-size: var(--wp--custom--piece--thumb-mobile);
	block-size: var(--wp--custom--piece--thumb-mobile);
	padding: 0;
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold-subtle);
	background-color: var(--wp--custom--color--bg--panel-deep);
	cursor: pointer;
}

.aa-gallery__thumb img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.aa-gallery__thumb:hover {
	border-color: var(--wp--custom--color--text--on-light);
}

/* Active on cream: a 2px ink border (Figma's gold border is 1.91:1 on cream, under the 3:1 a state indicator
   needs; docs/deviations-from-figma.md #34) and Figma's gold bar. In the lightbox (dark) the border is gold. */
.aa-gallery__thumb[aria-current="true"] {
	border: var(--wp--custom--border-width--focus) solid var(--wp--custom--color--text--on-light);
}

.aa-lightbox .aa-gallery__thumb[aria-current="true"] {
	border-color: var(--wp--custom--color--accent--gold);
}

.aa-gallery__thumb[aria-current="true"]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--wp--custom--piece--active-bar);
	background-color: var(--wp--custom--color--accent--gold);
}

.aa-gallery__thumb:focus-visible {
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: var(--wp--preset--shadow--focus-ring-light);
}

/* Rail arrows: shown by the script only when the thumbnails overflow. */
.aa-gallery__rail-arrow {
	background-color: var(--wp--custom--color--bg--panel);
	color: var(--wp--custom--color--text--on-light);
}

.aa-gallery__rail-arrow:hover {
	border-color: var(--wp--custom--color--text--on-light);
}

.aa-gallery__rail-arrow:focus-visible {
	box-shadow: var(--wp--preset--shadow--focus-ring-light);
}

.aa-gallery__rail-arrow[hidden] {
	display: none;
}

/* ---------- Summary ---------- */
.aa-piece__summary {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	min-inline-size: 0;
	padding-inline: var(--wp--preset--spacing--margin);
}

/* H1: the piece title, Display, ink on cream. Wraps to as many lines as it needs. */
.aa-piece .aa-piece__title {
	color: var(--wp--custom--color--text--on-light);
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--wp--custom--line-height--display);
	overflow-wrap: anywhere;
}

/* Meta row: Body/Small, text/muted-on-light. The Section name shows from 1024px (Figma). */
.aa-piece__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	color: var(--wp--custom--color--text--muted-on-light);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
}

.aa-piece__section {
	display: none;
}

.aa-piece__meta .aa-status {
	position: static;
}

/* Price block (Figma: Price block): never colour alone; the struck price has a spoken qualifier. */
.aa-price {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.aa-price__line--was {
	color: var(--wp--custom--color--text--muted-on-light);
}

.aa-price__line--save em {
	font-style: italic;
}

/* Inquire (Figma: Inquiry CTA block): Filled, full width, 56px; the same for every status. */
.aa-piece .aa-inquire {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: var(--wp--custom--tap-target--xl);
	text-align: center;
}

.aa-piece .aa-inquire:focus-visible {
	box-shadow: var(--wp--preset--shadow--focus-ring-light);
}

/* Description: heading over a border/gold rule, then the text (Body). */
.aa-piece__description {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

.aa-piece .aa-piece__description-heading {
	padding-block-end: var(--wp--preset--spacing--12);
	border-block-end: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold);
	color: var(--wp--custom--color--text--on-light);
	font-size: var(--wp--preset--font-size--h-2);
	line-height: var(--wp--custom--line-height--h-2);
}

.aa-piece__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	overflow-wrap: anywhere;
}

.aa-piece__content a:where(:not(.wp-element-button)) {
	color: var(--wp--custom--color--text--on-light);
}

.aa-piece__content a:where(:not(.wp-element-button)):focus-visible {
	background-color: var(--wp--custom--color--bg--panel);
	box-shadow: var(--wp--preset--shadow--focus-ring-light);
	color: var(--wp--custom--color--text--on-light);
}

/* ---------- Related (Figma: Product/Related) ---------- */
.aa-related.is-style-torn-page-to-band {
	--aa-torn-color: var(--wp--custom--color--bg--panel);
	padding-block: var(--wp--preset--spacing--48);
	background-color: var(--wp--custom--color--bg--nav);
	color: var(--wp--custom--color--text--primary);
}

.aa-related__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

.aa-related__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
	padding-inline: var(--wp--preset--spacing--margin);
}

.aa-related .aa-related__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: var(--wp--custom--line-height--h-2);
}

.aa-related__controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
}

.aa-related__controls > * {
	margin: 0;
}

/* "View all {Section} →": Text link on dark, 44px target. */
.aa-related .aa-related__all {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	min-block-size: var(--wp--custom--tap-target--base);
	padding-inline: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--footer-link);
	line-height: var(--wp--custom--line-height--footer-link);
	text-decoration: none;
}

.aa-related .aa-related__all:hover {
	text-decoration: underline;
}

/* Phones: no arrows (Figma); the row scrolls by swipe. Without the script they stay hidden. */
.aa-related__arrow {
	display: none;
	background-color: transparent;
	color: var(--wp--custom--color--accent--gold-light);
}

.aa-related__arrow:hover {
	border-color: var(--wp--custom--color--accent--gold-hover);
	color: var(--wp--custom--color--accent--gold-hover);
}

.aa-related__arrow[aria-disabled="true"] {
	opacity: var(--wp--custom--opacity--disabled);
	cursor: not-allowed;
}

/* The row: scroll-snap, never autoplays; runs to the screen edge so the next card peeks in. */
.aa-related__track {
	display: flex;
	gap: var(--wp--preset--spacing--24);
	margin: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--margin);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wp--preset--spacing--margin);
	scrollbar-width: none;
}

.aa-related__track::-webkit-scrollbar {
	display: none;
}

.aa-related__item {
	display: flex;
	flex: none;
	inline-size: var(--wp--custom--piece--card-width-mobile);
	margin: 0;
	scroll-snap-align: start;
}

/* Keep a focused card in view, with its ring. */
.aa-related__item:focus-within {
	scroll-margin-inline: var(--wp--preset--spacing--margin);
}

@media (prefers-reduced-motion: no-preference) {

	.aa-related__track {
		scroll-behavior: smooth;
	}
}

/* ---------- Sticky inquiry bar (phones) ---------- */

/* Without the script it sits in the normal flow above the footer, so it can never cover anything. */
.aa-sticky-inquiry {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
	min-block-size: var(--wp--custom--piece--sticky-bar);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--margin);
	background-color: var(--wp--custom--color--bg--nav);

	/* Top rule drawn inside, so the bar stays 80px. */
	box-shadow: inset 0 var(--wp--custom--border-width--hairline) 0 var(--wp--custom--color--border--gold-subtle);
}

.aa-sticky-inquiry .aa-sticky-inquiry__button {
	box-sizing: border-box;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wp--custom--tap-target--xl);
	padding-inline: var(--wp--preset--spacing--12);
	text-align: center;
}

.aa-sticky-inquiry__call {
	inline-size: var(--wp--custom--tap-target--xl);
	block-size: var(--wp--custom--tap-target--xl);
	background-color: var(--wp--custom--color--bg--nav);
}

.aa-sticky-inquiry__call:hover {
	border-color: var(--wp--custom--color--accent--gold-hover);
}

/* Narrow phones: tighter padding so the label stays on one line (it needs 248px). Fits from 360px; at 320px
   it still wraps (docs/tech-debt.md). Figma's 390 layout is unchanged. */

/* custom.breakpoint.mobile = 390px */
@media (max-width: 389.98px) {

	.aa-sticky-inquiry {
		gap: var(--wp--preset--spacing--8);
		padding-inline: var(--wp--preset--spacing--16);
	}

	.aa-sticky-inquiry .aa-sticky-inquiry__button {
		padding-inline: var(--wp--preset--spacing--4);
	}
}

/* With the script: fixed to the bottom; the page keeps room for it (and focus never lands under it). */
.aa-has-sticky-inquiry {
	scroll-padding-block-end: var(--wp--custom--piece--sticky-bar);
}

/* The room for the bar goes at the very end of the page, under the footer (same colour), not between the
   related band and the footer. */
.aa-has-sticky-inquiry body {
	padding-block-end: var(--wp--custom--piece--sticky-bar);
}

.aa-has-sticky-inquiry .aa-sticky-inquiry {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 10;
}

.aa-sticky-inquiry.is-hidden {
	visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {

	.aa-has-sticky-inquiry .aa-sticky-inquiry {
		transition: transform 0.2s ease, visibility 0.2s;
	}

	.aa-has-sticky-inquiry .aa-sticky-inquiry.is-hidden {
		transform: translateY(100%);
	}
}

/* ---------- Lightbox (Figma: Lightbox; native <dialog>) ---------- */
dialog.aa-lightbox {
	box-sizing: border-box;
	position: fixed;
	inset: 0;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--margin) var(--wp--preset--spacing--24);
	border: 0;
	background-color: var(--wp--custom--color--bg--mat);
	color: var(--wp--custom--color--text--primary);
	overflow-y: auto;
}

dialog.aa-lightbox[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
}

dialog.aa-lightbox::backdrop {
	background-color: var(--wp--custom--color--bg--mat);
}

.aa-lightbox > * {
	margin: 0;
}

/* Close: cream fill, as the menu drawer's close button. */
.aa-lightbox__close {
	align-self: flex-end;
	background-color: var(--wp--custom--color--bg--panel);
	color: var(--wp--custom--color--border--gold-subtle);
}

.aa-lightbox__close:hover {
	border-color: var(--wp--custom--color--accent--gold-hover);
	color: var(--wp--custom--color--text--on-light);
}

/* Phones and tablets (derived): the image fills the width; prev/next sit over its edges. */
.aa-lightbox__stage {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 0;
	touch-action: pan-y;
}

.aa-lightbox__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
}

.aa-lightbox__image {
	display: block;
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

.aa-lightbox__prev,
.aa-lightbox__next {
	position: absolute;
	inset-block-start: 50%;
	z-index: 1;
	background-color: var(--wp--custom--color--bg--mat);
	color: var(--wp--custom--color--accent--gold-light);
	transform: translateY(-50%);
}

.aa-lightbox__prev {
	inset-inline-start: 0;
}

.aa-lightbox__next {
	inset-inline-end: 0;
}

.aa-lightbox__prev:hover,
.aa-lightbox__next:hover {
	border-color: var(--wp--custom--color--accent--gold-hover);
	color: var(--wp--custom--color--accent--gold-hover);
}

.aa-lightbox__prev:focus-visible,
.aa-lightbox__next:focus-visible {
	transform: translateY(-50%);
}

/* Caption bar: caption (with the Archival label) and "n / N". */
.aa-lightbox__bar {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	inline-size: 100%;
	max-inline-size: var(--wp--custom--piece--lightbox-bar);
	min-block-size: var(--wp--custom--tap-target--xl);
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold-subtle);
}

.aa-lightbox__bar > * {
	margin: 0;
}

.aa-lightbox__caption {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	overflow-wrap: anywhere;
}

.aa-lightbox__archival {
	display: block;
	color: var(--wp--custom--color--accent--gold-light);
	font-size: var(--wp--preset--font-size--body-small);
	font-style: italic;
	line-height: var(--wp--custom--line-height--body-small);
}

.aa-lightbox__archival[hidden] {
	display: none;
}

.aa-lightbox__count {
	flex: none;
	color: var(--wp--custom--color--text--muted);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
	font-variant-numeric: tabular-nums;
}

.aa-lightbox__thumbs {
	flex: none;
	max-inline-size: 100%;
}

.aa-lightbox .aa-gallery__thumb:focus-visible {
	box-shadow: var(--wp--preset--shadow--focus-ring);
}

/* Scroll lock while the lightbox is open (as the menu drawer). */
html:has(.aa-lightbox[open]) {
	overflow: hidden;
}

/* ---------- Tablet (Figma PDP-Tablet) ---------- */

/* custom.breakpoint.tablet = 768px */
@media (min-width: 768px) {

	/* Crumbs on the page colour, full trail, in the same box as the cream panel below, so the text starts
	   at the panel's left edge (the first link gives back its 4px focus/tap padding). */
	.aa-piece-crumbs {
		box-sizing: border-box;
		inline-size: calc(100% - 2 * var(--wp--preset--spacing--margin));
		max-inline-size: var(--wp--style--global--content-size);
		margin-inline: auto;
		padding: var(--wp--preset--spacing--8) 0;
		background-color: transparent;
	}

	.aa-piece-crumbs .aa-breadcrumbs li:first-child a {
		margin-inline-start: calc(-1 * var(--wp--preset--spacing--4));
	}

	.aa-piece-crumbs .aa-breadcrumbs li:last-child {
		color: var(--wp--custom--color--text--primary);
	}

	/* The cream panel sits inside the page margins; its torn top shows the page colour. */
	.aa-piece.is-style-torn-page-to-band {
		--aa-torn-color: var(--wp--custom--color--bg--page);
		box-sizing: border-box;
		inline-size: calc(100% - 2 * var(--wp--preset--spacing--margin));
		max-inline-size: var(--wp--style--global--content-size);
		margin-inline: auto;
		padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24) var(--wp--preset--spacing--48);
	}

	.aa-gallery__rail,
	.aa-piece__summary {
		padding-inline: 0;
	}

	/* The image on a brown mat, inset as in Figma. */
	.aa-gallery__mat {
		padding: var(--wp--custom--piece--mat-inset);
		background-color: var(--wp--custom--color--bg--panel-deep);
		box-shadow: var(--wp--preset--shadow--soft);
	}

	.aa-gallery__main:focus-visible {
		box-shadow: var(--wp--preset--shadow--focus-ring-light);
	}

	.aa-gallery__dots {
		display: none;
	}

	.aa-gallery__thumb {
		inline-size: var(--wp--custom--piece--thumb);
		block-size: var(--wp--custom--piece--thumb);
	}

	.aa-related.is-style-torn-page-to-band {
		--aa-torn-color: var(--wp--custom--color--bg--page);
	}

	.aa-related__item {
		inline-size: var(--wp--custom--piece--card-width-tablet);
	}

	.aa-related__arrow:not([hidden]) {
		display: inline-grid;
	}

	/* No sticky bar from 768px: the Inquire button is in the summary. */
	.aa-sticky-inquiry {
		display: none;
	}

	.aa-has-sticky-inquiry {
		scroll-padding-block-end: 0;
	}

	.aa-has-sticky-inquiry body {
		padding-block-end: 0;
	}

	/* Tablets and up: the arrows sit beside the image, 32 from it (Figma). */
	.aa-lightbox__stage {
		padding-inline: calc(var(--wp--custom--tap-target--base) + var(--wp--preset--spacing--32));
	}

	.aa-lightbox__thumbs .aa-gallery__thumb {
		inline-size: var(--wp--custom--piece--thumb);
		block-size: var(--wp--custom--piece--thumb);
	}
}

/* ---------- Desktop (Figma PDP-Desktop, Product-Lightbox-Desktop) ---------- */

/* custom.breakpoint.nav = 1024px */
@media (min-width: 1024px) {

	.aa-piece.is-style-torn-page-to-band {
		padding-block-start: var(--wp--preset--spacing--32);
	}

	/* Gallery (660) beside the summary (468), 24 apart. */
	.aa-piece__columns {
		grid-template-columns: var(--wp--custom--piece--columns);
		align-items: start;
		gap: var(--wp--preset--spacing--24);
	}

	/* Gallery: the thumbnail rail on the left, the image and "Click image to enlarge" on the right. */
	.aa-gallery.has-many {
		display: grid;
		grid-template-columns: var(--wp--custom--piece--thumb) minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: var(--wp--preset--spacing--16);
	}

	.aa-gallery.has-many > .aa-gallery__mat {
		grid-column: 2;
		grid-row: 1;
	}

	.aa-gallery.has-many > .aa-gallery__enlarge {
		grid-column: 2;
		grid-row: 2;
		justify-self: center;
	}

	/* The rail is only as tall as the image; beyond that it scrolls (arrows). */
	.aa-gallery__rail {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		block-size: 0;
		min-block-size: 100%;
		overflow: hidden;
	}

	.aa-gallery__thumbs {
		flex-direction: column;
		flex: 1;
		min-block-size: 0;
		padding: var(--wp--preset--spacing--4) 0;
	}

	.aa-gallery__rail .aa-gallery__thumb[aria-current="true"]::after {
		inset-block: 0;
		inset-inline: 0 auto;
		inline-size: var(--wp--custom--piece--active-bar);
		block-size: auto;
	}

	.aa-piece__section {
		display: inline;
	}

	.aa-price__line--save {
		font-size: var(--wp--preset--font-size--caption);
		line-height: var(--wp--custom--line-height--caption);
	}

	.aa-related.is-style-torn-page-to-band {
		--aa-torn-color: var(--wp--custom--color--bg--panel);
		padding-block-start: var(--wp--preset--spacing--64);
	}

	/* The cream panel's torn bottom edge: as wide as the panel. */
	.aa-related.is-style-torn-page-to-band::before {
		inline-size: min(var(--wp--style--global--content-size), 100% - 2 * var(--wp--preset--spacing--margin));
		margin-inline: auto;
	}

	/* Header and the first card line up with the panel; the row runs on to the screen edge. */
	.aa-related__header {
		box-sizing: border-box;
		inline-size: min(var(--wp--style--global--content-size), 100% - 2 * var(--wp--preset--spacing--margin));
		margin-inline: auto;
		padding-inline: 0;
	}

	.aa-related__track {
		--aa-related-edge: max(var(--wp--preset--spacing--margin), (100% - var(--wp--style--global--content-size)) / 2);
		padding-inline: var(--aa-related-edge);
		scroll-padding-inline: var(--aa-related-edge);
	}

	.aa-related__item {
		inline-size: var(--wp--custom--piece--card-width);
	}

}

@media (forced-colors: active) {

	.aa-gallery__thumb[aria-current="true"]::after,
	.aa-gallery__dot.is-active {
		background-color: Highlight;
	}

	.aa-piece-crumbs .aa-breadcrumbs li:nth-child(2) a::before {
		background-color: LinkText;
	}
}

/* No root block gap around the main area (as the other templates). */
.wp-site-blocks > .aa-piece-page,
.wp-site-blocks > .aa-piece-page + * {
	margin-block-start: 0;
}

/* RD3: don't let rapid lightbox arrow clicks select the image/text */
.aa-lightbox__stage,
.aa-lightbox__figure,
.aa-lightbox__image {
	-webkit-user-select: none;
	user-select: none;
}