/* ==========================================================================
   product.css — the single product page and the kit price table.
   Owns: templates/single-product.html, patterns/product-*.php.
   Mobile-first. Single breakpoint at 900px, always min-width.
   ========================================================================== */

:root {
	/* Non-active grade badges on the dark panel — the one value on this page
	   that has no token, because it exists only here. */
	--cd-grade-off: rgba(255, 255, 255, .16);
}

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */

.cd-product {
	display: block;
}

/* Core's flow layout drops a block gap between every sibling in a group. Every
   gap on this page is specified to the pixel, so the containers that hold their
   own spacing opt out. Listed one by one rather than with a blanket `> *`, which
   would outrank the element margins set further down this file. */
.cd-product > .cd-crumbs,
.cd-product > .cd-product__body,
.cd-product__body > .cd-product__cols,
.cd-product__body > .cd-product__related,
.cd-product__cols > .cd-product__media,
.cd-product__cols > .cd-product__summary,
.cd-product__media > .cd-gallery {
	margin-block-start: 0;
}

.cd-product__body {
	padding-block: 0 26px;
}

@media (min-width: 900px) {
	.cd-product__body {
		padding-block: 0 4px;
	}
}

/* Breadcrumb — the mobile frame has a back link in the header instead. */
.cd-crumbs {
	display: none;
}

@media (min-width: 900px) {
	.cd-crumbs {
		display: block;
		padding-block: 14px;
		border-bottom: 1px solid var(--cd-rule-soft);
		font: 500 11.5px var(--cd-mono);
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--cd-ink-soft);
	}
}

.cd-crumbs a {
	color: inherit;
	text-decoration: none;
}

.cd-crumbs a:hover {
	color: var(--cd-ink);
}

.cd-crumbs__sep {
	padding-inline: 6px;
}

.cd-crumbs__current {
	color: var(--cd-ink);
}

/* --------------------------------------------------------------------------
   2. The two columns
   -------------------------------------------------------------------------- */

/* Mobile is one column, and the order the design reads in is not the order the
   desktop grid needs — so the summary dissolves into the column with
   `display: contents` and its parts are ordered individually. */
.cd-product__cols {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cd-product__media {
	min-width: 0;
	order: -1;
}

.cd-product__summary {
	display: contents;
}

.cd-product__condrow {
	order: 1;
}

.cd-product__specs {
	order: 2;
}

.cd-product__fineprint {
	order: 3;
}

/* Desktop is a two-column grid rather than a flex row, because the condition
   block lands in a different cell for a kit than for a simple product and
   nothing else about the markup changes. */
@media (min-width: 900px) {
	.cd-product__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 430px;
		column-gap: 40px;
		row-gap: 40px;
		align-items: start;
		padding-block: 32px 40px;
	}

	.cd-product__media {
		grid-column: 1;
		grid-row: 1;
	}

	.cd-product__summary {
		display: block;
		grid-column: 2;
		grid-row: 1;
	}

	/* A simple product: condition card and grading key in a full-width row
	   under both columns. */
	.cd-product__condrow {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	/* A kit: the card tucks under the gallery and the summary column, which is
	   long enough to carry the price table, spans both rows beside it. */
	.cd-p-grouped .cd-product__cols {
		row-gap: 28px;
	}

	.cd-p-grouped .cd-product__summary {
		grid-row: 1 / span 2;
	}

	.cd-p-grouped .cd-product__condrow {
		grid-column: 1;
	}
}

/* --------------------------------------------------------------------------
   3. Gallery
   -------------------------------------------------------------------------- */

.cd-gallery {
	margin-inline: calc(var(--cd-gutter) * -1);
}

.cd-gallery__frame {
	position: relative;
	overflow: hidden;
}

.cd-gallery__stage {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.cd-gallery__stage::-webkit-scrollbar {
	display: none;
}

.cd-gallery__slide {
	flex: none;
	width: 100%;
	margin: 0;
	scroll-snap-align: start;
}

.cd-gallery__slide img,
.cd-gallery__image {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}

.cd-gallery__slide--empty {
	height: 300px;
	background: var(--cd-chip);
}

/* Dots — mobile only, over the foot of the photo. */
.cd-gallery__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 6px;
	z-index: 2;
}

.cd-gallery__dot {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cd-gallery__dot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .75);
}

.cd-gallery__dot.is-active::before {
	background: var(--cd-ink);
}

/* Thumbnails — desktop only. */
.cd-gallery__thumbs {
	display: none;
}

@media (min-width: 900px) {
	.cd-gallery {
		margin-inline: 0;
	}

	.cd-gallery__frame {
		border-radius: var(--cd-r-card);
	}

	.cd-gallery__slide img,
	.cd-gallery__image,
	.cd-gallery__slide--empty {
		height: 470px;
	}

	.cd-gallery__dots {
		display: none;
	}

	.cd-gallery__thumbs {
		display: flex;
		gap: 10px;
		margin: 12px 0 0;
		padding: 0;
		list-style: none;
	}

	.cd-gallery__thumbs-item {
		flex: none;
	}

	.cd-gallery__thumb,
	.cd-gallery__more {
		display: block;
		width: 88px;
		height: 88px;
		border-radius: var(--cd-r-input);
		overflow: hidden;
	}

	.cd-gallery__thumb img {
		width: 88px;
		height: 88px;
		object-fit: cover;
		display: block;
		opacity: .75;
		transition: opacity .12s linear;
	}

	.cd-gallery__thumb:hover img {
		opacity: 1;
	}

	.cd-gallery__thumb.is-active {
		border: 2px solid var(--cd-ink);
	}

	.cd-gallery__thumb.is-active img {
		width: 84px;
		height: 84px;
		opacity: 1;
	}

	.cd-gallery__more {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--cd-chip);
		font: 600 11px var(--cd-mono);
		color: var(--cd-ink-soft);
		text-decoration: none;
	}

	.cd-gallery__more:hover {
		color: var(--cd-ink);
	}
}

/* --------------------------------------------------------------------------
   4. Summary column
   -------------------------------------------------------------------------- */

/* The summary is display:contents on a phone, so this line reads as following
   the gallery — but it is still its parent's first child, and core's
   `:where(.is-layout-flow) > *:first-child { margin-block-start: 0 }` was
   zeroing the gap, leaving the eyebrow jammed against the photo. Restored with
   enough specificity to win, and only while the summary is not its own column.
   From 900px up the eyebrow sits at the top of the right-hand column, where a
   top margin would push it out of line with the gallery. */
.cd-product__eyebrow {
	margin: 18px 0 0;
	font-size: 10px;
	letter-spacing: .08em;
}

.cd-product__cols > .cd-product__summary > .cd-product__eyebrow:first-child {
	margin-block-start: 18px;
}

.cd-product__title {
	margin: 8px 0 0;
	font: 800 24px/1.1 var(--cd-sans);
	letter-spacing: -.03em;
	color: var(--cd-ink);
	text-wrap: balance;
}

.cd-product__price {
	margin-top: 12px;
	flex-wrap: wrap;
	gap: 8px;
}

.cd-product__price .cd-price__amount {
	font-size: 26px;
	letter-spacing: -.02em;
}

.cd-product__price .cd-price__currency {
	font-size: 10.5px;
	color: var(--cd-ink-soft);
}

.cd-product__graderow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 11px;
}

.cd-product__graderow .cd-grade {
	font-size: 10.5px;
	padding: 4px 7px;
	border-radius: 4px;
}

.cd-product__gloss {
	font: 500 11.5px var(--cd-sans);
	color: var(--cd-ink-muted);
}

.cd-product__soldflag {
	font: 700 10.5px var(--cd-mono);
	letter-spacing: .08em;
	background: var(--cd-ink);
	color: var(--cd-accent-bright);
	padding: 4px 7px;
	border-radius: 4px;
}

.cd-product__lede {
	margin: 14px 0 0;
	font: 400 13px/1.6 var(--cd-sans);
	color: var(--cd-ink-body);
	text-wrap: pretty;
}

.cd-product__lede + .cd-product__lede {
	margin-top: 10px;
}

@media (min-width: 900px) {
	.cd-product__cols > .cd-product__summary > .cd-product__eyebrow:first-child {
		margin-block-start: 0;
	}

	.cd-product__eyebrow {
		margin-top: 0;
		font-size: 11px;
	}

	.cd-product__title {
		margin-top: 10px;
		font-size: 34px;
		line-height: 1.08;
	}

	.cd-product__price {
		margin-top: 16px;
		gap: 9px;
	}

	.cd-product__price .cd-price__amount {
		font-size: 32px;
	}

	.cd-product__price .cd-price__currency {
		font-size: 12px;
	}

	.cd-product__graderow {
		gap: 9px;
		margin-top: 14px;
	}

	.cd-product__graderow .cd-grade {
		font-size: 12px;
		padding: 5px 9px;
	}

	.cd-product__gloss {
		font-size: 12.5px;
	}

	.cd-product__lede {
		margin-top: 18px;
		font-size: 14.5px;
	}
}

/* --------------------------------------------------------------------------
   5. Actions — the conversion pair. No add-to-cart exists on this page.
   -------------------------------------------------------------------------- */

.cd-product__actions {
	display: none;
	flex-direction: column;
	gap: 10px;
	margin-top: 22px;
}

.cd-product__actions .cd-btn {
	border-radius: var(--cd-r-image);
	padding: 16px;
}

.cd-product__actions .cd-btn--ghost {
	padding: 14px;
	font-size: 14px;
}

.cd-product__fineprint {
	margin: 14px 0 0;
	font: 400 12px/1.6 var(--cd-sans);
	color: var(--cd-ink-faint);
	text-wrap: pretty;
}

.cd-product__fineprint + .cd-product__fineprint {
	margin-top: 8px;
}

/* The sticky ask bar carries the accent on mobile — two accent buttons on one
   screen would be two primary actions. */
@media (min-width: 900px) {
	.cd-product__actions {
		display: flex;
		margin-top: 24px;
	}

	.cd-product__fineprint {
		margin-top: 12px;
		font-size: 12.5px;
	}
}

/* The price the ask bar shows on a product page. */
.cd-product__askprice {
	display: block;
	font: 800 18px/1 var(--cd-sans);
	letter-spacing: -.02em;
	color: #fff;
	margin-bottom: 3px;
}

/* --------------------------------------------------------------------------
   6. Specs
   -------------------------------------------------------------------------- */

.cd-product__specs {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--cd-rule);
}

.cd-product__specs-head {
	margin: 0 0 2px;
	font-size: 10px;
	letter-spacing: .08em;
}

.cd-product__specs .cd-speclist {
	border-top: 0;
}

.cd-product__specs .cd-speclist__row {
	padding: 8px 0;
}

/* Attribute values are Wes's prose, not fixed tokens — a long "Includes" has
   to wrap rather than push the row past the column. */
.cd-product__specs .cd-speclist__value {
	white-space: normal;
}

@media (min-width: 900px) {
	.cd-product__specs {
		margin-top: 24px;
		padding-top: 18px;
	}

	.cd-product__specs-head {
		font-size: 10.5px;
		letter-spacing: .09em;
	}

	.cd-product__specs .cd-speclist__row {
		padding: 9px 0;
	}
}

/* --------------------------------------------------------------------------
   7. Kit price table
   -------------------------------------------------------------------------- */

.cd-kit {
	margin-top: 16px;
	border: 2px solid var(--cd-ink);
	border-radius: 11px;
	overflow: hidden;
}

.cd-kit__head {
	margin: 0;
	background: var(--cd-ink);
	color: var(--cd-accent-bright);
	font: 700 9.5px var(--cd-mono);
	letter-spacing: .08em;
	padding: 11px 14px;
}

.cd-kit__rows {
	border-top: 0;
	padding-inline: 14px;
}

.cd-kit__row {
	padding-block: 10px;
	text-decoration: none;
	color: var(--cd-ink-body);
}

.cd-kit__row:hover .cd-speclist__label {
	color: var(--cd-ink);
}

.cd-kit__row.is-sold .cd-speclist__value {
	text-decoration: none;
	letter-spacing: .06em;
}

.cd-kit__total {
	font-size: 11.5px;
	padding: 13px 14px;
}

.cd-kit__total-label {
	letter-spacing: .05em;
}

.cd-kit__total .cd-speclist__total-price {
	font-size: 16px;
}

/* The kit's approximate USD, kept off the accent bar and out of the CTA's way. */
.cd-kit__usd {
	order: 3;
	margin: 8px 0 0;
	font: 500 10px var(--cd-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	color: var(--cd-ink-faint);
}

@media (min-width: 900px) {
	.cd-kit {
		margin-top: 22px;
		border-radius: var(--cd-r-card);
	}

	.cd-kit__head {
		font-size: 10.5px;
		letter-spacing: .09em;
		padding: 12px 16px;
	}

	.cd-kit__rows {
		padding-inline: 16px;
	}

	.cd-kit__row {
		padding-block: 12px;
	}

	.cd-kit__total {
		font-size: 13px;
		padding: 15px 16px;
	}

	.cd-kit__total .cd-speclist__total-price {
		font-size: 17px;
	}

	.cd-kit__usd {
		font-size: 10.5px;
	}
}

/* --------------------------------------------------------------------------
   8. Condition card and the grading key
   -------------------------------------------------------------------------- */

.cd-product__condrow {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}

@media (min-width: 900px) {
	.cd-product__condrow {
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
		margin-top: 0;
	}
}

.cd-condition {
	padding: 15px;
	border-radius: 11px;
}

.cd-condition .cd-eyebrow {
	font-size: 10px;
	letter-spacing: .08em;
}

.cd-condition__title {
	margin: 9px 0 0;
	font: 800 16px/1.2 var(--cd-sans);
	letter-spacing: -.02em;
	color: var(--cd-ink);
}

.cd-condition__list {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 11px 0 0;
	padding: 0;
	list-style: none;
}

.cd-condition__item {
	display: flex;
	gap: 9px;
}

.cd-condition__bullet {
	flex: none;
	width: 12px;
	font: 700 11px/1.55 var(--cd-mono);
	color: var(--cd-ink);
}

.cd-condition__text {
	font: 400 12.5px/1.5 var(--cd-sans);
	color: var(--cd-ink-body);
	text-wrap: pretty;
}

.cd-condition__prose {
	margin: 10px 0 0;
	font: 400 12.5px/1.55 var(--cd-sans);
	color: var(--cd-ink-body);
	text-wrap: pretty;
}

@media (min-width: 900px) {
	.cd-condition {
		flex: 1;
		padding: 24px 26px;
		border-radius: var(--cd-r-card);
	}

	.cd-condition .cd-eyebrow {
		font-size: 10.5px;
		letter-spacing: .09em;
	}

	.cd-condition__title {
		margin-top: 10px;
		font-size: 20px;
	}

	.cd-condition__list {
		gap: 11px;
		margin-top: 16px;
	}

	.cd-condition__item {
		gap: 11px;
	}

	.cd-condition__bullet {
		width: 14px;
		font-size: 12px;
	}

	.cd-condition__text {
		font-size: 14px;
		line-height: 1.55;
	}

	.cd-condition__prose {
		margin-top: 12px;
		font-size: 14.5px;
		line-height: 1.6;
	}
}

/* HOW I GRADE — static explanatory content, desktop only. */
.cd-grading {
	display: none;
}

@media (min-width: 900px) {
	.cd-grading {
		display: block;
		width: 430px;
		flex: none;
		border-radius: var(--cd-r-card);
		padding: 24px 26px;
	}

	.cd-grading__head {
		margin: 0;
		font-size: 10.5px;
		letter-spacing: .09em;
		color: var(--cd-on-dark-soft);
	}

	.cd-grading__list {
		display: flex;
		flex-direction: column;
		gap: 9px;
		margin: 14px 0 0;
		padding: 0;
		list-style: none;
	}

	.cd-grading__item {
		display: flex;
		align-items: baseline;
		gap: 11px;
	}

	.cd-grading__badge {
		flex: none;
		font: 700 10.5px var(--cd-mono);
		background: var(--cd-grade-off);
		color: #fff;
		padding: 3px 6px;
		border-radius: var(--cd-r-badge);
		min-width: 21px;
		text-align: center;
	}

	.cd-grading__badge--top {
		background: var(--cd-accent);
		color: var(--cd-on-accent);
	}

	.cd-grading__text {
		font: 400 13px/1.5 var(--cd-sans);
		color: var(--cd-on-dark);
	}
}

/* --------------------------------------------------------------------------
   9. Also in the shop
   -------------------------------------------------------------------------- */

.cd-product__related {
	padding-top: 20px;
	padding-bottom: 26px;
}

.cd-product .cd-section-head {
	padding-bottom: 0;
	border-bottom: 0;
}

.cd-product .cd-section-head__title {
	font-size: 17px;
	letter-spacing: -.02em;
}

/* A scroller, but aligned to the gutter rather than bled to the edge: the
   design's mobile frame sets these two cards flush with the copy above them. */
.cd-related {
	margin-block: 12px 0;
	margin-inline: 0;
	padding-inline: 0;
	list-style: none;
	gap: 12px;
}

/* 44%, not 47%: two cards plus the gap then come to ~310px of a 339px row, so
   the third card peeks. At 47% they filled the row almost exactly and the
   scroller looked like a finished two-item grid — there was nothing to tell you
   the row moved. The scrollbar is hidden, so the peek IS the affordance. */
.cd-related > .cd-related__item {
	width: 44%;
}

.cd-related__link {
	display: block;
	text-decoration: none;
	color: var(--cd-ink);
}

.cd-related__media {
	display: block;
	position: relative;
	border-radius: 9px;
	overflow: hidden;
}

.cd-related__media img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}

.cd-related__title {
	display: block;
	margin-top: 7px;
	font: 700 12px/1.3 var(--cd-sans);
	color: var(--cd-ink);
}

.cd-related__price {
	display: block;
	margin-top: 4px;
	font: 800 13.5px var(--cd-sans);
	font-variant-numeric: tabular-nums;
	color: var(--cd-ink);
}

@media (min-width: 900px) {
	.cd-product__related {
		padding-top: 0;
		padding-bottom: 44px;
	}

	.cd-product .cd-section-head {
		padding-bottom: 18px;
		border-bottom: 1px solid var(--cd-rule);
	}

	.cd-product .cd-section-head__title {
		font-size: 22px;
	}

	.cd-related {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
		margin: 22px 0 0;
		padding-inline: 0;
		overflow: visible;
	}

	.cd-related > .cd-related__item {
		width: auto;
	}

	.cd-related__media {
		border-radius: var(--cd-r-image);
	}

	.cd-related__media img {
		height: 180px;
	}

	.cd-related__title {
		margin-top: 9px;
		font-size: 13.5px;
	}

	.cd-related__price {
		margin-top: 6px;
		font-size: 15px;
	}
}