/* ==========================================================================
   Market pages (product_country) only.
   Loaded via wp_enqueue_style on is_singular('product_country') — every selector
   is scoped to .market / .mkt- so nothing here affects any other template.
   Tokens (--olive, --gold, --line, --radius, --serif …) come from critical.css.
   ========================================================================== */

.market {
	--mkt-band: #f0f4f1;
}

/* ---- Hero ------------------------------------------------------------- */
.mkt-hero {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	align-items: center;
	margin: 1.25rem 0 2.75rem;
}
.mkt-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .78rem;
	font-weight: 700;
	color: var(--gold-dark);
	margin: 0 0 .75rem;
}
.mkt-hero__title {
	font-size: clamp(1.9rem, 4.4vw, 2.9rem);
	line-height: 1.1;
	margin: 0 0 .9rem;
}
.mkt-hero__lead {
	font-size: 1.14rem;
	color: var(--muted);
	margin: 0 0 1.4rem;
	max-width: 46ch;
}
.mkt-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1.1rem;
}
.mkt-hero__note {
	font-size: .88rem;
	color: var(--muted);
	margin: 0;
}
.mkt-hero__media {
	margin: 0;
}
.mkt-hero__media img {
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* MOQ pill in the hero */
.mkt-moq-pill {
	display: inline-flex;
	align-items: baseline;
	gap: .5rem;
	background: var(--gold-soft);
	border: 1px solid var(--gold);
	border-radius: 100px;
	padding: .5rem 1rem;
	font-size: .9rem;
	color: #4a3410;
	margin-bottom: 1.1rem;
}
.mkt-moq-pill strong {
	font-weight: 700;
	color: #3a2909;
}

/* ---- Fact strip (own class — does not touch the shared .fact-strip) --- */
.mkt-facts {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 1.4rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1.4rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.mkt-facts__label {
	display: block;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	font-weight: 700;
}
.mkt-facts__value {
	display: block;
	font-weight: 600;
	color: var(--olive-deep);
	margin-top: .3rem;
	font-size: 1.02rem;
}

/* ---- MOQ block ------------------------------------------------------- */
.mkt-moq {
	background: var(--olive-deep);
	color: #eaf2ec;
	border-radius: var(--radius);
	padding: clamp(1.6rem, 4vw, 2.4rem);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	align-items: start;
}
.mkt-moq__mark {
	font-family: var(--serif);
	font-size: clamp(2.4rem, 6vw, 3.4rem);
	line-height: 1;
	color: var(--gold);
}
.mkt-moq h2 {
	color: #fff;
	font-size: 1.4rem;
	margin: 0 0 .6rem;
}
.mkt-moq p {
	margin: 0 0 .7rem;
	color: #d7e4dd;
	max-width: 60ch;
}
.mkt-moq p:last-child {
	margin-bottom: 0;
}

/* ---- Buyer-information cards --------------------------------------- */
.mkt-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}
.mkt-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 3px solid var(--olive-mid);
	border-radius: var(--radius);
	padding: 1.6rem;
}
.mkt-card h3 {
	font-size: 1.15rem;
	margin: 0 0 .9rem;
}
.mkt-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .6rem;
}
.mkt-card li {
	position: relative;
	padding-left: 1.6rem;
	font-size: .96rem;
	color: var(--ink);
}
.mkt-card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .34em;
	width: .8rem;
	height: .8rem;
	border: 2px solid var(--olive);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}

/* ---- Second photo / figure --------------------------------------- */
.mkt-figure {
	margin: 0;
}
.mkt-figure img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.mkt-figure figcaption {
	font-size: .82rem;
	color: var(--muted);
	margin-top: .6rem;
}
.mkt-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 5vw, 3rem);
	align-items: center;
}
.mkt-split > * {
	min-width: 0;
}
.mkt-split--wide {
	grid-template-columns: 1fr;
}

/* ---- Routing / spec tables (min-width:0 keeps mobile from overflowing) */
.mkt-tablewrap {
	min-width: 0;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	-webkit-overflow-scrolling: touch;
}
.mkt-tablewrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
	min-width: 380px;
}
.mkt-tablewrap th,
.mkt-tablewrap td {
	text-align: left;
	padding: .75rem .9rem;
	border-bottom: 1px solid var(--line);
}
.mkt-tablewrap thead th {
	background: var(--sand);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--olive-deep);
}
.mkt-tablewrap tbody tr:last-child th,
.mkt-tablewrap tbody tr:last-child td {
	border-bottom: 0;
}
.mkt-tablewrap th[scope="row"] {
	color: var(--muted);
	font-weight: 600;
	width: 42%;
}
.mkt-tables {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}
.mkt-tables > div {
	min-width: 0;
}
.mkt-table-note {
	font-size: .82rem;
	color: var(--muted);
	margin-top: .7rem;
}

/* ---- Documentation / trust list -------------------------------- */
.mkt-docs {
	background: var(--mkt-band);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(1.6rem, 4vw, 2.2rem);
}
.mkt-docs h2 {
	font-size: 1.3rem;
	margin: 0 0 1rem;
}
.mkt-docs ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: .7rem 1.6rem;
}
.mkt-docs li {
	position: relative;
	padding-left: 1.7rem;
	color: var(--ink);
	font-size: .96rem;
}
.mkt-docs li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: .85rem;
	height: .85rem;
	border: 2px solid var(--olive-mid);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}

/* ---- Why Fovarya (this market) ------------------------------- */
.mkt-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
}
.mkt-why__item h3 {
	font-size: 1.1rem;
	margin: 0 0 .4rem;
}
.mkt-why__item p {
	margin: 0;
	color: var(--muted);
	font-size: .96rem;
}

/* ---- Section rhythm on market pages -------------------------- */
.market .section {
	padding-block: clamp(2.4rem, 5.5vw, 4rem);
}
.market .section__title {
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	margin-bottom: 1.4rem;
}
.market .prose h2 {
	font-size: 1.5rem;
	margin-top: 2.4rem;
}
.market .prose h2:first-child {
	margin-top: 0;
}
.market .faq__list {
	max-width: none;
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 900px) {
	.mkt-hero {
		grid-template-columns: 1fr;
	}
	.mkt-hero__media {
		order: -1;
	}
	.mkt-hero__media img {
		max-height: 300px;
	}
	.mkt-split {
		grid-template-columns: 1fr;
	}
	.mkt-tables {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.mkt-moq {
		grid-template-columns: 1fr;
		gap: .6rem;
	}
	.mkt-hero__cta .btn {
		width: 100%;
	}
}