.pdp { max-width: var(--max); margin: 0 auto; }

.pdp__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--gutter); }
.pdp__adjacent { display: flex; gap: 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.145em; text-transform: uppercase; color: var(--stone); }
.pdp__adjacent a { display: inline-flex; align-items: center; gap: 6px; }
.pdp__adjacent .icon { width: 12px; height: 12px; }

.pdp__main { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: start; padding: 0 var(--gutter); }
.pdp__info { position: sticky; top: calc(var(--admin-bar) + var(--header-h) + 24px); display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }

/* Gallery */
.pdp-gallery { position: relative; }
.pdp-gallery__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pdp-gallery__item { aspect-ratio: 4 / 5; cursor: zoom-in; }

.pdp-gallery__zoom {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: rgb(252 251 248 / 0.9);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pdp-gallery__zoom .icon { width: 12px; height: 12px; }
.pdp-gallery__dots, .pdp-gallery__thumbs, .pdp-gallery__wish { display: none; }

.lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--paper);
	overscroll-behavior: contain;
}

.lightbox, .lightbox::backdrop {
	transition: opacity var(--dur-panel-exit) ease, display var(--dur-panel-exit) allow-discrete, overlay var(--dur-panel-exit) allow-discrete;
	opacity: 0;
}

.lightbox[open], .lightbox[open]::backdrop { opacity: 1; transition-duration: 300ms; }

@starting-style {
	.lightbox[open], .lightbox[open]::backdrop { opacity: 0; }
}

.lightbox::backdrop { background: var(--paper); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; }

.lightbox__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: calc(16px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 16px max(24px, env(safe-area-inset-left, 0px));
}
.lightbox__count { font-size: 12px; font-weight: 500; letter-spacing: 0.117em; text-transform: uppercase; color: var(--stone); font-variant-numeric: tabular-nums; }
.lightbox__count span { color: var(--ink); }
.lightbox__name { overflow: hidden; font-size: 14px; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.lightbox__close { display: inline-flex; align-items: center; justify-self: end; gap: 10px; min-height: 44px; font-size: 18px; }

.lightbox__stage { position: relative; min-height: 0; }
.lightbox__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overscroll-behavior: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__slide { display: flex; flex: 0 0 100%; align-items: center; justify-content: center; height: 100%; padding: 0 96px; scroll-snap-align: center; }
.lightbox__slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: var(--bone); }

/* Product photos are 2:3, so the photo is two thirds of the stage height wide; the arrows sit a fixed gap outside it. */
.lightbox__stage { --photo-half: calc(100cqh / 3); --arrow-gap: 40px; container-type: size; }
.lightbox__nav { position: absolute; top: 0; bottom: 0; width: 50%; cursor: pointer; }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--next { right: 0; }
.lightbox__arrow {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--ink);
	transform: translateY(-50%);
	transition: transform var(--dur-fast) var(--ease-out);
}
.lightbox__nav--prev .lightbox__arrow { right: min(calc(100% - 72px), calc(var(--photo-half) + var(--arrow-gap))); }
.lightbox__nav--next .lightbox__arrow { left: min(calc(100% - 72px), calc(var(--photo-half) + var(--arrow-gap))); }
.lightbox__arrow .icon { width: 40px; height: 40px; }
.lightbox__nav:focus-visible { outline: none; }
.lightbox__nav:focus-visible .lightbox__arrow { outline: 2px solid var(--ink); outline-offset: 2px; }

.lightbox__thumbs { display: flex; justify-content: safe center; gap: 8px; overflow-x: auto; padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0px)); scrollbar-width: none; }
.lightbox__thumb { flex: none; width: 48px; aspect-ratio: 4 / 5; opacity: 0.5; transition: opacity var(--dur-fast) ease; }
.lightbox__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink); }

@media (hover: hover) and (pointer: fine) {
	.lightbox__nav--prev:hover .lightbox__arrow { transform: translate(-4px, -50%); }
	.lightbox__nav--next:hover .lightbox__arrow { transform: translate(4px, -50%); }
	.lightbox__thumb:hover { opacity: 1; }
}

@media (hover: none) {
	.lightbox__nav { display: none; }
	.lightbox__slide { padding: 0; }
}

@media (max-width: 720px) {
	.lightbox__bar { grid-template-columns: auto 1fr; padding-inline: 20px; }
	.lightbox__name { display: none; }
	.lightbox__slide { padding: 0; }
	.lightbox__nav { display: none; }
}

/* Heading */
.pdp-head { display: flex; flex-direction: column; gap: 14px; }
.pdp-head__name { font-size: clamp(30px, 3.1vw, 44px); font-weight: 400; letter-spacing: -0.034em; line-height: 1; }
.pdp-head__pricing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 6px; }
.pdp-head__price { font-size: 18px; }
.pdp-head__choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 8px;
	background: var(--olive);
	color: var(--bone);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	animation: choice-in 220ms var(--ease-out);
}
.pdp-head__choice[hidden] { display: none; }
.pdp-head__choice-icon { width: 14px; height: 14px; flex-shrink: 0; }
@keyframes choice-in { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .pdp-head__choice { animation: none; } }
.pdp-head__price del { margin-right: 8px; color: var(--stone); }
.pdp-head__price ins { text-decoration: none; color: var(--clay); }

/* Options */
.pdp-buy { display: flex; flex-direction: column; gap: 28px; }

.pdp-option { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pdp-option:first-of-type { padding-top: 28px; border-top: 1px solid var(--line); }

.pdp-option__head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.117em; text-transform: uppercase; }
.pdp-option__key { color: var(--stone); }
.pdp-option__guide { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; letter-spacing: inherit; text-transform: inherit; }
.pdp-option__guide .icon { width: 14px; height: 14px; }

.pdp-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-swatch { position: relative; display: block; width: 44px; height: 44px; padding: 4px; border: 1px solid var(--line); transition: border-color var(--dur-fast) ease; }
.pdp-swatch > span { display: block; height: 100%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); }
.pdp-swatch--fixed, .pdp-swatch:has(input:checked) { border-color: var(--ink); }
.pdp-swatch:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 3px; }

.pdp-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 8px; }
.pdp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-chips .pdp-chip > span { gap: 10px; padding: 0 16px; }
.pdp-chip .print-chip { width: 14px; height: 14px; }

.pdp-chip, .pdp-swatch { position: relative; }
.pdp-chip input, .pdp-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }

.pdp-chip > span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border: 1px solid var(--sand);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}

.pdp-chip:active > span { transform: scale(0.95); }

@media (hover: hover) and (pointer: fine) {
	.pdp__adjacent a:hover { color: var(--ink); }
	.pdp-option__guide:hover { text-decoration: underline; text-underline-offset: 3px; }
	.pdp-chip:hover > span, .pdp-swatch:hover { border-color: var(--ink); }
}
.pdp-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.pdp-chip input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
.pdp-chip input:disabled { cursor: not-allowed; }

/* Sold out everywhere, or not made with the other choices so far (still pickable: picking it switches or clears the clash). */
.pdp-chip input:disabled + span, .pdp-chip.is-unavailable input:not(:checked) + span {
	border-color: var(--line);
	color: var(--sand);
	background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line) 50%, transparent calc(50% + 0.5px));
}
.pdp-chip.is-unavailable .print-chip, .pdp-swatch.is-unavailable:not(:has(input:checked)) > span { opacity: 0.35; }

.pdp-chip[data-reason]::after, .pdp-swatch[data-reason]::after {
	content: attr(data-reason);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 2;
	padding: 6px 10px;
	background: var(--ink);
	color: var(--bone);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity 150ms ease, transform 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.pdp-chip[data-reason]:hover::after, .pdp-swatch[data-reason]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 150ms; }
}
.pdp-chip[data-reason]:has(:focus-visible)::after, .pdp-swatch[data-reason]:has(:focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }

.pdp-buy__error { font-size: 12px; font-weight: 500; color: var(--clay); }
.pdp-buy__note { font-size: 12px; color: var(--earth); }
.pdp-buy__stock { font-size: 12px; color: var(--earth); }

/* Actions */
.pdp-buy__actions { display: flex; gap: 8px; }
.pdp-buy__add { flex: 1; justify-content: flex-start; }
.pdp-buy__add-price { display: none; color: var(--sand); }
.pdp-buy__add-arrow { margin-left: auto; }
.pdp-buy__add.is-added, .pdp-buy__add.is-added:hover { background: var(--olive); border-color: var(--olive); }

.pdp-buy__wish {
	justify-content: center;
	align-items: center;
	flex: none;
	width: var(--btn-h-lg);
	height: var(--btn-h-lg);
	margin: 0;
	border: 1px solid var(--ink);
}

.pdp-buy__delivery { display: flex; align-items: center; gap: 10px; margin-top: -14px; font-size: 12px; color: var(--olive); }
.pdp-buy__delivery .icon { width: 15px; height: 15px; }

/* Details */
.pdp-details__item { border-top: 1px solid var(--line); }
.pdp-details__item[open] { border-top-color: var(--ink); }
.pdp-details__item:last-child { border-bottom: 1px solid var(--line); }

.pdp-details__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.117em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.pdp-details__item summary::-webkit-details-marker { display: none; }
.pdp-details__item summary .icon { width: 14px; height: 14px; }
.pdp-details__minus, .pdp-details__item[open] .pdp-details__plus { display: none; }
.pdp-details__item[open] .pdp-details__minus { display: block; }

.pdp-details__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 24px; font-size: 14px; line-height: 1.57; color: var(--body-text); }
.pdp-details__list { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.pdp-details__list li { position: relative; padding-left: 20px; }
/* A small lozenge, after the diamond shapes in wax prints and uli drawing. */
.pdp-details__list li::before {
	content: "";
	position: absolute;
	top: calc(0.785em - 3.5px);
	left: 2px;
	width: 7px;
	height: 7px;
	border: 1px solid var(--earth);
	background: linear-gradient(var(--earth), var(--earth)) center / 3px 3px no-repeat;
	transform: rotate(45deg);
}
.pdp-details__maker { display: flex; align-items: center; gap: 10px; padding-top: 4px; font-size: 12px; color: var(--stone); }
.mark--tiny { --mark-h: 7.4px; --mark-gap: 4.7px; color: var(--stone); }

/* Complete the look */
.pdp-look { display: flex; flex-direction: column; gap: 40px; padding: 128px var(--gutter); }
.pdp-look__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pdp-look__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* Size guide */
.drawer--wide { width: min(560px, 100%); }
.size-guide__body { display: flex; flex-direction: column; gap: 28px; padding: 28px 40px calc(40px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.size-guide__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.size-guide__units { display: flex; border: 1px solid var(--sand); }
.size-guide__units button { padding: 8px 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--stone); }
.size-guide__units button[aria-pressed="true"] { background: var(--ink); color: var(--bone); }

.size-guide__note { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; padding: 20px; background: var(--bone); font-size: 13px; line-height: 1.46; color: var(--body-text); }
.size-guide__note-title { font-size: 14px; font-weight: 500; color: var(--ink); }

.size-guide__table { width: 100%; margin-bottom: 14px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.size-guide__table th, .size-guide__table td { padding: 13px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.size-guide__table thead th { font-size: 11px; font-weight: 500; letter-spacing: 0.127em; text-transform: uppercase; color: var(--stone); border-bottom-color: var(--ink); }
.size-guide__table tbody th { font-weight: 500; }
.size-guide__table tr.is-chosen { background: var(--bone); }

.size-guide__measure { display: grid; gap: 8px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--body-text); }
.size-guide__measure dt { padding-top: 12px; font-weight: 500; color: var(--ink); }
.size-guide__measure dd { margin: 0; }

.size-guide__help { display: flex; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.size-guide__help > .icon { width: 28px; height: 28px; }
.size-guide__help > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.size-guide__help-title { font-size: 14px; font-weight: 500; }

@media (max-width: 1100px) {
	.pdp__main { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
	.pdp-look__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pdp-look__grid > :nth-child(n + 4) { display: none; }
}

@media (max-width: 900px) {
	.pdp__bar { padding-block: 14px; }
	.pdp__adjacent { display: none; }
	.pdp__main { grid-template-columns: 1fr; gap: 0; padding: 0; }
	.pdp__info { position: static; gap: 24px; padding: 24px var(--gutter) 0; }

	.pdp-gallery__track {
		display: flex;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.pdp-gallery__track::-webkit-scrollbar { display: none; }
	.pdp-gallery__item { flex: 0 0 100%; scroll-snap-align: start; cursor: pointer; }
	.pdp-gallery__zoom { display: none; }

	.pdp-gallery__dots { position: absolute; left: 0; right: 0; top: calc(100vw * 1.25 - 24px); display: flex; justify-content: center; gap: 6px; pointer-events: none; }
	.pdp-gallery__dots { gap: 0; }
	.pdp-gallery__dots span { width: 24px; height: 2px; background: rgb(17 16 15 / 0.25); transform: scaleX(0.5); transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease; }
	.pdp-gallery__dots span.is-active { background: var(--ink); transform: none; }

	.pdp-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; padding-top: 6px; }
	.pdp-gallery__thumbs button { aspect-ratio: 4 / 5; border: 1px solid transparent; }
	.pdp-gallery__thumbs button[aria-current="true"] { border-color: var(--ink); }

	.pdp-gallery__wish { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgb(252 251 248 / 0.9); }

	.pdp-sizes { grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap: 6px; }
	.pdp-head__name { font-size: 30px; }
	.pdp-head__price { font-size: 16px; }
	.pdp-head__pricing { padding-top: 0; }

	.pdp-buy__actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
		background: rgb(246 243 238 / 0.95);
		backdrop-filter: blur(6px);
		border-top: 1px solid var(--line);
	}

	.pdp-buy__add-price { display: inline; }
	.pdp-buy__wish { display: none; }
	.pdp-buy__delivery { margin-top: 0; }
	.single-product .site-footer { padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom)); }

	.pdp-look { gap: 20px; padding: 56px 0 40px; }
	.pdp-look__head { padding: 0 var(--gutter); }
	.pdp-look__head .link-arrow { display: none; }

	.pdp-look__grid {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 46%;
		gap: 8px;
		overflow-x: auto;
		padding: 0 var(--gutter);
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.pdp-look__grid > * { scroll-snap-align: start; }
	.pdp-look__grid > :nth-child(n + 4) { display: block; }

	.size-guide__body { padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }
	.size-guide__table th, .size-guide__table td { padding: 12px 8px; }
}