/* Main Page only. Section order is fixed in front-page.php; this file is
   purely visual and can be redesigned without touching any other template. */

/* Hero — editorial split: text left, product photo right, light background.
   Each slide (permanent + rotating) shares this layout. */
.hero { background: var(--color-bg); }
.hero__viewport { width: 100%; position: relative; overflow: hidden; }
.hero__track {
	display: flex;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.hero__track::-webkit-scrollbar { display: none; }
/* Each slide is exactly 100% of the track, full stop — this is the fix for
   adjacent slides peeking on desktop. The previous desktop rule capped each
   slide's own box to max-width:1280px (with margin-inline:auto), which
   shrinks a flex item below its flex-basis: the item then only occupies
   1280px of track space instead of the full 100% (viewport width), so the
   next slide's box starts hundreds of pixels early and became visible
   alongside the active one. The desktop container-width look is preserved
   below via padding (which border-box keeps inside the 100% box) instead
   of max-width (which shrinks the box itself). */
.hero__slide {
	display: grid;
	grid-template-columns: 1fr;
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	scroll-snap-align: start;
	gap: var(--space-5);
	padding: var(--space-6) var(--space-4) var(--space-6);
}
@media (max-width: 639px) {
	.hero__slide { gap: var(--space-4); padding-block: var(--space-5); }
}
@media (min-width: 768px) {
	.hero__slide {
		grid-template-columns: 44% 1fr;
		align-items: center;
		gap: var(--space-7);
		padding: var(--space-7) var(--space-6);
	}
}
@media (min-width: 1024px) {
	.hero__slide {
		padding-inline: max(var(--space-6), calc((100% - var(--container-max)) / 2));
	}
}
.hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}
.hero__eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
	margin-bottom: var(--space-3);
}
.hero__title {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-text);
	font-size: var(--display-hero);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-bottom: var(--space-4);
}
@media (min-width: 1024px) {
	.hero__title { font-size: 3.5rem; } /* 56px — hero H1, desktop */
}
.hero__support {
	max-width: 42ch;
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}
@media (max-width: 639px) {
	/* Mobile type/rhythm refinement pass — desktop untouched (no rule above
	   this query is touched). --display-hero (40px) reads as 3–4 oversized
	   lines at phone widths; a dedicated mobile size/line-height fixes that
	   without touching the desktop 56px override. */
	.hero__eyebrow { font-size: var(--text-xs); margin-bottom: var(--space-2); }
	.hero__title { font-size: 2.05rem; line-height: 1.06; margin-bottom: var(--space-3); }
	.hero__support { font-size: 14.5px; line-height: 1.45; margin-bottom: var(--space-4); }
}
.hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	width: 100%;
}
@media (max-width: 639px) {
	.hero__trust { margin-top: var(--space-4); padding-top: var(--space-3); }
}
.hero__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	min-width: 0;
}
@media (min-width: 768px) {
	.hero__media { aspect-ratio: 5 / 4; }
}
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hero__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: var(--space-4) 0;
}
.hero__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--color-border);
}
.hero__dot.is-active { background: var(--color-accent); }

/* Categories — one row of 4 on desktop, horizontal snap scroll on mobile */
.categories__track {
	display: flex;
	gap: var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-inline: var(--space-4);
}
.categories__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
	.categories__track {
		padding-inline: var(--space-6);
		overflow-x: visible;
	}
}
@media (min-width: 1024px) {
	.categories__track { max-width: var(--container-max); margin-inline: auto; }
}
.category-card {
	display: block;
	flex: 0 0 78%;
	scroll-snap-align: start;
}
@media (min-width: 640px) {
	.category-card { flex-basis: 46%; }
}
@media (min-width: 1024px) {
	.category-card { flex: 1 1 0; }
}
.category-card__media {
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-cream);
}
.category-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 200ms ease;
}
.category-card:hover .category-card__media img { transform: scale(1.03); }
.category-card__body {
	display: block;
	padding-top: var(--space-3);
}
.category-card__label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--display-card);
	color: var(--color-text);
}
.category-card__desc {
	display: block;
	margin-top: var(--space-1);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Quick delivery — cream section background per brand book */
.quick-delivery {
	background: var(--color-cream);
}
.quick-delivery__intro { margin-bottom: var(--space-5); max-width: 60ch; }

/* Seasonal campaign — light editorial split, same language as the hero.
   Not a full-bleed dark banner. */
.campaign { background: var(--color-cream); }
.campaign__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
@media (min-width: 768px) {
	.campaign__grid { flex-direction: row; align-items: center; gap: var(--space-7); }
}
.campaign__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
@media (min-width: 768px) {
	.campaign__text { flex: 0 0 40%; }
}
.campaign__eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
	margin-bottom: var(--space-3);
}
.campaign__title {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-text);
	font-size: var(--display-h2);
	margin-bottom: var(--space-3);
}
@media (max-width: 639px) {
	/* Matches .section-title's mobile line-height so every homepage H2 reads
	   consistently — this is the one heading that doesn't share that class. */
	.campaign__title { line-height: 1.1; }
}
.campaign__body {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	margin-bottom: var(--space-5);
	max-width: 42ch;
}
.campaign__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	min-width: 0;
}
@media (min-width: 768px) {
	.campaign__media { flex: 1 1 0; aspect-ratio: 5 / 4; }
}
.campaign__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pickup */
.pickup__intro { max-width: 60ch; margin-bottom: var(--space-5); }
.pickup__locations {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 640px) {
	.pickup__locations { grid-template-columns: repeat(2, 1fr); }
}
.pickup__location {
	padding: var(--space-5);
	background: var(--color-surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}
.pickup__location-name {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--display-card);
	margin-bottom: var(--space-2);
}
.pickup__location-icon {
	flex-shrink: 0;
	color: var(--color-accent-dark);
}
.pickup__location-address { color: var(--color-text-muted); margin: 0 0 var(--space-1); }
.pickup__location-hours { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* Trust strip */
.trust {
	padding-block: var(--space-5);
	background: var(--color-cream);
}
.trust__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-6);
	justify-content: center;
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-text);
	font-weight: 500;
}
.trust__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.trust__icon {
	flex-shrink: 0;
	color: var(--color-accent-dark);
}

/* Instagram — partial-tile peek on mobile invites scrolling */
.instagram__grid {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.instagram__grid::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
	.instagram__grid { display: grid; grid-template-columns: repeat(6, 1fr); overflow-x: visible; }
}
.instagram__tile {
	display: block;
	flex: 0 0 46%;
	scroll-snap-align: start;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
	overflow: hidden;
}
@media (min-width: 768px) {
	.instagram__tile { flex: none; }
}
.instagram__tile img { width: 100%; height: 100%; object-fit: cover; }
.instagram__handle {
	display: inline-block;
	margin-top: var(--space-4);
	font-weight: 600;
	color: var(--color-accent);
}