/** * izebuy base / reset + layout primitives (A1). * Depends on: tokens.css */ /* Box-sizing scope --------------------------------------------------------- */ .ize-scope, .ize-scope * { box-sizing: border-box; } /* Body-level opt-in — add `ize` to via classifieds_izebuy_body_class() */ body.ize { background: var(--ize-page-bg); color: var(--ize-ink); /* Sticky footer. The body is a flex column at least viewport-tall; the page * content lives in .ize-main (a normal-flow wrapper opened in header.php and * closed in footer.php) which grows to fill, dropping the footer to the bottom * on short pages. The content is wrapped ON PURPOSE: making the centred page * sections direct flex items of is exactly what collapsed them before, * so here they stay normal block-flow children of .ize-main and centre as usual. */ box-sizing: border-box; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .ize-main { flex: 1 0 auto; width: 100%; min-width: 0; /* Lets the storefront breadcrumb/title break out to the screen edges without * adding a horizontal scrollbar (clip, not hidden, so sticky still works). */ overflow-x: clip; } body.ize .ize-footer { flex-shrink: 0; } /* Links keep their default colour (no site-wide accent). outline:none kills the * mouse-click ring; the keyboard ring is the browser default. */ :where(body.ize) a { outline: none; } /* Reserve space at the bottom of the viewport for the fixed mobile tab bar. */ @media (max-width: 767px) { body.ize.has-bottom-nav { padding-bottom: calc(var(--ize-bottom-nav-h) + env(safe-area-inset-bottom, 0px)); } } /* ── Layout primitives ─────────────────────────────────────────────────── */ /* Responsive auto-fill grid for listing / store cards */ .ize-grid { display: grid; gap: var(--ize-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 600px) { .ize-grid { grid-template-columns: repeat(3, 1fr); gap: var(--ize-4); } } /* Desktop caps at 4 columns — the bounded container keeps comfortable side * gutters rather than stretching cards edge-to-edge. */ @media (min-width: 992px) { .ize-grid { grid-template-columns: repeat(4, 1fr); } }