/*
 * Product / Store templates — archive (/store/) and single
 * (/store/{slug}/). Loaded only on those views (see inc/enqueue.php).
 * Depends on the shared cascade: tokens -> base -> layout -> components.
 * Uses existing tokens only. Introduced in Phase 3B-3. Mobile-first.
 *
 * Image-led and editorial, like Photography — not a boxed ecommerce
 * catalog: no badges, no colour cards, no overlays. Archive images keep
 * their natural aspect ratio (no forced crop, no object-fit). The single
 * gallery uses the Photography-proven portrait constraint, implemented
 * locally here (photography.css is not modified).
 *
 * Shared primitives (.schusei-section-label, .schusei-pagination,
 * .schusei-empty) live in components.css. This checkpoint intentionally
 * does not use .schusei-meta-list: Compatibility / What's Included /
 * Download Instructions are free-form text, not short label/value pairs,
 * so they get their own labelled text sections instead (same treatment as
 * Film's Credits).
 */

/* ============================================================ STORE ARCHIVE */
.schusei-store-archive.schusei-main {
	max-width: var(--sch-width-wide);
}

.schusei-store-archive__header {
	margin-bottom: var(--sch-space-xl);
}

.schusei-product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sch-space-2xl) var(--sch-space-lg);
	align-items: start;
}

@media (min-width: 48em) {
	.schusei-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------- one entry */
.schusei-product-item {
	position: relative;
	min-width: 0;
	margin: 0;
}

/* No box, no background, no forced ratio — the image defines its own size,
   left-aligned within the card (not centered — that treatment is reserved
   for the single-product gallery). A max-height keeps a tall portrait frame
   from dominating the archive grid and pushing the title below the fold,
   while landscape images still use the full card width. */
.schusei-product-item__media {
	display: block;
	text-align: left;
}

.schusei-product-item__image {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 70vh;
	transition: opacity var(--sch-duration-base) var(--sch-ease);
}

.schusei-product-item__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background-color: var(--sch-bg-raised);
	box-shadow: inset 0 0 0 1px var(--sch-border);
}

.schusei-product-item:hover .schusei-product-item__image,
.schusei-product-item:focus-within .schusei-product-item__image {
	opacity: 0.88;
}

.schusei-product-item__title {
	margin: var(--sch-space-sm) 0 0;
	font-size: var(--sch-text-heading);
	font-weight: 400;
	line-height: var(--sch-leading-snug);
	overflow-wrap: anywhere;
}

.schusei-product-item__link {
	color: var(--sch-text);
	text-decoration: none;
}

/* Stretch the title link over the whole entry; a11y name stays the title. */
.schusei-product-item__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.schusei-product-item__link:focus-visible {
	outline: none;
}

.schusei-product-item__link:focus-visible::after {
	outline: 2px solid var(--sch-accent-warm);
	outline-offset: 4px;
}

.schusei-product-item__meta {
	margin: var(--sch-space-3xs) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sch-space-2xs) var(--sch-space-sm);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

/* ============================================================= STORE SINGLE */
.schusei-store-single.schusei-main {
	max-width: var(--sch-width-content);
}

.schusei-product > * + * {
	margin-top: var(--sch-space-xl);
}

/* ------------------------------------------------------------- header */
.schusei-product__back {
	margin: 0 0 var(--sch-space-lg);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
}

.schusei-product__back a {
	color: var(--sch-text-secondary);
	text-decoration: none;
}

.schusei-product__back a:hover,
.schusei-product__back a:focus-visible {
	color: var(--sch-text);
}

.schusei-product__title {
	margin: 0;
	font-size: var(--sch-text-title);
	font-weight: 400;
	line-height: var(--sch-leading-tight);
	overflow-wrap: anywhere;
}

.schusei-product__meta {
	margin: var(--sch-space-sm) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sch-space-2xs) var(--sch-space-sm);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

/* Product Type in the meta line links to its taxonomy archive — matches the
   Film / Photography singles' treatment. It sits inline with non-link meta,
   so an underline is the non-colour cue that keeps it distinguishable
   (WCAG 1.4.1). */
.schusei-product__meta a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.schusei-product__meta a:hover,
.schusei-product__meta a:focus-visible {
	color: var(--sch-text);
}

/* ------------------------------------------------------------- hero */
.schusei-product__hero {
	margin: var(--sch-space-xl) 0 0;
}

.schusei-product__hero-image {
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------- body */
.schusei-product__body {
	font-size: var(--sch-text-body);
}

/* --------------------------------------------------- price / buy area */
.schusei-product__purchase {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sch-space-sm) var(--sch-space-lg);
	padding-top: var(--sch-space-lg);
	border-top: 1px solid var(--sch-border);
}

.schusei-product__price {
	font-size: var(--sch-text-heading);
	font-weight: 400;
	color: var(--sch-text);
}

/* Restrained text treatment — no colour block, no rounded button. */
.schusei-product__buy {
	display: inline-block;
	padding-bottom: var(--sch-space-3xs);
	border-bottom: 1px solid var(--sch-accent-warm);
	font-size: var(--sch-text-nav);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sch-accent-warm);
}

.schusei-product__buy:hover,
.schusei-product__buy:focus-visible {
	color: var(--sch-text);
	border-bottom-color: var(--sch-text);
}

/* ---------------------------------------------- free-form detail fields */
/* Compatibility / What's Included / Download Instructions — each is
   free-form text, not a short label/value pair, so it gets its own
   labelled section rather than the .schusei-meta-list grid. */
.schusei-product__field {
	margin-top: var(--sch-space-xl);
}

.schusei-product__field-text {
	margin-top: var(--sch-space-sm);
	max-width: var(--sch-measure);
	color: var(--sch-text-secondary);
	font-size: var(--sch-text-small);
	line-height: var(--sch-leading-snug);
}

/* -------------------------------------------------- image-aware gallery */
.schusei-product__gallery-section {
	margin-top: var(--sch-space-xl);
}

.schusei-product-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sch-space-xl);
	justify-items: center;
}

.schusei-product-gallery .schusei-gallery__item {
	margin: 0;
	width: 100%;
	text-align: center;
}

/* width:auto + max-height caps tall portrait frames so they are exhibited,
   not oversized; landscape stays wide. No object-fit, so nothing is cropped.
   Implemented locally — the same technique photography.css uses, not shared
   code. (Matches the Photography single gallery; the archive card keeps its
   own tighter 70vh cap above.) */
.schusei-product-gallery .schusei-gallery__image {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80vh;
}

.schusei-product-gallery .schusei-gallery__caption {
	margin-top: var(--sch-space-2xs);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	color: var(--sch-text-secondary);
}

/* ------------------------------------------- purchase: unavailable + info */
/* Phase 5A. Shown when a price is set but there is no usable checkout URL —
   the product simply is not buyable right now. Quiet, not an error colour;
   sits inline in the existing .schusei-product__purchase row. */
.schusei-product__unavailable {
	font-size: var(--sch-text-nav);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

/* Restrained pre-checkout note + policy links, directly under the price/Buy
   row. Only rendered when a usable Buy link exists. */
.schusei-product__purchase-info {
	margin-top: var(--sch-space-md);
	max-width: var(--sch-measure);
}

.schusei-product__purchase-note {
	margin: 0;
	font-size: var(--sch-text-small);
	line-height: var(--sch-leading-snug);
	color: var(--sch-text-secondary);
}

.schusei-product__purchase-links {
	margin: var(--sch-space-2xs) 0 0;
	font-size: var(--sch-text-small);
	line-height: var(--sch-leading-snug);
	color: var(--sch-text-secondary);
}

.schusei-product__purchase-links a {
	color: var(--sch-text-secondary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.schusei-product__purchase-links a:hover,
.schusei-product__purchase-links a:focus-visible {
	color: var(--sch-text);
}

/* ------------------------------------------------------- previous / next */
.schusei-product__pager {
	display: grid;
	gap: var(--sch-space-md);
	padding-top: var(--sch-space-lg);
	border-top: 1px solid var(--sch-border);
}

.schusei-product__pager-link {
	display: flex;
	flex-direction: column;
	gap: var(--sch-space-3xs);
	text-decoration: none;
	color: var(--sch-text-secondary);
}

.schusei-product__pager-dir {
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

.schusei-product__pager-title {
	font-size: var(--sch-text-small);
	color: var(--sch-text);
}

.schusei-product__pager-link:hover .schusei-product__pager-title,
.schusei-product__pager-link:focus-visible .schusei-product__pager-title {
	color: var(--sch-accent-warm);
}

@media (min-width: 40em) {
	.schusei-product__pager {
		grid-template-columns: 1fr 1fr;
	}

	.schusei-product__pager-link--next {
		text-align: right;
	}
}