/* ============================================================
   AZON UI — дизайн-токены и компоненты витрины.
   Единый источник визуального языка: этот же файл использует
   дизайн-система (libs/azon-design-system) для claude.ai/design.
   Все классы с префиксом az-.
   ============================================================ */

:root {
  /* -- бренд -- */
  --az-accent: #ff7a00;
  --az-accent-hover: #e56d00;
  --az-accent-soft: #fff1e5;
  --az-dark: #131a26;
  --az-dark-2: #1e2836;

  /* -- нейтральные -- */
  --az-ink: #1f2733;
  --az-ink-soft: #5b6472;
  --az-surface: #f6f7f9;
  --az-card: #ffffff;
  --az-border: #e3e7ee;

  /* -- статусы -- */
  --az-success: #1a9e55;
  --az-success-soft: #e7f6ee;
  --az-danger: #d93025;
  --az-danger-soft: #fdecea;
  --az-warning: #b26a00;
  --az-warning-soft: #fff4e0;
  --az-info: #2563eb;
  --az-info-soft: #e8efff;

  /* -- геометрия и шрифт -- */
  --az-radius: 10px;
  --az-radius-sm: 6px;
  --az-shadow: 0 1px 3px rgba(19, 26, 38, 0.08), 0 4px 14px rgba(19, 26, 38, 0.06);
  --az-shadow-lift: 0 4px 10px rgba(19, 26, 38, 0.1), 0 10px 30px rgba(19, 26, 38, 0.12);
  --az-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--az-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--az-ink);
  background: var(--az-surface);
}

a { color: var(--az-info); text-decoration: none; }
a:hover { text-decoration: underline; }

.az-container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Хедер ---------- */
.az-header {
  background: var(--az-dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.az-header__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 60px;
}
.az-header__logo {
  font-size: 22px; font-weight: 800; letter-spacing: 0.5px;
  color: #fff !important; text-decoration: none !important;
}
.az-header__logo span { color: var(--az-accent); }
.az-header__nav { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.az-header__link { color: #cfd6e0 !important; font-weight: 500; }
.az-header__link:hover { color: #fff !important; text-decoration: none; }

.az-cart-button {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--az-dark-2); color: #fff !important;
  padding: 8px 14px; border-radius: var(--az-radius-sm);
  font-weight: 600; text-decoration: none !important;
}
.az-cart-button:hover { background: #27354a; }
.az-cart-button__count {
  background: var(--az-accent); color: #fff;
  border-radius: 999px; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; padding: 0 6px;
}

/* ---------- Кнопки ---------- */
.az-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--az-radius-sm);
  padding: 9px 18px; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration: none !important;
}
.az-btn--primary { background: var(--az-accent); color: #fff; }
.az-btn--primary:hover { background: var(--az-accent-hover); }
.az-btn--secondary { background: #fff; color: var(--az-ink); border-color: var(--az-border); }
.az-btn--secondary:hover { border-color: var(--az-ink-soft); }
.az-btn--danger { background: var(--az-danger); color: #fff; }
.az-btn--danger:hover { background: #b8271e; }
.az-btn--ghost { background: transparent; color: var(--az-info); }
.az-btn--sm { padding: 5px 12px; font-size: 13px; }
.az-btn--lg { padding: 12px 26px; font-size: 16px; }
.az-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.az-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.az-btn--loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff;
  border-radius: 50%; animation: az-spin 0.7s linear infinite;
}

/* ---------- Формы ---------- */
.az-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.az-label { font-size: 13px; font-weight: 600; color: var(--az-ink-soft); }
.az-input, .az-select, .az-textarea {
  font: inherit; color: var(--az-ink);
  background: #fff; border: 1px solid var(--az-border);
  border-radius: var(--az-radius-sm); padding: 9px 12px;
  outline: none; width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.az-input:focus, .az-select:focus, .az-textarea:focus {
  border-color: var(--az-accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.15);
}
.az-input--error { border-color: var(--az-danger); }
.az-field__error { color: var(--az-danger); font-size: 13px; }
.az-textarea { resize: vertical; min-height: 90px; }

/* ---------- Карточки и каталог ---------- */
.az-card {
  background: var(--az-card); border: 1px solid var(--az-border);
  border-radius: var(--az-radius); box-shadow: var(--az-shadow);
}
.az-card__body { padding: 18px; }

.az-catalog-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.az-product-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--az-card); border: 1px solid var(--az-border);
  border-radius: var(--az-radius); box-shadow: var(--az-shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.az-product-card:hover { box-shadow: var(--az-shadow-lift); transform: translateY(-2px); }
.az-product-card__image {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--az-surface); display: block;
}
.az-product-card__image--placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--az-ink-soft); font-size: 13px;
}
.az-product-card__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.az-product-card__name { font-weight: 600; color: var(--az-ink) !important; }
.az-product-card__price { font-size: 18px; font-weight: 800; }
.az-product-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.az-price { font-weight: 800; }
.az-price--big { font-size: 28px; }

/* ---------- Рейтинг ---------- */
.az-rating { color: var(--az-accent); font-size: 14px; letter-spacing: 1px; }
.az-rating__count { color: var(--az-ink-soft); font-size: 13px; margin-left: 4px; }

/* ---------- Бейджи ---------- */
.az-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  border-radius: 999px; padding: 3px 10px;
}
.az-badge--success { background: var(--az-success-soft); color: var(--az-success); }
.az-badge--danger { background: var(--az-danger-soft); color: var(--az-danger); }
.az-badge--warning { background: var(--az-warning-soft); color: var(--az-warning); }
.az-badge--info { background: var(--az-info-soft); color: var(--az-info); }
.az-badge--neutral { background: var(--az-surface); color: var(--az-ink-soft); }
.az-badge--accent { background: var(--az-accent-soft); color: var(--az-accent-hover); }

/* ---------- Таблицы ---------- */
.az-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.az-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--az-ink-soft); padding: 10px 14px; border-bottom: 2px solid var(--az-border);
}
.az-table td { padding: 12px 14px; border-bottom: 1px solid var(--az-border); }
.az-table tr:last-child td { border-bottom: none; }
.az-table tr:hover td { background: var(--az-surface); }

/* ---------- Пагинация ---------- */
.az-pagination { display: flex; align-items: center; gap: 6px; margin: 22px 0; }
.az-pagination__page {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--az-border); border-radius: var(--az-radius-sm);
  background: #fff; color: var(--az-ink) !important; font-weight: 600;
  text-decoration: none !important;
}
.az-pagination__page:hover { border-color: var(--az-accent); }
.az-pagination__page--active { background: var(--az-accent); border-color: var(--az-accent); color: #fff !important; }
.az-pagination__page--disabled { opacity: 0.45; pointer-events: none; }

/* ---------- Тосты ---------- */
.az-toast-region { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.az-toast {
  min-width: 260px; max-width: 380px;
  background: var(--az-dark); color: #fff;
  border-radius: var(--az-radius-sm); padding: 12px 16px;
  box-shadow: var(--az-shadow-lift);
  display: flex; align-items: flex-start; gap: 10px;
  animation: az-toast-in 0.25s ease;
}
.az-toast--success { border-left: 4px solid var(--az-success); }
.az-toast--error { border-left: 4px solid var(--az-danger); }
.az-toast--info { border-left: 4px solid var(--az-info); }
@keyframes az-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Модалка ---------- */
.az-modal-backdrop {
  position: fixed; inset: 0; background: rgba(19, 26, 38, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 90; padding: 20px;
}
.az-modal {
  background: #fff; border-radius: var(--az-radius);
  box-shadow: var(--az-shadow-lift); max-width: 440px; width: 100%;
}
.az-modal__header { padding: 18px 20px 0; font-size: 18px; font-weight: 700; }
.az-modal__body { padding: 12px 20px; color: var(--az-ink-soft); }
.az-modal__footer { padding: 0 20px 18px; display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Алерты / flash ---------- */
.az-alert { border-radius: var(--az-radius-sm); padding: 12px 16px; margin: 14px 0; font-weight: 500; }
.az-alert--success { background: var(--az-success-soft); color: var(--az-success); }
.az-alert--error { background: var(--az-danger-soft); color: var(--az-danger); }
.az-alert--info { background: var(--az-info-soft); color: var(--az-info); }

/* ---------- Спиннер ---------- */
.az-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--az-border); border-top-color: var(--az-accent);
  animation: az-spin 0.7s linear infinite; display: inline-block; vertical-align: middle;
}
@keyframes az-spin { to { transform: rotate(360deg); } }

/* ---------- Утилиты раскладки ---------- */
.az-page { padding: 26px 0 60px; }
.az-page-title { font-size: 26px; font-weight: 800; margin: 0 0 18px; }
.az-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 20px; }
.az-toolbar .az-field { margin-bottom: 0; min-width: 160px; }
.az-row { display: flex; gap: 20px; align-items: flex-start; }
.az-grow { flex: 1; }
.az-muted { color: var(--az-ink-soft); }
.az-mt { margin-top: 18px; }
.az-center { text-align: center; }
.az-auth-card { max-width: 420px; margin: 40px auto; }
.az-empty {
  text-align: center; padding: 48px 20px; color: var(--az-ink-soft);
}
.az-footer {
  margin-top: 40px; padding: 22px 0; border-top: 1px solid var(--az-border);
  color: var(--az-ink-soft); font-size: 13px;
}