/* ==========================================================================
   Botigues page — mobile first. Desktop (>=1280px) = BOTIGUES2 Figma frame.
   ========================================================================== */

/* Hero (reuses .hero / .benefits from main.css) */

.hero--shops { border-bottom: 0; }

.hero--shops .hero__text { max-width: 427px; }

.hero--shops .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* Why a corner -------------------------------------------------------------- */

.why {
	position: relative;
	z-index: 2;
	margin: 0 var(--gutter);
	padding: 23px 20px 32px;
	border: 1px solid #f5f5f5;
	border-radius: 10px;
	background: #f5f5f5;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.why__title {
	color: var(--ink);
	font: 500 16px/1.2 var(--f-label);
}

.why__list {
	display: grid;
	gap: 32px;
	margin-top: 22px;
}

.why__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.why__icon { width: 88.44px; height: 88.44px; }

.why__item-title {
	margin-top: 22.5px;
	color: var(--green);
	font: 500 12px/1.1 var(--f-label);
	text-transform: uppercase;
}

.why__item-text {
	max-width: 204px;
	margin-top: 5px;
	font: 12px/1.2 var(--f-sans);
}

/* How it works ------------------------------------------------------------- */

.how {
	display: grid;
	gap: 40px;
	padding: 48px var(--gutter) 0;
}

.how__title {
	max-width: 279px;
	margin-top: 25.8px;
	color: var(--green);
	font: 400 32px/1 var(--f-serif);
}

.how__text {
	max-width: 273px;
	margin-top: 18px;
	color: var(--grey);
	font: 12px/1.2 var(--f-sans);
}

.how__btn,
.cta__btn {
	gap: .3em;
	min-width: 202px;
	margin-top: 24px;
	border-radius: 29px;
}

.how__steps {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(153px, 1fr));
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.step { position: relative; }

.step__image {
	width: 100%;
	max-width: 153px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
}

.step__number {
	margin-top: 12px;
	color: var(--green);
	font: 400 32px/1 var(--f-serif);
}

.step__title {
	margin-top: 10px;
	font: 400 14px/1.1 var(--f-label);
	text-transform: uppercase;
}

.step__text {
	margin-top: 5px;
	color: var(--grey);
	font: 12px/1.2 var(--f-sans);
}

/* Call to action banner ---------------------------------------------------- */

.cta {
	margin-top: 56px;
	margin-bottom: 51px;
}

.cta__media { height: 200px; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }

.cta__body {
	padding: 32px var(--gutter) 40px;
	background: rgba(0, 92, 12, .15);
}

.cta__title {
	color: var(--green);
	font: 400 32px/1 var(--f-serif);
}

.cta__text {
	max-width: 392px;
	margin-top: 17px;
	color: var(--ink);
	font: 12px/1.2 var(--f-sans);
}

.cta__features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 32px;
}

.cta__feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cta__feature-label {
	max-width: 118px;
	margin-top: 16px;
	font: 400 14px/1.1 var(--f-label);
	text-transform: uppercase;
}

/* Tablet ------------------------------------------------------------------- */

@media (min-width: 768px) {
	.hero--shops .benefits { grid-template-columns: repeat(3, 117px); gap: 46px; }
	.hero--shops .benefits__item,
	.hero--shops .benefits__item:nth-child(3) { width: auto; }

	.why { margin-top: -60px; padding: 23px 36px 32px; }
	.why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.how__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.cta { display: grid; grid-template-columns: 300px 1fr; }
	.cta__media { height: auto; }
}

/* Desktop — 1440px Figma frame --------------------------------------------- */

@media (min-width: 1280px) {
	/* Hero: image starts 140px left of centre; 527px tall. */
	.hero--shops { height: 527px; }
	.hero--shops .hero__media { left: calc(50% - 140px); }
	.hero--shops .benefits { margin-top: 38px; }

	/* Why card overlaps the hero by 43px. */
	.why {
		max-width: 1302px;
		height: 259px;
		margin: -43px auto 0;
		padding: 23px 0 0;
	}

	.why__title { padding-left: 46px; }

	.why__list {
		grid-template-columns: repeat(5, 204px);
		gap: 57px;
		margin-top: 21.8px;
		padding-left: 36px;
	}

	.why__item-title { margin-top: 22.56px; }

	/* How it works */
	.how {
		grid-template-columns: 356px 1fr;
		gap: 0;
		max-width: 1440px;
		height: 333px; /* Figma: section ends 1200px, CTA starts 61px later */
		margin: 0 auto;
		padding: 55px 0 0 64px;
	}

	.how__btn { width: 202px; padding: 0; }

	.how__eyebrow { padding-left: 1px; }
	.how__text { padding-left: 1px; }

	.how__steps {
		grid-template-columns: repeat(4, 153px);
		gap: 111px;
	}

	.step:not(:last-child)::after {
		content: "→" / "";
		position: absolute;
		top: 57px;
		left: calc(153px + 36px);
		color: var(--green);
		font: 400 40px/1 var(--f-ui);
	}

	/* CTA banner */
	.cta {
		grid-template-columns: 424px 1fr;
		height: 246px;
		margin-top: 61px;
	}

	.cta__body {
		display: flex;
		padding: 0;
	}

	.cta__content {
		flex: none;
		width: 444px;
		padding: 37px 0 0 50px;
	}

	.cta__title { max-width: 338px; }

	.cta__btn { margin-top: 23.2px; }

	.cta__features {
		grid-template-columns: repeat(3, 176px);
		gap: 0;
		margin-top: 35px;
		align-self: flex-start;
	}

	.cta__feature {
		height: 176px;
		padding-top: 15px;
		border-left: 1px solid var(--green);
	}

	.cta__feature-label { margin-top: 15.6px; }
}