/* ===== ЛИЧНЫЙ КАБИНЕТ – ПОЛНЫЙ КОМПЛЕКТ СТИЛЕЙ ===== */

/* ----- Меню пользователя (История заказов, Личная информация, Выход) ----- */
.user__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
}

.user__menu li {
  margin: 0;
}

.user__menu li a {
  display: inline-block;
  padding: 8px 20px;
  font-size: 1rem;
  font-weight: 400;
  color: #64748b;
  text-decoration: none;
  border-radius: 14px;
  transition: all 0.2s;
  background: transparent;
}

.user__menu li a:hover {
  background: #00a55110;
  color: #00a551;
}

/* Активный пункт меню (если понадобится добавить класс active) */
.user__menu li.active a {
  background: #00a551;
  color: white;
  box-shadow: 0 2px 6px rgba(0, 165, 81, 0.2);
}

.user__menu li a.active__inner {
  background: #00a55110;
  color: #00a551;
}

/* Кнопка выхода – справа и красная */
.user__menu li:last-child {
  margin-left: auto;
}

.user__menu li:last-child a {
  color: #dc2626;
}

.user__menu li:last-child a:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* ----- Контентная область (карточка) ----- */
.user__content {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  padding: 28px 24px 32px;
  margin-top: 16px;
}

.user__content h3 {
  font-size: 1.4rem;
  font-weight: 400;
  color: #1e2a3a;
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #00a551;
  display: inline-block;
}

/* ----- Таблица заказов (адаптивная, с прокруткой) ----- */
.table-wrapper {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.orderTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-weight: 400;
  min-width: 600px;
}

.orderTable td,
.orderTable th {
  padding: 12px 8px;
  vertical-align: top;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 400;
}

.orderTable tr:last-child td {
  border-bottom: none;
}

.orderTable td:first-child,
.orderTable td:nth-child(2) {
  font-weight: 400;
  white-space: nowrap;
}

/* Вложенная таблица товаров */
.orderTable table {
  width: 100%;
  border-collapse: collapse;
  background: #f8fafc;
  border-radius: 14px;
  overflow: hidden;
  margin: 8px 0;
}

.orderTable table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  font-weight: 400;
}

.orderTable table tr:last-child td {
  border-bottom: none;
}

.orderTable table a {
  color: #1e2a3a;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s;
}

.orderTable table a:hover {
  color: #00a551;
  text-decoration: underline;
}

/* Общая сумма заказа (внутри ячейки) */
.orderTable td:last-child {
  font-weight: 400;
  color: #1e2a3a;
}

.user__content p.total-sum {
  text-align: right;
  font-size: 1rem;
  color: #00a551;
  background: #f0fdf4;
  padding: 12px 20px;
  border-radius: 14px;
  margin-top: 16px;
  display: inline-block;
  width: auto;
  font-weight: 400;
}

/* Альтернативный стиль для суммы внутри td */
.orderTable td:last-child br + span,
.orderTable td:last-child > span:last-child {
  display: inline-block;
  margin-top: 12px;
  color: #00a551;
  background: #f0fdf4;
  padding: 4px 12px;
  border-radius: 14px;
  font-weight: 400;
}

/* Заголовки таблицы (если будут) */
.orderTable th {
  text-align: center;
  color: #334155;
  background: #f1f5f9;
  font-weight: 400;
}

/* ----- АДАПТИВНОСТЬ ----- */
@media (max-width: 768px) {
  .user__menu {
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .user__menu li a {
    padding: 6px 16px;
    font-size: 0.9rem;
    white-space: nowrap;
    border-radius: 12px;
  }

  .user__menu li:last-child {
    margin-left: auto;
  }

  .user__content {
    padding: 20px 16px 24px;
    border-radius: 12px;
  }

  .user__content h3 {
    font-size: 1.25rem;
    margin-bottom: 20px;
  }

  .orderTable {
    font-size: 0.85rem;
    min-width: 520px;
  }

  .orderTable td,
  .orderTable th {
    padding: 10px 6px;
  }

  .orderTable table td {
    padding: 8px 10px;
  }
}

@media (max-width: 600px) {
  .user__menu {
    gap: 6px;
  }

  .user__menu li a {
    padding: 5px 14px;
    font-size: 0.85rem;
    border-radius: 10px;
  }

  .user__content {
    padding: 16px 12px 20px;
    border-radius: 10px;
  }

  .user__content h3 {
    font-size: 1.2rem;
  }

  .orderTable {
    min-width: 480px;
  }

  .orderTable td,
  .orderTable th {
    padding: 8px 4px;
  }

  .orderTable table td {
    padding: 6px 8px;
  }

  .user__content p.total-sum {
    width: 100%;
    text-align: center;
    border-radius: 12px;
  }
}


/* Рубрики */
.catalog__filters {
  width: 270px;
  float: left;
  margin: 0;
}

  .side__filters {
    width: 100%;
    float: left;
    margin: 0 0 30px 0;
  }
    .side__filters > form {
      width: 100%;
      float: left;
      margin: 0;
      padding: 0;
    }
      .side__filters > form > input[type="text"]{
        width: 220px;
        float: left;
        height: 36px;
        line-height: 36px;
        margin: 0;
        padding: 0 4px;
        background: #fff;
        border-left: 1px solid #f5f5f5;
        border-top: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
        border-right: 0;
      }
      .side__filters > form > input[type="submit"]{
        height: 38px;
        width: 38px;
        padding: 0;
        margin: 0;
        background: #fff;
        background-image: url('/assets/img/search.svg');
        background-repeat: no-repeat;
        background-size: 22px;
        background-position: center center;
        border-right: 1px solid #f5f5f5;
        border-top: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
        border-left: 0;
      }

    .side__filters > ul {
      width: 100%;
      float: left;
      margin: 10px 0;
      padding: 0;
      list-style-type: none;
    }
      .side__filters > ul > li {
        width: 100%;
        float: left;
        line-height: 36px;
        margin: 0;
        padding: 0;
      }
        .side__filters > ul > li > a {
          color: #696969;
          text-decoration: none;
        }
        a:hover {
          color: var(--link-green);
        }

/* Кнопка по умолчанию скрыта на десктопе */
.catalog__filters .menu-toggle {
  /*display: none;*/
}

/* Мобильная версия (ширина экрана до 768px) */
@media (max-width: 768px) {
  /* Переключаем грид на одну колонку */
  .cat__grid {
    grid-template-columns: 1fr;
  }

  .catalog__filters {
    width: 100%;
    margin-bottom: 20px;
  }

  /* Показываем кнопку и оформляем её */
  .catalog__filters .menu-toggle {
    display: block;
    width: 98%;
    margin: 0 1%;
    border-radius: 4px;
    background: #F9F9F9;
    border: 1px solid #F4F4F4;
    padding: 12px;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    position: relative;
  }

  /* Стрелка справа */
  .catalog__filters .menu-toggle::after {
    content: '▼';
    float: right;
    transition: transform 0.3s;
  }

  /* Поворот стрелки при открытом меню */
  .catalog__filters.open .menu-toggle::after {
    transform: rotate(180deg);
  }

  /* Список скрыт по умолчанию */
  .catalog__filters ul {
    display: none;
    margin-top: 0;
    border: 1px solid #F4F4F4;
    border-top: none;
  }

  /* При открытом меню показываем список */
  .catalog__filters.open ul {
    display: block;
  }

  /* Небольшой отступ для пунктов на мобильных */
  .catalog__filters > ul > li {
    padding: 0 12px;
  }
}
/*.catalog__block {
  width: calc(100% - 300px);
  float: left;
  margin: 10px 0 10px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
.index__catalog__block {
  width: 100%;
  float: left;
  margin: 10px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
  .catalog__item {
    width: 100%;
    height: 340px;
    position: relative;
    float: left;
    margin: 0;
    border: 1px solid #e7f3cc;
    transition: border 0.5s;
  }
    .catalog__item:hover {
      transition: border 0.5s;
      border: 1px solid #00a651;
    }
    .catalog__item > a > .thumb {
      width: 100%;
      height: 200px;
      float: left;
    }
    .catalog__item > .prod__price {
      width: 100%;
      float: left;
      margin: 6px 0;
      text-align: center;
      color: #00a651;
      font-size: 11pt;
      font-weight: 300;
    }
    .catalog__item > .prod__name {
      width: 100%;
      height: 50px;
      line-height: 24px;
      float: left;
      margin: 4px 0;
      text-align: center;
      color: #000;
      font-weight: 500;
      font-size: 12pt;
    }
      .catalog__item > .prod__name > a {
        text-decoration: none;
      }
    .catalog__item > a > .in__basket {
      width: 100%;
      height: 46px;
      line-height: 46px;
      text-align: center;
      position: absolute;
      color: #fff;
      transition: opacity 0.5s;
      opacity: 0;
      left: 0;
      bottom: 0;
      overflow: hidden;
      background: var(--main_bg_light);
    }
      .catalog__item:hover > a > .in__basket {
        height: 46px;
        transition: opacity 0.5s;
        opacity: 1;
        background: var(--main_bg_light);
        text-decoration: none;
      }

@media screen and (max-width: 900px) {
  .catalog__block {
    width: calc(100% - 300px);
    float: left;
    margin: 10px 0 10px 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }
  .index__catalog__block {
    width: 100%;
    float: left;
    margin: 10px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }
}

@media screen and (max-width: 650px) {
  .catalog__block {
    width: calc(100% - 300px);
    float: left;
    margin: 10px 0 10px 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
  .index__catalog__block {
    width: 100%;
    float: left;
    margin: 10px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
}
@media screen and (max-width: 500px) {
  .catalog__block {
    width: calc(100% - 300px);
    float: left;
    margin: 10px 0 10px 30px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
  .index__catalog__block {
    width: 100%;
    float: left;
    margin: 10px 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
}*/

/* ===== КАТАЛОГ ТОВАРОВ (превью-карточки) ===== */

/* Контейнер каталога – сетка с автоматическим заполнением */
.catalog__block {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  margin: 30px 0;
}

/* Карточка товара */
.catalog__item {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 20px;
  text-align: center;
}

.catalog__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* Блок с изображением (соотношение 1:1) */
.thumb {
  display: block;
  width: 100%;
  padding-bottom: 100%; /* квадрат */
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 12px;
  margin-bottom: 16px;
  transition: opacity 0.2s;
}

.catalog__item a:hover .thumb {
  opacity: 0.85;
}

/* Название товара */
.prod__name {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 12px 0 8px;
  min-height: 2.8em; /* чтобы карточки были одной высоты при разной длине названия */
}

.prod__name a {
  color: #1e2a3a;
  text-decoration: none;
  transition: color 0.2s;
}

.prod__name a:hover {
  color: #00a551;
}

/* Цена (если будет заполнена) */
.prod__price {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: #00a551;
  margin: 8px 0 16px;
}

/* Кнопка "Добавить в корзину" */
.in__basket {
  display: inline-block;
  width: 100%;
  background: #f8fafc;
  color: #1e2a3a;
  text-align: center;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  border-radius: 40px;
  transition: all 0.2s;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  box-sizing: border-box;
}

.catalog__item a:hover .in__basket {
  background: #00a551;
  border-color: #00a551;
  color: white;
}

/* Ссылка-обёртка для кнопки (чтобы ховер работал корректно) */
.catalog__item a {
  text-decoration: none;
}

.button__group {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.btn {
  display: inline-block;
  flex: 1;          /* кнопки одинаковой ширины */
  text-align: center;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 40px;
  transition: all 0.2s;
  cursor: pointer;
  box-sizing: border-box;
}

/* Кнопка «В корзину» – акцентная */
.btn-cart {
  background: #00a551;
  color: white;
  border: none;
}
.btn-cart:hover {
  background: #008a44;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 165, 81, 0.2);
}

/* Кнопка «Подробнее» – светлая, как было ранее */
.btn-details {
  background: #f8fafc;
  color: #1e2a3a;
  border: 1px solid #e2e8f0;
}
.btn-details:hover {
  background: #eef2f6;
  border-color: #cbd5e1;
}

/* Адаптив для узких экранов – кнопки могут стать вертикально */
@media (max-width: 480px) {
  .button__group {
    flex-direction: column;
    gap: 8px;
  }
  .btn {
    width: 100%;
  }
}

/* Пагинация (если есть) */
.pages {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.pages a, .pages span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 40px;
  font-size: 0.9rem;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s;
}

.pages a:hover {
  background: #00a55110;
  color: #00a551;
}

.pages .current {
  background: #00a551;
  color: white;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
  .catalog__block {
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .catalog__item {
    padding: 16px 12px 16px;
  }

  .prod__name {
    font-size: 0.95rem;
  }

  .prod__price {
    font-size: 1.1rem;
  }

  .in__basket {
    padding: 8px 10px;
    font-size: 0.85rem;
    border-radius: 30px;
  }
}

@media (max-width: 560px) {
  .catalog__block {
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .catalog__item {
    padding: 12px 10px 14px;
  }

  .thumb {
    border-radius: 10px;
  }

  .prod__name {
    font-size: 0.85rem;
    min-height: auto;
  }

  .prod__price {
    font-size: 1rem;
  }

  .in__basket {
    font-size: 0.8rem;
    padding: 6px 8px;
  }

  .pages a, .pages span {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}
/* Новости на сайте  */
.news {
  width: 100%;
  float: left;
  margin: 0 0 20px 0;
}
  .news > .news__date {
    width: 100%;
    float: left;
    margin: 10px 0;
    font-style: italic;
    font-size: 10pt;
    text-align: center;
  }
    .news > .news__content {
      width: 100%;
      float: left;
      margin: 20px 0;
    }

/* Превью новости */
.news__prev {
  width: 100%;
  float: left;
  margin: 10px 0;
  padding: 5px 0;
}
  .news__prev > .image {
    width: 200px;
    height: 120px;
    float: left;
  }
  .news__prev > .date {
    width: calc(100% - 210px);
    margin: 0 0 0 10px;
    float: left;
    text-align: left;
    line-height: 20px;
    font-size: 10pt;
    color: #7C7C7C;
    font-style: italic;
  }
  .news__prev > .head {
    width: calc(100% - 210px);
    margin: 0 0 0 10px;
    float: left;
    text-align: left;
    font-size: 14pt;
    line-height: 26px;
  }
    .news__prev > .head > a {
      color: #00a651;
      text-decoration: none;
    }
  .news__prev > .text {
    width: calc(100% - 210px);
    float: left;
    text-align: left;
    font-size: 11pt;
  }


/* Пагинация */
.pages{
  width: 100%;
  float: left;
  line-height: 24px;
  margin: 20px 0 0 0;
  text-align: center;
}
  .pages span{
    display: inline-block;
    text-align: center;
    height: 25px;
    width: 25px;
    line-height: 25px;
    border-radius: 13px;
    font-size: 10pt;
  }
    .pages span.current {
      background: rgba(204,207,207, 0.9);
      color: #fff;
    }
    .pages a{
      display: block;
      color: #000;
      text-decoration: none;
      
    }
    .pages span a:hover{color: #000; text-decoration: underline;}

.order__success, .order__error {
  width: 100%;
  float: left;
  margin: 20px 0;
  text-align: center;
  line-height: 26px;
}
  .order__error {
    color: red;
  }

.basket__inner {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

/*
.buyForm {
  width: 100%;
  float: left;
}

  .buyForm fieldset {
    width: 100%;
    float: left;
    text-align: center;
    border: 0;
    padding: 0;
    margin: 4px 0;
  }
    .buyForm fieldset > label {
      width: 175px;
      line-height: 26px;
      float: left;
      text-align: right;
    }
    .buyForm fieldset > input[type="text"] {
      width: calc(100% - 200px);
      height: 26px;
      line-height: 26px;
      padding: 0 3px;
      float: right;
      border: 1px solid #E3E3E3;
      border-radius: 3px;
    }
    .buyForm fieldset > textarea {
      width: calc(100% - 193px);
      height: 78px;
      resize: none;
      line-height: 26px;
      padding: 0;
      float: right;
      border: 1px solid #E3E3E3;
      border-radius: 3px;
    }
    .buyForm fieldset > input[type="submit"] {
      width: 180px;
      height: 36px;
      float: left;
      margin-left: calc(50% - 90px);
      border: 0;
      font-size: 10pt;
      text-align: center;
      color: #fff;
      border-radius: 4px;
      background: #880002;
    }
    .buyForm fieldset > .map,
    .buyForm fieldset > #map {
      width: 100%;
      height: 340px;
      float: left;
    }
.buyForm > form > div > fieldset.btns,
.buyForm > form > div > fieldset.pay__btns {
  width: 400px;
  float: left;
  margin: 20px 0 20px 130px;
}

@media screen and (max-width: 500px) {
  .buyForm > form > div > fieldset.btns,
  .buyForm > form > div > fieldset.pay__btns {
    width: 200px;
    float: left;
    margin: 0 0 0 calc(50% - 90px);
  }
}

.buyForm > form > div > fieldset.btns > div > label {
  width: 170px;
}

.btns input {
  position: absolute;
  left: -9999px;
}
.btns > div {
  display: inline-block;
  padding: 3px 20px;
  margin: 0 1% 0 0;
  padding: 0;
  line-height: 35px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
.btns input:checked + label {
  background: var(--main_bg_light);
  color: #fff;
  text-align: center;
}
.btns div label {
  width: 250px;
  float: left;
  height: 35px;
  text-align: center;
  cursor: pointer;
  padding: 0 10px;
  line-height: 35px;
  border: 0px solid #164e2a;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.basketAllPrice {
  width: 100%;
  float: left;
}

.basketTable {
  width: 100%;
  float: left;
  font-size: 11pt;
}
  
  .basketTable tr > td:first-child {
    width: 100px;
  }
    .basketTable tr > td:first-child > span {
      width: 100px;
      height: 80px;
      float: left;
      overflow: hidden;
      border-radius: 8px;
    }
  .basketTable tr > td:nth-child(2) > a {
    color: #000;
    text-decoration: none;
  }
  .basketTable tr > td:nth-child(4) {
    width: 80px;
  }
  .basketTable tr > td:nth-child(5) {
    width: 40px;
  }

.basketCount {
  width: 90px;
}
  .basketCount > input[type="text"] {
    width: 28px;
    float: left;
    text-align: center;
    border: 1px solid #BEC2CD;
    border: 0;
    height: 20px;
    line-height: 20px;
  }

  .increaseButton,
  .decreaseButton {
    background-color: #E7E7E7;
    border-radius: 3px;
    border: none;
    color: #555;
    line-height: 20px;
    float: left;
    padding: 2px 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .increaseButton:hover,
  .decreaseButton:hover {
    background-color: #ccc;
    background-image: linear-gradient(#ddd, #ccc);
  }

.total > div {
  font-weight: bold;
}
*/

/* ===== КОРЗИНА (таблица + форма оформления) ===== */

/* Контейнер корзины */
.basketForm {
  margin-bottom: 40px;
}

/* Таблица корзины */
.basketTable {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 30px;
}

.basketTable td,
.basketTable th {
  padding: 16px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 400;
  color: #1e2a3a;
}

.basketTable th {
  background: #f8fafc;
  font-weight: 400;
  color: #64748b;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.basketTable tr:last-child td {
  border-bottom: none;
}

/* Ячейка с изображением */
.basketTable td:first-child {
  width: 80px;
  padding: 8px;
}

.basketTable td:first-child span {
  display: block;
  width: 120px;
  height: 60px;
  background-size: cover !important;
  background-position: center center !important;
  border-radius: 12px;
}

/* Название товара */
.basketTable td:nth-child(2) {
  font-weight: 400;
  line-height: 1.4;
}

.product__title {
  font-size: 1rem;
  font-weight: 400;
  color: #1e2a3a;
  line-height: 1.4;
  margin-bottom: 4px;
}

.product__variant {
  font-size: 0.8rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.3;
}

/* Блок с количеством */
.basketCount {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.basketCount button {
  width: 28px;
  height: 28px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 40px;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s;
  color: #1e2a3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.basketCount button:hover {
  background: #00a55110;
  border-color: #00a551;
  color: #00a551;
}

.basketCount input {
  width: 44px;
  text-align: center;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 0;
  font-size: 0.9rem;
  background: #f8fafc;
  font-weight: 400;
  color: #1e2a3a;
}

/* Цена и итого */
#6_sum,
#4_item_sum {
  font-weight: 400;
  color: #1e2a3a;
}

/* Кнопка удаления */
.basketTable td:last-child {
  text-align: center;
  width: 55px;
}

.basketTable td:last-child a {
  display: inline-block;
  transition: opacity 0.2s;
}

.basketTable td:last-child img {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.basketTable td:last-child a:hover img {
  opacity: 1;
}

/* Итоговая сумма и доставка (как в sample_styles) */
.basketSummary {
  width: 100%;
  overflow: hidden;
}

.cartDelivery {
  width: 100%;
  padding: 14px 0;
  box-sizing: border-box;
  font-size: 11pt;
  color: #242424;
  border-bottom: 1px solid #f0f0f0;
}

.cartDelivery__label {
  color: #8a8a8a;
}

.cartDelivery__value {
  float: right;
  font-weight: 600;
}

.cartDeliveryText {
  width: 100%;
  margin: 12px 0 0 0;
  font-size: 12pt;
  font-weight: 400;
  color: #2e9e44;
  text-align: center;
}

.cart__total {
  width: 100%;
  margin: 20px 0 0 0;
  padding: 18px 20px;
  box-sizing: border-box;
  background: #f7f7f7;
  border-radius: 12px;
  font-size: 15pt;
}

.cart__totalLabel {
  color: #242424;
}

.cart__totalValue {
  float: right;
  font-weight: 700;
  color: #242424;
}

/* Блок оформления заказа */
.buyForm {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  padding: 24px 28px 32px;
  margin-top: 20px;
}

.buyForm h2 {
  font-size: 1.4rem;
  font-weight: 400;
  color: #1e2a3a;
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #00a551;
  display: inline-block;
}

/* Поля формы */
.buyForm fieldset {
  border: none;
  margin: 0 0 20px 0;
  padding: 0;
}

.buyForm label {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: #334155;
  margin-bottom: 6px;
}

.buyForm label b {
  color: #ef4444;
  font-weight: 400;
}

.buyForm input[type="text"],
.buyForm input[type="email"],
.buyForm textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.95rem;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #fff;
  transition: all 0.2s;
  font-family: inherit;
  font-weight: 400;
  box-sizing: border-box;
}

.buyForm input[type="text"]:focus,
.buyForm input[type="email"]:focus,
.buyForm textarea:focus {
  outline: none;
  border-color: #00a551;
  box-shadow: 0 0 0 3px rgba(0, 165, 81, 0.15);
}

.buyForm textarea {
  min-height: 100px;
  resize: vertical;
}

/* Адрес самовывоза */
.basket__address {
  background: #f0fdf4;
  padding: 12px 16px;
  border-radius: 14px;
  color: #1e2a3a;
  font-size: 0.9rem;
  margin: 0;
}

/* Радиокнопки */
.btns {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.btns div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btns input[type="radio"] {
  accent-color: #00a551;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.btns label {
  margin: 6px 0 0 0;
  cursor: pointer;
  font-size: 0.95rem;
}

.checkout-container {
      max-width: 1100px;
      margin: 0 auto;
    }

    .cart-payment-card {
      background: white;
      border-radius: 10px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }

    .cart-header {
      padding: 1.5rem 2rem;
      border-bottom: 1px solid var(--border-light);
    }

    .cart-header h2 {
      font-size: 1.6rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .cart-header h2 i {
      color: var(--primary);
    }

    .cart-items {
      padding: 1rem 2rem;
    }

    .cart-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0;
      border-bottom: 1px solid var(--border-light);
      gap: 1rem;
    }

    .cart-item:last-child {
      border-bottom: none;
    }

    .item-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 2;
      min-width: 180px;
    }

    .item-img {
      width: 60px;
      height: 60px;
      background: #f1f5f9;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
    }

    .item-details h4 {
      font-weight: 600;
      margin-bottom: 0.25rem;
    }

    .item-details p {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .item-price {
      font-weight: 700;
      color: #0f172a;
      min-width: 90px;
      text-align: right;
    }

    .item-quantity {
      min-width: 100px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.5rem;
      color: var(--text-muted);
    }

    .cart-summary {
      background: var(--gray-light);
      padding: 1.2rem 2rem;
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .total-label {
      font-size: 1.1rem;
      font-weight: 500;
    }

    .total-price {
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--primary);
    }

    .payment-section {
      padding: 0;
      margin: 30px 0;
      border-top: 1px solid var(--border-light);
    }

    .payment-method-fieldset {
      border: 1px solid var(--border-light);
      border-radius: 10px;
      padding: 1.5rem 1.8rem;
      background: white;
      position: relative;
    }

    .payment-method-fieldset legend {
      /* Убираем стандартное позиционирование блока */
      float: none;
      width: auto;
      /* Отступы слева/справа, чтобы текст не прилипал к краю */
      padding: 0 12px;
      font-weight: 400;
      font-size: 1.1rem;
      color: #1e2a3e;
      background: white;        /* Перекрывает линию границы */
      /* Сдвигаем легенду вверх, чтобы она пересекала рамку */
      margin-top: -0.7em;       /* Величина зависит от высоты шрифта */
      margin-left: 10px;        /* Небольшой отступ слева */
      margin-bottom: 10px;
      /* Чтобы легенда оставалась в потоке, но при этом не растягивалась на всю ширину */
      display: table;
      /* Убираем стандартный border у легенды (некоторые браузеры добавляют) */
      border: none;
    }

    .payment-options-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.2rem;
      margin-top: 0.5rem;
    }

    .payment-option {
      position: relative;
      cursor: pointer;
      display: block;
      /* Убираем любой outline с лейбла */
      outline: none;
    }

    /* Скрываем нативный радио-инпут */
    .payment-option input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    /* Глобально убиваем стандартный outline для всех элементов внутри блока оплаты */
    .payment-option,
    .payment-option *,
    .payment-option-card,
    .payment-option-card *,
    .payment-method-fieldset,
    .payment-method-fieldset *,
    input[type="radio"],
    label {
      outline: none !important;
    }

    /* Дополнительно для Firefox и Safari */
    .payment-option:focus,
    .payment-option:focus-visible,
    .payment-option-card:focus,
    .payment-option-card:focus-visible {
      outline: none !important;
    }

    .payment-option-card {
      background: white;
      border: 2px solid var(--border-light);
      border-radius: 10px;
      padding: 1rem 1.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    .payment-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 1;
    }

    .payment-icon {
      width: 48px;
      height: 48px;
      background: var(--primary-soft);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.7rem;
      color: var(--primary);
      transition: all 0.2s;
    }

    .payment-text h4 {
      font-weight: 500;
      font-size: 0.85rem;
      margin-bottom: 0.2rem;
      color: #0f172a;
      text-align: left;
    }

    .payment-text p {
      font-size: 0.75rem;
      color: var(--text-muted);
      text-align: left;
    }

    .custom-radio {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid #cbd5e1;
      background: white;
      display: inline-block;
      position: relative;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .custom-radio::after {
      content: "";
      width: 12px;
      height: 12px;
      background: var(--primary);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.1s ease;
    }

    .payment-option:hover .payment-option-card {
      border-color: #cbd5e6;
      background-color: #fefefe;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transform: translateY(-2px);
    }

    .payment-option input[type="radio"]:checked ~ .payment-option-card {
      border-color: var(--primary);
      background-color: #f8fff9;
      box-shadow: 0 6px 14px rgba(0, 165, 81, 0.12);
    }

    .payment-option input[type="radio"]:checked ~ .payment-option-card .custom-radio {
      border-color: var(--primary);
    }

    .payment-option input[type="radio"]:checked ~ .payment-option-card .custom-radio::after {
      opacity: 1;
    }

    .payment-option input[type="radio"]:checked ~ .payment-option-card .payment-icon {
      background: white;
      color: var(--primary-dark);
      box-shadow: 0 0 0 1px var(--primary-soft);
    }

    /* Для доступности с клавиатуры добавляем аккуратную обводку ТОЛЬКО при фокусе через Tab (не при клике) */
    .payment-option:focus-visible .payment-option-card {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-color: transparent; /* чтобы не дублировать границу */
    }

    /* Убираем любую системную обводку у fieldset при фокусе внутри */
    .payment-method-fieldset:focus-within {
      outline: none;
    }

    .checkout-btn {
      margin-top: 2rem;
      width: 100%;
      background: var(--primary);
      border: none;
      padding: 1rem 1.5rem;
      border-radius: 10px;
      font-weight: 700;
      font-size: 1.1rem;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      cursor: pointer;
      transition: 0.2s;
      box-shadow: 0 2px 6px rgba(0, 165, 81, 0.2);
    }

    .checkout-btn:hover {
      background: var(--primary-dark);
      transform: scale(0.99);
      box-shadow: 0 4px 12px rgba(0, 165, 81, 0.3);
    }

    .secure-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-size: 0.75rem;
      color: #5b6e8c;
      margin-top: 1rem;
      text-align: center;
    }

    .secure-note i {
      color: var(--primary);
    }

    @media (max-width: 700px) {
      .cart-header, .cart-items, .cart-summary, .payment-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
      }
      .payment-options-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      .payment-method-fieldset {
        padding: 1.2rem;
      }
      .cart-item {
        flex-direction: column;
        align-items: flex-start;
      }
      .item-price, .item-quantity {
        align-self: flex-end;
        width: 100%;
        text-align: right;
      }
      .total-price {
        font-size: 1.5rem;
      }
    }

    @media (max-width: 480px) {
      .payment-info {
        gap: 0.7rem;
      }
      .payment-icon {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
      }
      .payment-text h4 {
        font-size: 0.9rem;
      }
      .custom-radio {
        width: 20px;
        height: 20px;
      }
    }

/* Подпись о звёздочках */
.comment {
  font-size: 0.8rem;
  color: #64748b;
  margin: 16px 0;
}

.comment b {
  color: #ef4444;
  font-weight: 400;
}

/* Кнопка "Заказать" */
.submit {
  margin-top: 24px;
}

.submit input[type="submit"] {
  width: 100%;
  background: #00a551;
  color: white;
  border: none;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 400;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.2s, transform 0.05s;
  font-family: inherit;
}

.submit input[type="submit"]:hover {
  background: #008c45;
}

.submit input[type="submit"]:active {
  transform: scale(0.98);
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
  .basketTable td,
  .basketTable th {
    padding: 12px 8px;
    font-size: 0.85rem;
  }

  .basketTable td:first-child {
    width: 60px;
  }

  .basketTable td:first-child span {
    width: 48px;
    height: 48px;
  }

  .basketCount button {
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
  }

  .basketCount input {
    width: 36px;
    font-size: 0.8rem;
  }

  .buyForm {
    padding: 20px 16px 24px;
  }

  .buyForm h2 {
    font-size: 1.25rem;
  }

  .btns {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .basketTable tr:last-child div {
    font-size: 1rem;
  }
}

@media (max-width: 600px) {
  /* Превращаем таблицу в блоки для совсем маленьких экранов */
  .basketTable,
  .basketTable tbody,
  .basketTable tr,
  .basketTable td {
    display: block;
  }

  .basketTable thead {
    display: none;
  }

  .basketTable tr {
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
    background: #ffffff;
  }

  .basketTable td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: none;
    gap: 12px;
  }

  .basketTable td:before {
    content: attr(data-label);
    font-weight: 400;
    color: #64748b;
    width: 35%;
    flex-shrink: 0;
  }

  .basketTable td:first-child {
    justify-content: center;
  }

  .basketTable td:first-child:before {
    display: none;
  }

  .basketTable td:first-child span {
    width: 80px;
    height: 80px;
  }

  .basketCount {
    justify-content: flex-end;
  }

  .basketTable td:last-child {
    justify-content: flex-end;
  }

  .basketTable tr:last-child td:before {
    display: none;
  }

  .basketTable tr:last-child div {
    text-align: right;
    width: 100%;
  }

  .product__title {
    font-size: 0.95rem;
  }
  .product__variant {
    font-size: 0.75rem;
  }
}

/* Дополнительно — скрытие адреса доставки по умолчанию (если не выбран) */
/*#delivery_address {
  display: none;
}
*/
/* ================================ 
      .model {
        float: left;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #f2f2f2;
      } 
        .model > h1 {
          width: 100%;
          float: left;
          font-size: 23pt;
        }
        .modelLeft {
          float: left;
          position: relative; 
          width: 460px; 
          margin: 20px 0 0 0;
        }
          .productImage {
            width: 100%;
            min-height: 500px;
            float: left;
          }
          #materialThumbDiv{
            width: 100%;
            min-height: 500px;
            float: left;
            margin: 0 10px 4px 0;
          }
        @media only screen and (max-width: 900px){
          .modelLeft {
            float: left;
            position: relative; 
            width: 96%; 
            margin: 0 2%;
          }
          .productImage div#materialThumbDiv {
            min-height: 200px;
            float: left;
          }
          .productImage{
            min-height: 280px;
            width: 98%;
            float: left;
            margin: 0 1% 10px 1%;
            position: relative;
          }
          .productImage div{
            width: 320px;
            height: 248px;
            float: left;
            margin: 0 0 10px 0;
          }
          .productImage a{border: 0;}

          .productImage div#materialThumbDiv{
            width: 100%;
            min-height: 200px;
            float: left;
            text-align: center;
            margin: 0;
            position: relative;
          }

          .productImage div#materialThumbDiv img{
            height: 100%;
            width: auto;
            max-width: 100%;
          }

          .productImage a{border: 0;}
        }
          .modelImg {
            position: absolute;
            width: 265px;
            height: 300px;
            top: 145px;
            left: 125px;
          }
          .heart {
            position: absolute;
            width: 15px;
            height: 13px;
            top: 40px;
            right: 0;
          }
          .diagram {
            position: absolute;
            width: 14px;
            height: 12px;
            top: 78px;
            right: 0;
          }
        .modelRight {
          float: left;
          position: relative; 
          width: calc(100% - 470px); 
          margin: 20px 0 0 10px;
        }
          .modelRight > p {
            width: 100%;
            float: left;
          }
          .modelRight > .order__block {
            width: 100%;
            float: left;
            margin: 0;
            text-align: right;
            padding: 0 0 20px 0;
            line-height: 40px;
            border-bottom: 1px solid #eeeeee;
          }
            .modelRight > .order__block > h1 {
              font-size: 18pt;
              text-align: left;
              margin: 0 0 20px 0;
            }
            .order__block > select.prod__prices {
              width: 280px;
              height: 34px;
              float: left;
              margin: 0 0 10px 0;
              padding: 3px 10px;
            }
            .modelRight > .order__block > a.basket__link {
              margin: 10px 0 0 0;
              float: left;
              width: 240px;
              text-align: center;
              padding: 3px 20px;
              font-size: 12pt;
              text-transform: uppercase;
              color: #fff;
              text-decoration: none;
              background: var(--main_bg_light);
            }
            .prod__price__desc {
              width: 100%;
              float: left;
              line-height: 30px;
              text-align: left;
              font-size: 10pt;
              font-style: italic;
              color: var(--color-text-light);
            }
            .modelRight > .order__block > .prod__count {
              width: 100%;
              color: #7D7D7D;
              line-height: 20px;
              margin: 0 0 6px 0;
              text-align: left;
            }
            .modelRight > .order__block > div:first-child {
              width: 100%;
              line-height: 40px;
              text-align: left;
            }
            .modelRight > .order__block > .prod__price{
              width: 100px;
              float: left;
              padding: 10px 0 30px 0;
              font-size: 20pt;
              color:  var(--main_bg_light);
              font-weight: 500;
              text-align: left;
            }
            
            .modelRight > .prod__description {
              width: 100%;
              float: left;
              padding: 40px 0 40px 0;
              font-size: 11pt;
              border-bottom: 1px solid #eeeeee;
            }
              .modelRight > .prod__description > .prod__more__info {
                width: 100%;
                float: left;
                margin: 20px 0;
                font-size: 10pt;
              }
            .modelRight > .more__info {
              width: 100%;
              padding: 20px 0;
              float: left;
              font-size: 10.5pt;
              color: #8b8b8b;
            }
              .modelRight > .more__info > span {
                width: 100%;
                float: left;
                margin: 0 0 10px 0;
              }
                .modelRight > .more__info > span > b {
                  color: #000;
                }

        @media only screen and (max-width: 900px){
          .modelRight {
            float: left;
            position: relative; 
            width: 100%;
            margin: 0 0 30px 0;
          }
          .modelRight > .order__block {
            width: 100%;
            float: left;
            margin: 10px 0 0 0;
            text-align: left;
            line-height: 40px;
          }
          .modelRight > .order__block > h1 {
            text-align: center;
          }
          .modelRight > .order__block > .prod__price{
            width: 100%;
            margin: 0 0 20px 0;
            float: left;
            font-size: 20pt;
            color:  var(--main_bg_light);
            font-weight: 500;
            text-align: left;
          }
          .modelRight > .order__block > a {
            margin: 20px 0 20px calc(50% - 145px);
            float: left;
            width: 250px;
            text-align: center;
            padding: 4px 20px;
            font-size: 13pt;
            text-transform: uppercase;
            color: #fff;
            text-decoration: none;
            background: var(--main_bg_light);
          }
          .modelRight > .prod__description {
            padding: 0 0 40px 0
          }
        }
          
          .model > h1 {
            float: left;
            width: 100%; 
            margin: 47px 0 0 0;
          }
          .modelMore {
            float: left;
            width: 95px; 
            height: 16px;
            margin: 11px 0 0 0;
            line-height: 16px;
          }
            .modelMore a {text-decoration: none; color: #e66200; display: block;}
          .modelPrice {
            float: left;
            width: 100%; 
            height: 50px;
            margin: 20px 0 0 0;
            font-weight: bold;
            font-size: 20pt;
            line-height: 70px;
            border-top: 1px solid #f2f2f2;
          }
          .modelFound {
            float: left;
            width: 135px; 
            font-size: 10pt;
            text-align: left;
            margin: 20px 0 0 0;
            text-align: right;
            position: relative;
          }
            .modelFound > .cheaper {
              content: "";
              position: absolute;
              top: 4px;
              left: 0px;
              width: 15px;
              height: 15px;
              background: url("/images/ai.png") -74px -84px no-repeat;
            }
            .modelFound a {text-decoration: none; color: #666; border-bottom: 1px dotted #666;}
          .prepayment {
            float: left;
            width: 100%; 
            font-size: 10pt;
            line-height: 30px;
            margin: 18px 0 0 0;
            color: #555;
          } 
          .prodCount {
            float: left;
            width: 120px; 
            height: 40px;
            line-height: 40px;
            margin: 2px 0 0 0;
            background: #f3f3f5;
          }
            .prodCount span{
              display: inline-block;
              text-align: center;
              padding: 0;
              height: 40px;
              float: left;
              line-height: 40px;
              width: 30px;
              font-size: 12pt;
              color: #525252;
            }
              .prodCount > span.plus{float: right;}
              .prodCount span:hover{cursor: pointer;}

          .prodCount input{
            display: inline-block;
            vertical-align: top;
            border: none;
            box-shadow: none;
            text-align: center;
            line-height: 40px;
            height: 40px;
            background: transparent;
            font-size: 16px;
            color: #525252;
            width: 56px;
          }
          .totalProdPrice{
            color: #666;
            font-size: 10pt;
            margin: 8px 0 -10px 0;
            float: left;
          }
            .totalProdPrice > span{color: #000; font-weight: bold;}
          .modelBasket {
            float: left;
            width: 126px; 
            height: 40px;
            font-size: 11pt;
            margin: 2px 0 0 12px;
            background: #b90000;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
          }
            .modelBasket a {text-decoration: none; color: #fff; display: block;}
          .modelBuy {
            float: left;
            width: 138px; 
            height: 38px;
            font-size: 11pt;
            margin: 2px 0 0 12px;
            border: 1px solid #ff6d00;
            border-radius: 1px;
            -webkit-border-radius: 1px;
            -moz-border-radius: 1px;
            text-align: center;
            line-height: 38px;
            font-weight: bold;
          }
            .modelBuy a {text-decoration: none; color: #ff6d00; display: block;}
          .modelRight p {
            float: left;
            color: #393939;
            line-height: 22px;
            font-size: 11pt;
            margin: 4px 0;
          }
          .modelRight p:first-child {
            font-size: 10pt;
          } 
          @media only screen and (max-width: 900px){
            .modelRight p {
              float: left;
              width: 100%;
              line-height: 20px;
              margin: 30px 0 0 0;
              font-size: 11pt;
            }
          }
            .modelRight p a {color: #ff6d00; text-decoration: none;  border-bottom: 1px solid #0000ff;}
          .buyName {
            float: left;
            width: 100%; 
            margin: 55px 0 -30px 0;
            border-top: 1px solid #f2f2f2;
            padding-top: 35px;
            font-weight: bold;
          }
          .classTxt {font-size: 10pt; padding-bottom: 4px;}
      .modelMenu {
        float: left;
        width: 1024px;
        height: 60px;
        margin: 20px 0 0 0;
        border-bottom: 1px solid #f2f2f2;
      }
      @media only screen and (max-width: 900px){
        .modelMenu {
          display: none;
        }
        .BuyBtns{width: 100%; float: left; margin: 10px 0;}
      }
        .modelMenu ul {
          float: left;
          width: 422px;
          height: 58px;
          margin: 0;
          padding: 0;
          border-top: 1px solid #f2f2f2;
        }
          .modelMenu ul li {
            float: left;
            height: 58px;
            line-height: 59px;
            margin: 0;
            list-style-type: none;
            border-left: 1px solid #f2f2f2;
            font-weight: bold;
          }
          .modelMenu ul li:nth-child(3) {border-right: 1px solid #f2f2f2;}
          .modelMenu ul li a {text-decoration: none; color: #000; display: block; background: #f9f9fa; padding: 0 26px 0 26px;}
          .modelMenu ul li a:hover {background: none; color: #ff6d00; border-top: 2px solid #ff6d00; line-height: 55px;}

    .modelMenu > ul > li.activeTab{
      border-top: 2px solid #ff6d00;
      background: #fff;
      line-height: 55px;
    }
      .modelMenu > ul > li.activeTab > a{
        color: #ff6d00;
        background: #fff;
      }
      .modelMenu > ul > li.activeTab:hover{
        border-top: 0 solid #fff;
      }
      */
/* ===== КАРТОЧКА ТОВАРА (адаптивная, минималистичная) ===== */

/* Общий контейнер карточки */
.model {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  padding: 28px 24px 32px;
  margin: 20px 0;
}

/* Левая колонка (изображение) */
.modelLeft {
  flex: 1;
  min-width: 200px;
}

.productImage {
  width: 100%;
}

.productImage a {
  display: block;
  text-decoration: none;
}

#materialThumbDiv {
  float: left;
  margin: 10px 0;
  width: 100%;
  padding-bottom: 50vh; /* Квадратное соотношение 1:1 – адаптивно */
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  border-radius: 14px;
  transition: transform 0.2s;
}

#materialThumbDiv:hover {
  transform: scale(1.01);
}

/* Правая колонка (информация) */
.modelRight {
  flex: 1.2;
  min-width: 260px;
}

.order__block {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.order__block h1 {
  font-size: 1.6rem;
  font-weight: 400;
  color: #1e2a3a;
  margin: 0 0 20px 0;
  line-height: 1.3;
}

/* Выпадающий список (вариации) */
.prod__prices {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-weight: 400;
  font-family: inherit;
  color: #1e2a3a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 12px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.prod__prices:focus {
  outline: none;
  border-color: #00a551;
  box-shadow: 0 0 0 3px rgba(0, 165, 81, 0.15);
}

/* Описание вариации */
.prod__price__desc {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 20px;
  line-height: 1.4;
}

/* Кнопка покупки */
.basket__link {
  display: inline-block;
  width: 100%;
  background: #00a551;
  color: white;
  text-align: center;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  border-radius: 14px;
  transition: background 0.2s, transform 0.05s;
  box-sizing: border-box;
  letter-spacing: 0.3px;
}

.basket__link:hover {
  background: #008c45;
}

.basket__link:active {
  transform: scale(0.98);
}

/* Блок с подробным описанием */
.prod__description {
  margin: 24px 0 20px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #334155;
}

.prod__description p {
  margin-bottom: 0.8rem;
  font-weight: 400;
}

.prod__description span {
  background: transparent !important;
  font-family: inherit !important;
}

.prod__more__info {
  display: block;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 0.85rem;
  color: #64748b;
}

/* Дополнительная информация (категория) */
.more__info {
  margin-top: 16px;
  font-size: 0.85rem;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.more__info b {
  font-weight: 400;
  color: #1e2a3a;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 800px) {
  .basket__inner {
    position: relative;
    width: 98%;
    margin: 0 1%;
  }
  .btns > .payment-option {
    width: 94%;
    margin: 0px 3%;
  }
  .btns > .payment-option > label {
    width: 100%;
    margin: 6px 0 0 0;
    cursor: pointer;
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  .model {
    flex-direction: column;
    gap: 24px;
    padding: 20px 16px 24px;
    border-radius: 12px;
  }

  .modelLeft {
    min-width: 100%;
    order: 1;
  }
  .modelRight {
    order: 2; /* текст сверху */
  }

  .order__block h1 {
    font-size: 1.4rem;
  }

  .prod__prices {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  .basket__link {
    padding: 12px 14px;
  }
}

@media (max-width: 600px) {
  .model {
    padding: 16px 12px 20px;
    border-radius: 10px;
  }

  .order__block h1 {
    font-size: 1.3rem;
  }

  .prod__description {
    font-size: 0.9rem;
  }

  .prod__prices {
    font-size: 0.85rem;
  }

  .basket__link {
    font-size: 0.9rem;
  }
}