/* ============================================================
   ABH — Responsive overrides
   Only token shifts + structural breakpoint behavior live here.
   No new component CSS. Three breakpoints, same tokens.
   ============================================================ */

@media (max-width: 1024px) {
	:root {
		--t-h1:    56px;
		--t-h2:    40px;
		--s-7:     80px;
		--gutter:  20px;
	}

	.site-header__inner { grid-template-columns: 1fr auto; }
	.nav { display: none; }
	.hamburger { display: inline-flex; }

	.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-5); }
	.foot-col--reach { grid-column: 1 / -1; }
	.newsletter-band__inner { grid-template-columns: 1fr; gap: var(--s-4); }

	/* Hero stacks at tablet */
	.hero__inner { grid-template-columns: 1fr; min-height: 0; }
	.hero__media { aspect-ratio: 16 / 9; }
	.hero__copy { padding: var(--s-7) var(--s-5); max-width: 100%; }

	/* Strip → 2-col grid, drop dividers, items keep vertical icon→label,
	   labels can wrap to multiple lines now */
	.strip__row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s-5) var(--s-4);
		flex-wrap: wrap;
	}
	.strip__item { padding: 0 !important; border: 0 !important; flex: initial; }
	.strip__item + .strip__item { border-left: 0 !important; }
	.strip__label { white-space: normal; }

	/* Categories — collapse to 2-col regardless of count */
	.cats-grid,
	.cats-grid--3,
	.cats-grid--4,
	.cats-grid--5,
	.cats-grid--6 {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		grid-auto-rows: 280px;
	}
	.cats-grid--3 .cat--feature,
	.cats-grid--5 .cat--feature { grid-row: span 2; grid-column: span 2; }

	/* Journal → 2 cols */
	.journal { grid-template-columns: repeat(2, 1fr); }

	/* Section row stacks the CTA */
	.section-row { align-items: flex-start; }

	/* Story stacks */
	.story { grid-template-columns: 1fr; gap: var(--s-5); }
	.story__media { aspect-ratio: 16 / 11; }
	.story__stat { right: var(--s-3); bottom: var(--s-3); min-width: 0; padding: var(--s-3) var(--s-4); }

	/* Banner shorter, copy full-width */
	.banner { aspect-ratio: 16 / 10; min-height: 380px; }
	.banner__copy-wrap { padding: 0 var(--gutter) var(--s-5); }
	.banner__copy { max-width: 100%; }

	/* Testimonials slider → 2 cards at tablet */
	.tst { flex: 0 0 calc((100% - var(--s-4)) / 2) !important; }

	/* In-page newsletter stacks */
	.news { grid-template-columns: 1fr; gap: var(--s-4); }

	/* Swatches → 4 across */
	.swatches { grid-template-columns: repeat(4, 1fr); }
	.swatch__circle { width: 76px; height: 76px; }

	/* Wholesale band stacks */
	.ws-band { grid-template-columns: 1fr; gap: var(--s-5); }
	.ws-stats { grid-template-columns: repeat(4, 1fr); }

	/* Contact 2-col → stack */
	.contact { grid-template-columns: 1fr; gap: var(--s-5); }

	/* Team / values stay auto-fit, but fabric library at narrower viewports */
	.fabric-library { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

	/* Single post author card stacks on tablet/mobile */
	.post-author {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-3);
	}

	/* Single post body — drop type size for smaller screens */
	.post-content { font-size: var(--t-body); }
	.post-content blockquote { font-size: var(--t-lead); padding: var(--s-3) var(--s-4); }

	/* Page hero — drop the 50vh so the title doesn't eat the whole screen */
	.page-hero {
		min-height: 0;
		padding-block: var(--s-6);
	}
}


@media (max-width: 720px) {
	:root {
		--t-h1:      40px;
		--t-h2:      28px;
		--t-h3:      24px;
		--t-lead:    17px;
		--s-7:       64px;
		--header-h:  72px;
		--ann-h:     auto;
		--gutter:    20px;
	}

	/* Announcement bar — let long messages wrap, kill the absolute overlap */
	.ann {
		height: auto;
		min-height: 36px;
		padding-block: var(--s-2);
		padding-inline: var(--s-3) 36px;
		text-align: center;
	}
	.ann__rotator { position: static; height: auto; }
	.ann__msg {
		position: static;
		display: none;
		opacity: 1;
		transform: none;
		white-space: normal;
		line-height: 1.4;
		font-size: 12.5px;
	}
	.ann__msg.is-active { display: block; }

	.footer-grid { grid-template-columns: 1fr; gap: var(--s-5); }
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-3);
	}
	.site-footer__strip {
		flex-direction: column;
		align-items: flex-start;
	}
	.newsletter-band__form { flex-direction: column; }
	.newsletter-band__form input[type="email"] { width: 100%; }
	.newsletter-band__form .btn { width: 100%; }

	/* ── Mobile tab bar — fixed bottom, 4 equal-width app-style tabs ── */
	.tabbar {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 64px;
		background: var(--bg);
		border-top: 1px solid var(--line);
		box-shadow: 0 -4px 16px rgba(17,17,17,.06);
		z-index: 60;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		color: var(--ink);
		font-size: 0;          /* hide label text by default; show via .tabbar__label */
		text-decoration: none;
		min-width: 0;
		padding: var(--s-2);
		background: transparent;
		border: 0;
		cursor: pointer;
	}
	.tabbar__item i { font-size: 19px; line-height: 1; }
	.tabbar__label {
		font-size: 10px;
		line-height: 1;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		font-weight: var(--w-med);
		color: var(--ink);
	}
	.tabbar__item:hover .tabbar__label,
	.tabbar__item:hover i { color: var(--accent); }

	/* Hide the regular header action icons on mobile (everything except
	   the hamburger). They live in the tabbar now. */
	.site-header .actions .icon-btn:not(.hamburger) { display: none; }

	/* Lift floating WhatsApp button so it doesn't sit on top of the tabbar */
	.float-wa { width: 52px; height: 52px; right: var(--s-3); bottom: calc(64px + var(--s-3)); }
	.float-wa i { font-size: 24px; }

	/* Page bottom padding so content doesn't end up under the fixed bar */
	body { padding-bottom: 64px; }

	/* Mobile component overrides */
	.hero__copy { padding: var(--s-6) var(--s-4); }
	.hero__media { aspect-ratio: 4 / 3; }
	.strip__row {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--s-3);
	}
	.journal { grid-template-columns: 1fr; gap: var(--s-4); }

	/* Testimonials slider: exactly 1 card visible per view */
	.tst { flex: 0 0 100%; min-width: 100%; }
	.tst-grid { gap: var(--s-3); }

	/* Categories → 1 col stack */
	.cats-grid,
	.cats-grid--3,
	.cats-grid--4,
	.cats-grid--5,
	.cats-grid--6 {
		grid-template-columns: 1fr;
		grid-auto-rows: 240px;
	}
	.cats-grid--3 .cat--feature,
	.cats-grid--5 .cat--feature { grid-row: span 1; grid-column: span 1; }

	.swatches { grid-template-columns: repeat(3, 1fr); }
	.banner__title { font-size: var(--t-h3); }
	.news__form { flex-direction: column; }
	.news__form input[type="email"], .news__form .btn { width: 100%; }

	.ws-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
	.ws-stat { padding: var(--s-3); }
	.ws-stat__num { font-size: var(--t-h3); }
}


@media (max-width: 720px) {
	.brand .brand__logo,
	.brand > img {
		height: 36px !important;
		max-height: 36px !important;
		max-width: 160px !important;
	}
	.brand--footer .brand__logo,
	.brand--footer > img {
		height: 44px !important;
		max-height: 44px !important;
		max-width: 200px !important;
	}
}

@media (max-width: 480px) {
	.brand .brand__logo,
	.brand > img {
		height: 32px !important;
		max-height: 32px !important;
		max-width: 140px !important;
	}
	.btn { padding: 0 var(--s-4); }

	.hero__title { font-size: 36px; }

}