/* ============================================================
   MOBILE FIX — мобильная вёрстка стенда → дизайн прототипа
   Добавить В КОНЕЦ web/css/mobilais-ds.css.
   Аудит 390×844 всех страниц: главная/каталог, PDP, корзина,
   checkout, подтверждение, инфо.
   Источник истины — прототип (mobilais/), сверено с prod-CSS.
   Правило: где у прототипа мобильная слабость (тач-цель < 44px) —
   берём лучшее по best-practice, сохраняя визуал дизайна.
   Только CSS, DOM не трогаем.
   ============================================================ */

/* ============ A. ГЛОБАЛЬНЫЙ SHELL ============ */

/* (A1, критично) Кнопка корзины — иконка 46×46 + badge, без суммы.
   Prod-markup: <a.cartbtn> svg + <span.badge-count> + <span.price> (в потоке).
   Скрываем .price, сжимаем до 46×46, badge выносим абсолютом НАД иконкой
   (как прототип: top/right -6px + кольцо --ink). Класс суммы в проде — .price. */
@media (max-width: 760px) {
  .cartbtn {
    position: relative;
    width: 46px;
    height: 46px;       /* база 50 */
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 13px; /* база var(--r)=14 */
  }
  .cartbtn .price { display: none; }
  .cartbtn .badge-count {
    position: absolute;
    top: -6px;
    right: -6px;
    box-shadow: 0 0 0 2px var(--ink);
  }
}

/* (A2) Логотип на мобиле — 44px. В проде @720px стоит 48px (стр. 1978);
   правило идёт позже → переопределяет. Чище — заменить 48px→44px в стр. 1978. */
@media (max-width: 720px) {
  .logo__img { height: 44px; }
}

/* (A3) Каталог: gap 12px + паддинг карточки 11px (в проде @720px нет override;
   .card__body{padding:var(--card-pad)} использует переменную → сработает). */
@media (max-width: 720px) {
  .grid { gap: 12px; }
  .card { --card-pad: 11px; }
}

/* (A4) Футер — 1 колонка на узком (как эталон @540px).
   Причина бага: база таргетит .ft__grid [class*="col-"] (потомок), а
   @1080/@720 — .ft__grid > [class*="col-"] (прямой потомок). Колонки лежат
   внутри .row{display:contents}, т.е. НЕ прямые потомки → responsive-правило
   не матчит, на 390px остаётся 2 колонки. Фикс — селектор-потомок + !important. */
@media (max-width: 540px) {
  .ft__grid { flex-direction: column; }
  .ft__grid [class*="col-"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ============ B. PDP (страница товара /product/...) ============ */

/* (B1) Buybar: на мобиле — СТРОКА (степпер + CTA), как в прототипе.
   В проде @720px стоит flex-direction:column, из-за чего степпер
   (inline-flex + align-items:stretch) растягивается на всю ширину с
   пустотой между кнопками — некрасиво. Возвращаем строку.
   Тач-цели сохраняем: prod-степпер уже 44×44 (в прототипе он 30px — НЕ копируем).
   Раскладка 390px: степпер ~136px + gap 12 + CTA ~210px = 358px ✓. */
@media (max-width: 720px) {
  .buybar {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
  }
  .buybar .stepper { flex-shrink: 0; }
  .buybar .btn--block,
  .buybar .btn-cart { flex: 1; min-width: 0; }
}

/* (B2) Описание товара (.tabs__body = $product->description из CMS).
   Тот же риск, что у инфо-страниц: произвольный HTML с inline-стилями,
   широкими картинками/таблицами → горизонтальный скролл на мобиле.
   Делаем контент адаптивным и нейтрализуем inline-мусор. */
.tabs__body { word-break: break-word; overflow-wrap: anywhere; }
.tabs__body img,
.tabs__body iframe,
.tabs__body video,
.tabs__body table { max-width: 100% !important; height: auto; }
.tabs__body img { border-radius: var(--r-sm); }
.tabs__body table { width: 100% !important; border-collapse: collapse; display: block; overflow-x: auto; }
.tabs__body [style] {
  font-family: var(--font) !important;
  max-width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
}
.tabs__body p[style],
.tabs__body span[style],
.tabs__body li[style],
.tabs__body div[style] { color: var(--ink-2) !important; }

/* ============ C. CHECKOUT (/cart/checkout) ============ */

/* (C1) Единая ширина всех карточек checkout = как Pasūtījums.
   На ≤960px co-grid — flex-колонка; co-summary не растягивался (flex: 0 1 auto),
   co-card — content-box без width:100% → края «dati»/«veids» не совпадали. */
@media (max-width: 960px) {
  .co-main,
  .co-summary-sticky,
  .co-summary {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    box-sizing: border-box;
  }
  .co-card,
  .co-summary {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
}

/* (C2) Piegādes veids: симметричные отступы внутри строки (radio слеva ≈ цена справа).
   Ранее padding обнуляли ради ширины — корень был в align-items:start у .co-grid (см. F).
   terminals: без десктопного padding-left:68px. */
@media (max-width: 720px) {
  .co-card .shipping-row {
    padding: 12px 16px;
  }
  .co-card .shipping-terminals,
  .shipping-terminals {
    padding-left: 0;
    padding-right: 0;
  }

  /* Logo-строка: grid на всех строках — row 1 по контенту, адрес в row 2. */
  .shipping-row .ship-opt {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
  }
  .shipping-row .ship-opt__body {
    display: contents;
  }
  .shipping-row .shipping-option-input {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
  }
  .shipping-row .ship-opt__logo {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
  }
  .shipping-row .ship-opt__head {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .shipping-row .ship-opt__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .shipping-row .ship-opt__price {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
    padding-right: 0;
    justify-self: end;
  }
  .shipping-row.is-address-collapsed .ship-opt__detail,
  .shipping-row.is-terminal-collapsed .ship-opt__detail {
    grid-column: 2 / 4;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
  }

  /* Выбранный тип клиента / способ доставки — без синей заливки, только рамка. */
  .customer-option label:has(input:checked) {
    background: var(--surface);
  }
  .shipping-method-block:has(.shipping-option-input:checked),
  .shipping-method-block:has(.shipping-option input:checked),
  .shipping-row:has(.shipping-option-input:checked),
  .shipping-row:has(.shipping-option input:checked) {
    background: var(--surface);
  }

  /* (C2b) Kurjers — адрес: строка 1 = Adrese + поле; строка 2 = indekss + ✓.
     Десктоп-grid 1fr+172px+50px на 390px сжимает адрес до полоски. */
  .checkout-address-row {
    grid-template-columns: minmax(0, 1fr) 50px;
    grid-template-rows: auto 50px auto 50px;
    column-gap: 12px;
    row-gap: 8px;
  }
  .checkout-address-row__label--address {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .checkout-address-row__control--address {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .checkout-address-row__label--postcode {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .checkout-address-row__label--confirm {
    display: none;
  }
  .checkout-address-row__control--postcode {
    grid-column: 1;
    grid-row: 4;
    max-width: 200px;
  }
  .checkout-address-row__control--confirm {
    grid-column: 2;
    grid-row: 4;
  }
  .shipping-address-host.shipping-terminals {
    padding: 10px 16px 14px;
    border-top: 1px solid var(--line);
  }
  .shipping-method-block:has(.shipping-option-input:checked) .shipping-address-host.shipping-terminals:not(.d-none),
  .shipping-method-block:has(.shipping-option input:checked) .shipping-address-host.shipping-terminals:not(.d-none) {
    border-top-color: rgba(41, 98, 246, 0.18);
  }

  /* Длинный адрес/терминал: перенос в колонке товара, не ellipsis в одну строку. */
  .ship-opt__detail,
  .fulfillment-group-shipping__detail {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.35;
    max-width: 100%;
  }
  .fulfillment-group-shipping,
  .fulfillment-group-products {
    min-width: 0;
    max-width: 100%;
  }
  /* Radio и цена — по центру строки товаров (grid-row 1), не всего блока с адресом. */
  .fulfillment-group-radio-wrap.shipping-option {
    grid-row: 1;
    align-self: center;
    display: flex;
    align-items: center;
  }
  .fulfillment-group-price {
    grid-row: 1;
    align-self: center;
  }
}

/* (C3) Чуть меньше внутренние паддинги карточек на узком экране. */
@media (max-width: 540px) {
  .co-card,
  .co-summary { padding: 18px 16px; }
}


/* ============ D. ПРАВКИ ПО ЖИВОМУ ТЕСТУ (390px) ============ */

/* (D1) Topbar — языки: убрать «воздух». На мобиле кнопки языка уже/плотнее. */
@media (max-width: 720px) {
  .topbar__inner { padding: 0 12px; }
  .lang { gap: 1px; }
  .lang a {
    min-width: 30px;
    padding: 0 5px;
    height: 26px;
    letter-spacing: .03em;
  }
}

/* (D1b) Topbar — вернуть email на мобиле как ИКОНКУ (текст скрыт).
   Требует правки main.php: текст email обернуть в <span class="topbar__txt">
   (см. fixes/mobile/main-topbar-snippet.php). Телефон-номер остаётся как есть. */
@media (max-width: 720px) {
  .topbar__contacts { gap: 14px; }
  .topbar__contacts a:last-child { display: flex; }        /* отменяем скрытие email (стр.1979) */
  .topbar__contacts a:last-child .topbar__txt { display: none; } /* email — только иконка */
  .topbar__contacts a:last-child .ico { width: 20px; height: 20px; opacity: .85; }
}

/* (D2) Toast при добавлении в корзину — компактный на мобиле.
   Сейчас длинный текст («Prece sekmīgi ielikta pirkumu grozā») переносится в
   «толстый прямоугольник». Скрываем текст → остаётся миниатюра + зелёная галка. */
@media (max-width: 540px) {
  .toast { padding: 11px 14px; gap: 9px; border-radius: 12px; }
  .toast__text { display: none; }
  .toast img { width: 30px; height: 30px; }
  .toast__ok svg { width: 20px; height: 20px; }
}

/* (D3) Корзина — строка товара: чистая 2-строчная раскладка на мобиле.
   Было: цена за шт. под названием + общая цена ниже + степпер отдельно
   на разных уровнях («криво»). Стало:
     [фото] Название + цена/шт            [удалить, top-right]
     [степпер]                             [сумма строки, bold]
   Степпер и сумма выровнены на одной линии. */
@media (max-width: 720px) {
  .cart-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main main"
      "qty  total";
    column-gap: 12px;
    row-gap: 12px;
    align-items: center;
    padding: 16px 14px 16px 16px;  /* правый отступ = right у delete (14px) */
  }
  .cart-row__main {
    grid-area: main;
    min-width: 0;
    padding-right: 52px; /* 40px delete + 12px зазор */
  }
  .cart-row__main > div:last-child {
    min-width: 0;
    flex: 1;
  }
  .cart-row__title {
    overflow-wrap: break-word;
    word-break: normal;
  }
  .cart-row__qty { grid-area: qty; justify-content: flex-start; }
  .cart-row__total {
    grid-area: total;
    justify-self: end;
    text-align: right;
    font-size: 18px;
    align-self: center;
    padding-right: 0;
  }
  .cart-row__price { font-size: 12.5px; }  /* цена/шт — вторичная, мельче */
  .cart-row__del { position: absolute; top: 14px; right: 14px; }
  .summary { padding-left: 16px; padding-right: 14px; }
}


/* ============ E. ФУТЕР — мобильный аккордеон ============ */
/* Футер длинный (4 CMS-колонки стопкой). На мобиле сворачиваем секции в
   раскрывающиеся по тапу блоки (по заголовкам). JS: fixes/mobile/footer-accordion.js
   (подключить после mobilais-ds.js). Десктоп НЕ трогаем — правила только ≤720px;
   на десктопе тела секций видны всегда (вне media-query max-height не ограничен). */
.ft-acc__chev { display: none; }   /* на десктопе шеврона нет */

@media (max-width: 720px) {
  .ft__grid { flex-direction: column; row-gap: 0; padding-bottom: 8px; }
  .ft__grid [class*="col-"],
  .ft__grid .ft__col,
  .ft__grid .footer__widget {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
  }
  .ft .footer__widget + .footer__widget { margin-top: 0 !important; }
  .ft-acc__head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 13px 2px !important;
    margin: 0 !important;
    border-top: 1px solid var(--line);
  }
  .ft-acc__chev {
    display: inline-flex;
    flex: none;
    color: var(--ink-3);
    transition: transform .2s ease;
  }
  .ft-acc__head[aria-expanded="true"] .ft-acc__chev { transform: rotate(180deg); }
  .ft-acc__body { overflow: hidden; max-height: 0; margin: 0; padding: 0; transition: max-height .28s ease; }
  .ft-acc__body.is-open { max-height: 640px; }
  .ft-acc__body-inner { padding: 2px 2px 16px; }
  /* первый разделитель сверху не дублируем с границей футера */
  .ft__grid > :first-child .ft-acc__head,
  .ft__grid > .row:first-child > :first-child .ft-acc__head { border-top: 0; }
}

/* ============ F. CHECKOUT — порядок блоков на мобиле ============ */
/* Десктоп без изменений (форма слева, итог+кнопка справа).
   ≤960px: клиент → доставка → итог заказа с кнопкой → футер. */
@media (max-width: 960px) {
  .co-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* база .co-grid { align-items: start } — без этого co-main уже co-summary */
    gap: 20px;
  }
  .co-main { order: 0; min-width: 0; }
  .co-summary-sticky {
    order: 1;
    min-width: 0;
  }
  .co-summary {
    position: static;
    top: auto;
    min-width: 0;
  }
}