/* Hanowa — white ground with the Swiss red of the brand's cross. Red is used structurally
   (bands, rules, the active state) rather than as decoration, and the logo sits on white
   exactly as the brand supplies it. */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("/assets/fonts/archivo.woff2") format("woff2");
}

:root {
  --bg: #ffffff;
  --bg-elevated: #fbfbfb;
  --card-bg: #f4f5f6;
  --ink: #111417;
  --ink-soft: #3c4248;
  --muted: #797f86;
  --rule: #e0e3e6;
  --accent: #df081a;
  --in-stock: #2f7a45;

  --font-display: "Archivo", "Vazirmatn", system-ui, sans-serif;
  --font-body: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 600;
  --masthead-h: 82px;
  --logo-h: 34px;
}

.wordmark { height: var(--logo-h); width: auto; }
.footer .wordmark { height: calc(var(--logo-h) * 1.2); }

h1, h2, h3 { letter-spacing: -.012em; }
.masthead { border-block-end: 1px solid var(--rule); }
.masthead__nav a[aria-current="page"] { border-block-end-color: var(--accent); }
.eyebrow { color: var(--accent); }

.button { border-color: var(--ink); }
.button--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button--primary:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.link-underline { border-block-end-color: var(--accent); }
.pagination__link.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.masthead__cart-count { background: var(--accent); color: #fff; }

.hero--stacked {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}
@media (min-width: 900px) {
  .hero--stacked { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .hero--stacked .hero__copy { width: auto; margin-inline-start: auto; padding-inline: var(--gutter); max-width: 34rem; }
}
.hero__title { max-width: 17ch; font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 700; line-height: 1.08; }
.hero__lede { color: var(--ink-soft); margin: 1.25rem 0 2rem; max-width: 46ch; }

/* The red panel is a plinth the piece stands on, not a stripe it interrupts: it occupies the
   lower half of the stage and the product card overhangs it. */
.hero__stage {
  position: relative; display: grid; place-items: end center;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem) 0;
  min-height: clamp(360px, 46vw, 560px);
}
.hero__band {
  position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 55%;
  background: var(--accent);
}
.hero__figure {
  position: relative; margin: 0 0 clamp(1.5rem, 4vw, 3rem);
  width: min(400px, 72vw); background: #fff; padding: clamp(1rem, 3vw, 2rem);
}
.hero__figure img { width: 100%; object-fit: contain; }
@media (max-width: 899px) { .hero__stage { min-height: 0; } }

.claims { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.claims__inner { display: grid; gap: 0; border: 1px solid var(--rule); }
@media (min-width: 700px) { .claims__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.claim { padding: 1.5rem 1.35rem; border-block-end: 1px solid var(--rule); }
.claim:last-child { border-block-end: 0; }
@media (min-width: 700px) {
  .claim { border-block-end: 0; border-inline-end: 1px solid var(--rule); }
  .claim:last-child { border-inline-end: 0; }
}
.claim__title { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.claim__body { margin: 0; font-size: .87rem; color: var(--muted); }

.statement { border-block-start: 1px solid var(--rule); margin-block-start: clamp(2.5rem, 5vw, 4rem); }
.statement__inner { padding-block: clamp(2.5rem, 5vw, 4rem); max-width: 60ch; }
.statement__title { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 600; }
.statement__body { color: var(--ink-soft); margin: 1rem 0 0; }
.statement__stat { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 1.5rem 0 0; font-weight: 600; }

.showcase { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.showcase__more { margin-block-start: clamp(2rem, 4vw, 3rem); }
.card__media { border: 1px solid var(--rule); }
.pillar { border-block-start-color: var(--accent); }