/*
 * base.css — reset, page shell, and the type scale.
 *
 * The scale mirrors iOS: EBANFont.title/body map to .t-* / .b-* helpers with
 * the same px sizes and weights, so a component can be written straight from
 * the spec ("title 17 heavy") without inventing new steps.
 */

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* The apps never bounce a rubber-band white gap above the peach wash. */
  background: var(--page-bg);
}

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Room for the fixed bottom tab bar on phones; removed at ≥1024. */
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

/* `hidden` loses to any display rule, and .badge sets display:inline-flex —
   which is why an empty cart still showed a red 0. Make it win everywhere. */
[hidden] {
  display: none !important;
}

img {
  max-width: 100%;
  display: block;
  border-style: none;
}

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

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

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect the OS setting — the marquee and equalizer are decorative loops. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Type scale (iOS EBANFont) ---------- */

.t-24-black { font-size: 24px; font-weight: 900; }
.t-22-black { font-size: 22px; font-weight: 900; }
.t-18-heavy { font-size: 18px; font-weight: 800; }
.t-17-heavy { font-size: 17px; font-weight: 800; }
.t-16-heavy { font-size: 16px; font-weight: 800; }
.t-15-heavy { font-size: 15px; font-weight: 800; }
.t-14-heavy { font-size: 14px; font-weight: 800; }
.t-13-heavy { font-size: 13px; font-weight: 800; }
.t-12-heavy { font-size: 12px; font-weight: 800; }

.b-15 { font-size: 15px; font-weight: 400; }
.b-14 { font-size: 14px; font-weight: 400; }
.b-13 { font-size: 13px; font-weight: 400; }
.b-12 { font-size: 12px; font-weight: 400; }
.b-11 { font-size: 11px; font-weight: 400; }

.w-semibold { font-weight: 600; }
.w-medium { font-weight: 500; }

.c-primary { color: var(--text-primary); }
.c-secondary { color: var(--text-secondary); }
.c-tertiary { color: var(--text-tertiary); }
.c-brand { color: var(--brand); }

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

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.row {
  display: flex;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
}

.spacer {
  flex: 1 1 auto;
}

.clip {
  overflow: hidden;
}

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

/* One-line and two-line clamps — product titles use the 2-line form, which is
 * what the app cards do (and what the Android port got wrong by truncating). */
.clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* iOS pressDown: scale on press, spring back. Applied to anything tappable. */
.press {
  transition: transform var(--dur-press) var(--ease-press);
  -webkit-tap-highlight-color: transparent;
}

.press:active {
  transform: scale(var(--press-scale));
}

.press-94:active { transform: scale(0.94); }
.press-95:active { transform: scale(0.95); }
.press-98:active { transform: scale(0.98); }

/* Skeleton shimmer for loading tiles. */
@keyframes eban-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    #ececf0 0%,
    #f6f6f8 40%,
    #ececf0 80%
  );
  background-size: 800px 100%;
  animation: eban-shimmer 1.4s linear infinite;
}