/* Снижения цен (2026-09-25). The same neutral surfaces as the rest of the product: no red alarm,
   no green «deal» colouring — a reduction is an observation, not an offer. The two drop figures are
   the anchor of a card; everything else supports them. Dark mode rides on the same tokens. */

.reductions-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.reductions-subtitle { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.45;
  color: var(--ink-2); }
.reductions-note { margin: 0; max-width: 70ch; font-size: 13px; line-height: 1.5;
  color: var(--ink-muted, var(--ink-2)); }

/* ---- what the current filter holds --------------------------------------------------------- */

.reductions-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 2px; }
.reductions-summary-item { display: grid; gap: 2px; min-width: 150px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.reductions-summary-value { font-size: 26px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink); }
.reductions-summary-label { font-size: 12.5px; color: var(--ink-2); }

/* ---- filters --------------------------------------------------------------------------------- */

.reductions-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.reductions-chip { padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.reductions-chip:hover { border-color: var(--brand-primary, #1f4d3a); color: var(--brand-primary, #1f4d3a); }
.reductions-chip.is-active { border-color: var(--brand-primary, #1f4d3a);
  color: var(--brand-primary, #1f4d3a); font-weight: 600; }

.reductions-filters { display: grid; gap: 10px; padding: 14px 16px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.reductions-field { display: grid; gap: 5px; min-width: 0; }
.reductions-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); }
.reductions-input { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.reductions-input:focus { border-color: var(--brand-primary, #1f4d3a); outline: none; }

/* ---- the cards -------------------------------------------------------------------------------- */

.reductions-results { display: grid; gap: 14px; min-width: 0; }
.reductions-cards { display: grid; gap: 14px; min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.reductions-card { display: grid; gap: 8px; align-content: start; padding: 16px; min-width: 0; }
.reductions-card-drop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.reductions-card-drop-rub { font-size: 26px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink); }
.reductions-card-drop-pct { font-size: 15px; font-weight: 700; color: var(--brand-primary, #1f4d3a); }

.reductions-badge { justify-self: start; padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12px;
  font-weight: 600; line-height: 1.3; }
.reductions-badge-low { border-color: color-mix(in srgb, var(--good) 45%, var(--border));
  color: var(--good); background: color-mix(in srgb, var(--good) 8%, transparent); }
.reductions-badge-below { color: var(--ink-2); }
.reductions-badge-rollback { border-color: color-mix(in srgb, #b7791f 40%, var(--border));
  color: #8a5a10; background: color-mix(in srgb, #b7791f 8%, transparent); }
:root[data-theme="dark"] .reductions-badge-rollback { color: #e0a94a; }

.reductions-card-image { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px;
  background: var(--surface-2); }
.reductions-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.reductions-card-title { margin: 0; font-size: 15px; line-height: 1.3; color: var(--ink); }
.reductions-card-project { color: inherit; text-decoration: none; }
.reductions-card-project:hover { color: var(--brand-primary, #1f4d3a); }
.reductions-card-meta { margin: 0; font-size: 13px; color: var(--ink-2); }

.reductions-card-prices { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 2px; }
.reductions-card-price { display: grid; gap: 1px; }
.reductions-card-price-label { font-size: 11.5px; color: var(--ink-2); }
.reductions-card-price-old { font-size: 14px; color: var(--ink-2); text-decoration: line-through; }
.reductions-card-price-new { font-size: 17px; font-weight: 700; color: var(--ink); }

.reductions-card-history { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.reductions-card-date { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.reductions-card-link { justify-self: start; margin-top: 2px; font-size: 13px; font-weight: 600;
  color: var(--ink-2); text-decoration: none; }
.reductions-card-link:hover { color: var(--brand-primary, #1f4d3a); }

.reductions-more { justify-self: start; padding: 11px 18px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer; }
.reductions-more:hover { border-color: var(--brand-primary, #1f4d3a); color: var(--brand-primary, #1f4d3a); }
.reductions-more[disabled] { opacity: .6; cursor: default; }

/* A skeleton keeps the shape of the list that is coming; «Показать ещё» never hides what is
   already on screen, it only marks itself as busy. */
.reductions-skeleton-card { min-height: 240px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: var(--surface-2);
  animation: reductions-pulse 1.2s ease-in-out infinite; }
@keyframes reductions-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

.reductions-empty { display: grid; justify-items: center; gap: 12px; padding: 34px 16px;
  text-align: center; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.reductions-empty p { margin: 0; }
.reductions-reset { padding: 10px 18px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer; }
.reductions-reset:hover { border-color: var(--brand-primary, #1f4d3a); color: var(--brand-primary, #1f4d3a); }

.reductions-error { margin: 0; font-size: 13.5px; line-height: 1.5; color: #b42318; }
:root[data-theme="dark"] .reductions-error { color: #ff6b6b; }

/* ---- the entry point used elsewhere on the site ---------------------------------------------- */

.reductions-entry { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  text-decoration: none; }
.reductions-entry:hover { border-color: var(--brand-primary, #1f4d3a); }
.reductions-entry-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.reductions-entry-count { font-size: 13px; font-weight: 600; color: var(--brand-primary, #1f4d3a);
  white-space: nowrap; }

/* ---- phones ----------------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .reductions-summary-item { flex: 1 1 140px; min-width: 0; padding: 10px 14px; }
  .reductions-summary-value { font-size: 22px; }
  .reductions-filters { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .reductions-input { padding: 11px 12px; font-size: 16px; }   /* 16px stops iOS zooming on focus */
  .reductions-chip { padding: 9px 14px; }
  .reductions-cards { grid-template-columns: minmax(0, 1fr); }
  .reductions-card-drop-rub { font-size: 23px; }
  .reductions-more,
  .reductions-reset { justify-self: stretch; text-align: center; }
  .reductions-entry { width: 100%; justify-content: space-between; }
}

/* V4: buttons are 10px controls, not pills. */
.reductions-entry,.reductions-more,.reductions-reset{border-radius:10px;}