:root {
	--canvas: #f8f8f5;
	--ink: #232522;
	--heading: #3f4642;
	--muted: #626760;
	--line: #c8cbc5;
	--plum: #4e3450;
	--olive: #646144;
	--ochre: #c79528;
	--page-pad: clamp(1rem, 4vw, 4.5rem);
}

body { background: var(--canvas); color: var(--ink); font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.55; }

.site-header, footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.1rem var(--page-pad);
	background: var(--plum);
	color: #fff;
}

.site-header nav, footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem 1.5rem; font-size: 0.78rem; }
.site-header a, footer a { display: inline-flex; min-height: 2.75rem; align-items: center; color: #fff; text-underline-offset: 0.35rem; }
.site-header a:hover, .site-header a:focus-visible, .site-header a[aria-current="page"], footer a:hover, footer a:focus-visible { text-decoration: underline; }
.site-header a:focus-visible, footer a:focus-visible { outline: 2px solid #fff; }
.project-mark { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.project-mark span { display: block; width: 1.6rem; height: 1px; background: #fff; }

.breadcrumb {
	display: flex;
	gap: 0.65rem;
	padding: clamp(1.5rem, 3vw, 2.5rem) var(--page-pad) 0;
	color: var(--muted);
	font-size: 0.72rem;
}

.breadcrumb a { text-underline-offset: 0.25rem; }

.product-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(18rem, 0.65fr);
	align-items: start;
	gap: clamp(2.5rem, 5vw, 6rem);
	padding: clamp(2rem, 4vw, 4rem) var(--page-pad) clamp(4.5rem, 8vw, 8rem);
}

.product-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.36fr);
	align-items: start;
	gap: clamp(0.65rem, 1.25vw, 1.25rem);
}

.image-frame {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #dad8d2;
}

.image-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.78) contrast(0.98) sepia(0.05);
	transition: transform 500ms ease;
}

.image-frame:hover img,
.image-frame:focus-visible img { transform: scale(1.018); }

.gallery-main > span {
	position: absolute;
	right: 0.8rem;
	bottom: 0.8rem;
	padding: 0.45rem 0.65rem;
	background: rgb(248 248 245 / 0.88);
	font-size: 0.68rem;
	font-weight: 700;
}

.gallery-thumbnails { display: grid; gap: clamp(0.65rem, 1.25vw, 1.25rem); }
.product-gallery:has(> .gallery-main:only-child) { grid-template-columns: minmax(0, 1fr); }
.detail-one img { object-position: 43% 72%; transform: scale(1.42); }
.detail-two img { object-position: 70% 70%; transform: scale(1.58); }
.detail-one:hover img, .detail-one:focus-visible img { transform: scale(1.46); }
.detail-two:hover img, .detail-two:focus-visible img { transform: scale(1.62); }

.product-summary {
	position: sticky;
	top: 2rem;
	padding-top: clamp(0.25rem, 1vw, 1rem);
}

.eyebrow {
	margin: 0 0 1.2rem;
	color: var(--olive);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.055em;
	line-height: 1.4;
}

.product-summary h1 {
	margin: 0;
	color: var(--heading);
	font-size: clamp(3.25rem, 4.5vw, 5.2rem);
	font-weight: 400;
	letter-spacing: -0.065em;
	line-height: 0.92;
}

.price { margin: 1.5rem 0 0; font-size: 1.12rem; font-weight: 600; }
.stock { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0; color: var(--muted); font-size: 0.75rem; }
.stock span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--olive); }
.short-description { max-width: 30rem; margin: 2rem 0; }

.cart { margin: 0 0 2rem; }
.cart button {
	width: 100%;
	min-height: 3.35rem;
	padding: 0.9rem 1.25rem;
	border: 1px solid var(--plum);
	border-radius: 0;
	background: var(--plum);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease;
}
.cart button:hover, .cart button:focus-visible { background: transparent; color: var(--plum); }

.product-notes { border-top: 1px solid var(--line); }
.product-notes details { border-bottom: 1px solid var(--line); }
.product-notes summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.product-notes summary::-webkit-details-marker { display: none; }
.product-notes summary::after { content: "+"; font-size: 1.15rem; font-weight: 400; }
.product-notes details[open] summary::after { content: "−"; }
.product-notes details > *:not(summary) { margin: 0 0 1rem; color: var(--muted); font-size: 0.78rem; }
.product-notes details a { display: inline-flex; color: var(--ink); font-weight: 700; text-underline-offset: 0.25rem; }

.back-link {
	display: inline-flex;
	gap: 0.65rem;
	margin: 0 var(--page-pad) clamp(4.5rem, 8vw, 8rem);
	padding-bottom: 0.25rem;
	border-bottom: 1px solid currentColor;
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none;
}
.back-link:hover, .back-link:focus-visible { color: var(--plum); }

footer { min-height: 8rem; font-size: 0.78rem; }
footer p { margin: 0; font-weight: 700; }

@media (max-width: 980px) {
	.product-layout { grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr); gap: clamp(2rem, 4vw, 3.5rem); }
	.product-gallery { display: block; }
	.gallery-thumbnails { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.75rem; }
	.gallery-thumbnails:has(> :only-child) { width: calc(50% - 0.375rem); grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.product-layout { display: block; }
	.product-summary { position: static; padding-top: 3.5rem; }
	.product-summary h1 { font-size: clamp(3.25rem, 11vw, 4.6rem); }
	.cart button { width: min(100%, 30rem); }
}

@media (max-width: 620px) {
	.site-header { align-items: flex-start; flex-direction: column; gap: 0.8rem; }
	.site-header nav { justify-content: flex-start; }
	.product-layout { padding-top: 1.5rem; }
	.breadcrumb { padding-top: 1.25rem; }
	.gallery-thumbnails { gap: 0.5rem; margin-top: 0.5rem; }
	.product-summary { padding-top: 3rem; }
	footer { align-items: flex-start; flex-direction: column; gap: 0.75rem; }
	footer nav { justify-content: flex-start; }
}