/* Single product (boards product-v1 / product-v1-mobile). Measured values: docs/SESSION-19-NOTES.md. */

/* ---------- Hero: gallery + buy box. One column to 1023 (board order), two from 1024 (7 + 5 columns) ---------- */
.pd-hero { padding: 32px 0 48px; }
.pd-grid {
	display: grid; row-gap: 24px;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "crumb" "title" "media" "price" "buy" "stock" "desc" "facts";
}
.pd-crumb { grid-area: crumb; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.pd-title { grid-area: title; display: grid; gap: 10px; }
.pg { grid-area: media; }
.pd-price { grid-area: price; }
.pd-desc { grid-area: desc; }
.pd-facts { grid-area: facts; }
.pd-buy { grid-area: buy; }
.pd-stock { grid-area: stock; }
.pd-buy:empty { display: none; }

.pd-crumb, .pd-crumb a {
	font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0.08px; text-transform: uppercase;
	color: var(--sage-deep); text-decoration: none;
}
.pd-crumb a { padding-block: 12px; margin-block: -12px; }
.pd-crumb a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pd-h1 { font-size: 44px; font-weight: 200; line-height: 1.05; }
.pd-price { font-family: var(--font-mono); font-weight: 300; letter-spacing: -0.02em; font-size: 34px; line-height: 1.2; }
.pd-price del { color: var(--quiet); font-size: 0.6em; }
.pd-price ins { text-decoration: none; }
.pd-desc { font-family: var(--font-sans); font-weight: 300; font-size: 13px; line-height: 1.7; }
.pd-desc p + p { margin-top: 1em; }

/* Gallery: main image, thumbnails; the selected thumbnail carries the 1.5 px --sage line (DESIGN.md 8). */
.pg { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 12px; }
.pg-main { width: 100%; aspect-ratio: 335 / 280; }
.pg-main.is-photo img, .pg-thumb.is-photo img { object-fit: cover; }
.pg-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-thumb { position: relative; width: 72px; height: 72px; }
.pg-thumb.is-art { background: #EFE3D3; }
.pg-thumb[aria-current]::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1.5px var(--sage); }
.pg-note { flex: 1; min-width: 120px; font-size: 12px; font-weight: 300; line-height: 1.5; letter-spacing: 0.08px; color: var(--quiet); }

/* Facts: a ruled box, label left, value right. */
.pd-facts { box-shadow: inset 0 0 0 1px var(--line); }
.pd-fact { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; }
.pd-fact + .pd-fact { border-top: 1px solid var(--line); } /* the board's 1 px divider sits between the 43 px rows */
.pd-fact dt { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 16px; text-transform: uppercase; color: var(--sage-deep); }
.pd-fact dd { font-size: 13px; line-height: 19px; text-align: right; }
.pd-fact--designed { display: none; } /* the mobile board leaves it to Specifications */

/* Buy row: quantity stepper + add to cart. */
.pd-buy form.cart { display: flex; gap: 12px; }
.pd-buy .single_add_to_cart_button { flex: 1; }
.pd-buy .qty-box { min-height: 52px; } /* the stepper itself: main.css */

.pd-stock { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 19px; color: var(--quiet); }
.pd-stock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.pd-stock.is-outofstock .pd-stock-dot { background: var(--error); }

/* ---------- What is on the sheet ---------- */
.pd-sheet { background: var(--ground-alt); }
.pd-sheet .label-row { margin-bottom: 20px; }
.pd-sheet-h2 { margin-bottom: var(--head-gap); }
.pd-art { margin-bottom: var(--media-gap); background: #FFF; }
.pd-art img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pd-sheet-body { display: grid; gap: 24px; }
.pd-text { font-family: var(--font-sans); font-weight: 300; font-size: 13px; line-height: 1.7; }
.pd-text p + p { margin-top: 24px; }
.pd-width { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.pd-width-val { font-size: 26px; font-weight: 200; line-height: 1.2; }
.pd-width-lbl, .pd-spec dt { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; color: var(--sage-deep); }

/* ---------- Specifications ---------- */
.pd-specs .label-row { margin-bottom: var(--head-gap); }
.pd-spec-grid { display: grid; gap: 28px; }
.pd-spec { display: grid; gap: 8px; padding-bottom: 16px; box-shadow: inset 0 -1px 0 var(--line); }
.pd-spec dt { line-height: 16px; }
.pd-spec dd { font-size: 16px; line-height: 1.5; }

/* ---------- Application: the homepage's steps (main.css) ---------- */
.pd-apply { background: var(--ground-alt); }

/* ---------- Related sheets: the shop card ---------- */
.rel-grid { margin-top: 0; }
.rel-grid .card:nth-child(n + 3) { display: none; } /* two on mobile */
.pd-rel-link {
	/* 44 px hit area: 12 px padding, pulled back out of the spacing. */
	display: inline-flex; gap: 10px; margin: calc(var(--group-gap) - 12px) 0 -12px; padding-block: 12px;
	font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--sage-deep); text-decoration: none;
}
.pd-rel-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- From 768: steps in three columns, related three across ---------- */
@media (min-width: 768px) {
	.rel-grid .card:nth-child(n + 3) { display: grid; }
	.rel-grid .card-img { aspect-ratio: 416 / 260; }
}

/* ---------- Desktop from 1024 ---------- */
/* ---------- Tablet from 768: the hero in two columns, 6 + 6, so the image never runs 900 px wide ---------- */
@media (min-width: 768px) {
	.pd-hero { padding: 56px 0 72px; }
	.pd-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap);
		grid-template-rows: repeat(7, auto) 1fr;
		grid-template-areas: "media crumb" "media title" "media price" "media desc" "media facts" "media buy" "media stock" "media .";
	}
	.pg { grid-row: 1 / -1; align-self: start; align-items: flex-start; gap: 16px; }
	.pd-grid::before { display: block; grid-column: 2; grid-row: 1 / -1; } /* the rule: gallery | buy box (main.css) */
	.pg-main { aspect-ratio: 758 / 560; }
	.pg-thumbs { gap: 16px; }
	.pd-crumb, .pd-crumb a { font-size: 11px; }
	.pd-fact { padding: 12px 16px; }
	.pd-fact--designed { display: flex; }
}

/* ---------- Desktop from 1024: the board's 7 + 5 ---------- */
@media (min-width: 1024px) {
	.pd-grid { grid-template-columns: minmax(0, 758fr) minmax(0, 530fr); }
	.pg-thumb { width: 104px; height: 104px; }
	.pg-note { flex: 0 1 auto; margin-left: auto; font-size: 11px; line-height: 1.45; text-align: right; }
	.pd-buy form.cart { gap: 16px; }
	.pd-buy .qty-btn { width: 36px; }

	.pd-sheet .label-row { margin-bottom: var(--head-gap); }
	.pd-sheet-grid {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap);
		grid-template-rows: auto 1fr; grid-template-areas: "art h2" "art body";
	}
	.pd-sheet-grid.no-art { grid-template-areas: "h2 h2" "body body"; }
	.pd-sheet-h2 { grid-area: h2; margin-bottom: 24px; }
	.pd-art { grid-area: art; margin-bottom: 0; align-self: start; }
	.pd-sheet-body { grid-area: body; align-content: start; }
	.pd-width { flex-direction: row; align-items: center; gap: 12px; margin-top: 20px; }

	.pd-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}