/* Base reset and layout primitives. Colors, type and spacing come from /tokens.css
   (linked before this file); fallbacks keep the page usable without it. Component
   styles live beside their components (components/*.css). No inline styles anywhere
   (strict CSP). */

:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--color-surface, #fff); color: var(--color-text, #000);
  font-family: var(--font-body, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  font-weight: var(--fw-body, 500); font-size: var(--fs-base, 16px); line-height: var(--lh-base, 1.5);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
main { flex: 1 0 auto; }
main:focus, main h1[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-bold, 700); line-height: var(--lh-tight, 1.2); }
p, ul, ol, figure, blockquote { margin: 0; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: var(--focus-ring, 2px solid #001B71); outline-offset: var(--focus-offset, 3px); }
[hidden] { display: none !important; }
.icon { display: block; flex: none; }

/* ---------- accessibility ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4, 16px); top: -100px; z-index: 1000;
  padding: var(--space-3, 12px) var(--space-5, 20px); border-radius: var(--radius-pill, 999px);
  background: var(--color-button, #000); color: var(--color-button-ink, #fff);
  font-weight: var(--fw-bold, 700); text-decoration: none;
}
.skip-link:focus { top: var(--space-3, 12px); }

/* ---------- layout primitives ---------- */
/* The page column: 1340px of content, 50px gutters on desktop, 16px on phones. */
.container {
  width: 100%; max-width: calc(var(--max-width, 1340px) + 2 * var(--page-gutter, 50px));
  margin-inline: auto; padding-inline: var(--page-gutter, 50px);
}
@media (max-width: 767px) { .container { padding-inline: var(--page-gutter-mobile, 16px); } }

.stack { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.stack--lg { gap: var(--space-8, 48px); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); }
.split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px); }

/* Product grid: 4 across on desktop, 2 on phones. */
.grid {
  display: grid; gap: var(--grid-gap, 24px) var(--card-gap, 20px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 20px) var(--space-3, 12px); } }

/* A row that scrolls sideways (tile rows, carousels on phones). */
.scroller {
  display: flex; gap: var(--card-gap, 20px); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; flex: none; }

.section { padding-block: var(--space-8, 48px); }
.section__title { font-size: var(--fs-2xl, 32px); margin-bottom: var(--space-5, 20px); }

/* ---------- placeholder shell (replaced by components/header.js, footer.js) ---------- */
.ph-header { border-bottom: 1px solid var(--color-border, #E5E5E5); }
.ph-header__row { display: flex; align-items: center; gap: var(--space-5, 20px); min-height: var(--header-row1-h, 88px); }
.ph-header__logo { display: block; flex: none; }
.ph-header__logo img { width: auto; height: 48px; }
.ph-search { flex: 1; max-width: 640px; margin-inline: auto; }
.ph-search input {
  width: 100%; min-height: 48px; padding: 0 var(--space-5, 20px); border: 0;
  border-radius: var(--radius-pill, 999px); background: var(--color-field, #EDEDED);
}
.ph-nav { display: flex; gap: var(--space-6, 28px); min-height: var(--nav-h, 48px); align-items: center; font-weight: var(--fw-bold, 700); }
.ph-nav a { text-decoration: none; }
.ph-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.ph-footer { margin-top: var(--space-10, 80px); padding-block: var(--space-8, 48px); background: var(--color-footer, #C4301C); color: var(--color-footer-ink, #fff); }
.ph-footer a { color: inherit; }
.ph-page-title { font-size: var(--fs-3xl, 40px); margin-block: var(--space-6, 28px) var(--space-4, 16px); }
.ph-note { color: var(--color-subtext, #555); }
.page-loading, .page-error { padding: var(--space-8, 48px) var(--space-4, 16px); text-align: center; color: var(--color-subtext, #555); }