/* Attera — стили интерактива новых блоков (только тестовые шаблоны template-atb-*) */
.atb-page{background:#fff}
.atb-faq-q{user-select:none}
.atb-faq-item.is-open .atb-faq-sign{color:#E4183E;border-color:#E4183E}
.atb-tab-btn{cursor:pointer}
.atb-tab-panel[hidden]{display:none!important}
.atb-chip{cursor:pointer}
.atb-check{cursor:pointer}
.atb-check.is-on .atb-check__box{background:#E4183E!important;border-color:#E4183E!important;color:#fff}
.atb-swatch{cursor:pointer}
.atb-swatch.is-on{outline:2px solid #E4183E;outline-offset:2px}
.atb-sort.is-on{background:#E4183E!important;color:#fff!important;border-color:#E4183E!important}
.atb-card[hidden]{display:none!important}
.atb-thumb{cursor:pointer}
.atb-thumb.is-on{border:2px solid #E4183E!important}
.atb-calc-input{border:1px solid #e2e2e2;border-radius:8px;padding:13px 14px;font-size:15px;color:#303030;background:#fff;font-family:Inter,sans-serif;width:100%;box-sizing:border-box}
@media (max-width:900px){
  .atb-grid-3,.atb-grid-4,.atb-grid-5{grid-template-columns:1fr 1fr!important}
  .atb-flex-col{flex-direction:column!important}
  .atb-aside{flex:1 1 auto!important;width:100%!important}
}
@media (max-width:600px){
  .atb-grid-3,.atb-grid-4,.atb-grid-5{grid-template-columns:1fr!important}
}

/* ==========================================================================
   Правки по замечаниям Дарины 09.09.2026
   ========================================================================== */

/* Поля калькулятора одной высоты: у select и input разная нативная механика,
   из-за этого поля не совпадали по базовой линии. */
.atb-field{height:48px;line-height:24px;padding:11px 14px;box-sizing:border-box;width:100%;
  border:1px solid #e2e2e2;border-radius:8px;background:#fff;font-family:Inter,sans-serif;
  font-size:15px;color:#303030;-webkit-appearance:none;-moz-appearance:none;appearance:none}
select.atb-field{padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c8c8c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.atb-field:focus{outline:none;border-color:#E4183E}

/* Поля в «Полезных инструментах» карточки */
.atb-tool-input{height:44px;line-height:22px;padding:10px 13px;box-sizing:border-box;width:100%;
  border:1px solid #e0e0e0;border-radius:9px;background:#fff;font-family:Inter,Arial,sans-serif;
  font-size:15px;color:#1c1c1c;-webkit-appearance:none;-moz-appearance:none;appearance:none}
select.atb-tool-input{padding-right:30px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c8c8c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.atb-tool-input:focus{outline:none;border-color:#E4183E}

/* Кнопка «Получить консультацию» в блоке темы: тема задаёт ей фиксированную
   ширину в vw, из-за чего на узких экранах текст и стрелка вылезали за край.
   Правило действует только на тестовых страницах (.atb-page). */
.atb-page .products__item .item-info-block .info-btn-container .order-btn{
  width:auto!important;height:auto!important;max-width:100%;
  padding:14px 22px!important;gap:10px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center}
.atb-page .products__item .item-info-block .info-btn-container .order-btn span{line-height:1.3}
.atb-page .products__item .item-info-block .info-btn-container .order-btn img{flex:0 0 auto}

/* «Читать далее» в SEO-тексте */
.atb-more.is-open{max-height:none!important}
.atb-more.is-open .atb-more__fade{display:none}

/* Раскрывающийся фильтр каталога на мобильных */
@media (max-width:900px){
  .atb-filter-toggle{display:flex!important}
  .atb-filter{display:none}
  .atb-filter.is-open{display:block}
}

/* --------------------------------------------------------------------------
   Адаптив новых блоков. Разметка макапов свёрстана инлайновыми стилями
   с фиксированными сетками, поэтому правила цепляем по содержимому style —
   иначе пришлось бы править сотни инлайнов вручную.
   -------------------------------------------------------------------------- */
.atb-page{overflow-x:hidden}

@media (max-width:1100px){
  .atb-page [style*="max-width:1047px"],
  .atb-page [style*="max-width:1046px"],
  .atb-page [style*="max-width:1200px"]{padding-left:16px!important;padding-right:16px!important}
}

@media (max-width:980px){
  /* сетки 3-5 колонок -> 2 */
  .atb-page [style*="grid-template-columns:repeat(3"],
  .atb-page [style*="grid-template-columns: repeat(3"],
  .atb-page [style*="grid-template-columns:repeat(4"],
  .atb-page [style*="grid-template-columns: repeat(4"],
  .atb-page [style*="grid-template-columns:repeat(5"],
  .atb-page [style*="grid-template-columns: repeat(5"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* колонки фиксированной ширины разворачиваем на всю строку */
  .atb-page [style*="flex:0 0 430px"],
  .atb-page [style*="flex:0 0 252px"],
  .atb-page [style*="width:430px"]{flex:1 1 auto!important;width:100%!important}

  /* горизонтальные ряды переносим */
  .atb-page section [style*="display:flex"]{flex-wrap:wrap}
  /* В столбик разворачиваем только помеченные двухколоночные блоки: правило
     по одному gap ставило в столбик и ряды мелких элементов (кружки цветов). */
  .atb-page .atb-flex-col{flex-direction:column!important}
  .atb-page section [style*="display:flex"] > [style*="flex:1"]{min-width:0}

}

@media (max-width:640px){
  .atb-page [style*="grid-template-columns:repeat(2"],
  .atb-page [style*="grid-template-columns: repeat(2"],
  .atb-page [style*="grid-template-columns:repeat(3"],
  .atb-page [style*="grid-template-columns: repeat(3"],
  .atb-page [style*="grid-template-columns:repeat(4"],
  .atb-page [style*="grid-template-columns: repeat(4"],
  .atb-page [style*="grid-template-columns:repeat(5"],
  .atb-page [style*="grid-template-columns: repeat(5"]{grid-template-columns:minmax(0,1fr)!important}

  /* крупные заголовки макапа на узком экране */
  .atb-page [style*="font-size:40px"]{font-size:28px!important;line-height:1.25!important}
  .atb-page [style*="font-size:34px"]{font-size:26px!important}
  .atb-page [style*="font-size:32px"]{font-size:24px!important;line-height:1.3!important}
  .atb-page [style*="font-size:28px"]{font-size:22px!important}
  .atb-page [style*="font-size:27px"]{font-size:21px!important}

  /* внутренние отступы карточек */
  .atb-page [style*="padding:34px 36px"],
  .atb-page [style*="padding:44px 48px 36px"],
  .atb-page [style*="padding:34px 34px 30px"],
  .atb-page [style*="padding:28px 30px"]{padding:20px 18px!important}

  /* мета-строки в карточке товара: подпись и значение вставали друг на друга */
  .atb-page .atb-meta-row{flex-direction:column;align-items:flex-start!important;gap:0}
  .atb-page .atb-meta-row > span:last-child{text-align:left!important}

  /* картинки-обложки макапа */
  .atb-page [style*="height:430px"]{height:300px!important}
  .atb-page [style*="height:200px"]{height:170px!important}
}

/* Инлайновые min-width из макапов ломали узкие экраны — снимаем их на мобильных,
   а широкие таблицы делаем прокручиваемыми внутри своей рамки. */
@media (max-width:980px){
  .atb-page [style*="min-width:520px"],
  .atb-page [style*="min-width:420px"],
  .atb-page [style*="min-width:300px"]{min-width:0!important}
}

/* ==========================================================================
   Правки по замечаниям Дарины 14.09.2026
   ========================================================================== */

/* --- Выпадающие списки (atb-new.js enhanceSelect) --- */
.atb-dd{position:relative;width:100%}
.atb-dd__native{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important;padding:0!important;border:0!important}
.atb-dd__btn{display:block;width:100%;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding-right:36px!important;margin:0;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c8c8c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-color:#fff!important}
.atb-dd__btn.is-placeholder{color:#a0a0a0}
.atb-dd.is-open .atb-dd__btn{border-color:#E4183E}
.atb-dd__list{list-style:none;margin:6px 0 0;padding:6px;background:#fff;border:1px solid #e2e2e2;border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);max-height:264px;overflow-y:auto;position:absolute;left:0;right:0;top:100%;
  z-index:40;box-sizing:border-box;font-family:Inter,Arial,sans-serif;text-align:left}
.atb-dd__list[hidden]{display:none!important}
.atb-dd__opt{padding:11px 14px;font-size:15px;line-height:1.35;color:#303030;border-radius:7px;cursor:pointer;
  white-space:normal;overflow-wrap:anywhere;list-style:none;margin:0}
.atb-dd__opt::before{content:none!important}
.atb-dd__opt:hover{background:#f5f5f6}
.atb-dd__opt.is-on{background:rgba(228,24,62,.08);color:#E4183E;font-weight:600}
@media (max-width:768px){
  /* на мобильных список раскрывается внутри блока и раздвигает его — ничего не перекрывает */
  .atb-dd__list{position:static;box-shadow:none;max-height:none}
  .atb-dd__opt{min-height:44px;display:flex;align-items:center;box-sizing:border-box;font-size:16px}
}

/* --- Формы заявок --- */
.atb-input{display:block;width:100%;height:54px;box-sizing:border-box;margin:0;border:1px solid #e2e2e2;border-radius:10px;
  background:#fff;padding:0 18px;font-family:Inter,Arial,sans-serif;font-size:16px;color:#303030;
  -webkit-appearance:none;appearance:none;outline:none;box-shadow:none}
.atb-input::placeholder{color:#a0a0a0;opacity:1}
.atb-input:focus{border-color:#E4183E;box-shadow:0 0 0 3px rgba(228,24,62,.15)}
.atb-input--sm{height:48px;padding:0 14px;border-radius:8px;margin-bottom:11px}
.atb-dd .atb-input--sm{margin-bottom:0}
.atb-cta-box .atb-dd{margin-bottom:11px}
.atb-page .validate_error{border-color:#E4183E!important;box-shadow:0 0 0 3px rgba(228,24,62,.2)!important}
.atb-form-btn{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:56px!important;
  margin:0 0 14px!important;padding:0 16px!important;border:0!important;border-radius:10px!important;background:#E4183E!important;
  color:#fff!important;font-family:Inter,Arial,sans-serif!important;font-size:16px!important;font-weight:600;cursor:pointer;
  box-sizing:border-box;transition:background .15s,opacity .15s}
.atb-form-btn:hover{background:#c8102f!important}
.atb-form-btn.disabled{opacity:.45!important;pointer-events:none!important}
.atb-agree{flex:0 0 18px;width:18px;height:18px;margin-top:1px;border-radius:4px;border:1.5px solid #E4183E;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:transparent;font-size:11px;line-height:1;
  background:transparent;transition:background .15s}
.atb-agree.checked{background:#E4183E;color:#fff}
.atb-agree input{display:none!important}
.atb-agree:focus-visible{outline:2px solid #fff;outline-offset:2px}
.atb-policy{cursor:pointer;border-bottom:1px dotted currentColor}
.atb-policy:hover{color:#E4183E!important}
.atb-form-msg{font-size:13px;line-height:1.4;color:#ff8a9e;margin:-6px 0 12px}
.atb-form-msg--light{color:#E4183E;margin:0 0 8px}
.atb-form-msg[hidden]{display:none!important}

/* --- Фильтр цвета: заметная красная обводка у выбранного --- */
.atb-swatch{position:relative;transition:box-shadow .15s}
.atb-swatch.is-on{outline:none!important;box-shadow:0 0 0 2px #fff,0 0 0 4px #E4183E!important}
.atb-swatch.is-on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:700;text-shadow:0 0 3px rgba(0,0,0,.7)}

/* --- Перенос длинных строк --- */
.atb-page section h1,.atb-page section h2,.atb-page section h3{overflow-wrap:break-word}
.atb-page section td,.atb-page section th{overflow-wrap:anywhere}

@media (max-width:980px){
  .atb-page [style*="flex:0 0 372px"]{flex:1 1 100%!important;width:100%!important}
  .atb-page .atb-dlv-side{min-width:0!important;width:100%!important}
  .atb-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:768px){
  /* кнопки блока темы на главной — друг под другом на всю ширину */
  .atb-page .info-btn-container{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;width:100%!important}
  .atb-page .info-btn-container > .order-btn,
  .atb-page .info-btn-container > .free-call-btn{width:100%!important;max-width:100%!important;margin:0!important;
    box-sizing:border-box!important;justify-content:center!important;text-align:center}
  /* тема задаёт тексту кнопки фиксированную ширину — из-за неё «Рассчитать стоимость» ломалось на 2 строки */
  .atb-page .info-btn-container > .free-call-btn span,
  .atb-page .info-btn-container > .order-btn span{width:auto!important;max-width:none!important;flex:0 1 auto;white-space:nowrap}
  .atb-page .info-btn-container > .free-call-btn{gap:12px}
}

@media (max-width:640px){
  /* таблица доставки в каталоге: каждая строка — карточка «подпись — значение» */
  .atb-page table.atb-rtable,.atb-page table.atb-rtable tbody{display:block;width:100%!important}
  .atb-page table.atb-rtable thead{display:none}
  .atb-page table.atb-rtable tr{display:block;padding:12px 16px}
  .atb-page table.atb-rtable td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:4px 0!important;text-align:right}
  .atb-page table.atb-rtable td::before{content:attr(data-label);flex:0 0 auto;max-width:48%;text-align:left;color:#8c8c8c;font-weight:400;font-size:13px}
  .atb-page table.atb-rtable td:first-child{display:block;text-align:left;font-size:15px;font-weight:600;padding-bottom:6px!important}
  .atb-page table.atb-rtable td:first-child::before{content:none}

  /* характеристики на главной: 4 ячейки в строке -> сетка 2×2 */
  .atb-page table.atb-spec4,.atb-page table.atb-spec4 tbody{display:block;width:100%!important}
  .atb-page table.atb-spec4 tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:8px}
  .atb-page table.atb-spec4 td{padding:10px 10px!important;border-radius:0!important;font-size:13px}

  /* характеристики в карточке: подпись и значение переносятся внутри экрана */
  .atb-page table.atb-spec2 td{padding:10px 12px!important;font-size:14px;vertical-align:top}
  .atb-page table.atb-spec2 td:first-child{width:46%!important}

  /* поля калькуляторов в карточке — друг под другом */
  .atb-page .atb-tool-fields{flex-direction:column!important;gap:12px!important}
  .atb-page .atb-tool-fields > div{flex:1 1 auto!important;width:100%}

  .atb-page .atb-colors{gap:10px!important}
  .atb-page .atb-colors > a{width:72px!important}
  .atb-footer-grid{grid-template-columns:minmax(0,1fr)!important}
}