@import '../fonts/fonts.css';

.wrapper {
    width: 1400px;
    margin: 0 auto;
}

@media screen and (max-width: 1399px){
    .wrapper {
        width: 100%;
        padding: 0 20px;
    }
}

@media screen and (max-width: 1000px) {
    body {
        overflow-x: hidden;
    }
}


     *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Geologica", sans-serif;}

    body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
     min-height: 100vh;
    overflow-y: auto ;
    scrollbar-width: thin !important;

    }
    body.no-scroll {
        position: fixed !important;
        width: 100% !important;
        top: var(--scroll-pos) !important;
        overflow: hidden !important; /* важно */
    }

    .page{
        display:flex;
        flex-direction:column;
        gap:40px;
        /*flex: 1;*/
        }
    @media(max-width:1800px){
        .page{
            gap:30px;}
        }
    @media(max-width:768px){
    .page{
    gap:20px;}
        } 
    /*первичная оболочка*/
    .section-wrapper{
        width: 100%;
        display:flex;
        justify-content: center;
        }
    /*обертка для банера на главной и на вкладке дизайнерам*/

    .hero-wrapper{
        display:flex;
        justify-content: center;
        align-items: center;            
        width: 100%;
        max-width:2560px;
        padding:0 90px 0 90px;
    }

    @media (max-width: 1800px){
    .hero-wrapper {
            padding: 0 50px;
        }
    }

    @media (max-width: 1200px) {
    .hero-wrapper {
        padding: 0 40px;
    }
    }
    @media (max-width:768px){
    .hero-wrapper {
        padding: 0;
    }
    }
    /*структура блоков на вкладке дизайнеры (на главной )*/
    .standart-container{
        display:flex;
        flex-direction:column;
        gap:40px;
        padding:70px 90px;
        width: 100%;
        max-width: 2560px;
    }
    @media(max-width:1500px){
    .standart-container{
        padding: 40px 40px;
    }
    
    }
    @media (max-width: 768px) {
    .standart-container {
        padding: 20px 20px;
        gap:20px;
    }
    }
    

.panel-toggle-disabled {
    background-color: #ffffff !important;
    padding: 20px 0 !important;
    cursor: default !important;
}
@media(max-width:1800px){
    .panel-toggle-disabled {
        padding: 15px 0 !important;
}
}


/*  ПРЕДПРОСМОТР  */
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 100px;
  transition: all .15s ease;
  cursor: pointer;
  height: 28px;
  position: relative;
}
.icon {
  fill: rgba(12, 12, 12, 1);
  width: 24px;
  height: 24px;
  transition: all .15s ease;
}
.social-icon-wrapper svg {
  fill: red;
}
.icon-wrapper:hover {
  background-color: rgba(242, 239, 238, 1);
}
.bottom-bar__item > .icon-wrapper:hover {
  background-color: none !important;
}


/*иконки нижнеого меню*/
.bottom-bar__item{
    display:flex;
    justify-content:center;
    align-items: center;
    width: 25%;
    height: 100%;
}
.bottom-bar-wrapper .icon {
  width: 18px;
  height: 18px;
}
.bottom-bar-wrapper .icon-wrapper {
  width: 24px;
  height: 24px;
  padding: 0;
}


/*ТЕКСТ*/
/*серый регулярный текст 15px*/
.regular-text-explanation{
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.01em;
    color: rgba(18, 18, 18, 0.6);
}
.regular-litle-text{
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: rgba(18, 18, 18, 0.6);
}
/*ЗАголовки на странице карточки  товара*/
.regular-title-text {
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    letter-spacing: -0.01em;
}


/*подзаголовки*/
.reguler-text-subtitle{
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #121212;
}
@media(max-width:1800px){
    .regular-title-text{
        font-size: 25px;
        line-height: 35px;
    }

}
@media(max-width:1200px){
    .reguler-text-subtitle{
        font-size: 15px;
        line-height: 25px;
    }
}
@media (max-width: 768px) {
    .reguler-text-subtitle {
        font-size: 13px;
        line-height: 20px;
        text-align: center;

    }
    .regular-title-text {
        font-size: 21px;
        line-height: 30px;

    }   
}



/*заголовки в карточке товара*/
.regular-title-sp{
    font-weight: 500;
    font-size: 25px;
    line-height: 35px;
    text-align:center;
    letter-spacing: -0.01em;
    color: #121212;
}

@media (max-width: 1800px) {
    .regular-title-sp{
        font-size: 21px;
        line-height: 30px;
    }
    }
@media (max-width: 1200px) {
    .regular-title-sp{
        font-size: 18px;
        line-height: 30px;
    }}
@media (max-width: 768px){

        .regular-title-sp{
            font-size: 15px;
            line-height: 30px;
        }

    }
/*шрифты в блоке "сервис"*/
    .service_text{
        font-size: 18px;
        line-height: 28px;
    }
    .service_title{
        font-weight: 500;
        font-size: 30px;
        line-height: 40px;
    }
    .service-card-name{
        font-weight: 500;
        font-size: 18px;
        line-height: 40px;
    }
    @media(max-width:1800px){
        .service_text{
            font-size: 15px;
            line-height: 25px;
        }
        .service_title{
            font-size: 25px;
            line-height: 35px;
        }

    }
    @media(max-width:768px){
        .service_title{
            font-size: 21px;
            line-height: 30px;
        }
        .service_text{
            font-size: 13px;
            line-height: 20px;
        }
        .service-card-name{
            font-size: 15px;
            line-height: 30px;

        }

    }


/*общая структура вкладки сервис в карточке товара*/

    .service-all{
        width: 100%;
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items:center;
        gap:40px;
        padding: 0;
    }

    .service-content-top{
        display:flex;
        flex-direction:column;
        gap:20px;
        align-items:center;
        text-align:center;

    }
    @media(max-width:1800px){
        .service-content-top{
            gap:10px;
        }
        .service-all{
            gap:30px;
        }
    }
/*радио кнопки*/


input[type="radio"] {
    transform: scale(1.4);
    accent-color: #121212;
}

.radio-label{
    font-size: 18px;
    color: #12121299;
    line-height: 18px;
}
input[type="radio"]:checked + .radio-label {
    color: #121212;
}
/*AUTOFILL стили*/
.content-head{
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction:column;
    gap:20px;
}
.content-head-title{
    all: unset;
    font-size: 30px !important;
    line-height: 40px;
    text-align: center;
    letter-spacing: -0.01em;
}


.content-body{
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction:column;
    gap:20px;
}

   @media (max-width: 1500px)/*было 1200*/ {
    .content-head-title{
      font-size: 21px !important;
      line-height: 35px;
    }
   }
   @media (max-width: 580px) {
    .content-head-title{
        align-self: flex-start !important;
        padding: 0 20px;
        line-height: 30px;
    }
}



/*Стили для модального окошка отправки на почту*/

    /* Оверлей — фон */
    .modal-overlay   {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2001;
        padding: 20px;
        box-sizing: border-box;
    }
    .modal-overlay-custom{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2001;
        padding: 20px;
        box-sizing: border-box;
    }

    /* Модальное окно */
    .modal {
        display: flex;
        flex-direction: column;
        gap: 60px;
        width: 100%;
        max-width: 600px;
        background-color: #ffffff;
        padding: 90px 40px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        position: relative;
    }

    /* Заголовок */
    .header-modal p {
        font-size: 21px;
        line-height: 1.6;
        color: #121212;
        margin: 0;
    }

    /* Форма */
    .form, .form-order, .form-advice, .form-resume{
        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    .field-form {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    /* Обёртка для валидации */
    .input-wrapper {
        position: relative;
        width: 100%;
    }
    .input-form{
        display:flex;
        flex-direction: column;
        gap:20px;
    }
    .input-form input{
       height: 40px;
    }

    /* Иконка внутри поля */
    .input-icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    /* Статус: ошибка — восклицательный знак */
    .input-wrapper.error .input-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53935'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
        opacity: 1;
    }

    /* Статус: успех — галочка */
    .input-wrapper.success .input-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
        opacity: 1;
    }

    /* Подчёркивание при ошибке */
    .input-wrapper.error input,
    .input-wrapper.error input:focus {
        border-bottom-color: #e53935 !important;
    }

    /* Подвал */
    .footer-modal {
        margin-top: -40px;
    }

    .footer-modal p {
        font-size: 14px;
        line-height: 20px;
        color: rgba(18, 18, 18, 0.6);
        margin: 0;
    }

    .footer-modal p > a {
        color: rgba(18, 18, 18, 0.6);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color 0.3s ease, text-decoration-color 0.3s ease;
    }

    .footer-modal p > a:hover {
        color: rgba(3, 3, 3, 0.8);
        text-decoration-color: #000;
    }

    /* Кнопка */
    .form-btn button {
        padding: 14px 20px 15px;
        color: #12121299;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    /*адаптив для карточки товара внутри письма*/
    @media (max-width: 768px) {
      .modal {
        gap: 40px;
        padding: 40px 20px;
      }
      

     .custom-product {
        gap: 10px !important;
      }

      .custom-img {
        width: 60px !important;
        height: 50px !important; 
      }
      #custom-img {
        height: 50px !important; 
      } 

    .custom-text{
        gap: 5px !important;
        max-width: 189px !important;
    }
    .custom-price, .custom-current-price {
        white-space: nowrap;
        font-size: 14px;
        align-self: center;
      }
    .custom-title {
      font-size: 14px;
    }
    .custom-description {
      font-size: 12px;
    }
    }


    /*Стили для  боковой панели свойств*/

    .side-property-cladding-cotainer,  .side-property-package-cotainer, .side-property-legs-cotainer, .side-property-material-container{
      /*display: none;*/
      position: fixed;
      top: 0;
      bottom: 0;
      left: auto;
      right: 0;
      z-index: 2000;
      width: 640px;
      background-color: #ffffff;
      overflow-y: auto;
      transform: translateX(100%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }



    /* активное состояние */
    .side-panel-active {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    .side-property {
      display:flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
      padding: 0 40px;
      gap: 0px;
    }
    .side-property-middel{
        display: flex;
        padding-bottom: 80px;
        flex-direction: column;
        gap:40px;
    }
    .side-property-header{
        display: flex;
        align-items: center;
        width: 100%;
        padding: 40px 0;
        justify-content: space-between;
    }
    .side-property-header p {
        font-weight: 400;
        font-size: 18px;
        line-height: 30px;
    }

    /* Блок категории с тенью*/
    .property-category-block {
      display: flex;
      /*flex:1;*/
      flex-direction: column;
      gap: 20px;
    }

    .property-block-header {
      margin: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0;
    }

    .property-block-header p {
        font-size: 15px;
        line-height: 20px;
    }

    .side-property-content {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      row-gap: 20px;
      column-gap: 10px;
    }

    .property-card, .property-card-package, .package-not, .property-card-legs, .property-card-caps, .property-card-material {
      position: relative;
      display: flex;
      gap:10px;
      flex-direction: column;
      align-items: start;
      max-width:250px;
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .property-card-material:hover .property-card-image img,
    .property-card:hover .property-card-image img,
    .property-card-legs:hover .property-card-image img,
    .property-card-caps:hover .property-card-image img
    {
        transform: scale(1.05);
    }
    .property-card-material.selected{

      transform: translateY(-1px);
    }


    .property-card.selected {

      transform: translateY(-1px);
    }

    .property-card-legs.selected {

      transform: translateY(-1px);
    }

    .property-card-caps.selected {

      transform: translateY(-1px);
    }

    .property-card-package:hover .property-card-image img {
        transform: scale(1.05);
    }

    .property-card-package.selected {

      transform: translateY(-1px);
    }

    .package-not:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }



    .property-card-image {
      width: 100%;
      position: relative;
      /*max-height: 120px;*/
      aspect-ratio: 3/2;
      overflow: hidden;
      border-radius: 8px;
      background-color: #f8f8f8;
      transition: transform 0.3s ease;
    }
    .property-card-help{
      display:flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 150px;
      overflow: hidden;
      background-color: #f8f8f8;
    }

    .property-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .property-card-text {
      width: 100%;
    }
    .package-prop-text{
        text-align: center;
    }

    .package-prop-gt{
        font-size: 13px;
        line-height: 20px;
        letter-spacing: -0.02em;
        color: rgba(18, 18, 18, 0.6);
    }
    .summ-legs{
        font-size: 13px !important;
        line-height: 25px !important;
        letter-spacing: -0.04em !important;
    }



    .property-card-title-text, .property-p-card-title-text {
        font-size: 15px;
        line-height: 20px;
        letter-spacing: -0.01em;

    }
    .property-card-littel-text{
        font-size: 11px;
        line-height: 20px;
        letter-spacing: 0.01em;
        color: rgba(18, 18, 18, 0.6);
    }

    /* Галочка поверх изображения */
    .checkmark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* центрируем по горизонтали и вертикали */
        display: none;
        justify-content: center;
        align-items: center;
        padding: 0px 7px;
        width: 54px;
        height: 20px;
        background-color: #FFFFFF;
        border-radius: 4px;
        font-size: 9px;
        line-height: 20px;
        text-align: center;
        z-index: 10;
    }

    .property-card-image::after {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0;    
        transition: opacity 0.3s ease;
        z-index: 1;
        background: linear-gradient(0deg, rgba(18, 18, 18, 0.1), rgba(18, 18, 18, 0.1)), url(category-divan.jpg);

    }

    /* показываем затемнение при выборе */
    .property-card.selected .property-card-image::after,
    .property-card-legs.selected .property-card-image::after,
    .property-card-caps.selected .property-card-image::after,
    .property-card-package.selected .property-card-image::after,
    .property-card-material.selected .property-card-image::after {
        opacity: 1;
    }

    .property-card.selected .checkmark {
      display: flex;
    }



    .property-card-legs.selected .checkmark {
      display: flex;
    }
    .property-card-caps.selected .checkmark {
      display: flex;
    }


    .property-card-package.selected .checkmark {
      display: flex;
    }
    .property-card-material.selected .checkmark {
      display: flex;
    }

    /*
    .property-card-package.selected .checkmark::after {
      content: "✓";
    }*/

    /* Блок выбранного свойства */
    .side-property-bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0;
      width: 640px;
      gap: 16px;
      height: 80px;
      z-index: 200;
      background-color: #F2EFEE;
    }
    .side-property-bottom__content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 10px 20px;
    }

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

    .selected-property-image {
      width: 90px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .selected-property-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .selected-property-description {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .ng{
        gap:0px;
    }

    .selected-property-description p {
      margin: 0;
      font-size: 14px;
      color: #333;
    }

    .added-price {
        font-weight: 400;
        font-size: 18px;
        line-height: 25px;
        letter-spacing: -0.04em;
    }

    .selected-property__itog{
        display: flex;
        gap:20px;
     }
     .property-block-header__price p strong{
        font-size: 18px;
        line-height: 25px;
        font-weight: 400;
        letter-spacing: -0.04em;

     }

     .selected-property__price{
        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: center;
     }
     /*Стили для обрезки текста*/
     .single-line-ellipsis {
        white-space: nowrap;        
        overflow: hidden;        
        text-overflow: ellipsis;   
    }
    /*максимальная длина текста*/
    @media(max-width: 768px){
        .ml{
            width: 100px;
        }
    }
    

    /*LOADER*/
    
  .loader, .loader-cart {
      display: none;
      border: 4px solid rgba(0,0,0,0.1);
      border-top: 4px solid #121212;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 0.8s linear infinite;
      margin: 0 auto;
      }

      @keyframes spin {
      0% { transform: rotate(0deg);}
      100% { transform: rotate(360deg);}
      }



    @media (max-width: 768px) {
    .side-property-cladding-cotainer,  .side-property-package-cotainer, .side-property-legs-cotainer, .side-property-material-container{
        width: 100%;

        }
        .side-property-bottom {
            width: 100%;
            gap: 16px;
            height: 60px;
            bottom:36px;
        }
        .side-property-bottom__content{
            padding: 20px 10px;
        }
        .selected-property-image {
            width: 60px;
            height: 40px;
        }
    
        .side-property {
            padding: 0 20px !important;

        }
        .selected-property__itog {
            gap: 10px;
        }

        .added-price {
            font-size: 15px;
            line-height: 20px;

        }
        .selected-property-description p {
            font-size: 13px;
        }
        .property-card-littel-text {
            font-size: 9px;
            line-height: 15px;

        }
        .property-block-header__price p strong {
            font-size: 15px;
            line-height: 160%;

        }
        .package-title-ct {
            font-size: 13px;
            line-height: 20px;
        }
        .property-p-card-title-text{
            font-size: 13px;
            line-height: 20px;

        }


    }

    @media (max-width: 600px) {

        .side-property-content {
            grid-template-columns: repeat(2, 1fr);
            row-gap: 20px;
            column-gap: 4px;
        }

    }


        /*Стили для корзины и избранного*/
    .cart-favourites-section{
        display:flex;
        width: 100%;
        justify-content: center;
    }
    .cart-favourites-wrapper{
        display:flex;
        flex-direction:column;
        width: 100%;
        max-width:2560px;
        padding: 40px 90px;
        gap: 40px;
    }
    .cart-empty, .favourites-empty{
    display:flex;
    justify-content:center;
    font-size:21px;
    }
    @media (max-width: 768px) {
    .cart-empty, .favourites-empty{
        font-size:16px;
    }
    }



/*Доставка*/
   .delivery-section {
    display: flex;
    justify-content: center;
    align-items:center;
    width: 100%;
}

.delivery-wrapper {
    display: flex;
    flex-direction: column;
    
    width: 100%;
    max-width: 2560px;
    padding: 40px 90px;
    gap: 40px;
}

.delivery-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}
.block-item-service{
    display:flex;
    width: 100%;
    flex-direction: column;
    gap:20px;
}



.delivery-block-text {
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #121212;
}
.delivery-additional-text{
    font-weight: 400;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    color: rgba(18, 18, 18, 0.6);
}

.table-block {
    overflow-x: auto; /* Ключевое исправление: горизонтальная прокрутка */
    width: 100%;
    -webkit-overflow-scrolling: touch; /* Плавность на мобильных */
}

.delivery-table {
    width: 100%;
    border: 1px solid #1212121A;
    border-spacing: 0;
    min-width: 600px; /* Минимальная ширина для читаемости */
}

.lift {
    width: 100%; /* На мобильных занимаем всю ширину */
}
.delivery-table.lift {
    border-collapse: collapse; /* чтобы линии не дублировались */
}

.delivery-table.lift td {
    border: 1px solid  #1212121A; /* цвет можешь поменять */
}

.delivery-table th,
.delivery-table td {
    padding: 22px 20px;
    text-align: center;
    border-bottom: 1px solid #1212121A;
    white-space: normal; /* Переносы текста */

}
.delivery-table td:first-child {
    text-align: start;
    font-size: 15px;
    line-height: 25px;
    border-right:1px solid #1212121A;
}


.delivery-table tbody tr:last-child td,
.delivery-table tbody tr:last-child th {
    border-bottom: none;
}
/*
.delivery-table tr:first-child {
    background-color: #F2EFEE;
}
    */

.delivery-table tr:first-child td {
    font-weight: 400;
    font-size: 13px;
    padding: 20px 20px;
    line-height: 25px;
    color: #121212;
}
.lift td:first-child{
    text-align: center;
}

.delivery-table td {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.04em;
}

.delivery-table td span {
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: rgba(18, 18, 18, 0.6);
}

.delivery-table tbody tr:hover {
    background-color: #F2EFEE;
    transition: background-color 0.2s ease;
}


/* Адаптивные стили */
@media (max-width: 1500px) {
    .delivery-wrapper {
        padding: 20px 40px;
    }

}
@media(max-width:1200px){
    .delivery-additional-text{
        font-size: 13px;
        line-height: 25px;
    }
    .delivery-table td{
        font-size: 15px;
        line-height: 25px;

    }
    .delivery-table tr:first-child td {
        font-size: 11px;
        line-height: 20px;

    }
    .delivery-table td span {
        line-height: 15px;
    }
    .delivery-table td:first-child{
        font-size: 13px;
        line-height: 20px;

    }
    .delivery-table td span {
        font-size: 11px;
        line-height: 15px;

    }
    .delivery-table th,
    .delivery-table td {
        padding: 18px 20px;

    }

}
@media(max-width: 768px){
    .mobile-table {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        
    }

    .mobile-title {
        font-size: 13px;
        line-height: 25px;
        text-align: center;
        flex-wrap: wrap;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 10px 0;
        justify-content: center;
    }
    .mobile-title span{
        font-size: 11px;
        line-height: 20px;
        color: rgba(18, 18, 18, 0.6);

    }
    .mobile-row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid #1212121A;
        border-bottom: none;
    }

    .mobile-row:last-child {
        border-bottom: 1px solid #1212121A;
    }

    .mobile-left,
    .mobile-right {
        padding: 10px 15px;
    }

    /* левая колонка */
    .mobile-left {
        width: 50%;/* 10-60 км */
        font-size: 11px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        line-height: 20px;
        border-right: 1px solid #1212121A;
    }
    .mobile-left span{
        font-size: 11px;
        line-height: 15px;
        color: rgba(18, 18, 18, 0.6);
    }

    /* правая колонка */
    .mobile-right {
        width: 50%;
        display: flex;
        text-align: center;
        font-size: 13px;
        line-height: 25px;
        letter-spacing: -0.04em;
        justify-content: center;
        align-items: center;
    }
    .block-item-service{
        gap:0;
    }
    .delivery-additional-text{
        font-size: 11px;
        line-height: 15px;
    }
}
/*
@media (max-width: 768px) {
    .delivery-wrapper {
        padding: 20px;
    }
    .delivery-block-text {
        font-size: 16px;
        line-height: 24px;
        text-align: start;
    }

    .delivery-table th,
    .delivery-table td {
        padding: 8px 10px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .delivery-table {
        min-width: 480px; 
    }
    .delivery-table th,
    .delivery-table td {
        padding: 6px 8px;
        font-size: 12px;
    }
}
*/

/*MOBILE BOTTOM BAR*/
        .bottom-bar-wrapper{
            display:none !important;
            position: fixed; /* приклеиваем к низу */
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff; /* фон */
            box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
            align-items:center;
            justify-content: space-around;
            z-index: 5000;
            padding: 6px 0px;

        }

        .bottom-bar-wrapper.visible {
            display: flex !important;
        }

        .bottom-bar-item{
            display: flex;
            align-items: center;
            padding: 3px;
            width: 24px;
            height: 24px;
            position: relative;

        }
        .bottom-bar-item > a {
          width: 100%;
          height: 100%;
        }
        .bottom-bar-item > a > img{
          height: 18px;
          width: 18px;
        }

        .badge-favourites-mobile, .badge-cart-mobile{
          color: #FFFFFF;
          border-radius: 10px;
          width: 7px;
          height: 7px;
          padding: 3px;
          align-items: center;
          justify-content: center;
          display: none;
          text-align: center;
          position: absolute;
          top: 2px;
          right: 2px;
          background: #EB1E1E;
          border: 2px solid #FFFFFF;
        }

        /*плашки*/
        /* Индивидуальные стили для каждой плашки */
        .badge-discount {
            color: #EB1E1E !important;
        }
        .badge-instock{
            white-space:nowrap;
            background: #FFFFFF;            
            color: #159E59 !important;

        }

  
/*Полоса прокрутки на сайте*/


.scroll-area {
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
}

/* Chrome, Edge, Safari, Яндекс */
.scroll-area::-webkit-scrollbar {
    width: 1.5px; /* тонкая полоса */
}

.scroll-area::-webkit-scrollbar-track {
    background: transparent; /* прозрачный фон */
    padding-right: 3px; /* отступ от правого края */
}

.scroll-area::-webkit-scrollbar-thumb {
    background-color: rgba(18, 18, 18, 0.12);
    border-radius: 100px;

    /* делаем бегунок короче и аккуратнее */
    border: 2px solid transparent; 
    background-clip: content-box;

    opacity: 0;
    transition: opacity 0.25s ease;
}

/* показываем при наведении или активной прокрутке */
.scroll-area:hover::-webkit-scrollbar-thumb,
.scroll-area:active::-webkit-scrollbar-thumb {
    opacity: 1;
}


/* Firefox тонкая полоска с отступом */
.scroll-area {
    scrollbar-color: rgba(18,18,18,0.12) transparent;
    scrollbar-width: thin;
}



/*Боковая вкладка со связью*/

    .contacts-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1700;

            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .contacts-overlay.is-visible {
            opacity: 1;
            visibility: visible;
        }

                    /* Оверлей затемнения */
        .consultation-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1700;

            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .consultation-overlay.is-visible {
            opacity: 1;
            visibility: visible;
        }
        .cooperation-overlay{
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1700;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;            
        }
        .cooperation-overlay.is-visible {
            opacity: 1;
            visibility: visible;
        }


        .side-contacts{
            position: fixed;
            display:flex;
            flex-direction:column;
            gap:120px;
            top:0;
            right:0;
            /*width:22%;*/
            width: 540px;
            height:100%;
            background: #ffffff;
            transition: opacity 0.4s ease;
            z-index: 1701;
            padding: 80px 40px;
            overflow-y: auto;
            transform: translateX(100%);
            opacity: 0;

            transition:
                transform 0.4s ease,
                opacity 0.25s ease;
            pointer-events: none;
        }

        .side-contacts.is-open {
            transform: translateX(0);
            opacity: 1;
            pointer-events: auto;
        }

        .contacts-block{
            display:flex;
            flex-direction:column;
            gap:60px;
        }
        
        .form-contact{
            display:flex;
            flex-direction:column;
            gap:40px;
        }
        .close-item{
            display:none;
            align-items:center;
            width: 40px;
            cursor: pointer;
            height: 40px;
            justify-content:center;
            align-self: end;
        }
        .close-side-property{
            display: flex;
        }
        .form-contact-bottom{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 20px;

        }

        .politic-text-bottom p, .politic-text-bottom >p > a{
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: rgba(18, 18, 18, 0.6);
        }
        .politic-text-bottom >p > a{
            text-decoration: underline;
        }

        .contacts-header{
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .сontact-us{
               display:flex;
               flex-direction:column;
               gap:60px; 
            }
        .сontact-us-body{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 30px;
        }

        .contacts-messenger-block{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 20px;
        }
        .form-btn{
            width: 100%;
        }
        .form-btn button {
            width: 100%;
        }




        .contacts-title{
            font-weight: 400;
            font-size: 21px;
            line-height: 35px;
            align-self: stretch;
        }
        .call-phone a{
            font-weight: 500;
            font-size: 21px;
            line-height: 40px;
        }
            

        .contacts-text{
            font-style: normal;
            font-weight: 400;
            font-size: 15px;
            line-height: 20px;
            color: rgba(18, 18, 18, 0.6);
        }
        .contacts-text-black{
            font-weight: 400;
            font-size: 18px;
            line-height: 30px;
            color: #121212;
        }

        .call-phone{
            display:flex;
            gap:8px;
            align-items:center;

        }

        .copy-btn{
                all:unset;
                width: 20px !important;
                height: 20px !important;
                cursor:pointer !important;
                
        }
        .copy-btn img{
            width: 100%;
            height: 100%;
        }


        /*разделитель*/
        .divider {
            display: flex;
            align-items: center;
            width: 100%;
            color: #9a9a9a;

        }
        .divider span{
            color: #12121299;
            font-size: 14px;
            text-transform: lowercase;

        }

        .divider::before,
        .divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #e5e5e5;
        }

        .divider::before {
            margin-right: 12px;
        }

        .divider::after {
            margin-left: 12px;
        }


        .contacts-bottom-block{
            display:flex;
            flex-direction:column;
            gap:40px;

        }

        /*Список мессенджеров */
        .messenger-contacts-list{
            display:flex;
            flex-wrap:wrap;
            gap:5px;
        }

        .messenger {
            display: flex; 
            align-items: center; 
            justify-content: center;
            gap: 3px; 
            border: 2px solid #121212; 
            width: fit-content;
            padding: 8px 15px; 
            border-radius:100px;
            cursor: pointer; 
            text-decoration: none; 
            transition: background-color 0.3s 
                ease, color 0.3s 
                ease, transform 0.2s 
                ease;
        }

        .messenger:hover {
            background-color: #121212; /* Фон тёмный при наведении */
            color: #ffffff; /* Белый текст при наведении */
        }


        .messenger-element-img{
            width: 22px;
            height: 22px;
            
        }
        .pinterest-img{
            background-repeat: no-repeat;
            background-image: url("/assets/images/site/pinterest.svg");
        }
        .messenger:hover .pinterest-img {
            background-image: url("/assets/images/site/hover-pinterest.svg");
        }

        .telegram-img{
            background-repeat: no-repeat;
            background-image: url("/assets/images/site/telegram.svg");
        }
        .messenger:hover .telegram-img {
            background-image: url("/assets/images/site/hover-telegram.svg");
        }

        .whatsapp-img{
            background-repeat: no-repeat;
            background-image: url("/assets/images/site/whatsapp.svg");
        }

        .messenger:hover .whatsapp-img{
            background-image: url("/assets/images/site/hover-whatsapp.svg");
        }

        .vk-img{
            background-repeat: no-repeat;
            background-image: url("/assets/images/site/vk.svg");
        }

        .messenger:hover .vk-img{
            background-image: url("/assets/images/site/hover-vk.svg");
        }

        .max-img{
            background-repeat: no-repeat;
            background-image: url("/assets/images/header/max-messenger-sign-logo.svg");
        }

        .messenger:hover .max-img{
            background-image: url("/assets/images/site/max.svg");
        }

        .messenger-element-img img{
            width: 100%;
            height: 100%;
        }

        .contacts-adress{
            display:flex;
            flex-direction:column;
            gap:40px;
        }

        /*Плашка */

.copy-btn {
    position: relative;
}

/* Плашка */
.copy-tooltip {
    position: absolute;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);

    background: #121212;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

/* Стрелка */
.copy-btn {
    position: relative;
    overflow: visible;
}

/* Плашка */
.copy-tooltip {
    position: absolute;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);

    display: flex;
    align-items: center;
    gap: 6px;

    background: #121212;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

/* Стрелка */
.copy-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #121212;
}

/* Иконка галочки */
.copy-check {
    display: block;
    stroke: #fff;
}

/* Показ */
.copy-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* Смартфоны */
@media (max-width: 768px) {
    .side-contacts {
        width: 100%;
        padding: 25px 25px 36px 25px;
    }
    .contacts-block{
      gap:40px;
    }
    .contacts-title{
      font-size: 18px;
      line-height: 30px;
    }
         
    .contacts-text{
      font-weight: 400;
      font-size: 15px;
      line-height: 20px;
      color: rgba(18, 18, 18, 0.6);
        }
    .contacts-text-black{
        font-size: 15px;
        line-height: 20px;
        color: #121212;

        }
    .сontact-us{
        gap:40px;
      }    

    .messenger {
        padding: 8px 14px;
    }

    .messenger-element-img {
        width: 20x;
        height: 20px;
    }
    
    .close-item{
            display:flex;
        }

}





/*-----------------------------

ШРИФТЬ НА ГЛАВНОЙ

-----------------------------*/
    .glavnay-title-section{
        font-weight: 500;
        font-size: 30px;
        line-height: 40px;
        text-align: center;
        letter-spacing: -0.01em;
    }

    @media (max-width: 1800px) {
    .glavnay-title-section{
        font-size: 25px;
        line-height: 35px;
        }
    }
    @media (max-width: 1200px) {
    .glavnay-title-section{
        font-size: 21px;
        line-height: 30px;
        }
    }
    
/*-----------------------------

ГЛАВНАЯ ---- СЕКЦИИ 

-----------------------------*/
.glavnaya-sections-wrapper{
    width: 100%;
    max-width: 2560px;
    padding:70px 0px;
    overflow: hidden;
}
/*для слайдера без отступов*/
@media (max-width: 1800px) {
    .glavnaya-sections-wrapper {
        padding: 40px 0;
 
    }
}
@media (max-width: 1200px) {
    .glavnaya-sections-wrapper {
        padding: 20px 0;
        }
    }
@media (max-width: 768px) {
    .glavnaya-sections-wrapper {
        padding: 20px 0;

    }}
/*
@media (max-width: 1800px) {
    .glavnaya-sections-wrapper {
        padding: 40px 50px;
 
    }
}
@media (max-width: 1200px) {
    .glavnaya-sections-wrapper {
        padding: 20px 40px;
        }
    }
@media (max-width: 768px) {
    .glavnaya-sections-wrapper {
        padding: 20px 20px;

    }}
*/

/*КРУЖКИ С ОБШИВКОЙ*/

    .cladding-card{
        display:flex;
        gap:8px;
        align-items:center;
    }

    .cladding-card img{
        height: 14px;
        width: 14px;
        border-radius:50%;
        border:1px solid #717171;
    }      
    .color-more{
        font-size: 14px;

        letter-spacing: -0.03em;
        color: rgba(18, 18, 18, 0.6);

    }
    @media (max-width: 768px) {
    .color-more{
        font-size: 13px;
        line-height: 20px;

    }
    }


    /*СТАРЫЕ ЦЕНЫ*/

        .old-price {
            font-size: 14px;
            line-height: 160%;
            letter-spacing: -0.03em;
            color: rgba(18, 18, 18, 0.6);
            white-space: nowrap;
        }
        del {
            position: relative;
            text-decoration: none;
        }
        del:before {
            content: "";
            width: 100%;
            height: 1px;
            background: #717171;
            position: absolute;
            top: 50%;
            left: 0;
            transform: rotate(-5deg);
        }


    /*Крошки*/
        .bread-crumbs-container{
            display:flex;
            width: 100%;
            justify-content:center;
        }
        .bread-crumbs {
            display: flex;
            padding: 40px 90px 0 90px;
            width: 100%;
            max-width:2560px;
            justify-content: flex-start; 
        }

        .bread-crumb-list {
            display: flex;
            align-items:center;
            flex-direction: row-reverse; 
            /*gap: 8px; */
            list-style: none;
        }


        .bread-crumb-item {
            display: flex;
            align-items: center;
        }
        .back-crumb {
            display: flex;
            align-items: center;
            padding-right: 10px;
        }

        .back-crumb svg{
            width: 24px;
            height: 24px;
            display:block;
        }

        .bread-crumb-list > .bread-crumb-item:not(.back-button):first-of-type .bread-crumb-link {
            color: #121212;

        }
        .bread-crumb-link {
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 15px;
            line-height: 20px;
            color: rgba(18, 18, 18, 0.6);
        }
        .separator span{
            color: rgba(18, 18, 18, 0.6);
        }

        .bread-crumb-link:hover {
            color: #12121299; /* Темнее при наведении */
        }

        .bread-crumb-current {
            color: #6c757d; /* Серый для текущей страницы */
            font-size: 0.9rem;
        }

        /* Доп: разделитель между элементами (например, «/») */
        .bread-crumb-item:not(:last-child)::after {
            content: "";
            margin-left: 0.5rem;
            color: #6c757d;
            font-size: 0.9rem;
        }

        @media (max-width: 1800px){
            .bread-crumbs {
            padding: 30px 40px 0 40px;
            }
        }
        @media(max-width:1440px){
            .bread-crumb-link{
                font-size: 13px;
                line-height: 20px;
                letter-spacing: -0.01em;
            }

            .back-crumb svg{
                width: 20px;
                height: 20px;
            }

        }
        @media(max-width: 768px){
            .bread-crumbs {
            padding:20px 15px 0 15px;
            
            }
            .bread-crumb-list {
                flex-wrap: nowrap;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }

            .bread-crumb-list::-webkit-scrollbar {
                display: none;
            }

            .bread-crumb-item {
                flex: 0 0 auto;
            }


            /*
            .bread-crumb-item{
                display: none;
            }
                */
            .back-button{
                display: block;
            }
            .glavnaya-link{
                display: block;
            }
        }