/* Принудительное выравнивание текста по левому краю внутри контента страницы */
.main-content, .main-content * {
  text-align: left;
}

/* Дополнительные стили для карточек/плашек на страницах оптики.
   Загрузить на сервер в ту же папку, где лежат main.css, main-head.css, main-tables.css,
   то есть по пути /css/site-extra.css, и подключить в <head> страницы строкой:
   <link rel="stylesheet" href="/css/site-extra.css">
   Используются переменные из main-vars.css (--color-href, --color-h1 и т.д.),
   поэтому этот файл должен подключаться ПОСЛЕ main.css. */

.ax-btn, .ax-btn:link, .ax-btn:visited, .ax-btn:active {
  display: inline-block;
  background: var(--color-href, #618cd7);
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
}
.ax-btn:hover {
  background: var(--color-href-hover, #ff0000);
  color: #ffffff;
  text-decoration: none;
}

/* Строка "кнопка + телефон/текст рядом", выровненные по центру по высоте */
.ax-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 10px 0;
  font-size: var(--font-normal, 14px);
}
.ax-cta-row > span, .ax-cta-row > a:not(.ax-btn) {
  font-size: var(--font-normal, 14px);
}

/* Плашки с ключевыми цифрами */
.ax-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 14px 0 20px;
  padding: 0;
  list-style: none;
}
.ax-facts li {
  background: #ffffff;
  border: 1px solid #cfd7dc;
  border-radius: 6px;
  padding: 14px 16px;
}
.ax-facts b {
  display: block;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-h1, #618cd7);
  font-weight: bold;
}
.ax-facts span {
  font-size: var(--font-small, 13px);
  color: #54636e;
}

/* Информационная плашка (не предупреждение, а подсказка/приглашение) */
.ax-info {
  background: #eaf2fb;
  border-left: 5px solid var(--color-href, #618cd7);
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  margin: 16px 0;
  font-size: var(--font-normal, 14px);
  line-height: 1.5;
  color: #333333;
}
.ax-info b {
  font-size: var(--font-normal, 14px);
  color: var(--color-h1, #618cd7);
}
.ax-info p { margin: 0 0 10px; }
.ax-info p:last-child { margin-bottom: 0; }

/* Плашка-предупреждение */
.ax-warn {
  background: #fbeeea;
  border-left: 5px solid #9c3524;
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  margin: 16px 0;
  font-size: var(--font-normal, 14px);
  line-height: 1.5;
  color: #333333;
}
.ax-warn b {
  font-size: var(--font-normal, 14px);
  color: #9c3524;
}

/* Таблицы: обёртка со скроллом на мобильных + своя чистая тема
   (замена table-bordered/table-zebra — используйте КЛАСС ax-table вместо них) */
.ax-table-wrap {
  overflow-x: auto;
  border: 1px solid #cfd7dc;
  border-radius: 6px;
  margin: 14px 0;
  background: #ffffff;
  -webkit-overflow-scrolling: touch;
}
.ax-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px; /* не даёт колонкам схлопываться в кашу на узком экране — лучше скролл */
  font-size: var(--font-normal, 14px);
}
.ax-table th, .ax-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #e3e8eb;
  font-size: var(--font-normal, 14px);
  vertical-align: top;
  white-space: normal;
}
.ax-table th {
  background: #eef2f4;
  font-weight: bold;
  white-space: nowrap;
}
.ax-table tr:last-child td { border-bottom: 0; }
.ax-table tr:hover td { background: #fbfaf3; }

@media screen and (max-width: 619px) {
  .ax-table { min-width: 420px; }
}

/* Сворачиваемые блоки (длинные справочные таблицы) */
.ax-details {
  margin: 14px 0;
  border: 1px solid #cfd7dc;
  border-radius: 6px;
  padding: 2px 14px;
  background: #fbfbfc;
}
.ax-details > summary {
  cursor: pointer;
  font-weight: bold;
  padding: 10px 0;
  font-size: var(--font-normal, 14px);
  color: var(--color-h2, #618cd7);
  list-style: revert;
}
.ax-details[open] > summary {
  border-bottom: 1px solid #e3e8eb;
  margin-bottom: 10px;
}
.ax-details .ax-table-wrap {
  margin: 0 0 12px;
  border: 1px solid #e3e8eb;
}

/* Карточки типов изделий */
.ax-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 14px 0 20px;
}
.ax-types .ax-card {
  background: #ffffff;
  border: 1px solid #cfd7dc;
  border-radius: 6px;
  padding: 16px 18px;
}
.ax-types .ax-card h3 {
  display: block;
  margin: 0 0 6px;
  color: var(--color-h2, #618cd7);
  font-size: var(--font-prebig, 16px);
  font-weight: bold;
}
.ax-types .ax-card p {
  margin: 0;
  padding: 0;
  font-size: var(--font-normal, 14px);
}

/* Финальный блок "Заказать" */
.ax-order {
  background: #17222b;
  color: #e6edf1;
  border-radius: 8px;
  padding: 24px 28px;
  margin: 18px 0 8px;
}
.ax-order h2 {
  display: block;
  color: #ffffff;
  margin: 0 0 8px;
}
.ax-order p {
  color: #e6edf1;
  margin: 0 0 10px;
}
.ax-order a {
  color: #ffffff;
}
.ax-order .ax-btn {
  background: #ffffff;
  color: #17222b;
  margin-top: 6px;
}
.ax-order .ax-btn:hover {
  background: #cfd7dc;
  color: #17222b;
}

.ax-note {
  font-size: var(--font-small, 13px);
  color: #54636e;
}

@media screen and (max-width: 619px) {
  .ax-facts, .ax-types { grid-template-columns: 1fr; }
}