.elementor-9442 .elementor-element.elementor-element-a148dfc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9442 .elementor-element.elementor-element-a148dfc:not(.elementor-motion-effects-element-type-background), .elementor-9442 .elementor-element.elementor-element-a148dfc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F1;background-image:url("https://autonomica4wd.ru/wp-content/uploads/2026/01/back.webp");}.elementor-9442 .elementor-element.elementor-element-ba09f3d{padding:0px 0px 0px 0px;}.elementor-9442 .elementor-element.elementor-element-4a117f4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9442 .elementor-element.elementor-element-4a117f4:not(.elementor-motion-effects-element-type-background), .elementor-9442 .elementor-element.elementor-element-4a117f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0F0F10;}.elementor-9442 .elementor-element.elementor-element-48b3eee{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9442 .elementor-element.elementor-element-3b1d6b1{--display:flex;--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9442 .elementor-element.elementor-element-5ff6e18{--display:flex;}.elementor-9442 .elementor-element.elementor-element-db5b7b9{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9442 .elementor-element.elementor-element-149e1bb{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}@media(max-width:767px){.elementor-9442 .elementor-element.elementor-element-5ff6e18{--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-9442 .elementor-element.elementor-element-3b1d6b1{--content-width:1280px;}.elementor-9442 .elementor-element.elementor-element-149e1bb{--content-width:1280px;}}/* Start custom CSS for html, class: .elementor-element-ba09f3d *//* ===== ПРОМО-БЛОК И БРЕНДЫ ===== */

.aw-promo-container {
  width: min(1341px, calc(100% - 40px));
  max-width: 1341px;
  margin-inline: auto;
  padding: 0;
}

.aw-promo__top {
  display: grid;
  grid-template-columns: 360px minmax(0, 963px);
  gap: 18px;
  justify-content: center;
}

.aw-promo__info {
  width: 360px;
  min-height: 200px;
  padding: 18px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(180deg, #0b0b0b, #171717);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aw-promo__logo {
  width: 130px;
  margin-bottom: 14px;
  display: block;
}

.aw-promo__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
}
.aw-promo__benefits li {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}

.aw-promo__banner {
  position: relative;
  min-height: 200px;
  width: 100%;
  max-width: 963px;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
  background: #111 url("https://bagazhnik-premium.ru/wp-content/uploads/2026/07/group-118-1-scaled-1-1-1-1.webp") center/cover no-repeat;
}
.aw-promo__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,15,16,.72), rgba(15,15,16,.48) 58%, transparent);
  z-index: 1;
}

.aw-promo__catalog-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.aw-promo__title {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 45px;
  height: 57px;
  padding: 0 34px 0 42px;
  border-radius: 0 8px 8px 0;
  background: #E2571F;
  color: #111;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.aw-promo__subtitle {
  position: absolute;
  z-index: 3;
  left: 42px;
  top: 112px;
  max-width: 500px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  font-size: 18px;
  line-height: 1.28;
  text-transform: uppercase;
  color: #fff;
}

.aw-promo__bottom {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

.aw-promo__phone-label {
  color: #fff;
  margin: 0 10px 0 42px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
}

.aw-promo__phone {
  padding: 8px 22px;
  border-radius: 8px 8px 0 0;
  background: #E2571F;
  color: #111;
}
.aw-promo__phone-number {
  display: block;
  color: #111;
  font-size: 22px;
  font-weight: 800;
  text-decoration: none;
  transition: color 0.2s ease; /* плавность при наведении */
}
.aw-promo__phone-number:hover {
  color: #fff; /* буквы становятся белыми */
}

/* ===== БРЕНДЫ ===== */
.aw-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.aw-brand-card {
  height: 126px;
  padding: 0;
  border: 4px solid transparent;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aw-brand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.aw-brand-card:nth-child(4n+1):hover { border-color: #E2571F; }
.aw-brand-card:nth-child(4n+2):hover { border-color: #F75339; }
.aw-brand-card:nth-child(4n+3):hover { border-color: #49B9FF; }
.aw-brand-card:nth-child(4n+4):hover { border-color: #77C043; }
.aw-brand-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== АДАПТИВ ===== */
@media (max-width: 980px) {
  .aw-promo-container {
    width: calc(100% - 40px);
    max-width: 100%;
  }
  .aw-promo__top {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .aw-promo__info {
    width: 100%;
    min-height: auto;
  }
  .aw-promo__banner {
    max-width: 100%;
    min-height: 200px;
  }
  .aw-brand-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .aw-promo-container {
    width: calc(100% - 24px);
    max-width: none;
  }
  .aw-promo__top {
    display: block;
  }
  .aw-promo__info {
    display: none;
  }
  .aw-promo__banner {
    width: 100%;
    max-width: 100%;
    height: 150px;
    min-height: 150px;
    border-radius: 6px;
  }
  .aw-promo__banner::before {
    background: linear-gradient(90deg, rgba(15,15,16,.66) 0%, rgba(15,15,16,.45) 55%, rgba(15,15,16,0) 100%);
  }
  .aw-promo__title {
    left: 0;
    top: 24px;
    height: auto;
    padding: 6px 12px;
    border-radius: 0 5px 5px 0;
    font-size: 15px;
    white-space: normal;          /* разрешаем перенос */
    max-width: calc(100% - 120px); /* не перекрываем блок с телефоном */
  }
  .aw-promo__subtitle {
    left: 12px;
    top: 58px;
    margin: 0;
    padding: 0;
    font-size: 10px;             /* чуть крупнее для читаемости */
    line-height: 1.4;
    white-space: normal;
    max-width: calc(100% - 120px);
  }
  .aw-promo__bottom {
    left: auto;
    right: 0;
    bottom: 0;
  }
  .aw-promo__phone-label {
    order: 1;
    margin: 0 10px 0 0;
    font-size: 9px;
    white-space: nowrap;
  }
  .aw-promo__phone {
    order: 2;
    padding: 8px 12px;
    border-radius: 5px 0 0 0;
  }
  .aw-promo__phone-number {
    font-size: 16px;             /* уменьшаем, чтобы помещалось */
    white-space: nowrap;
  }

  .aw-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
  }
  .aw-brand-card {
    height: 126px;
    border-width: 3px;
    border-radius: 10px;
  }
}

/* ===== ПЛАНШЕТНАЯ ВЕРСИЯ: телефон справа, текст не налезает ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .aw-promo__bottom {
    left: auto !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .aw-promo__title {
    max-width: calc(100% - 200px) !important;
    white-space: normal !important;
    font-size: clamp(20px, 3vw, 28px) !important;
    padding: 0 18px 0 24px !important;
    height: auto !important;
    min-height: 50px;
    top: 30px !important;
  }

  .aw-promo__subtitle {
    left: 24px !important;
    top: 90px !important;
    max-width: calc(100% - 220px) !important;
    font-size: 14px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .aw-promo__phone-label {
    margin: 0 10px 0 0 !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .aw-promo__phone {
    padding: 8px 16px !important;
    border-radius: 8px 0 0 0 !important;
  }

  .aw-promo__phone-number {
    font-size: 18px !important;
    white-space: nowrap !important;
  }
}

/* ===== ОЧЕНЬ УЗКИЕ ТЕЛЕФОНЫ (≤380px) ===== */
@media (max-width: 380px) {
  .aw-promo__title {
    font-size: 12px;
    padding: 4px 8px;
    top: 16px;
    max-width: calc(100% - 100px);
  }
  .aw-promo__subtitle {
    font-size: 8px;
    top: 44px;
    left: 8px;
    max-width: calc(100% - 90px);
    line-height: 1.3;
  }
  .aw-promo__phone-number {
    font-size: 14px;
  }
  .aw-promo__phone {
    padding: 6px 10px;
  }
  .aw-promo__phone-label {
    font-size: 7px;
    margin-right: 6px;
  }
}

/* White type on the updated orange accent */
.aw-promo__title,
.aw-promo__phone,
.aw-promo__phone-number {
  color: #fff !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-21350f1 *//* ===== МОБИЛЬНЫЕ ПРЕИМУЩЕСТВА ===== */
.aw-mobile-benefits-section {
  display: none; /* скрыт по умолчанию, показывается только на телефонах */
  margin-top: 20px;
  padding: 18px 0;
  background: #0F0F10;
}

.aw-mobile-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0;
  padding: 0;
  background: #0F0F10;
}

.aw-mobile-benefit {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.aw-mobile-benefit img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.aw-mobile-benefit__text {
  font-size: 10.6px;
  line-height: 1.32;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.aw-mobile-benefit__text strong {
  display: block;
  color: #E2571F;
  font: inherit;
}

/* ===== ПОКАЗЫВАЕМ ТОЛЬКО НА ТЕЛЕФОНАХ ===== */
@media (max-width: 767px) {
  .aw-mobile-benefits-section {
    display: block;
  }
}

/* ===== ДОПОЛНИТЕЛЬНАЯ КОРРЕКТИРОВКА ДЛЯ ОЧЕНЬ УЗКИХ ЭКРАНОВ ===== */
@media (max-width: 360px) {
  .aw-mobile-benefits {
    gap: 12px 10px;
    padding-inline: 0;
  }
  .aw-mobile-benefit {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
  }
  .aw-mobile-benefit img {
    width: 32px;
    height: 32px;
  }
  .aw-mobile-benefit__text {
    font-size: 9.4px;
  }
}/* End custom CSS */
/* Start custom CSS for global, class: .elementor-global-12179 *//* ===== ARC CATALOG ===== */
.arc-catalog {
  position: relative;
  overflow: hidden;
  padding: 35px 0;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.arc-catalog__bg {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: 70% center !important;
  transform: scale(1.03);
  z-index: 0;
}
.arc-catalog__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.78) 40%, rgba(0,0,0,.58) 70%, rgba(0,0,0,.38) 100%);
}
.arc-catalog__wrap {
  position: relative;
  z-index: 2;
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 !important;
}

/* Плашка "КАТАЛОГ" */
.arc-catalog__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 46px 10px 0;
  margin: 0 0 30px 0;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  color: #000;
  background: transparent;
}
.arc-catalog__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((1280px - 100vw) / 2);
  width: calc((100vw - 1280px) / 2 + 100% + 46px);
  height: 100%;
  background: #E2571F;
  border-radius: 0 6px 6px 0;
  z-index: -1;
}
@media (max-width: 1280px) {
  .arc-catalog__title::before {
    left: -20px;
    width: calc(100% + 66px);
  }
}

/* Сетка — всегда 3 колонки на ПК */
.arc-catalog__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr;
  gap: clamp(40px, 6vw, 86px);
  align-items: start;
}

/* Колонка */
.arc-catalog__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Блок категории */
.arc-catalog__block {
  width: 100%;
}
.arc-catalog__block + .arc-catalog__block,
.arc-catalog__block--spaced {
  margin-top: 26px;
}

/* Заголовок категории */
.arc-catalog__hlink {
  display: inline-block;
  margin: 0 0 12px 0;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.15;
  text-decoration: none !important;
}
.arc-catalog__hlink:hover {
  color: #E2571F !important;
}

/* Список */
.arc-catalog__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.arc-catalog__list li {
  margin: 0;
  line-height: 1.15;
}
.arc-catalog__list a {
  display: inline-block;
  padding: 2px 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.18;
  text-decoration: none !important;
}
.arc-catalog__list a:hover {
  color: #E2571F !important;
}

/* ===== ТОЛЬКО МОБИЛЬНЫЙ АДАПТИВ (одна колонка) ===== */
@media (max-width: 767px) {
  .arc-catalog__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .arc-catalog__col {
    width: 100% !important;
  }
  .arc-catalog__block + .arc-catalog__block,
  .arc-catalog__block--spaced {
    margin-top: 18px !important;
  }
  .arc-catalog__title {
    font-size: 26px !important;
    padding: 10px 30px 10px 0 !important;
    margin-bottom: 20px !important;
  }
  .arc-catalog__wrap {
    width: calc(100% - 24px) !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-67a3464 *//* =========================
   POPULAR PRODUCTS (Figma-like)
   Цель: заголовок + описание ВСЕГДА в 1 строку, без переносов,
   и карточки шириной как в Figma (289px).
   ========================= */

.pop{ padding: 28px 0; }

.pop__title{
  font-size: 54px;
  line-height: 1;
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.pop__sub{
  margin: 0 0 26px;
  font-size: 18px;
  color:#2b2b2b;
  opacity:.85;
}

/* Сетка как в Figma: фикс ширина карточек */
.pop__grid{
  display:grid;
  grid-template-columns: repeat(4, 289px);
  gap: 18px;
  justify-content: space-between;
}

/* Карточка */
.pc{
  background:#fff;
  border-radius: 14px;
  padding: 12px;                 /* важно: не 16 */
  box-shadow: 0 10px 26px rgba(0,0,0,.06);

  display:flex;
  flex-direction:column;
  height:100%;
}

/* Изображение */
.pc__img{
  display:flex;
  align-items:center;
  justify-content:center;

  background:#eef2f0;
  border-radius: 12px;
  padding: 22px;
  aspect-ratio: 1 / 1;
  overflow:hidden;
}
.pc__img img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

/* Тело карточки */
.pc__body{
  padding-top: 12px;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* Наличие */
.pc__stock{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color:#1c7f4c;
  margin-bottom: 8px;
}
.pc__stock::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:#2ecc71;
  box-shadow: 0 0 0 3px rgba(46,204,113,.18);
}
.pc__stock--out{ color:#9a2d2d; }
.pc__stock--out::before{
  background:#ff4d4d;
  box-shadow: 0 0 0 3px rgba(255,77,77,.18);
}

/* Заголовок — 1 строка */
.pc__name{
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .01em;          /* чуть меньше, чтобы чаще влезало */
  text-transform: uppercase;
  line-height: 1.25;

  white-space: nowrap;
  overflow: hidden;               /* важно, чтобы не вылазил */
  text-overflow: clip;            /* без "..." */
}
.pc__name a{
  color:#111;
  text-decoration:none;
  display:block;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Описание — 1 строка */
.pc__desc{
  margin: 0 0 12px;
  font-size: 12px;
  color:#4a4a4a;
  line-height: 1.35;

  white-space: nowrap;
  overflow: hidden;               /* важно */
  text-overflow: clip;            /* без "..." */
}

/* Цена (если добавил в HTML: <div class="pc__price">000.000 ₽</div>) */
.pc__price{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
  color:#111;
  margin: 0 0 12px;
}

/* Кнопка всегда внизу */
.pc__btn{
  margin-top:auto;

  display:flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  border-radius: 8px;
  background:#ffc400;
  color:#111;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:.04em;
  font-size: 12px;
  text-decoration:none;
}

.pc__btn:hover {
    color:#ffffff;
    transform: scale(1.02)!important;
}

/* Адаптив */
@media (max-width: 1300px){
  .pop__grid{
    grid-template-columns: repeat(3, 289px);
    justify-content:center;
  }
}

@media (max-width: 980px){
  .pop__title{ font-size: 40px; }
  .pop__grid{
    grid-template-columns: repeat(2, 289px);
    justify-content:center;
  }
}

@media (max-width: 620px){
  .pop__grid{
    grid-template-columns: 1fr;
    justify-content:stretch;
  }
  .pc{
    max-width: 289px;
    margin: 0 auto;
  }
}
/* FIX: чтобы после публикации заголовки не "распухали" */
.pc__name{
  letter-spacing: 0 !important;   /* было .01em/.02em — это часто ломает */
  font-size: 12px !important;      /* вместо 13: + запас */
}

.pc__name a{
  letter-spacing: inherit !important;
}
/* =======================
   DESCRIPTION — 1 LINE
   ======================= */

.pc__desc{
  font-size: 12px !important;
  line-height: 1.35;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;   /* без ... */

  min-height: auto !important;      /* убираем старые фиксы */
  display: block !important;        /* убираем -webkit-box */
}
.pc__desc{
  letter-spacing: -0.01em;
}
/* DESCRIPTION: 1 строка + гарантированный запас */
.pc__desc{
  font-size: 10px !important;      /* было 12 */
  line-height: 1.3 !important;
  letter-spacing: -0.01em;         /* чуть ужимаем */

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;  /* без ... */

  display:block !important;
  min-height:auto !important;
}
/* =========================================
   POPULAR PRODUCTS — FIX MOBILE IMAGE CUT
   ========================================= */

@media (max-width:768px){

  #popPopularSlider .pc__img{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #popPopularSlider .pc__img img{
    width:100% !important;
    height:auto !important;          /* ключевая строка */
    max-height:180px !important;
    object-fit:contain !important;
    object-position:center !important;
  }

}
/* =========================================
   POPULAR PRODUCTS — MOBILE IMAGE NO CROP
   ========================================= */
@media (max-width: 768px) {

  #popPopularSlider .pc{
    display: flex !important;
    flex-direction: column !important;
  }

  #popPopularSlider .pc__img{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 8px !important;
  }

  #popPopularSlider .pc__img img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;
  }

}
/* =========================================
   POPULAR PRODUCTS — MOBILE ALIGN IMAGES
   ========================================= */
@media (max-width: 768px){

  /* карточка */
  #popPopularSlider .pc{
    display: flex !important;
    flex-direction: column !important;
  }

  /* зона изображения */
  #popPopularSlider .pc__img,
  #popPopularSlider a.pc__img{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 180px !important;       /* одинаковая высота для всех */
    min-height: 180px !important;
    max-height: 180px !important;

    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #f3f4f4 !important;
    border-radius: 20px !important;
  }

  /* сама картинка */
  #popPopularSlider .pc__img img,
  #popPopularSlider a.pc__img img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;   /* ничего не режем */
    object-position: center center !important;
    margin: 0 auto !important;
  }

}
@media (max-width: 768px){

  /* контейнер картинки */
  #popPopularSlider .pc__img,
  #popPopularSlider a.pc__img{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;      /* важно */
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  /* сама картинка */
  #popPopularSlider .pc__img img,
  #popPopularSlider a.pc__img img{
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 160px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }

  /* если родитель-слайд режет содержимое */
  #popPopularSlider .swiper-slide,
  #popPopularSlider .pc{
    overflow: visible !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3b1d6b1 */.elementor-9442 .elementor-element.elementor-element-3b1d6b1{
  background-color:#f2f2f1 !important;
  background-image:url("https://bagazhnik-premium.ru/wp-content/uploads/2026/01/back.webp") !important;
  background-repeat:repeat !important;
  background-position:0 0 !important;
  background-size:260px auto !important;
}

/* чтобы внутренний контейнер не перекрывал фон */
.elementor-9442 .elementor-element.elementor-element-3b1d6b1 > .e-con-inner{
  background:transparent !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-56af5c9 *//* ===== FIGMA 2x2 + SLIDER (4 + 4) | FIXED RESPONSIVE ===== */

/* Base container */
.pop--figma-2x2 {
  padding: 24px 16px 28px;
  /* background:#f3f3f3; */
}

.pop--figma-2x2 .pop__head {
  text-align: center;
  margin-bottom: 18px;
}

.pop--figma-2x2 .pop__title {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  color: #111;
}

.pop--figma-2x2 .pop__sub {
  margin-top: 6px;
  font-size: 14px;
  color: #6f6f6f;
}

/* Slider wrapper */
.pop--slider .slider {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}

.pop--slider .slider__viewport {
  overflow: hidden;
}

.pop--slider .slider__track {
  display: flex;
  will-change: transform;
  transition: transform 0.35s ease;
}

.pop--slider .slider__page {
  min-width: 100%;
}

/* 2x2 grid */
.pop--figma-2x2 .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* CARD – fixed style with uniform image size & truncation */
.pop--figma-2x2 .pc {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: auto; /* flexible height */
}

/* image plate – uniform size (square) */
.pop--figma-2x2 .pc__img {
  margin: 14px 14px 10px;
  background: #eef2f2;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1; /* all images same square size */
  width: calc(100% - 28px); /* accounting for margins */
}

.pop--figma-2x2 .pc__img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* keep product visible without cropping */
  display: block;
}

/* Body */
.pop--figma-2x2 .pc__body {
  padding: 0 14px 14px;
  display: block;
}

/* Stock */
.pop--figma-2x2 .pc__stock {
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}

.pop--figma-2x2 .pc__stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* Title – truncate with 2 lines */
.pop--figma-2x2 .pc__name {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.pop--figma-2x2 .pc__name a {
  text-decoration: none;
  color: #111;
}

/* Description – truncate 2 lines */
.pop--figma-2x2 .pc__desc {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: #6b6b6b;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto; /* dynamic based on line-clamp */
}

/* Price (new element) – smaller by default */
.pop--figma-2x2 .pc__price {
  font-size: 14px;
  font-weight: 800;
  color: #111;
  margin: 0 0 10px;
  line-height: 1.2;
}

/* Button */
.pop--figma-2x2 .pc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 10px;
  background: #f2c200;
  text-decoration: none;
  color: #111;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: 0.2s;
}

.pop--figma-2x2 .pc__btn:hover {
  background: #e0b000;
}

/* Arrows */
.pop--slider .slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  z-index: 2;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.pop--slider .slider__nav--prev {
  left: -10px;
}
.pop--slider .slider__nav--next {
  right: -10px;
}

.pop--slider .slider__nav:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Dots (hidden by default, can be enabled if needed) */
.pop--slider .slider__dots {
  display: flex;
  justify-content: center;
  gap: 0px;
  margin-top: 0px;
  opacity: 0;
  pointer-events: none;
}

/* ===== RESPONSIVE (max-width: 768px) ===== */
@media (max-width: 768px) {
  .pop--figma-2x2 {
    padding: 16px 12px 24px;
  }

  /* Slider adjustments */
  #popPopularSlider .slider {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  #popPopularSlider .slider__viewport {
    width: 100%;
    overflow: hidden;
  }

  #popPopularSlider .slider__track {
    display: flex;
    width: 200%;
    transition: transform 0.35s ease;
    will-change: transform;
  }

  #popPopularSlider .slider__page {
    flex: 0 0 50%;
    width: 50%;
    min-width: 50%;
    max-width: 50%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  /* Grid inside slide – 2 columns */
  #popPopularSlider .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Card fixes */
  #popPopularSlider .pc {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: auto !important;
  }

  /* Image – uniform square, full width inside card */
  #popPopularSlider .pc__img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 12px 12px 8px !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  #popPopularSlider .pc__img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Body spacing */
  #popPopularSlider .pc__body {
    padding: 4px 12px 12px !important;
  }

  /* Stock font */
  #popPopularSlider .pc__stock {
    font-size: 9px !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
  }

  #popPopularSlider .pc__stock::before {
    width: 6px !important;
    height: 6px !important;
  }

  /* Title – truncate 1 line (compact) or keep 2? Using 1 line for mobile to save space */
  #popPopularSlider .pc__name {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Description – truncate 1 line */
  #popPopularSlider .pc__desc {
    font-size: 9px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }

  /* Price – smaller on mobile */
  #popPopularSlider .pc__price {
    font-size: 11px !important;
    margin: 0 0 8px !important;
    font-weight: 800;
  }

  /* Button – compact, centered */
  #popPopularSlider .pc__btn {
    min-height: 32px !important;
    font-size: 10px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* Navigation arrows */
  #popPopularSlider .slider__nav {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  #popPopularSlider .slider__nav--prev {
    left: -4px;
  }

  #popPopularSlider .slider__nav--next {
    right: -4px;
  }

  /* optional: hide arrows on very small */
  @media (max-width: 360px) {
    #popPopularSlider .slider__nav {
      display: none;
    }
  }
}

/* Additional tweaks for desktop to keep image consistency */
@media (min-width: 769px) {
  .pop--figma-2x2 .pc__img {
    aspect-ratio: 1 / 1;
    width: calc(100% - 28px);
  }
  .pop--figma-2x2 .pc__desc {
    height: auto;
  }
}

/* Global reset for price element if missing in HTML */
.pop--figma-2x2 .pc__price:empty {
  display: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5ff6e18 */.elementor-9442 .elementor-element.elementor-element-5ff6e18{
  background-color:#f2f2f1 !important;
  background-image:url("https://bagazhnik-premium.ru/wp-content/uploads/2026/01/back.webp") !important;
  background-repeat:repeat !important;
  background-position:0 0 !important;
  background-size:260px auto !important;
}

/* чтобы внутренний контейнер не перекрывал фон */
.elementor-9442 .elementor-element.elementor-element-5ff6e18 > .e-con-inner{
  background:transparent !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-db5b7b9 *//* Контейнер квиза — без смещений */
.quiz-bg{
  position: relative !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Фон на всю ширину экрана — отдельным слоем */
.quiz-bg::before{
  content:"" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  height: 100% !important;

  background: #f2f2f1 url("https://bagazhnik-premium.ru/wp-content/uploads/2026/01/back.webp") 0 0 / 260px auto repeat !important;

  z-index: -1 !important;
  pointer-events: none !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-149e1bb *//* Контейнер квиза — без смещений */
.quiz-bg{
  position: relative !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Фон на всю ширину экрана — отдельным слоем */
.quiz-bg::before{
  content:"" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  height: 100% !important;

  background: #f2f2f1 url("https://bagazhnik-premium.ru/wp-content/uploads/2026/01/back.webp") 0 0 / 260px auto repeat !important;

  z-index: -1 !important;
  pointer-events: none !important;
}/* End custom CSS */