/*
 * The slider engine's styles, for every place that slides. Moved out of list.css on 11-10-2026 unchanged and in
 * order; where both load, this one prints after list.css.
 */
/* Slider mode: hide vertical scrollbar caused by cumulative gap overflow.
   Slider handles its own horizontal scroll via .cl_list overflow-x. */
.cl_container.cl_slider .cl_reset_buttons_and_list_and_pagination {
    overflow: hidden;
}

/* ====================================================
 * Slider — shared structural layout for any listing
 * The .cl_slider class is added dynamically when pagination_type=slider.
 * Specificity: 0-3-0 — intentionally beats .plist1 .cl_list (0-2-0)
 *   from instance generated_css, ensuring flex overrides grid.
 * Config-dependent values: the slide width per column count lives in each
 *   design's compiled CSS (it needs the gap) as `.cl-cols-{n}` / `.cl-mcols-{n}`
 *   rules; the gap and button colours come from the design's own settings.
 * ==================================================== */

.cl_container.cl_slider .cl_list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Shoppers who ask for reduced motion scroll the slider instantly. slider_cl passes behavior 'auto' for them, and
   'auto' follows this property, so without this rule they still got the smooth scroll (WCAG 2.3.3, technique C39).
   Everyone else keeps it: the script asks for 'smooth' explicitly. */
@media (prefers-reduced-motion: reduce) {
    .cl_container.cl_slider .cl_list {
        scroll-behavior: auto;
    }
}

.cl_container.cl_slider .cl_list::-webkit-scrollbar {
    display: none;
}

.cl_container.cl_slider .cl_list .cl_item,
.cl_container.cl_slider .cl_list .cl_product,
.cl_container.cl_slider .cl_list > .cl_slide {
    scroll-snap-align: start;
    min-width: 0;
}

/* Slider nav always stretches full width regardless of pagination_position
   (align-items on .list-pagination-wrapper would otherwise shrink it) */
.cl_container.cl_slider .cl_slider_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;
    align-self: stretch;
}

/* --- A slider place: the hero slider and the galleries (task product-gallery-on-slider-designs-12-10-2026) ---
   `.cl-slider-place` holds the slides' box (`.cl-slides-viewport`: the track and the arrows over it) and the
   navigation bar (a direct `.cl_slider_nav` child: the indicator, thumbnails or cards, the arrows beside them, the
   pause button). The root's classes place the bar, three choices (SliderControllerFR_cl::getPlaceClass(); task
   navigation-side-positions-12-10-2026): `cl-slider-nav--{bottom|top|start|end}` the edge, `cl-slider-nav--overlay`
   over the slides (outside them without it), `cl-slider-nav--align-{start|end}` along the edge (centred without it).
   The bar is one group in every place: over the slides too, where its pause button sits with the indicator (Dawn's
   slideshow controls and the W3C APG carousel group them; until 12-10-2026 the indicator and the pause button were
   placed one by one there, and arrows beside the indicator stayed under the slides). The design compiles what depends
   on its values: the distances over the slides, a side column's width, the phone layout of pictures at a side (the
   slider's Navigation block). */
.cl_container.cl_slider.cl-slider-place {
    position: relative;
    display: flex;
    flex-direction: column;
}
.cl_container.cl_slider .cl-slides-viewport {
    position: relative;
    width: 100%;
    min-width: 0;
}
/* The arrows over the slides add no box: their row is placed in the slides' box (arrows_overlay below). Same weight
   as the bar's rule above, and after it. */
.cl_container.cl_slider .cl-slides-viewport > .cl_slider_nav {
    display: contents;
}
/* Above the slides. */
.cl-slider-place.cl-slider-nav--top > .cl_slider_nav {
    order: -1;
}
/* A column beside the slides. A row follows the page's direction, so the start side is the right one on a
   right-to-left page (Material and Apple's HIG mirror what follows the reading order). */
.cl_container.cl_slider.cl-slider-place:is(.cl-slider-nav--start, .cl-slider-nav--end):not(.cl-slider-nav--overlay) {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
}
.cl-slider-place:is(.cl-slider-nav--start, .cl-slider-nav--end):not(.cl-slider-nav--overlay) > .cl-slides-viewport {
    flex: 1 1 auto;
}
.cl_container.cl_slider.cl-slider-place:is(.cl-slider-nav--start, .cl-slider-nav--end) > .cl_slider_nav {
    flex: 0 0 auto;
    flex-direction: column;
    padding: 0;
}
.cl-slider-place.cl-slider-nav--start:not(.cl-slider-nav--overlay) > .cl_slider_nav {
    order: -1;
}
.cl-slider-place:is(.cl-slider-nav--start, .cl-slider-nav--end) .cl_slider_indicator:not(.cl_slider_thumbs) {
    flex-direction: column;
    flex-wrap: nowrap;
}

/* Along the edge: centred (the bar's own rule above), or at the edge's start or end — the start of a row is the
   reading direction's, the start of a column its top. An indicator that takes the bar's free room (arrows at one end of
   it, or alone in it) places its dots the same way; thumbnails and cards are placed by the bar, or inside a side
   column by the design. */
.cl_container.cl_slider.cl-slider-place.cl-slider-nav--align-start > .cl_slider_nav {
    justify-content: flex-start;
}
.cl_container.cl_slider.cl-slider-place.cl-slider-nav--align-end > .cl_slider_nav {
    justify-content: flex-end;
}
.cl_container.cl_slider.cl-slider-place > .cl_slider_nav .cl_slider_indicator:where(:not(.cl_slider_thumbs)) {
    justify-content: center;
}
.cl_container.cl_slider.cl-slider-place.cl-slider-nav--align-start > .cl_slider_nav .cl_slider_indicator:where(:not(.cl_slider_thumbs)) {
    justify-content: flex-start;
}
.cl_container.cl_slider.cl-slider-place.cl-slider-nav--align-end > .cl_slider_nav .cl_slider_indicator:where(:not(.cl_slider_thumbs)) {
    justify-content: flex-end;
}

/* Over the slides: the bar adds no box and sits on the slides as one group, 12 px from the edges unless the design
   compiles its own distances — along the bottom or the top edge (a row as wide as the slides, its items placed by the
   alignment), or at a side (a column as tall as the slides). Its empty room lets clicks through to the slide. The
   place keeps no gap under the slides (a gallery's is 10 px, slider-gallery.css): the bar is placed from the place's
   edges, which are then the slides' (12-10-2026: the gap put a gallery's dots 2 px from the photo's edge instead of
   12). */
.cl_container.cl_slider.cl-slider-place.cl-slider-nav--overlay {
    gap: 0;
}
.cl_container.cl_slider.cl-slider-place.cl-slider-nav--overlay > .cl_slider_nav {
    position: absolute;
    z-index: 26;
    box-sizing: border-box;
    padding: 0;
    pointer-events: none;
}
.cl-slider-place.cl-slider-nav--overlay > .cl_slider_nav > * {
    pointer-events: auto;
}
.cl-slider-place.cl-slider-nav--overlay:is(.cl-slider-nav--bottom, .cl-slider-nav--top) > .cl_slider_nav {
    left: 12px;
    right: 12px;
}
.cl-slider-place.cl-slider-nav--overlay.cl-slider-nav--bottom > .cl_slider_nav {
    bottom: 12px;
}
.cl-slider-place.cl-slider-nav--overlay.cl-slider-nav--top > .cl_slider_nav {
    top: 12px;
}
.cl-slider-place.cl-slider-nav--overlay:is(.cl-slider-nav--start, .cl-slider-nav--end) > .cl_slider_nav {
    top: 12px;
    bottom: 12px;
}
.cl-slider-place.cl-slider-nav--overlay.cl-slider-nav--start > .cl_slider_nav {
    inset-inline-start: 12px;
}
.cl-slider-place.cl-slider-nav--overlay.cl-slider-nav--end > .cl_slider_nav {
    inset-inline-end: 12px;
}
/* On the slides, the drawn dots, dashes, numbers and fraction keep their own width: the bar's only-child rule (below)
   stretches an indicator alone in the bar — autoplay off, so no pause button — to the slider's width, which over the
   slides spread a gallery's pill across the photo (12-10-2026). A progress bar or a scrollbar keeps that width. */
.cl_container.cl_slider.cl-slider-place.cl-slider-nav--overlay > .cl_slider_nav .cl_slider_indicator:not([data-indicator-type="progress_bar"], [data-indicator-type="scrollbar"]) {
    width: auto;
}

.cl_container.cl_slider .cl_slider_arrows {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* One class of weight (:where), so the arrow's design preset (two classes) keeps its padding and minimum size: at
   three classes this rule beat it, and a preset's 44 px floor measured 25 px on the galleries (G93, 12-10-2026). */
:where(.cl_container.cl_slider) .cl_slider_arrow {
    /* Defensive 25px floor for both axes — a listing design sets the actual
       width/height with its Arrow size inputs (`slider_arrow_style`, compiled
       into the design's CSS). Using min-* (not fixed `height`)
       so admin's `height` from per-instance generated_css wins via cascade.
       The 25px floor protects against accidentally invisible
       arrows on misconfigured stores. */
    padding: 0px;
    min-width: 25px;
    min-height: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.cl_container.cl_slider .cl_slider_arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Right-to-left page: the arrows already swap sides (their flex `order` follows `direction`), but an <svg> is never
   mirrored by the browser, so previous kept pointing left and next right — both inward. Mirror the icon so previous
   points right and next left (Material "Bidirectionality": back and forward navigation buttons are reversed; Apple
   HIG "Right to left": next / previous buttons flip to match the reading order — resources/ui-standards/rtl-mirroring-standards.md).
   Every arrow icon is an <svg>: the default chevrons and any icon picked in the icon manager. Left alone: play / pause
   (a media control, its own class) and the gallery's ❮ ❯ characters, which the browser already mirrors. */
[dir="rtl"] .cl_slider_arrow svg {
    transform: scaleX(-1);
}

/* Play/pause button — rendered whenever a slider autoplays (per ARIA APG
   mandate that visible pause control must exist when autoplay is on),
   except in a product card's strips. Default visual is a unicode triangle / pause-bars rendered
   via ::before so the underlying HTML stays icon-agnostic and admins
   can swap the symbol via CSS without touching the view template. */
.cl_container.cl_slider .cl_slider_playpause {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
    opacity: 0.7;
    font-size: 14px;
    line-height: 1;
}
.cl_container.cl_slider .cl_slider_playpause:hover,
.cl_container.cl_slider .cl_slider_playpause:focus-visible {
    opacity: 1;
}
.cl_container.cl_slider .cl_slider_playpause.is-playing::before {
    content: "\23F8"; /* ⏸ pause */
}
.cl_container.cl_slider .cl_slider_playpause.is-paused::before {
    content: "\25B6"; /* ▶ play */
}

/* --- Nav layout: arrows_sides (default) — ‹ indicator › --- */
.cl_container.cl_slider .cl_slider_nav_arrows_sides .cl_slider_arrows {
    display: contents;
}
.cl_container.cl_slider .cl_slider_nav_arrows_sides .cl_slider_prev {
    order: 1;
}
.cl_container.cl_slider .cl_slider_nav_arrows_sides .cl_slider_indicator {
    order: 2;
}
.cl_container.cl_slider .cl_slider_nav_arrows_sides .cl_slider_next {
    order: 3;
}

/* --- Nav layout: arrows_end — indicator ‹ › --- */
.cl_container.cl_slider .cl_slider_nav_arrows_end {
    justify-content: space-between;
    align-self: stretch;
}
.cl_container.cl_slider .cl_slider_nav_arrows_end .cl_slider_indicator {
    order: 1;
    flex-grow: 1;
}
.cl_container.cl_slider .cl_slider_nav_arrows_end .cl_slider_arrows {
    order: 2;
}

/* --- Nav layout: arrows_start — ‹ › indicator --- */
.cl_container.cl_slider .cl_slider_nav_arrows_start {
    justify-content: space-between;
    align-self: stretch;
}
.cl_container.cl_slider .cl_slider_nav_arrows_start .cl_slider_arrows {
    order: 1;
}
.cl_container.cl_slider .cl_slider_nav_arrows_start .cl_slider_indicator {
    order: 2;
    flex-grow: 1;
}

/* --- Nav layout: arrows_overlay — arrows float over slider edges --- */
.cl_container.cl_slider .cl_slider_nav_arrows_overlay {
    position: static;
    justify-content: center;
}
/* position:relative on .cl_list_and_pagination so overlay arrows anchor to
   the slider+pagination area, not .cl_container (which includes filters). */
.cl_container.cl_slider:has(.cl_slider_nav_arrows_overlay) .cl_list_and_pagination {
    position: relative;
}
.cl_container.cl_slider .cl_slider_nav_arrows_overlay .cl_slider_arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
}
.cl_container.cl_slider .cl_slider_nav_arrows_overlay .cl_slider_arrow {
    pointer-events: auto;
}
.cl_container.cl_slider .cl_slider_nav_arrows_overlay .cl_slider_indicator {
    order: 1;
}

/* --- Indicator container (shared) --- */
/* Not the place's thumbnails or cards (`.cl_slider_thumbs`): their strip is the place's own layout (see below);
   :where() keeps these rules' weight as it was. */
.cl_container.cl_slider .cl_slider_indicator:where(:not(.cl_slider_thumbs)) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* When indicator is the only child (arrows disabled), take full width
   so progress bar / scrollbar fills the slider width */
.cl_container.cl_slider .cl_slider_indicator:where(:not(.cl_slider_thumbs)):only-child {
    width: 100%;
    justify-content: center;
}
/*
 * NOTE: a defensive `.cl_slider_indicator:empty { display: none; }`
 * rule was tried and removed. It briefly hid the indicator container
 * on every render between PHP emit and JS populate (slider_cl.buildIndicator).
 * On the frontend that flash is invisible (ms-scale), but in the
 * Gutenberg editor — where for a long time list.js wasn't enqueued —
 * the rule kept the indicator hidden permanently. Indicator visibility
 * is now driven entirely by `indicator_type='none'` (PHP skips the
 * element) on one side and JS populating the container on the other.
 */

/* --- Dots indicator --- */
.cl_container.cl_slider .cl_slider_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ddd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cl_container.cl_slider .cl_slider_dot.active {
    background-color: #333;
    transform: scale(1.3);
}

/* --- Dash indicator --- */
.cl_container.cl_slider .cl_slider_dash {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background-color: #ddd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cl_container.cl_slider .cl_slider_dash.active {
    background-color: #333;
    width: 36px;
}

/* --- Fraction indicator --- */
.cl_container.cl_slider .cl_slider_fraction {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    user-select: none;
}
.cl_container.cl_slider .cl_slider_fraction_separator {
    opacity: 0.5;
    margin: 0 1px;
}

/* --- Progress bar indicator --- */
.cl_container.cl_slider .cl_slider_progress_track {
    width: 100%;
    min-width: 80px;
    height: 3px;
    background-color: #ddd;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.cl_container.cl_slider .cl_slider_progress_fill {
    height: 100%;
    background-color: #333;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* --- Numbers indicator --- */
.cl_container.cl_slider .cl_slider_number {
    min-width: 28px;
    height: 28px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid #ddd;
    padding: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.cl_container.cl_slider .cl_slider_number.active {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

/* --- Scrollbar indicator --- */
.cl_container.cl_slider .cl_slider_scrollbar_track {
    width: 100%;
    min-width: 80px;
    height: 4px;
    background-color: #ddd;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.cl_container.cl_slider .cl_slider_scrollbar_thumb {
    height: 100%;
    background-color: #333;
    border-radius: 2px;
    position: absolute;
    top: 0;
    transition: inset-inline-start 0.2s ease;
    cursor: grab;
}
.cl_container.cl_slider .cl_slider_scrollbar_thumb:active {
    cursor: grabbing;
}

/* --- No-select helper for scrollbar drag --- */
.cl-no-select {
    user-select: none;
    -webkit-user-select: none;
}

/* A slider inside a slide of another one (the colour strips in a listing's cards, a product slider in a hero's
   custom-block slide) keeps its own swipe: past its end the outer slider does not move. */
[data-slider="true"] [data-slider="true"] {
    overscroll-behavior-x: contain;
}

/* --- Thumbnails and cards: the place's pickers (task gallery-on-slider-engine) ---
   slider_nav.php prints one <button class="cl_slider_thumb"> per slide inside `.cl_slider_thumbs`; the engine marks
   the current one (`active`, `cl-selected`, aria-current) and keeps it in view. A base only, at no weight (:where), so
   the place's compiled CSS (the gallery's thumbnail strip, the shared navigation files) lays them out. */
:where(.cl_slider_thumbs) {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    min-width: 0;
}
:where(.cl_slider_thumbs) > :where(.cl_slider_thumb) {
    flex: 0 0 auto;
    position: relative;
}
:where(.cl_slider_thumb) img {
    display: block;
    width: 100%;
}
/* The picker is a button around the place's frame (`.cl_slider_thumb_frame`, which carries its design preset): no
   look of its own. Themes style buttons up to (0,2,0) (`[type=button]:hover`), so this reset is (0,2,1) and (0,3,1);
   it sets no size, so the place's width rules still apply. */
button.cl_slider_thumb.cl_slider_thumb {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: none;
    text-decoration: none;
    min-height: 0;
    min-width: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
button.cl_slider_thumb.cl_slider_thumb:hover,
button.cl_slider_thumb.cl_slider_thumb:focus,
button.cl_slider_thumb.cl_slider_thumb:active {
    background: none;
    box-shadow: none;
    color: inherit;
    border: 0;
}
button.cl_slider_thumb.cl_slider_thumb:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* A play badge on a video slide's picker. */
:where(.cl_slider_thumb_video) {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* --- Fade: the slides sit in one place and the current one fades in (data-slider-effect="fade"; "fade_zoom" also
   grows it from 94 %) --- */
.cl_container.cl_slider .cl_list[data-slider-effect^="fade"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    scroll-snap-type: none;
    /* Horizontal swipes come to the engine; vertical ones still scroll the page. */
    touch-action: pan-y;
}
.cl_container.cl_slider .cl_list[data-slider-effect^="fade"] > .cl_item,
.cl_container.cl_slider .cl_list[data-slider-effect^="fade"] > .cl_product,
.cl_container.cl_slider .cl_list[data-slider-effect^="fade"] > .cl_slide {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cl_container.cl_slider .cl_list[data-slider-effect="fade_zoom"] > .cl_item,
.cl_container.cl_slider .cl_list[data-slider-effect="fade_zoom"] > .cl_product,
.cl_container.cl_slider .cl_list[data-slider-effect="fade_zoom"] > .cl_slide {
    transform: scale(0.94);
}
/* The current slide; before the script starts, the first one. */
.cl_container.cl_slider .cl_list[data-slider-effect^="fade"] > .cl-slider-current,
.cl_container.cl_slider .cl_list[data-slider-effect^="fade"]:not([data-slider-initialized]) > :first-child {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .cl_container.cl_slider .cl_list[data-slider-effect^="fade"] > .cl_item,
    .cl_container.cl_slider .cl_list[data-slider-effect^="fade"] > .cl_product,
    .cl_container.cl_slider .cl_list[data-slider-effect^="fade"] > .cl_slide {
        transition: none;
        transform: none;
    }
}

/* --- Mouse drag (data-slider-drag="yes"): snapping is off while the slides follow the pointer and while they
   glide to the page after it; scrollLeft assignments move them at once. --- */
.cl_container.cl_slider .cl_list[data-slider-drag="yes"] {
    cursor: grab;
}
.cl_container.cl_slider .cl_list.cl-slider-dragging,
.cl_container.cl_slider .cl_list.cl-slider-settling {
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.cl_container.cl_slider .cl_list.cl-slider-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}

/* --- Click a peeked slide to show it (data-slider-peek-click="yes"): a slide mostly out of view is inert, so the
   pointer over it is the track's. --- */
.cl_container.cl_slider .cl_list[data-slider-peek-click="yes"] {
    cursor: pointer;
}
.cl_container.cl_slider .cl_list[data-slider-peek-click="yes"] > .cl-slider-current {
    cursor: auto;
}

/* --- Navigation cards (slider_nav_card.php): a base at no weight; the place's compiled CSS lays a card out
   (the slider's Navigation block, generated_css/cards/{layout}.php). --- */
:where(.cl_slider_card) {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: start;
}
/* A photo never spills out of its card: when the card is narrower than the photo's width plus the card's frame (a
   column at a side, a phone line of cards), the photo shrinks to fit (12-10-2026: a 150 px photo covered the next
   card). */
:where(.cl_slider_card_image) {
    position: relative;
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
}
:where(.cl_slider_card_image) img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
:where(.cl_slider_card_body) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
/* A card with no text to show (a product photo without a title or caption) keeps no empty column beside its photo. */
:where(.cl_slider_card_body):not(:has(> *)) {
    display: none;
}
:where(.cl_slider_card_prices) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
/* The status line ("View the product →") shows on the current card only. */
:where(.cl_slider_card_status) {
    transition: opacity 0.3s ease;
}
:where(.cl_slider_thumb:not(.active)) .cl_slider_card_status {
    opacity: 0;
}

/* --- A place's slider for one screen (SliderControllerFR_cl::renderPlace(); owner, 12-10-2026): its place shows
   another slider, or none, on the other screen. The wrapper is hidden there; its photos carry an empty source for that
   screen, so it downloads none of them. Phones are up to 767px, as in every slider rule. Two classes: the wrapper's own
   rule (public.css, `display: contents`) is one. --- */
@media (max-width: 767.98px) {
    .cl-design-wrap.cl-slider-screen--computers {
        display: none;
    }
}
@media (min-width: 768px) {
    .cl-design-wrap.cl-slider-screen--phones {
        display: none;
    }
}