*, *::before, *::after { box-sizing: border-box; }
body { display: flex; flex-direction: column; min-block-size: 100vh; min-block-size: 100dvh; margin: 0; font-size: 1rem; line-height: 1.5; }
body > main { flex: 1 0 auto; }
img { max-inline-size: 100%; block-size: auto; }
a { color: var(--teal-ink); text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

:root {
	--gutter: 1rem;
	--container: 75rem;
	--radius-sm: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1.125rem;
	--radius-pill: 980px;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like sheet/drawer curve */
}
@media (min-width: 64rem) { :root { --gutter: 2rem; } }

.container { inline-size: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.screen-reader-text {
	position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; inset-block-start: -4rem; inset-inline-start: 1rem; z-index: 100;
	padding: 0.75rem 1rem; background: var(--surface); color: var(--ink); border-radius: var(--radius-sm);
}
.skip-link:focus { inset-block-start: 1rem; }

/* sale: old price with a red line, "-20%" pill */
.price-was { margin-inline-end: 0.375rem; color: var(--ink-muted); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px; }
.price-was[hidden] { display: none; }
.price-off { background: var(--danger) !important; color: var(--on-danger) !important; }