.d_n {
  display: none !important;
}

.mega-dropdown-menu {
  display: none;
}

/* Элементы, которые мы хотим видеть только на мобильных */
.mobile-menu {
  /* Скрываем мобильное меню по умолчанию на десктопе */
  display: none;
}



.user-profile-main {
  display: flex;
}

.user-profile-main-item {
  display: flex;
  border-right: 1px solid #e9e9e9;
  padding-right: 10px !important;
  padding-left: 10px;
}

.user-profile-main-item:last-child {
  border-right: none;
  padding-right: 0;

}



.gt_switcher-popup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cta-button {
  margin-top: 40px;
  border-radius: 10px;
  font-size: 14px;
  background-color: #ffb800;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 23px;
  text-align: left;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  color: black;
  font-family: Inter;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;

}



/* Стили для иконки телефона в мобильном футере (если SVG не вставлен полностью) */
.icon--phone {
  vertical-align: middle;
  margin-right: 10px;
}

html {

  -webkit-user-select: none !important;
  /* Chrome/Safari */
  -moz-user-select: none !important;
  /* Firefox */
  -ms-user-select: none !important;
  /* IE/Edge */
  user-select: none !important;
  /* Стандартный синтаксис */
}

input {
  cursor: default;
  user-select: none;
}

.slides {
  max-width: 400px;
  background-color: #cda;
  padding: 10px;
}

.catalog-product-slider-wrapper .slick-track {
  display: flex;
}

.product-cards-container .slick-slide {
  height: auto;
  flex: 0 0 auto;
}

.page-navigation__first.disabled:hover,
.page-navigation__last.disabled:hover {
  background: none;
  color: var(--clr);
  cursor: default;
}

.offer_noactive_none {
  padding: 5px 10px;
  border-radius: 20px;
  color: #717171;
  /* background: #c1c1c1; */
  border: 1px solid #D8D8D8;
  border-style: dashed;
  color: #999;
  text-decoration: none;
  /* margin: 5px; */
}

.offer_noactive_none:hover {
  color: #b5b5b5;
  background: #ffffff;
}

.offer_available {
  padding: 5px 10px;
  border-radius: 20px;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  text-decoration: none;

  /* С рамкой - доступный для текущего лифта */
}

.select_none::focus {

  outline: none;
}

.select_none {
  -webkit-tap-highlight-color: transparent;

}

.offer_noactive {
  padding: 5px 10px;
  border-radius: 20px;
  color: black;
  background: #E9E9E9;
  border: 1px solid #D8D8D8;
  text-decoration: none;
  /* margin: 5px; */
}

.offer_active {
  padding: 5px 10px;
  border-radius: 20px;
  color: white;
  background: #146EB4;
  border: 1px solid #146EB4;
  text-decoration: none;
  /* margin: 5px; */
}

.highlighted {
  background-color: #f0f0f0;
  /* Пример подсветки */
}

.active {
  /* font-weight: bold; */
}

.bx-core-waitwindow {
  display: none !important;
}








.compare-custom--is-active {
  color: var(--clr-accent-alt);
}

.form-radio__label.disabled,
.form-checkbox__label.disabled {
  opacity: 0.5;
  cursor: default;
}

.catalog-list__item {
  position: relative;
}

.header-profile {
  padding-top: 1.0625em;
  padding-bottom: 1.0625em;
}

@media (min-width: 1200px) {
  .header-profile {
    padding-top: 1.875em;
    padding-bottom: 1.875em
  }

}

.personal-orders-table-td__basket--info {
  flex-direction: column;
}

.personal-orders-table-td__detail-link {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}

.steps-form-link-custom {
  justify-self: end;
}











.img-slik,
.slick-container {
  width: 180px;
  height: 270px;
  object-fit: cover;
}

.slick-container {
  margin: 0 auto;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  /* height: 60px; */
  width: 60px;
  z-index: 1;
  cursor: pointer;
  margin: -10px -70px 19px -70px;
}

.next {
  right: 0;
}


.slick-dots-container {
  width: 5.5rem;
  overflow: hidden;
  display: block;
  padding: 0;
  margin: 0.625rem auto;
  height: 0.875rem;
  position: relative;
}

.slick-dots-container>ul {
  padding: 0;
  display: flex;
  transition: all 0.25s;
  position: relative;
  margin: 0;
  list-style: none;
  transform: translateX(0);
  align-items: center;
  bottom: unset;
  height: 100%;
}

.slick-dots-container>ul li {
  width: 0.625rem;
  height: 0.625rem;
  margin: 0 0.25rem;
  background-color: #efd5d5;
  border: none;
  border-radius: 50%;
}

.slick-dots-container>ul li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.3125rem;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: 0;
  background: 0 0;
}

.slick-dots-container>ul li.p-small-1,
.slick-dots-container>ul li.n-small-1 {
  transform: scale(0.8);
}

.slick-dots-container>ul li.slick-active {
  transform: scale(1.3);
  transform-origin: center;
  background: #3498db;
}

.slick-dots li button:before {
  display: none;
}

.form_res_disign {
  display: none;
}


.adm-fileinput-wrapper-single .adm-fileinput-area {

  width: 100%;
  min-height: 90px;

}

.adm-fileinput-drag-area {
  border: 1px solid #d3d2d2;
  background: white;
  border-radius: 10px;
  min-height: 90px;

}

.adm-fileinput-btn-panel {
  display: none;
}




.checkbox-ios {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  margin-right: 10px;
  position: relative;
  vertical-align: middle;
  font-size: 14px;
  user-select: none;
}

.checkbox-ios .checkbox-ios-switch {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 56px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 25%/50%;
  vertical-align: top;
  background: #eee;
  transition: .2s;
}

.checkbox-ios .checkbox-ios-switch:before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  transition: .15s;
}

.checkbox-ios input[type=checkbox] {
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.checkbox-ios input[type=checkbox]:not(:disabled):active+.checkbox-ios-switch:before {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
}

.checkbox-ios input[type=checkbox]:checked+.checkbox-ios-switch {
  background: #146EB4;
}

.checkbox-ios input[type=checkbox]:checked+.checkbox-ios-switch:before {
  transform: translateX(28px);
}

/* Hover */
.checkbox-ios input[type="checkbox"]:not(:disabled)+.checkbox-ios-switch {
  cursor: pointer;
  border-color: rgba(0, 0, 0, .3);
}

/* Disabled */
.checkbox-ios input[type=checkbox]:disabled+.checkbox-ios-switch {
  filter: grayscale(70%);
  border-color: rgba(0, 0, 0, .1);
}

.checkbox-ios input[type=checkbox]:disabled+.checkbox-ios-switch:before {
  background: #eee;
}

/* Focus */
.checkbox-ios.focused .checkbox-ios-switch:before {
  box-shadow: inset 0px 0px 4px #ff5623;
}




[slider] {
  position: relative;
  height: 14px;
  border-radius: 10px;
  text-align: left;
  margin: 10px 0 10px 0;
}

[slider]>div {
  position: absolute;
  left: 13px;
  right: 15px;
  height: 14px;
}

[slider]>div>[inverse-left] {
  position: absolute;
  left: 0;
  height: 14px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}

[slider]>div>[inverse-right] {
  position: absolute;
  right: 0;
  height: 14px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}

[slider]>div>[range] {
  position: absolute;
  left: 0;
  height: 14px;
  border-radius: 14px;
  background-color: var(--bg-accent-alt);
}

[slider]>div>[thumb] {
  position: absolute;
  top: -7px;
  z-index: 2;
  height: 28px;
  width: 28px;
  text-align: left;
  margin-left: -11px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background-color: #FFF;
  border-radius: 50%;
  outline: none;
}

[slider]>input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 3;
  height: 14px;
  top: -2px;
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

div[slider]>input[type=range]::-ms-track {
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

div[slider]>input[type=range]::-moz-range-track {
  -moz-appearance: none;
  background: transparent;
  color: transparent;
}

div[slider]>input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
  border: transparent;
}

div[slider]>input[type=range]:focus {
  outline: none;
}

div[slider]>input[type=range]::-ms-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
}

div[slider]>input[type=range]::-moz-range-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
}

div[slider]>input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
  -webkit-appearance: none;
}

div[slider]>input[type=range]::-ms-fill-lower {
  background: transparent;
  border: 0 none;
}

div[slider]>input[type=range]::-ms-fill-upper {
  background: transparent;
  border: 0 none;
}

div[slider]>input[type=range]::-ms-tooltip {
  display: none;
}

[slider]>div>[sign] {
  opacity: 0;
  position: absolute;
  margin-left: -11px;
  top: -39px;
  z-index: 3;
  background-color: var(--bg-accent-alt);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  -webkit-border-radius: 28px;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

[slider]>div>[sign]:after {
  position: absolute;
  content: '';
  left: 0;
  border-radius: 16px;
  top: 19px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top-width: 16px;
  border-top-style: solid;
  border-top-color: var(--bg-accent-alt);
}

[slider]>div>[sign]>span {
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
}

[slider]:hover>div>[sign] {
  opacity: 1;
}












/*=============
Adding tick marks
=========================*/
.range-slider {
  flex: 1;
}

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0 11px;
  font-size: 12px;
}

.sliderticks span {
  display: flex;
  justify-content: center;
  width: 1px;
  height: 10px;
  /* background: #d3d3d3; */
  line-height: 20px;
}

/*=============
  End tick marks
  =========================*/


input[type="range"] {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  /*  overflow: hidden;  remove this line*/
  padding: 0 4px;
  /* New additions */
  height: 6px;
  background: #ccc;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  height: 15px;
  width: 15px;
  background-color: var(--bg-accent-alt);
  border-radius: 50%;
  border: none;

  /* box-shadow: -407px 0 0 400px #f50; emove this line */
  transition: .2s ease-in-out;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: var(--bg-accent-alt);
  border-radius: 50%;
  border: none;

  /* box-shadow: -407px 0 0 400px #f50; emove this line */
  transition: .2s ease-in-out;
}

/* Hover, active & focus Thumb: Webkit */



/*=============
  Aesthetics 
  =========================*/



.wrapper {
  color: #4b4949;
  background: var(--bg-accent-alt);
  max-width: 400px;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.range {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
  height: 8rem;
  width: 100%;
  background: #fff;
  padding: 0px 10px;
}

.value {
  font-size: 12px;
  /* width: 50px; */
  text-align: center;
}

@media (max-width:992px) {
  .characteristics-table__caption {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 5px;
  }
}

/** kobrin **/

/* --- 2. FEATURES/ACCORDION SECTION --- */
.features-section {
  margin-top: 50px;
  margin-bottom: 100px;
  width: 100%;
}

.features-background {
  border-radius: 10px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  padding: 30px;
}

.features-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Split into two columns: features list and visual placeholder */
  gap: 30px;
}

.features-header {
  grid-column: 1 / 2;
  /* Header spans the left column */
}

.feature-tag-wrapper {
  margin-bottom: 20px;
}

.feature-tag {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 10px;
  background-color: #d9d9d9;
  font-size: 12px;
  text-transform: uppercase;
}

.features-title {
  font-size: 25px;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 24px;
  /* Consolidated title margin */
}

/* Base underline style */
.title-underline {
  width: 223px;
  height: 3px;
  background-color: #ffb800;
}

.title-underline-header {
  width: 100%;
  height: 1px;
  background-color: #717171;
}

/* Стили аккордиона */
.feature-accordion {
  grid-column: 1 / 2;
  /* Accordion stays in the left column */
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.feature-item {
  padding: 0;
  /* Removed padding top/bottom from item, moved to headline */
  border-bottom: 1px solid #e0e0e0;
}

.feature-headline {
  font-size: 20px;
  text-transform: uppercase;
  margin: 0;
  padding: 30px 0px;
  /* Standardized padding */
  cursor: pointer;
  font-weight: 400;
  position: relative;
  /* Плавный переход для bold-стиля */
  transition: font-weight 0.3s ease;
}

/* Styling for the first (open) feature */
.feature-item--open .feature-headline {
  /* font-weight: bold; */
}

/* Контент аккордеона: Настройка для плавного появления/скрытия */
.feature-content {
  /* Изначально скрыто */
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  /* Помогает с доступностью, скрывая контент, когда он не виден */
  overflow: hidden;
  /* Плавный переход для max-height и opacity */
  transition: max-height 0.5s ease-in-out, opacity 0.4s ease, visibility 0.5s step-end;
}

.feature-item--open .feature-content {
  /* Показываем контент */
  max-height: 600px;
  opacity: 1;
  visibility: visible;
  /* Задержка transition visibility, чтобы она менялась только после окончания анимации */
  transition: max-height 0.5s ease-in-out, opacity 0.4s ease, visibility 0.5s step-start;
}

.feature-text {
  font-size: 16px;
  padding: 20px 0px 50px 0px;
  line-height: 1.5;
}

/* Визуальные элементы */
.features-visual-placeholder {
  grid-column: 2 / 3;
  /* Right column */
  background-color: #e5e5e5;
  border-radius: 10px;
  height: 900px;
  /* Example height */
}

/* Позиционирование и переход для подчеркивания */
.feature-accordion .title-underline {
  /* Наследует общие стили title-underline */
  position: absolute;
  display: block;
  /* Плавный переход для движения (transform) или появления (opacity), если управляется JS */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Вспомогательные классы */
.text-center {
  text-align: center;
  align-items: center;
}

.separator {
  width: 100%;
  height: 1px;
  background-color: #000;
}

/* Стили для видео в хедере */
.hero {
  position: relative;
  width: 100%;
  height: 414px;
  overflow: hidden;
  border-radius: 10px;
}

.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

@media (max-width: 850px) {
  .features-content-wrapper {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    flex-direction: column;
  }
}

/* Общие стили для хедера */
.dropdown-arrow {
  width: 10px;
  height: 10px;
  transition: transform 0.3s;
}

/* Поворот стрелки при активном меню */
.nav-item--dropdown.is-open .dropdown-arrow {
  transform: rotate(180deg);
}


.count_order {
  position: absolute;
  top: -5px;
  right: -10px;
  background-color: #ffb800;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 10px;
  font-weight: bold;
  color: #000;
}

.container_breadcrumb {

  margin: 0 259px;
}

@media (max-width: 992px) {
  .container_breadcrumb {

    margin: 0 20px;
  }
}

.manufacturers-button-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding: 0 20px;
}

.manufacturers-button {
  display: inline-flex;
  border-radius: 10px;
  background-color: #ffb800;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  text-decoration: none;
  color: #000;
  font-weight: 400;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.manufacturers-button:hover {
  background-color: #e5a700;
}

.parent {

  height: 20px;

  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  font-size: 14px;
  color: #000;
  font-family: Inter;
}

/* =================================================== */
/* МЕГА-МЕНЮ (Выпадающее) */
/* =================================================== */

.mega-dropdown-menu {

  margin-top: 5px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 99;

  /* Скрываем элемент, но сохраняем его в потоке для предотвращения сдвига контента */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  /* Небольшой сдвиг для эффекта "выпадания" */

  /* Плавный переход для анимации */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.mega-dropdown-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.mega-dropdown-menu .menu-content-wrapper {
  max-width: 1920px;
  display: grid;
  flex-wrap: wrap;
  padding: 30px 100px 40px;
  gap: 20%;
  justify-content: flex-start;
  grid-template-areas:
    "m x y"
    "m z w";
}

/* Переиспользование стилей колонок из предыдущего задания */
.menu-column {
  display: flex;
  flex-direction: column;
  width: 220px;
  flex-shrink: 0;
  text-align: left;
}

.column-title {
  font-size: 14px;
  text-transform: uppercase;
  color: #717171;
  text-decoration: none;
  display: block;
  margin-bottom: 5px;
}



.active-column .column-title {
  color: #000;
  font-weight: 700;
}

.active-column .active-underline {
  background-color: #000;
}

.link-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
  font-size: 14px;
}

.menu-link {
  color: #000;
  text-decoration: none;
}

.menu-link:hover {
  color: #146eb4;
}

.status-badge-wrapper {
  margin-top: 10px;
}

.status-badge {
  border-radius: 10px;
  background-color: #d9d9d9;
  width: 76px;
  height: 17px;
  font-size: 10px;
  line-height: 17px;
  text-align: center;
}

/* Иконка закрытия не нужна в хедере, она была нужна в полноэкранном меню */

/* =================================================== */
/* МОБИЛЬНАЯ АДАПТАЦИЯ */
/* =================================================== */



/* ... (логика анимации бургера опущена для краткости) ... */



@media (max-width: 992px) {


  /* Мега-меню на мобильных становится полноэкранным или полностью скрывается */
  .mega-dropdown-menu {
    /* В реальном проекте, здесь бы оно превратилось в мобильное меню */
    display: none !important;
  }

  /* Если нужно, чтобы выпадающее меню работало и на планшетах, 
       нужно переопределить стили для .menu-content-wrapper */
  .mega-dropdown-menu.is-open {
    position: fixed;
    top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
  }

  .mega-dropdown-menu .menu-content-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .menu-column {
    width: 90%;
    max-width: 400px;
  }
}

/* Import Inter and Roboto fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto:wght@400;500&display=swap');

/* Header Base Styles */
.header {
  width: 100%;
  position: relative;
  /* Высота удалена, чтобы контейнер определял высоту */
  /* height: 47px; */
  text-align: left;
  font-size: 14px;
  color: #000;
  font-family: 'Inter', sans-serif;
  background-color: #fff;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  z-index: 1000;
  /* Убрал фиксированный margin: 17px, так как он редко нужен для хедера */
}

.header__container {
  display: grid !important;
  grid-template-columns: 0fr 3fr 1fr 1fr;
  justify-content: space-between;
  align-items: center;
  min-height: 60px;
  /* Установим минимальную высоту */
  padding: 0 100px;
  margin: 0 auto;
  max-width: 100%;
  /* Условно, максимальная ширина контента */
}

/* Logo Styles */
.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.header__img {
  width: 158.7px;
  height: 45.9px;
}

/* Navigation Menu */
.header__nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-left: 65.28px;
}

.header__nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: color 0.3s ease;
  text-decoration: none;
  /* Для элементов <a> */
  color: inherit;
}

.header__nav-item:hover {
  color: #146eb4;
}

.header__nav-text {
  position: relative;
  text-transform: uppercase;
  font-weight: 400;
}








.drop_menu_auth {
  display: flex;
  align-items: center;
}

.header__nav_auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header__nav-item_auth {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.header__nav-item_auth:hover {
  color: #146eb4;
}

.header__nav-text_auth {
  position: relative;
  font-weight: 400;
  /* Десктопные отступы */
  padding: 15px 10px;
  font-size: 16px;
}


/* ==================================== */
/* 2. Адаптация под мобильные устройства */
/* (Максимальная ширина экрана 768px)   */
/* ==================================== */

@media (max-width: 768px) {

  /* Контейнер: делаем вертикальную колонку */
  .header__nav_auth {
    flex-direction: column;
    align-items: stretch;
    /* Растягиваем элементы на всю доступную ширину */
    gap: 0;
    /* Убираем горизонтальный gap, если он не нужен в вертикальном меню */
  }

  /* Элемент навигации: делаем его блочным и на всю ширину */
  .header__nav-item_auth {
    width: 100%;
    justify-content: center;
    /* Дополнительно: часто на мобильных меню выделяют */
    /* border-bottom: 1px solid #eee; */
  }

  /* Отступы текста: увеличиваем вертикальный padding для удобства нажатия (Touch Target) */
  .header__nav-text_auth {
    /* Увеличенный padding для тач-устройств */
    padding: 12px 20px;

    /* Если это полноэкранное меню, можно задать выравнивание */
    /* text-align: left; */
  }

  /* На мобильных устройствах hover эффект обычно не нужен, но оставляем его для планшетов */
  /* Если нужно отключить hover на совсем маленьких экранах, можно использовать отдельный media-запрос */
}




















/* Иконка стрелки */
.dropdown-arrow {
  width: 11.7px;
  height: 6.6px;
  /* SVG уже находится в HTML, поэтому используем его */
}

.header__nav-item.is-open .dropdown-arrow {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

/* Дополнительно, чтобы стрелка поворачивалась плавно: */
.header__nav-item .dropdown-arrow {
  transition: transform 0.3s ease;
}

/* Поворот стрелки при активном меню */
.header__nav-item.is-open .dropdown-arrow {
  transform: rotate(-90deg);
}

/* Right Section (Navigation, User, Cart) */
.header__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  justify-content: space-between;
}

/* ************************************************** */
/* СТИЛИ ДЛЯ БЛОКА ЗАКАЗА (Order/Cart) */
/* ************************************************** */

/* Контейнер ссылки на заказ */
.order {
  position: relative;
  /* Для позиционирования счетчика */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #000;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  margin: 5px;
  /* Для удобства клика */
}

.order svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Счетчик */
.count_order {
  position: absolute;
  top: -5px;
  /* Сдвиг вверх */
  right: -5px;
  /* Сдвиг вправо */

  /* Стилизация бейджа */
  background-color: #ffb800;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 10px;
  font-weight: bold;
  color: #000;
  text-align: center;
  z-index: 10;

  display: inline-block;
  font-family: 'Roboto', sans-serif;
}

/* User Profile Section (Для авторизованных) */
.header__user {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.header-profile:hover {
  color: #146eb4;
}

.header-profile__icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.header-profile__caption {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
}

/* User Actions (Cart and Login/Register) */
.header__user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Login/Register Section */
.header__login-register {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.header__register-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.header__register-link:hover {
  color: #146eb4;
}

/* Кнопка "Войти" (manufacturers-button) */


.manufacturers-button:hover {
  background-color: #e5a700;
}

.header__divider {
  width: 1px;
  height: 20px;
  background-color: #e9e9e9;
  /* Убрал transform: rotate(180deg), так как background-color не нуждается в повороте */
}



/* =================================================== */
/* МЕДИА ЗАПРОСЫ */
/* =================================================== */

@media (max-width: 1200px) {
  .header__nav {
    gap: 25px;
  }

}

@media (max-width: 992px) {

  /* Скрытие десктопной навигации */
  .header__nav {
    display: none;
  }

  /* Отображение мобильного бургера */
  .toggle-menu {
    display: block;
  }

  .header__user-actions {
    gap: 10px;
  }

  /* Скрытие имени пользователя для экономии места */
  .header-profile__caption {
    display: none;
  }
}



@media (max-width: 480px) {
  .header__container {
    padding: 0 10px;
  }

  /* Уменьшаем логотип */
  .header__img {
    width: 120px;
    height: auto;
  }


}

/* Import Inter and Roboto fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto:wght@400;500&display=swap');

/* Header Base Styles */
.header {
  width: 100%;
  position: relative;

  text-align: left;
  font-size: 14px;
  color: #000;
  font-family: 'Inter', sans-serif;
  background-color: #fff;
  /* Ensure white background */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  /* Subtle shadow for depth */
  z-index: 1000;

  /* Ensure header stays above other content */
}

.header--theme-alt {
  /* Alternative theme styles if needed */
}



/* Logo Styles */
.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.header__img {
  width: 158.7px;
  height: 45.9px;
  /* fill: currentColor; */
  /* Use current text color for the SVG */
}

/* Right Section (Navigation, User, Cart) */
.header__right {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-end;
  /* Space between navigation, user, and cart */
}

/* Navigation Menu */
.header__nav {
  display: flex;
  align-items: center;
  gap: 40px;
  /* Space between navigation items */
}

.header__nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Space between text and dropdown icon */
  cursor: pointer;
  transition: color 0.3s ease;
  /* Smooth color transition for hover */
}

.header__nav-item:hover {
  color: #146eb4;
  /* Blue color for hover state */
}

.header__nav-text {
  position: relative;
  text-transform: uppercase;
  font-weight: 400;
  /* Medium weight for navigation text */
}

.header__nav-icon {
  width: 11.7px;
  height: 6.6px;
  object-fit: contain;
}

/* User Profile Section */
.header__user {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Space between user profile and actions */
}

/* User Profile Link */
.header-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Space between icon and text */
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
  /* Smooth color transition for hover */
}

.header-profile:hover {
  color: #146eb4;
  /* Blue color for hover state */
}

.header-profile__icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  /* Use current text color for the SVG */
}

.header-profile__caption {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
  /* Medium weight for caption */
}

/* User Actions (Cart and Login/Register) */
.header__user-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Space between cart and login/register */
}

/* Cart Styles */
.header-cart {
  /* Add your cart styles here */
}

/* Login/Register Section */
.header__login-register {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Space between login and register links */
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
  /* Medium weight for links */
}

.header__login-link,
.header__register-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
  /* Smooth color transition for hover */
}

.header__login-link:hover,
.header__register-link:hover {
  color: #146eb4;
  /* Blue color for hover state */
}

.header__divider {
  width: 1px;
  height: 20px;
  background-color: #e9e9e9;
  /* Light gray divider */
  transform: rotate(180deg);
  /* Rotate to be vertical */
}

/* Login Button */
.header__login-btn {
  border-radius: 10px;
  background-color: #ffb800;
  /* Yellow background for login button */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  text-decoration: none;
  color: #000;
  /* Black text for login button */
  font-weight: 400;
  /* Medium weight for button text */
  white-space: nowrap;
  /* Prevent text from wrapping within button */
  transition: background-color 0.3s ease;
  /* Smooth hover effect */
}

.header__login-btn:hover {
  background-color: #e5a700;
  /* Slightly darker yellow on hover */
}

/* Mobile Menu Toggle */
.toggle-menu {
  display: none;
  /* Hide by default */
  cursor: pointer;
}

.toggle-menu__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
}



/* Media Queries for Responsiveness */
@media (max-width: 1820px) {
  .landing-hero__buttons-group {
    max-width: 80%;
    /* Adjust gap for smaller screens */
  }

}

@media (max-width: 1600px) {
  .landing-hero__buttons-group {
    max-width: 70%;
    /* Adjust gap for smaller screens */
  }

  .header {
    font-size: 12px;
  }

  .manufacturers-button {
    font-size: 12px;
    padding: 10px 20px !important;

  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 20px;
  }

  .parent {
    font-size: 12px;
  }

  .header__img {
    width: 100px;
    height: 50px;
  }

  .header__container {

    padding: 0 80px;
  }

  .order svg {
    width: 19px;
    height: 19px;
  }

  .landing-hero__ipad-mockup {
    width: 480px;
    height: 338px;
  }
}

/* Media Queries for Responsiveness */
@media (max-width: 1200px) {
  .header__nav {
    gap: 30px;
    /* Adjust gap for smaller screens */
  }

  .header {
    font-size: 10px;
  }


  .header__container {

    padding: 0 50px;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
  }

  .parent {
    font-size: 10px;
  }

  .header__img {
    width: 80px;
    height: 40px;
  }

  .order svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 992px) {


  .header {
    font-size: 14px;
  }



  .header__container {

    padding: 0 50px;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
  }

  .parent {
    font-size: 8px;
  }

  .header__img {
    width: 80px;
    height: 40px;
  }

  .order svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 768px) {
  .parent {
    display: none;
  }

  .landing-hero__buttons-group {
    max-width: 100%;
    /* Adjust gap for smaller screens */
  }

  .liftorg-hero-section {
    align-items: stretch !important;
  }

  .landing-hero__ipad-mockup {
    display: none !important;
  }

  .header__container {
    padding: 0 15px;
    /* Adjust padding for smaller screens */
  }

  .header__nav {
    display: none;
    /* Hide navigation on mobile */
  }

  .toggle-menu {
    display: block;
    /* Show mobile menu toggle */
  }

  .header__user {
    gap: 15px;
    /* Adjust gap for smaller screens */
  }

  .header-profile__caption {
    display: none;
    /* Hide caption on mobile */
  }
}

@media (max-width: 480px) {
  .header__container {
    padding: 0 10px;
    /* Further adjust padding */
  }

  .header__user-actions {
    gap: 10px;
    /* Further reduce gap */
  }

  .order {
    display: none;
    /* Hide login/register on very small screens */
  }
}

/* Базовые стили */
.page-content-wrapper {
  font-family: Inter, sans-serif;
  color: #000;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

/* Вспомогательные классы для контейнеров */
.container-centered {
  max-width: 1600px;
  width: 100%;
  padding: 77px 0;
}

.container-wide {
  max-width: 1580px;
  width: 100%;
}

/* --- Секция 1: Заголовок --- */

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

.header-title {
  font-size: 66px;
  text-align: center;
  text-transform: uppercase;
  max-width: 921px;
}

.title-part-light {
  font-weight: 300;
}

.title-part-bold-yellow {
  font-weight: 900;
  color: #ffb800;
}

.title-part-bold {
  font-weight: 900;
}

.header-text-block {
  display: flex;
  flex-direction: column;
  gap: 50px;
  max-width: 1070px;
}

.text-block-subtitle {
  font-size: 25px;
  text-transform: uppercase;
  font-weight: normal;
  margin: 0;
}

.subtitle-bold-yellow {
  font-weight: 900;
  color: #ffb800;
}

.text-block-description {
  font-size: 20px;
  max-width: 661px;
  margin: 0 auto;
}

/* --- Секция 2: Функционал (Аккордеон) --- */

.section-features {
  padding: 50px 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  box-sizing: border-box;
  margin-top: 100px;
}

.features-box {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 30px;
  box-sizing: border-box;
}

.features-accordion-area {
  width: 50%;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.features-image-placeholder {
  width: 50%;
  min-height: 500px;
  background-color: #e5e5e5;
  border-radius: 10px;
}

.tag-block {
  padding-bottom: 50px;
  border-bottom: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  text-align: left;
}

.tag-pill {
  background-color: #d9d9d9;
  border-radius: 10px;
  padding: 5px 15px;
  font-size: 12px;
  text-transform: uppercase;
}

.accordion-main-title {
  font-size: 25px;
  text-transform: uppercase;
  margin: 0;
  font-weight: 900;
}

/* Стили Аккордеона */
.accordion-item {
  border-bottom: 1px solid #000;
}

.accordion-item.no-border {
  border-bottom: none;
}

.accordion-toggle {
  display: none;
}

.accordion-header {
  display: block;
  cursor: pointer;
  padding: 30px 0;
  position: relative;
  text-align: left;
  display: flex;
  align-items: center;
}

/* Иконка Плюс/Минус */
.accordion-header::after {
  content: '+';
  font-size: 30px;
  margin-left: auto;
  transition: transform 0.3s ease;
}

.accordion-toggle:checked+.accordion-header::after {
  content: '—';
}

.accordion-title {
  font-size: 20px;
  text-transform: uppercase;
  width: 80%;
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.accordion-toggle:checked~.accordion-body {
  max-height: 300px;
  /* Раскрытие контента */
  padding-bottom: 30px;
}

.accordion-text {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* --- Секция 3: Экосистема --- */

.section-ecosystem {
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.ecosystem-title {
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 900;
  margin: 0;
}

.ecosystem-description {
  font-size: 16px;
  max-width: 577px;
  margin: 0 auto;
}

.ecosystem-image-grid {
  width: 100%;
  /* Используем flex для центрирования, а затем относительное позиционирование для имитации оригинального оверлея */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 550px;
  /* Фиксированная высота для размещения элементов */
}

.grid-item {
  width: 300px;
  height: 365px;
  /* border-radius: 10px; */
  object-fit: cover;
  /* box-shadow: 0px 30px 30px -15px rgba(10, 53, 90, 0.4); */
  /* Все элементы относительно спозиционированы внутри родителя, который сам находится в потоке */
  position: relative;
}

/* Офсеты, имитирующие оригинальное расположение */
.grid-item:nth-child(1) {
  top: -100px;
  left: -35px;
  z-index: 5;
}

.grid-item:nth-child(2) {
  top: 50px;
  left: -15px;
  z-index: 4;
}

.grid-item:nth-child(3) {
  top: 150px;
  left: 0;
  z-index: 6;
}

.grid-item:nth-child(4) {
  top: 0px;
  left: 15px;
  z-index: 3;
}

.grid-item:nth-child(5) {
  top: -100px;
  left: 35px;
  z-index: 2;
}


/* --- Медиа запросы (Отзывчивость) --- */

@media (max-width: 1200px) {

  /* На средних экранах убираем сложные офсеты для изображений */
  .ecosystem-image-grid {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .grid-item {
    position: static;
    margin: 20px 0;
  }
}

@media (max-width: 900px) {
  .header-title {
    font-size: 48px;
  }

  /* Переключение макета функционала на вертикальный столбец */
  .features-box {
    flex-direction: column;
  }

  .features-accordion-area,
  .features-image-placeholder {
    width: 100%;
    min-width: auto;
  }
}

/* General Reset/Base Styling */
.liftorg-page {
  max-width: 1600px;
  margin: 0 auto;
  font-family: Inter, sans-serif;
  color: #000;
  line-height: 1.4;
  padding: 0 20px;
}

/* --- Typography Helpers --- */
.title-highlight {
  font-weight: 900;
  color: #ffb800;
}

.brand-name {
  font-weight: 900;
}

.title-word {
  font-weight: 300;
}

/* --- 1. HERO SECTION --- */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 100px;
}

.hero-header {
  text-align: center;
  margin-bottom: 116px;
}

.hero-title {
  font-size: 66px;
  text-transform: uppercase;
  margin: 0;
}

.hero-pitch-container {
  max-width: 1070px;
  text-align: center;
  padding: 50px;
}

.pitch-headline {
  font-size: 25px;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.pitch-description {
  font-size: 20px;
  line-height: 1.6;
}


.separator {
  width: 100%;
  height: 1px;
  background-color: #000;
}

.features-visual-placeholder {
  grid-column: 2 / 3;
  /* Right column */
  background-color: #e5e5e5;
  border-radius: 10px;
  height: 900px;
  /* Example height */
}

/* Decorative Icon */
.lines-decor-icon {
  display: block;
  margin: 40px auto;
  width: 152px;
  height: 40px;
  object-fit: cover;
}

/* --- 3. ANALYTICS SECTION --- */
.analytics-section {
  padding: 80px 0;
}

.analytics-title {
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 900;
  text-align: start;
  margin-bottom: 60px;
}

.analytics-content-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  /* Split layout for text and dashboard preview */
  gap: 40px;
  align-items: start;
  max-width: 1580px;
  margin: 0 auto;
}

.analytics-details {
  padding: 20px 0;
  font-size: 16px;
}

.analytics-text {
  margin-bottom: 20px;
}

.analytics-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 40px;
}

.analytics-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.bullet-highlight {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #ffb800;
  flex-shrink: 0;
}

.list-item-text {
  font-size: 16px;
}

.dashboard-preview {
  /* Styling the container for the complex UI mock-up */
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  /* Due to the tiny viewport size used in the original HTML/CSS (~5px font sizes), 
       the internal dashboard content is extremely small. We treat this as a visual block. */
  height: 450px;
  position: relative;
}

/* Optional: Make the dashboard preview responsive if needed, otherwise keep it as a fixed visual block. */
/* For this refactoring, we mainly focus on removing absolute positioning from major containers. */

/* --- Media Queries for basic responsiveness --- */
@media (max-width: 1200px) {

  .analytics-content-grid,
  .features-content-wrapper {
    grid-template-columns: 1fr;
  }

  .features-visual-placeholder {
    height: 400px;
  }

  .hero-title {
    font-size: 50px;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 36px;
  }

  .pitch-headline,
  .analytics-title,
  .feature-headline {
    font-size: 20px;
  }

  .features-content-wrapper,
  .analytics-content-grid {
    gap: 20px;
  }
}

.contact-section {
  /* Основные настройки секции */
  width: 100%;
  /* background-color: #fff; */
  text-align: center;
  /* Центрируем всё содержимое */
  font-size: 14px;
  color: #000;
  font-family: Inter, sans-serif;
  padding: 80px 20px;
  /* Вертикальные и горизонтальные отступы */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Заголовок */
.contact-header {
  font-size: 25px;
  text-transform: uppercase;
  margin-bottom: 20px;
  line-height: 1.2;
}

.header-text {
  font-weight: 300;
}

.header-highlight {
  font-weight: 900;
  color: #ffb800;
}

/* Описание */
.contact-description {
  margin-bottom: 40px;
  max-width: 900px;
  line-height: 1.4;
  font-size: 14px;
  padding: 0 10px;
}

/* Контейнер для кнопок (Flexbox) */
.contact-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  /* Расстояние между кнопками */
  flex-wrap: wrap;
  /* Позволяет кнопкам переноситься на новую строку при нехватке места */
  max-width: 100%;
}

/* Общие стили для кнопок */
.action-button {
  border-radius: 10px;
  height: 60px;
  /* Фиксированная высота */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  /* Горизонтальные отступы внутри */
  gap: 15px;
  text-decoration: none;
  /* Убираем подчеркивание у ссылок */
  font-weight: bold;
  white-space: nowrap;
  /* Запрещает тексту переноситься */
  box-sizing: border-box;
  transition: background-color 0.3s;
}

.button-text {
  position: relative;
  font-size: 14px;
}

.button-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Стилизация синей кнопки (Телефон) */
.primary-button {
  background-color: #146eb4;
  color: #fff;
}

.primary-button:hover {
  background-color: #115d9c;
}

/* Стилизация желтой кнопки (Поддержка) */
.secondary-button {
  background-color: #ffb800;
  color: #000;
}

.secondary-button:hover {
  background-color: #e6a700;
}


/* =================================================== */
/* АДАПТИВНОСТЬ (Медиазапросы) */
/* =================================================== */

/* Мобильные устройства (кнопки стекаются) */
@media (max-width: 650px) {
  .contact-header {
    font-size: 20px;
  }

  .contact-actions {
    flex-direction: column;
    /* Кнопки располагаются вертикально */
    gap: 15px;
    width: 100%;
    max-width: 350px;
    /* Ограничиваем ширину кнопок на мобильных */
  }

  .action-button {
    width: 100%;
    /* Кнопки занимают всю ширину контейнера */
    padding: 0 15px;
  }
}

@media (max-width: 850px) {
  .features-content-wrapper {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    flex-direction: column;
  }
}


/* ======================================= */
/* 2. СТИЛИ ДЛЯ МОБИЛЬНОГО МЕНЮ (Off-Canvas) */
/* ======================================= */

@media (max-width: 768px) {
  .header__container {
    display: flex !important;
  }

  .link-list {
    padding: 0px 25px;
  }

  /* 2.1. Контейнер Off-Canvas */
  .mobile-menu {
    display: block;
    /* Показываем на мобильных */
    position: fixed;
    top: 0;
    /* Или используйте высоту хедера, если он фиксирован */
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    /* Или цвет вашего фона */
    z-index: 1000;
    overflow-y: auto;
    margin-top: 55px;


    /* Скрываем меню за пределами экрана */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }

  /* Активное состояние */
  .mobile-menu.is-active {
    transform: translateX(0);
  }

  /* 2.2. Содержимое и навигация */
  .mobile-menu__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100% - 55px);
    /* Высота контента за вычетом padding-top */
  }

  .mobile-menu__nav {
    padding-bottom: 20px;
  }

  .mobile-menu__nav-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    color: #333;
    text-decoration: none;
  }

  .mobile-menu__nav-item:first-child {
    border-top: 1px solid #eee;
  }

  .mobile-menu__nav-text {
    font-size: 16px;
    font-weight: 600;
  }

  /* 2.3. Аккордеон (Услуги) */
  .js-mobile-dropdown-toggle .dropdown-arrow {
    transition: transform 0.3s;
  }

  .js-mobile-dropdown-toggle.is-open .dropdown-arrow {
    transform: rotate(180deg);
  }

  .mobile-menu__submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
  }

  .benefits-section {

    flex-direction: column;
    align-items: center !important;
  }

  .benefits-section__text {
    width: 100% !important;

  }

  /* Содержимое подменю */
  .mobile-menu__submenu-group {
    padding: 10px 0 10px 10px;
  }

  .mobile-menu__submenu-title {
    display: block;
    font-weight: 400;
    color: #000;
    padding: 10px 25px;
    text-decoration: none;
  }

  .mobile-menu__submenu-link {
    display: block;
    padding: 8px 0;
    padding-left: 20px;
    font-size: 15px;
    color: #000;
    text-decoration: none;
  }

  /* Статусные бейджи в подменю */
  .status-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 10px 25px;
    text-decoration: none;
  }

  .status-badge {
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 4px;
    background: #ffcc00;
    height: auto;
    width: auto;
  }

  /* 2.4. Футер меню (Контакты и кнопки) */
  .mobile-menu__footer {
    padding: 20px 0;
    border-top: 1px solid #eee;
    margin-top: auto;
    /* Прижимает футер к низу */
  }

  .mobile-menu__contact {
    display: flex;
    align-items: center;
    /* padding-bottom: 20px; */
    justify-content: center;
  }

  .mobile-menu__phone-number {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
  }

  .mobile-menu__user-actions {
    display: grid;
    gap: 10px;
    /* Используем ваши классы кнопок */
  }

  /* Убедимся, что десктопное меню не накладывается */
  .mega-dropdown-menu {
    display: none !important;
  }
}


/* ======================================= */
/* 3. ДЕСКТОП (769px+) - Отменяем мобильные скрытия */
/* ======================================= */
@media (min-width: 769px) {

  /* Показываем десктопные элементы */
  .header__nav,
  .parent,
  .header__user-actions,
  .mega-dropdown-menu {
    display: flex;
    /* Или block, в зависимости от контекста */
  }

  /* Скрываем мобильное меню и тогл */
  .mobile-menu,
  .toggle-menu {
    display: none !important;
  }
}

/* Стиль для отключения скролла на body, когда меню открыто */
.menu-open {
  overflow: hidden;
}






.drop_menu_auth_item {
  display: flex;
  align-items: center;
}

/* Родительский контейнер для позиционирования */
.drop_menu_auth {
  position: relative;
  display: inline-block;
  /* Чтобы контейнер сжимался по ширине заголовка */
  cursor: pointer;
}

/* Стили для самого текста-триггера */
.header__nav-item_auth {
  display: flex;
  align-items: center;
  text-decoration: none;
  /* Убедитесь, что текст ведет себя как блок, если это необходимо для ширины */
  white-space: nowrap;
}

.header__nav-text_auth {
  /* Добавьте отступы, если нужно, но ширина будет зависеть от этого блока */
  padding: 5px 10px;
}

/* Стрелка SVG */
.dropdown-arrow {
  margin-left: 5px;
  transition: transform 0.2s ease;
}

/* --- Стили для выпадающего меню --- */

.menu-list {
  display: none;
  /* Скрываем по умолчанию */
  position: absolute;
  top: 100%;
  /* Появляется прямо под триггером */
  left: 0;
  z-index: 100;

  /* Стили для внешнего вида меню */
  background-color: white;
  border-radius: 10px;
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
  min-width: 150px;
  /* Минимальная ширина, если JS по какой-то причине не сработает */
}

.menu-list-item {
  padding: 5px 20px;
  cursor: pointer;
  text-decoration: none;
  color: #000;
}

.menu-list-item:hover {
  color: var(--clr-accent-alt);
}

/* Класс, который JS будет добавлять для показа меню */
.menu-list.is-open {
  display: flex;
  flex-direction: column;
}

/* Опционально: поворот стрелки при открытии */
.drop_menu_auth.is-active .dropdown-arrow {
  transform: rotate(-90deg);
}



.main__container_manufacturers_of_catalog {
  width: 100%;
  max-width: 1444px;
  margin-right: auto;
  margin-left: auto;
}

.manufacturers_of_catalog {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(10.625em, 1fr));
  padding-bottom: 30px;
}

.manufacturers__link_of_catalog {
  width: 100%;
  height: 180px;
  box-shadow: 0px 10px 15px 0px #0000001A;


  max-width: 100%;
  overflow: hidden;
  object-fit: cover;


  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-height: 6.25em; */
  background-color: var(--bg);

  min-width: 0;
  text-decoration: none
}

.manufacturers__link_of_catalog--accent {
  background-color: var(--bg-accent-alt);
  border-color: var(--clr-accent-alt);
  color: var(--clr-alt)
}

.manufacturers__caption_of_catalog {
  font-size: .875em;
  line-height: 1.7857142857em;
  text-transform: uppercase
}

.manufacturers__img_of_catalog {
  width: 80px
}

.team-title {
  text-transform: uppercase;
}

.manufacturers_of_catalog_bottom {
  display: flex;
  justify-content: center;
}

.btn__caption_of_catalog {

  font-size: 14px;
  font-family: Inter;
  color: #000;

}

.btn_of_catalog {
  padding: 20px;
  background-color: var(--clr-accent, #007bff);
  color: var(--clr-gray);
  margin: 0;
  display: flex;
  align-items: center;
  border-radius: 10px;
  text-decoration: none;
}

/* Активное состояние кнопки (при раскрытом блоке) */
.btn_of_catalog--active {
  background-color: var(--bg-gray);

  /* Используйте акцентный цвет или любой другой */
  color: #fff;
}