/* ------------------------------------------------------------------
 * Roket product gallery (acorus theme) - v3
 *
 * Desktop (>= 992px): vertical thumbnail rail to the LEFT of one large
 * main image; the whole image column is sticky while the product info
 * column scrolls.  Below 992px nothing is changed - the theme's own
 * slick carousel keeps running.
 *
 * Reference measured on onelife.lt (1440px):
 *   .product-gallery  position:sticky; top:96px; flex-row; gap:16px
 *   thumb rail        100px wide, 8px between 100px-square thumbs
 *   desktop breakpoint 992px, gap drops to 12px under 1400px
 *
 * The acorus grid this has to fit inside:
 *   >= 1200px  .container 1170  .max570 570  .max480 480  -> 120px slack
 *   992-1199   .container  940  .max570 455  .max480 425  ->  60px slack
 *   <= 1023    columns stack
 * ------------------------------------------------------------------ */

/* Rail is built by roket-gallery.v4.js; never show an empty one. */
.rk-thumbs:empty { display: none !important; }

.rk-thumb {
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    flex: 0 0 auto;
    transition: border-color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.rk-thumb:focus { outline: none; }
.rk-thumb:focus-visible { outline: 2px solid #93c01f; outline-offset: 2px; }
.rk-thumb:hover,
.rk-thumb.is-active { border-color: #93c01f; }
.rk-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
@supports not (aspect-ratio: 1 / 1) { .rk-thumb { height: 96px; } }

/* ---------- sticky enabler ----------
 * The theme's div.content is `overflow-x:hidden; overflow-y:auto`, which makes
 * it a scroll container and silently disables position:sticky for every
 * descendant.  `overflow-x: clip` clips identically but does NOT create a
 * scrollport, so sticky works again and no horizontal scrollbar appears.
 * Scoped to the product page, desktop only.  On a browser without `clip`
 * the whole @supports block is dropped and the gallery is simply not sticky. */
@media (min-width: 992px) {
    @supports (overflow-x: clip) {
        body#product .content {
            overflow-x: clip;
            overflow-y: visible;
        }
    }
}

/* ---------- desktop: layout ---------- */
@media (min-width: 992px) {

    body#product .max480.productimages {
        position: -webkit-sticky;
        position: sticky;
        /* Clears the theme's fixed header, which measures 142px on the product
           page, plus a little breathing room. At the previous 96px the main
           image slid underneath it as the page scrolled. */
        top: 157px;
        z-index: 2;
    }

    /* NB: this must apply to every desktop product page, not only ones with a
       rail.  The theme lets .product-images render ~1030px wide inside a 480px
       column (previously masked by slick + overflow:hidden); flex:1 1 0 with
       min-width:0 is what actually pins the main image to the column width. */
    body#product.rk-gallery-desktop .images-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    /* thumbnails LEFT, main image RIGHT */
    body#product.rk-gallery-desktop .images-container > .rk-thumbs { order: 0; }
    body#product.rk-gallery-desktop .images-container > .product-images,
    body#product.rk-gallery-desktop .images-container > .product-cover { order: 1; }

    body#product.rk-gallery-desktop .images-container > .product-images {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: 100%;
    }

    body#product.rk-gallery-thumbs .rk-thumbs {
        align-self: stretch;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        gap: 8px;
        scrollbar-width: thin;
    }
    body#product.rk-gallery-thumbs .rk-thumbs::-webkit-scrollbar { width: 4px; }
    body#product.rk-gallery-thumbs .rk-thumbs::-webkit-scrollbar-thumb {
        background: #d9d9d9; border-radius: 2px;
    }
}

/* 992-1199: container 940 = 455 info + 480 images (5px spare). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body#product.rk-gallery-thumbs .max480.productimages { max-width: 480px; }
    body#product.rk-gallery-desktop .images-container { gap: 12px; }
    body#product.rk-gallery-thumbs .rk-thumbs { flex: 0 0 72px; width: 72px; }
}

/* >= 1200: container 1170 = 570 info + 596 images (4px spare).
   Main image stays exactly 596-100-16 = 480px, i.e. unchanged from before. */
@media (min-width: 1200px) {
    body#product.rk-gallery-thumbs .max480.productimages { max-width: 596px; }
    body#product.rk-gallery-desktop .images-container { gap: 16px; }
    body#product.rk-gallery-thumbs .rk-thumbs { flex: 0 0 100px; width: 100px; }
}

/* ---------- desktop: one large main image instead of the 2-up carousel ---------- */
@media (min-width: 992px) {
    body#product.rk-gallery-desktop #main-gallery {
        position: relative;
        overflow: hidden;
        border-radius: 6px;
    }
    /* every image stays in the DOM (PhotoSwipe reads them for the lightbox)
       but only the current one is in flow and visible */
    body#product.rk-gallery-desktop #main-gallery > a {
        display: block;
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        opacity: 0;
        pointer-events: none;
    }
    body#product.rk-gallery-desktop #main-gallery > a.rk-current {
        position: relative;
        height: auto;
        opacity: 1;
        pointer-events: auto;
    }
    body#product.rk-gallery-desktop #main-gallery > a img {
        display: block;
        width: 100%;
        height: auto;
        cursor: zoom-in;
    }
    body#product.rk-gallery-desktop #main-gallery > .slick-arrow { display: none !important; }
}

/* ---------- tablet / mobile: leave the theme's carousel completely alone ---------- */
@media (max-width: 991.98px) {
    body#product .rk-thumbs { display: none !important; }
}

/* --- Product badge ------------------------------------------------------
 *
 * .flagblock is positioned against div.relative, which is the whole images
 * row - and that row now starts at the thumbnail rail rather than at the
 * main image. Its 20px inset therefore landed it on top of the thumbnails.
 * Push it past the rail and the gap so it sits on the corner of the main
 * image again, where it was before. Only while the rail is actually there.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body#product.rk-gallery-thumbs .flagblock { left: calc(20px + 72px + 12px); }
}

@media (min-width: 1200px) {
    body#product.rk-gallery-thumbs .flagblock { left: calc(20px + 100px + 16px); }
}

/* "This pack contains" list under a pack product - not shown. */
body#product .product-pack {
    display: none;
}