:root {
  --ink: #382b25;
  --muted: #756256;
  --green: #b9400b;
  --green-dark: #963107;
  --background: #fff8ef;
  --line: #f2ddc7;
  --white: #ffffff;
  --mint: #fff0df;
  --contrast: #694774;
  --orange: #ff7a1a;
}

body { background: #ffffff; }

.header {
  background: rgba(255, 255, 255, .98);
  border-bottom-color: #ffe4ce;
}
.logo span { color: #ed5b00; }
.logo .logo-symbol {
  background: var(--orange);
  color: var(--ink);
}
.navigation a:hover { color: #b9400b; }

.hero {
  background: linear-gradient(
    120deg,
    #fffdf9 0%,
    #fff5e5 55%,
    #ffe4bd 100%
  );
}
.hero h1 { color: #4b3023; }
.hero .eyebrow { color: #b9400b; }
.hero-description { color: #715b4d; }
.hero-visual {
  background: #ffe4bd;
  box-shadow: 0 18px 45px rgba(238, 115, 25, .13);
}
.visual-topline { background: #ffd590; color: #57361e; }
.visual-caption { background: #fff0d7; }
.visual-caption strong { color: #6c3b20; }
.hero-notes span::before { color: #b9400b; }

.button-primary {
  background: var(--orange);
  color: #382313;
  border-color: var(--orange);
  box-shadow: 0 6px 18px rgba(255, 122, 26, .22);
}
.button-primary:hover {
  background: #ff922f;
  border-color: #ff922f;
}
.button-secondary { background: white; border-color: #efcfae; }
.button-secondary:hover { background: #fff1df; }

.categories-section { background: white; }
.category { background: #fffaf3; border-color: #f5dfc5; }
.category:nth-child(2) { background: #fff3e4; }
.category:nth-child(3) { background: #fff8e2; }
.category:nth-child(4) { background: #faf3ff; }

.catalog-section { background: #fff8ef; }
.product-card {
  background: white;
  border-color: #f3ddc7;
  box-shadow: 0 7px 24px rgba(173, 91, 30, .07);
}
.product-photo { background: #fff0dd; }
.product-category, .product-price { color: #b9400b; }
.condition { background: #f4eafa; color: var(--contrast); }

.catalog-message { border-color: #edc393; background: #fffdf9; }
.empty-symbol { background: #ffe2b8; color: #a63c08; }

.how-section {
  background: linear-gradient(135deg, #fffdf9, #fff0d9);
}
.step-number {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #ffddaa;
  color: #8e3509;
}
.footer { background: #fff2df; border-top-color: #f6d9b5; }
.connection.connected .connection-dot { background: #2c7461; }
.connection.failed .connection-dot { background: #b45309; }

.catalog-filters { margin-bottom: 30px; }
.filter-fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  margin: 0;
  padding: 20px;
  border: 1px solid #f3ddc7;
  border-radius: 16px;
  background: white;
  min-width: 0;
  box-shadow: 0 5px 18px rgba(173, 91, 30, .04);
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.filter-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.filter-field input,
.filter-field select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #e9cbaa;
  border-radius: 8px;
  background: #fffdf9;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.filter-actions { display: flex; gap: 8px; }
.filter-actions .button { min-height: 46px; padding: 10px 16px; }
.filter-fields:disabled { opacity: .65; }

@media (max-width: 960px) {
  .filter-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .filter-fields { grid-template-columns: 1fr; padding: 16px; }
  .filter-actions .button { flex: 1; }
}