/*
 * Shop page sections (hero, trust cards, product area columns, sidebar promo).
 * Everything is scoped to mnn-shop-* / .mnn-shop; colours, radius and type come from theme tokens.
 * Layout follows the approved Shop HTML; the demo's own CSS is not used.
 */

/* ---------- Breadcrumb above the hero ---------- */

.mnn-shop__crumbs {
	padding-block: 20px 12px;
}

/* ---------- Page-width frame for editable sections ---------- */

.mnn-shop-section {
	box-sizing: border-box;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3.75vw, 48px);
}

/* ---------- Hero ---------- */

.mnn-shop-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	box-sizing: border-box;
	min-height: 174px;
	padding: 29px 38px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: linear-gradient(110deg, var(--wp--preset--color--white) 45%, var(--wp--preset--color--cream) 100%);
}

.mnn-shop-hero > * {
	margin-block: 0;
}

.mnn-shop-hero__text > * {
	margin-block: 0;
}

.mnn-shop-hero__eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	line-height: 16px;
	text-transform: uppercase;
}

.mnn-shop-hero__text > h1 {
	margin-top: 8px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.75px;
	line-height: 37.5px;
}

.mnn-shop-hero__text > p:not(.mnn-shop-hero__eyebrow) {
	max-width: 550px;
	margin-top: 9px;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 24px;
}

.mnn-shop-hero > .wp-block-image {
	max-width: 320px;
}

.mnn-shop-hero > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

/* ---------- H1 printed by the product block while the hero is hidden ---------- */

.mnn-shop__titlebar {
	padding-block: 8px 4px;
}

.mnn-shop__title {
	margin: 0;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.75px;
	line-height: 37.5px;
}

/* ---------- Product area: 3 columns beside the sidebar, 2 on tablet and phone ---------- */

.mnn-shop .mnn-product-grid.mnn-cat-grid:not(.is-list) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.mnn-shop .mnn-product-grid.mnn-cat-grid:not(.is-list) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Sidebar promo (optional, Gutenberg blocks) ---------- */

.mnn-shop__promo > * {
	margin-block: 0;
}

.mnn-shop-promo {
	box-sizing: border-box;
	padding: 17px;
	border-radius: var(--wp--custom--radius--md);
	background: linear-gradient(140deg, var(--wp--preset--color--primary-dark), var(--wp--preset--color--primary));
	color: var(--wp--preset--color--white);
}

.mnn-shop-promo > * {
	margin-block: 0;
	color: inherit;
}

.mnn-shop-promo > * + * {
	margin-top: 8px;
}

.mnn-shop-promo h3 {
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.mnn-shop-promo p {
	font-size: 13px;
	line-height: 20px;
}

.mnn-shop-promo a {
	color: var(--wp--preset--color--gold-light);
}

/* ---------- Trust cards: reuse the homepage info cards, with Shop icons ---------- */

.mnn-section.mnn-shop-trust {
	padding-block: 8px 48px;
	background-color: transparent;
}

.mnn-info-card--transparent::before {
	background-image: url(../icons/info-shield.svg);
	background-size: 17.33px 21.67px;
}

.mnn-info-card--support::before {
	background-image: url(../icons/shop-support.svg);
	background-size: 22px 22px;
}

.mnn-info-card--catalog::before {
	background-image: url(../icons/shop-catalog.svg);
	background-size: 20px 20px;
}

.mnn-info-card--advice::before {
	background-image: url(../icons/shop-advice.svg);
	background-size: 22px 22px;
}

/* ---------- Phone ---------- */

@media (max-width: 599px) {
	.mnn-shop__crumbs {
		padding-block: 14px 8px;
	}

	.mnn-shop-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 140px;
		padding: 20px;
	}

	.mnn-shop-hero__text > h1,
	.mnn-shop__title {
		font-size: 23px;
		line-height: 30px;
	}

	.mnn-shop-hero__text > p:not(.mnn-shop-hero__eyebrow) {
		font-size: 13px;
		line-height: 21px;
	}

	.mnn-shop-hero > .wp-block-image {
		max-width: 100%;
	}

	.mnn-section.mnn-shop-trust {
		padding-block: 4px 32px;
	}
}
/* ---------- Hero with a background image set in Gutenberg ----------
 * The image chosen as the hero group's background becomes the banner itself: one compact rounded
 * block, text on the left over a soft light fade, picture visible on the right. Nothing is
 * hardcoded; without an image the hero keeps its plain gradient card above.
 */

.mnn-shop-section[style*="background-image"] {
	position: relative;
	max-width: min(1184px, calc(100% - 2 * clamp(16px, 3.75vw, 48px)));
	min-height: 174px;
	padding-inline: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-position: right center;
	background-repeat: no-repeat;
}

.mnn-shop-section[style*="background-image"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--white) 0%, rgba(255, 255, 255, 0.94) 38%, rgba(255, 255, 255, 0) 72%);
	pointer-events: none;
}

.mnn-shop-section[style*="background-image"] > .mnn-shop-hero {
	position: relative;
	min-height: 172px;
	border: 0;
	border-radius: 0;
	background: none;
}

@media (max-width: 599px) {
	.mnn-shop-section[style*="background-image"]::before {
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 100%);
	}
}

/* ---------- Product cards: image ratio closer to the approved layout ---------- */

.mnn-shop .mnn-product-card--catalog .mnn-product-card__media {
	aspect-ratio: 4 / 3;
}

.mnn-shop .mnn-product-card--catalog .mnn-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- Filter sidebar: compact groups ---------- */

.mnn-shop .mnn-cat-filters {
	gap: 12px;
}

/* ---------- Trust cards: compact, icon left (approved layout) ---------- */

.mnn-shop-trust .mnn-info-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 72px;
	padding: 14px 16px 14px 76px;
	border-radius: var(--wp--custom--radius--md);
}

.mnn-shop-trust .mnn-info-card::before {
	top: 50%;
	left: 16px;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
}

.mnn-shop-trust .mnn-info-card > .wp-block-heading {
	font-size: 14px;
	line-height: 20px;
}

.mnn-section .mnn-shop-trust .mnn-info-card > p,
.mnn-section.mnn-shop-trust .mnn-info-card > p {
	margin-top: 2px;
	font-size: 12px;
	line-height: 16px;
}