/* vk-pdp-gallery
   Split out of the monolithic product-page stylesheet so this section
   owns exactly one file. Do not merge these back together. */

.vpk-gallery {

    padding: var(--vpk-pad);

    display: flex;

    flex-direction: column;

    gap: 12px;

    min-width: 0;

    /* The hero grid aligns to start, so the image column used to end level
       with the image and leave ~600px of dead black beside the taller buy
       column. Sticky was the obvious fix but two ancestors clip their
       overflow (body's overflow-x and the .site wrapper), which silently
       cancels position:sticky. Stretching the column and centring the image
       in it gets the same result and cannot be broken from above. */

    align-self: stretch;

    justify-content: flex-start;

    overflow: hidden;

  }

.vpk-gallery__main {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    background: var(--vpk-surface);

    border: 1px solid var(--vpk-border);

    border-radius: var(--vpk-radius);

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

  }

.vpk-gallery__main img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition: opacity 0.3s ease;

  }

.vpk-gallery__thumbs {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding-bottom: 4px;

    scrollbar-width: thin;

    scrollbar-color: #333 transparent;

  }

.vpk-gallery__thumbs::-webkit-scrollbar {

    height: 4px;

  }

.vpk-gallery__thumbs::-webkit-scrollbar-track {

    background: transparent;

  }

.vpk-gallery__thumbs::-webkit-scrollbar-thumb {

    background: #333;

    border-radius: 2px;

  }

.vpk-gallery__thumb {

    flex: 0 0 72px;

    width: 72px;

    height: 72px;

    border: 2px solid var(--vpk-border);

    border-radius: 4px;

    overflow: hidden;

    cursor: pointer;

    background: var(--vpk-surface);

    transition: border-color 0.2s;

    padding: 0;

    outline: none;

  }

.vpk-gallery__thumb:hover {

    border-color: #444;

  }

.vpk-gallery__thumb.is-active {

    border-color: var(--vpk-lime);

  }

.vpk-gallery__thumb img {

    width: 100%;

    height: 100%;

    object-fit: contain;

  }

@media (max-width: 767px) {
  .vpk-gallery {

      width: 100% !important;

      align-self: auto;

    }
  .vpk-gallery__main {

      aspect-ratio: 4 / 3;

    }
  .vpk-gallery__thumb {

      flex: 0 0 48px;

      width: 48px;

      height: 48px;

    }
}