* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  color: #111;
}

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

/* =========================================================
   ШАПКА
   ========================================================= */

.topbar {
  background: #000;
  border-bottom: 2px solid #ff6600;
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
}

/* Левая, центральная и правая зоны внутри шапки */
.topbar-left,
.topbar-center,
.topbar-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.topbar-left {
  justify-content: flex-start;
}

.topbar-center {
  justify-content: center;
}

.topbar-right {
  justify-content: flex-end;
}

/* Логотип DILEMMA • B2B по центру, крупный */
.brand {
  color: #ff6600;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 26px;
  cursor: pointer;
}

/* Кнопки-пилюли (Каталог и т.п.) */
.btn-outline {
  border-radius: 999px;
  border: 2px solid #ff6600;
  padding: 8px 20px;
  background: transparent;
  color: #f3ded0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 13px;
  transition: 0.2s;
}

.btn-outline:hover {
  background: #ff6600;
  color: #000;
}

/* Корзина в шапке — такая же пилюля */
.cart-button {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px !important;
  border: 2px solid #ff6600 !important;
  padding: 8px 20px;
  background: transparent;
  color: #f3ded0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 13px;
  transition: 0.2s;
}

.cart-button:hover {
  background: #ff6600;
  color: #000;
}

.cart-button i,
.cart-icon {
  font-size: 16px;
  margin-right: 3px;
}

/* =========================================================
   ВКЛАДКИ / ТАБЫ (категории)
   ========================================================= */

h1 {
  margin: 16px 0;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.tab {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

.tab.active {
  border-color: #ff6600;
  color: #ff6600;
}

/* Подтабы (бренды) внутри аккордеона */
.tab-sub {
  font-size: 13px;
  padding: 8px 12px;
}

/* =========================================================
   СЕТКА ТОВАРОВ
   ========================================================= */

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}

.grid--hidden {
  display: none;
}

.card {
  position: relative;            /* ВАЖНО: чтобы плашка крепилась к карточке */
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.2s;
}


.card:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.card img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center top;
  background-color: #f8f8f8;
}

.card-body {
  padding: 8px 10px;
}


.card-price {
  font-size: 13px;
  color: #ff6600;
  font-weight: 600;
}

/* =========================================================
   ПОДВАЛ
   ========================================================= */

.footer {
  margin-top: 32px;
  padding: 16px;
  text-align: center;
  border-top: 2px solid #ff6600;
  background: #000;
  color: #fff;
  font-size: 13px;
}

.btn-main {
  margin-top: 10px;
  border-radius: 10px;
  border: 0;
  background: #ff6600;
  color: #fff;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
}

/* =========================================================
   МОДАЛЬНЫЕ ОКНА
   ========================================================= */

dialog {
  border: 0;
  border-radius: 16px;
  max-width: 640px;
  width: 100%;
  padding: 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
}

.close-btn {
  border: 0;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.modal-content {
  padding: 12px 14px;
}

/* =========================================================
   ГАЛЕРЕЯ ТОВАРА
   ========================================================= */

/* Большое фото */
#prodImg {
  width: 100%;
  height: 430px;
  object-fit: contain;
  object-position: center;
  background-color: #f8f8f8;
  border-radius: 14px;
}

/* Обёртка: миниатюры + большое фото (если нужно) */
.product-media {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.product-main-image {
  flex: 1;
}

/* Колонка миниатюр слева */
#productImages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* Миниатюры */
.thumb-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  background: #f0f0f0;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, opacity 0.2s;
}

.thumb-image.active {
  border-color: #ff7d00;
  transform: scale(1.03);
}

.thumb-image:hover {
  opacity: 0.9;
}

/* =========================================================
   ТЕКСТ / ЦЕНЫ
   ========================================================= */

.category {
  color: #666;
  font-size: 13px;
  margin: 4px 0 8px;
}

.price-row {
  font-weight: 600;
  color: #ff6600;
  margin-bottom: 10px;
}

.price-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.price-old,
.cart-price-old {
  text-decoration: line-through;
  color: #999;
  font-size: 13px;
}

.price-new,
.cart-price-new {
  color: #ff6600;
  font-weight: 600;
  font-size: 14px;
}

.price-badge {
  font-size: 11px;
  color: #ff6600;
  background: #fff3e6;
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
}

/* =========================================================
   ТАБЛИЦА РАЗМЕРОВ (PREMIUM)
   ========================================================= */

.variants-card {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid #ececec;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Таблица */
.variants-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* Шапка */
.variants-table thead th {
  padding: 10px 14px;
  background: linear-gradient(to right, #fafafa, #f5f5f5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 11px;
  color: #666;
  border-bottom: 1px solid #ececec;
  text-align: center;
  vertical-align: middle;
}

/* Строки */
.variants-table tbody tr {
  border-bottom: 1px solid #f3f3f3;
  transition: background 0.15s ease;
}

.variants-table tbody tr:last-child {
  border-bottom: none;
}

.variants-table tbody tr:hover {
  background: #fff9f3;
}

/* Ячейки */
.variants-table tbody td {
  padding: 10px 14px;
  vertical-align: middle;
  text-align: center;
}

/* Бейдж размера */
.variants-size {
  display: inline-flex;
  min-width: 38px;
  justify-content: center;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #ff660033;
  background: #fff7f0;
  font-weight: 600;
  font-size: 13px;
  color: #222;
}

/* Остаток */
.variants-stock {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f5f5f5;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #555;
}

/* Колонка "Заказать" */
.variants-qty {
  text-align: center;
}

/* Контрол количества */
.qty-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Поле ввода количества */
.qty-input {
  width: 72px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid #dadada;
  font-size: 13px;
  text-align: center;
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  background: #fafafa;
}

/* Кнопки + / − */
.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #ff660033;
  background: #fff7f0;
  color: #ff6600;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}

.qty-btn:hover {
  background: #ffe3cc;
  border-color: #ff6600;
}

.qty-input:focus {
  border-color: #ff6600;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.25);
}

/* =========================================================
   КОРЗИНА
   ========================================================= */

.cart-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}

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

.cart-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cart-row-title {
  flex: 1;
}

/* Контролы количества в корзине */
.cart-row-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 90px;
}

.cart-qty {
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Цена в корзине справа */
.cart-row-price {
  min-width: 120px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

/* Кнопки + / − в корзине */
.cart-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #ff660033;
  background: #fff7f0;
  color: #ff6600;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}

.cart-qty-btn:hover {
  background: #ffe3cc;
  border-color: #ff6600;
}

/* Итоги в футере корзины */
.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid #eee;
  font-size: 14px;
  font-weight: 600;
}

.cart-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 14px;
}

.cart-totals span {
  white-space: nowrap;
}

/* =========================================================
   ФОРМА ЗАКАЗА
   ========================================================= */

.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.form-row label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  margin-top: 10px;
}

.form-check input {
  margin-top: 4px;
}

.req {
  color: red;
  margin-left: 3px;
}

/* =========================================================
   HERO / ПРИВЕТСТВЕННЫЙ БЛОК
   ========================================================= */

.hero {
  background: radial-gradient(circle at top left, #ffe3c0 0, #fff7f0 30%, #ffffff 92%);
  padding: 48px 0 56px;
  border-bottom: 1px solid rgba(255, 138, 42, 0.18);
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* Левая колонка с текстом */
.hero-text {
  max-width: 560px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 122, 0, 0.08);
  color: #b5551f;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-title {
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 10px;
  font-weight: 600;
}

.hero-subtitle-strong {
  font-size: 18px;
  margin: 0 0 12px;
  font-weight: 500;
}

.hero-subtitle {
  margin: 0 0 20px;
  color: #555;
  line-height: 1.6;
}

.hero-btn {
  padding-inline: 22px;
  margin-bottom: 28px;
}

/* Правая колонка с логотипом */
.hero-logo-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-main-logo {
  max-height: 260px;
  width: auto;
  border-radius: 20px;
  background: #fff;
  padding: 18px 24px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06);
}

/* Логотипы брендов под текстом */
.hero-brands {
  margin-top: 36px;
}

.hero-brands-title {
  font-size: 14px;
  color: #555;
  margin-bottom: 16px;
  text-align: left;
  max-width: 560px;
}

.hero-brands-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 36px;
}

.hero-brands-grid img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: 0.2s ease;
}

.hero-brands-grid img:hover {
  opacity: 1;
  transform: scale(1.03);
}

/* Скрытие hero */
.hero--hidden {
  display: none;
}

/* =========================================================
   КАТАЛОГ: ВСПЛЫВАЮЩЕЕ МЕНЮ / САЙДБАР
   ========================================================= */

.catalog-layout {
  position: relative;
}

/* Кнопка "Каталог" (в шапке) */
.catalog-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-bottom: 16px;
  border-radius: 999px;
  border: 2px solid #ff7d00;
  background: #fff;
  color: #ff7d00;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 13px;
}

/* Само боковое меню */
.catalog-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: #111;
  color: #fff;
  padding: 24px 16px 32px;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
  transform: translateX(-105%);
  transition: transform 0.25s ease;
  z-index: 910;
  overflow-y: auto;
}

/* Открытое состояние */
.catalog-sidebar.open {
  transform: translateX(0);
}

/* Общие стили для кнопок внутри каталога */
.catalog-sidebar .tab,
.catalog-sidebar .accordion-toggle,
.catalog-sidebar .subcat-list .tab {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
  font-size: 13px;
}

/* Активная кнопка */
.catalog-sidebar .tab.active {
  background: #ff6a00;
  border-color: #ff6a00;
  color: #fff;
}

/* Заголовок аккордеона "Купальники" */
.catalog-sidebar .accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
}

/* Стрелка в аккордеоне */
.catalog-sidebar .accordion-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.accordion.open .accordion-toggle svg {
  transform: rotate(180deg);
}

/* Контейнер с брендами */
.accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 0;
  padding-left: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease,
    padding-top 0.3s ease;
}

.accordion.open .accordion-content {
  max-height: calc(100dvh - 220px); /* почти на весь экран */
  opacity: 1;
  padding-top: 6px;
  overflow-y: auto;                 /* ✅ внутри брендов появляется скролл */
  -webkit-overflow-scrolling: touch;
}


/* Кнопки брендов */
.catalog-sidebar .accordion-content .tab-sub {
  background: #171717;
  border-radius: 8px;
  border: 1px solid #2b2b2b;
  padding: 8px 12px;
  font-size: 13px;
}

.catalog-sidebar .accordion-content .tab-sub:hover {
  background: #222;
}

/* Полупрозрачная подложка под каталогом */
.catalog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 900;
}

.catalog-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   АДАПТИВ
   ========================================================= */

/* Планшеты / узкие ноуты */
@media (max-width: 900px) {
  .container {
    padding: 12px;
  }

  .topbar-inner {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .hero-top {
    flex-direction: column-reverse;
    gap: 28px;
  }

  .hero-main-logo {
    max-height: 200px;
  }

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

  .hero-subtitle-strong {
    font-size: 16px;
  }

  .hero-brands-title {
    max-width: 100%;
  }

  .hero-brands-grid {
    justify-content: flex-start;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  dialog {
    max-width: 95%;
  }
}

/* Телефоны */
@media (max-width: 600px) {
  .container {
    padding: 10px;
  }

  h1 {
    font-size: 22px;
    margin: 12px 0;
  }

  .tabs {
    gap: 6px;
  }

  .tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 8px 10px;
    font-size: 13px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  


  dialog {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .modal-header {
    padding: 10px 12px;
  }

  .modal-content {
    padding: 10px 12px;
  }

  .modal-content img {
    max-height: 260px;
  }

  .form-row {
    margin-bottom: 10px;
  }

  .form-row input,
  .form-row textarea {
    font-size: 14px;
    padding: 9px 10px;
  }

  .form-check {
    font-size: 12px;
  }

  #orderForm .btn-main,
  #orderForm .btn-outline {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  #orderForm .btn-main + .btn-outline {
    margin-left: 0;
    margin-top: 6px;
  }

  .cart-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Галерея товара уменьшенная */
  #prodImg {
    height: 300px;
  }

  .thumb-image {
    width: 70px;
    height: 70px;
  }

  /* Мобильная корзина: строки в колонку */
  .cart-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .cart-row-price {
    justify-content: flex-start;
  }

  .cart-totals {
    align-items: flex-start;
  }




}

/* =========================================================
   УБИРАЕМ СТРЕЛКИ У number-INPUT (количество)
   ========================================================= */

/* Chrome / Edge / Opera */
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox / стандартизированное свойство */
.qty-input {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ===== ФИКС ШАПКИ (ВОЗВРАЩАЕМ СТАРЫЙ ВИД) ===== */

/* сама шапка */
.topbar {
  background: #000;
  border-bottom: 2px solid #ff6600;
}

/* контейнер шапки */
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

/* логотип DILEMMA • B2B */
.brand {
  color: #ff6600;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 26px;  /* крупнее, чем текст на кнопках */
}

/* базовая кнопка-пилюля (Каталог) */
.btn-outline {
  border-radius: 999px;
  border: 2px solid #ff6600;
  padding: 8px 22px;
  background: #050505;
  color: #ff6600;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* ховер для обеих кнопок */
.btn-outline:hover {
  background: #ff6600;
  color: #000;
}

/* корзина — такая же пилюля, как "Каталог" */
.cart-button {
  border-radius: 999px;
  border: 2px solid #ff6600;
  padding: 8px 22px;
  background: #050505;
  color: #ff6600;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* иконка в корзине */
.cart-button i,
.cart-icon {
  font-size: 15px;
  line-height: 1;
}

/* ховер для корзины */
.cart-button:hover {
  background: #ff6600;
  color: #000;
}
/* ===== ВЫРАВНИВАНИЕ ШАПКИ ===== */

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;   /* <-- РОВНЯЕМ ВСЁ ПО ЦЕНТРУ ВЕРТИКАЛЬНО */
  padding: 12px 20px;    /* одинаковый отступ */
  gap: 20px;
}

/* Логотип — ставим фиксированную высоту строки */
.brand {
  line-height: 1;        /* убираем лишнее пространство */
  display: flex;
  align-items: center;   /* центрируем текст по вертикали */
}

/* Кнопки одинаковой высоты */
.btn-outline,
.cart-button {
  display: inline-flex;
  align-items: center;   /* <-- чтобы иконка и текст выровнялись */
  justify-content: center;
  height: 38px;          /* фиксированная высота, как на макете */
  padding: 0 20px;       /* одинаковые боковые отступы */
  box-sizing: border-box;
}

/* Иконки в кнопках — центрируем */
.cart-button i,
.cart-icon {
  display: flex;
  align-items: center;
}
/* ===== ФИНАЛЬНОЕ ВЫРАВНИВАНИЕ ШАПКИ ===== */

/* общая линия по центру */
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;      /* центр по вертикали */
  padding: 10px 40px;
}

/* лого */
.brand {
  display: flex;
  align-items: center;
  line-height: 2;
}

/* Кнопка "Каталог" */
.catalog-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  margin: 0 !important;     /* убиваем старые margin-top / bottom */
  box-sizing: border-box;
}

/* Кнопка "Корзина" */
.cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  margin: 0 !important;
  box-sizing: border-box;
}

/* иконка в корзине */
.cart-button i,
.cart-icon {
  display: flex;
  align-items: center;
}
/* ===== КНОПКИ В КОРЗИНЕ ===== */

.cart-footer-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Оранжевая кнопка (Оформить заказ) — уже есть, просто выравниваем */
.cart-footer .btn-main {
  font-size: 15px;
  padding: 10px 22px;
  border-radius: 12px;
  font-weight: 600;
}

/* Кнопка "Продолжить покупки" — стиль как btn-outline, но крупнее */
.btn-continue {
  font-size: 15px;
  padding: 10px 22px;
  border-radius: 12px;
  border: 2px solid #ff6600;
  background: #fff;
  color: #ff6600;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.btn-continue:hover {
  background: #ff6600;
  color: #000;
}
/* Описание / цвет в карточке каталога */
.card-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

/* Описание в карточке товара (в модалке) */
.product-desc {
  font-size: 14px;
  color: #444;
  margin: 4px 0 8px;
}
.card-badge-out {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  z-index: 5;
}

.card.disabled-card {
  opacity: 0.55;
  pointer-events: none; /* отключает клики */
}
.card-badge-out {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  z-index: 5;
}

.card.disabled-card {
  opacity: 0.55;
  pointer-events: none;   /* нельзя кликнуть */
}
.card-color {
  font-size: 12px;
  color: #666;
  margin: 4px 2px;
}
/* ===== ФИКС мобильной таблицы размеров: текст слева, элементы справа ===== */
@media (max-width: 600px) {

  #variantsTable thead {
    display: none;
  }

  #variantsTable {
    width: 100%;
    border-collapse: collapse;
  }

  #variantsTable tbody {
    display: block;
  }

  #variantsTable tbody tr {
    display: block;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    margin: 8px 0;
    padding: 12px 14px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.03);
  }

  /* каждая строка — "подпись слева, значение справа" */
  #variantsTable td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    width: 100%;
    text-align: left;
  }

  #variantsTable td::before {
    font-size: 14px;
    color: #555;
  }

  #variantsTable td:nth-child(1)::before {
    content: "Размер";
  }

  #variantsTable td:nth-child(2)::before {
    content: "Остаток";
  }

  #variantsTable td:nth-child(3)::before {
    content: "Заказать";
  }

  .variants-size,
  .variants-stock {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .variants-qty {
    display: flex;
    justify-content: flex-end;
  }

  .qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .qty-input {
    width: 64px;
    padding: 5px 8px;
    font-size: 14px;
    text-align: center;
  }

  .qty-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}
/* ===== МОБИЛЬНАЯ ТАБЛИЦА РАЗМЕРОВ: текст слева, значение справа ===== */
@media (max-width: 600px) {

  table#variantsTable {
    width: 100% !important;
    border-collapse: collapse;
  }

  table#variantsTable thead {
    display: none !important;
  }

  table#variantsTable tbody {
    display: block !important;
  }

  table#variantsTable tbody tr {
    display: block !important;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    margin: 8px 0;
    padding: 10px 16px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.03);
  }

  /* каждая ячейка: слева подпись, справа значение */
 table#variantsTable td {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  width: 100%;
  text-align: center;
}

  table#variantsTable td::before {
    font-size: 13px;
    color: #777;
    margin-right: 0;
  }

  table#variantsTable td:nth-child(1)::before {
    content: "Размер";
  }

  table#variantsTable td:nth-child(2)::before {
    content: "Остаток";
  }

  table#variantsTable td:nth-child(3)::before {
    content: "Заказать";
  }

  .variants-size,
  .variants-stock {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .variants-qty {
    display: flex;
    justify-content: center;
  }

  .qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .qty-input {
    width: 64px;
    padding: 5px 8px;
    font-size: 14px;
    text-align: center;
  }

  .qty-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}
/* ==== Супер-фикс мобильной таблицы размеров ==== */
@media (max-width: 600px) {

  /* каждая строка — отдельная карточка */
  .variants-table tbody tr {
    display: block !important;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    margin: 8px 0;
    padding: 12px 14px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.03);
  }

  /* Текст + значение по центру, рядом */
  .variants-table td {
    display: flex !important;
    justify-content: center !important;   /* <-- центрируем */
    align-items: center !important;
    gap: 10px;
    padding: 6px 0;
    width: 100%;
    text-align: center !important;
  }

  .variants-table td::before {
    font-size: 14px;
    color: #555;
    font-weight: 500;
    margin-right: 0;
  }

  .variants-table td:nth-child(1)::before { content: "Размер"; }
  .variants-table td:nth-child(2)::before { content: "Остаток"; }
  .variants-table td:nth-child(3)::before { content: "Заказать"; }

  .variants-size,
  .variants-stock {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .variants-qty {
    display: flex !important;
    justify-content: center !important;   /* блок - [] + тоже по центру */
  }

  .qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}
/* ===== Каталог: чтобы список категорий помещался и прокручивался ===== */

.catalog-sidebar{
  display: flex;
  flex-direction: column;
  overflow-y: auto !important;  /* ✅ включили прокрутку */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* контейнер с кнопками (у тебя он тоже .tabs внутри сайдбара) */
.catalog-sidebar .tabs{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;

  /* чтобы список занимал высоту экрана минус шапка */
  max-height: calc(100dvh - 140px);
}

/* заголовок "Каталог" остаётся сверху при прокрутке */
.catalog-sidebar h1{
  position: sticky;
  top: 0;
  z-index: 2;
  background: inherit;
  margin: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}
@media (max-width: 480px){
  .catalog-sidebar .tab{
    padding: 10px 12px;
    font-size: 14px;
  }
  .catalog-sidebar .tab-sub{
    padding-left: 16px;
  }
}
/* ===== Каталог: один скролл + нормальные отступы снизу ===== */
.catalog-sidebar{
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;              /* убираем внешний скролл */
}

.catalog-sidebar h1{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #111;
  margin: 0;
  padding: 12px 0;
}

.catalog-sidebar .tabs{
  flex: 1 1 auto;
  overflow-y: auto;              /* скролл только тут */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 28px;          /* “воздух” снизу */
}

/* чтобы бренды не отрезались и не создавали второй скролл */
.accordion.open .accordion-content{
  max-height: 2000px;            /* достаточно для списка брендов */
  overflow: hidden;
}
.card-badge-reserve{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  background: rgba(255, 102, 0, 0.92);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  z-index: 5;
}
/* ===== FIX: каталог в сайдбаре не должен "wrap"-иться в колонки ===== */
.catalog-sidebar .tabs{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap !important;   /* ключевое */
  align-content: flex-start;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;             /* чтобы не было горизонтального скролла */
  touch-action: pan-y;
}

/* на всякий случай, чтобы flex-дети не раздували ширину */
.catalog-sidebar .tab,
.catalog-sidebar .accordion-toggle,
.catalog-sidebar .tab-sub{
  min-width: 0;
}

/* чтобы сама панель точно не давала горизонтальный оверфлоу */
.catalog-sidebar{
  max-width: 100vw;
  overflow-x: hidden;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
}

#city {
  width: 100%;
}

.card-badges{
  display:flex;
  gap:6px;
  padding:10px 10px 0 10px;
  flex-wrap:wrap;
}

.modal-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 10px;
}

.tag{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}

/* варианты */
.tag--hit{ background:#fff3cd; border-color:#ffe69c; }
.tag--priceWeek{ background:#e7f1ff; border-color:#b6d4fe; }
.tag--sale{ background:#ffe3e3; border-color:#ffb3b3; }

/* чтобы бейджи нормально позиционировались */
.card { position: relative; overflow: hidden; }

/* контейнер бейджей */
.card-badges{
  position:absolute;
  top:12px;
  left:12px;
  display:flex;
  gap:8px;
  z-index:3;
}

/* общий стиль "пилюли" */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  padding:7px 10px;
  border-radius:999px;
  letter-spacing:.2px;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ХИТ — яркий градиент */
.tag--hit{
  color:#fff;
  background: linear-gradient(135deg, #ff6a00, #ff2d55);
  
}

/* Цена недели — чуть “электрическая” */
.tag--priceWeek{
  color:#111;
  background: linear-gradient(135deg, #ffd400, #fff3a0);
}

/* Распродажа — красный */
.tag--sale{
  color:#fff;
  background: linear-gradient(135deg, #ff003d, #ff7a00);
}

@keyframes badgePulse{
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.04); }
}

.card-media{
  position: relative;
  overflow: hidden;
  border-radius: 18px; /* под твой стиль */
}



.card-badges{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start; /* слева */
  z-index:2;
  pointer-events:none;
}

.card-media{
  position: relative;
  overflow: hidden;
  border-radius: 18px; /* если у тебя другое — поставь своё */
}



/* ваши верхние бейджи (нет в наличии / резерв) — пусть будут сверху */
.card-badge-out,
.card-badge-reserve{
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
}

/* бейджи типа "Хит продаж" — слева снизу */
.card-badges{
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
  pointer-events: none;
}
.tag--year2026{
  color:#fff;
  background: linear-gradient(135deg, #00c2ff, #7b2cff);
}

.tag--year2025{
  color:#111;
  background: linear-gradient(135deg, #d9ff00, #ffffff);
}

/* "Большой размер" (вишенки) */
.tag--size{
  color:#fff;
  background: linear-gradient(135deg, #ff2d55, #ff6a00);
}



/* ===== FIX: одинаковая высота фото-зоны в карточке ===== */
.card-media{
  position: relative;
  height: 260px;          /* одинаковая высота */
  background: #f8f8f8;
  overflow: hidden;
  border-radius: 16px;    /* как у card (у тебя card 16px) */
}

.card-media img{
  width: 100%;
  height: 100% !important;     /* КЛЮЧЕВО: больше не auto */
  object-fit: contain;
  object-position: center top;
  display: block;
}


.card{
  display: flex;
  flex-direction: column;
}

.card-body{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* цена всегда прижата вниз */
.card-price{
  margin-top: auto;
}

/* заголовок максимум 2 строки и одинаковая высота */
.card-title{
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;

  line-height: 1.25;
  min-height: calc(1.25em * 2);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
  line-clamp: 2;          /* ✅ стандартное свойство — VS Code перестанет ругаться */
}

/* FIX: в боковом меню пункты НЕ растягиваем */
.catalog-sidebar .tab,
.catalog-sidebar .accordion-toggle,
.catalog-sidebar .tab-sub{
  flex: 0 0 auto !important;
}

@media (max-width: 600px) {
  .catalog-sidebar .tab,
  .catalog-sidebar .accordion-toggle{
    min-height: 48px;
  }
}

@media (max-width: 600px) {
  .catalog-sidebar .tab,
  .catalog-sidebar .accordion-toggle,
  .catalog-sidebar .tab-sub{
    flex: 0 0 auto !important;
    width: 100%;
  }

  .catalog-sidebar .tab,
  .catalog-sidebar .accordion-toggle{
    min-height: 48px;
  }
}