/*
 * The galleries on the slider engine (task gallery-on-slider-engine-11-10-2026): what a gallery needs whatever its
 * design — the product page's, a listing card's photos, a review's media. Loaded with the engine wherever a gallery
 * renders (cl_galleries_ensure_assets()); replaces public/assets/css/gallery.css, which every storefront page loaded.
 *
 * A gallery's markup: `.cl_gallery.cl_container.cl_slider` > `.cl-slides-viewport` (the photos' box: the track, the
 * arrows over it, the photo badges) + the navigation (`.cl_slider_nav`: an indicator, thumbnails or cards). The track
 * is `.cl-slides-container.cl_list`, each slide `.cl-gallery-slide.cl_slide`: `.cl_slide`, not `.cl_item`, so a
 * listing's column rules (`.cl_list .cl_item`) never reach a gallery in one of its cards. The current slide keeps
 * `.active` (the engine's `current_class`), which designs compiled before the move read. The look of each place is
 * its own: the product design's compiled CSS, plist1.css, reviewlist.css.
 */

/* No weight (:where): the product design's compiled root rule (`.cl-gallery-slider`, one class) sets the order
   of the photos and the navigation (thumbnails above: column-reverse) and the side column's reserve. */
:where(.cl_gallery.cl_container) {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The photos' box (`.cl-slides-viewport`, slider.css: every slider place has it) holds the arrows and the badges, so
   they centre on the photos only. */

/* The track: n photos per view from --cl-gallery-cols (1.5 = one photo and half the next), set by the place. */
.cl_gallery .cl-slides-container.cl_list {
    gap: var(--cl-gallery-track-gap, 6px);
}
.cl_gallery .cl-slides-container.cl_list > .cl-gallery-slide {
    /* Every slide is in the track (designs compiled before the move hid all but `.active`). */
    display: flex;
    justify-content: center;
    position: relative;
    flex: 0 0 calc((100% - (var(--cl-gallery-track-gap, 6px) * (var(--cl-gallery-cols, 1) - 1))) / var(--cl-gallery-cols, 1));
    height: auto;
}
@media (max-width: 767px) {
    /* Phones: one photo per view (no gallery has a phone value since 12-10-2026). */
    .cl_gallery .cl-slides-container.cl_list > .cl-gallery-slide {
        flex-basis: 100%;
    }
}
.cl_gallery .cl-gallery-slide img {
    max-height: 95vh;
    vertical-align: middle;
}
/* The product gallery: photos of mixed sizes form an even track (its compiled CSS sets the box's height or ratio). */
.cl_gallery.cl-gallery-slider .cl-gallery-slide img {
    width: 100%;
    object-fit: cover;
}

/* The arrows over the photos, 10 px from their sides (the arrows nav adds no box of its own, slider.css). */
.cl_gallery.cl_container .cl-slides-viewport .cl_slider_nav_arrows_overlay .cl_slider_arrows {
    left: 10px;
    right: 10px;
    z-index: 25;
}
/* The arrows' size, 36 px as the gallery's arrows always were — at one class of weight, as before, so a design
   preset that sets its own size still wins; listing cards and reviews set theirs (28 px). */
:where(.cl_gallery .cl-slides-viewport) .cl_slider_arrow {
    width: 36px;
    height: 36px;
}
/* Arrows without a design of their own (listing cards, reviews): a dark round button. */
.cl_gallery .cl_slider_arrow.cl-preset-0 {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    transition: background 0.2s ease;
}
.cl_gallery .cl_slider_arrow.cl-preset-0:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* The navigation: an indicator, thumbnails or cards, in the bar the place's classes place (`cl-slider-nav--*`,
   slider.css; `cl-gallery-nav--*` until 12-10-2026, whose rules let the bar keep a box and so put dots set to Top,
   Left, Right or Overlay bottom in the wrong place — F1). Dots over a photo sit on a dark pill, so they stay visible on
   a light one. */
.cl_gallery.cl-slider-nav--overlay .cl_slider_indicator:where(:not(.cl_slider_thumbs)) {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
}

/* A video slide's play button, on the current slide only: it opens the video in the lightbox. One class of weight
   (:where), as before the move: a design's own rules for it win. */
:where(.cl_gallery) .cl-video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.2s ease;
}
:where(.cl_gallery) .cl-video-play-overlay:hover {
    background: rgba(0, 0, 0, 0.7);
}
.cl_gallery .cl-gallery-slide:not(.cl-slider-current) .cl-video-play-overlay {
    display: none;
}
/* Without a lightbox (the quick view) the play mark only says the slide is a video. */
.cl_gallery .cl-video-play-overlay.cl-video-mark {
    cursor: inherit;
    pointer-events: none;
}

/* The full-screen button, on the current slide only. One class of weight (:where), as before the move: its
   design preset (two classes) gives it its look. */
:where(.cl_gallery) .cl-lightbox-trigger-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease;
}
:where(.cl_gallery) .cl-lightbox-trigger-icon:hover {
    transform: scale(1.1);
}
:where(.cl_gallery) .cl-lightbox-trigger-icon:active {
    transform: scale(0.95);
}
.cl_gallery .cl-gallery-slide:not(.cl-slider-current) .cl-lightbox-trigger-icon {
    display: none;
}
/* With a lightbox and no button, the current photo opens it. */
.cl_gallery[data-lightbox-enabled="1"]:not(:has(.cl-lightbox-trigger-icon)) .cl-gallery-slide.cl-slider-current img {
    cursor: zoom-in;
}