/* 
* used to handel all list on the frontend
*/
.cl_container {
    width: 100%;
    /* Keep position: relative - required for absolute positioning of the loading element to center it within this container */
    position: relative;
}
.cl_reset_buttons_and_list_and_pagination {
    /* DO NOT remove width:100% without min-width:0 — both are needed together.
       Parent .cl_filter_and_list has align-items:start, which does NOT stretch children in column layouts.
       — width:100% is required for column layouts (horizontal_top, horizontal_bottom, modal_*)
         so this element fills the parent width instead of shrinking to content size.
       — min-width:0 is required for row layouts (vertical_left, vertical_right)
         so this element can shrink below its content width to make room for the 300px filter sidebar.
         Without it, the element overflows and carousel arrows/content break. */
    width: 100%;
    min-width: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    /* Moved from .cl_filter_and_list — respects product box min-width
       by showing a scroll when there is no space, without clipping
       absolutely-positioned filter dropdowns in the sibling container. */
    overflow: auto;
}
/* Carousel mode: hide vertical scrollbar caused by cumulative gap overflow.
   Carousel handles its own horizontal scroll via .cl_list overflow-x. */
.cl_container.cl_carousel .cl_reset_buttons_and_list_and_pagination {
    overflow: hidden;
}
.list-filter-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    /* flex-shrink: 0; Prevents the block from shrinking below 300px */
}
.list-filter-groups {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 15px;
    width: 100%;
}
ul.list-filter-group-items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.list-filter-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.list-filter-header {
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
    width: 100%;
}
.list-input-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.list-input-label [type=checkbox], .list-input-label [type=radio] {
    height: 1rem;
    width: 1rem;
}

.open-filtre-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px
}

/*----group icons close and open-------
.list-filter-group .cl_toggle_header:after, 
.list-filter-group .cl_toggle_header[is_open="yes"] .cl_filter_open,
.list-filter-group .cl_toggle_header[is_open="no"] .cl_filter_close {
    display: none;
}

/*---------*/

.cl_filter_modal_bt_and_pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}
.close-filtre-modal {
    cursor: pointer;
    display: flex;
    align-items: center;
}
.cl_filter_all_buttons {
    display: flex; 
    align-items: center; 
    gap: 10px;
}
.list-filter-actions {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: row !important;
}
/* Let action buttons share space equally and shrink in narrow containers (e.g. sidebar) */
.list-filter-actions button {
    flex: 1 1 0;
    max-width: 145px;
}
/* Sticky bottom bar only inside modal — non-modal layouts inherit the container background via Style Manager */
.filtre-modal .list-filter-actions {
    position: sticky;
    bottom: 0;
    background-color: #ffffff;
    padding-bottom: 10px;
    z-index: 2;
}
.cl_filter_reset_buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}
/*.cl_filter_reset_buttons:not(:empty) {
    margin-bottom: 10px;
}*/
.cl_filter_and_list {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    flex-grow: 1;
    /* NOTE: overflow was moved to .cl_reset_buttons_and_list_and_pagination
       so that absolutely-positioned filter dropdowns are not clipped. */
}
.cl_list:has(.list-filter-no-results) {
  grid-template-columns: 1fr !important;
}
.list-filter-no-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    /* Default padding for correct spacing — text style comes from the
       no-results typography preset (.cl-preset-{id}); this keeps the message
       breathing room now that the per-instance box style was removed. */
    padding: 24px;
}
.list-loading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: #fff;
    padding: 15px;
    color: #000;
    border-radius: 8px;
    box-shadow: 0 4px 12px #0b0b0b;
}
.list-loading-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2c5aa0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* @keyframes spin lives in public/assets/css/public.css — that file is
   enqueued unconditionally on every public page, while list.css has a
   pending todo to become conditionally-loaded. Single source of truth. */

/* Loading-state fade on the items grid (minimal E3 — skeleton-loader
   placeholder for now). list_cl.setLoadingState() flips data-loading=true
   on the .cl_list while AJAX is in flight; this rule dims the existing
   items so the user sees something is happening even before the spinner
   centers itself. The transition keeps the UX gentle. */
.cl_list[data-loading="true"] {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.cl_list[data-loading="false"] {
    transition: opacity 0.18s ease;
}

/* Inline error+retry block — injected by list_cl.onErrorLoadItems when
   an AJAX pagination/filter request fails. Critical for infinite-scroll
   and carousel modes where there's no other button for the user to
   re-trigger the request. Hidden until JS injects it; auto-removed on
   retry click or next successful load. */
.list-error-retry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #991b1b;
    font-size: 14px;
}
.list-error-retry-message { flex: 0 1 auto; }
.list-error-retry-btn {
    padding: 6px 14px;
    background: #fff;
    border: 1px solid currentColor;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
}
.list-error-retry-btn:hover,
.list-error-retry-btn:focus-visible {
    background: #fee2e2;
}

/* ====================================================
 * Filter — Buttons display type
 * Hidden checkbox with button-style label.
 * Instance-specific styles (colors, borders) come from generated_css.php.
 * ==================================================== */
.list-filter-display-buttons input[type="checkbox"] {
    display: none;
}
.list-filter-display-buttons li label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    transition: all 0.15s ease;
}
.list-filter-display-buttons li .list-filter-btn-close {
    display: none;
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.7;
}
.list-filter-display-buttons li.is-selected .list-filter-btn-close {
    display: inline;
}
.list-filter-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

/* ====================================================
 * Filter — Switch display type
 * Hidden checkbox with toggle switch track/knob.
 * ==================================================== */
.list-filter-display-switch input[type="checkbox"] {
    display: none;
}
.list-filter-display-switch li label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    user-select: none;
}
.list-filter-display-switch .list-filter-switch-track {
    position: relative;
    width: 36px;
    min-width: 36px;
    height: 20px;
    background-color: #d1d5db;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}
.list-filter-display-switch .list-filter-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.list-filter-display-switch li.is-selected .list-filter-switch-track {
    background-color: #3b5bdb;
}
.list-filter-display-switch li.is-selected .list-filter-switch-track::after {
    transform: translateX(16px);
}

/* ====================================================
 * Filter — Show More / Show Less button
 * ==================================================== */
.list-filter-show-more-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    user-select: none;
    transition: opacity 0.15s ease;
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 0.85em;
}
.list-filter-show-more-btn:hover {
    opacity: 0.8;
}

/* end list css  */

@media (max-width: 767px) {
    .cl_filter_and_list {
        gap: 10px;
        flex-wrap: wrap;
    }
    .cl_filter_all_buttons {
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }
    .cl_filter_and_list .list-filter-group {
        width: 100% !important;
    }

    button.open-filtre-modal {
        width: 100%;
    }
}

/* ====================================================
 * Carousel — shared structural layout for any listing
 * The .cl_carousel class is added dynamically when pagination_type=carousel.
 * Specificity: 0-3-0 — intentionally beats .plist1 .cl_list (0-2-0)
 *   from instance generated_css, ensuring flex overrides grid.
 * Config-dependent values (flex-basis, gap, button colours)
 *   remain in the per-instance inline <style> in views/index.php.
 * ==================================================== */

.cl_container.cl_carousel .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%;
}

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

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

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

.cl_container.cl_carousel .cl_carousel_arrows {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl_container.cl_carousel .cl_carousel_arrow {
    /* Defensive 20px floor for both axes — admin sets actual width/height
       via the carousel_icon_style modal (Global options → Width/Height
       inputs from single_css_supported). Using min-* (not fixed `height`)
       so admin's `height` from per-instance generated_css wins via cascade
       — the rule above used `height: 36px` which beat admin via higher
       specificity (this selector has 3 classes vs `.plist1 .cl_carousel_arrow`
       which has 2). The 20px 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_carousel .cl_carousel_arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Play/pause button — only rendered when carousel_autoplay='yes' (per
   ARIA APG mandate that visible pause control must exist when autoplay
   is on). 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_carousel .cl_carousel_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_carousel .cl_carousel_playpause:hover,
.cl_container.cl_carousel .cl_carousel_playpause:focus-visible {
    opacity: 1;
}
.cl_container.cl_carousel .cl_carousel_playpause.is-playing::before {
    content: "\23F8"; /* ⏸ pause */
}
.cl_container.cl_carousel .cl_carousel_playpause.is-paused::before {
    content: "\25B6"; /* ▶ play */
}

/* --- Nav layout: arrows_sides (default) — ‹ indicator › --- */
.cl_container.cl_carousel .cl_carousel_nav_arrows_sides .cl_carousel_arrows {
    display: contents;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_sides .cl_carousel_prev {
    order: 1;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_sides .cl_carousel_indicator {
    order: 2;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_sides .cl_carousel_next {
    order: 3;
}

/* --- Nav layout: arrows_end — indicator ‹ › --- */
.cl_container.cl_carousel .cl_carousel_nav_arrows_end {
    justify-content: space-between;
    align-self: stretch;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_end .cl_carousel_indicator {
    order: 1;
    flex-grow: 1;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_end .cl_carousel_arrows {
    order: 2;
}

/* --- Nav layout: arrows_start — ‹ › indicator --- */
.cl_container.cl_carousel .cl_carousel_nav_arrows_start {
    justify-content: space-between;
    align-self: stretch;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_start .cl_carousel_arrows {
    order: 1;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_start .cl_carousel_indicator {
    order: 2;
    flex-grow: 1;
}

/* --- Nav layout: arrows_overlay — arrows float over carousel edges --- */
.cl_container.cl_carousel .cl_carousel_nav_arrows_overlay {
    position: static;
    justify-content: center;
}
/* position:relative on .cl_list_and_pagination so overlay arrows anchor to
   the carousel+pagination area, not .cl_container (which includes filters). */
.cl_container.cl_carousel:has(.cl_carousel_nav_arrows_overlay) .cl_list_and_pagination {
    position: relative;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_overlay .cl_carousel_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_carousel .cl_carousel_nav_arrows_overlay .cl_carousel_arrow {
    pointer-events: auto;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_overlay .cl_carousel_indicator {
    order: 1;
}

/* --- Indicator container (shared) --- */
.cl_container.cl_carousel .cl_carousel_indicator {
    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 carousel width */
.cl_container.cl_carousel .cl_carousel_indicator:only-child {
    width: 100%;
    justify-content: center;
}
/*
 * NOTE: a defensive `.cl_carousel_indicator:empty { display: none; }`
 * rule was tried and removed. It briefly hid the indicator container
 * on every render between PHP emit and JS populate (carousel_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_carousel .cl_carousel_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_carousel .cl_carousel_dot.active {
    background-color: #333;
    transform: scale(1.3);
}

/* --- Dash indicator --- */
.cl_container.cl_carousel .cl_carousel_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_carousel .cl_carousel_dash.active {
    background-color: #333;
    width: 36px;
}

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

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

/* --- Numbers indicator --- */
.cl_container.cl_carousel .cl_carousel_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_carousel .cl_carousel_number.active {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

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

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