/* ==========================================================================
   LIVSDO — Base: element defaults, typography, layout primitives, utilities.
   Loaded after Bootstrap so these win on the shared elements we restyle.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The drawers translate off-canvas; without this they widen the document. */
  overflow-x: hidden;
}

/* Bootstrap ships a serif-ish default stack on some elements; normalise. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-ink);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--c-blue); }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; cursor: pointer; }

ul, ol { margin: 0; padding: 0; }

hr { border: 0; border-top: var(--border); margin: 0; opacity: 1; }

::selection { background: var(--c-lime); color: var(--c-navy); }

/* --- Focus -----------------------------------------------------------------
   A visible focus ring is non-negotiable. :focus-visible keeps it off mouse
   clicks; the fallback covers browsers without it. */
:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* On dark surfaces the blue ring disappears — switch to lime. */
.on-dark :focus-visible,
.site-footer--dark :focus-visible { outline-color: var(--c-lime); }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -4rem;
  z-index: calc(var(--z-toast) + 1);
  background: var(--c-navy);
  color: var(--c-white);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--c-white); }

/* --- Layout ---------------------------------------------------------------- */

.container-ls {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Full-bleed band that still aligns its contents to the container. */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }

.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* --- Type utilities --------------------------------------------------------- */

/* Display face. Reserved for headings and editorial moments — never for body
   copy or small UI text, which belong to Inter. */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.t-editorial {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}

/* Sans headings, for headings that sit in the interface rather than in the
   editorial layer. */
.t-h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.02em; line-height: var(--lh-snug); }
.t-h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.015em; line-height: var(--lh-snug); }
.t-h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: var(--lh-heading); }

.t-eyebrow {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-blue);
}
.t-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.t-body  { font-size: var(--fs-base); color: var(--c-muted); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.7; }
.t-measure { max-width: var(--measure); }

.t-ink   { color: var(--c-ink); }
.t-muted { color: var(--c-muted); }
.t-blue  { color: var(--c-blue); }

/* Digits that line up in columns (prices in a total, spec tables). */
.t-num { font-variant-numeric: tabular-nums; }

/* --- Accessibility helpers --------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* --- Image wells ------------------------------------------------------------
   Every product image sits on a tinted well at a fixed ratio, so the grid holds
   its shape before the image decodes and nothing shifts on load. */
.img-well {
  position: relative;
  overflow: hidden;
  background: var(--c-tint);
}
.img-well > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-4x5  { aspect-ratio: 4 / 5; }
.ratio-3x4  { aspect-ratio: 3 / 4; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }

/* --- Scroll lock ------------------------------------------------------------
   Applied to <body> while a drawer or overlay owns the screen.

   Hiding the page's overflow removes the scrollbar, which widens the viewport
   by its width and shoves everything — the sticky header included — sideways
   the instant a drawer opens. LIVSDO.ui measures that width and publishes it
   as --scrollbar-w before locking; the rules below give the space back so
   nothing moves.

   In-flow content is handled by padding the body. Fixed elements sit outside
   that box and each need their own compensation. */
body.is-locked {
  overflow: hidden;
  padding-right: var(--scrollbar-w, 0px);
}
/* Anchored to the right edge: push them in by the same amount. */
body.is-locked .wa-fab { margin-right: var(--scrollbar-w, 0px); }
/* Full-width bars: shrink by the same amount so their centred contents hold. */
body.is-locked .sticky-buy { padding-right: var(--scrollbar-w, 0px); }
/* Centred on the viewport: half the width, since it shifts by half. */
body.is-locked .toast-stack { margin-right: calc(var(--scrollbar-w, 0px) / 2); }