/* ============================================================
   MVtools Тематичні меню — mvtools_thematic_menu.css  v4
   Картки товарів використовують стилі теми (product-thumb,
   mv-product-layout, novinki-label, etc.) — без дублювання.
   Тут тільки стилі обгортки модуля: таби, хедер, навігація,
   скрабер, сітка.
   Author: Jey | mv-tools.com.ua
   ============================================================ */

:root {
  --mvta-font:          inherit;

  /* Header */
  --mvta-title-size:    52px;
  --mvta-title-weight:  800;
  --mvta-title-color:   #111111;
  --mvta-more-size:     17px;
  --mvta-more-color:    #111111;
  --mvta-more-weight:   700;

  /* Arrows */
  --mvta-arrow-active:   #111111;
  --mvta-arrow-disabled: #bbbbbb;
  --mvta-arrow-btn-size: 50px;

  /* Tabs */
  --mvta-tab-bg:           #f2f2f2;
  --mvta-tab-color:        #333333;
  --mvta-tab-radius:       20px;
  --mvta-tab-active-bg:    #111111;
  --mvta-tab-active-color: #ffffff;
  --mvta-tab-font-size:    14px;
  --mvta-tab-font-weight:  500;
  --mvta-tab-padding:      8px 20px;

  /* Scrubber */
  --mvta-progress-fill:   #111111;
  --mvta-progress-height: 3px;
  --mvta-progress-radius: 2px;
  --mvta-progress-cursor: 14px;
}

/* ── Wrap ─────────────────────────────────────────────── */
.mvta-wrap {
  font-family: var(--mvta-font);
  box-sizing:  border-box;
  width:       100%;
}

/* ── Tabs row (centered) ──────────────────────────────── */
.mvta-tabs-row {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             8px;
  margin-bottom:   20px;
}
.mvta-tab-btn {
  display:       inline-flex;
  align-items:   center;
  padding:       var(--mvta-tab-padding);
  background:    var(--mvta-tab-bg);
  color:         var(--mvta-tab-color);
  border:        none;
  border-radius: var(--mvta-tab-radius);
  font-size:     var(--mvta-tab-font-size);
  font-weight:   var(--mvta-tab-font-weight);
  cursor:        pointer;
  transition:    background 0.2s, color 0.2s;
  font-family:   var(--mvta-font);
  white-space:   nowrap;
}
.mvta-tab-btn:hover  { background: #e0e0e0; }
.mvta-tab-btn.active { background: var(--mvta-tab-active-bg); color: var(--mvta-tab-active-color); }

/* ── Header row ───────────────────────────────────────── */
.mvta-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 0 18px 0;
}
.mvta-header-left {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}
.mvta-title {
  font-size:   var(--mvta-title-size);
  font-weight: var(--mvta-title-weight);
  color:       var(--mvta-title-color);
  margin:      0;
  line-height: 1.2;
}
.mvta-more-link {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  font-size:       var(--mvta-more-size);
  font-weight:     var(--mvta-more-weight);
  color:           var(--mvta-more-color);
  text-decoration: none;
  white-space:     nowrap;
  transition:      opacity 0.2s;
}
.mvta-more-link:hover { opacity: 0.7; }
.mvta-more-link svg { width:15px; height:15px; flex-shrink:0; }
.mvta-more-plain {
  font-size:   var(--mvta-more-size);
  font-weight: var(--mvta-more-weight);
  color:       var(--mvta-more-color);
}

/* ── Arrow nav ────────────────────────────────────────── */
.mvta-nav {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}
.mvta-nav-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--mvta-arrow-btn-size);
  height:          var(--mvta-arrow-btn-size);
  border:          none;
  background:      transparent;
  cursor:          pointer;
  padding:         0;
  color:           var(--mvta-arrow-active);
  transition:      color 0.18s;
  user-select:     none;
}
.mvta-nav-btn.mvta-disabled { color: var(--mvta-arrow-disabled); cursor: default; }
.mvta-nav-btn svg {
  width:31px; height:31px; stroke:currentColor; fill:none;
  stroke-width:1; stroke-linecap:round; stroke-linejoin:round;
}
.mvta-nav-divider {
  display:block; width:1px; height:24px; background:#cccccc;
  flex-shrink:0; align-self:center; margin:0 2px;
}

/* ── Panel ────────────────────────────────────────────── */
.mvta-panel        { display: none; }
.mvta-panel.active { display: block; }

/* ── Product row — flexbox grid (4 cols) ──────────────── */
/*
  Картка mv_product_card.twig складається з двох кореневих div:
    1) #mv-product-layout.product-thumb  — зображення + назва + ціна
    2) .product-thumb.mvtools-product-thumb — кнопка "Купити"
  Всі стилі самої картки живуть у stylesheet.css теми — тут не дублюємо.
  Тут тільки вирівнювання комірок по висоті рядка.
*/
.mvta-product-row {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   stretch;
  margin-left:  -15px;
  margin-right: -15px;
  margin-bottom: 10px;
}
/* Комірка — flex-колонка, займає повну висоту рядка */
.mvta-product-row .mvta-product-col {
  display:        flex;
  flex-direction: column;
  box-sizing:     border-box;
}
/*
  .product-thumb має overflow:auto у stylesheet.css — знімаємо
  тільки в контексті модуля, щоб flex міг працювати всередині.
*/
.mvta-product-row .product-thumb {
  overflow: visible;
}
/*
  Перший блок картки (#mv-product-layout) розтягується на весь
  вільний простір — кнопка купити (.mvtools-product-thumb) залишається знизу.
*/
.mvta-product-row .mvta-product-col #mv-product-layout {
  flex: 1;
}
/* Прибираємо зайвий margin-bottom у product-layout всередині модуля */
.mvta-product-row .product-layout {
  margin-bottom: 20px;
}

/* ── Pagination scrubber ──────────────────────────────── */
.mvta-pagination-wrap {
  margin-top: 8px;
}
.mvta-progress-wrap {
  position:   relative;
  background: transparent;
  padding:    8px 0;
  cursor:     pointer;
  box-sizing: content-box;
}
.mvta-progress-track {
  position:   absolute;
  top:50%; left:0; right:0;
  height:     var(--mvta-progress-height);
  background: transparent;
  transform:  translateY(-50%);
}
.mvta-progress-fill {
  position:      absolute;
  top:           0;
  height:        100%;
  background:    var(--mvta-progress-fill);
  border-radius: var(--mvta-progress-radius);
  transition:    left 0.35s ease, width 0.35s ease;
  pointer-events:none;
  min-width:     8px;
}
.mvta-progress-cursor {
  position:       absolute;
  top:50%;
  width:          var(--mvta-progress-cursor);
  height:         var(--mvta-progress-cursor);
  background:     var(--mvta-progress-fill);
  border-radius:  50%;
  transform:      translate(-50%,-50%);
  transition:     left 0.35s ease, opacity 0.2s;
  pointer-events: none;
  opacity:        0;
  box-shadow:     0 1px 4px rgba(0,0,0,0.25);
}
.mvta-progress-wrap:hover .mvta-progress-cursor,
.mvta-progress-wrap.dragging .mvta-progress-cursor { opacity: 1; }
.mvta-progress-wrap.dragging .mvta-progress-fill,
.mvta-progress-wrap.dragging .mvta-progress-cursor { transition: none; }

.mvta-empty { color:#999; font-size:14px; padding:20px 0; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 991px) {
  .mvta-title { font-size: 26px; }
}
@media (max-width: 767px) {
  .mvta-title     { font-size: 22px; }
  .mvta-more-link { display: none; }
}