/* Аркона — корзина и оформление заказа. Выверено по макетам (сетка 1920, контейнер 1280).
   Переиспользует токены (tokens.css), .container/.btn/.ph/.sticky-col (base.css) и .form__control (home.css). */

/* ---------- ОБЩЕЕ: шапка страницы магазина ---------- */
.shop-main { padding-block: 28px var(--sp-7); }

.shop-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-nav);
  color: var(--ink);
}
.shop-back svg { width: 6px; height: 10px; flex: none; }
.shop-back:hover { color: var(--ink-muted); }

.breadcrumbs { font-size: var(--fs-nav); color: var(--ink); }
.breadcrumbs a:hover { color: var(--ink-muted); }
.breadcrumbs__sep { color: var(--ink-soft); margin-inline: 6px; }

.shop-title {
  margin-top: 18px;
  font-size: var(--fs-h2);          /* 32px */
  font-weight: 700;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ---------- КАРТА ИТОГОВ (общая для корзины и оформления) ---------- */
.summary-card {
  background: var(--surface);
  border-radius: 20px;          /* в макете скругление 20.1 */
  padding: 27px 30px 29px;   /* в макете внутренние поля 27 сверху, 30 по бокам, 29 снизу */
  /* Замер тени по макету «корзина»: затемнение максимум 10% от фона, уходит на 15-18 px,
     снизу глубже, чем сверху. Радиус скругления блока 20. */
  box-shadow: 0 5px 18px rgba(44, 44, 44, .10);
}

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-nav);         /* 13px */
}
.summary-row + .summary-row { margin-top: 14px; }
.summary-row__val { font-weight: 600; white-space: nowrap; }

.summary__promo { margin-top: 43px; }   /* в макете от строки «Товары» до промокода 43 */
.summary__promo-input {
  width: 100%;
  height: 43px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--surface);
  font-size: var(--fs-input);
  color: var(--ink);
}
.summary__promo-input::placeholder { color: var(--ink-soft); }

.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;              /* в макете от промокода до «Итого» 48 */
}
.summary__total-label,
.summary__total-val {
  font-size: var(--fs-h3);          /* 24px */
  font-weight: 600;
  line-height: 1.1;
}
.summary__total-val { white-space: nowrap; }

.summary__submit { width: 100%; margin-top: 24px; }   /* в макете от «Итого» до кнопки 24 */

/* ==================== КОРЗИНА ==================== */
.cart-layout {
  display: grid;
  /* Замер макета «корзина»: товары 314..1094 (780), зазор 140, итоги 1234..1594 (360) */
  grid-template-columns: minmax(0, 780px) 360px;
  column-gap: 140px;
  row-gap: 40px;
  align-items: start;
  margin-top: 40px;
}

.cart-items { margin: 0; }

.cart-item {
  display: grid;
  grid-template-columns: 103px minmax(0, 1fr) auto auto;
  grid-template-areas: "media info qty price";
  align-items: center;
  column-gap: 24px;              /* в макете от фото (кончается 417) до названия (441) 24 */
  padding-bottom: 28px;
  border-bottom: 1px solid var(--placeholder);
}
.cart-item + .cart-item { padding-top: 28px; }

.cart-item__media {
  grid-area: media;
  width: 103px;
  height: 103px;
  border-radius: 0;            /* фото без скруглений */
}

.cart-item__info { grid-area: info; }
.cart-item__name { font-size: var(--fs-base); line-height: 1.4; }

.cart-item__actions {
  display: flex;
  align-items: center;
  /* в макете сердце на 441 (по левому краю названия), ведро на 490: между ними 30 */
  gap: 30px;
  margin-top: 22px;
  margin-left: -6px;             /* компенсируем внутренний отступ кнопки */
}
.cart-item__fav {
  display: inline-flex;
  color: var(--ink);
}
.cart-item__fav:hover { color: var(--ink-muted); }
.cart-item__remove {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  color: var(--ink-soft);
}
.cart-item__remove:hover { color: var(--ink); }
/* Размеры из макета: сердце 19.31 x 16.83, ведро 15.8 x 16.18, линия 1.13.
   overflow: visible обязателен: контур упирается в границы viewBox, а обводка рисуется
   по центру линии, поэтому её внешняя половина срезалась и ведро выглядело приплюснутым. */
.cart-item__fav svg { width: 19.31px; height: 16.83px; flex: none; overflow: visible; }
.cart-item__remove svg { width: 15.8px; height: 16.18px; flex: none; overflow: visible; }

.qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* только внутри корзины: на странице товара свой степпер по макету «товар1»,
   а этот файл грузится позже и раньше перебивал его размеры и скругление */
.woocommerce-cart-form .qty__btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #F0F0F0;
  border-radius: 6px;
  color: var(--ink);
  line-height: 1;
  transition: background-color .2s var(--ease);
}
.woocommerce-cart-form .qty__btn:hover { background: var(--line); }
.woocommerce-cart-form .qty__btn svg { width: 11px; height: 11px; }
.qty__val {
  min-width: 34px;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 500;
}
/* Числовое поле степпера в WooCommerce-шаблоне выглядит как обычная цифра */
.woocommerce-cart-form .qty__input {
  -moz-appearance: textfield;
  appearance: textfield;
  width: 50px;                  /* степпер в макете 110 = 30 + 50 + 30 */
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-item__price {
  grid-area: price;
  margin-left: 24px;             /* от степпера до цены в макете 48 = 24 общих + 24 */
  font-size: var(--fs-lead);        /* 19px */
  font-weight: 600;
  white-space: nowrap;
}

.cart-clear {
  margin-top: 28px;
  font-size: var(--fs-base);
  color: var(--ink-soft);
}
.cart-clear:hover { color: var(--ink); }

/* Пустая корзина */
.cart-empty-msg {
  margin-top: 40px;
  font-size: var(--fs-h3);          /* 24px */
  font-weight: 600;
}

/* ==================== ОФОРМЛЕНИЕ ЗАКАЗА ==================== */
.checkout-layout {
  display: grid;
  /* Замер макета «оформление заказа»: форма 314..1113 (798), блок итогов 1193..1594 (402) */
  grid-template-columns: minmax(0, 798px) 402px;
  column-gap: 80px;
  align-items: start;
  margin-top: 40px;
}

.co-block + .co-block { margin-top: 48px; }
.co-block__title {
  font-size: var(--fs-h3);          /* 24px, обычный регистр */
  font-weight: 600;
  line-height: var(--lh-tight);
}
.co-block__body { margin-top: 24px; }

/* Поля контактов — 2 колонки */
.co-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 30px;
}
.co-field--wide { grid-column: 1 / -1; }
.co-field__label {
  display: block;
  font-size: var(--fs-base);
  margin-bottom: 10px;
}
.co-req { color: var(--danger); }

/* Поля оформления ниже штатных 52px — по макету 46px */
.checkout-form .form__control { min-height: 46px; }
.checkout-form textarea.form__control {
  min-height: 108px;
  padding: 14px 18px;
}

/* Способы доставки */
.ship-methods { max-width: 440px; }
.ship-method {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: start;
  padding-block: 11px;
}
.ship-method__text {
  display: flex;
  flex-direction: column;
}
.ship-method__price {
  font-size: var(--fs-base);
  font-weight: 600;
  white-space: nowrap;
  padding-left: 24px;
}
.ship-method__label { font-size: var(--fs-base); }
.ship-method__desc {
  margin-top: 4px;
  font-size: var(--fs-nav);
  color: var(--ink-soft);
}

/* Радио-кнопка */
.co-radio {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid var(--ink-muted);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  transition: border-color .15s var(--ease);
}
.co-radio:checked { border-color: var(--ink); }
.co-radio:checked::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}

/* Способы оплаты */
.pay-methods { max-width: 440px; }
.pay-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 11px;
}
.pay-method__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
}
.sbp {
  display: inline-flex;
  gap: 1.5px;
  align-items: flex-end;
  height: 15px;
}
.sbp i { width: 2.5px; border-radius: 1px; }
.sbp i:nth-child(1) { height: 9px;  background: #1F5EA8; }
.sbp i:nth-child(2) { height: 14px; background: #C9257E; }
.sbp i:nth-child(3) { height: 11px; background: #58A618; }
.sbp i:nth-child(4) { height: 7px;  background: #F07E17; }

/* Правая колонка оформления */
.checkout-summary { align-self: start; }

.co-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  font-size: var(--fs-base);
  line-height: 1.35;
}
.co-check {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius-check);
  flex: none;
  cursor: pointer;
}
.co-check:checked { background: var(--ink); }
.co-check:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--surface);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.co-agree a { text-decoration: underline; text-underline-offset: 2px; }

.ship-note {
  margin-top: 20px;
  font-size: var(--fs-base);
  color: var(--ink);
}
.ship-note b { font-weight: 600; }

/* ==================== РЕКОМЕНДАЦИИ «Вам может понравиться» ==================== */
.upsell { margin-top: var(--sp-7); }
.upsell__title {
  font-size: var(--fs-lead);        /* 19px, обычный регистр */
  font-weight: 700;
}
.upsell__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 30px;
}
.product-card__media {
  aspect-ratio: 1 / 1;
  border-radius: 0;            /* фото без скруглений */
}
.product-card__name {
  margin-top: 16px;
  font-size: var(--fs-base);
  /* до двух строк, дальше многоточие; высота зарезервирована — цены на одном уровне */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.4em);
  line-height: 1.4;
}
.product-card__price {
  margin-top: 10px;
  font-size: var(--fs-lead);
  font-weight: 600;
}

/* ==================== АДАПТИВ ==================== */
@media (max-width: 1279px) {
  .cart-layout { column-gap: 56px; }
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 40px;
  }
}

/* Планшет: одна колонка, карта итогов ниже и не липкая */
@media (max-width: 899px) {
  .cart-layout,
  .checkout-layout { grid-template-columns: 1fr; row-gap: 32px; }
  .cart-aside .summary-card,
  .checkout-summary { max-width: 460px; }
  .upsell__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Телефон */
@media (max-width: 599px) {
  .shop-main { padding-block: 20px var(--sp-6); }
  .shop-title { margin-top: 14px; }

  /* Товары карточками в столбик */
  .cart-items { display: flex; flex-direction: column; gap: 14px; }
  .cart-item {
    grid-template-columns: 80px minmax(0, 1fr) auto;
    grid-template-areas:
      "media info  info"
      "media qty   price";
    align-items: center;
    column-gap: 14px;
    row-gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
  }
  .cart-item + .cart-item { padding-top: 14px; }
  .cart-item__media { width: 80px; height: 80px; align-self: start; }
  .cart-item__actions { margin-top: 14px; }
  .cart-item__price { justify-self: end; }

  /* Итоги — обычный блок на всю ширину */
  .cart-aside .summary-card,
  .checkout-summary { max-width: none; }

  /* Поля на всю ширину */
  .co-grid { grid-template-columns: 1fr; gap: 20px; }
  .ship-methods,
  .pay-methods { max-width: none; }
  .ship-method { grid-template-columns: 18px minmax(0, 1fr) auto; }

  .upsell__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .upsell { margin-top: var(--sp-6); }
}

@media (max-width: 400px) {
  .upsell__grid { gap: 12px; }
  .cart-item__actions { gap: 16px; }
}