/*
 * Responsive — everything below the approved 1180px desktop.
 *
 * The approved design is desktop-only (handoff/RESPONSIVE.md). Below 1180px
 * nothing was drawn, so this sheet is the handoff's written adaptation rules
 * carried out as literally as possible: tablet from 768 to 1179px, phone at
 * 767px and under, two-column splits holding side by side down to 900px. The
 * governing rule is the handoff's own — preserve the desktop's proportions and
 * spacing ratios rather than invent arrangements — so most of what follows
 * changes a column count, a token or a height, and leaves the rest alone.
 *
 * Everything sits inside max-width queries, so the desktop the pixel harness
 * verifies is untouched. Loaded after every other sheet, so equal-specificity
 * rules here win by order.
 *
 * Not client-approved: annotated captures at four widths go to the client for
 * sign-off before launch.
 */

/* Present at every width so the markup is one thing; drawn only where used. */
.al-nav__toggle {
	display: none;
}

.al-nav__links .al-nav__item--search {
	display: none;
}

.al-buy__price {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Tablet — 768 to 1179px
 * ------------------------------------------------------------------------ */
@media (max-width: 1179px) {
	:root {
		--al-page-padding: 32px;
		--al-hero-indent: 48px;
	}

	/* The desktop lock; the layout now bends instead. */
	body {
		min-width: 0;
	}

	/* Nav: logo, then the utilities, then the menu button; links fold below. */
	.al-nav {
		flex-wrap: wrap;
	}

	.al-nav__utils {
		order: 2;
		margin-left: auto;
	}

	.al-nav__toggle {
		order: 3;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-left: 14px;
		border: 1px solid var(--al-border-cart-pill);
		border-radius: var(--al-radius-pill);
		background: transparent;
		color: var(--al-plum-light);
		cursor: pointer;
		transition: border-color var(--al-transition), background var(--al-transition);
	}

	.al-nav__toggle:hover,
	.al-nav.is-open .al-nav__toggle {
		border-color: var(--al-lavender);
		background: var(--al-lavender-t1);
	}

	.al-nav__links {
		order: 4;
		flex-basis: 100%;
		display: none;
		flex-direction: column;
		gap: 0;
		padding-top: 10px;
	}

	.al-nav.is-open .al-nav__links {
		display: flex;
	}

	.al-nav__links li {
		display: block;
	}

	.al-nav__link {
		display: block;
		padding: 13px 0;
		border-top: 1px solid var(--al-border-nav);
	}

	/* Product grids 4 → 2, kits 3 → 2, collections 5 → 3, footer 4 → 2 × 2. */
	.al-grid--4,
	.al-grid--3,
	.al-grid--strip,
	.al-home-grid,
	.al-events-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.al-home-tiles {
		grid-template-columns: repeat(3, 1fr);
	}

	.al-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.al-dot-list {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Six steps become two rows of three; the connector only made sense in a line. */
	.al-steps-row {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 28px;
	}

	.al-steps-row__rule {
		display: none;
	}

	.al-value-strip {
		flex-wrap: wrap;
		gap: 24px 40px;
	}

	.al-help-jump__inner {
		flex-wrap: wrap;
	}

	.al-hero__text {
		max-width: 420px;
	}
}

/* ---------------------------------------------------------------------------
 * Two-column splits hold side by side to 900px, then stack.
 * ------------------------------------------------------------------------ */
@media (max-width: 899px) {
	.al-product,
	.al-personal,
	.al-cart__body,
	.al-checkout,
	.al-story,
	.al-events-split,
	.al-events-quote__grid {
		grid-template-columns: 1fr;
	}

	.al-product {
		gap: 32px;
	}

	.al-cart__body,
	.al-checkout {
		gap: 40px;
	}

	/* Nothing to stick beside once the column is the page. */
	.al-product__panel,
	.al-summary,
	.al-personal__preview {
		position: static;
	}

	.al-story__text,
	.al-events-split__body,
	.al-product__lede {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * Phone — 767px and under
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
	:root {
		--al-page-padding: 20px;
		--al-hero-indent: 20px;
		--al-section-padding: 56px;
		--al-section-padding-lg: 64px;
		--al-footer-padding-top: 48px;
		--al-grid-gap-footer: 32px;

		/* The handoff's three ratios — 62 → 34, 48 → 30, 44 → 28 — applied to every H1 family. */
		--al-h1-home: 34px;
		--al-h1-category: 30px;
		--al-h1-personal: 32px;
		--al-h1-about: 32px;
		--al-h1-help: 30px;
		--al-h1-product: 28px;
		--al-h1-search: 28px;
		--al-h1-confirm: 30px;

		--al-h2-lg: 30px;
		--al-h2-quote: 28px;
		--al-h2-md: 28px;
		--al-h2-sm: 26px;
		--al-h2-xs: 26px;
	}

	/* One phrase in the announcement bar. */
	.al-announcement {
		gap: 0;
	}

	.al-announcement span + span {
		display: none;
	}

	.al-nav {
		padding-block: 12px;
	}

	/* Search moves into the menu. */
	.al-nav__utils > a:not(.al-cart-pill) {
		display: none;
	}

	.al-nav__links .al-nav__item--search {
		display: block;
	}

	/* Heroes: the text stacks above the image, the image goes full-bleed below,
	   and the scrim goes with the overlap that needed it. */
	.al-hero {
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.al-hero__media {
		position: relative;
		order: 2;
		height: 280px;
	}

	.al-hero--tall .al-hero__media {
		height: 320px;
	}

	.al-hero__scrim {
		display: none;
	}

	.al-hero__inner {
		position: static;
		padding: 36px var(--al-page-padding) 32px;
		pointer-events: auto;
	}

	.al-hero__text {
		max-width: none;
	}

	/* A row of pills wraps as a row; a pill never wraps its own label. */
	.al-hero__actions,
	.al-empty__actions,
	.al-confirm__actions,
	.al-cart__actions,
	.al-about-cta__actions,
	.al-help-contact__actions,
	.al-404__actions {
		flex-wrap: wrap;
	}

	.al-btn {
		white-space: nowrap;
	}

	/* Everything single column. */
	.al-grid--4,
	.al-grid--3,
	.al-grid--strip,
	.al-home-grid,
	.al-events-grid,
	.al-beliefs,
	.al-tiers,
	.al-care,
	.al-footer__grid,
	.al-field-row--2,
	.al-field-row--3,
	.al-dot-list,
	.al-dot-list--pairs,
	.al-quote-pair {
		grid-template-columns: 1fr;
	}

	.al-home-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.al-events-gallery__cell {
		height: 160px;
	}

	.al-events-gallery__cell:nth-child(odd) {
		margin-top: 20px;
	}

	.al-story__media {
		height: 300px;
	}

	.al-value-strip {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	/* The archive's filter chips scroll sideways in one row; the count drops beneath. */
	.al-archive__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.al-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.al-filters::-webkit-scrollbar {
		display: none;
	}

	.al-filters > * {
		flex: 0 0 auto;
	}

	/* Product page: the tall kit image shortens, and the add-to-cart row becomes
	   a bar fixed to the foot of the screen with the price beside it. */
	.al-product__media--tall {
		height: 420px;
	}

	.al-buy {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		padding: 12px var(--al-page-padding);
		background: var(--al-cream);
		border-top: 1px solid var(--al-border-section);
	}

	.al-buy__price {
		display: block;
		margin-right: auto;
		font-family: var(--al-font-serif);
		font-size: var(--al-price-lg);
		color: var(--al-plum-light);
	}

	.al-buy .al-btn {
		padding-inline: 22px;
	}

	/* Room beneath the page for the bar. */
	body.single-product {
		padding-bottom: 84px;
	}

	/* Cart line: thumbnail and text on the first row, stepper under the text,
	   total and Remove across the foot. */
	.al-line {
		grid-template-columns: 84px 1fr;
		gap: 14px 16px;
		padding: 14px;
	}

	.al-line__thumb {
		width: 84px;
		height: 84px;
	}

	.al-line .al-qty {
		grid-column: 2;
		justify-self: start;
	}

	.al-line__end {
		grid-column: 1 / -1;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		min-width: 0;
	}

	/* Checkout. */
	.al-checkout {
		padding-block: 32px 56px;
	}

	.al-steps {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.al-step__rule {
		width: 16px;
	}

	.al-nav--slim .al-nav__utils {
		gap: 14px;
	}

	.al-footer--slim {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		text-align: center;
	}

	.al-footer__links {
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Make It Personal: the tiles step down with the headings, the style tiles
	   wrap to what fits, the photo shortens. */
	.al-personal {
		padding-block: 24px 64px;
	}

	.al-personal__card {
		padding: 32px 20px;
	}

	/* Five tiles — the sample name — fit one row of a 375px screen. */
	.al-personal__tile {
		font-size: 40px;
		padding: 5px 12px;
	}

	.al-personal__tiles {
		gap: 8px;
	}

	.al-personal__photo {
		height: 220px;
	}

	.al-personal__styles {
		grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	}

	.al-personal__summary {
		flex-wrap: wrap;
		gap: 10px;
	}

	.al-help-jump__inner {
		gap: 8px;
	}

	/* Hit targets of at least 44px on anything tapped. */
	.al-btn,
	.al-chip,
	.al-personal__chip,
	.al-quote-type,
	.al-help-jump__link,
	.al-cart-pill {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	.al-qty__btn {
		min-width: 44px;
		min-height: 44px;
	}
}