/*
* A1 Pharmacy — stylesheet entry point.
*
* Every page links this one file. It pulls in the layers that apply everywhere:
* tokens, fonts, the reset, typography, utilities, motion, and the components
* that appear in the shared header and footer or on more than one page.
*
* Page-specific stylesheets are NOT imported here — each page links its own
* after this file, e.g.
*
*
*
*
* Order matters. Later layers are written to override earlier ones, so keep
* the sequence below as it stands when adding to it.
*
* ── Production note ──────────────────────────────────────────────────────────
* @import costs one extra round trip before the imported files are discovered.
* That is a fair trade while you are editing. Before going live, concatenate
* these files in this order into a single stylesheet and link that instead —
* any minifier will do it (`npx lightningcss --bundle --minify css/main.css`).
*/
/* 1 — Foundations. Custom properties and @font-face; no rules of their own. */
@import url('tokens.css');
@import url('fonts.css');
/* 2 — Element defaults. The reset and unclassed element styles. */
@import url('base.css');
/* 3 — Typography. The type scale, the label system, long-form prose. */
@import url('typography.css');
/* 4 — Utilities. Gutters, hairlines, section rhythm, visually-hidden. */
@import url('utilities.css');
/* 5 — Motion. Reveal states and shared keyframes. */
@import url('motion.css');
/* 6 — Shared components. */
@import url('components/button.css');
@import url('components/badge.css');
@import url('components/forms.css');
@import url('components/media.css');
@import url('components/section.css');
@import url('components/accordion.css');
@import url('components/rating.css');
@import url('components/quantity.css');
@import url('components/progress.css');
@import url('components/table.css');
@import url('components/pager.css');
@import url('components/product-card.css');
@import url('components/header.css');
@import url('components/overlays.css');
@import url('components/footer.css');
@import url('components/toast.css');
@import url('components/tooltip.css');
/* ─────────────────────────────────────────────────────── page shell ───── */
/*
* The page frame itself. The header is fixed, so `` normally has to start
* below it — except on routes whose first section is a full-bleed hero that is
* meant to run underneath. Those pages carry `data-full-bleed` on .
*/
.page {
display: flex;
min-height: 100dvh;
flex-direction: column;
}
.page__main {
flex: 1;
padding-top: var(--header-height);
}
[data-full-bleed] .page__main {
padding-top: 0;
}