/* 
* 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;
}
/* The link under an empty listing's message (plist1 filter_no_results_link_*, PL-6): the message's own text style,
   marked as a link by a line under it — a border, since plist1.css removes every link's underline (!important). */
.list-filter-no-results .list-no-results-link {
    color: inherit;
    border-bottom: 1px solid currentColor;
}
/* ===================== Page numbers and Load more =====================
   Shared by every listing (01-11-2026, task dev/tasks/catlist_compo/demo2-catlist-pagination-01-11-2026.md, D5): copied
   in plist1.css and catlist.css until then and missing in reviewlist.css, where the page numbers had no layout at all
   (demo2 RE-1). The buttons themselves come from public/partials/list_page_numbers.php; their look from their preset. */
.cl_container .list-load-more-btn {
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.cl_container .list-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.cl_container .list-pagination-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.cl_container .cl-pagination-number {
    min-width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.cl_container .cl-pagination-number:disabled {
    cursor: not-allowed;
}
/* Previous / next on the first / last page (G111, 16-10-2026): disabled, greyed and kept in place, so the numbers do
   not move (Polaris disables them; Material greys a disabled icon to 0.38). Low weight (:where): a preset with its own
   disabled state wins. */
:where(.cl_container) .cl-pagination-number:disabled {
    opacity: 0.38;
}

.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;
}

/* The Sort by (PL-7, 02-11-2026; plist1 Sort block, frontend/views/blocks/sort/): a button and its list of orders in
   the controls row, at the one-row bar's end and in the floating bar; their looks are the block's presets. The list
   opens under the button, at its end; in the floating bar, above it. */
.cl-sort {
    position: relative;
}
/* In the controls row it takes the row's end: the Filter button and the chips stay at its start. */
.cl_filter_all_buttons > .cl-sort {
    margin-inline-start: auto;
}
/* First (the design's sort_row_position, handoff wrx2, 07-11-2026): the row's start, the Filter button and the chips
   after it; its list opens from its start edge, so it stays on the screen. With the pagination at the top start the row
   is mirrored (row-reverse, filter/v1/generated_css.php): there it ends the row and its list keeps the end edge. */
.cl_filter_all_buttons.cl-sort-first > .cl-sort {
    margin-inline-start: 0;
}
.cl_filter_all_buttons.cl-sort-first:not(.pagination-pos-top_start) > .cl-sort > .cl-sort-menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
}
.cl-sort-toggle {
    white-space: nowrap;
}
.cl-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 10000;
    width: max-content;
    min-width: 200px;
    max-width: min(320px, calc(100vw - 32px));
}
/* !important: a card preset with "force styles" may set its own display. */
.cl-sort-menu[hidden] {
    display: none !important;
}
.cl-sort-up .cl-sort-menu {
    top: auto;
    bottom: calc(100% + 6px);
}
.cl-sort-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* An order is a line of the list, 44px tall at least. (0,3,0): the buttons preset centres its content at (0,2,0). */
.cl-sort .cl-sort-options .cl-sort-option,
.list-filter-sort .cl-sort-options .cl-sort-option {
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    text-align: start;
}
/* The drawer's Sort by group is as wide as the drawer's other groups. */
.list-filter-sort {
    width: 100%;
}

/* end list css  */

@media (max-width: 767.98px) {
    .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;
    }
    /* The one-row bar keeps each button as wide as its label on phones too: at 100 % every button took a line
       (review 27-10-2026). */
    .cl_container .list-filter-container.horizontal_bar.is_dropdowns_container .list-filter-group {
        width: auto !important;
    }

    button.open-filtre-modal {
        width: 100%;
    }
    /* The Sort by in the controls row (the filter off or not a drawer) is as wide as the Filter button above. */
    .cl_filter_all_buttons > .cl-sort {
        width: 100%;
        margin-inline-start: 0;
    }
    .cl_filter_all_buttons > .cl-sort > .cl-sort-toggle {
        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: 767.98px) {
    .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); }
}