/* Product UI handoff adapted to ETARI 1.1.0. Upper duplicates are removed in HTML/JS; admin data stays intact. */

/* ── 3. Бренд. В данных у SIVIK нет brandLogo, поэтому product.js рендерит
      голый текст «SIVIK» — он висел в воздухе и читался как случайная строка.
      Оформляем текстовый бренд как плашку-лockup с подписью «Бренд»,
      чтобы до появления логотипа он выглядел намеренно.
      Как только в карточку товара добавят brandLogo, product.js повесит
      класс has-logo и покажет картинку — плашка сама уступит место. */
.product-page-v2 .product-brand:not(.has-logo){
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid #e6e3e5;
  border-radius: 11px;
  background: #fff;
  color: #1b181a;
  font: 800 17px/1.1 Manrope, Arial, sans-serif;
  letter-spacing: -.2px;
}
.product-page-v2 .product-brand:not(.has-logo)::before{
  content: "Бренд";
  color: #7c7679;
  font: 600 11px/1 Manrope, Arial, sans-serif;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.product-page-v2 .product-brand:not(.has-logo):hover{
  border-color: #cf0a2c;
  text-decoration: none;
}
.product-page-v2 .product-brand.has-logo{ display: flex; }

/* ── 4. Кнопки вариантов были разной ширины — размер задавался длиной
      подписи («Красный» против «Синий»), ряд выглядел рваным.
      Даём общую минимальную ширину и центрируем содержимое.
      Высота 44px и цвета остаются из store-pages.css. */
.product-page-v2 .detail-variants > div,
.product-page-v2 .linked-variant-field > div{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.product-page-v2 .variant-option,
.product-page-v2 .linked-variant-field button{
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 9px 13px;
  text-align: left;
  text-wrap: balance;
}
/* Кнопки без кружка (варианты-ссылки) — одна колонка, чтобы подпись
   не съезжала в правую половину. */
.product-page-v2 .linked-variant-field button{ grid-template-columns: minmax(0, 1fr); }
/* Кружок — фиксированный размер и своя колонка: во всех кнопках он
   на одной вертикали, подписи стартуют с одного отступа. */
.product-page-v2 .variant-option .variant-swatch{
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
}
.product-page-v2 .detail-variants > b,
.product-page-v2 .linked-variant-title{ font-size: 13px; }

/* ── 5. Фото занимает всю ширину своего островка: бренд и варианты переехали
      в островок покупки, колонки рядом с фото больше нет. */
@media (min-width: 1101px){
  .product-page-v2 .product-gallery-thumbs button{
    flex-basis: 104px;
    width: 104px;
    height: 104px;
  }
}
/* ── 8. Стандарт фото — квадрат 1:1 (1600×1600). Область под фото раньше
      задавалась фиксированной высотой, из-за чего у квадратных снимков
      оставались белые поля слева и справа. Теперь блок сам квадратный
      и подстраивается под ширину островка. */
.product-page-v2 .product-gallery{
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1 / 1;
}
/* ── 7. Много фото (10–20): полоса миниатюр переносилась в 3–4 ряда
      и вырастала с 104px до 300+px, распирая карточку. Держим один ряд
      с горизонтальной прокруткой — высота блока не зависит от числа фото.
      Активную миниатюру подкручивает product-fixes.js. */
.product-page-v2 .product-gallery-thumbs{
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #d7d2d5 transparent;
  padding-bottom: 8px;
}
.product-page-v2 .product-gallery-thumbs button{ scroll-snap-align: center; }
/* Признак «есть ещё фото»: полосу прокрутки Chromium рисует оверлеем и она
   не всегда видна, поэтому подкрашиваем края затуханием. Сторону ставит
   product-fixes.js (data-fade), маска работает по видимой части полосы. */
.product-page-v2 .product-gallery-thumbs[data-fade="end"]{
  -webkit-mask-image: linear-gradient(to right, #000 0 86%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0 86%, transparent 100%);
}
.product-page-v2 .product-gallery-thumbs[data-fade="start"]{
  -webkit-mask-image: linear-gradient(to left, #000 0 86%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0 86%, transparent 100%);
}
.product-page-v2 .product-gallery-thumbs[data-fade="both"]{
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14% 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14% 86%, transparent 100%);
}
.product-page-v2 .product-gallery-thumbs::-webkit-scrollbar{
  display: block !important;
  height: 6px;
}
.product-page-v2 .product-gallery-thumbs::-webkit-scrollbar-track{
  background: transparent;
}
.product-page-v2 .product-gallery-thumbs::-webkit-scrollbar-thumb{
  border-radius: 3px;
  background: #d7d2d5;
}
/* Мобильные точки: при большом числе фото ряд точек занимал две строки.
   Оставляем один ряд и разрешаем прокрутку. */
@media (max-width: 768px){
  .product-page-v2 .product-gallery-dots{
    justify-content: safe center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .product-page-v2 .product-gallery-dots::-webkit-scrollbar{ display: none; }
}

/* ── 6. Клик по фото открывает его крупно (лайтбокс).
      Разметку строит product-fixes.js. */
.product-page-v2 .product-gallery-media{ cursor: zoom-in; }
.etari-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 26px 26px 22px;
  background: rgba(18, 14, 16, .92);
  opacity: 0;
  transition: opacity .18s ease;
}
.etari-lightbox[data-open]{ opacity: 1; }
.etari-lightbox-stage{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y pinch-zoom;
}
.etari-lightbox-stage img{
  /* Абсолютом внутри сцены: процентный max-height в 1fr-строке браузер
     игнорирует, и фото вылезало за экран поверх миниатюр. */
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  user-select: none;
  transition: transform .2s ease;
  /* Фото растянуто на всю сцену, поэтому клики по тёмному полю вокруг
     снимка попадали в него; попадание в сам снимок считает product-fixes.js. */
  pointer-events: none;
}
/* Курсор подсказывает зум только над самим снимком — размер сцены равен
   размеру снимка по одной из сторон, поэтому ставим его на сцену. */
.etari-lightbox-stage{ cursor: zoom-in; }
.etari-lightbox[data-zoom] .etari-lightbox-stage{ cursor: zoom-out; }
.etari-lightbox[data-zoom] .etari-lightbox-thumbs{ opacity: .35; }
.etari-lightbox-close,
.etari-lightbox-arrow{
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.etari-lightbox-close:hover,
.etari-lightbox-arrow:hover{ background: rgba(0, 0, 0, .8); }
.etari-lightbox-close{ top: 18px; right: 22px; }
.etari-lightbox-arrow.previous{ left: 22px; top: 50%; transform: translateY(-50%); }
.etari-lightbox-arrow.next{ right: 22px; top: 50%; transform: translateY(-50%); }
.etari-lightbox-thumbs{
  display: flex;
  justify-content: safe center;
  flex-wrap: nowrap;
  overflow-x: auto;
  min-width: 0;
  padding: 4px;
  gap: 10px;
}
.etari-lightbox-thumbs button{
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
}
.etari-lightbox-thumbs button[aria-current="true"]{
  border-color: #fff;
  background: rgba(255, 255, 255, .16);
}
.etari-lightbox-thumbs img{ width: 100%; height: 100%; object-fit: contain; }
.etari-lightbox-counter{
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 8px;
  pointer-events: none;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font: 600 13px/1 Manrope, Arial, sans-serif;
}
body.etari-lightbox-open{ overflow: hidden; }
@media (max-width: 640px){
  .etari-lightbox{ padding: 16px 12px 14px; }
  .etari-lightbox-close,
  .etari-lightbox-arrow{ width: 44px; height: 44px; font-size: 20px; }
  .etari-lightbox-close{ top: 10px; right: 10px; }
  .etari-lightbox-arrow.previous{ left: 8px; }
  .etari-lightbox-arrow.next{ right: 8px; }
  .etari-lightbox-thumbs{ display: none; }
}

@media (min-width: 769px) and (max-width: 1100px){
  .product-page-v2 .product-details,
  .product-page-v2 .product-overview-row{ gap: 16px; }
  .product-page-v2 .product-gallery-column{ border-radius: 16px; }
}

/* ── 9. При смене цвета страница подпрыгивала на 10px: у доступного варианта
      бейдж наличия — плашка с отбивкой (28px), у недоступного — простой
      текст (18px). Даём обоим состояниям одинаковую геометрию, разный
      только цвет. */
.product-page-v2 .detail-availability{
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 7px;
  line-height: 18px;
}
.product-page-v2 .detail-availability.out-stock{
  background: #f1eef0;
  color: #6a6367;
}

.etari-lightbox [hidden]{ display: none !important; }
.etari-lightbox button:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  .etari-lightbox, .etari-lightbox *{ transition: none !important; scroll-behavior: auto; }
}

/* Shared handoff additions limited to the product page. */
body.product-body .unified-header .search{ align-items: center; }
body.product-body .unified-header .search > button[type="submit"]{
  align-self: center;
  margin-block: 0;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
}
/* ── 9. Карточки товара обрезаются снизу везде, кроме главной.
      В style.css (строки 1059 и 1221) задана фиксированная высота
      `.storefront-product-card.has-secondary-purchase{height:491px}` при ≥601px,
      а исключение прописано только для рядов главной
      (`.home-page .horizontal-showcase #products` / `.summer-hit-grid`).

      Везде, где карточка стоит в сетке — вкладки «Запчасти» и «Доп. оборудование»
      на странице товара, состав комплекта, каталог, — контенту нужно 520px,
      и `overflow:hidden` срезает 29px: кнопка «Купить в Kaspi» уходит под край.

      Отпускаем высоту, оставляя min-height: в гриде карточки и так растягиваются
      по высоте строки, поэтому ряд остаётся ровным. */
@media (min-width: 601px){
  body.product-body .additional-equipment-groups .storefront-product-card,
  body.product-body .product-tab-panel .storefront-product-card,
  body.product-body .product-bundle-items .storefront-product-card,
  body.product-body .catalog-results .storefront-product-card{
    height: auto !important;
    min-height: 491px;
    overflow: visible;
  }
}

/* ── 10. Десктоп: поиску не хватало места.
      Логотип 190px + «Каталог» 124px + три действия по 76px — всё сжималось
      за счёт поиска (поле ввода: 1280px — 578, 1100px — 400, 1024px — 325, 900px — 201).
      Порядок элементов оставляем родной: логотип · Каталог · поиск · действия.
      На 900–1199px ужимаем логотип и кнопки действий — разница уходит поиску. */
@media (min-width: 900px){
  body.product-body .unified-header.header{ align-items: center; }
  body.product-body .unified-header .search{ flex: 1 1 auto; }
}
@media (min-width: 900px) and (max-width: 1199px){
  body.product-body .unified-header .brand-logo{ width: 150px !important; }
  body.product-body .unified-header .header-action,
  body.product-body .unified-header #cartButton,
  body.product-body .unified-header .language-select{
    width: 62px !important;
    min-width: 62px !important;
  }
  body.product-body .unified-header .catalog-btn{ padding-inline: 14px !important; }
}

/* ── 11. Мобильная шапка дублировала нижнюю панель.
      При ≤899px внизу уже стоит `.storefront-bottom-nav`
      с пунктами Главная · Каталог · Корзина · Кабинет (style.css, строка 1899),
      а те же три кнопки дублировались в шапке и отбирали место у поиска.
      Убираем дубли из шапки — остаются логотип, поиск и язык в один ряд. */
@media (max-width: 899px){
  body.product-body .unified-header .catalog-btn,
  body.product-body .unified-header .account-action,
  body.product-body .unified-header .orders-action,
  body.product-body .unified-header #cartButton{ display: none !important; }
  body.product-body .unified-header.header{
    grid-template-columns: 112px minmax(0, 1fr) 48px !important;
    grid-template-areas: "brand search language" !important;
    align-items: center;
  }
  body.product-body .unified-header .search:not(.is-open){ width: 100% !important; }
}
/* 601–899px шапка остаётся flex — гридовые правила выше там не работают,
   а двухрядную высоту давал высокий логотип. */
@media (min-width: 601px) and (max-width: 899px){
  body.product-body .unified-header.header{
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    height: 76px !important;
    min-height: 0 !important;
    padding: 0 14px !important;
  }
  body.product-body .unified-header .brand-logo{ width: 150px !important; flex: none; }
  body.product-body .unified-header .brand-logo img{ height: auto !important; }
  body.product-body .unified-header .search{ flex: 1 1 auto; }
  body.product-body .unified-header .language-select{ flex: none; width: 56px !important; min-width: 56px !important; }
}


/* Replacement navigation must work throughout the tablet range. */
@media(min-width:701px) and (max-width:899px){
  body.product-body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  body.product-body .storefront-bottom-nav{
    position:fixed;
    z-index:80;
    right:0;
    bottom:0;
    left:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    height:calc(68px + env(safe-area-inset-bottom));
    padding:5px max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));
    border-top:1px solid #e4e1e2;
    background:rgba(255,255,255,.97);
    box-shadow:0 -8px 24px rgba(38,25,30,.08);
    backdrop-filter:blur(16px);
  }
  body.product-body .storefront-bottom-nav a,
  body.product-body .storefront-bottom-nav button{
    position:relative;
    display:flex;
    min-width:0;
    min-height:48px;
    padding:0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border:0;
    background:transparent;
    color:#737a83;
    font:650 10px/1.15 Manrope,sans-serif;
    text-decoration:none;
    cursor:pointer;
  }
  body.product-body .storefront-bottom-nav i{font-size:24px;line-height:1}
  body.product-body .storefront-bottom-nav .active{color:#cf0c2c;font-weight:800}
  body.product-body .storefront-bottom-nav small{
    position:absolute;
    top:1px;
    left:calc(50% + 7px);
    min-width:17px;
    padding:2px 5px;
    border-radius:999px;
    background:#087df5;
    color:#fff;
    font:800 9px/1 Manrope,sans-serif;
  }
  body.product-body .storefront-bottom-nav small[hidden]{display:none}
}


/* Preserve access to city and telephone above the compact header. */
@media(max-width:899px){
  body.product-body>.topline{display:block!important;height:30px;background:#252525}
  body.product-body .topin{width:100%;height:30px;padding:0 20px;gap:0}
  body.product-body .topline-left{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}
  body.product-body .top-city{display:flex;align-items:center;gap:4px;padding:0;border:0;background:transparent;color:#ddd;font:700 12px/20px Manrope,Arial,sans-serif;cursor:pointer}
  body.product-body .top-city i:first-child,body.product-body .top-phone i{display:none}
  body.product-body .top-city i:last-child{font-size:9px}
  body.product-body .top-phone{margin:0;color:#ddd;font-size:12px;line-height:20px;white-space:nowrap}
  body.product-body .topline .callback-link,body.product-body .topline .top-socials,body.product-body .topline-menu{display:none}
}

body.product-body .site-search-clear, body.product-body .site-search-close{ min-width: 30px; min-height: 34px; }

body.product-body .unified-header input,
body.product-body .unified-header button,
.product-page-v2 .variant-option,
.product-page-v2 .linked-variant-field button{ font-family: Manrope, Arial, sans-serif; }