/* ==== VEKTOR MOBILE v29 (stable 3-cols) ==== */
/*! vektor-mobile.css • v29 (2025-10-05)
   Цель v29: всегда 3 карточки на мобилках (≤980px) без обрезаний
   Подход: убраны ветки на 2 колонки; всё держится на адаптивной типографике и компактных контролах.
   Совместимо с VEKTOR Mobile v1.5+ и текущим app.v53.
*/

/* ---------- Глобальные страховки ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { width:100%; max-width:100vw; overflow-x:hidden !important; }
#app, .app, .page, .wrap, .container, .content, main, .layout, .root, .viewport, .page-wrap {
  width:100% !important; max-width:100vw !important; overflow-x:hidden !important;
}

/* ---------- Медиа / изображения ---------- */
/* Квадрат только для изображений в карточках/гридах */
.product-grid img,
.items img,
.card img,
.product-card .thumb,
.product-card .timg,
.product-card .image {
  max-width:100%; height:auto; display:block;
  aspect-ratio:1/1; object-fit:cover;
}

/* ---------- Базовая мобильная сетка: ВСЕГДА 3 КОЛОНКИ ---------- */
@media (pointer: coarse) and (max-width: 980px){
  .categories, .category-list, #categories, [data-categories],
  .groups, .group-grid, .grid, .tiles, .catalog, .product-grid, .items {
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 4px !important;
  }
  .card, .product-card, .tile, .category-card, .group-card {
    width:auto !important; min-width:0 !important; margin:0 !important; border-radius:12px; overflow:hidden;
  }
}

/* ---------- Заголовки карточек (стабильно до 3 строк) ---------- */
@media (pointer: coarse) and (max-width: 980px){
  .product-card .title, .category-card .title, .group-card .title,
  .product-card .name, .product-card .product-title {
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis; white-space:normal; word-break:break-word;
    text-align:center; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
    /* Адаптивная типографика под 3 колонки на любых узких ширинах */
    font-size: clamp(10.5px, 2.8vw, 13px);
    line-height: 1.22;
    min-height: calc(1.22em * 4);
    hyphens:auto; overflow-wrap:anywhere;
  }
}

/* ---------- Цена (читаемо, но компактно) ---------- */
@media (pointer: coarse) and (max-width: 980px){
  .product-card .price, .card .price {
    font-size: clamp(11px, 3.2vw, 14px);
    line-height: 1.2; margin: 2px 0 4px !important; white-space:nowrap;
  }
}

/* ---------- Контролы карточки (две строки: qty и кнопка) ---------- */
@media (pointer: coarse) and (max-width: 980px){
  .product-card .controls, .product .controls, .card .controls {
    display:grid !important; grid-template-columns: 1fr !important;
    row-gap:6px !important; justify-items:center !important; align-items:center !important; width:100% !important;
  }
  .product-card .qty, .product .qty, .card .qty {
    display:inline-flex !important; align-items:center !important; gap: clamp(3px, 1.3vw, 6px) !important;
    margin:0 auto !important; min-width:0 !important; flex:0 1 auto !important;
  }
  .product-card .qty .btn, .product .qty .btn, .card .qty .btn,
  .product-card .qty button, .product .qty button, .card .qty button {
    width: clamp(24px, 7.2vw, 30px) !important; height: clamp(24px, 7.2vw, 30px) !important;
    border-radius: clamp(8px, 2.4vw, 12px) !important; padding:0 !important; line-height:1 !important; touch-action:manipulation !important;
  }
  .product-card .qty input[type="number"],
  .product .qty input[type="number"],
  .card .qty input[type="number"] {
    width: clamp(26px, 8vw, 34px) !important; height: clamp(24px, 7.2vw, 30px) !important;
    text-align:center !important; border-radius: clamp(7px, 2.2vw, 10px) !important; padding:0 !important; font-weight:600 !important;
    font-size: clamp(11px, 3.2vw, 13px) !important;
  }
  .product-card .btn-primary, .product .btn-primary, .card .btn-primary {
    width: 100% !important; max-width:none !important; justify-self:center !important; white-space:nowrap !important;
    min-height: clamp(30px, 9.5vw, 38px) !important; border-radius: clamp(8px, 2.4vw, 12px) !important;
    font-size: clamp(12px, 3.4vw, 14px) !important; font-weight:700 !important;
  }
}

/* ---------- Минимизируем риски переполнений ---------- */
@media (pointer: coarse) and (max-width: 980px){
  .product-card, .card { min-width:0 !important; }
  .product-card *, .card * { min-width:0 !important; max-width:100% !important; }
}

/* ---------- Чипсы (в одну строку, переносим) ---------- */
@media (pointer: coarse) and (max-width: 980px){
  .chips, .tags, .filters, .top-tags, .brand-tags, .nav-tags, .pills, .pill-row {
    display:flex !important; flex-wrap:wrap !important; gap:10px !important; width:100% !important;
    max-width:100% !important; padding:6px 8px !important; margin:0 !important;
  }
  .chips > *, .tags > *, .filters > *, .top-tags > *, .brand-tags > *, .nav-tags > *, .pills > *, .pill-row > * {
    flex:0 1 auto; max-width:100%; white-space:normal !important; line-height:1.2 !important;
  }
}

/* ---------- FAB корзины + отступ под неё ---------- */
@media (pointer: coarse) and (max-width: 980px){
  .vektor-cart-fab { position:fixed; right:12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index:10000; }
  .vektor-cart-fab button{
    all:unset; display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:9999px; background:#111827; color:#fff;
    font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.35);
  }
  .vektor-cart-fab .cnt{ min-width:22px; min-height:22px; padding:2px 8px; border-radius:9999px; background:#2563eb; text-align:center; font-variant-numeric:tabular-nums; }
  body, main, .content { padding-bottom: 84px !important; }
}

/* ---------- Корзина-модалка в пределах экрана ---------- */
@media (pointer: coarse) and (max-width: 980px){
  .cart, .cart-modal, .cart__modal, #cartModal,
  .checkout-modal, #checkout-modal,
  .cart-drawer, .drawer-cart, [class*="cart"][class*="modal"] {
    position: fixed !important;
    left: 2vw !important; right: 2vw !important; top: 4vh !important;
    width: auto !important; max-width: 96vw !important; max-height: 90vh !important;
    overflow:auto !important; border-radius:16px !important; transform:none !important;
  }
  .cart header, .cart .header, .cart-modal header, .checkout-modal header { position: sticky; top:0; z-index:2; }
  .cart footer, .cart .footer, .cart-modal footer, .checkout-modal footer { position: sticky; bottom:0; z-index:2; }
}

/* ---------- Back chip и скрытие старой кнопки назад ---------- */
@media (pointer: coarse) and (max-width: 980px){
  .vektor-back-chip { position: sticky; top:6px; z-index:60; display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
    border-radius:9999px; background:#111827; color:#fff; border:1px solid #334155; font-weight:700; }
  .vektor-back-chip:active{ transform: translateY(1px); }
  .topbar .back, .back-btn, .icon-back, .btn-back { display:none !important; }
}

/* ---------- Мобильная домашняя сетка/бэкбар (совместимость) ---------- */
@media (max-width: 768px) {
  body.is-mobile #mobile-cats-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; padding:12px; }
  body.is-mobile #mobile-cats-grid .mcat{
    display:flex; align-items:center; justify-content:center; text-align:center; min-height:82px; padding:10px; border-radius:16px;
    background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#e6f6ff; font-weight:600;
  }
  body.is-mobile #mobile-cats-grid .mcat:active{ transform: translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.35); }
  body.is-mobile.mobile-home .left, 
  body.is-mobile.mobile-home .category-chips, 
  body.is-mobile.mobile-home .chips, 
  body.is-mobile.mobile-home .chips-wrap,
  body.is-mobile.mobile-home .chips-container, 
  body.is-mobile.mobile-home .categories-strip,
  body.is-mobile.mobile-home .main, 
  body.is-mobile.mobile-home .center, 
  body.is-mobile.mobile-home .content { display:none !important; }
  body.is-mobile.mobile-home #mobile-cats-grid{ display:grid !important; }
  body.is-mobile .mobile-backbar{
    position:sticky; top:0; z-index:110; padding:10px 12px; display:flex; align-items:center; gap:10px;
    background: rgba(12,16,28,0.9); border-bottom:1px solid rgba(255,255,255,0.08); backdrop-filter: blur(6px);
  }
  body.is-mobile .mobile-backbar button{
    border-radius:12px; padding:8px 12px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.06);
    color:#e6f6ff; font-weight:600;
  }
  body.is-mobile .mobile-backbar .crumb{ font-size:14px; color:#b3dfff; font-weight:600; }
  body.is-mobile .cart-panel, body.is-mobile .cart-drawer, body.is-mobile .mini-cart{
    position: fixed !important; left:0; right:0; margin:0 auto !important; width: calc(100% - 24px) !important;
    max-width:520px; top:max(8px, env(safe-area-inset-top)); bottom:auto; max-height:84vh; overflow:auto;
    -webkit-overflow-scrolling:touch; border-radius:16px !important; box-shadow:0 10px 30px rgba(0,0,0,0.45); z-index:1002;
  }
  body.is-mobile .vektor-cart-fab, body.is-mobile .cart-fab, body.is-mobile .cart-fab-wrap{
    position: fixed !important; right:12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index:1001;
  }
  body.is-mobile.modal-open{ overflow:hidden !important; }
}

/* ---------- Скрыть вторую полосу чипсов на мобилке ---------- */
@media (max-width: 768px) and (pointer: coarse) {
  #chips2 { display: none !important; }
}
/* === AUTO-ADAPT TITLES BY CARD WIDTH (container queries) === */
@media (pointer: coarse) and (max-width: 980px){
  /* 1) Включаем контейнер у карточки */
  .product-card { container-type: inline-size; }

  /* 2) Базовая типографика заголовка с переменной --lines */
  .product-card .title,
  .product-card .name,
  .product-card .product-title{
    /* по умолчанию 3 строки */
    --lines: 3;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;

    /* читабельность */
    font-size: clamp(11px, 2.7cqi, 14px); /* cqi = единицы контейнера */
    line-height: 1.22;
    min-height: calc(1.22em * var(--lines));
    hyphens: auto;
    overflow-wrap: anywhere;
    text-align: center;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* 3) Автопереключение количества строк по ширине самой карточки */
  @container (max-width: 132px){
    .product-card .title,
    .product-card .name,
    .product-card .product-title{
      --lines: 5;                /* очень узкая карточка → 5 строк */
      font-size: clamp(10px, 3.2cqi, 12.5px);
      min-height: calc(1.22em * var(--lines));
    }
  }
  @container (min-width: 133px) and (max-width: 156px){
    .product-card .title,
    .product-card .name,
    .product-card .product-title{
      --lines: 4;                /* средняя ширина → 4 строки */
      font-size: clamp(10.5px, 3.0cqi, 13px);
      min-height: calc(1.22em * var(--lines));
    }
  }
  @container (min-width: 157px){
    .product-card .title,
    .product-card .name,
    .product-card .product-title{
      --lines: 3;                /* широкая карточка → 3 строки */
      font-size: clamp(11px, 2.6cqi, 14px);
      min-height: calc(1.22em * var(--lines));
    }
  }
}
/* === VEKTOR MOBILE v29 — Title readability patch (safe) === */
@media (pointer: coarse) and (max-width: 980px){
  /* Универсальный стек без загрузки новых файлов */
  .product-card .title,
  .product-card .name,
  .product-card .product-title{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Noto Sans", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
  }

  /* Браузеры без container queries — делаем стабильные 4 строки и чуть меньше кегль */
  .product-card .title,
  .product-card .name,
  .product-card .product-title{
    -webkit-line-clamp: 4;
    line-height: 1.18;
    /* Было clamp(10.5px, 2.8vw, 13px) — сделаем чуть меньше верхнюю границу */
    font-size: clamp(10px, 2.6vw, 12.6px);
    min-height: calc(1.18em * 4);
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  /* Включаем контейнер и управляем строками по ширине карточки */
  .product-card{ container-type: inline-size; }

  /* БАЗА для поддерживающих CQ: всегда 4 строки (читаемо и максимально полно) */
  @container (min-width: 0){
    .product-card .title,
    .product-card .name,
    .product-card .product-title{
      --lines: 4;
      -webkit-line-clamp: var(--lines);
      line-height: 1.18;
      /* cqi — размер относительно ширины карточки */
      font-size: clamp(10px, 2.6cqi, 12.6px);
      min-height: calc(1.18em * var(--lines));
    }
  }

  /* Очень узкие карточки: даём до 5 строк, ещё на пол-пункта уменьшим шрифт */
  @container (max-width: 132px){
    .product-card .title,
    .product-card .name,
    .product-card .product-title{
      --lines: 5;
      font-size: clamp(9.8px, 3.0cqi, 12.2px);
      min-height: calc(1.18em * var(--lines));
    }
  }
}



/* ==== VEKTOR MOBILE v29.1 (readability focus for product titles) ====
   Changes:
   - Increase minimal font-size for product titles on mobile
   - Allow more lines (up to 6) via container queries
   - Slightly larger line-height for better scanning
   - Left-align multi-line titles (improves readability)
   - Fallback for browsers without container queries
   - (Optional, commented) 2-cols on ultra-narrow screens
   Notes: This block is appended AFTER the base v29 so it overrides via cascade.
*/

@media (pointer: coarse) and (max-width: 980px){
  /* 1) Safer, larger, more readable title styles */
  .product-card .title,
  .product-card .name,
  .product-card .product-title{
    /* left align multi-line text for readability */
    text-align: left;
    /* slightly looser leading */
    line-height: 1.22;
  }

  /* Ensure product card is a container for container queries */
  .product-card{ container-type: inline-size; }

  /* Base: show 4 lines everywhere (fallback default), but we will refine via @container below */
  .product-card .title,
  .product-card .name,
  .product-card .product-title{
    -webkit-line-clamp: 4;
    /* raise minimum font size for mobile readability */
    font-size: clamp(12px, 2.6vw, 13.5px);
    min-height: calc(1.22em * 4);
    font-weight: 600;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Noto Sans", Arial, sans-serif;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  /* Container-query refinements (override the base above) */
  @container (max-width: 132px){
    .product-card .title,
    .product-card .name,
    .product-card .product-title{
      --lines: 6;
      -webkit-line-clamp: var(--lines);
      /* slightly smaller on ultra narrow, but still >= 11px */
      font-size: clamp(11px, 3.0cqi, 12.5px);
      min-height: calc(1.22em * var(--lines));
    }
  }
  @container (min-width: 133px) and (max-width: 156px){
    .product-card .title,
    .product-card .name,
    .product-card .product-title{
      --lines: 5;
      -webkit-line-clamp: var(--lines);
      font-size: clamp(12px, 3.0cqi, 13.5px);
      min-height: calc(1.22em * var(--lines));
    }
  }
  @container (min-width: 157px){
    .product-card .title,
    .product-card .name,
    .product-card .product-title{
      --lines: 4;
      -webkit-line-clamp: var(--lines);
      font-size: clamp(13px, 2.6cqi, 15px);
      min-height: calc(1.22em * var(--lines));
    }
  }
}

/* 2) Fallback for browsers WITHOUT container queries (older Safari/WebView/Firefox) */
@supports not (container-type: inline-size){
  @media (max-width: 400px){
    .product-card .title,
    .product-card .name,
    .product-card .product-title{
      /* allow more lines when CQ not available */
      -webkit-line-clamp: 5;
      font-size: 12px !important;
      line-height: 1.22;
      min-height: calc(1.22em * 5);
      text-align: left;
    }
  }
  @media (max-width: 330px){
    .product-card .title,
    .product-card .name,
    .product-card .product-title{
      -webkit-line-clamp: 6;
      min-height: calc(1.22em * 6);
    }
  }
}

/* 3) OPTIONAL: switch to 2 columns on ultra-narrow screens for maximum readability.
   Uncomment to enable.
*/
/*
@media (pointer: coarse) and (max-width: 360px){
  .categories, .category-list, #categories, [data-categories],
  .groups, .group-grid, .grid, .tiles, .catalog, .product-grid, .items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
*/
/* === PROM-style title finisher (safe override) ================== */
/* Ставим САМЫМ ПОСЛЕДНИМ правилом в файле */
@media (pointer: coarse) and (max-width: 980px){
  /* Делаем карточку контейнером для CQ (если где-то не подхватилось) */
  .product-card{ container-type: inline-size; }

  /* Заголовок: слева, много строк, БЕЗ троеточий */
  .items :where(.product-card .title, .product-card .name, .product-card .product-title){
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* базово 4 строки; можно 5 или 6 — см. контейнерные правила ниже */
    -webkit-line-clamp: 4;
    line-height: 1.22;
    /* читаемый кегль под 3-колоночную сетку */
    font-size: clamp(12px, 2.6vw, 13.5px);

    /* выключаем троеточия, оставляем чистую обрезку по строке */
    text-overflow: clip;
    white-space: normal;
    overflow: hidden;
    min-height: calc(1.22em * 4);
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  /* Узкие карточки → больше строк (до 6), но кегль не падает ниже 11px */
  @container (max-width: 132px){
    .items :where(.product-card .title, .product-card .name, .product-card .product-title){
      -webkit-line-clamp: 6;
      font-size: clamp(11px, 3.0cqi, 12.5px);
      min-height: calc(1.22em * 6);
    }
  }
  /* Средняя ширина карточки → 5 строк */
  @container (min-width: 133px) and (max-width: 156px){
    .items :where(.product-card .title, .product-card .name, .product-card .product-title){
      -webkit-line-clamp: 5;
      font-size: clamp(12px, 3.0cqi, 13.5px);
      min-height: calc(1.22em * 5);
    }
  }
  /* Шире карточка → 4 строки (самый аккуратный вид) */
  @container (min-width: 157px){
    .items :where(.product-card .title, .product-card .name, .product-card .product-title){
      -webkit-line-clamp: 4;
      font-size: clamp(13px, 2.6cqi, 15px);
      min-height: calc(1.22em * 4);
    }
  }
}
/* === PROM-style Title — final override (DevTools-friendly) ====== */
/* ВСТАВИТЬ САМЫМ ПОСЛЕДНИМ ПРАВИЛОМ */
@media (max-width: 980px){
  /* даём карточкам container-query, где требуется */
  .product-card, .card { container-type: inline-size; }

  /* Заголовок: слева, много строк, без троеточий */
  .items :where(
    .product-card .title, .product-card .name, .product-card .product-title,
    .card .title, .item .title
  ){
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;

    /* базово 4 строки (как на Prom можно 5–6) */
    -webkit-line-clamp: 4 !important;

    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    line-height: 1.22 !important;
    font-size: clamp(12px, 2.6vw, 13.5px) !important;
    min-height: calc(1.22em * 4) !important;

    hyphens: auto;
    overflow-wrap: anywhere;
    font-weight: 600;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Noto Sans", Arial, sans-serif;
  }

  /* Узкие карточки → 6 строк */
  @container (max-width: 132px){
    .items :where(
      .product-card .title, .product-card .name, .product-card .product-title,
      .card .title, .item .title
    ){
      -webkit-line-clamp: 6 !important;
      font-size: clamp(11px, 3.0cqi, 12.5px) !important;
      min-height: calc(1.22em * 6) !important;
    }
  }

  /* Средняя ширина → 5 строк */
  @container (min-width: 133px) and (max-width: 156px){
    .items :where(
      .product-card .title, .product-card .name, .product-card .product-title,
      .card .title, .item .title
    ){
      -webkit-line-clamp: 5 !important;
      font-size: clamp(12px, 3.0cqi, 13.5px) !important;
      min-height: calc(1.22em * 5) !important;
    }
  }

  /* Шире карточка → 4 строки */
  @container (min-width: 157px){
    .items :where(
      .product-card .title, .product-card .name, .product-card .product-title,
      .card .title, .item .title
    ){
      -webkit-line-clamp: 4 !important;
      font-size: clamp(13px, 2.6cqi, 15px) !important;
      min-height: calc(1.22em * 4) !important;
    }
  }
}
/* === PROM-style Title — final, mobile only ===================== */
/* ВСТАВИТЬ ПОСЛЕ ВСЕГО — САМЫМ ПОСЛЕДНИМ ПРАВИЛОМ */
@media (max-width: 980px){
  /* На всякий — включаем CQ для карточек (если не включено) */
  .card{ container-type: inline-size; }

  /* Заголовок: слева, много строк, БЕЗ троеточий */
  .grid .card .title{
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;

    /* базово 4 строки; можно поменять на 5/6 */
    -webkit-line-clamp: 4 !important;

    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    line-height: 1.22 !important;
    font-weight: 600;
    font-size: clamp(12px, 2.6vw, 13.5px) !important;

    /* фикс высоты под ровные ряды */
    min-height: calc(1.22em * 4) !important;

    hyphens: auto;
    overflow-wrap: anywhere;
  }

  /* Узкие карточки → 6 строк */
  @container (max-width: 132px){
    .grid .card .title{
      -webkit-line-clamp: 6 !important;
      font-size: clamp(11px, 3.0cqi, 12.5px) !important;
      min-height: calc(1.22em * 6) !important;
    }
  }

  /* Средняя ширина → 5 строк */
  @container (min-width: 133px) and (max-width: 156px){
    .grid .card .title{
      -webkit-line-clamp: 5 !important;
      font-size: clamp(12px, 3.0cqi, 13.5px) !important;
      min-height: calc(1.22em * 5) !important;
    }
  }
}