/* ============================================================
   ART-GSM 2026 · РАСПРОДАЖА — бейдж, старая цена, процент (пакет C, 26.10.2026)
   Разметку даёт \ArtGsm\Sale (local/includes/ag_sale.php):
     .ag-sale-badge  — «Распродажа»; .ag-sale-old — <del> прежняя розница;
     .ag-sale-pct    — «−28 %»;     .ag-sale-row — строка «старая цена + процент»;
     .ag-sale-now    — текущая цена товара на распродаже (цвет бренда распродажи).
   Токены ниже — общие для пакетов B и D (страница /sale/, ссылка в шапке): значения не менять.
   Подключается <link> из header.php (?v=20261026sale) — делает пакет D.
   Только классы, без inline; шрифт и радиусы — токены base.css с запасными значениями.
   ============================================================ */

:root {
  --ag-sale:       #C8281E;   /* основной яркий; белый текст на нём — контраст 5,6:1 */
  --ag-sale-dark:  #A11F17;   /* hover / нажатое */
  --ag-sale-soft:  #FDECEA;   /* светлый фон под процент */
  --ag-sale-ink:   #A11F17;   /* текст на светлом (контраст на --ag-sale-soft 6,7:1) */
}

/* ---- Бейдж «Распродажа» (форма .tag/.q редизайна: 22 px, радиус r-xs, 11 px bold) ---- */
.ag-sale-badge {
  display: inline-flex; align-items: center; flex: none;
  height: 22px; padding: 0 9px; margin: 0;
  border-radius: var(--r-xs, 6px);
  background: var(--ag-sale); color: #fff;
  font-family: var(--font, 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .02em;
  text-transform: none; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(161, 31, 23, .35);
}

/* бейдж поверх фото в виде «список» (родной шаблон Aspro): слева снизу — верх занимают наклейки Aspro («Хит», «Акция») */
.ag-sale-badge--abs {
  position: absolute; top: auto; bottom: 8px; left: 8px; z-index: 5;
  text-align: left; pointer-events: none;
}

/* ---- Старая цена и процент ---- */
.ag-sale-old {
  font-family: var(--mono, var(--font, 'Manrope', system-ui, sans-serif));
  font-feature-settings: "tnum" 1;
  font-size: 12px; font-weight: 600; letter-spacing: -.01em;
  color: #6b7280;                              /* ink-3 редизайна темнее на тон: перечёркнутая цена должна читаться */
  text-decoration: line-through; text-decoration-thickness: 1px;
  white-space: nowrap;
}

.ag-sale-pct {
  display: inline-flex; align-items: center; flex: none;
  height: 18px; padding: 0 6px;
  border-radius: var(--r-xs, 6px);
  background: var(--ag-sale-soft); color: var(--ag-sale-ink);
  font-family: var(--mono, var(--font, 'Manrope', system-ui, sans-serif));
  font-feature-settings: "tnum" 1;
  font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: -.01em;
  white-space: nowrap;
}

/* строка «старая цена + процент» (над текущей ценой в плитке, под ней в карточке и списке) */
.ag-sale-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px;
  margin: 0; padding: 0; line-height: 1.2;
}

/* ---- Текущая цена распродажи: цвет бренда вместо чёрного (специфичность выше правил плитки/карточки) ---- */
.prod-price .pp-main.ag-sale-now,
.buybox .price-retail-val.ag-sale-now,
.buybox .price-retail-val.ag-sale-now .cur,
.sticky-cta .sp .sc-main.ag-sale-now,
.sticky-cta .sp .sc-main.ag-sale-now .sc-cur { color: var(--ag-sale); }

/* ---- Плитка (каталог, поиск, хиты, «С этим покупают») ---- */
.prod-price .ag-sale-row { margin-bottom: 1px; }

/* бейдж + тег «Хит» на узкой плитке не должны лезть под сердечко избранного (34 px + поля): лишнее переносится строкой ниже */
.prod .prod-tags:has(.ag-sale-badge),
body.ag-styleb .prod .prod-tags:has(.ag-sale-badge) { max-width: calc(100% - 58px); }

/* ---- Карточка товара: под крупной розницей, перед подписью «за 1 шт» ---- */
.buybox .price-block .ag-sale-row--pdp { margin: 1px 0 2px; }
.buybox .price-block .ag-sale-row--pdp .ag-sale-old { font-size: 14px; }
.buybox .price-block .ag-sale-row--pdp .ag-sale-pct { height: 20px; font-size: 12px; padding: 0 7px; }

/* ---- Вид «список» (Aspro): строка «Было …» под блоком цен ---- */
.ag-sale-row--list { margin: 4px 0 6px; gap: 2px 6px; text-align: left; }
.ag-sale-row--list .ag-sale-row__lbl {
  font-family: var(--font, 'Manrope', system-ui, sans-serif);
  font-size: 12px; font-weight: 600; color: #6b7280;
}
.ag-sale-row--list .ag-sale-old { font-size: 13px; }

/* ---- Мобильная панель покупки (sticky-cta): строка между ценой и «опт» ---- */
.sticky-cta .sp .ag-sale-row--sticky { gap: 0 5px; margin: 0; }
.sticky-cta .sp .ag-sale-row--sticky .ag-sale-old { font-size: 12px; }
.sticky-cta .sp .ag-sale-row--sticky .ag-sale-pct { height: 16px; padding: 0 5px; font-size: 10.5px; }

/* ---- Узкие плитки (2 в ряд на телефоне) ---- */
@media (max-width: 480px) {
  .prod-price .ag-sale-row .ag-sale-old { font-size: 11px; }
  .prod-price .ag-sale-row .ag-sale-pct { height: 16px; padding: 0 5px; font-size: 10px; }
  .prod-tags .ag-sale-badge { height: 20px; padding: 0 7px; font-size: 10px; }
}

/* текст только для программ чтения с экрана («Было:» перед зачёркнутой ценой) */
.ag-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* вид «список»: «Было 210 ₽ −28 %» не разрывать переносом (QA 26.10) */
.ag-sale-row__was { white-space: nowrap; }