/* ==========================================================================
   DORIC · Cards
   ========================================================================== */

/* ── Product card ───────────────────────────────────────────────────────────
   One DOM, two compositions. Portrait card in the desktop rail; full-width
   list row below 768px. The mobile layout is not a shrunken card — it is the
   layout that reads fastest at thumb size.
   ------------------------------------------------------------------------- */

.d-pcard { position: relative; display: block; }

.d-pcard__media {
	position: relative;
	overflow: hidden;
	background: var(--d-surface-1);
}

.d-pcard__badge { position: absolute; bottom: var(--d-s3); left: var(--d-s3); z-index: 2; }

.d-pcard__info { padding-top: var(--d-s4); display: grid; gap: var(--d-s1); }

.d-pcard__name {
	font-family: var(--d-font-display);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.32;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--d-text);
}

/* Single tab stop: the title link is stretched across the whole card. */
.d-pcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.d-pcard__colour { font-size: var(--d-fs-small); color: var(--d-text-muted); }

.d-pcard__price {
	margin-top: var(--d-s1);
	font-size: var(--d-fs-body);
	color: var(--d-text);
	font-variant-numeric: tabular-nums;
}

/* A piece published before its price is set. Quieter than a price, so a
   priced rail never reads as a row of pending ones. */
.d-pcard__price--pending {
	font-size: var(--d-fs-micro);
	letter-spacing: var(--d-ls-label);
	color: var(--d-text-muted);
}

.d-pcard__wish {
	position: absolute;
	top: var(--d-s1);
	right: var(--d-s1);
	z-index: 3;
	display: grid;
	place-items: center;
	width: var(--d-tap);
	height: var(--d-tap);
	color: var(--d-text-2);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-pcard__wish:hover { color: var(--d-accent); }
.d-pcard__wish[aria-pressed="true"] { color: var(--d-accent); }
.d-pcard__wish[aria-pressed="true"] svg { fill: currentColor; }

.d-pcard__actions { display: none; }

/* Phone, everywhere but a shop grid: the list row the rails were built on —
   a thumbnail, the piece beside it. */
@media (max-width: 767px) {
	.d-pcard {
		display: grid;
		grid-template-columns: 116px 1fr;
		gap: var(--d-s4);
		align-items: center;
		padding-block: var(--d-s3);
		border-bottom: var(--d-hairline) solid var(--d-border);
	}

	.d-pcard__info { padding-top: 0; padding-right: var(--d-s9); }
	.d-pcard__wish { top: 50%; right: 0; transform: translateY(-50%); }

	/* The badge has to fit a 116px thumbnail without wrapping. */
	.d-pcard__badge {
		bottom: var(--d-s2);
		left: var(--d-s2);
		padding: 4px 6px;
		font-size: 8px;
		letter-spacing: .12em;
		white-space: nowrap;
	}
}

/* Phone, in a shop grid: the catalogue layout — the frame, then the words
   under it, with the wishlist at the head of them, two to a row. */
@media (max-width: 767px) {
	.d-shop__grid .d-pcard {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--d-s2);
		align-items: start;
		padding-block: 0;
		border-bottom: 0;
	}

	.d-shop__grid .d-pcard__media { grid-column: 1 / -1; }

	.d-shop__grid .d-pcard__info {
		grid-column: 1;
		grid-row: 2;
		padding-top: var(--d-s3);
		padding-right: 0;
	}

	.d-shop__grid .d-pcard__wish {
		position: static;
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		transform: none;
		margin-top: var(--d-s2);
	}

	.d-shop__grid .d-pcard__name { font-size: 13.5px; line-height: 1.25; }
	.d-shop__grid .d-pcard__colour { margin-top: 2px; }
	.d-shop__grid .d-pcard__price { margin-top: var(--d-s2); }
}

/* Desktop: hover controls.
   The image swap to shot two lands in Phase 4 as a cross-fade inside
   .d-pcard__media; until then the media takes a restrained scale. */
@media (min-width: 1024px) and (hover: hover) {
	.d-pcard__media .d-media__img,
	.d-pcard__media .d-media__ph {
		transition: transform 700ms var(--d-ease-cine);
	}

	.d-pcard:hover .d-media__img,
	.d-pcard:hover .d-media__ph { transform: scale(1.035); }

	.d-pcard__actions {
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		z-index: 2;
		display: grid;
		grid-template-columns: 1fr 1fr;
		opacity: 0;
		transform: translateY(8px);
		transition:
			opacity var(--d-dur-base) var(--d-ease-out),
			transform var(--d-dur-base) var(--d-ease-out);
	}

	.d-pcard:hover .d-pcard__actions,
	.d-pcard:focus-within .d-pcard__actions { opacity: 1; transform: none; }

	/*
	 * The badge now sits bottom-left, which is where the hover panel rises
	 * from. Lift it clear rather than letting the panel bury it — scarcity is
	 * exactly the thing that should stay readable while someone is deciding.
	 */
	.d-pcard__badge { transition: transform var(--d-dur-base) var(--d-ease-out); }

	.d-pcard:hover .d-pcard__badge,
	.d-pcard:focus-within .d-pcard__badge { transform: translateY(-46px); }

	.d-pcard__action {
		display: grid;
		place-items: center;
		min-height: 46px;
		padding-inline: var(--d-s2);
		background: rgba(11, 10, 9, .88);
		border-top: var(--d-hairline) solid var(--d-border-strong);
		font-size: var(--d-fs-micro);
		font-weight: 500;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--d-text);
		transition: background-color var(--d-dur-fast) var(--d-ease-out);
	}

	.d-pcard__action + .d-pcard__action { border-left: var(--d-hairline) solid var(--d-border-strong); }
	.d-pcard__action:hover { background: rgba(11, 10, 9, .96); color: var(--d-accent); }

	.d-pcard__action--primary {
		background: var(--d-accent);
		border-color: var(--d-accent);
		color: var(--d-on-accent);
	}

	.d-pcard__action--primary:hover { background: var(--d-accent-hover); color: var(--d-on-accent); }
}

/* ── Category card ──────────────────────────────────────────────────────── */

.d-ccard {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--d-surface-1);
}

.d-ccard__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--d-s5);
	display: grid;
	gap: var(--d-s1);
}

.d-ccard__name {
	font-family: var(--d-font-display);
	font-size: clamp(.85rem, 1.12vw, 1.125rem);
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.1;
	color: var(--d-ivory);
}

.d-ccard__cta {
	margin-top: var(--d-s3);
	display: inline-flex;
	align-items: center;
	gap: var(--d-s2);
	font-size: var(--d-fs-micro);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-accent);
}

.d-ccard__cta svg { transition: transform var(--d-dur-base) var(--d-ease-out); }
.d-ccard__cta--soon { color: var(--d-text-muted); }

.d-ccard .d-media__img,
.d-ccard .d-media__ph { transition: transform 700ms var(--d-ease-cine); }

@media (hover: hover) {
	.d-ccard:hover .d-media__img,
	.d-ccard:hover .d-media__ph { transform: scale(1.045); }

	.d-ccard:hover .d-ccard__cta svg { transform: translateX(4px); }
}

.d-ccard.is-soon { cursor: default; }
.d-ccard.is-soon:hover .d-media__ph { transform: none; }

/* ── God card ───────────────────────────────────────────────────────────── */

.d-godcard { position: relative; display: block; }

.d-godcard__media { position: relative; overflow: hidden; }

.d-godcard__index {
	position: absolute;
	top: var(--d-s4);
	left: var(--d-s4);
	z-index: 2;
	font-family: var(--d-font-display);
	font-size: .8125rem;
	letter-spacing: .16em;
	color: var(--d-accent);
}

/* No wash over the photograph: two bands of shadow instead, one behind the
   index at the head and one behind the name at the foot, each fading out
   before it reaches the middle of the picture. */
.d-godcard .d-media::before,
.d-godcard .d-media::after {
	content: '';
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.d-godcard .d-media::before {
	inset: 0 0 66% 0;
	background: linear-gradient(180deg, rgba(11, 10, 9, .62) 0%, rgba(11, 10, 9, 0) 100%);
}

.d-godcard .d-media::after {
	inset: 54% 0 0 0;
	background: linear-gradient(0deg, rgba(11, 10, 9, .72) 0%, rgba(11, 10, 9, 0) 100%);
}

.d-godcard__index,
.d-godcard__name,
.d-godcard__virtue { text-shadow: 0 1px 14px rgba(11, 10, 9, .8); }

/* At the foot of the photograph, as the index sits at its head. */
.d-godcard__body {
	position: absolute;
	inset-inline: 0;
	bottom: var(--d-s4);
	z-index: 2;
	padding-inline: var(--d-s4);
}

.d-godcard__name {
	font-family: var(--d-font-display);
	color: var(--d-ivory);
	font-size: clamp(1.25rem, 1.7vw, 1.625rem);
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.1;
}

.d-godcard__virtue {
	margin-top: var(--d-s2);
	font-size: var(--d-fs-micro);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-accent);
}

.d-godcard__epithet {
	margin-top: var(--d-s2);
	font-size: var(--d-fs-small);
	color: var(--d-text-muted);
}

.d-godcard .d-media__img,
.d-godcard .d-media__ph { transition: transform 700ms var(--d-ease-cine); }

@media (hover: hover) {
	.d-godcard:hover .d-media__img,
	.d-godcard:hover .d-media__ph { transform: scale(1.045); }
	.d-godcard:hover .d-godcard__name { color: var(--d-accent); }
}

.d-godcard__name { transition: color var(--d-dur-fast) var(--d-ease-out); }

/* ── Lookbook card ──────────────────────────────────────────────────────── */

.d-lcard {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--d-surface-1);
}

.d-lcard__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--d-s5);
}

.d-lcard__title {
	font-family: var(--d-font-display);
	font-size: clamp(.85rem, 1.12vw, 1.125rem);
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.1;
	color: var(--d-ivory);
}

.d-lcard__sub {
	margin-top: var(--d-s2);
	font-size: var(--d-fs-small);
	color: var(--d-ivory-dim);
}

.d-lcard .d-media__img,
.d-lcard .d-media__ph { transition: transform 700ms var(--d-ease-cine); }

@media (hover: hover) {
	.d-lcard:hover .d-media__img,
	.d-lcard:hover .d-media__ph { transform: scale(1.045); }
}

/* ── Journal card ───────────────────────────────────────────────────────── */

.d-jcard { position: relative; display: block; }

.d-jcard__media { position: relative; overflow: hidden; }

.d-jcard__meta {
	display: flex;
	align-items: center;
	gap: var(--d-s2);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-accent);
}

.d-jcard__dot {
	width: 3px;
	height: 3px;
	background: currentColor;
	opacity: .6;
}

.d-jcard__meta time { color: var(--d-text-muted); }

/* Dead centre of the photograph, the width of the frame less its margins. */
.d-jcard__title {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: var(--d-s5);
	text-align: center;
	text-wrap: balance;
	color: var(--d-ivory);
	font-family: var(--d-font-display);
	font-size: var(--d-fs-h3);
	font-weight: 400;
	line-height: 1.24;
	letter-spacing: -.005em;
}

.d-jcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.d-jcard__title a { transition: color var(--d-dur-fast) var(--d-ease-out); }

.d-jcard__excerpt {
	margin-top: var(--d-s3);
	font-size: var(--d-fs-small);
	color: var(--d-text-muted);
	max-width: 34ch;
}

.d-jcard__more { margin-top: var(--d-s4); }
.d-jcard__more svg { transition: transform var(--d-dur-base) var(--d-ease-out); }

.d-jcard .d-media__img,
.d-jcard .d-media__ph { transition: transform 700ms var(--d-ease-cine); }

@media (hover: hover) {
	.d-jcard:hover .d-media__img,
	.d-jcard:hover .d-media__ph { transform: scale(1.04); }
	.d-jcard:hover .d-jcard__title a { color: var(--d-accent); }
	.d-jcard:hover .d-jcard__more svg { transform: translateX(4px); }
}

/* ── Trust item ─────────────────────────────────────────────────────────── */

.d-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--d-s3);
}

.d-trust__icon { flex: none; color: var(--d-accent); margin-top: 1px; }

.d-trust__title {
	font-size: var(--d-fs-micro);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-text);
	line-height: 1.5;
}

.d-trust__sub {
	margin-top: var(--d-s1);
	font-size: var(--d-fs-small);
	color: var(--d-text-muted);
	line-height: 1.5;
}

/* ── Edition plate ──────────────────────────────────────────────────────── */

.d-plate {
	display: grid;
	justify-items: center;
	gap: var(--d-s3);
	width: min(100%, 420px);
	margin-inline: auto;
	padding: var(--d-s8) var(--d-s6);
	border: var(--d-hairline) solid var(--d-border-strong);
	background:
		linear-gradient(180deg, rgba(233, 226, 215, .035) 0%, rgba(233, 226, 215, 0) 60%),
		var(--d-surface-1);
}

.d-plate__product {
	font-family: var(--d-font-display);
	font-size: 1.125rem;
	letter-spacing: .18em;
	color: var(--d-text);
}

.d-plate__edition {
	font-size: var(--d-fs-micro);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-text-muted);
}

.d-plate__rule { width: 40px; height: 1px; background: var(--d-accent); margin-block: var(--d-s2); }

.d-plate__number {
	display: flex;
	align-items: baseline;
	gap: var(--d-s2);
	font-family: var(--d-font-display);
	font-variant-numeric: tabular-nums;
	color: var(--d-text);
}

.d-plate__no { font-size: var(--d-fs-small); color: var(--d-text-muted); letter-spacing: .1em; }
.d-plate__current { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1; }
.d-plate__sep { font-size: 1.25rem; color: var(--d-accent); }
.d-plate__total { font-size: 1.25rem; color: var(--d-text-muted); }

.d-plate__meter {
	position: relative;
	display: block;
	width: 100%;
	max-width: 240px;
	height: 2px;
	margin-top: var(--d-s2);
	background: var(--d-border);
}

.d-plate__meterfill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--d-fill, 0%);
	background: var(--d-accent);
}

.d-plate__status {
	font-size: var(--d-fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--d-text-muted);
}