/* ==========================================================================
   Apnaware V2 — shared design tokens & typography
   Clean-modern light theme. Single source of truth; link on every page.
   Radius system: image cards/frames 20px, utility panels 12px, buttons/inputs 6px.
   Accent discipline: --brand is for primary CTAs, links and small accents
   only. Everything else stays neutral.
   ========================================================================== */

:root {
  --ink: #1A1A1E;         /* headings, primary text */
  --charcoal: #2A2A30;
  --paper: #F6F6F4;       /* tinted section background */
  --cream: #FAFAF9;       /* lightest tint (footer, alt sections) */
  --card: #FFFFFF;        /* surfaces */
  --muted: #5A5A64;       /* secondary text */
  --line: #E5E5E8;        /* hairlines, borders */
  --brand: #B73A31;       /* single accent */
  --brand-dark: #9C2F27;
  --brass: #6E6E78;       /* legacy alias: now a neutral, NOT gold */
}

html { background: #FFFFFF; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #FFFFFF;
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(183, 58, 49, 0.14); color: var(--ink); }

.site-shell { overflow: clip; }

/* Safety net: no image may exceed its container on any viewport. Grid/flex
   children also get min-width:0 so a large image cannot inflate its track
   past the viewport (default min-width:auto sizes to max-content). */
img { max-width: 100%; height: auto; }
.grid > *, .flex > * { min-width: 0; }

.logo-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

.tap-target {
  min-height: 44px;
  min-width: 44px;
}

/* ---------------------------------------------------------------------- */
/* Typography                                                              */
/* ---------------------------------------------------------------------- */

/* Display: Archivo, for h1 / h2 / editorial section titles.
   Card and list-item titles stay Inter 600 (see .card-title). */
.font-display {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.card-title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.section-label {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border-radius: 6px;
  background: var(--brand);
  color: #FFFFFF;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms ease, transform 120ms ease;
}

.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, transform 120ms ease;
}

.btn-secondary:hover { border-color: #C9C9CE; background: var(--cream); }
.btn-secondary:active { transform: translateY(1px); }

/* Inline text link with arrow affordance */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand);
  text-decoration: none;
  transition: color 160ms ease;
}

.text-link:hover { color: var(--brand-dark); }

/* ---------------------------------------------------------------------- */
/* Shared components                                                       */
/* ---------------------------------------------------------------------- */

.form-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--ink);
  outline: none;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.form-input::placeholder { color: #9A9AA2; }

.form-input:focus {
  border-color: rgba(183, 58, 49, 0.55);
  box-shadow: 0 0 0 3px rgba(183, 58, 49, 0.10);
}

.modal-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-panel {
  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-backdrop.is-open .modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.mobile-menu-panel {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Product / category surfaces: one flat image area, no nested frames.
   White, so multiply-blended photos read as cutouts (seamless, no two-tone). */
.img-well {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.img-well img {
  max-width: 98%;
  max-height: 98%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Short brand rule above section headings: the one recurring accent motif. */
.rule::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--brand);
  margin-bottom: 1.4rem;
}

/* ---------------------------------------------------------------------- */
/* Motion                                                                  */
/* ---------------------------------------------------------------------- */

html.reduce-motion { scroll-behavior: auto !important; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .band-track { animation: none !important; }
}

@media (hover: none) {
  .category-card:active,
  .product-card:active { transform: scale(0.985); }
}