/* ============================================================
   Дизайн корзины — аккуратные оверрайды стандартного шаблона
   bitrix:sale.basket.basket / bootstrap_v4 (TABLE-based layout).
   Подключается в header.php. Не правим kernel.
   ============================================================ */

/* ===== Заголовок страницы ===== */
.basket-page__title {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  line-height: 1.15;
  margin: var(--s-6) 0 var(--s-5);
}

/* ===== Главный контейнер ===== */
.bx-basket {
  font-family: var(--ff-base) !important;
  color: var(--c-text);
  padding-block: 0 var(--s-9);
}

/* Алёрты — мягкая стилизация */
.bx-basket .alert {
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
}
.bx-basket .alert-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

/* ============================================================
   ЧЕКАУТ-БЛОК (Итого + кнопка оформить).
   Структура: .basket-checkout-container > .basket-checkout-section >
   .basket-checkout-section-inner (flex justify-between) >
   [.basket-checkout-block.basket-checkout-block-total]
   [.basket-checkout-block.basket-checkout-block-total-price (содержит цену + кнопку)]
   ============================================================ */
/* ВАЖНО: bitrix:sale.basket.basket рендерит структуру
   #basket-root > div.row > div.col > .basket-checkout-container/.basket-items-list-wrapper.
   overrides.css делает все .row внутри main display:flex, а .col (без дефиса)
   под селектор [class*="col-"] не попадает — остаётся display:block и
   как flex-item с дефолтным flex:0 1 auto сжимается под content-size.
   Возвращаем .col к нормальному «full-width block». */
#basket-root .row {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
#basket-root .row > .col {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  padding: 0 !important;
}

/* Внешний контейнер от Bitrix имеет display:flex, border, padding и
   фоновую заливку. Полностью обнуляем — белая «карточка» рисуется на
   .basket-checkout-section, а контейнер должен растягиваться на всю ширину. */
.basket-checkout-container {
  display: block !important;
  width: 100% !important;
  margin-bottom: var(--s-5);
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.basket-checkout-section {
  display: block !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-7);
  box-shadow: var(--sh-card);
}

.basket-checkout-section-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start !important;
}

/* «Итого:» + «Сумма НДС» — текстовый блок слева */
.basket-checkout-block-total {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-right: var(--s-2);
}

/* Цена прямо рядом с «Итого:» — большая, тёмная */
.basket-checkout-block.basket-checkout-block-total-price {
  display: inline-flex;
  align-items: baseline;
}

/* Кнопка «Оформить заказ» всегда улетает в правый край */
.basket-checkout-block.basket-checkout-block-btn {
  margin-left: auto !important;
}

/* Внутренние блоки чекаута — НЕ карточки, прозрачные */
.basket-checkout-block {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.basket-checkout-block-total-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.basket-checkout-block-total-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin: 0;
}
.basket-checkout-block-total-description {
  /* «Сумма НДС: N ₽» — не показываем (включён в цену). */
  display: none !important;
}

.basket-checkout-block-total-price {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.basket-checkout-block-total-price-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.basket-coupon-block-total-price-current,
.basket-checkout-block-total-price-inner > *:first-child {
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.basket-coupon-block-total-price-old {
  font-size: var(--fs-sm);
  color: var(--c-text-subtle);
  text-decoration: line-through;
}
.basket-coupon-block-total-price-difference {
  font-size: var(--fs-xs);
  color: var(--c-success);
  font-weight: var(--fw-semibold);
}

/* Кнопка «Оформить заказ».
   Структура: <div class="basket-checkout-block basket-checkout-block-btn">
                <button class="btn btn-lg btn-primary basket-btn-checkout">...</button>
              </div>
   Обёртку оставляем прозрачной, стилизуем только сам <button>. */
.basket-checkout-block.basket-checkout-block-btn {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
}
.bx-basket .basket-btn-checkout,
.bx-basket button.basket-btn-checkout,
.bx-basket .btn.basket-btn-checkout {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px;
  height: 52px;
  padding: 0 var(--s-7) !important;
  background: var(--c-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-semibold) !important;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
  font-family: var(--ff-base);
  box-shadow: none !important;
  line-height: 1;
}
.bx-basket .basket-btn-checkout:hover,
.bx-basket button.basket-btn-checkout:hover {
  background: var(--c-primary-hover) !important;
  color: #fff !important;
}
.bx-basket .basket-btn-checkout:focus,
.bx-basket .basket-btn-checkout:active {
  background: var(--c-primary-active, var(--c-primary-hover)) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ============================================================
   ШАПКА СО СПИСКОМ ТОВАРОВ (заголовок + фильтр + табы) — СКРЫТА.
   У нас один список товаров без фильтрации и без вкладок, поэтому
   и поле «Фильтр», и счётчик «В корзине N товаров» бессмысленны.
   ============================================================ */
.basket-items-list-header {
  display: none !important;
}

/* Старая стилизация (на случай если шапку вернут) — оставлена ниже,
   но не активируется пока header скрыт. */
.basket-items-list-header--visible {
  display: block !important;
  background: transparent;
  padding: 0;
  margin-bottom: var(--s-3);
}

.basket-items-list-header-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  margin: 0 0 var(--s-3);
  letter-spacing: var(--ls-tight);
}

/* Поле поиска по корзине + счётчик «В корзине N товаров» */
.basket-items-list-header > .row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin: 0 !important;
  padding: 0;
}
.basket-items-list-header > .row > [class*="col-"] {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  width: auto !important;
  max-width: none !important;
}

.basket-items-search-field-container {
  flex: 1 1 280px;
  max-width: 320px !important;
}
.basket-items-search-field {
  display: block;
  width: 100%;
  height: 42px;
  padding-inline: var(--s-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: #fff;
  font-size: var(--fs-sm);
  font-family: var(--ff-base);
}
.basket-items-search-field:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(27, 63, 160, 0.15);
}
.basket-items-search-clear-btn {
  background: transparent;
  border: 0;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 4px 8px;
}

/* Табы фильтра / счётчик «В корзине N товаров».
   У нас по факту только один счётчик, делаем его нейтральным — серый pill
   с тёмным текстом, без агрессивного синего фона. */
.basket-items-list-header-filter {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.basket-items-list-header-filter-item {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--s-4);
  background: var(--c-bg-soft);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.basket-items-list-header-filter-item:hover {
  background: #e8eef7;
  color: var(--c-primary);
}
.basket-items-list-header-filter-item.active {
  background: #e8eef7;
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

/* Поиск ничего не нашёл */
.basket-search-not-found {
  text-align: center;
  padding: var(--s-9) var(--s-5);
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
}
.basket-search-not-found-text {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  margin-top: var(--s-3);
}

/* ============================================================
   ТАБЛИЦА ТОВАРОВ
   ============================================================ */
.basket-items-list-wrapper {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  max-height: none !important;
}

.basket-items-list-table {
  width: 100%;
  border-collapse: collapse;
}

/* Каждая строка — товар */
tr.basket-items-list-item-container {
  background: #fff;
  border-bottom: 1px solid var(--c-border-soft);
  transition: background var(--dur-fast) var(--ease);
}
tr.basket-items-list-item-container:last-child {
  border-bottom: 0;
}
tr.basket-items-list-item-container:hover {
  background: var(--c-bg-soft);
}

tr.basket-items-list-item-container > td {
  padding: var(--s-4) var(--s-3);
  vertical-align: middle;
}
tr.basket-items-list-item-container > td:first-child {
  padding-left: var(--s-5);
}
tr.basket-items-list-item-container > td:last-child {
  padding-right: var(--s-5);
}

/* TD: товар (фото + название + свойства) */
.basket-items-list-item-descriptions {
  width: auto;
}
.basket-items-list-item-descriptions-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* Изображение товара */
.basket-item-block-image {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.basket-item-image-link {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.basket-item-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Название */
.basket-item-block-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
}
.basket-item-info-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  line-height: var(--lh-snug);
  margin: 0;
}
.basket-item-info-name-link {
  color: var(--c-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.basket-item-info-name-link:hover {
  color: var(--c-primary);
}

.basket-item-block-properties {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.basket-item-property-name {
  font-weight: var(--fw-medium);
  color: var(--c-text-subtle);
}

/* TD: цена за 1 шт (.basket-items-list-item-price-for-one)
   и TD: сумма по позиции (.basket-items-list-item-price без -for-one).
   Цена за штуку — мелкая и приглушённая, итог — крупный и по центру колонки. */
.basket-item-price-current,
.basket-item-price-current-text {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  white-space: nowrap;
}
/* Цена за штуку — мельче и тише */
.basket-items-list-item-price-for-one .basket-item-price-current,
.basket-items-list-item-price-for-one .basket-item-price-current-text {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}
/* Итог по позиции — крупный, тёмный, по центру колонки */
.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) {
  text-align: center !important;
  vertical-align: middle !important;
}
.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) .basket-item-block-price {
  text-align: center !important;
  padding: 0 !important;
}
.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) .basket-item-price-current,
.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) .basket-item-price-current-text {
  font-size: var(--fs-2xl) !important;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  text-align: center !important;
  display: block;
  line-height: 1.2 !important;
}
/* Подпись «цена за 1 шт» — мельче, без курсива (Bitrix задаёт italic) */
.basket-item-price-title,
.basket-items-list-item-descriptions + td .basket-item-price-title {
  font-size: 11px !important;
  color: var(--c-text-subtle);
  margin-top: 2px;
  font-weight: var(--fw-normal);
  font-style: normal !important;
  letter-spacing: 0;
}
.basket-item-price-old,
.basket-item-price-old-text {
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  text-decoration: line-through;
}
.basket-item-price-difference {
  font-size: var(--fs-xs);
  color: var(--c-success);
  font-weight: var(--fw-semibold);
}

/* TD: количество (минус-инпут-плюс) — центрируем в колонке */
td.basket-items-list-item-amount {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Единый «pill»-стиль: внешняя обёртка .basket-item-block-amount содержит
   [.btn-minus] [.filed-block > input] [.btn-plus] и подпись «шт» под ними.
   Рисуем рамку на .basket-item-block-amount, а .basket-item-amount-filed-block
   делаем прозрачной обёрткой без рамки. */
.basket-item-block-amount {
  display: inline-flex !important;
  align-items: center;
  background: #fff !important;
  border: 1px solid var(--c-border-strong) !important;
  border-radius: 999px !important;
  height: 40px;
  transition: border-color var(--dur-fast) var(--ease);
  padding: 0 !important;
  position: relative;
  overflow: visible;
}
.basket-item-block-amount:hover,
.basket-item-block-amount:focus-within {
  border-color: var(--c-primary) !important;
}
.basket-item-amount-filed-block {
  display: inline-flex !important;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: 100%;
}
.basket-item-amount-btn-plus,
.basket-item-amount-btn-minus {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  cursor: pointer;
  color: var(--c-text-muted);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  transition: color var(--dur-fast) var(--ease);
  border-radius: 0 !important;
}
.basket-item-amount-btn-plus:hover,
.basket-item-amount-btn-minus:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--c-primary);
}
/* Bitrix рисует «−» и «+» через :before/:after с фиксированным цветом #979797
   и затемняет до #535353 на hover. Перекрашиваем в наши токены. */
.basket-item-amount-btn-minus::after,
.basket-item-amount-btn-plus::before,
.basket-item-amount-btn-plus::after {
  background-color: var(--c-text-muted) !important;
  transition: background-color var(--dur-fast) var(--ease) !important;
}
.basket-item-amount-btn-minus:hover::after,
.basket-item-amount-btn-plus:hover::before,
.basket-item-amount-btn-plus:hover::after {
  background-color: var(--c-primary) !important;
}
.basket-item-amount-filed,
.basket-item-block-amount.disabled .basket-item-amount-filed:hover {
  width: 48px !important;
  height: 38px !important;
  text-align: center !important;
  border: 0 !important;
  background: transparent !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--c-text) !important;
  font-family: var(--ff-base) !important;
  padding: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.basket-item-amount-filed:focus,
.basket-item-amount-filed:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Подпись «шт» — позиционируем абсолютно под pill-формой счётчика.
   .basket-item-block-amount имеет position:relative, overflow:visible. */
.basket-item-amount-field-description {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  display: block !important;
  font-size: 11px !important;
  color: var(--c-text-subtle);
  text-align: center;
  font-style: normal !important;
  font-family: var(--ff-base) !important;
  line-height: 1.2 !important;
  padding: 0 !important;
}

/* TD: удалить (×).
   Bitrix-bootstrap_v4 рисует крестик двумя псевдо-элементами с
   красным фоном (#d0021b). Перебиваем — серый по умолчанию, красный на hover. */
.basket-items-list-item-clear-btn,
.basket-item-actions-remove {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

/* Bitrix скрывает крестик до hover через .basket-item-block-actions{opacity:0}.
   Показываем его всегда. */
.basket-item-block-actions {
  opacity: 1 !important;
}

/* Мобильный inline-крестик (<span class="basket-item-actions-remove d-block d-md-none">)
   внутри блока с названием — убираем. Используем единственный × в колонке remove. */
.basket-items-list-item-descriptions .basket-item-actions-remove {
  display: none !important;
}

/* Колонку с × показываем на всех экранах (Bitrix прячет её на мобильной
   через d-none d-md-block — это нужно отменить, иначе на телефоне удалить нечем).
   Сам крестик выравниваем по центру колонки и по вертикали с остальными ячейками. */
td.basket-items-list-item-remove {
  display: table-cell !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: var(--s-4) var(--s-3) !important;
}
td.basket-items-list-item-remove .basket-item-block-actions {
  display: inline-flex !important;
  padding: 0 !important;
}
.basket-item-actions-remove::before,
.basket-item-actions-remove::after,
.basket-items-list-item-clear-btn::before,
.basket-items-list-item-clear-btn::after {
  background: var(--c-text-subtle) !important;
  height: 12px !important;
  width: 2px !important;
  transition: background var(--dur-fast) var(--ease) !important;
}
.basket-items-list-item-clear-btn:hover,
.basket-item-actions-remove:hover {
  background: #fef2f2;
}
.basket-item-actions-remove:hover::before,
.basket-item-actions-remove:hover::after,
.basket-items-list-item-clear-btn:hover::before,
.basket-items-list-item-clear-btn:hover::after {
  background: var(--c-danger) !important;
}

/* «Очистить корзину» (кнопка под таблицей) */
.basket-clear {
  background: transparent;
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-muted);
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-weight: var(--fw-medium);
  margin-top: var(--s-3);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  font-family: var(--ff-base);
}
.basket-clear:hover {
  border-color: var(--c-danger);
  color: var(--c-danger);
}

/* ===== Купон-блок — должен быть скрыт через HIDE_COUPON, страхуем CSS ===== */
.basket-coupon-section,
.basket-coupon-alert-section,
.basket-coupon-block-field,
.basket-coupon-text {
  display: none !important;
}

/* ============================================================
   EMPTY CART
   ============================================================ */
.bx-sbb-empty-cart-container {
  text-align: center;
  padding: var(--s-10) var(--s-5);
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  margin: var(--s-5) 0;
}
.bx-sbb-empty-cart-image {
  width: 100px;
  height: 100px;
  margin: 0 auto var(--s-5);
  background: var(--c-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%2393A1B5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.bx-sbb-empty-cart-image img { display: none; }
.bx-sbb-empty-cart-text {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  margin-bottom: var(--s-3);
  letter-spacing: var(--ls-tight);
}
.bx-sbb-empty-cart-desc {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
}
.bx-sbb-empty-cart-desc a {
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.bx-sbb-empty-cart-desc a:hover { text-decoration: underline; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 991px) {
  .basket-checkout-section { padding: var(--s-5); }
  .basket-checkout-section-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
  }
  .basket-checkout-block-total-price {
    justify-content: space-between;
    width: 100%;
  }
  .basket-checkout-block-btn,
  .basket-btn-checkout {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  /* ⚠ Раскладку строки-товара на мобильной задаёт overrides.css — он грузится
     ПОСЛЕ bootstrap_v4-CSS ядра (page_*.css бандл), который своими !important
     правилами (flex-direction:column, img width:100%, justify-content:center)
     перебивает любые правила отсюда. Здесь — только чекаут и шапка. */
  .basket-checkout-section { padding: var(--s-4); }
  .basket-checkout-block-total-price-inner > *:first-child { font-size: 26px; }
  .basket-items-list-header > .row { flex-direction: column; align-items: stretch; }
  .basket-items-search-field-container { max-width: 100% !important; }
}