/* Hallmark · genre: editorial · macrostructure: Ecosystem Index · theme: Armory tokens (custom, unchanged — paper #0D0B16 · accent #C9A24B · Cinzel / Alegreya / Geist Mono)
 * nav: N12 (shared chrome) · footer: Ft4 (shared chrome) · enrichment: none — real product photography only
 * designed-as-app: shares tokens.css with every other surface; this file adds the v7 storefront's shapes and nothing else
 * pre-emit critique: P4 H5 E4 S5 R4 V4
 *
 * storefront-v7.css — the "armory floor" front page, the department head, the v7 product page.
 * Loaded only when cj_storefront_view = v7 (or ?cj_view=v7 preview) — see inc/storefront-view.php.
 * Tokens only: no colour, font or size is declared here that tokens.css does not name.
 */

/* ============ hero · a real photograph and the promise ============ */

.cj-hero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--space-2xl);
	align-items: center;
	padding-block: var(--space-2xl) var(--space-xl);
}
.cj-hero--copy { grid-template-columns: minmax(0, 1fr); }

.cj-hero-kicker {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	color: var(--color-muted);
	margin: 0 0 var(--space-md);
}
.cj-hero h1 {
	margin: 0 0 var(--space-md);
	font-size: var(--text-display);
	max-width: 14ch;
	min-width: 0;
	overflow-wrap: anywhere;
}
.cj-hero-lede {
	font-size: var(--text-md);
	line-height: 1.45;
	color: var(--color-ink-2);
	max-width: 46ch;
	margin: 0 0 var(--space-lg);
}
.cj-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: 0 0 var(--space-xl);
}

/* Live facts — read from the store at render; the strip is the proof, not a claim. */
.cj-hero-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-xl);
	margin: 0;
	padding-top: var(--space-md);
	border-top: var(--rule-hair) solid var(--color-rule);
}
.cj-hero-facts div { display: flex; align-items: baseline; gap: var(--space-xs); }
.cj-hero-facts dt {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-gold-hi);
}
.cj-hero-facts dd { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }

/* The photograph sits in the same panel a product card uses on the apex, so the hero and
   the shelf are the same object at two sizes. Dimmed at rest like the department tiles —
   supplier photography is shot on white and an untreated cut-out glares on the void. */
.cj-hero-media {
	position: relative;
	margin: 0;
	min-width: 0;
	border-radius: var(--radius-md);
	background: var(--color-paper-2);
	box-shadow: var(--panel-shadow);
	overflow: hidden;
}
.cj-hero-media a { display: block; }
.cj-hero-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: saturate(0.92) brightness(0.9);
}
.cj-hero-media figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--space-sm) var(--space-md);
	background: linear-gradient(to top, color-mix(in oklab, var(--color-paper) 94%, transparent) 55%, transparent);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
}
.cj-hero-media figcaption a { color: var(--color-gold-hi); text-decoration: none; }
.cj-hero-media figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cj-hero-media figcaption a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Hero in-stock pill */
.cj-hero-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	background: color-mix(in oklab, var(--color-success) 16%, transparent);
	border: var(--rule-hair) solid color-mix(in oklab, var(--color-success) 40%, transparent);
	border-radius: var(--radius-sm);
	color: var(--color-success);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ============ trust strip · 4 pillars ============ */

.cj-trust-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	margin-block: 0 var(--space-2xl);
	background: var(--color-paper-2);
	border: var(--rule-hair) solid var(--color-rule-2);
	border-radius: var(--radius-md);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.cj-trust-strip__item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-width: 0;
}

.cj-trust-strip__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background: color-mix(in oklab, var(--color-accent) 12%, transparent);
	border: var(--rule-hair) solid var(--color-rule);
	color: var(--color-accent);
}

.cj-trust-strip__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.cj-trust-strip__text strong {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--color-gold-hi);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cj-trust-strip__text span {
	font-size: 0.8rem;
	color: var(--color-muted);
	line-height: 1.3;
	margin-top: 2px;
}

/* ============ departments · the wide tile ============ */
/* Rings and scales are the catalogue — they get the two wide tiles on the first row; the
   four smaller departments fill the second. Six photographed departments, two full rows,
   no lonely last card. (A department with no real photo is not a tile — inc/departments.php.) */

.cj-dept-grid--featured > li:nth-child(-n+2) { grid-column: span 2; }
.cj-dept-grid--featured > li:nth-child(-n+2) .cj-dept-media { aspect-ratio: 2 / 1; }
.cj-dept-grid--featured > li:nth-child(-n+2) .cj-dept-name { font-size: var(--text-md); }

/* ============ start here · the rail ============ */

.cj-deck--start { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-xl); }
.cj-products--rail {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-lg) var(--space-md);
}
.cj-products--rail .cj-product-name { font-size: var(--text-xs); }

/* Product card action buttons */
.cj-product-actions {
	margin-top: var(--space-xs);
}

.cj-product-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	cursor: pointer;
	border: var(--rule-hair) solid var(--color-rule-strong);
	background: color-mix(in oklab, var(--color-paper-3) 60%, transparent);
	color: var(--color-ink);
	transition: background var(--dur-short) var(--ease-out),
	            border-color var(--dur-short) var(--ease-out),
	            color var(--dur-short) var(--ease-out);
}

.cj-product-btn--options {
	border-color: var(--color-accent);
	color: var(--color-gold-hi);
}

.cj-product-btn--add {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-ink);
}

@media (hover: hover) and (pointer: fine) {
	.cj-product-btn:hover {
		border-color: var(--color-accent);
		background: var(--color-accent);
		color: var(--color-accent-ink);
	}
	.cj-product-btn--add:hover {
		background: var(--color-gold-hi);
		border-color: var(--color-gold-hi);
		color: var(--color-paper);
	}
}

.cj-product-btn:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.cj-products--rail .cj-product-btn {
	min-height: 32px;
	font-size: 0.76rem;
	padding: 4px 6px;
}

/* ============ calculator promo banner ============ */

.cj-calc-banner {
	margin-block: var(--space-2xl);
	padding: var(--space-xl) var(--space-2xl);
	background: linear-gradient(135deg, var(--color-paper-2) 0%, color-mix(in oklab, var(--color-paper-3) 90%, var(--color-accent) 10%) 100%);
	border: var(--rule-hair) solid var(--color-rule);
	border-left: 4px solid var(--color-accent);
	border-radius: var(--radius-md);
	box-shadow: var(--panel-shadow);
}

.cj-calc-banner__kicker {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 var(--space-xs);
}

.cj-calc-banner h2 {
	margin: 0 0 var(--space-sm);
	font-size: var(--text-xl);
	color: var(--color-gold-hi);
}

.cj-calc-banner__lede {
	margin: 0 0 var(--space-lg);
	font-size: var(--text-base);
	color: var(--color-ink-2);
	max-width: 62ch;
	line-height: 1.5;
}

.cj-calc-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: 0;
}

/* ============ craft truth features ============ */

.cj-craft-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	margin-block: var(--space-2xl);
}

.cj-craft-card {
	padding: var(--space-lg);
	background: var(--color-paper-2);
	border: var(--rule-hair) solid var(--color-rule-2);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	transition: border-color var(--dur-short) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.cj-craft-card:hover {
		border-color: var(--color-rule);
	}
}

.cj-craft-card__icon {
	font-size: 1.8rem;
	line-height: 1;
	margin-bottom: var(--space-2xs);
}

.cj-craft-card h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-gold-hi);
	letter-spacing: 0.02em;
}

.cj-craft-card p {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-ink-2);
	line-height: 1.45;
}

/* ============ department head (archives) ============ */

.cj-depthead {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--space-xl);
	align-items: center;
	margin: var(--space-md) 0 var(--space-xl);
	padding-bottom: var(--space-xl);
	border-bottom: var(--rule-hair) solid var(--color-rule);
}
.cj-depthead--nophoto { grid-template-columns: minmax(0, 1fr); }
.cj-depthead-media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: var(--rule-hair) solid var(--color-rule-2);
	border-radius: var(--radius-sm);
	background: var(--color-paper-3);
}
.cj-depthead-img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.92) brightness(0.86);
}
.cj-depthead-kicker {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-muted);
	margin: 0 0 var(--space-xs);
}
.cj-depthead-kicker a { color: var(--color-ink-2); text-decoration: none; }
.cj-depthead-kicker a:hover { color: var(--color-accent); }
.cj-depthead-title { margin: 0 0 var(--space-sm); font-size: var(--text-display-s); overflow-wrap: anywhere; min-width: 0; }
.cj-depthead-desc { margin: 0 0 var(--space-md); color: var(--color-ink-2); max-width: 60ch; }
.cj-depthead-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}
.cj-depthead-chips a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2xs);
	min-height: 36px;
	padding: 6px 12px;
	border: var(--rule-hair) solid var(--color-rule-strong);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-2);
	text-decoration: none;
	transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.cj-depthead-chips a span { color: var(--color-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .cj-depthead-chips a:hover { border-color: var(--color-accent); color: var(--color-gold-hi); } }
.cj-depthead-chips a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* The archive grid, v7: the picture is the affordance, the border is the hover. */
.cj-view-v7 .woocommerce ul.products li.product a img { transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.cj-view-v7 .woocommerce ul.products li.product:hover a img { border-color: var(--color-accent); }
}

/* ============ product page, v7 · gallery left, sticky summary right ============ */
/* Woo lays the single product out with 48% floats. A grid keeps the summary (price,
   the Dye Bench / Gauge Rail / Count Ledger, the add-to-cart) in view while the gallery
   and the spec sheet scroll — on a 317-variation page the selectors are the product. */

.cj-view-v7 .woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--space-xl) var(--space-2xl);
	align-items: start;
}
.cj-view-v7 .woocommerce div.product div.images,
.cj-view-v7 .woocommerce div.product div.summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}
.cj-view-v7 .woocommerce div.product div.summary {
	position: sticky;
	top: calc(var(--bar-h) + var(--space-md));
}
.cj-view-v7 .woocommerce div.product > :not(.images):not(.summary):not(.onsale) { grid-column: 1 / -1; }
.cj-view-v7 .woocommerce div.product div.images img { background: var(--color-paper-2); }

/* ============ responsive ============ */

@media (max-width: 64rem) {
	.cj-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl) var(--space-lg); }
	.cj-hero-img { aspect-ratio: 3 / 2; }
	.cj-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); }
	/* browse.css drops the grid to three columns here; two columns keeps the rows full:
	   the two wide tiles take a row each, the four small ones make two more. */
	.cj-dept-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cj-dept-grid--featured > li:nth-child(-n+2) { grid-column: span 2; }
	.cj-products--rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cj-calc-banner { padding: var(--space-lg); }
	.cj-craft-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cj-depthead { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
	.cj-depthead-media { aspect-ratio: 5 / 2; }
	.cj-view-v7 .woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
	.cj-view-v7 .woocommerce div.product div.summary { position: static; }
}
@media (max-width: 40rem) {
	.cj-trust-strip { grid-template-columns: minmax(0, 1fr); padding: var(--space-sm) var(--space-md); }
	.cj-trust-strip__text strong { white-space: normal; }
	.cj-craft-features { grid-template-columns: minmax(0, 1fr); }
	.cj-dept-grid--featured > li:nth-child(-n+2) { grid-column: span 2; }
	.cj-products--rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); }
	.cj-hero-facts { gap: var(--space-xs) var(--space-lg); }
	.cj-hero-cta .cj-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.cj-view-v7 .woocommerce ul.products li.product a img,
	.cj-depthead-chips a { transition: none; }
}