/*
 * ZARAK - Base / reset / typography
 * Depends on tokens.css. No brand hex literal may appear in this file.
 * Authority: spec sections 3, 4.5, 28, 29.
 *
 * RTL-safe by construction: logical properties only
 * (inline-start/end, margin-inline, padding-block). Spec 38 defers Urdu/RTL
 * to Phase 7 but requires it not be a rewrite later.
 */

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

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

body {
  margin: 0;
  background-color: var(--zk-surface-page);
  color: var(--zk-cocoa);
  font-family: var(--zk-font-ui);
  font-size: var(--zk-fs-body);
  font-weight: var(--zk-fw-regular);
  line-height: var(--zk-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevents any child from forcing a horizontal scrollbar. QA criterion 2. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
/* :where() so this reset carries ZERO specificity. As `ul[class]` it scored
   0,1,1 and silently beat every `.class` rule that tried to set a margin on a
   classed list - the gallery thumbnails sat hard against the image and the
   trust tiles lost their top margin, with the authored CSS looking correct. */
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }

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

/* Images always reserve their box - CLS control (spec 36.2) */
img { height: auto; }

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

button { background: none; border: none; padding: 0; cursor: pointer; }

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

table { border-collapse: collapse; }

/* ---------- typography scale ---------- */
h1, .zk-h1 {
  font-family: var(--zk-font-display);
  font-size: var(--zk-fs-h1);
  font-weight: var(--zk-fw-semibold);
  line-height: var(--zk-lh-heading);
}
h2, .zk-h2 {
  font-family: var(--zk-font-display);
  font-size: var(--zk-fs-h2);
  font-weight: var(--zk-fw-semibold);
  line-height: var(--zk-lh-heading);
}
h3, .zk-h3 {
  font-family: var(--zk-font-display);
  font-size: var(--zk-fs-h3);
  font-weight: var(--zk-fw-semibold);
  line-height: var(--zk-lh-heading);
}
/* h4 to h6 previously had no typography rule at all. The FAMILY was already
   correct by inheritance from body, because --zk-font-ui and --zk-font-display
   are the same family, but they rendered at body weight with body line-height.
   58 published product descriptions use <h4> for their FAQ questions, so this
   is visible on the storefront. Sizes continue the scale below h3 rather than
   flattening it: family consistency, not size consistency. */
h4, .zk-h4 {
  font-family: var(--zk-font-display);
  font-size: var(--zk-fs-body);
  font-weight: var(--zk-fw-semibold);
  line-height: var(--zk-lh-heading);
}
h5, .zk-h5 {
  font-family: var(--zk-font-display);
  font-size: var(--zk-fs-body-sm);
  font-weight: var(--zk-fw-semibold);
  line-height: var(--zk-lh-heading);
}
h6, .zk-h6 {
  font-family: var(--zk-font-display);
  font-size: var(--zk-fs-caption);
  font-weight: var(--zk-fw-semibold);
  line-height: var(--zk-lh-heading);
  letter-spacing: 0.02em;
}
.zk-display {
  font-family: var(--zk-font-display);
  font-size: var(--zk-fs-display);
  font-weight: var(--zk-fw-bold);
  line-height: var(--zk-lh-heading);
}
.zk-body-sm {
  font-size: var(--zk-fs-body-sm);
  line-height: var(--zk-lh-body);
}
.zk-caption {
  font-size: var(--zk-fs-caption);
  font-weight: var(--zk-fw-medium);
  line-height: var(--zk-lh-ui);
}
.zk-muted { color: var(--zk-muted); }

/* Gold-family text NEVER uses --zk-gold. Spec 4.4 rule 1. */
.zk-link {
  color: var(--zk-gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.zk-link:hover { text-decoration-thickness: 2px; }

/* ---------- focus: one treatment, everywhere. Gold is never the ring. ---------- */
:focus-visible {
  outline: var(--zk-focus-width) solid var(--zk-focus);
  outline-offset: var(--zk-focus-offset);
  border-radius: var(--zk-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- accessibility helpers ---------- */
.zk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; /* token-guard-allow: visually-hidden clip idiom, not spacing */
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.zk-skip-link {
  position: absolute;
  inset-inline-start: var(--zk-space-4);
  inset-block-start: calc(var(--zk-space-4) * -10);
  z-index: var(--zk-z-toast);
  padding: var(--zk-space-3) var(--zk-space-4);
  background-color: var(--zk-surface-card);
  color: var(--zk-cocoa);
  font-weight: var(--zk-fw-semibold);
  border-radius: var(--zk-radius-md);
  box-shadow: var(--zk-shadow-2);
  transition: inset-block-start var(--zk-dur-fast) var(--zk-ease);
}
.zk-skip-link:focus { inset-block-start: var(--zk-space-4); }

/* ---------- layout primitives ---------- */
.zk-container {
  width: 100%;
  max-inline-size: var(--zk-container);
  margin-inline: auto;
  padding-inline: var(--zk-gutter);
}

.zk-section {
  padding-block: var(--zk-space-9);
}
@media (min-width: 1024px) {
  .zk-section { padding-block: var(--zk-space-10); }
}

/* The single grid primitive. No parallel flexbox grid exists. Audit Z.19. */
.zk-grid {
  display: grid;
  grid-template-columns: repeat(var(--zk-grid-cols), minmax(0, 1fr));
  gap: var(--zk-grid-gap);
}

/* Scroll-snap rail - CSS only, no Swiper or any JS carousel library. Y.5. */
.zk-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: var(--zk-grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: var(--zk-space-1);
  overscroll-behavior-inline: contain;
}
.zk-rail::-webkit-scrollbar { display: none; }
.zk-rail > * { scroll-snap-align: start; }

/* ---------- prices: tabular numerals are mandatory. Spec 3.3. ---------- */
.zk-price,
.zk-price-compare,
.zk-price-save,
.zk-qty,
.zk-total {
  font-family: var(--zk-font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- motion ---------- */
@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;
  }
}