/* Product page (product.html). Builds on index.css: same tokens, header, footer, cards and FAQ styles. */

.product-page {
	padding: 26px 6.5% 0;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 22px;
	padding: 0;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	list-style: none;
}

.breadcrumb li + li::before {
	margin-right: 6px;
	color: var(--orange);
	content: "/";
}

.breadcrumb a {
	color: var(--brand-text);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.breadcrumb [aria-current] {
	color: var(--ink);
}

/* ---------- Hero: gallery + summary ---------- */

.product-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(24px, 4vw, 56px);
}

.product-gallery {
	min-width: 0;
	position: sticky;
	top: 20px;
}

.gallery-stage {
	border: 1px solid var(--line);
}

.gallery-stage .gallery-button {
	width: 48px;
	height: 48px;
}

.gallery-stage .art-size {
	font-size: 12px;
}

.gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.gallery-thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	display: block;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--forest-light);
	cursor: pointer;
	opacity: .7;
	transition: opacity .18s ease, border-color .18s ease;
}

.gallery-thumb:hover,
.gallery-thumb[aria-current] {
	opacity: 1;
}

.gallery-thumb[aria-current] {
	border-color: var(--orange);
}

.gallery-thumb img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.gallery-caption {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
}

.product-summary {
	min-width: 0;
	padding: 30px;
	border: 1px solid var(--line);
	background: var(--surface);
}

.product-summary .eyebrow {
	margin-bottom: 10px;
}

.product-summary h1 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 600;
	line-height: 1.04;
}

.product-summary h1:focus {
	outline: none;
}

.product-lede {
	margin: 14px 0 22px;
	color: var(--soft-text);
	font-size: 14px;
	line-height: 1.7;
}

.option-group {
	padding: 14px 0;
	border-top: 1px solid var(--line);
}

.option-label {
	margin: 0 0 9px;
	color: var(--ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.option-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Chips reuse the catalog's size tabs; size chips are links, so they need the button look too */
.option-chips .size-tab {
	min-width: 64px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	font-size: 13px;
	text-decoration: none;
}

.size-tab[aria-current="page"] {
	border-color: var(--forest);
	color: var(--white);
	background: var(--forest);
}

:root[data-theme="dark"] .size-tab[aria-current="page"] {
	border-color: var(--brand-text);
	color: var(--paper);
	background: var(--brand-text);
}

.quick-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 1px;
	margin: 6px 0 22px;
	border: 1px solid var(--line);
	background: var(--line);
}

.quick-specs div {
	padding: 12px 14px;
	background: var(--surface);
}

.quick-specs dt {
	margin-bottom: 4px;
	color: var(--muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.quick-specs dd {
	margin: 0;
	color: var(--brand-text);
	font-family: var(--display);
	font-size: 15px;
	font-weight: 700;
}

.product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.product-quote {
	min-height: 52px;
	flex: 1 1 220px;
	font-size: 13px;
}

.product-call {
	min-height: 52px;
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 10px;
	padding: 0 18px;
	border: 1px solid var(--brand-text);
	color: var(--brand-text);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease;
}

.product-call:hover {
	border-color: var(--orange);
	color: var(--orange);
}

.product-call svg {
	width: 18px;
	height: 18px;
}

.product-note {
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 11px;
}

.product-page .perks {
	margin: 34px 0 0;
}

/* ---------- Overview + specifications ---------- */

.product-details {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(24px, 5vw, 64px);
	padding: 72px 0 0;
}

.product-overview h2,
.spec-card h2 {
	margin: 24px 0 16px;
	font-family: var(--display);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 600;
	line-height: 1.1;
}

.overview-copy p {
	max-width: 680px;
	margin: 0 0 14px;
	color: var(--soft-text);
	font-size: 15px;
	line-height: 1.75;
}

.size-note {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 24px 0 0;
	border: 1px solid var(--line);
	background: var(--line);
}

.size-note > div {
	padding: 18px 20px;
	background: var(--forest-light);
}

.size-note h3,
.overview-lists h3 {
	margin: 0 0 8px;
	font-family: var(--display);
	font-size: 16px;
}

.size-note p {
	margin: 0;
	color: var(--soft-text);
	font-size: 13px;
	line-height: 1.6;
}

.overview-lists {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	margin-top: 30px;
}

.check-list {
	display: grid;
	gap: 9px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.check-list li {
	position: relative;
	padding-left: 26px;
	color: var(--ink);
	font-size: 13px;
	line-height: 1.5;
}

.check-list li::before {
	width: 16px;
	height: 16px;
	position: absolute;
	top: 1px;
	left: 0;
	display: grid;
	place-items: center;
	color: var(--white);
	background: var(--orange);
	content: "✓";
	font-size: 10px;
	font-weight: 700;
}

.spec-card {
	position: sticky;
	top: 20px;
	padding: 4px 26px 22px;
	border: 1px solid var(--line);
	background: var(--surface);
}

.spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.spec-table th,
.spec-table td {
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.spec-table th {
	width: 46%;
	padding-right: 14px;
	color: var(--muted);
	font-weight: 600;
}

.spec-table td {
	color: var(--ink);
	font-weight: 700;
}

.spec-note {
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.55;
}

/* ---------- Conditions ---------- */

.condition-section {
	padding: 72px 0 0;
}

.condition-section .catalog-heading {
	margin-top: 0;
}

.condition-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.condition-card {
	padding: 22px 20px;
	border: 1px solid var(--line);
	background: var(--surface);
}

.condition-card.is-selected {
	border-color: var(--orange);
	box-shadow: inset 0 3px 0 var(--orange);
}

.condition-card h3 {
	margin: 0 0 8px;
	font-family: var(--display);
	font-size: 19px;
}

/* The card's heading already names the condition, so only the amount shows */
.condition-card .price-list {
	margin: 0 0 10px;
}

.condition-card .price-row dt {
	display: none;
}

/* Product page price block: larger amounts above the note */
.product-price .price-list {
	gap: 10px 28px;
	margin: 4px 0 10px;
}

.product-price .price-row dd {
	font-size: 26px;
}

.condition-card p:last-child {
	margin: 0;
	color: var(--soft-text);
	font-size: 13px;
	line-height: 1.6;
}

/* ---------- FAQ and related (full-bleed sections reuse home styles, minus their side padding here) ---------- */

.product-page .faq-section {
	padding: 80px 0 0;
}

.product-page .faq-list summary {
	font-size: 14px;
}

.product-page .faq-list details p {
	font-size: 13px;
}

.related-section {
	padding: 80px 0 88px;
}

.related-group + .related-group {
	margin-top: 40px;
}

.related-heading {
	margin: 0 0 14px;
	font-family: var(--display);
	font-size: 19px;
}

.related-section .product-content > p:not(.product-tag) {
	font-size: 12px;
}

/* ---------- Not found ---------- */

.product-missing {
	margin: 60px 6.5% 80px;
	border: 1px solid var(--line);
	background: var(--surface);
}

.product-missing h1 {
	margin: 0 0 8px;
	font-family: var(--display);
	font-size: 28px;
}

.product-missing .search-button {
	text-decoration: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
	.product-hero,
	.product-details {
		grid-template-columns: 1fr;
	}

	.product-gallery,
	.spec-card {
		position: static;
	}
}

@media (max-width: 850px) {
	.product-page {
		padding-right: 5%;
		padding-left: 5%;
	}
}

@media (max-width: 620px) {
	.product-page {
		padding: 18px 16px 0;
	}

	.product-summary {
		padding: 22px 18px;
	}

	.size-note,
	.overview-lists {
		grid-template-columns: 1fr;
	}

	.spec-card {
		padding: 4px 18px 18px;
	}

	.product-call {
		flex: 1 1 100%;
		justify-content: center;
	}

	.product-details,
	.condition-section {
		padding-top: 56px;
	}

	.product-page .faq-section {
		padding: 56px 0 0;
	}

	.related-section {
		padding: 56px 0 60px;
	}

	.product-missing {
		margin: 40px 16px 60px;
	}
}