/* 
* 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;
}
/* The listing header (G119, 17-10-2026): one row — the title, the link, the slider's arrows. Each design compiles it
   with its own spacing (blocks/list_header/v1/generated_css.php, one class more); this base serves a design compiled
   before then, which a block can switch the header on for until its recompile runs at the first wp-admin page load. */
.cl_list_header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 12px;
}
.cl_list_header_title {
    flex: 1 1 auto;
    margin: 0;
}
.cl_container.cl_slider > .cl_list_header .cl_slider_nav {
    padding: 0;
    align-self: center;
}
.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 slider 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;
}
.list-filter-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    /* flex-shrink: 0; Prevents the block from shrinking below 300px */
}
/* A filter drawer MUST be opaque — it floats over the page, so a see-through panel shows the
   storefront straight through its own content. That is not a design choice, it is a broken surface.

   It needs saying in CSS because the panel's skin comes from ONE preset shared by every layout, and
   the shipped default (a "Padded Plain" preset, background:transparent) is CORRECT for the inline
   desktop filter and wrong for the drawer. Since plist1 also ships filter_mobile_layout:modal_left,
   every store rendered a transparent drawer on mobile out of the box — measured on a live store:
   background-color rgba(0,0,0,0) with the 53%-black scrim behind it, so the topbar and header read
   through the filter's own text.

   Specificity is deliberate: a preset compiles to .cl-preset-N.cl-preset-N (0,2,0), so this needs
   (0,3,0) to win regardless of which stylesheet the browser sees last. .cl_container is always an
   ancestor of the panel.

   ⚠️ THE OPAQUE BASE IS A LITERAL COLOUR ON PURPOSE — DO NOT "TIDY" IT INTO var(--cl-bg-color1).
   A first version of this rule used that token alone, which only moved the bug one layer down: the
   palette code column is a FREE-TEXT admin field emitted raw into the custom property, so a merchant
   can set the slot to `transparent`, `rgba(0,0,0,0)`, `#0000`, a translucent value, or a typo, and
   the drawer goes see-through again. Measured, all five reproduced the original bug.

   So the two layers do different jobs, and only one of them is a guarantee:
     background-color  literal #FFFFFF — the floor. Nothing a merchant can type removes it.
     background-image  the palette colour, painted OVER that floor. An opaque token shows through
                       exactly as before; a transparent/translucent/invalid one cannot punch a hole,
                       because a background-image never reveals the background-color beneath it as
                       see-through — worst case the layer contributes nothing and the floor shows.

   Verified across: seeded value, #0000, transparent, rgba(0,0,0,0), rgba(255,255,255,.3),
   an invalid string, a dark colour, and the token deleted entirely — opaque in every case, and still
   the merchant's own colour whenever their token is usable.

   Known limit, accepted: on a DARK palette whose slot is also broken, the floor is white, so the
   drawer would be light. That is the degenerate case of a merchant disabling their own base colour,
   and a readable-but-wrong panel beats an unreadable transparent one.

   TRADE-OFF, accepted knowingly: this also wins over a merchant who deliberately picks an opaque
   preset for the drawer — their colour is overridden. If that ever matters, the fix is to give the
   modal layouts their own preset setting rather than to weaken this rule; a drawer you can see
   through must never be reachable by configuration. */
.cl_container .list-filter-container.modal_left,
.cl_container .list-filter-container.modal_right,
.cl_container .list-filter-container.modal_center {
    background-color: #FFFFFF;
    background-image: linear-gradient(var(--cl-bg-color1), var(--cl-bg-color1));
}
/* filter_layout = horizontal_bar, "One row" (G104, 15-10-2026): the title, the groups as buttons sized to their
   label (each opens its options, the view forces dropdown headers), then the product count and Reset All at the
   row's end; the row wraps only when it cannot hold them. Here, not in the design's compiled CSS: no value comes
   from a setting, so every design and every category or block override gets it without a recompile.
   (0,5,0) on the group: the compiled dropdown rule `.plist1-N .list-filter-container.is_dropdowns_container
   .list-filter-group` (0,4,0) gives each group a 200 px minimum and plist1.css `.plist1 .list-filter-group` makes
   it grow, which the bar's buttons must not do (their options keep the minimum). */
.cl_container .list-filter-container.horizontal_bar {
    width: 100%;
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
}
.cl_container .list-filter-container.horizontal_bar > .list-filter-header {
    width: auto;
}
.cl_container .list-filter-container.horizontal_bar > .list-filter-groups {
    width: auto;
    flex: 1 1 auto;
    align-items: center;
}
.cl_container .list-filter-container.horizontal_bar.is_dropdowns_container .list-filter-group {
    flex: 0 0 auto;
    min-width: 0;
}
/* The options are as wide as they need, not as the button: at the compiled 100 % of a short button the price boxes
   cut "300" to "30" (dev1, 15-10-2026). */
.cl_container .list-filter-container.horizontal_bar.is_dropdowns_container .list-filter-group .cl_toggle_body {
    width: max-content;
    min-width: 240px;
    max-width: min(320px, calc(100vw - 32px));
}
/* Reset All sits at the row's end, so the options keep Apply only; in live mode they have nothing to show. */
.cl_container .list-filter-container.horizontal_bar .list-filter-actions .list-reset-all-filters-btn,
.cl_container .list-filter-container.horizontal_bar .list-filter-actions:not(:has(.list-apply-filters-btn)) {
    display: none !important;
}
.list-filter-bar-end {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: auto;
}
/* !important: a button preset with "force styles" sets its own display with !important. */
.list-filter-container:not(.cl-filter-has-choice) .list-filter-bar-clear {
    display: none !important;
}
.list-filter-group-value:not(:empty) {
    margin-inline-start: 4px;
}
/* A bar group's header is one button (G108, 16-10-2026): the label, the chosen value and the chevron on one line; its
   look comes from filter_bar_group_button_preset. Its parts are spans (no div inside a button), which public.css's
   div.toggle-title / div.toggle-close rules do not reach. */
.cl_toggle_header.list-filter-bar-group {
    flex-wrap: nowrap;
    white-space: nowrap;
}
.list-filter-bar-group .toggle-title,
.list-filter-bar-group .toggle-close {
    display: inline-flex;
    align-items: center;
}
/* The group's name at the top of its dropdown (filter_dropdown_title_is_active, G110); its text is a preset. */
.list-filter-dropdown-title {
    margin-bottom: 12px;
}
.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;
    /* Even a two-character label wrapped, and `flex: 1 1 0` is only half the reason: the zero basis
       means the width comes from free space, and `word-break: break-word` in public.css — set on
       `div` but INHERITED into these buttons — lets min-content fall to a single character, so there
       is no floor to stop the shrink. This restores the floor.

       Deliberately NOT `min-width: max-content`: min-width beats max-width in CSS, so that would
       silently void the 145px cap above rather than working with it. */
    white-space: nowrap;
}
/* The drawer's footer (G110, 16-10-2026): at the drawer's bottom — the drawer is a column at least the screen's height,
   so `margin-top: auto` takes the free room — and stuck there while the groups scroll under it (Dawn's facets drawer
   does both). Apply fills and Reset All takes its label's width (WooCommerce's Apply is 100 %, Material 3 sizes actions
   to their labels); the 145 px cap above stays for the other layouts. A footer card (filter_drawer_footer_preset) sets
   its padding and border: a top border draws the line above. Non-modal layouts inherit the container's background. */
.filtre-modal .list-filter-actions {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-bottom: 10px;
    z-index: 2;
}
.filtre-modal .list-filter-actions .list-apply-filters-btn {
    flex: 1 1 auto;
    max-width: none;
}
.filtre-modal .list-filter-actions .list-reset-all-filters-btn {
    flex: 0 0 auto;
    max-width: none;
}
/* Opaque over the groups scrolling under it, in the drawer's own colour (the two layers of the drawer rule above; it
   was #ffffff until 16-10-2026, a white band on a grey drawer). (0,3,0): a footer card's background cannot make it
   see-through. */
.cl_container .filtre-modal .list-filter-actions {
    background-color: #FFFFFF;
    background-image: linear-gradient(var(--cl-bg-color1), var(--cl-bg-color1));
}
.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 slider 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%;
    }
}

/* ====================================================
 * Grid columns per render (plist1 / catlist / reviewlist)
 * The view puts `cl-cols-{n}` / `cl-mcols-{n}` on its own .cl_list, so two
 * lists sharing one design can differ. A grid subtracts its gap itself, so
 * these do not depend on any setting and live here once; the slider
 * equivalents need the gap and are compiled per design. Each design also
 * compiles its OWN grid columns (0-2-0, below these), because this file
 * loads late or not at all on some pages. 0-4-0 outranks the
 * category and product-page column rules (0-3-0), as the view's old ID
 * rule did. 1-12 = the range the views clamp to.
 * ==================================================== */
.cl_container:not(.cl_slider) .cl_list.cl-cols-1  { grid-template-columns: repeat(1, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-2  { grid-template-columns: repeat(2, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-3  { grid-template-columns: repeat(3, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-4  { grid-template-columns: repeat(4, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-5  { grid-template-columns: repeat(5, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-6  { grid-template-columns: repeat(6, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-7  { grid-template-columns: repeat(7, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-8  { grid-template-columns: repeat(8, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-9  { grid-template-columns: repeat(9, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-10 { grid-template-columns: repeat(10, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-11 { grid-template-columns: repeat(11, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-12 { grid-template-columns: repeat(12, 1fr); }
.cl_container:not(.cl_slider) .cl_list.cl-cols-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

@media (max-width: 767px) {
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-1  { grid-template-columns: repeat(1, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-2  { grid-template-columns: repeat(2, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-3  { grid-template-columns: repeat(3, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-4  { grid-template-columns: repeat(4, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-5  { grid-template-columns: repeat(5, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-6  { grid-template-columns: repeat(6, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-7  { grid-template-columns: repeat(7, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-8  { grid-template-columns: repeat(8, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-9  { grid-template-columns: repeat(9, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-10 { grid-template-columns: repeat(10, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-11 { grid-template-columns: repeat(11, 1fr); }
    .cl_container:not(.cl_slider) .cl_list.cl-mcols-12 { grid-template-columns: repeat(12, 1fr); }
}