/* pbn-enhance.css — дополнения к style.css макета msk-mo-evakuator.ru под токен-движок BablO$.
   Статичная часть: пишет этап схемы (bin/pbn/msk-mo-evakuator_1_schema.php сверяет её классы и переменные с макетом),
   сид страниц (bin/pbn/msk-mo-evakuator_2_pages.php) копирует этот файл в
   public/sites/msk-mo-evakuator-ru/assets/css/pbn-enhance.css и дописывает в конец маски иконок i[data-ic="<ключ>"].
   Только переменные и классы макета; своих классов нет — кроме служебных классов движка
   (.bf-msg, .bf-ok, .bf-err, .pdo-pagenav, .pdo-pagebtn, .active). */

/* Иконки строк MIGX (карточки преимуществ st_benefits/st_benefits2, пункты «Комплекс услуг» mx_services): значения
   экранируются, SVG туда нельзя. В строке — ключ: <i data-ic="<ключ>"> без класса (у svg макета класса нет), форма — маской
   i[data-ic="<ключ>"]{--ic:url("data:…")} из того же SVG, что рисует icon() макета (маски дописывает сид страниц), цвет —
   currentColor, как stroke="currentColor" у svg макета. display:block — как у svg в сбросе макета (svg {display:block}) */
i[data-ic]{display:block;flex:0 0 auto;background-color:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
/* ключ не задан — без маски <i> залился бы сплошным квадратом цвета иконки */
i[data-ic=""]{display:none}
/* у макета цвет иконке пункта даёт правило по тегу: .services-intro__list svg{color:var(--color-accent)} */
.services-intro__list i[data-ic]{color:var(--color-accent)}

/* Условные блоки: пустое значение — блока нет. У макета они всегда заполнены; пустыми их делают админка и страницы без
   своих данных (лид героя, надзаголовок ленты/записи/текстовой страницы, анонс карточки записи, абзац и факты «Зоны
   обслуживания», подпись и текст слайда-фото галереи). Токены стоят вплотную к тегам */
.hero__lead:empty,.sitemap-page .eyebrow:empty,.benefit-card__text:empty,.geo-intro__text > p:empty,
.gallery-carousel__caption h3:empty,.gallery-carousel__caption p:empty{display:none}
.geo-intro__fact:has(.geo-intro__fact-value:empty){display:none}
/* слайд-фото без подписи и текста: подписи нет, фото — по центру одной колонкой (у макета слайд — фото и подпись рядом) */
.gallery-carousel__caption:not(:has(> :not(:empty))){display:none}
.gallery-carousel__slide.is-active:not(:has(.gallery-carousel__caption > :not(:empty))){grid-template-columns:1fr}
.gallery-carousel__slide:not(:has(.gallery-carousel__caption > :not(:empty))) .gallery-carousel__media{width:100%;max-width:720px;margin:0 auto}

/* «Текст» страницы ([[*content]]: перенос с живого сайта и генерация воркфлоу) — колонка .usp-intro__col блока УТП главной
   в своей секции .usp-intro. Пустой «Текст» — секции нет. Колонка — ширина текста .faq__list макета (780px) по центру.
   Блок УТП главной (там .usp-intro__col лежит в .usp-intro__cols, по одному абзацу) правила ниже не меняют */
.usp-intro:has(> .container > .usp-intro__col:empty){display:none}
.usp-intro > .container > .usp-intro__col{max-width:780px;margin:0 auto}
/* initReveal() main.js прячет каждый `section .container > *` до появления 12% его площади в окне (threshold .12): текст
   выше ~7 экранов этой доли не достигает никогда и остался бы невидимым. Колонке текста и карте сайта — без появления */
.usp-intro > .container > .usp-intro__col.reveal,.sitemap-page__cols.reveal{opacity:1;transform:none}
/* Типографика текста: у макета оформлены только абзацы (p — --color-ink-soft, .usp-intro__col p — 1rem). Перенесённые и
   сгенерированные тексты несут подзаголовки, списки, ссылки, таблицы, картинки и цитаты: сброс макета снимает отступы
   (h2, p {margin:0}), маркеры списков (ul, ol {list-style:none; padding:0}) и подчёркивание ссылок (a {text-decoration:none}).
   Специфичность — класс колонки: правила сброса по тегу (0,0,1) иначе победили бы */
.usp-intro__col > * + *{margin-top:16px}
.usp-intro__col > :is(h2, h3, h4) + *{margin-top:12px}
.usp-intro__col > * + :is(h2, h3, h4){margin-top:40px}
.usp-intro__col h4{font-size:1rem;font-weight:700;color:var(--color-ink)}
.usp-intro__col :is(ul, ol){padding-left:1.4em;color:var(--color-ink-soft)}
.usp-intro__col ul{list-style:disc}
.usp-intro__col ol{list-style:decimal}
.usp-intro__col li + li{margin-top:6px}
.usp-intro__col li::marker{color:var(--color-accent)}
.usp-intro__col a:not(.btn){color:var(--color-accent-text);text-decoration:underline;text-underline-offset:3px;transition:color var(--transition)}
.usp-intro__col a:not(.btn):hover{color:var(--color-accent-hover)}
.usp-intro__col :is(strong, b){color:var(--color-ink)}
.usp-intro__col img{border-radius:var(--radius-card)}
.usp-intro__col iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--radius-card)}
.usp-intro__col table{display:block;overflow-x:auto;border-collapse:collapse;font-size:.92rem;color:var(--color-ink-soft)}
.usp-intro__col :is(th, td){padding:11px 14px;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top}
.usp-intro__col th{font-weight:600;color:var(--color-ink)}
.usp-intro__col blockquote{margin-left:0;margin-right:0;margin-bottom:0;padding:16px 22px;border-left:3px solid var(--color-accent);background:var(--color-white);color:var(--color-ink-soft)}

/* Ответ формы расчёта ([[+msg]] движка — последним в .order-calc__submit): демо-обработчик initCalcForms() main.js писал
   итог в строку p[data-calc-result] акцентным полужирным. Пока виден ответ движка, строка-подсказка скрыта — ответ встаёт
   на её место тем же кеглем; ошибка — цветом текста. Скрытое состояние держит [hidden]{display:none!important} style.css */
.order-calc__submit > .bf-msg{margin:0;font-size:.86rem;font-weight:600;color:var(--color-accent-text)}
.order-calc__submit > .bf-msg.bf-err{color:var(--color-ink)}
.order-calc__submit:has(> .bf-msg:not([hidden])) > .order-calc__note{display:none}

/* Страница «Отзывы»: секция testimonials.php списком (все карточки .is-active, без data-carousel) — у карусели карточка
   одна, поэтому отступа между карточками у макета нет */
.testimonials__track:not([data-carousel]) > .testimonial-card:not(:last-child){margin-bottom:56px}

/* Карточка записи (.benefit-card в ленте и «Читайте также»): заголовок — ссылка; наведение — акцентом, как у ссылок меню */
.benefit-card__title a{transition:color var(--transition)}
.benefit-card__title a:hover{color:var(--color-accent)}

/* Листание движка (лента записей, список отзывов; у макета листания нет): кнопки — в духе .toggle-group__btn макета: пилюли
   на кремовом фоне, текущая залита --color-ink. Кнопки движка — с инлайн-стилями, поэтому !important */
.pdo-pagenav{display:flex!important;flex-wrap:wrap!important;justify-content:center;align-items:center!important;gap:8px!important;margin:40px 0 0!important}
.pdo-pagenav .pdo-pagebtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:10px 18px!important;border:0!important;border-radius:var(--radius-pill)!important;background:var(--color-cream)!important;color:var(--color-ink-soft)!important;font-family:var(--font-sans);font-size:.88rem;font-weight:600;cursor:pointer;transition:background var(--transition),color var(--transition)}
.pdo-pagenav .pdo-pagebtn:hover{color:var(--color-ink)!important}
.pdo-pagenav .pdo-pagebtn.active{background:var(--color-ink)!important;color:var(--color-white)!important}
.pdo-pagenav .pdo-pagebtn[disabled],.pdo-pagenav .pdo-pagebtn[disabled]:hover{opacity:.4;cursor:default;color:var(--color-ink-soft)!important}

/* =========================================================
   Блок улучшений msk-mo-evakuator — дополнение к pbn-enhance.css
   Вставлять в статичную часть: bin/pbn/data/msk-mo-evakuator/pbn-enhance.css
   (сид копирует её в public/sites/msk-mo-evakuator-ru/assets/css/pbn-enhance.css
   и дописывает маски i[data-ic] в самый конец — этот блок идёт ДО масок).
   Файл грузится после style.css, поэтому правила той же специфичности
   перекрывают макет. Своих переменных не вводим, только токены :root.
   ========================================================= */

/* ---------- 1. Подписи-надзаголовки убираем ---------- */
.eyebrow{display:none!important}

/* ---------- 2. Кегль H1: макет разгонял до 3.4rem, на мобиле это 4 строки ---------- */
h1,
.h1,
h1.section-title{font-size:clamp(2.1rem,4.4vw,2.4rem)}

/* ---------- 3. Шапка: телефон и бургер прижаты вправо ---------- */
.site-header__actions{margin-left:auto}

/* ---------- 4. Логотип картинкой (в разметке уже <img>, у макета были текстовые строки) ---------- */
.site-logo__img{display:block;width:auto;height:52px}
.site-footer__brand img{display:block;width:auto;height:52px}

/* ---------- 5. Иллюстрация справа в «Комплекс услуг» вместо SVG-эскиза ---------- */
.services-intro__sketch img{
  display:block;
  width:100%;
  max-width:480px;
  height:auto;
  margin:0 auto;
  border-radius:var(--radius-card);
  object-fit:cover;
}

/* ---------- 6. «Чем ещё мы будем полезны»: иконка слева, текст справа ---------- */
.benefits-secondary .benefit-card{
  display:grid;
  grid-template-columns:60px 1fr;
  column-gap:18px;
  align-items:start;
}
.benefits-secondary .benefit-card__icon{grid-row:1/span 2;margin-bottom:0}
.benefits-secondary .benefit-card__title{align-self:end;margin-bottom:6px}
/* декоративная цепочка над секцией — убираем */
.chain-deco{display:none!important}

/* ---------- 7. Фотокарточки направлений эвакуации (6 плиток) ---------- */
.services-photo-grid{padding:var(--section-pad-y-sm) 0}
/* на десктопе держим общий ритм секций сайта (section → --section-pad-y) */
@media (min-width:900px){
  .services-photo-grid{padding:var(--section-pad-y) 0}
}
.services-photo-grid__head{max-width:720px;margin:0 0 32px}
.services-photo-grid__head .section-title{max-width:none}
.services-photo-grid__head p{margin-top:12px;font-size:1rem}

.services-photo-grid__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
@media (min-width:640px){
  .services-photo-grid__grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
  .services-photo-grid__grid{grid-template-columns:repeat(6,1fr);gap:16px}
}

.services-photo-card{
  display:flex;
  flex-direction:column;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}
.services-photo-card:hover{
  border-color:var(--color-accent);
  box-shadow:0 12px 28px rgba(20,20,20,.10);
  transform:translateY(-2px);
}
.services-photo-card:focus-visible{
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(52,89,149,.18);
}
/* Фон-подложка кремовая: картинки направлений разного размера и с прозрачностью */
.services-photo-card__media{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
  padding:14px;
  background:var(--color-cream);
  border-bottom:1px solid var(--color-border);
}
.services-photo-card__media img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.services-photo-card__title{
  padding:14px 14px 0;
  font-weight:600;
  font-size:.98rem;
  line-height:1.3;
  color:var(--color-ink);
}
.services-photo-card__price{
  padding:4px 14px 14px;
  margin-top:auto;
  font-weight:700;
  font-size:.92rem;
  color:var(--color-accent-text);
}

/* ---------- 8. Фотогалерея сеткой (вместо карусели-слайдов) ---------- */
.photo-gallery{padding:var(--section-pad-y-sm) 0}
@media (min-width:900px){
  .photo-gallery{padding:var(--section-pad-y) 0}
}
.photo-gallery__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:32px;
}
@media (min-width:768px){
  .photo-gallery__grid{grid-template-columns:repeat(3,1fr);gap:18px}
}
.photo-gallery__item{
  margin:0;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.photo-gallery__item img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:0;
}
.photo-gallery__item figcaption{
  padding:12px 14px;
  font-size:.9rem;
  line-height:1.4;
  color:var(--color-ink-soft);
}
/* подпись не задана — полоски под фото нет */
.photo-gallery__item figcaption:empty{display:none}

/* ---------- 9. Хлебные крошки ---------- */
.breadcrumbs{padding:14px 0 0;background:var(--color-white)}
.breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:.86rem;
  color:var(--color-ink-soft);
}
.breadcrumbs__item{display:inline-flex;align-items:center;gap:8px}
.breadcrumbs__item + .breadcrumbs__item::before{
  content:"›";
  font-size:1rem;
  line-height:1;
  color:var(--color-grey);
}
.breadcrumbs__item a{transition:color var(--transition)}
.breadcrumbs__item a:hover{color:var(--color-accent)}
.breadcrumbs__item--current{color:var(--color-ink);font-weight:600}

/* ---------- 10. Городская секция (текст + список городов) ---------- */
.city-section{padding:var(--section-pad-y-sm) 0}
@media (min-width:900px){
  .city-section{padding:var(--section-pad-y) 0}
}
.city-wrapper{max-width:100%}
.city-wrapper .main-title{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.18;
  color:var(--color-ink);
  margin:0 0 18px;
  max-width:46ch;
}
.city-wrapper .main-title span{color:var(--color-accent)}
.city-wrapper h4{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:1.05rem;
  line-height:1.3;
  color:var(--color-ink);
  margin:24px 0 10px;
}
.city-wrapper h5{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:.95rem;
  line-height:1.3;
  color:var(--color-ink);
  margin:18px 0 8px;
}
.city-wrapper p{font-size:.94rem}
.city-wrapper .row{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:768px){
  .city-wrapper .row{grid-template-columns:repeat(2,1fr);gap:24px}
}
.city-list{display:flex;flex-wrap:wrap;gap:8px 18px}
.city-list a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.92rem;
  line-height:1.4;
  color:var(--color-ink);
  transition:color var(--transition);
}
.city-list a:hover{color:var(--color-accent)}
.city-list img{width:12px;height:12px;flex:none;object-fit:contain}

/* ---------- 11. Форма расчёта ---------- */
.order-calc__form{gap:20px}
/* контакты подставляются в форму отдельной строкой (имя + телефон) */
.order-calc__row--contacts{gap:14px}
/* согласие на обработку данных — мелким текстом под кнопкой */
.order-calc__consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  font-size:.84rem;
  line-height:1.45;
  color:var(--color-ink-soft);
}
.order-calc__consent input[type=checkbox]{
  flex:none;
  width:18px;
  height:18px;
  margin:1px 0 0;
  accent-color:var(--color-accent);
}
.order-calc__consent a{
  color:var(--color-accent-text);
  text-decoration:underline;
  text-underline-offset:2px;
}
/* отправка: форму не дёргают повторно, пока идёт запрос */
.order-calc__form[data-busy]{opacity:.7;pointer-events:none}
.order-calc__form .field__req{color:var(--color-accent);font-weight:700}
.order-calc__note{font-size:.86rem;margin:0;color:var(--color-ink-soft)}
/* телефон в форме — цифры одной ширины, чтобы маска не «плясала» */
.order-calc__form input[type=tel]{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* чекбокс согласия (.checkbox в форме расчёта и в модалке): у макета
   класса нет, но разметка движка его использует — иначе чекбокс во всю строку */
.checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.84rem;
  line-height:1.45;
  color:var(--color-ink-soft);
  cursor:pointer;
}
.checkbox input[type=checkbox]{
  flex:none;
  width:18px;
  height:18px;
  margin:1px 0 0;
  accent-color:var(--color-accent);
}

/* ---------- 12. Модалка обратного звонка ----------
   Своё имя .pbn-modal, чтобы не пересекаться с .video-modal из main.js
   (тот рисуется инлайновыми стилями на z-index:1000 и остаётся как был). */
.pbn-modal[hidden]{display:none}
.pbn-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.pbn-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(20,20,20,.62);
}
.pbn-modal__dialog{
  position:relative;
  z-index:1;
  width:100%;
  max-width:520px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:32px 28px 28px;
  background:var(--color-white);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(20,20,20,.28);
}
.pbn-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--color-cream);
  color:var(--color-ink-soft);
  transition:background var(--transition),color var(--transition);
}
.pbn-modal__close:hover{background:var(--color-tan);color:var(--color-ink)}
.pbn-modal__eyebrow{
  margin:0 0 8px;
  font-size:.74rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-accent-text);
}
.pbn-modal__title{
  margin:0 0 10px;
  padding-right:34px;
  max-width:none;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:1.35rem;
  line-height:1.25;
  color:var(--color-ink);
}
.pbn-modal__lead{margin:0;font-size:.94rem;color:var(--color-ink-soft)}
.callback-form{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.callback-form .field{flex:1 1 auto}
.callback-form .field input{padding:12px 14px}
.callback-form .btn{width:100%}
/* фон страницы не скроллится, пока открыта модалка */
body.is-locked{overflow:hidden}

/* ---------- 13. Аватар в отзыве картинкой ---------- */
.testimonial-card__avatar{overflow:hidden}
/* буква-заглушка остаётся по центру, если картинки в данных нет */
.testimonial-card__avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* ---------- 14. Мобильные улучшения ---------- */
/* касание: не меньше 44×44 у стрелок карусели и кнопок степпера */
.carousel-arrow,
.stepper__btn{min-width:44px;min-height:44px}
/* телефон и бургер — только на мобиле: на десктопе телефон в шапке
   превращается в текстовую ссылку без фона (min-height раздул бы строку) */
@media (max-width:900px){
  .site-header__phone,
  .burger{min-width:44px;min-height:44px}
}
/* ответ FAQ на узком экране: отступ слева в 68px (под иконку вопроса) съедал строку */
@media (max-width:640px){
  .faq__a{padding:0 20px 18px}
  .faq__a p{font-size:.92rem}
}
/* мобильное меню — по ширине контейнера, а не на всю ширину окна */
.mobile-nav{width:100%;max-width:var(--container-max);margin:0 auto}

/* ---------- 15. Сетка и отступы секций ---------- */
.promo-banner{padding:var(--section-pad-y-sm) 0}
/* таблица прайса и список FAQ в макете были 720/780px по центру — тянем на всю ширину контейнера */
.price-summary__table,
.faq__list{max-width:100%}
.usp-intro__col{max-width:100%}

/* Зона обслуживания: карта вместо SVG */
.geo-intro__sketch img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-card);
  border:1px solid var(--color-border);
  background:var(--color-white);
  box-shadow:0 12px 28px rgba(20,20,20,.08);
}

@media (max-width:899px){
  .geo-intro__sketch{
    display:block;
    max-width:420px;
    margin:24px auto 0;
  }
}

/* Маски иконок i[data-ic="<ключ>"] по icon() макета — дописывает bin/pbn/msk-mo-evakuator_2_pages.php при каждом прогоне.
   Файл перезаписывается целиком: статичную часть правьте в bin/pbn/data/msk-mo-evakuator/pbn-enhance.css */
i[data-ic="price"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012l7-7%208%201%201%208-7%207z%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2210%22%20r%3D%221.6%22%2F%3E%3C%2Fsvg%3E")}
i[data-ic="percent"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M18%206L6%2018%22%2F%3E%3C%2Fsvg%3E")}
i[data-ic="wrench"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%201-5.4%205.4L4%2017l3%203%205.3-5.3a4%204%200%200%201%205.4-5.4l-2.6%202.6-2-2%202.6-2.6z%22%2F%3E%3C%2Fsvg%3E")}
i[data-ic="clock"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3.5%202%22%2F%3E%3C%2Fsvg%3E")}
i[data-ic="shield"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204.5-3%207.5-7%209-4-1.5-7-4.5-7-9V6z%22%2F%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%3C%2Fsvg%3E")}
i[data-ic="car"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2016V11l2-4h9l3%204h2v5%22%2F%3E%3Cpath%20d%3D%22M4%2016h16%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2216%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2216%22%20r%3D%221.6%22%2F%3E%3C%2Fsvg%3E")}
i[data-ic="truck"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%208h11v8H2z%22%2F%3E%3Cpath%20d%3D%22M13%2011h4l4%203v2h-8z%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2218%22%20r%3D%221.7%22%2F%3E%3C%2Fsvg%3E")}
i[data-ic="crane"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V6l10-2v4%22%2F%3E%3Cpath%20d%3D%22M14%208h6l-3%204%22%2F%3E%3Cpath%20d%3D%22M17%2012v5%22%2F%3E%3Cpath%20d%3D%22M4%2020h13%22%2F%3E%3C%2Fsvg%3E")}
i[data-ic="wheel"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M12%204v4%22%2F%3E%3Cpath%20d%3D%22M12%2016v4%22%2F%3E%3Cpath%20d%3D%22M4%2012h4%22%2F%3E%3Cpath%20d%3D%22M16%2012h4%22%2F%3E%3C%2Fsvg%3E")}