/* Остаток блока {% style %} #1 из sections/main-product.liquid темы HT.
 * Порт брал из этого блока ТОЛЬКО первую, Liquid-зависимую часть
 * (.section-<id>-padding, её index.tsx по-прежнему генерирует сам), а всё
 * остальное — 3118 байт чистого CSS — терял.
 *
 * ★ Что из-за этого было сломано на ПК 1280 (приёмка 2026-08-30):
 *   product-info > .page-width { overflow: visible !important }  @media 990
 *     У .page-width из base.css стоит overflow:hidden. Он не только ломает
 *     sticky, но и НЕ ДАЁТ схлопнуться margin-top:30px у .product: у нас эти
 *     30 px оказывались ВНУТРИ секции (main начинался на 212 против живых 242
 *     и был на 30 px выше), у живого — снаружи.
 *   .product__media-wrapper { position:sticky; top:20px; align-self:flex-start }
 *     Левая колонка с галереей у нас не липла вовсе (position:relative).
 *
 * Извлечён из темы скриптом, не переписан руками.
 * ⚠️ Обновлять при каждом `shopify theme pull` — живёт в самом .liquid.
 */
.bundle-products > .bundle-product_container:first-of-type {
  border-bottom:none;
}

    /* Sticky product image (left column) on desktop - image follows scroll, releases at end of product section. page-width overflow:hidden breaks sticky, so allow visible on desktop. */
    @media screen and (min-width: 990px) {
      product-info > .page-width { overflow: visible !important; }
      .product__media-wrapper {
        position: sticky !important;
        top: 20px !important;
        align-self: flex-start !important;
      }
    }

    /* Instagram-style gallery carousel (desktop + mobile): all slides in a swipeable scroll-snap row + clean dots. Desktop adds hover arrows + mouse drag. */
    media-gallery { position: relative; }
    media-gallery .product__media-list.slider {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      gap: 0 !important;
      padding: 0 !important;
      scroll-padding: 0 !important;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    media-gallery .product__media-list.slider::-webkit-scrollbar { display: none; }
    media-gallery .product__media-list.slider.pg-dragging { scroll-behavior: auto; scroll-snap-type: none; }
    media-gallery .product__media-list.slider > .product__media-item {
      display: block !important;
      flex: 0 0 100% !important;
      width: 100% !important;
      max-width: 100% !important;
      scroll-snap-align: start;
    }
    /* hide Dawn thumbnails (desktop + mobile) - replaced by own clean dots */
    media-gallery .thumbnail-slider { display: none !important; }
    media-gallery .product__media-list,
    media-gallery .product__media-list img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
    .pg-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
    .pg-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, .28); cursor: pointer; transition: transform .2s ease, background .2s ease; }
    .pg-dots button.is-active { background: #000000; transform: scale(1.35); }
    @media screen and (min-width: 990px) {
      media-gallery .product__media-list.slider { cursor: grab; }
      media-gallery .product__media-list.slider.pg-dragging { cursor: grabbing; }
      .pg-arrow {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 42px; height: 42px; border-radius: 50%;
        background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 2px 10px rgba(0,0,0,.18);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; opacity: 0; transition: opacity .2s ease; z-index: 4;
        color: #000000; font-size: 24px; line-height: 1; padding: 0 0 3px 0;
      }
      media-gallery:hover .pg-arrow { opacity: 1; }
      .pg-arrow--prev { left: 12px; }
      .pg-arrow--next { right: 12px; }
      .pg-arrow[disabled] { opacity: 0 !important; pointer-events: none; }
    }