/* Gemeinsame Designwerte. Breite und Schriftrollen hier pflegen. */
:root {
  --bottega-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bottega-navigation: #775b40;
  --bottega-navigation-text: #faf3e7;
  --bottega-content-max: 2400px;
  --bottega-content-width: 90%;
  --bottega-sidebar-width: var(--bottega-catalog-sidebar-width);
  --bottega-layout-gap: 36px;
  --bottega-header-content-gap: 12px;
  --bottega-header-height: 112px;
  --bottega-catalog-sidebar-width: clamp(224px, 14vw, 260px);
  --bottega-catalog-card-min: 260px;
  --bottega-catalog-column-gap: 20px;
  --bottega-text: #493c35;
  --bottega-text-muted: #71665c;
  --bottega-accent: #475e4b;
  --bottega-accent-hover: #344638;
  --bottega-choice-active: #5d765f;
  --bottega-surface: #f7f0e6;
  --bottega-surface-soft: #eee3d2;
  --bottega-surface-selected: #e2e8dc;
  --bottega-category-pads: #e6c3a8;
  --bottega-category-beans: #c6d2be;
  --bottega-category-capsules: #e5d7aa;
  --bottega-category-machines: #d1d7cd;
  --bottega-border: #d8ccba;
  --bottega-control-border: #8c8877;
  --bottega-focus: #475e4b;
  --bottega-radius: 24px;
  --bottega-control-radius: 999px;
  --bottega-control-height: 44px;
  --bottega-font-body: 1.125rem;
  --bottega-font-control: 1rem;
  --bottega-font-meta: 0.875rem;
  --bottega-reading-width: 68ch;

  /* Bestehende Shop-Bausteine lesen dieselben Rollen. */
  --max: var(--bottega-content-max);
  --gutter: 0px;
  --ink: var(--bottega-text);
  --muted: var(--bottega-text-muted);
  --line: var(--bottega-border);
  --paper: var(--bottega-surface);
  --cream: var(--bottega-surface-soft);
  --cream-deep: var(--bottega-surface-selected);
  --espresso: var(--bottega-text);
  --espresso-soft: var(--bottega-text-muted);
  --terracotta: var(--bottega-accent);
  --terracotta-dark: var(--bottega-accent-hover);
  --coffee-ink: var(--bottega-text);
  --coffee-copper: var(--bottega-accent);
  --coffee-copper-dark: var(--bottega-accent-hover);
  --coffee-surface: var(--bottega-surface-soft);
  --coffee-cream: var(--bottega-surface-soft);
  --coffee-line: var(--bottega-border);
  --sage: #426148;
  --radius: var(--bottega-radius);
  --radius-sm: var(--bottega-control-radius);
  --shadow: none;
  --font-display: var(--bottega-font-family);
  --font-body: var(--bottega-font-family);
  --font-commerce: var(--bottega-font-family);
  --font-ui: var(--bottega-font-family);
}

@media (max-width: 1250px) {
  :root {
    --bottega-layout-gap: 27px;
  }
}

@media (max-width: 1050px) {
  :root {
    --bottega-layout-gap: 23px;
  }
}