/* Карти */
@media (max-width: 600px) { .card{ height: 380px; } }
.tap-hint.hide{ opacity:0; transform:scale(.9); transition:all .4s ease; }
@media (max-width: 400px){ .card-actions{ grid-template-columns:1fr 1fr; row-gap:6px; } }

/* МОБІЛЬНИЙ TOPBAR — нефіксований, 2×2, без обрізання тексту */

  
  .topbar .actions .btn{
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-width: 0;
    padding: 10px 12px;
    min-height: 44px;              /* комфортний таргет */
    font-size: 13.5px; line-height: 1.2;
    text-align: center;
    background: transparent !important;   /* прибираємо сірий фон */
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none !important;
    /* Дозволяємо 2 рядки тексту без обрізання */
    white-space: normal;
    overflow: visible;
  }
  .topbar .actions .btn > span{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;         /* максимум 2 рядки */
    overflow: hidden;
  }

  


  /* “Лише обране” — текстова, але теж не ріжемо */
  #favOnly{ font-size: 13.5px; }

  /* ЖОВТА “Пошук” — на весь ряд */
  #applyTop{
    grid-column: 1 / -1;
    background: var(--brand) !important;
    color: #2b2b2b !important;
    border: none !important;
    font-weight: 700;
    min-height: 44px;
  }

  /* Пошук */
  .topbar .search{
    display: grid; grid-template-columns: 100%;
    gap: 2.2vw;
  }
  .topbar .search input[type="search"]{
    width:100%; height: 40px;
    padding: 10px 12px;
    font-size: 14px; border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--input); color: var(--text);
    box-sizing: border-box;
  }

  /* Сорти 2×2 і без обрізання */
  .topbar .search > div{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; width: 100%;
  }
  .topbar .search label.btn{
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-width: 0;
    padding: 9px 10px;
    min-height: 40px;
    font-size: 13px; line-height: 1.2;
    text-align: center;
    background: transparent !important;   /* без сірого */
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none !important;
    white-space: normal;                   /* ← дозволяємо перенос */
    overflow: hidden;
  }
  .topbar .search label.btn span{
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;                 /* до 2 рядків */
    overflow: hidden;
  }

  /* Вимкнути compact-ефекти */
  .topbar.compact .container,
  .topbar.compact h1,
  .topbar.compact .actions,
  .topbar.compact .search{ all: unset; }




/* ===== МОБІЛЬНИЙ: завжди видимий індикатор ТІЛЬКИ на задній стороні ===== */
@media (max-width: 700px){
  /* Прокрутка саме на бек-стороні активної картки */
  .card.active .back .scroll-area{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Забираємо нативний скролбар: */
    scrollbar-width: none;                 /* Firefox */
    scrollbar-color: transparent transparent;
    /* Резервуємо невеликий внутрішній відступ під наш трек, щоб текст не лип */
    padding-right: 10px;
  }
  .card.active .back .scroll-area::-webkit-scrollbar{ 
    width: 0 !important; height: 0 !important; display: none !important; 
  }

  /* Кастомний трек — відображається лише на .card.active .back */
  .scroll-area__track{
    position: absolute;
    top: 16px;                 /* синхронізовано з padding у .face */
    right: 6px;
    bottom: 62px;              /* не перекривати .card-actions */
    width: 4px;
    background: rgba(130,170,255,.15);
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;        /* не використовуємо display:none */
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 2;
  }
  .scroll-area__thumb{
    position: absolute;
    left: 0; width: 100%;
    min-height: 18px;
    background: rgba(130,170,255,.9);
    border-radius: 999px;
    transform: translateY(0);
    transition: background .2s ease;
  }
  .scroll-area__thumb.is-idle{ background: rgba(130,170,255,.75); }

  /* Вмикаємо трек лише на задній частині активної картки */
  .card.active .back .scroll-area__track{
    opacity: 1;
    visibility: visible;
  }

  /* Батько для абсолютного позиціонування треку */
  .card .back.face{ position: absolute; inset: 0; }
}

/* Дуже вузькі */
@media (max-width: 360px){
  .scroll-area__track{ right: 4px; width: 3px; }
}

/* Мобільна версія топбару */
@media (max-width: 768px) {
  .topbar .bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .brand {
    margin-bottom: 12px;
    justify-content: center;
  }
  
  .top-actions {
    order: 2;
  }
}