/* listing-toolbar.css — панель керування списком товарів NiKo-СЕРВІС.
   Сортування / кількість на сторінці / перемикач виду (плитки ↔ список).
   Активується JS-ом лише над сітками з [data-listing]. Палітра — site-header.css. */

.lt-bar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--surface,#fff); border:1px solid var(--border,#E5E7EB); border-radius:14px;
  padding:13px 18px; margin:0 0 22px;
  font-family:'Geologica',sans-serif;
  box-shadow:0 4px 18px rgba(17,24,39,.05);
}
.lt-group{ display:inline-flex; align-items:center; gap:10px; }
.lt-label{ font-size:14px; color:var(--gray,#6B7280); white-space:nowrap; }
.lt-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-family:'Geologica',sans-serif; font-size:14px; color:var(--gray-900,#111827); line-height:1.2;
  background:var(--surface,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size:12px; border:1px solid var(--border,#D1D5DB); border-radius:9px;
  padding:9px 36px 9px 14px; cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.lt-select:hover{ border-color:#9CA3AF; }
.lt-select:focus{ outline:none; border-color:#1E4A8C; box-shadow:0 0 0 3px rgba(30,74,140,.12); }
.lt-select.lt-show{ padding-right:32px; min-width:74px; }
.lt-spacer{ flex:1 1 auto; }
.lt-views{ display:inline-flex; gap:8px; }
.lt-view-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:40px; padding:0; border:1.5px solid var(--border,#E5E7EB); border-radius:10px;
  background:var(--surface,#fff); color:#9CA3AF; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.lt-view-btn:hover{ color:#6B7280; border-color:#D1D5DB; }
.lt-view-btn.is-active{ color:#FF6B35; border-color:#FF6B35; background:#FFF4EF; }
.lt-view-btn svg{ width:20px; height:20px; display:block; }
.lt-more{
  display:block; margin:8px auto 0; padding:11px 26px;
  font-family:'Geologica',sans-serif; font-size:14px; font-weight:500;
  color:var(--blue,#1E4A8C); background:var(--surface,#fff); border:1.5px solid var(--blue,#1E4A8C); border-radius:10px; cursor:pointer;
  transition:background .15s, color .15s;
}
.lt-more:hover{ background:#1E4A8C; color:#fff; }
.lt-hidden{ display:none !important; }
.lt-filtered{ display:none !important; }

/* ── Фільтри: ціна (від/до) + бренд ─────────────────────────────── */
.lt-num{
  font-family:'Geologica',sans-serif; font-size:14px; color:var(--gray-900,#111827); width:84px;
  border:1px solid var(--border,#D1D5DB); border-radius:9px; padding:9px 10px;
  transition:border-color .15s, box-shadow .15s; -moz-appearance:textfield; appearance:textfield;
}
.lt-num::-webkit-outer-spin-button, .lt-num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.lt-num:hover{ border-color:#9CA3AF; }
.lt-num:focus{ outline:none; border-color:#1E4A8C; box-shadow:0 0 0 3px rgba(30,74,140,.12); }
.lt-price{ gap:7px; }
.lt-price .lt-dash{ color:#9CA3AF; }
@media(max-width:600px){ .lt-num{ width:70px; font-size:13px; padding:8px; } }

/* ── Рейтинг (зірочки), що JS додає на картки ───────────────────── */
.lt-rating{ display:flex; align-items:center; gap:6px; margin:4px 0 2px; }
.lt-stars{ position:relative; display:inline-block; font-size:13px; line-height:1; letter-spacing:1.5px; font-family:Arial,Helvetica,sans-serif; }
.lt-stars-bg{ color:#D9DEE6; }
.lt-stars-fg{ position:absolute; left:0; top:0; color:#FFB400; overflow:hidden; white-space:nowrap; }
.lt-rating-val{ font-size:12px; color:#6B7280; font-weight:600; font-family:'Geologica',sans-serif; }

@media(max-width:600px){
  .lt-bar{ gap:10px 14px; padding:12px 14px; }
  .lt-label{ font-size:13px; }
  .lt-select{ font-size:13px; padding:8px 32px 8px 12px; }
  .lt-view-btn{ width:40px; height:38px; }
}

/* ── Вид «список» (прямокутні рядки) ─────────────────────────────
   Перекриває grid-template сторінки (вища специфічність [data-listing].is-list).
   Покриває три родини карток сайту:
     A: .prod-card > .pc-img + .pc-body
     B: .prod-card > .prod-card-img + .prod-card-body
     C: .mat-card  > .mat-card-img + .mat-card-body
   Секції з іншою розміткою отримають базовий 1-колонковий вид. */
[data-listing].is-list{ display:flex !important; flex-direction:column; gap:14px !important; }
[data-listing].is-list > *{ width:100%; max-width:none; }
[data-listing].is-list .prod-card,
[data-listing].is-list .mat-card{ display:flex; flex-direction:row; align-items:stretch; }
[data-listing].is-list .prod-card > .pc-img,
[data-listing].is-list .prod-card > .prod-card-img,
[data-listing].is-list .mat-card > .mat-card-img{
  width:34%; min-width:170px; max-width:300px; flex:0 0 auto;
  border-bottom:none; border-right:1px solid var(--border,#E5E7EB);
}
[data-listing].is-list .prod-card > .pc-body,
[data-listing].is-list .prod-card > .prod-card-body,
[data-listing].is-list .mat-card > .mat-card-body{ flex:1 1 auto; min-width:0; }
@media(max-width:600px){
  [data-listing].is-list .prod-card,
  [data-listing].is-list .mat-card{ flex-direction:column; }
  [data-listing].is-list .prod-card > .pc-img,
  [data-listing].is-list .prod-card > .prod-card-img,
  [data-listing].is-list .mat-card > .mat-card-img{
    width:100%; max-width:none; border-right:none; border-bottom:1px solid var(--border,#E5E7EB);
  }
}