/* ===========================================================================
   theidol.ru — фронт-ревью мобильных экранов (Claude Design), СКОУП: §1+§5.
   Additive-слой поверх tabbar.css + theme-tweaks.css + account.css.
   ВНЕДРЕНО ТОЛЬКО: §0(безопасное подмножество) + §1 (шапка/таб-бар) + §5 (ЛК).
   НЕ внедрено (вне скоупа — каталог/PDP/корзина/checkout не трогаем):
   §2 PDP, §3 корзина, §4 checkout, §6 метка размера, §0.5 глоб.16px, §0.6 View Transitions.
   Дизайн-язык не меняем: цвета из var(--idol-*) с фолбэками = наша палитра.
   =========================================================================== */

:root {
  --idol-ink:        var(--idol-color-ink, #282828);
  --idol-ink-2:      var(--idol-color-ink-2, #565656);
  --idol-ink-3:      var(--idol-color-ink-3, #8b8b8b);
  --idol-line:       var(--idol-color-line, #e2e2e2);
  --idol-line-soft:  var(--idol-color-line-soft, #f0efed);
  --idol-surface:    var(--idol-color-surface, #ffffff);
  --idol-surface-2:  var(--idol-color-surface-2, #f7f6f4);
  --idol-danger:     var(--idol-color-danger, #c2334d);
  --idol-success:    var(--idol-color-success, #1f6b4f);

  --idol-tabbar-h:   56px;
  --idol-safe-b:     env(safe-area-inset-bottom, 0px);
  --idol-tabbar-space: calc(var(--idol-tabbar-h) + var(--idol-safe-b));
  --idol-tap:        44px;
  --idol-ease:       cubic-bezier(.2,.6,.2,1);
}

/* ------ 0. ГЛОБАЛЬНОЕ (безопасное подмножество — без визуальных изменений) --- */

/* 0.1 Ни одна страница не едет по горизонтали (не ломает sticky, как overflow:hidden). */
:where(html) { overflow-x: clip; }
:where(img, video, svg, table, pre) { max-width: 100%; }

/* 0.2 Фокус виден всегда и одинаково. Мышью — не мешает. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--idol-ink);
  outline-offset: 2px;
  border-radius: 1px;
}

/* 0.3 Анимации уважают настройку ОС. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 0.4 На тач-устройствах hover не «залипает». */
@media (hover: none) {
  :where(a, button):active { opacity: .72; transition: opacity 120ms var(--idol-ease); }
}

/* 0.5 Утилита «скрыто, но доступно скринридеру» — нужна разметке §1/§5. */
.idol-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   1. ЭКРАН 01 — ШАПКА + НИЖНИЙ ТАБ-БАР
   --------------------------------------------------------------------------- */

@media (max-width: 1023px) {

  /* 1.1 Дедупликация: бар несёт Главную/Каталог/Избранное/Корзину/Профиль —
     из шапки уходят гамбургер, ♡, 🛍, 👤 и кнопка-лупа. Привязка к
     :has(.idol-tabbar) = тот же килсвитч (при idol_tabbar off шапка вернётся).
     Ничего не удаляем из PHP. !important — тема-бандл держит эти узлы своей
     специфичностью (шторка-поиск, флекс шапки); для пиксель-в-пиксель бьём явно. */
  body:has(.idol-tabbar) .header__line[data-position="second"] > .hamburger,
  body.idol-has-tabbar .header__line[data-position="second"] > .hamburger,
  body:has(.idol-tabbar) .header__line[data-position="second"] .store-elems,
  body.idol-has-tabbar .header__line[data-position="second"] .store-elems,
  body:has(.idol-tabbar) .header__line[data-position="second"] > .search-opener,
  body.idol-has-tabbar .header__line[data-position="second"] > .search-opener,
  body:has(.idol-tabbar) .header__line[data-position="second"] > .header__main-nav,
  body.idol-has-tabbar .header__line[data-position="second"] > .header__main-nav {
    display: none !important;
  }

  /* 1.2 Шапка = лого сверху + поиск во всю ширину снизу. Тема даёт flex+gap:0 —
     переопределяем на grid в одну колонку. */
  body:has(.idol-tabbar) .header__line[data-position="second"],
  body.idol-has-tabbar .header__line[data-position="second"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 10px !important;
    gap: 10px 0 !important;
    align-items: center;
    padding-block: 10px;
  }
  body:has(.idol-tabbar) .header__line[data-position="second"] .logo,
  body.idol-has-tabbar .header__line[data-position="second"] .logo {
    justify-self: start;
    order: 0;
  }

  /* 1.3 Поиск — ПИКСЕЛЬ-В-ПИКСЕЛЬ по макету (§3a): бокс h44, border 1px #C4C4C4,
     иконка 16×16 #8B8B8B слева, плейсхолдер Inter 300 #8B8B8B. Тема ставит
     width/max-width:126px + шторку — переопределяем всё. */
  body:has(.idol-tabbar) .header__line[data-position="second"] .search,
  body.idol-has-tabbar .header__line[data-position="second"] .search {
    position: relative !important;   /* контекст для иконки-::after (была static → иконка убегала к логотипу) */
    display: flex !important;
    align-items: center !important;
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid #C4C4C4 !important;
    border-radius: 0 !important;
    background: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  /* иконка темы (.search:after, mask) → 16px #8B8B8B, слева 14px, по центру по вертикали */
  body:has(.idol-tabbar) .header__line[data-position="second"] .search::after,
  body.idol-has-tabbar .header__line[data-position="second"] .search::after {
    left: 14px !important;
    top: 14px !important;
    width: 16px !important;
    height: 16px !important;
    background-color: #8B8B8B !important;
    -webkit-mask-size: 16px !important;
            mask-size: 16px !important;
  }
  body:has(.idol-tabbar) .header__line[data-position="second"] .search__close,
  body.idol-has-tabbar .header__line[data-position="second"] .search__close {
    display: none !important;
  }
  body:has(.idol-tabbar) .header__line[data-position="second"] .search__input,
  body.idol-has-tabbar .header__line[data-position="second"] .search__input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px 0 40px !important;
    border: 0 !important;
    background: transparent !important;
    font-family: Inter, sans-serif !important;
    font-weight: 300 !important;
    font-size: 16px !important;   /* дизайн 15px; 16 — против iOS-зума, разница 1px незаметна */
    color: #282828 !important;
  }
  body:has(.idol-tabbar) .header__line[data-position="second"] .search__input::placeholder {
    color: #8B8B8B !important;
    font-weight: 300 !important;
    opacity: 1 !important;
  }

  /* 1.4 Контент резервирует место под фиксированный бар. */
  :where(body:has(.idol-tabbar), body.idol-has-tabbar) {
    padding-bottom: var(--idol-tabbar-space);
  }

  /* 1.5 Сам бар. height явно = высота дизайна 56 (tabbar.css форсит 60 — бьём). */
  .idol-tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    height: calc(var(--idol-tabbar-h) + var(--idol-safe-b));
    background: var(--idol-surface);
    border-top: 1px solid var(--idol-line);
    padding-bottom: var(--idol-safe-b);
  }
  .idol-tabbar__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .idol-tabbar__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: var(--idol-tabbar-h);
    padding: 6px 2px;
    color: var(--idol-ink-3);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* 1.6 Единый вес иконок: все контурные, stroke 1.6, 24×24. */
  .idol-tabbar__ic {
    width: 24px;
    height: 24px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .idol-tabbar__link .icons { font-size: 22px; line-height: 1; }

  /* 1.7 Подпись обязательна (не icon-only). */
  .idol-tabbar__label {
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: .2px;
    white-space: nowrap;
  }

  /* 1.8 Активное состояние: цвет + вес + верхняя засечка. */
  .idol-tabbar__item.is-active > .idol-tabbar__link,
  .idol-tabbar__link[aria-current="page"] {
    color: var(--idol-ink);
    font-weight: 500;
  }
  .idol-tabbar__item.is-active > .idol-tabbar__link::before,
  .idol-tabbar__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset: -1px 12px auto 12px;
    height: 2px;
    background: currentColor;
  }

  /* 1.9 Счётчики: при нуле не показываем; значение приходит клиентом. */
  .idol-tabbar__badge {
    position: absolute;
    top: 4px;
    left: 50%;
    translate: 2px 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    background: var(--idol-ink);
    color: var(--idol-surface);
    font-size: 10px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    border-radius: 8px;
  }
  .idol-tabbar__badge[data-count="0"],
  .idol-tabbar__badge:empty { display: none; }

  /* 1.10 Фокус внутри бара — рамка по ячейке. */
  .idol-tabbar__link:focus-visible { outline-offset: -3px; }
}

/* 1.11 ≥1024 бара нет и он не резервирует отступ. */
@media (min-width: 1024px) {
  .idol-tabbar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   5. ЭКРАН 05 — ЛИЧНЫЙ КАБИНЕТ
   --------------------------------------------------------------------------- */

/* 5.1 Под-нав = ряд чипсов со скролл-снапом + краевой маской-фейдом (аффорданс). */
@media (max-width: 1023px) {
  .woocommerce-MyAccount-navigation { position: relative; }
  .woocommerce-MyAccount-navigation > ul {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0 16px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    /* фейд ТОЛЬКО справа (по макету §3e): слева обрыва нет */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
  .woocommerce-MyAccount-navigation > ul::-webkit-scrollbar { display: none; }
  .woocommerce .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link,
  .woocommerce-MyAccount-navigation ul li {
    flex: none !important;
    width: auto !important;
    scroll-snap-align: start;
  }
  /* спецификость .woocommerce …ul li a (0,1,3) бьёт account.css li a (0,1,2) —
     макет Claude Design = прямоугольные чипсы (рамка, БЕЗ радиуса). */
  .woocommerce .woocommerce-MyAccount-navigation ul li > a,
  .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--idol-tap);
    padding: 0 14px !important;
    border: 1px solid var(--idol-line) !important;
    border-radius: 0 !important;
    background: var(--idol-surface);
    color: var(--idol-ink-2);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
  }
  .woocommerce .woocommerce-MyAccount-navigation ul li.is-active > a,
  .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active > a,
  .woocommerce-MyAccount-navigation ul li > a[aria-current="page"] {
    border-color: var(--idol-ink) !important;
    background: var(--idol-ink) !important;
    color: var(--idol-surface) !important;
    font-weight: 500;
  }
  .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout > a {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--idol-ink-3) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* 5.2 Хаб: стат-карты — ПИКСЕЛЬ по §3e: 3 равные колонки, gap 1px (=разделители),
   карта padding 14/12, лейбл Inter 300 10px .5px #8B8B8B, значение Manrope 600 22px. */
.lk-dash__stats {
  display: grid !important;
  grid-auto-flow: column !important;         /* N равных колонок по числу карт (2 или 3), заполняют ряд */
  grid-auto-columns: minmax(0, 1fr) !important;
  grid-template-columns: none !important;
  gap: 1px;
  background: var(--idol-line);
  border: 1px solid var(--idol-line);
}
.lk-dash__stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;                 /* сжимаемость грид-элемента (иначе min-content держит 243px) */
  padding: 14px 12px;
  background: var(--idol-surface);
  color: inherit;
  text-decoration: none;
}
.lk-dash__stat-lbl { font-family: Inter, sans-serif; font-weight: 300; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--idol-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-dash__stat-val { font-family: Manrope, sans-serif; font-weight: 600; font-size: 22px; line-height: 1; color: var(--idol-ink); font-variant-numeric: tabular-nums; }
.lk-dash__stat-val--pts { color: var(--idol-success); }
.lk-dash__stat-sub { display: none; }   /* в макете стат-карта = лейбл + значение, без суб-текста */

.lk-dash__block { display: grid; gap: 12px; margin-top: 28px; }
.lk-dash__h { font-size: 18px; font-weight: 600; }
.lk-dash__actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;   /* одна колонка, карты во всю ширину (без переполнения) */
  gap: 10px;
}
.lk-dash__act {
  display: grid;
  gap: 4px;
  min-height: var(--idol-tap);
  padding: 16px;
  border: 1px solid var(--idol-line);
  color: inherit;
  text-decoration: none;
}
.lk-dash__act--accent { border-color: var(--idol-ink); }
.lk-dash__act-t { font-size: 14px; font-weight: 500; }
.lk-dash__act-s { font-size: 12px; line-height: 1.4; color: var(--idol-ink-3); text-wrap: pretty; }

/* 5.2b Заголовок кабинета + контейнер — ПИКСЕЛЬ §3e. Убираем серую полосу
   (account.css --lk-page фон) → белый; eyebrow/h1 к точным значениям макета. */
@media (max-width: 1023px) {
  .page:has(.woocommerce-MyAccount-navigation),
  .editor-content:has(.woocommerce-MyAccount-navigation),
  .woocommerce:has(> .woocommerce-MyAccount-navigation) { background: #fff !important; }
  /* КОРЕНЬ переполнения: ряд из 8 чипсов (flex:none) даёт min-content ~767px и распирал
     весь аккаунт-контейнер. Ограничиваем контейнер и навигацию вьюпортом → чипсы скроллятся. */
  .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    padding: 0 0 24px !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip;
  }
  .woocommerce-MyAccount-content { max-width: 100vw !important; min-width: 0 !important; box-sizing: border-box; }
  .woocommerce-MyAccount-navigation { max-width: 100vw !important; min-width: 0 !important; box-sizing: border-box; }
  .lk-head { padding: 14px 16px 4px !important; margin: 0 !important; border-bottom: 0 !important; gap: 4px !important; }
  .lk-eyebrow { font-family: Inter, sans-serif !important; font-weight: 300 !important; font-size: 10px !important; letter-spacing: .8px !important; text-transform: uppercase !important; color: var(--idol-ink-3) !important; }
  .lk-h1 { font-family: Manrope, sans-serif !important; font-weight: 600 !important; font-size: 22px !important; line-height: 1.12 !important; color: var(--idol-ink) !important; }
  /* контент-секции дашборда получают боковой отступ 16 (контейнер теперь без него) */
  .lk-dash, .lk-scope.lk-dash { padding: 0 16px; }
  .lk-dash__stats { margin: 0; }
  .woocommerce-MyAccount-content { margin-top: 12px; }
}

/* 5.3 Таблицы («Бонусы»/«Заказы») на узком экране — в карточки (data-label ставит шаблон). */
@media (max-width: 719px) {
  .lk-scope table:where(.lk-table, .woocommerce-orders-table, .shop_table) {
    display: grid;
    gap: 10px;
    border: 0;
  }
  .lk-scope table:where(.lk-table, .woocommerce-orders-table, .shop_table) thead { display: none; }
  .lk-scope table:where(.lk-table, .woocommerce-orders-table, .shop_table) tbody,
  .lk-scope table:where(.lk-table, .woocommerce-orders-table, .shop_table) tr {
    display: grid;
    gap: 6px;
  }
  .lk-scope table:where(.lk-table, .woocommerce-orders-table, .shop_table) tr {
    padding: 14px;
    border: 1px solid var(--idol-line);
  }
  .lk-scope table:where(.lk-table, .woocommerce-orders-table, .shop_table) td {
    display: grid;
    grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
    gap: 10px;
    padding: 0;
    border: 0;
    font-size: 13px;
  }
  .lk-scope table td[data-label]::before {
    content: attr(data-label);
    color: var(--idol-ink-3);
    font-size: 12px;
  }
  .lk-scope .woocommerce-orders-table__cell-order-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .lk-scope .woocommerce-orders-table__cell-order-actions .button {
    min-height: var(--idol-tap);
  }
}
.lk-scope .idol-tablewrap { overflow-x: auto; overscroll-behavior-x: contain; }

/* 5.4 Статус заказа — иконка + текст, цвет усиливает. */
.lk-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.lk-status svg { width: 13px; height: 13px; flex: none; }
.lk-status[data-state="pending"]    { background: #f6e7c4; color: var(--idol-ink); }
.lk-status[data-state="processing"] { background: #f6e7c4; color: var(--idol-ink); }
.lk-status[data-state="shipped"]    { background: #2f5fa8; color: #fff; }
.lk-status[data-state="completed"]  { background: var(--idol-success); color: #fff; }
.lk-status[data-state="cancelled"]  { background: #ededed; color: var(--idol-ink-2); }

/* 5.5 WooCommerce-нотисы приводим к .lk-note. */
.lk-scope :where(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.woocommerce-MyAccount-content :where(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.lk-note {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--idol-line);
  background: var(--idol-surface-2);
  color: var(--idol-ink);
  font-size: 13px;
  line-height: 1.5;
  list-style: none;
}
.lk-scope .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-message,
.lk-note[data-type="success"] { border-color: var(--idol-success); background: #f3f8f5; color: var(--idol-success); }
.lk-scope .woocommerce-error, .woocommerce-MyAccount-content .woocommerce-error,
.lk-note[data-type="error"]   { border-color: var(--idol-danger); background: #fdf4f5; color: var(--idol-danger); }
.lk-scope :where(.woocommerce-message, .woocommerce-info) .button {
  justify-self: start;
  min-height: var(--idol-tap);
}
.lk-scope :where(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { content: none; }

/* 5.6 Формы кабинета (Профиль / Адреса) — та же система, что checkout.
   Скоуп и на .lk-scope, и на .woocommerce-MyAccount-content (сырой edit-address
   стилизуется без обёртки lk-scope — не форкаем WC-шаблон my-account.php). */
.lk-scope :where(.woocommerce-form-row, .form-row),
.woocommerce-MyAccount-content :where(.woocommerce-form-row, .form-row) {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  float: none;
  width: auto;
}
.lk-scope :where(.woocommerce-form-row, .form-row) label,
.woocommerce-MyAccount-content :where(.woocommerce-form-row, .form-row) label {
  font-size: 13px;
  color: var(--idol-ink-2);
}
.lk-scope :where(.input-text, select),
.woocommerce-MyAccount-content :where(.input-text, select) {
  min-height: 48px;
  padding: 12px 14px;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--idol-line);
  background: var(--idol-surface);
  font: inherit;
  font-size: max(16px, 1em);
}
.lk-scope :where(.input-text):focus,
.woocommerce-MyAccount-content :where(.input-text):focus { border-color: var(--idol-ink); outline: none; }
.woocommerce-MyAccount-content fieldset { margin: 24px 0 0; padding: 0; border: 0; }
.woocommerce-MyAccount-content legend { padding: 0 0 12px; font-size: 16px; font-weight: 600; }
.lk-scope :where(.woocommerce-Button, .button)[type="submit"],
.woocommerce-MyAccount-content :where(.woocommerce-Button, .button)[type="submit"] {
  min-height: 48px;
  padding-inline: 24px;
}
@media (min-width: 720px) {
  .woocommerce-MyAccount-content .woocommerce-address-fields,
  .woocommerce-MyAccount-content form.edit-account { max-width: 560px; }
}

/* Пустое состояние (общая разметка .idol-empty — используется в §5 Адреса/Избранное). */
.idol-empty {
  display: grid;
  justify-items: start;
  gap: 14px;
  max-width: 46ch;
  padding: 32px 16px;
}
.idol-empty__ic {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--idol-line);
  color: var(--idol-ink-3);
}
.idol-empty__t { font-size: 20px; font-weight: 600; }
.idol-empty__s { font-size: 14px; line-height: 1.5; color: var(--idol-ink-2); text-wrap: pretty; }
.idol-empty .btn { min-height: 48px; }

/* ===========================================================================
   3. КОРЗИНА (§3c) — адаптив: позиции-карточки, кол-во, sticky-итоги над баром.
   Бар НА корзине есть → sticky считаем от --idol-tabbar-space.
   =========================================================================== */
@media (max-width: 1023px) {

  /* 3.1 Позиция = карточка: фото | текст | удалить */
  .preview-cart-product {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) var(--idol-tap);
    gap: 12px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid var(--idol-line-soft);
  }
  .preview-cart-product__img { grid-column: 1; }
  .preview-cart-product__img-src {
    width: 100%; aspect-ratio: 3 / 4; height: auto;
    object-fit: cover; background: var(--idol-surface-2);
  }
  .preview-cart-product__main { grid-column: 2; display: grid; gap: 8px; min-width: 0; }
  .preview-cart-product__main-info-title { display: block; font-size: 14px; line-height: 1.35; text-wrap: pretty; }
  .preview-cart-product__main-info-meta,
  .preview-cart-product .product-attrs { font-size: 12px; color: var(--idol-ink-3); }
  .preview-cart-product__main-info-price { font-size: 15px; font-weight: 500; }

  /* 3.2 Удалить — тап-зона 44px, свой столбец */
  .cart-remove {
    grid-column: 3;
    display: grid; place-items: center;
    min-width: var(--idol-tap); min-height: var(--idol-tap);
    color: var(--idol-ink-3);
  }

  /* 3.3 Количество: у уникальных (1 экз) скрыто; иначе — компактный контрол ≥44px */
  .preview-cart-product[data-sold-individually="yes"] .product-quantity { display: none; }
  .product-quantity {
    display: inline-grid; grid-auto-flow: column; align-items: stretch;
    border: 1px solid var(--idol-line); width: max-content;
  }
  .product-quantity__btn {
    min-width: var(--idol-tap); min-height: var(--idol-tap);
    display: grid; place-items: center; border: 0; background: none; color: var(--idol-ink); cursor: pointer;
  }
  .product-quantity__input {
    width: 44px; border: 0; border-inline: 1px solid var(--idol-line);
    text-align: center; font-size: max(16px, 1em);
    -moz-appearance: textfield; appearance: textfield;
  }
  .product-quantity__input::-webkit-outer-spin-button,
  .product-quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* 3.4 Итоги — sticky-панель над таб-баром */
  .cart-totals {
    position: sticky; bottom: var(--idol-tabbar-space); z-index: 80;
    display: grid; gap: 8px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    margin-inline: -16px;
    background: var(--idol-surface); border-top: 1px solid var(--idol-line);
  }
  .cart-totals .btn { min-height: 48px; }

  /* 3.5 Общей «Очистить корзину» нет (решение владельца) — форму не удаляем, скрываем */
  .clear-cart { display: none; }

  /* 3.6 blockUI-оверлей пересчёта — к нашему виду */
  .custom-cart__main .blockUI.blockOverlay {
    background: color-mix(in srgb, var(--idol-surface) 70%, transparent) !important;
    opacity: 1 !important;
  }
}

/* пустая корзина — общий блок пустого состояния */
.idol-empty {
  display: grid; justify-items: start; gap: 14px; max-width: 46ch; padding: 32px 16px;
}
.idol-empty__t { font-size: 20px; font-weight: 600; }
.idol-empty__s { font-size: 14px; line-height: 1.5; color: var(--idol-ink-2); text-wrap: pretty; }
.idol-empty .btn { min-height: 48px; }

/* ===========================================================================
   4. CHECKOUT (§3d) — адаптив: одна колонка, поля 48/16, sticky-«Оформить».
   Бар на checkout ВЫКЛ (конверсия) → sticky-кнопка у низа (bottom:0).
   =========================================================================== */
@media (max-width: 1023px) {

  /* 4.1 Одна колонка, порядок = логика заполнения */
  .custom-checkout__form.has-sidebar,
  .custom-checkout__form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px;
  }
  .custom-checkout__form .form__fields { display: grid; gap: 16px; }

  /* 4.2 Лейблы видимые (не placeholder-вместо-лейбла) */
  .form__fields-label { display: grid; gap: 6px; font-size: 13px; color: var(--idol-ink-2); }
  .form__fields-hint { font-size: 12px; color: var(--idol-ink-3); }

  /* 4.3 Поля ≥48px, 16px (без iOS-зума). !important — тема держит .form__input 14px
     своей специфичностью. Чекбоксы/радио исключаем (у согласий свой размер §4.10). */
  .custom-checkout .form__input,
  .custom-checkout .form-row .input-text,
  .custom-checkout .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
  .custom-checkout .form-row select,
  .custom-checkout .form-row textarea,
  .custom-checkout input.input-text,
  .custom-checkout .form__fields input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
  .custom-checkout .form__fields textarea,
  .custom-checkout .form__fields select {
    min-height: 48px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border: 1px solid var(--idol-line);
    background: var(--idol-surface);
    color: var(--idol-ink);
    font: inherit;
    font-size: max(16px, 1em) !important;
  }
  .custom-checkout .form__input:focus, .custom-checkout .form-row .input-text:focus, .custom-checkout .form__fields input:focus { border-color: var(--idol-ink) !important; outline: none; }
  .custom-checkout .form__input-textarea, .custom-checkout .form-row textarea, .custom-checkout .form__fields textarea { min-height: 96px !important; resize: vertical; }
  .form-row { display: grid; gap: 6px; float: none; width: auto; margin: 0 0 4px; }

  /* 4.4 Ошибка у поля */
  .form__input[aria-invalid="true"] { border-color: var(--idol-danger); }
  .form__error { display: flex; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--idol-danger); }
  .form__error:empty { display: none; }

  /* 4.8 Итог — крупно */
  .checkout-sidebar__total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding-top: 12px; border-top: 1px solid var(--idol-line); font-size: 18px; font-weight: 600;
  }
  .checkout-sidebar__payment-title, .checkout-sidebar__shipping-title {
    font-size: 13px; line-height: 1.5; color: var(--idol-ink-2); text-wrap: pretty;
  }

  /* 4.9 Главная кнопка — sticky у низа (бара на checkout нет) */
  .custom-checkout .js-checkout-btn,
  .checkout-sidebar > .btn[type="submit"],
  .checkout-sidebar .js-checkout-btn {
    position: sticky; bottom: 0; z-index: 80;
    width: 100%; min-height: 52px; margin-inline: 0;
    padding-bottom: calc(0px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 16px -12px rgb(0 0 0 / .18);
  }

  /* 4.10 Согласия: чекбокс — полноценная цель */
  .form__acceptance label {
    display: grid; grid-template-columns: var(--idol-tap) minmax(0, 1fr);
    align-items: start; gap: 4px; font-size: 12px; line-height: 1.5; color: var(--idol-ink-2); text-wrap: pretty;
  }
  .form__acceptance input[type="checkbox"] { width: 20px; height: 20px; margin: 12px auto 0; accent-color: var(--idol-ink); }
  .form__acceptance a { color: var(--idol-ink); text-underline-offset: 3px; }
}