/* ==========================================================================
   Kaluchie — base: reset, ground, typography
   ========================================================================== */

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

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

body {
  margin: 0;
  /* The storefront runs a dark ground — the design system's deepest accent
     step carrying a full field, with type reversed to paper. */
  background: var(--color-accent-900);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover { color: var(--color-accent-300); }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--color-accent-400);
  color: var(--color-accent-900);
}

/* --- Headings -------------------------------------------------------------
   Every display size in the design is uppercase condensed. Sizes are set per
   component rather than on the bare tag, because the same tag appears at
   112px in the hero and 25px on a card. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 var(--space-3, 10px);
  text-wrap: pretty;
}

/* Prices and any numeric run. */
.k-num,
.woocommerce-Price-amount,
.k-price { font-variant-numeric: tabular-nums; }

/* Nothing renders below 12px — see README "Typography". */
small,
.k-meta {
  font-size: 12px;
  line-height: 1.5;
}

/* --- Focus ----------------------------------------------------------------
   The design system ring. Never remove it from size chips or swatches:
   HARDENING.md §3 calls this out specifically. */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Only suppress the ring for pointer users who already get a hover state. */
:focus:not(:focus-visible) { outline: none; }

/* --- Screen-reader utilities ---------------------------------------------- */

.screen-reader-text,
.k-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.k-skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-bg);
  color: var(--color-accent-900);
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
}

.k-skip-link:focus {
  top: 8px;
  color: var(--color-accent-900);
}

/* --- Reduced motion --------------------------------------------------------
   A 28-second infinite marquee is a genuine problem for some users
   (HARDENING.md §3). Pause it and drop the slide/scale transitions. */

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

  .k-ticker__track { animation: none !important; transform: none !important; }
}