/* sidebar.css
   Общий файл стилей Sidebar и каркаса страницы модели.
   Подключается в:
     - SPA:    static/index.html  →  <link rel="stylesheet" href="/static/sidebar.css">
     - Astro:  Layout.astro       →  <link rel="stylesheet" href="/static/sidebar.css">
   Изменения — только здесь. Никаких копий в Sidebar.astro или styles.css.
*/

/* === Sidebar (перенос 1-в-1 из Sidebar.astro) === */

.model-sidebar {
  flex: 0 0 260px;
  width: 260px;
  position: sticky;
  top: 20px;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  align-self: flex-start;
}

.model-sidebar__h1 {
  font-family: 'Jost', sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  margin: 0 0 12px 0;
}

.model-sidebar__card {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
}

.model-sidebar > .model-sidebar__card {
  margin-bottom: 7px;
}

.model-sidebar__card-link {
  text-decoration: none;
  color: inherit;
  transition: border 0.3s, transform 0.3s;
  cursor: pointer;
  transform-origin: center;
}

@media (hover: hover) {
  .model-sidebar__card-link:hover {
    border: 1px solid #0959A5;
    transform: scale(1.02);
    z-index: 1000;
  }
}

.model-sidebar__photo {
  width: 60px;
  height: 42px;
  background: #fff;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 20px;
  overflow: hidden;
}

.model-sidebar__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.model-sidebar__info {
  font-size: 12px;
  line-height: 1.4;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.model-sidebar__name {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-sidebar__price { color: #333; }
.model-sidebar__price-promo { color: #1e8449; font-weight: 500; }
.model-sidebar__offers { color: #666; }

.model-sidebar__sort-wrap {
  width: 100%;
  margin: 0 0 12px;
}

.model-sidebar #sortBy.model-sidebar__sort {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 6px;
  border: 1px solid #0959A5;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  line-height: 1.2;
  height: auto;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

.model-sidebar #sortBy.model-sidebar__sort:focus {
  outline: none;
  border-color: #0959A5;
}

.model-sidebar__related-heading {
  font-family: 'Jost', sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  margin: 0 0 12px 0;
}

.model-sidebar__related {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.model-sidebar__related .model-sidebar__card:last-child {
  margin-bottom: 0;
}

/* === Каркас страницы модели: Sidebar + каталог === */
/* Перенос 1-в-1 из <style is:global> в [slug].astro.
   Используется и в Astro (страница модели), и в SPA (каталог). */

.model-layout {
  display: flex;
  gap: 2px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  align-items: flex-start;
}

.model-layout .products-section {
  flex: 1 1 auto;
  min-width: 0;
}

.model-layout .products-section .container {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* === Мобильная версия (≤768px) === */
/* Скрываем Sidebar, каталог на всю ширину.
   Карточки — по правилам .products-grid из styles.css (2 колонки, 178.81px). */
@media (max-width: 768px) {
  .model-sidebar {
    display: none;
  }

  .model-layout {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }

  .model-layout .products-section {
    flex: 1 1 100%;
  }
}

/* === Семантика заголовков (закрытие 3.1) === */
/* ProductCard.astro: <h3 class="store-name"> — сброс браузерных дефолтов
   (bold + font-size 1.17em), проверено в DevTools. */
.product-card-v15 .store-row .store-name {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
}

/* === Каталог: 3 колонки только на десктопе === */
/* На мобилке (≤768px) правило не применяется — работают стили
   .products-grid из styles.css (2 колонки + мобильные карточки). */
@media (min-width: 769px) {
  .model-layout .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* === Мобильная карусель «Похожие модели» === */
/* По умолчанию скрыта, показывается только на мобилке (≤768px). */
.related-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Убираем 30px margin-top у пустой пагинации */
  .pagination:empty {
    margin-top: 0;
    display: none;
  }

  .related-mobile {
    display: block;
    padding: 10px 0 12px;
  }

  .related-mobile__title {
    font-family: 'Jost', sans-serif;
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
    margin: 0 0 12px 6px;
  }

  .related-mobile__wrapper {
    position: relative;
  }

  .related-mobile__carousel {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .related-mobile__carousel::-webkit-scrollbar {
    display: none;
  }

  .related-mobile__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 200px;
    width: 200px;
    max-width: 200px;
    min-width: 0;
    box-sizing: border-box;
    scroll-snap-align: start;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    overflow: hidden;
    margin: 0;
    font-size: 12px;
  }

  .related-mobile__name {
    width: 100%;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    margin: 0;
  }

  .related-mobile__row {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .related-mobile__photo {
    width: 80px;
    height: 56px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 20px;
    overflow: hidden;
  }

  .related-mobile__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .related-mobile__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    text-align: center;
  }

  .related-mobile__price {
    color: #333;
  }

  .related-mobile__price-promo {
    color: #1e8449;
    font-weight: 500;
  }

  .related-mobile__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
  }

  .related-mobile__arrow--prev {
    left: 16px;
  }

  .related-mobile__arrow--next {
    right: 16px;
  }
}