/* 

==========================================================================
   Two-column hero layout
   ========================================================================== */

/* Vertical rhythm between the stacked page blocks (hero → key facts →
   secondary → variations) is owned consistently by each block's top margin
   (var(--space-8)); the hero, being first, carries none. */
.marketplace-product__hero {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: var( --space-8, 2rem );
	align-items: start;

}

/* No product image: the hero would otherwise be a lonely left column on a wide
   empty band. Seat it on the house paper panel (same surface as the sticky
   aside card) so the brand, title and provenance have a frame. */
.marketplace-product__hero--no-image {
	grid-template-columns: 1fr;
	padding: var( --space-6, 1.5rem ) var( --space-8, 2rem );
	background: #faf8f3;
	border: 1px solid #e6e2d8;
	border-radius: 10px;

}

.marketplace-product__image-col {
	position: sticky;
	top: 2rem;

}

.marketplace-product__info-col {
	display: flex;
	flex-direction: column;
	gap: var( --space-4, 1rem );

}

/* Secondary section: batch, documents, notes — full width below the hero */

.marketplace-product__secondary {
	display: flex;
	flex-direction: column;
	gap: var( --space-6, 1.5rem );
	margin-top: var( --space-8, 2rem );

}

/* Post-hero content column: the brand-style facts row and the description prose.
   A plain block (NOT the legacy .marketplace-product__body grid in style.css, which
   is a 1fr + sidebar layout) centred to the single-page reading measure. Padding,
   not margin, owns the top gap so it can't collapse and glue the facts row to the
   hero panel above it. */
.marketplace-product__content {
	max-width: var( --single-content-width );
	margin: 0 auto;
	padding-top: var( --space-12, 3rem );

}

/* A linked fact value (producer / distiller → their brand page). Keeps the value
   weight; only the link is underlined so the fact still reads as one. */
.marketplace-product__fact-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid color-mix( in srgb, currentColor 35%, transparent );

}

.marketplace-product__fact-link:hover,
.marketplace-product__fact-link:focus {
	border-bottom-color: currentColor;

}

/* Description prose: with no sidebar, cap the measure for comfortable reading
   instead of letting it run the full body width. */
.marketplace-product__description {
	max-width: 68ch;

}

/* A product can have several production batches; each renders as its own block in
   the secondary column (provenance chapters + that batch's documents). When there is
   more than one, a serif heading and a top divider set the production runs apart; a
   single batch shows neither, so the common case looks unchanged. */
.marketplace-product__batch {
	display: flex;
	flex-direction: column;
	gap: var( --space-6, 1.5rem );
}

.marketplace-product__batch + .marketplace-product__batch {
	padding-top: var( --space-8, 2rem );
	border-top: 1px solid var( --border-light, var( --gray-200 ) );
}

/* Batch heading reuses the shared section-title style (mp-single__section-title);
   only the margin is reset here because the batch block's flex gap owns the spacing
   below it. */
.marketplace-product__batch-title {
	margin: 0;
}

.marketplace-product__batch-when {
	margin-left: 0.5rem;
	font-size: 0.95rem;
	font-weight: 400;
	color: var( --text-secondary );
}

/* Simple-product price (shown when a product has no variations). Rendered as
   normal body text, not an emphasised figure. */
.marketplace-product__price-value {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	color: var( --text-primary );
}

/* VAT note next to a price (e.g. "incl. 21% VAT"). Muted and spaced so it reads
   as a qualifier, never glued to the amount. */
.marketplace-product__price-vat {
	margin: var( --space-1, 0.25rem ) 0 0;
	font-size: 0.85rem;
	font-weight: 400;
	color: var( --text-secondary, #6b6b6b );
}

.marketplace-product__variation-price .marketplace-product__price-vat {
	display: block;
}

/* Variations (product-tech) render below the details, above "Where to buy".
   Same top margin as the other blocks so the vertical spacing is uniform. */

.marketplace-product__variations {
	margin-top: var( --space-8, 2rem );
}

/* Remove the extra top margin on "Where to buy" — info-col gap handles spacing */

.marketplace-product__info-col .mp-sp-section {
	margin-top: 0;

}

/* Labelling-language mismatch notice */

.marketplace-product__labelling {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	padding: 0.75rem 1rem;
	background: var( --surface-muted, #f5f1e8 );
	border-left: 4px solid var( --secondary, #b8941f );
	border-radius: 3px;
	font-size: 1rem;
	color: var( --text-primary );
	line-height: 1.4;

}

.marketplace-product__labelling-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var( --secondary, #b8941f );

}

@media ( max-width: 680px ) {

	.marketplace-product__hero {
		grid-template-columns: 1fr;

	}

	.marketplace-product__image-col {
		position: static;

	}

	/* Variations table can be scrollable in case attribute text is long. */
	.marketplace-product__variation-table {
		display: block;
		overflow-x: auto;

	}

}

/* ==========================================================================
   Product image (1200 × 900 px / 4:3)
   ========================================================================== */

.marketplace-product__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var( --radius-md, 8px );

}

/* ==========================================================================
   Brand logo + brand name fallback
   ========================================================================== */

.marketplace-product__brand-name {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --secondary, #b8941f );

}

.marketplace-product__brand-link {
	display: inline-flex;
	text-decoration: none;
}

.marketplace-product__brand-logo {
	display: block;
	max-height: 96px;
	max-width: 360px;
	width: auto;
	height: auto;
	object-fit: contain;

}

/* ==========================================================================
   Where to buy — sales points grid on single product page
   ========================================================================== */

.mp-sp-section {
	margin-top: 2rem;

}

.mp-sp-section--loading {
	opacity: 0.5;
	pointer-events: none;

}

/* Status / empty state. The grid + card moved to the shared store-card.css
   (enqueued on both the product and brand pages) so the two render identically. */

.mp-sp-status {
	margin-top: 0.75rem;
	color: var( --text-secondary );

}

/* ===========================
   Chapters — herbal field-guide grid of provenance sections
   =========================== */

.marketplace-product__chapters {
	display: grid;
	/* 280px min lets four cards share one row at desktop width; a fifth or sixth
	   card no longer fits under the 1440px cap and wraps to a tidy next row. */
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: var(--space-6);
	max-width: var(--content-max-width);
}

.marketplace-product__chapter {
	position: relative;
	padding: var(--space-8);
	border-radius: var(--radius-md);
	background: var(--gray-50);
	overflow: hidden;
}

.marketplace-product__chapter::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--text-tertiary);
	opacity: 0.6;
}

/* Per-chapter accent tint + edge stripe colour. */

.marketplace-product__chapter--terroir {
	background: color-mix( in srgb, var(--brand-sage) 7%, var(--bg-primary) );
}

.marketplace-product__chapter--terroir::before {
	background: var(--brand-sage);
	opacity: 1;
}

.marketplace-product__chapter--cultivation {
	background: color-mix( in srgb, var(--brand-forest) 6%, var(--bg-primary) );
}

.marketplace-product__chapter--cultivation::before {
	background: var(--brand-forest);
	opacity: 1;
}

.marketplace-product__chapter--processing {
	background: color-mix( in srgb, var(--brand-amber) 8%, var(--bg-primary) );
}

.marketplace-product__chapter--processing::before {
	background: var(--brand-amber);
	opacity: 1;
}

.marketplace-product__chapter--traceability {
	background: var(--bg-secondary);
}

.marketplace-product__chapter--traceability::before {
	background: var(--text-secondary);
	opacity: 1;
}

.marketplace-product__chapter--shelf {
	background: var(--bg-secondary);
}

.marketplace-product__chapter--shelf::before {
	background: var(--text-tertiary);
	opacity: 1;
}

.marketplace-product__chapter--notes {
	background: color-mix( in srgb, var(--brand-lavender) 6%, var(--bg-primary) );
	grid-column: 1 / -1;
}

.marketplace-product__chapter--notes::before {
	background: var(--brand-lavender);
	opacity: 1;
}

/* Chapter head: icon + serif title */

.marketplace-product__chapter-head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.marketplace-product__chapter-icon {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	color: var(--text-primary);
	flex-shrink: 0;
}

.marketplace-product__chapter--terroir      .marketplace-product__chapter-icon { color: var(--brand-sage-dark); }
.marketplace-product__chapter--cultivation  .marketplace-product__chapter-icon { color: var(--brand-forest); }
.marketplace-product__chapter--processing   .marketplace-product__chapter-icon { color: var(--brand-amber-dark); }
.marketplace-product__chapter--traceability .marketplace-product__chapter-icon { color: var(--text-secondary); }
.marketplace-product__chapter--shelf        .marketplace-product__chapter-icon { color: var(--text-tertiary); }
.marketplace-product__chapter--notes        .marketplace-product__chapter-icon { color: var(--brand-lavender-dark); }

.marketplace-product__chapter-icon svg {
	width: 28px;
	height: 28px;
	stroke-width: 1.6;
}

.marketplace-product__chapter-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-serif);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--text-primary);
}

/* Chapter data list */

.marketplace-product__chapter-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
}

.marketplace-product__chapter-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.15rem;
	padding-bottom: var(--space-3);
	border-bottom: 1px solid color-mix( in srgb, var(--text-tertiary) 18%, transparent );
}

.marketplace-product__chapter-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.marketplace-product__chapter-row dt {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-tertiary);
}

.marketplace-product__chapter-row dd {
	margin: 0;
	color: var(--text-primary);
}

/* Notes chapter renders prose, not a dl */

.marketplace-product__chapter-notes {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--text-primary);
	font-style: italic;
}

.marketplace-product__chapter-notes p {
	margin: 0 0 var(--space-3);
}

.marketplace-product__chapter-notes p:last-child {
	margin-bottom: 0;
}

/* ===========================
   Mobile overrides for chapters
   Placed at the end of the file so they win the cascade against the
   desktop grid declarations above.
   =========================== */

@media ( max-width: 680px ) {

	/* Stack chapter cards one below the other, kept inside the page-container's
	   side padding so they hold a margin from the screen edges on mobile. */
	.marketplace-product__chapters {
		grid-template-columns: 1fr;
		gap: var(--space-4);
		margin: var(--space-8) 0;
		max-width: none;
	}

	/* Tighter chapter padding so the data column doesn't feel claustrophobic
	   inside the cream tinted card on a phone. */
	.marketplace-product__chapter {
		padding: var(--space-4);
	}

}