/* CDL Sports AJAX Shop for Elementor — v2.1.0 */
.cdl-ajax-shop,
.cdl-ajax-shop * {
    box-sizing: border-box;
}

.cdl-ajax-shop {
    --cdl-text: #111111;
    --cdl-muted: #737373;
    --cdl-accent: #2b95d6;
    --cdl-border: #e6e7e9;
    --cdl-surface: #ffffff;
    --cdl-soft: #f5f6f7;
    --cdl-hover: #f2f5f7;
    --cdl-button-bg: #111111;
    --cdl-button-text: #ffffff;
    --cdl-radius: 10px;
    --cdl-sidebar-width: 290px;
    --cdl-layout-gap: 28px;
    --cdl-product-gap: 18px;
    --cdl-control-height: 46px;
    --cdl-toolbar-gap: 12px;
    --cdl-menu-gap: 2px;
    --cdl-indent: 18px;
    --cdl-icon-size: 17px;
    --cdl-sticky-offset: 115px;
    --cdl-drawer-width: 88%;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, var(--cdl-sidebar-width)) minmax(0, 1fr);
    gap: var(--cdl-layout-gap);
    width: 100%;
    min-width: 0;
    color: var(--cdl-text);
    line-height: 1.45;
    isolation: isolate;
}

.cdl-ajax-shop svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cdl-ajax-shop button,
.cdl-ajax-shop input,
.cdl-ajax-shop select {
    font: inherit;
}

.cdl-ajax-shop button {
    -webkit-tap-highlight-color: transparent;
}

.cdl-control-hidden {
    display: none !important;
}

/* ---------- Sidebar ---------- */
.cdl-shop-sidebar {
    position: relative;
    width: 100%;
    min-width: 0;
    align-self: start;
    background: var(--cdl-surface);
    border: 0;
    border-right: 1px solid var(--cdl-border);
    display: flex;
    flex-direction: column;
    min-height: 180px;
    overflow: hidden;
    z-index: 8;
}

.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) .cdl-shop-sidebar {
    position: sticky;
    top: var(--cdl-sticky-offset);
    max-height: calc(100vh - var(--cdl-sticky-offset) - 24px);
    max-height: calc(100dvh - var(--cdl-sticky-offset) - 24px);
}

.cdl-sidebar-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c9cdd1 transparent;
    padding-right: 18px;
}

.cdl-sidebar-scroll::-webkit-scrollbar,
.cdl-brand-list::-webkit-scrollbar {
    width: 7px;
}

.cdl-sidebar-scroll::-webkit-scrollbar-track,
.cdl-brand-list::-webkit-scrollbar-track {
    background: transparent;
}

.cdl-sidebar-scroll::-webkit-scrollbar-thumb,
.cdl-brand-list::-webkit-scrollbar-thumb {
    background: #c9cdd1;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.cdl-sidebar-scroll::-webkit-scrollbar-thumb:hover,
.cdl-brand-list::-webkit-scrollbar-thumb:hover {
    background: #aeb4ba;
    background-clip: padding-box;
}

.cdl-mobile-sidebar-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--cdl-border);
    background: var(--cdl-surface);
}

.cdl-mobile-sidebar-head strong {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 750;
}

.cdl-sidebar-actions {
    flex: 0 0 auto;
    padding: 14px 18px 16px 0;
    border-top: 1px solid var(--cdl-border);
    background: var(--cdl-surface);
}

.cdl-shop-clear-all {
    appearance: none !important;
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--cdl-border) !important;
    border-radius: calc(var(--cdl-radius) - 2px) !important;
    background: var(--cdl-surface) !important;
    color: var(--cdl-text) !important;
    box-shadow: none !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    text-transform: none !important;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.cdl-shop-clear-all:hover,
.cdl-shop-clear-all:focus-visible {
    border-color: var(--cdl-text) !important;
    background: var(--cdl-soft) !important;
    color: var(--cdl-text) !important;
    transform: translateY(-1px);
}

/* ---------- Filter sections ---------- */
.cdl-filter-section {
    position: relative;
    border: 0;
    margin: 0;
    padding: 0;
}

.cdl-filter-section-title {
    appearance: none !important;
    width: 100%;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 !important;
    padding: 9px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--cdl-text) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.cdl-filter-section-title:hover,
.cdl-filter-section-title:focus-visible {
    color: var(--cdl-text) !important;
    background: transparent !important;
}

.cdl-section-chevron {
    flex: 0 0 auto;
    width: var(--cdl-icon-size);
    height: var(--cdl-icon-size);
    color: var(--cdl-muted);
    transition: transform .22s cubic-bezier(.2,.75,.25,1), color .18s ease;
}

.cdl-filter-section.is-open > .cdl-filter-section-title .cdl-section-chevron {
    transform: rotate(180deg);
    color: var(--cdl-text);
}

.cdl-filter-section-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .24s cubic-bezier(.2,.75,.25,1), opacity .2s ease;
    opacity: .25;
}

.cdl-filter-section.is-open > .cdl-filter-section-body {
    grid-template-rows: 1fr;
    opacity: 1;
}

.cdl-filter-section-body-inner {
    min-height: 0;
    overflow: hidden;
    padding-bottom: 8px;
}

.cdl-filter-divider {
    height: 1px;
    background: var(--cdl-border);
    margin: 18px 0;
}

.cdl-custom-sidebar-heading {
    margin: 18px 0 8px;
    color: var(--cdl-text);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cdl-filter-empty {
    margin: 5px 0 14px;
    color: var(--cdl-muted);
    font-size: 12px;
}

/* ---------- Category tree ---------- */
.cdl-category-tree,
.cdl-category-level,
.cdl-category-item {
    width: 100%;
    min-width: 0;
}

.cdl-category-level {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cdl-category-depth-1,
.cdl-category-depth-2,
.cdl-category-depth-3,
.cdl-category-depth-4,
.cdl-category-depth-5 {
    padding-left: var(--cdl-indent) !important;
}

.cdl-category-item {
    margin: var(--cdl-menu-gap) 0 !important;
    padding: 0 !important;
}

.cdl-category-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
}

.cdl-icon-button,
.cdl-category-toggle {
    appearance: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--cdl-muted) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    cursor: pointer;
}

.cdl-category-toggle {
    display: grid !important;
    place-items: center;
    width: 24px !important;
    height: 30px !important;
    border-radius: 7px !important;
    transition: background-color .18s ease, color .18s ease;
}

.cdl-category-toggle svg {
    width: 15px;
    height: 15px;
    transition: transform .22s cubic-bezier(.2,.75,.25,1);
}

.cdl-category-toggle:hover,
.cdl-category-toggle:focus-visible {
    background: var(--cdl-hover) !important;
    color: var(--cdl-text) !important;
}

.cdl-category-item.is-expanded > .cdl-category-row .cdl-category-toggle svg {
    transform: rotate(90deg);
}

.cdl-category-toggle-spacer {
    width: 24px;
    height: 1px;
}

.cdl-category-children {
    display: grid;
    grid-template-rows: 0fr;
    opacity: .35;
    transition: grid-template-rows .24s cubic-bezier(.2,.75,.25,1), opacity .2s ease;
}

.cdl-category-item.is-expanded > .cdl-category-children {
    grid-template-rows: 1fr;
    opacity: 1;
}

.cdl-category-children-inner {
    min-height: 0;
    overflow: hidden;
}

/* ---------- Filter option ---------- */
.cdl-filter-option {
    position: relative;
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    margin: 0 !important;
    padding: 5px 7px !important;
    border: 0 !important;
    border-radius: 7px;
    color: var(--cdl-text) !important;
    background: transparent;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.cdl-filter-option:hover {
    background: var(--cdl-hover);
}

.cdl-filter-option.is-selected,
.cdl-filter-option:has(input:checked) {
    background: color-mix(in srgb, var(--cdl-accent) 10%, var(--cdl-surface));
}

.cdl-filter-option input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cdl-check-ui {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border: 1.5px solid #c8ccd0;
    border-radius: 4px;
    background: var(--cdl-surface);
    color: transparent;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}

.cdl-check-ui svg {
    width: 12px;
    height: 12px;
}

.cdl-filter-option input:checked + .cdl-check-ui {
    border-color: var(--cdl-accent);
    background: var(--cdl-accent);
    color: #fff;
}

.cdl-filter-option:hover .cdl-check-ui {
    border-color: var(--cdl-accent);
}

.cdl-option-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cdl-option-count {
    justify-self: end;
    min-width: 24px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--cdl-soft);
    color: var(--cdl-muted);
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}

/* ---------- Brand search/list ---------- */
.cdl-brand-search-wrap {
    position: relative;
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 38px;
    margin: 2px 0 9px !important;
    border: 1px solid var(--cdl-border);
    border-radius: 8px;
    background: var(--cdl-surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.cdl-brand-search-wrap:focus-within {
    border-color: var(--cdl-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdl-accent) 12%, transparent);
}

.cdl-brand-search-wrap .cdl-control-icon {
    width: 16px;
    height: 16px;
    margin-left: 10px;
}

.cdl-brand-search {
    appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--cdl-text) !important;
    padding: 0 10px 0 7px !important;
    font-size: 12px !important;
}

.cdl-brand-list {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 2px;
}

/* ---------- Content / toolbar ---------- */
.cdl-shop-content {
    min-width: 0;
    width: 100%;
}

.cdl-shop-toolbar {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: center;
    gap: var(--cdl-toolbar-gap);
    width: 100%;
    min-width: 0;
    margin: 0 0 15px;
    padding: 0;
    background: var(--cdl-surface);
}

.cdl-toolbar-search {
    position: relative;
    display: flex !important;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: var(--cdl-control-height);
    margin: 0 !important;
    border: 1px solid var(--cdl-border);
    border-radius: 999px;
    background: var(--cdl-soft);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.cdl-toolbar-search:hover {
    background: color-mix(in srgb, var(--cdl-soft) 70%, var(--cdl-surface));
    border-color: #d6d9dc;
}

.cdl-toolbar-search:focus-within {
    background: var(--cdl-surface);
    border-color: var(--cdl-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdl-accent) 10%, transparent);
}

.cdl-control-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-left: 14px;
    color: var(--cdl-text);
}

.cdl-shop-search {
    appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 42px 0 10px !important;
    border: 0 !important;
    border-radius: inherit !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cdl-text) !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.cdl-shop-search::placeholder,
.cdl-brand-search::placeholder {
    color: #8b8f94;
    opacity: 1;
}

.cdl-search-clear {
    position: absolute !important;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: grid !important;
    place-items: center;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    color: var(--cdl-muted) !important;
    transition: background-color .16s ease, color .16s ease;
}

.cdl-search-clear[hidden] {
    display: none !important;
}

.cdl-search-clear svg {
    width: 15px;
    height: 15px;
}

.cdl-search-clear:hover,
.cdl-search-clear:focus-visible {
    background: #e9ebed !important;
    color: var(--cdl-text) !important;
}

.cdl-toolbar-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cdl-toolbar-gap);
    min-width: 0;
}

.cdl-toolbar-count {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    color: var(--cdl-muted);
    font-size: 12px;
}

.cdl-toolbar-count strong {
    color: var(--cdl-text);
    font-size: 14px;
    font-weight: 800;
}

.cdl-sort-wrap {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: var(--cdl-muted);
    font-size: 12px;
    white-space: nowrap;
}

.cdl-sort-select-shell {
    position: relative;
    display: block;
    min-width: 170px;
}

.cdl-shop-sort {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    height: var(--cdl-control-height) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 38px 0 13px !important;
    border: 1px solid var(--cdl-border) !important;
    border-radius: calc(var(--cdl-radius) - 1px) !important;
    outline: 0 !important;
    background: var(--cdl-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--cdl-text) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.cdl-shop-sort:hover {
    border-color: #ccd1d5 !important;
    background: var(--cdl-soft) !important;
}

.cdl-shop-sort:focus {
    border-color: var(--cdl-accent) !important;
    background: var(--cdl-surface) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdl-accent) 10%, transparent) !important;
}

.cdl-select-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--cdl-muted);
    pointer-events: none;
}

.cdl-mobile-filter-toggle {
    appearance: none !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--cdl-control-height);
    margin: 0 !important;
    padding: 0 13px !important;
    border: 1px solid var(--cdl-border) !important;
    border-radius: calc(var(--cdl-radius) - 1px) !important;
    background: var(--cdl-surface) !important;
    color: var(--cdl-text) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    cursor: pointer;
}

.cdl-mobile-filter-icon {
    width: 18px;
    height: 18px;
}

.cdl-mobile-filter-badge {
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--cdl-accent);
    color: #fff;
    padding: 0 4px;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
}

.cdl-mobile-filter-badge[hidden] {
    display: none !important;
}

/* ---------- Active filters ---------- */
.cdl-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 0;
    margin: 0 0 14px;
}

.cdl-active-filters:empty {
    display: none;
}

.cdl-filter-chip {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    margin: 0 !important;
    padding: 5px 9px 5px 11px !important;
    border: 1px solid var(--cdl-border) !important;
    border-radius: 999px !important;
    background: var(--cdl-surface) !important;
    color: var(--cdl-text) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}

.cdl-filter-chip:hover,
.cdl-filter-chip:focus-visible {
    background: var(--cdl-hover) !important;
    border-color: #cfd3d7 !important;
}

.cdl-chip-x {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cdl-soft);
    font-size: 13px;
    line-height: 1;
}

.cdl-filter-chip-clear {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--cdl-muted) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Results ---------- */
.cdl-shop-main,
.cdl-shop-results-wrap,
.cdl-shop-results {
    position: relative;
    min-width: 0;
    width: 100%;
}

.cdl-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    margin: 0 0 10px;
}

.cdl-results-range {
    margin: 0 !important;
    color: var(--cdl-muted);
    font-size: 11px;
    line-height: 1.3;
}

.cdl-shop-results {
    transition: opacity .18s ease, transform .18s ease;
}

.cdl-ajax-shop.is-loading .cdl-shop-results {
    opacity: .38;
    transform: translateY(2px);
    pointer-events: none;
}

.cdl-shop-loading {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--cdl-border);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: var(--cdl-text);
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    font-size: 11px;
}

.cdl-shop-loading[hidden] {
    display: none !important;
}

.cdl-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid #d9dcdf;
    border-top-color: var(--cdl-accent);
    border-radius: 50%;
    animation: cdl-spin .7s linear infinite;
}

@keyframes cdl-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Elementor Loop Grid host ---------- */
.cdl-elementor-loop-grid-host {
    width: 100%;
    min-width: 0;
}

.cdl-elementor-loop-grid-host > .elementor,
.cdl-elementor-loop-grid-host .elementor-element,
.cdl-elementor-loop-grid-host .elementor-widget-container {
    min-width: 0;
}

.cdl-elementor-loop-grid-host .elementor-pagination,
.cdl-elementor-loop-grid-host nav.elementor-pagination {
    display: none !important;
}

.cdl-loop-grid-warning {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #f1c56c;
    border-radius: var(--cdl-radius);
    background: #fff9eb;
    color: #6f5313;
    font-size: 12px;
    line-height: 1.55;
}

/* ---------- Plugin grid / fallback card ---------- */
.cdl-shop-products {
    display: grid;
    grid-template-columns: repeat(var(--cdl-cols-desktop, 3), minmax(0, 1fr));
    gap: var(--cdl-product-gap);
    width: 100%;
    min-width: 0;
}

.cdl-shop-product {
    min-width: 0;
}

.cdl-default-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--cdl-border);
    border-radius: var(--cdl-radius);
    background: var(--cdl-surface);
}

.cdl-default-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cdl-soft);
}

.cdl-default-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 12px;
    transition: transform .25s ease;
}

.cdl-default-card:hover .cdl-default-card-media img {
    transform: scale(1.025);
}

.cdl-sale-badge {
    position: absolute;
    z-index: 2;
    left: 10px;
    top: 10px;
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 28px;
    padding: 0 7px;
    border-radius: 999px;
    background: #e11;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.cdl-default-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 13px;
}

.cdl-default-title {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
}

.cdl-default-title a {
    color: var(--cdl-text) !important;
    text-decoration: none !important;
}

.cdl-default-price {
    margin-top: auto;
    color: var(--cdl-text);
    font-size: 13px;
    font-weight: 800;
}

.cdl-default-price del {
    color: var(--cdl-muted);
    font-weight: 500;
}

.cdl-default-rating .star-rating {
    float: none !important;
    margin: 0 !important;
    font-size: 12px;
}

.cdl-default-cart {
    appearance: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 40px !important;
    margin: 2px 0 0 !important;
    padding: 9px 12px !important;
    border: 1px solid var(--cdl-button-bg) !important;
    border-radius: calc(var(--cdl-radius) - 2px) !important;
    background: var(--cdl-button-bg) !important;
    color: var(--cdl-button-text) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: opacity .18s ease, transform .18s ease;
}

.cdl-default-cart:hover {
    opacity: .88;
    transform: translateY(-1px);
}

/* ---------- Empty state ---------- */
.cdl-shop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 330px;
    padding: 40px 22px;
    border: 1px dashed var(--cdl-border);
    border-radius: var(--cdl-radius);
    background: var(--cdl-soft);
    text-align: center;
}

.cdl-shop-empty-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 50%;
    background: var(--cdl-surface);
    color: var(--cdl-muted);
}

.cdl-shop-empty-icon svg {
    width: 22px;
    height: 22px;
}

.cdl-shop-empty h3 {
    margin: 0 0 7px !important;
    color: var(--cdl-text) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

.cdl-shop-empty p {
    max-width: 390px;
    margin: 0 0 18px !important;
    color: var(--cdl-muted) !important;
    font-size: 12px !important;
}

.cdl-shop-empty .cdl-shop-clear-all {
    width: auto;
    min-width: 150px;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* ---------- Pagination ---------- */
.cdl-shop-pagination-wrap {
    margin-top: 28px;
}

.cdl-shop-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cdl-shop-pagination .page-numbers {
    display: inline-grid !important;
    place-items: center;
    min-width: 38px;
    height: 38px;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid var(--cdl-border) !important;
    border-radius: 9px !important;
    background: var(--cdl-surface) !important;
    color: var(--cdl-text) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.cdl-shop-pagination a.page-numbers:hover,
.cdl-shop-pagination a.page-numbers:focus-visible {
    border-color: #cbd0d4 !important;
    background: var(--cdl-hover) !important;
}

.cdl-shop-pagination .page-numbers.current {
    border-color: var(--cdl-button-bg) !important;
    background: var(--cdl-button-bg) !important;
    color: var(--cdl-button-text) !important;
}

.cdl-page-arrow {
    width: 17px;
    height: 17px;
}

/* ---------- Drawer layout controlled by JS breakpoint ---------- */
.cdl-is-drawer-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.cdl-is-drawer-layout .cdl-shop-sidebar {
    position: fixed !important;
    z-index: 100002;
    inset: 0 auto 0 0;
    width: min(var(--cdl-drawer-width), 430px);
    max-width: calc(100vw - 34px);
    height: 100vh;
    height: 100dvh;
    max-height: none !important;
    border: 0 !important;
    border-right: 1px solid var(--cdl-border) !important;
    box-shadow: 18px 0 50px rgba(0,0,0,.13);
    transform: translate3d(-105%,0,0);
    visibility: hidden;
    transition: transform .34s cubic-bezier(.22,.8,.25,1), visibility 0s linear .34s;
}

.cdl-is-drawer-layout.is-mobile-filters-open .cdl-shop-sidebar {
    transform: translate3d(0,0,0);
    visibility: visible;
    transition: transform .34s cubic-bezier(.22,.8,.25,1), visibility 0s linear 0s;
}

.cdl-is-drawer-layout .cdl-mobile-sidebar-head {
    display: flex;
}

.cdl-is-drawer-layout .cdl-sidebar-scroll {
    flex: 1 1 auto;
    padding: 10px 18px 18px;
}

.cdl-is-drawer-layout .cdl-sidebar-actions {
    padding: 12px 18px max(14px, env(safe-area-inset-bottom));
}

.cdl-is-drawer-layout .cdl-mobile-sidebar-close {
    display: grid !important;
    place-items: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    color: var(--cdl-text) !important;
}

.cdl-is-drawer-layout .cdl-mobile-sidebar-close:hover {
    background: var(--cdl-hover) !important;
}

.cdl-is-drawer-layout .cdl-mobile-sidebar-close svg {
    width: 18px;
    height: 18px;
}

.cdl-is-drawer-layout .cdl-mobile-filter-toggle {
    display: inline-flex !important;
}

.cdl-mobile-overlay {
    appearance: none !important;
    position: fixed !important;
    z-index: 100001;
    inset: 0;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(12,14,16,.43) !important;
    box-shadow: none !important;
    opacity: 0;
    backdrop-filter: blur(1.5px);
    transition: opacity .3s ease;
}

.cdl-mobile-overlay[hidden] {
    display: none !important;
}

.cdl-is-drawer-layout.is-mobile-filters-open .cdl-mobile-overlay {
    opacity: 1;
}

body.cdl-shop-filter-lock {
    overflow: hidden !important;
    touch-action: none;
}

/* Tablet toolbar: search remains directly visible; filters/count/sort stay accessible. */
.cdl-is-drawer-layout .cdl-shop-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.cdl-is-drawer-layout .cdl-toolbar-meta {
    justify-content: space-between;
    width: 100%;
}

.cdl-is-drawer-layout .cdl-toolbar-count {
    margin-right: auto;
}

/* ---------- Responsive plugin grid ---------- */
@media (max-width: 1024px) {
    .cdl-shop-products {
        grid-template-columns: repeat(var(--cdl-cols-tablet, 2), minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cdl-shop-products {
        grid-template-columns: repeat(var(--cdl-cols-mobile, 2), minmax(0, 1fr));
        gap: 12px;
    }

    .cdl-shop-toolbar {
        margin-bottom: 12px;
    }

    .cdl-toolbar-meta {
        display: grid;
        grid-template-columns: auto minmax(0,1fr) minmax(132px,auto);
        gap: 8px;
    }

    .cdl-mobile-filter-toggle {
        min-width: 90px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .cdl-toolbar-count {
        justify-self: start;
        margin: 0 !important;
    }

    .cdl-sort-wrap {
        justify-self: end;
        min-width: 0;
    }

    .cdl-sort-label {
        display: none;
    }

    .cdl-sort-select-shell {
        min-width: 132px;
        width: 132px;
    }

    .cdl-shop-sort {
        padding-left: 10px !important;
        padding-right: 32px !important;
        font-size: 11px !important;
    }

    .cdl-results-range {
        font-size: 10px;
    }

    .cdl-default-card-body {
        padding: 10px;
    }

    .cdl-default-title {
        font-size: 12px !important;
    }

    .cdl-default-price {
        font-size: 12px;
    }

    .cdl-default-cart {
        min-height: 38px !important;
        font-size: 10px !important;
    }

    .cdl-shop-pagination-wrap {
        margin-top: 22px;
    }
}

@media (max-width: 420px) {
    .cdl-toolbar-meta {
        grid-template-columns: auto minmax(0,1fr) 118px;
    }

    .cdl-sort-select-shell {
        min-width: 118px;
        width: 118px;
    }

    .cdl-toolbar-count span {
        display: none;
    }

    .cdl-toolbar-count strong::after {
        content: " items";
        color: var(--cdl-muted);
        font-size: 10px;
        font-weight: 500;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdl-ajax-shop *,
    .cdl-ajax-shop *::before,
    .cdl-ajax-shop *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ==========================================================================
   v1.2.0 — Professional layout / Elementor Loop Grid / section scrolling
   ========================================================================== */
.cdl-ajax-shop {
    --cdl-category-scroll-height: 400px;
    --cdl-brand-scroll-height: 320px;
    --cdl-section-gap: 20px;
    --cdl-product-row-gap: 20px;
    align-items: start;
}

/* Desktop sidebar no longer becomes one giant scroll column. */
.cdl-shop-sidebar {
    overflow: visible;
    border-right: 1px solid var(--cdl-border);
}

.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) .cdl-shop-sidebar {
    max-height: none;
    overflow: visible;
}

.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-sidebar-scroll {
    overflow: visible;
    max-height: none;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
}

.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-sidebar-scroll::-webkit-scrollbar {
    display: none;
}

/* Each filter section is visually separated and easier to scan. */
.cdl-filter-section {
    min-width: 0;
}

.cdl-filter-section + .cdl-filter-section {
    margin-top: var(--cdl-section-gap);
    padding-top: calc(var(--cdl-section-gap) * .65);
    border-top: 1px solid var(--cdl-border);
}

.cdl-filter-divider {
    margin: var(--cdl-section-gap) 0;
}

.cdl-filter-section-title {
    min-height: 42px;
    padding: 6px 4px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: .075em;
}

.cdl-filter-section-title > span:first-child {
    display: flex;
    align-items: center;
    min-width: 0;
}

.cdl-section-chevron {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 5px;
    border-radius: 7px;
    background: var(--cdl-soft);
    color: var(--cdl-muted);
}

.cdl-section-chevron svg {
    width: 14px;
    height: 14px;
}

.cdl-filter-section-title:hover .cdl-section-chevron,
.cdl-filter-section-title:focus-visible .cdl-section-chevron,
.cdl-filter-section.is-open > .cdl-filter-section-title .cdl-section-chevron {
    background: var(--cdl-hover);
    color: var(--cdl-text);
}

/* Categories get their own dedicated scrollbar. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section[data-filter-section="categories"] .cdl-category-tree {
    max-height: min(var(--cdl-category-scroll-height), 42vh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c6cbd0 transparent;
    padding-right: 8px;
}

/* Brands get a separate dedicated scrollbar; search stays visible above it. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    max-height: min(var(--cdl-brand-scroll-height), 34vh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c6cbd0 transparent;
    padding-right: 7px;
}

.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar {
    width: 6px;
}

.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-track,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-track {
    background: transparent;
}

.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb {
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #c6cbd0;
    background-clip: padding-box;
}

.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb:hover,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb:hover {
    background: #aeb5bc;
    background-clip: padding-box;
}

/* Category rows / arrows / checkboxes. */
.cdl-category-row {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 3px;
    align-items: center;
}

.cdl-category-toggle {
    width: 22px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    align-self: center;
    border-radius: 7px !important;
    color: #8a9096 !important;
}

.cdl-category-toggle svg {
    width: 13px;
    height: 13px;
}

.cdl-category-toggle:hover,
.cdl-category-toggle:focus-visible {
    background: var(--cdl-hover) !important;
    color: var(--cdl-text) !important;
}

.cdl-category-toggle-spacer {
    width: 22px;
}

.cdl-filter-option {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 36px;
    padding: 6px 7px !important;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.35;
}

.cdl-check-ui {
    width: 15px;
    height: 15px;
    border-width: 1.4px;
    border-radius: 4px;
}

.cdl-check-ui svg {
    width: 10px;
    height: 10px;
}

.cdl-option-count {
    font-size: 10px;
}

.cdl-brand-search-wrap {
    height: 40px;
    margin: 2px 0 10px !important;
    border-radius: 10px;
    background: #fff;
}

.cdl-brand-search-wrap .cdl-control-icon {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 11px;
}

/* Toolbar refinement. */
.cdl-shop-toolbar {
    gap: 14px;
    margin-bottom: 14px;
}

.cdl-toolbar-search {
    border-radius: 12px;
    background: #f7f8f9;
    border-color: #e2e5e8;
}

.cdl-toolbar-search:hover {
    background: #f4f5f6;
    border-color: #d4d8dc;
}

.cdl-control-icon {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
}

.cdl-control-icon svg {
    width: 17px;
    height: 17px;
}

.cdl-shop-search {
    font-size: 13px !important;
}

.cdl-toolbar-meta {
    gap: 10px;
}

.cdl-toolbar-count {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-size: 11px;
}

.cdl-toolbar-count strong {
    font-size: 13px;
}

.cdl-sort-wrap {
    gap: 7px;
    font-size: 11px;
    color: var(--cdl-text);
}

.cdl-sort-label {
    font-weight: 700;
}

.cdl-sort-select-shell {
    min-width: 156px;
}

.cdl-shop-sort {
    padding-left: 12px !important;
    padding-right: 38px !important;
    border-radius: 10px !important;
    border-color: #dfe3e6 !important;
    font-size: 11px !important;
}

.cdl-select-chevron {
    right: 12px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 2px;
    color: #6d747b;
}

.cdl-select-chevron svg {
    width: 14px;
    height: 14px;
}

.cdl-results-range {
    margin-bottom: 12px;
    color: var(--cdl-muted);
    font-size: 10.5px;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------\n   Elementor Loop Grid: the plugin can now reliably control columns.\n   It does NOT change the Elementor Loop Item/card design itself.\n   -------------------------------------------------------------------------- */
.cdl-elementor-loop-grid-host {
    width: 100%;
    min-width: 0;
}

.cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-widget-loop-grid > .elementor-widget-container > .elementor-loop-container,
.cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-widget-loop-grid .elementor-loop-container.elementor-grid,
.cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-loop-container.elementor-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--cdl-cols-desktop, 3), minmax(0, 1fr)) !important;
    column-gap: var(--cdl-product-gap, 18px) !important;
    row-gap: var(--cdl-product-row-gap, 20px) !important;
    width: 100% !important;
    min-width: 0 !important;
}

.cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-widget-loop-grid .e-loop-item,
.cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-widget-loop-grid .elementor-loop-item {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* The plugin-rendered grid uses the same column + row-gap controls. */
.cdl-shop-products {
    column-gap: var(--cdl-product-gap);
    row-gap: var(--cdl-product-row-gap, var(--cdl-product-gap));
}

/* Mobile drawer remains a single natural scroll surface; avoids nested touch scroll. */
.cdl-is-drawer-layout .cdl-sidebar-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.cdl-is-drawer-layout .cdl-filter-section[data-filter-section="categories"] .cdl-category-tree,
.cdl-is-drawer-layout .cdl-brand-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.cdl-is-drawer-layout .cdl-filter-section + .cdl-filter-section {
    margin-top: 14px;
    padding-top: 10px;
}

.cdl-is-drawer-layout .cdl-mobile-sidebar-head {
    min-height: 62px;
    padding: 12px 16px;
}

.cdl-is-drawer-layout .cdl-mobile-sidebar-close {
    width: 34px !important;
    height: 34px !important;
}

.cdl-mobile-filter-toggle {
    border-radius: 10px !important;
}

.cdl-mobile-filter-icon {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
}

@media (max-width: 1024px) {
    .cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-widget-loop-grid > .elementor-widget-container > .elementor-loop-container,
    .cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-widget-loop-grid .elementor-loop-container.elementor-grid,
    .cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-loop-container.elementor-grid {
        grid-template-columns: repeat(var(--cdl-cols-tablet, 2), minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-widget-loop-grid > .elementor-widget-container > .elementor-loop-container,
    .cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-widget-loop-grid .elementor-loop-container.elementor-grid,
    .cdl-elementor-loop-grid-host.cdl-force-loop-columns .elementor-loop-container.elementor-grid {
        grid-template-columns: repeat(var(--cdl-cols-mobile, 2), minmax(0, 1fr)) !important;
    }

    .cdl-shop-toolbar {
        gap: 9px;
    }

    .cdl-toolbar-search {
        border-radius: 10px;
    }

    .cdl-toolbar-meta {
        gap: 7px;
    }

    .cdl-toolbar-count {
        min-height: 36px;
        padding: 0 5px;
    }

    .cdl-sort-select-shell {
        min-width: 124px;
        width: 124px;
    }
}

/* v1.2.0 active-filter close icon */
.cdl-chip-x {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
}
.cdl-chip-x svg {
    width: 13px;
    height: 13px;
}

/* ==========================================================================\n   v1.3.0 Variable Product Quick Add Popup\n   ========================================================================== */

/* ==========================================================================\n   v1.4 — modern sticky filters + inline variation quick add\n   ========================================================================== */
.cdl-ajax-shop {
    --cdl-filter-radius: 12px;
    --cdl-filter-section-gap: 14px;
}

/* Desktop sidebar: sticky shell, but only the actual category/brand lists scroll. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-shop-sidebar {
    overflow: visible;
    border-right: 0;
    background: transparent;
}
.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) .cdl-shop-sidebar {
    position: sticky;
    top: var(--cdl-sticky-offset);
    max-height: none;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-sidebar-scroll {
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
    scrollbar-width: none;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-sidebar-scroll::-webkit-scrollbar { display: none; }
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-sidebar-actions {
    padding: 12px 0 0;
    border: 0;
    background: transparent;
}

.cdl-filter-section {
    overflow: hidden;
    margin: 0 0 var(--cdl-filter-section-gap);
    border: 1px solid var(--cdl-border);
    border-radius: var(--cdl-filter-radius);
    background: var(--cdl-surface);
    box-shadow: 0 1px 2px rgba(15,23,42,.025);
}
.cdl-filter-section + .cdl-filter-section { margin-top: 0; }
.cdl-filter-section-title {
    min-height: 52px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid transparent !important;
    background: var(--cdl-surface) !important;
    transition: background-color .18s ease, border-color .18s ease !important;
}
.cdl-filter-section.is-open > .cdl-filter-section-title {
    border-bottom-color: var(--cdl-border) !important;
}
.cdl-filter-section-title:hover,
.cdl-filter-section-title:focus-visible { background: var(--cdl-soft) !important; }
.cdl-section-heading-main,
.cdl-section-heading-tools {
    display: flex;
    align-items: center;
    min-width: 0;
}
.cdl-section-heading-main { gap: 9px; }
.cdl-section-heading-tools { gap: 8px; }
.cdl-section-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--cdl-soft);
    color: var(--cdl-text);
}
.cdl-section-icon svg { width: 16px; height: 16px; }
.cdl-section-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .055em;
}
.cdl-section-count {
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--cdl-soft);
    color: var(--cdl-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
}
.cdl-section-chevron {
    width: 28px;
    height: 28px;
    padding: 7px;
    border-radius: 8px;
    background: transparent;
    color: var(--cdl-muted);
}
.cdl-filter-section-title:hover .cdl-section-chevron,
.cdl-filter-section-title:focus-visible .cdl-section-chevron { background: #fff; color: var(--cdl-text); }
.cdl-filter-section-body-inner { padding: 10px 9px 10px; }

/* Only these two list columns scroll on desktop. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree {
    max-height: min(var(--cdl-category-scroll-height), calc(100dvh - var(--cdl-sticky-offset) - 185px));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c8cdd2 transparent;
    padding-right: 4px;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    max-height: min(var(--cdl-brand-scroll-height), calc(100dvh - var(--cdl-sticky-offset) - 245px));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c8cdd2 transparent;
    padding-right: 4px;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar { width: 5px; }
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-track,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-track { background: transparent; }
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb {
    background: #c8cdd2;
    border-radius: 999px;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb:hover,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb:hover { background: #9fa6ad; }

.cdl-category-row {
    grid-template-columns: 28px minmax(0,1fr);
    gap: 2px;
    min-height: 38px;
}
.cdl-category-toggle {
    width: 28px !important;
    height: 28px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: #747b82 !important;
}
.cdl-category-toggle svg { width: 15px; height: 15px; transform: none !important; }
.cdl-category-toggle:hover,
.cdl-category-toggle:focus-visible {
    border-color: var(--cdl-border) !important;
    background: var(--cdl-soft) !important;
    color: var(--cdl-text) !important;
}
.cdl-category-item.is-expanded > .cdl-category-row .cdl-expand-vertical { opacity: 0; }
.cdl-expand-vertical { transition: opacity .18s ease; }
.cdl-category-toggle-spacer { width: 28px; }
.cdl-category-depth-1,
.cdl-category-depth-2,
.cdl-category-depth-3,
.cdl-category-depth-4,
.cdl-category-depth-5 { padding-left: 17px !important; }

.cdl-filter-option {
    min-height: 36px;
    grid-template-columns: 17px minmax(0,1fr) auto;
    gap: 9px;
    padding: 5px 7px !important;
    border-radius: 8px;
    font-size: 12.5px;
}
.cdl-filter-option:hover { background: var(--cdl-soft); }
.cdl-filter-option.is-selected,
.cdl-filter-option:has(input:checked) { background: color-mix(in srgb, var(--cdl-accent) 9%, #fff); }
.cdl-check-ui {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1px solid #cfd4d9;
    background: #fff;
}
.cdl-filter-option input:checked + .cdl-check-ui {
    border-color: var(--cdl-text);
    background: var(--cdl-text);
    color: #fff;
}
.cdl-check-ui svg { width: 12px; height: 12px; }
.cdl-option-label { font-weight: 560; }
.cdl-option-count {
    min-width: 24px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--cdl-soft);
    color: var(--cdl-muted);
    font-size: 9.5px;
    font-weight: 700;
    text-align: center;
}
.cdl-brand-search-wrap {
    height: 39px;
    margin: 0 0 9px;
    border: 1px solid var(--cdl-border);
    border-radius: 9px;
    background: #fff;
}
.cdl-brand-search-wrap:focus-within {
    border-color: #aeb5bb;
    box-shadow: 0 0 0 3px rgba(43,149,214,.08);
}
.cdl-brand-search { font-size: 11.5px !important; }

.cdl-shop-clear-all {
    min-height: 40px !important;
    border-radius: 10px !important;
    background: var(--cdl-surface) !important;
}

/* Inline variation panel: lives inside the clicked product card. */
.cdl-variation-active-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    z-index: 4 !important;
}
.cdl-inline-variation-panel,
.cdl-inline-variation-panel * { box-sizing: border-box; }
.cdl-inline-variation-panel[hidden] { display: none !important; }
.cdl-inline-variation-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 80;
    max-height: calc(100% - 24px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px;
    border: 1px solid #e1e3e5;
    border-radius: 12px;
    background: rgba(255,255,255,.985);
    color: var(--cdl-text);
    box-shadow: 0 16px 42px rgba(15,23,42,.14), 0 3px 10px rgba(15,23,42,.06);
    opacity: 0;
    transform: translateY(9px) scale(.985);
    transform-origin: bottom center;
    transition: opacity .2s ease, transform .24s cubic-bezier(.2,.75,.25,1);
    scrollbar-width: thin;
    scrollbar-color: #c7ccd1 transparent;
}
.cdl-inline-variation-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.cdl-inline-variation-panel::-webkit-scrollbar { width: 5px; }
.cdl-inline-variation-panel::-webkit-scrollbar-thumb { background: #c7ccd1; border-radius: 999px; }
.cdl-inline-variation-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.cdl-inline-variation-heading { min-width: 0; }
.cdl-inline-variation-kicker {
    display: block;
    margin: 0 0 4px;
    color: var(--cdl-muted);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.cdl-inline-variation-price {
    color: var(--cdl-text);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 800;
}
.cdl-inline-variation-price del { margin-right: 5px; color: var(--cdl-muted); font-weight: 500; opacity: .8; }
.cdl-inline-variation-price ins { color: inherit; text-decoration: none; }
.cdl-inline-variation-close {
    all: unset !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--cdl-border) !important;
    border-radius: 8px !important;
    background: var(--cdl-soft) !important;
    color: var(--cdl-text) !important;
    cursor: pointer !important;
    transition: background-color .16s ease, transform .16s ease !important;
}
.cdl-inline-variation-close:hover { background: #eceff1 !important; transform: translateY(-1px); }
.cdl-inline-variation-close svg { width: 15px; height: 15px; }
.cdl-inline-variation-loading {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--cdl-muted);
    font-size: 11px;
    font-weight: 650;
}
.cdl-inline-variation-loading[hidden],
.cdl-inline-variation-error[hidden],
.cdl-inline-variation-form[hidden] { display: none !important; }
.cdl-inline-variation-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #dfe2e5;
    border-top-color: var(--cdl-text);
    border-radius: 50%;
    animation: cdlInlineVariationSpin .7s linear infinite;
}
@keyframes cdlInlineVariationSpin { to { transform: rotate(360deg); } }
.cdl-inline-variation-error {
    padding: 10px 11px;
    border: 1px solid #efd8d8;
    border-radius: 8px;
    background: #fff8f8;
    color: #9c2828;
    font-size: 10.5px;
    line-height: 1.45;
}
.cdl-inline-variation-fields { display: grid; gap: 10px; }
.cdl-inline-variation-field { display: grid !important; gap: 6px !important; margin: 0 !important; }
.cdl-inline-variation-label {
    color: var(--cdl-text);
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 700;
}
.cdl-inline-variation-select-shell { position: relative; display: block; }
.cdl-inline-variation-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 38px 0 11px !important;
    border: 1px solid #d7dade !important;
    border-radius: 8px !important;
    outline: 0 !important;
    background: #fff !important;
    color: var(--cdl-text) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 11.5px !important;
    line-height: 40px !important;
    font-weight: 550 !important;
    cursor: pointer !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}
.cdl-inline-variation-select:hover { border-color: #b8bec4 !important; }
.cdl-inline-variation-select:focus {
    border-color: var(--cdl-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdl-accent) 10%, transparent) !important;
}
.cdl-inline-variation-select-icon {
    position: absolute;
    right: 11px;
    top: 50%;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    color: #687078;
    pointer-events: none;
}
.cdl-inline-variation-select-icon svg { width: 14px; height: 14px; }
.cdl-inline-variation-availability {
    min-height: 0;
    margin-top: 7px;
    color: var(--cdl-muted);
    font-size: 9.5px;
    line-height: 1.4;
}
.cdl-inline-variation-availability:empty { display: none; }
.cdl-inline-variation-availability.is-error { color: #a72e2e; }
.cdl-inline-variation-add {
    all: unset !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 11px 0 0 !important;
    padding: 0 12px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--cdl-button-bg) !important;
    color: var(--cdl-button-text) !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    transition: transform .16s ease, opacity .16s ease, background-color .16s ease !important;
}
.cdl-inline-variation-add:hover:not(:disabled) { transform: translateY(-1px); opacity: .92; }
.cdl-inline-variation-add:disabled { background: #a6a8aa !important; cursor: not-allowed !important; }
.cdl-inline-variation-add.is-loading { opacity: .7; cursor: wait !important; }
.cdl-inline-variation-add.is-added { background: var(--cdl-accent) !important; color: #fff !important; }
.cdl-inline-variation-chevron-template { display: none !important; }

.cdl-is-drawer-layout .cdl-filter-section {
    border-radius: 12px;
    margin-bottom: 12px;
}
.cdl-is-drawer-layout .cdl-sidebar-scroll {
    overflow-y: auto !important;
    padding: 12px 14px 18px !important;
}
.cdl-is-drawer-layout .cdl-category-tree,
.cdl-is-drawer-layout .cdl-brand-list {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

@media (max-width: 960px) {
    .cdl-inline-variation-panel {
        left: 8px;
        right: 8px;
        bottom: 8px;
        max-height: calc(100% - 16px);
        padding: 12px;
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdl-inline-variation-panel,
    .cdl-inline-variation-close,
    .cdl-inline-variation-add,
    .cdl-filter-section-body,
    .cdl-category-children,
    .cdl-section-chevron { transition: none !important; }
}


/* ==========================================================================
   v1.5.0 — navigation/scroll/ratings/toolbar/inline-variation hardening
   ========================================================================== */

/* Toolbar: one result count only and every control shares the same vertical center. */
.cdl-results-head { display: none !important; }
.cdl-shop-toolbar {
    align-items: center !important;
    min-height: var(--cdl-control-height);
}
.cdl-toolbar-search,
.cdl-toolbar-meta,
.cdl-sort-wrap,
.cdl-sort-select-shell,
.cdl-toolbar-count {
    align-self: center !important;
}
.cdl-toolbar-meta {
    min-height: var(--cdl-control-height);
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}
.cdl-toolbar-count {
    height: var(--cdl-control-height);
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 2px !important;
}
.cdl-toolbar-count strong,
.cdl-toolbar-count span,
.cdl-sort-label {
    display: inline-flex;
    align-items: center;
    line-height: 1 !important;
    margin: 0 !important;
}
.cdl-sort-wrap {
    min-height: var(--cdl-control-height);
    align-items: center !important;
}
.cdl-sort-select-shell {
    height: var(--cdl-control-height);
    display: flex !important;
    align-items: center !important;
}
.cdl-shop-sort { margin: 0 !important; vertical-align: middle !important; }

/* Sticky desktop sidebar remains header-safe. */
.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) .cdl-shop-sidebar {
    top: var(--cdl-sticky-offset, 90px) !important;
}

/* Section headers: remove theme button offsets and keep every icon optically centered. */
.cdl-filter-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.cdl-section-heading-main,
.cdl-section-heading-tools {
    height: 30px;
    display: flex !important;
    align-items: center !important;
}
.cdl-section-icon,
.cdl-section-chevron,
.cdl-section-count {
    margin: 0 !important;
    align-self: center !important;
}
.cdl-section-chevron svg { transform-origin: 50% 50%; }

/* Category navigation: label/check/count first, dedicated disclosure control on the right. */
.cdl-category-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
}
.cdl-category-row > .cdl-filter-option {
    grid-column: 1;
    min-width: 0;
    margin: 0 !important;
}
.cdl-category-row > .cdl-category-toggle {
    grid-column: 2;
    justify-self: end;
}
.cdl-category-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #6f7780 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}
.cdl-category-toggle:hover,
.cdl-category-toggle:focus-visible {
    border-color: var(--cdl-border) !important;
    background: var(--cdl-soft) !important;
    color: var(--cdl-text) !important;
}
.cdl-category-toggle svg {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    transform: rotate(0deg) !important;
    transform-origin: 50% 50% !important;
    transition: transform .2s cubic-bezier(.2,.75,.25,1) !important;
}
.cdl-category-item.is-expanded > .cdl-category-row .cdl-category-toggle svg {
    transform: rotate(90deg) !important;
}
.cdl-category-toggle-spacer { display: none !important; }

/* Nested categories use a quiet tree guide instead of drifting toggle indentation. */
.cdl-category-depth-1,
.cdl-category-depth-2,
.cdl-category-depth-3,
.cdl-category-depth-4,
.cdl-category-depth-5 {
    padding-left: 0 !important;
}
.cdl-category-children-inner > .cdl-category-level {
    margin: 2px 0 2px 12px !important;
    padding: 0 0 0 11px !important;
    border-left: 1px solid #eceff1;
}
.cdl-category-item { margin: 0 !important; }

/* Filter rows and product-count badges. */
.cdl-filter-option {
    min-height: 38px !important;
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
    line-height: 1.25 !important;
}
.cdl-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 560;
}
.cdl-option-count {
    min-width: 27px;
    min-height: 21px;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e8eaec;
    border-radius: 999px !important;
    background: #f7f8f9 !important;
    color: #727980 !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
}
.cdl-filter-option.is-selected .cdl-option-count,
.cdl-filter-option:has(input:checked) .cdl-option-count {
    border-color: color-mix(in srgb, var(--cdl-accent) 25%, #e8eaec);
    background: color-mix(in srgb, var(--cdl-accent) 8%, #fff) !important;
    color: var(--cdl-text) !important;
}

/* Desktop nested list scrolling: wheel/touchpad target only the list, not the whole sidebar. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    position: relative;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: auto !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree {
    max-height: min(var(--cdl-category-scroll-height), calc(100dvh - var(--cdl-sticky-offset) - 205px)) !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    max-height: min(var(--cdl-brand-scroll-height), calc(100dvh - var(--cdl-sticky-offset) - 260px)) !important;
}

/* WooCommerce's classic star font can render as literal "sssss" when a theme omits the font.
   Draw real stars with system glyphs instead and let WooCommerce's span width clip the fill. */
.cdl-ajax-shop .star-rating.cdl-star-rating-fixed,
.cdl-ajax-shop .star-rating {
    position: relative !important;
    display: inline-block !important;
    width: 78px !important;
    height: 16px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    color: transparent !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0 !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
}
.cdl-ajax-shop .star-rating::before,
.cdl-ajax-shop .star-rating span::before {
    content: "★★★★★" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 78px !important;
    height: 16px !important;
    margin: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 16px !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
}
.cdl-ajax-shop .star-rating::before { color: #d8dde1 !important; }
.cdl-ajax-shop .star-rating span {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    height: 16px !important;
    overflow: hidden !important;
    padding: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 16px !important;
}
.cdl-ajax-shop .star-rating span::before { color: var(--cdl-accent) !important; }
.cdl-rating-row,
.cdl-ajax-shop .woocommerce-product-rating:has(.star-rating) {
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px !important;
    min-height: 18px;
    line-height: 1 !important;
}
.cdl-review-count {
    display: inline-flex !important;
    align-items: center;
    color: var(--cdl-muted) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap;
}
.cdl-native-stars {
    position: relative;
    display: inline-block;
    width: 78px;
    height: 16px;
    overflow: hidden;
    color: #d8dde1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.cdl-native-stars::before,
.cdl-native-stars > span::before { content: "★★★★★"; }
.cdl-native-stars > span {
    position: absolute;
    inset: 0 auto 0 0;
    height: 16px;
    overflow: hidden;
    color: var(--cdl-accent);
    white-space: nowrap;
}

/* Inline variation panel cannot outgrow its product card. */
.cdl-inline-variation-panel {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;
    overflow-x: hidden !important;
}
.cdl-inline-variation-form,
.cdl-inline-variation-fields,
.cdl-inline-variation-field,
.cdl-inline-variation-select-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.cdl-inline-variation-add {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
}
.cdl-inline-variation-select { box-sizing: border-box !important; max-width: 100% !important; }

@media (max-width: 960px) {
    .cdl-toolbar-meta {
        min-height: var(--cdl-control-height);
        align-items: center !important;
    }
    .cdl-toolbar-count,
    .cdl-sort-wrap,
    .cdl-mobile-filter-toggle {
        align-self: center !important;
    }
    .cdl-inline-variation-panel { max-width: calc(100% - 16px) !important; }
}

/* ==========================================================================
   v1.7.0 — sticky sidebar + zero-height collapse + mobile toolbar + card polish
   ========================================================================== */

/* --------------------------------------------------------------------------
   HARD THEME ISOLATION
   A site-wide rule such as:
   [type="button"]:not(:disabled), button:not(:disabled) { margin-top:20px!important; }
   must never move controls inside this widget.
   -------------------------------------------------------------------------- */
.cdl-ajax-shop.cdl-ajax-shop button[type="button"],
.cdl-ajax-shop.cdl-ajax-shop button[type="submit"],
.cdl-ajax-shop.cdl-ajax-shop [role="button"] {
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.cdl-ajax-shop.cdl-ajax-shop button[type="button"]:not(:disabled),
.cdl-ajax-shop.cdl-ajax-shop button[type="submit"]:not(:disabled) {
    margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   DESKTOP SIDEBAR — whole shell stays sticky; only the lists scroll.
   -------------------------------------------------------------------------- */
/* Elementor wrappers must not clip a sticky child. */
.elementor-widget-cdl_ajax_shop,
.elementor-widget-cdl_ajax_shop > .elementor-widget-container {
    overflow: visible !important;
}

.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-shop-sidebar,
.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) .cdl-shop-sidebar {
    position: sticky !important;
    top: var(--cdl-sticky-offset, 90px) !important;
    align-self: start !important;
    width: 100% !important;
    max-height: calc(100vh - var(--cdl-sticky-offset, 90px) - 18px) !important;
    max-height: calc(100dvh - var(--cdl-sticky-offset, 90px) - 18px) !important;
    overflow: hidden !important;
    z-index: 20 !important;
    border: 0 !important;
    background: transparent !important;
}

.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-sidebar-scroll {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    scrollbar-width: none !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-sidebar-scroll::-webkit-scrollbar {
    display: none !important;
}

.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-sidebar-actions {
    flex: 0 0 auto !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Filter sections now read as clean, compact filter cards instead of loose blocks. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--cdl-border) !important;
    border-radius: 14px !important;
    background: var(--cdl-surface) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025) !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section + .cdl-filter-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 1px solid var(--cdl-border) !important;
}

/* Hide decorative section icons; one clear title + count + chevron is easier to scan. */
.cdl-ajax-shop .cdl-section-icon {
    display: none !important;
}

/* Desktop sidebar headings requested: Inter / 20 / 800. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section-title {
    min-height: 58px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 14px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--cdl-text) !important;
    box-shadow: none !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;
    text-align: left !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section-title:hover,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section-title:focus-visible {
    background: #fafbfb !important;
    color: var(--cdl-text) !important;
}
.cdl-ajax-shop .cdl-section-heading-main,
.cdl-ajax-shop .cdl-section-heading-tools {
    min-width: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}
.cdl-ajax-shop .cdl-section-title-text {
    min-width: 0 !important;
}
/* This number is the number of filter terms, not products, so keep the UI quieter. */
.cdl-ajax-shop .cdl-section-count {
    display: none !important;
}
.cdl-ajax-shop .cdl-section-chevron {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #66707a !important;
    transform: rotate(0deg) !important;
    transition: transform .22s cubic-bezier(.2,.75,.25,1), background-color .18s ease, border-color .18s ease !important;
}
.cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-title .cdl-section-chevron {
    transform: rotate(180deg) !important;
    background: #f4f6f7 !important;
    border-color: #edf0f2 !important;
}
.cdl-ajax-shop .cdl-section-chevron svg {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
}

/* True zero-height close state. Inner padding is introduced only while open. */
.cdl-ajax-shop .cdl-filter-section-body {
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 0fr !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    transition: grid-template-rows .28s cubic-bezier(.2,.75,.25,1), opacity .18s ease, visibility 0s linear .28s !important;
}
.cdl-ajax-shop .cdl-filter-section-body-inner {
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 12px !important;
    transition: padding .24s cubic-bezier(.2,.75,.25,1) !important;
}
.cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-body {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: grid-template-rows .28s cubic-bezier(.2,.75,.25,1), opacity .2s ease, visibility 0s linear 0s !important;
}
.cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    padding: 2px 12px 12px !important;
}
.cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body,
.cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    min-height: 0 !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Native wheel / trackpad scrolling. No JS wheel hijacking. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    position: relative !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scroll-behavior: smooth !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #bdc3c9 transparent !important;
    padding-right: 5px !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree {
    max-height: min(var(--cdl-category-scroll-height, 400px), 32dvh) !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    max-height: min(var(--cdl-brand-scroll-height, 320px), 24dvh) !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar {
    width: 7px !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-track,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-track {
    background: transparent !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb {
    min-height: 36px !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: #bdc3c9 !important;
    background-clip: padding-box !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb:hover,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb:hover {
    background: #969fa7 !important;
    background-clip: padding-box !important;
}

/* Category navigation: one-line parent, clean count, disclosure button at far right. */
.cdl-ajax-shop .cdl-category-row {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cdl-ajax-shop .cdl-category-row > .cdl-filter-option {
    grid-column: 1 !important;
}
.cdl-ajax-shop .cdl-category-row > .cdl-category-toggle {
    grid-column: 2 !important;
}
.cdl-ajax-shop .cdl-category-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    justify-self: end !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    background: #f8f9fa !important;
    color: #5f6871 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transform: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}
.cdl-ajax-shop .cdl-category-toggle:hover,
.cdl-ajax-shop .cdl-category-toggle:focus-visible {
    background: #eef1f3 !important;
    border-color: #d8dde1 !important;
    color: #111 !important;
}
.cdl-ajax-shop .cdl-category-toggle svg {
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
    transform: rotate(0deg) !important;
    transform-origin: center !important;
    transition: transform .2s cubic-bezier(.2,.75,.25,1) !important;
}
.cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-row .cdl-category-toggle svg {
    transform: rotate(90deg) !important;
}

.cdl-ajax-shop .cdl-filter-option {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 6px 7px !important;
    border-radius: 9px !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    line-height: 1.3 !important;
}
.cdl-ajax-shop .cdl-filter-option:hover {
    background: #f6f7f8 !important;
}
.cdl-ajax-shop .cdl-filter-option.is-selected,
.cdl-ajax-shop .cdl-filter-option:has(input:checked) {
    background: color-mix(in srgb, var(--cdl-accent) 9%, #fff) !important;
}
.cdl-ajax-shop .cdl-category-item[data-depth="0"] > .cdl-category-row .cdl-option-label {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}
.cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label,
.cdl-ajax-shop .cdl-brand-option .cdl-option-label {
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}
.cdl-ajax-shop .cdl-option-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.cdl-ajax-shop .cdl-option-count {
    justify-self: end !important;
    min-width: 26px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border: 1px solid #e7eaed !important;
    border-radius: 999px !important;
    background: #f7f8f9 !important;
    color: #68717a !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}
.cdl-ajax-shop .cdl-check-ui {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border: 1.4px solid #cbd0d5 !important;
    border-radius: 5px !important;
}
.cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    margin: 1px 0 4px 8px !important;
    padding: 0 0 0 9px !important;
    border-left: 1px solid #edf0f2 !important;
}
.cdl-ajax-shop .cdl-brand-search-wrap {
    min-height: 40px !important;
    height: 40px !important;
    margin: 2px 0 8px !important;
    border: 1px solid #e1e5e8 !important;
    border-radius: 10px !important;
    background: #fafbfb !important;
}
.cdl-ajax-shop .cdl-brand-search-wrap:focus-within {
    border-color: #b7bec5 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(43,149,214,.07) !important;
}
.cdl-ajax-shop .cdl-brand-search {
    height: 38px !important;
    margin: 0 !important;
    font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   TOOLBAR — a single count, perfectly centered controls.
   -------------------------------------------------------------------------- */
.cdl-ajax-shop .cdl-results-head,
.cdl-ajax-shop .cdl-results-range {
    display: none !important;
}
.cdl-ajax-shop .cdl-shop-toolbar {
    min-height: var(--cdl-control-height, 46px) !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
}
.cdl-ajax-shop .cdl-toolbar-search,
.cdl-ajax-shop .cdl-toolbar-meta,
.cdl-ajax-shop .cdl-toolbar-count,
.cdl-ajax-shop .cdl-sort-wrap,
.cdl-ajax-shop .cdl-sort-select-shell {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
}
.cdl-ajax-shop .cdl-toolbar-meta {
    min-height: var(--cdl-control-height, 46px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
.cdl-ajax-shop .cdl-toolbar-count {
    height: var(--cdl-control-height, 46px) !important;
    min-height: var(--cdl-control-height, 46px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
.cdl-ajax-shop .cdl-toolbar-count strong {
    color: var(--cdl-text) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}
.cdl-ajax-shop .cdl-toolbar-count span {
    color: var(--cdl-muted) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
}
.cdl-ajax-shop .cdl-sort-wrap {
    min-height: var(--cdl-control-height, 46px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.cdl-ajax-shop .cdl-sort-label {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}
.cdl-ajax-shop .cdl-sort-select-shell {
    height: var(--cdl-control-height, 46px) !important;
    display: inline-flex !important;
    align-items: center !important;
}
.cdl-ajax-shop .cdl-shop-sort {
    height: var(--cdl-control-height, 46px) !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   DEFAULT PRODUCT CARDS — centered content + requested typography.
   -------------------------------------------------------------------------- */
.cdl-ajax-shop .cdl-default-card-body {
    align-items: center !important;
    text-align: center !important;
    gap: 9px !important;
    padding: 14px !important;
}
.cdl-ajax-shop .cdl-default-title {
    width: 100% !important;
    margin: 0 !important;
    color: var(--cdl-text) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    text-align: center !important;
}
.cdl-ajax-shop .cdl-default-title a {
    display: inline !important;
    color: inherit !important;
    font: inherit !important;
    text-align: inherit !important;
}
.cdl-ajax-shop .cdl-default-price {
    width: 100% !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: auto 0 0 !important;
    color: var(--cdl-text) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-align: center !important;
}
.cdl-ajax-shop .cdl-default-price del {
    font-size: .86em !important;
    font-weight: 500 !important;
}
.cdl-ajax-shop .cdl-default-price ins {
    text-decoration: none !important;
    font-weight: 700 !important;
}
.cdl-ajax-shop .cdl-default-cart {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 3px 0 0 !important;
    padding: 9px 12px !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Larger, cleaner rating row: stars + review count are two centered columns. */
.cdl-ajax-shop .cdl-default-rating.cdl-rating-row,
.cdl-ajax-shop .cdl-rating-row,
.cdl-ajax-shop .woocommerce-product-rating.cdl-rating-row {
    width: 100% !important;
    min-height: 27px !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 9px !important;
    row-gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
}
.cdl-ajax-shop .cdl-native-stars,
.cdl-ajax-shop .star-rating.cdl-star-rating-fixed,
.cdl-ajax-shop .star-rating {
    position: relative !important;
    display: inline-block !important;
    float: none !important;
    width: 121px !important;
    height: 27px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #d7dce0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 22px !important;
    line-height: 27px !important;
    letter-spacing: 1.4px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
.cdl-ajax-shop .cdl-native-stars::before,
.cdl-ajax-shop .cdl-native-stars > span::before,
.cdl-ajax-shop .star-rating::before,
.cdl-ajax-shop .star-rating span::before {
    content: "★★★★★" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 121px !important;
    height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 22px !important;
    line-height: 27px !important;
    letter-spacing: 1.4px !important;
    white-space: nowrap !important;
}
.cdl-ajax-shop .cdl-native-stars::before,
.cdl-ajax-shop .star-rating::before {
    color: #d7dce0 !important;
}
.cdl-ajax-shop .cdl-native-stars > span,
.cdl-ajax-shop .star-rating span {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    height: 27px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 27px !important;
    white-space: nowrap !important;
}
.cdl-ajax-shop .cdl-native-stars > span::before,
.cdl-ajax-shop .star-rating span::before {
    color: var(--cdl-accent) !important;
}
.cdl-ajax-shop .cdl-review-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cdl-muted) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* Sale badge: restrained desktop proportions and consistent mobile scale. */
.cdl-ajax-shop .cdl-sale-badge {
    left: 12px !important;
    top: 12px !important;
    min-width: 42px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}

/* Pagination arrows must survive wp_kses_post; draw them with CSS instead of SVG. */
.cdl-ajax-shop .cdl-shop-pagination .page-numbers {
    position: relative !important;
}
.cdl-ajax-shop .cdl-page-arrow {
    width: 18px !important;
    height: 18px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
    color: currentColor !important;
}
.cdl-ajax-shop .cdl-page-arrow::before {
    content: "" !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 1.8px solid currentColor !important;
    border-bottom: 1.8px solid currentColor !important;
}
.cdl-ajax-shop .cdl-page-arrow-next::before {
    transform: rotate(-45deg) translate(-1px, -1px) !important;
}
.cdl-ajax-shop .cdl-page-arrow-prev::before {
    transform: rotate(135deg) translate(-1px, -1px) !important;
}
.cdl-ajax-shop .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Inline variation container: guaranteed card-contained geometry despite theme button CSS. */
.cdl-ajax-shop .cdl-inline-variation-panel {
    box-sizing: border-box !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100% - 20px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 13px !important;
}
.cdl-ajax-shop .cdl-inline-variation-panel *,
.cdl-ajax-shop .cdl-inline-variation-form,
.cdl-ajax-shop .cdl-inline-variation-fields,
.cdl-ajax-shop .cdl-inline-variation-field,
.cdl-ajax-shop .cdl-inline-variation-select-shell {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.cdl-ajax-shop .cdl-inline-variation-form,
.cdl-ajax-shop .cdl-inline-variation-fields,
.cdl-ajax-shop .cdl-inline-variation-field,
.cdl-ajax-shop .cdl-inline-variation-select-shell,
.cdl-ajax-shop .cdl-inline-variation-select {
    width: 100% !important;
}
.cdl-ajax-shop.cdl-ajax-shop .cdl-inline-variation-close[type="button"] {
    margin: 0 !important;
}
.cdl-ajax-shop.cdl-ajax-shop .cdl-inline-variation-add[type="button"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px !important;
    margin: 11px 0 0 !important;
    padding: 0 12px !important;
    overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   MOBILE / TABLET TOOLBAR — Search first row; balanced Filters / Count / Sort.
   -------------------------------------------------------------------------- */
.cdl-is-drawer-layout .cdl-shop-toolbar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 9px !important;
    margin: 0 0 13px !important;
}
.cdl-is-drawer-layout .cdl-toolbar-search {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    border: 1px solid #dfe3e7 !important;
    border-radius: 12px !important;
    background: #f7f8f9 !important;
    box-shadow: none !important;
}
.cdl-is-drawer-layout .cdl-toolbar-search:focus-within {
    border-color: #b5bdc4 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(43,149,214,.07) !important;
}
.cdl-is-drawer-layout .cdl-shop-search {
    height: 42px !important;
    margin: 0 !important;
    padding-left: 8px !important;
    font-size: 13.5px !important;
}
.cdl-is-drawer-layout .cdl-control-icon {
    width: 17px !important;
    height: 17px !important;
    margin-left: 13px !important;
}
.cdl-is-drawer-layout .cdl-toolbar-meta {
    width: 100% !important;
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: minmax(92px, auto) minmax(68px, 1fr) minmax(112px, auto) !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}
.cdl-is-drawer-layout .cdl-mobile-filter-toggle {
    width: auto !important;
    min-width: 92px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #dfe3e7 !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: var(--cdl-text) !important;
    box-shadow: none !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
}
.cdl-is-drawer-layout .cdl-mobile-filter-icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}
.cdl-is-drawer-layout .cdl-toolbar-count {
    justify-self: center !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    white-space: nowrap !important;
}
.cdl-is-drawer-layout .cdl-toolbar-count strong {
    font-size: 13px !important;
}
.cdl-is-drawer-layout .cdl-toolbar-count span {
    display: inline !important;
    font-size: 10.5px !important;
    color: var(--cdl-muted) !important;
}
.cdl-is-drawer-layout .cdl-toolbar-count strong::after {
    content: none !important;
    display: none !important;
}
.cdl-is-drawer-layout .cdl-sort-wrap {
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
}
.cdl-is-drawer-layout .cdl-sort-label {
    display: none !important;
}
.cdl-is-drawer-layout .cdl-sort-select-shell {
    width: clamp(112px, 31vw, 138px) !important;
    min-width: 112px !important;
    height: 42px !important;
    margin: 0 !important;
}
.cdl-is-drawer-layout .cdl-shop-sort {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 32px 0 11px !important;
    border: 1px solid #dfe3e7 !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: var(--cdl-text) !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
}
.cdl-is-drawer-layout .cdl-select-chevron {
    right: 10px !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
}

/* Mobile drawer: one natural scroll surface, polished section cards, sticky header/action. */
.cdl-is-drawer-layout .cdl-shop-sidebar {
    background: #f7f8f9 !important;
}
.cdl-is-drawer-layout .cdl-mobile-sidebar-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    min-height: 62px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid #e5e8eb !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(8px) !important;
}
.cdl-is-drawer-layout .cdl-mobile-sidebar-head strong {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}
.cdl-is-drawer-layout .cdl-sidebar-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    padding: 12px 12px 20px !important;
    scrollbar-width: thin !important;
}
.cdl-is-drawer-layout .cdl-filter-section {
    margin: 0 0 11px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e4e7ea !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.025) !important;
}
.cdl-is-drawer-layout .cdl-filter-section + .cdl-filter-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 1px solid #e4e7ea !important;
}
.cdl-is-drawer-layout .cdl-filter-section-title {
    min-height: 52px !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
}
.cdl-is-drawer-layout .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    padding: 2px 10px 11px !important;
}
.cdl-is-drawer-layout .cdl-category-tree,
.cdl-is-drawer-layout .cdl-brand-list {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}
.cdl-is-drawer-layout .cdl-sidebar-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #e4e7ea !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(8px) !important;
}
.cdl-is-drawer-layout .cdl-shop-clear-all {
    margin: 0 !important;
}

@media (max-width: 640px) {
    .cdl-ajax-shop .cdl-default-title {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }
    .cdl-ajax-shop .cdl-default-price {
        font-size: 13.5px !important;
    }
    .cdl-ajax-shop .cdl-default-cart {
        min-height: 39px !important;
        font-size: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .cdl-ajax-shop .cdl-native-stars,
    .cdl-ajax-shop .star-rating.cdl-star-rating-fixed,
    .cdl-ajax-shop .star-rating {
        width: 96px !important;
        height: 22px !important;
        font-size: 17px !important;
        line-height: 22px !important;
        letter-spacing: 1.1px !important;
    }
    .cdl-ajax-shop .cdl-native-stars::before,
    .cdl-ajax-shop .cdl-native-stars > span::before,
    .cdl-ajax-shop .star-rating::before,
    .cdl-ajax-shop .star-rating span::before {
        width: 96px !important;
        height: 22px !important;
        font-size: 17px !important;
        line-height: 22px !important;
        letter-spacing: 1.1px !important;
    }
    .cdl-ajax-shop .cdl-native-stars > span,
    .cdl-ajax-shop .star-rating span {
        height: 22px !important;
        line-height: 22px !important;
    }
    .cdl-ajax-shop .cdl-review-count {
        font-size: 11px !important;
    }
    .cdl-ajax-shop .cdl-sale-badge {
        left: 8px !important;
        top: 8px !important;
        min-width: 36px !important;
        height: 26px !important;
        padding: 0 6px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 380px) {
    .cdl-is-drawer-layout .cdl-toolbar-meta {
        grid-template-columns: 88px minmax(62px, 1fr) 108px !important;
        gap: 6px !important;
    }
    .cdl-is-drawer-layout .cdl-mobile-filter-toggle {
        min-width: 88px !important;
        padding: 0 9px !important;
        gap: 5px !important;
        font-size: 11.5px !important;
    }
    .cdl-is-drawer-layout .cdl-sort-select-shell {
        width: 108px !important;
        min-width: 108px !important;
    }
    .cdl-is-drawer-layout .cdl-toolbar-count {
        gap: 3px !important;
    }
    .cdl-is-drawer-layout .cdl-toolbar-count strong {
        font-size: 12px !important;
    }
    .cdl-is-drawer-layout .cdl-toolbar-count span {
        font-size: 9.5px !important;
    }
}

/* Short desktop/laptop viewports: keep the complete sticky sidebar visible without
   converting the whole sidebar into a scroll container. */
@media (min-width: 961px) and (max-height: 720px) {
    .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree {
        max-height: min(var(--cdl-category-scroll-height, 400px), 24dvh) !important;
    }
    .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
        max-height: min(var(--cdl-brand-scroll-height, 320px), 18dvh) !important;
    }
    .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section-title {
        min-height: 52px !important;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }
}

/* ==========================================================================
   v1.7.0 — sticky fallback, cleaner collapse, reliable wheel scroll, compact ratings
   ========================================================================== */

/* Keep the content in column 2 even when the sidebar uses the JS fixed-position
   sticky fallback (some Elementor/theme ancestors break CSS position:sticky). */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-content {
    grid-column: 2 !important;
    min-width: 0 !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar {
    grid-column: 1 !important;
}

/* Sidebar: no artificial section height. Closed sections are title-only. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-shop-sidebar {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    z-index: 6 !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-sidebar-scroll {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

/* Use max-height animation instead of a grid track. This guarantees that a closed
   body contributes exactly zero space, including its inner padding. */
.cdl-ajax-shop .cdl-filter-section-body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    grid-template-rows: none !important;
    transition: max-height .32s cubic-bezier(.2,.75,.25,1), opacity .18s ease, visibility 0s linear .32s !important;
}
.cdl-ajax-shop .cdl-filter-section-body > .cdl-filter-section-body-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 12px !important;
}
.cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-body {
    max-height: 620px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: max-height .36s cubic-bezier(.2,.75,.25,1), opacity .2s ease, visibility 0s linear 0s !important;
}
.cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    padding: 4px 12px 14px !important;
}
.cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body,
.cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
}

/* Give each desktop list a useful scrolling area without the previous 32/24dvh
   cap that made short laptop layouts feel cramped. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(var(--cdl-category-scroll-height, 400px), 38dvh) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scroll-behavior: auto !important;
    scrollbar-gutter: stable !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(var(--cdl-brand-scroll-height, 320px), 28dvh) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scroll-behavior: auto !important;
    scrollbar-gutter: stable !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
}

/* Nested category geometry: margins must reduce the available width instead of
   pushing the submenu/toggle outside the filter card. */
.cdl-ajax-shop .cdl-category-tree,
.cdl-ajax-shop .cdl-category-level,
.cdl-ajax-shop .cdl-category-item,
.cdl-ajax-shop .cdl-category-row,
.cdl-ajax-shop .cdl-category-children,
.cdl-ajax-shop .cdl-category-children-inner {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.cdl-ajax-shop .cdl-category-row {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    gap: 5px !important;
    overflow: hidden !important;
}
.cdl-ajax-shop .cdl-category-row > .cdl-filter-option {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.cdl-ajax-shop .cdl-category-row > .cdl-category-toggle {
    justify-self: end !important;
    align-self: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
}
.cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin: 2px 0 3px 12px !important;
    padding: 0 0 0 10px !important;
}
.cdl-ajax-shop .cdl-filter-option {
    max-width: 100% !important;
    overflow: hidden !important;
}
.cdl-ajax-shop .cdl-option-label {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
.cdl-ajax-shop .cdl-option-count {
    flex: 0 0 auto !important;
    max-width: 52px !important;
}

/* Sticky fallback states created by JS when CSS sticky is defeated by an
   Elementor/theme ancestor. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-shop-sidebar.cdl-sticky-fixed {
    position: fixed !important;
    margin: 0 !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-shop-sidebar.cdl-sticky-bottom {
    position: absolute !important;
    margin: 0 !important;
}

/* Compact rating: 22px stars, but no oversized 121px box/gap. */
.cdl-ajax-shop .cdl-default-rating.cdl-rating-row,
.cdl-ajax-shop .cdl-rating-row,
.cdl-ajax-shop .woocommerce-product-rating.cdl-rating-row {
    width: auto !important;
    max-width: 100% !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.cdl-ajax-shop .cdl-native-stars,
.cdl-ajax-shop .star-rating.cdl-star-rating-fixed,
.cdl-ajax-shop .star-rating {
    flex: 0 0 104px !important;
    width: 104px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 22px !important;
    letter-spacing: -0.65px !important;
    margin: 0 !important;
}
.cdl-ajax-shop .cdl-native-stars::before,
.cdl-ajax-shop .cdl-native-stars > span::before,
.cdl-ajax-shop .star-rating::before,
.cdl-ajax-shop .star-rating span::before {
    width: 104px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 22px !important;
    letter-spacing: -0.65px !important;
}
.cdl-ajax-shop .cdl-native-stars > span,
.cdl-ajax-shop .star-rating span {
    height: 24px !important;
    line-height: 24px !important;
}
.cdl-ajax-shop .cdl-review-count {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

/* Mobile drawer must sit above the site's sticky header. isolation:isolate on
   the widget would otherwise trap even a very high child z-index below it. */
.cdl-ajax-shop.cdl-is-drawer-layout {
    isolation: auto !important;
    z-index: auto !important;
}
.cdl-is-drawer-layout .cdl-mobile-overlay {
    z-index: 2147483000 !important;
}
.cdl-is-drawer-layout .cdl-shop-sidebar {
    z-index: 2147483001 !important;
}
.cdl-is-drawer-layout .cdl-mobile-sidebar-head,
.cdl-is-drawer-layout .cdl-sidebar-actions {
    z-index: 3 !important;
}

/* Global theme button margin rules must not shift ANY plugin control. */
.cdl-ajax-shop.cdl-ajax-shop button,
.cdl-ajax-shop.cdl-ajax-shop button:not(:disabled),
.cdl-ajax-shop.cdl-ajax-shop [type="button"],
.cdl-ajax-shop.cdl-ajax-shop [type="button"]:not(:disabled),
.cdl-ajax-shop.cdl-ajax-shop [type="submit"],
.cdl-ajax-shop.cdl-ajax-shop [type="submit"]:not(:disabled) {
    margin-top: 0 !important;
}

/* ========================================================================== 
   v2.1.0 — in-flow sticky, isolated filter scroll, no-flash mobile drawer,
   compact mobile ratings and zero-padding product imagery
   ========================================================================== */

/* Never let the desktop sticky behavior become a fixed/floating full-screen layer. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-managed,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-fixed,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-bottom {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    align-self: start !important;
    z-index: 2 !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-managed {
    transition: none !important;
}

/* The whole sidebar remains in-flow; only Categories and Brands are scroll areas. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-sidebar-scroll {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: none !important;
    padding-right: 14px !important;
}

/* Larger but adaptive list bodies. JS also computes live values so the complete
   sidebar still fits below the 90px sticky site header. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree {
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--cdl-category-live-height, min(var(--cdl-category-scroll-height, 430px), 43dvh)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: none !important;
    scroll-behavior: auto !important;
    scrollbar-gutter: stable !important;
    contain: content !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--cdl-brand-live-height, min(var(--cdl-brand-scroll-height, 330px), 32dvh)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: none !important;
    scroll-behavior: auto !important;
    scrollbar-gutter: stable !important;
    contain: content !important;
}

/* More usable section body without manufacturing height when closed. */
.cdl-ajax-shop .cdl-filter-section-body,
.cdl-ajax-shop .cdl-filter-section-body-inner {
    width: 100% !important;
    min-width: 0 !important;
}
.cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body,
.cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}
.cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-body {
    max-height: 760px !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    padding: 6px 12px 16px !important;
}

/* Nested menu geometry: every level consumes its indentation INSIDE the card. */
.cdl-ajax-shop .cdl-category-level,
.cdl-ajax-shop .cdl-category-item,
.cdl-ajax-shop .cdl-category-row,
.cdl-ajax-shop .cdl-category-children,
.cdl-ajax-shop .cdl-category-children-inner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
.cdl-ajax-shop .cdl-category-row {
    grid-template-columns: minmax(0, 1fr) 26px !important;
    gap: 4px !important;
    padding: 0 !important;
}
.cdl-ajax-shop .cdl-category-row > .cdl-filter-option {
    min-width: 0 !important;
    max-width: 100% !important;
}
.cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    margin: 2px 0 3px 10px !important;
    padding-left: 8px !important;
    padding-right: 0 !important;
}
.cdl-ajax-shop .cdl-category-toggle {
    justify-self: end !important;
    align-self: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    margin: 0 !important;
    transform: none !important;
}
.cdl-ajax-shop .cdl-option-count {
    min-width: 22px !important;
    max-width: 48px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 9.5px !important;
}

/* Compact star width: no artificial empty horizontal space before review text. */
.cdl-ajax-shop .cdl-default-rating.cdl-rating-row,
.cdl-ajax-shop .cdl-rating-row,
.cdl-ajax-shop .woocommerce-product-rating.cdl-rating-row {
    width: auto !important;
    max-width: 100% !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
}
.cdl-ajax-shop .cdl-native-stars,
.cdl-ajax-shop .star-rating.cdl-star-rating-fixed,
.cdl-ajax-shop .star-rating,
.cdl-ajax-shop .cdl-native-stars::before,
.cdl-ajax-shop .cdl-native-stars > span::before,
.cdl-ajax-shop .star-rating::before,
.cdl-ajax-shop .star-rating span::before {
    width: 4.82em !important;
    max-width: 4.82em !important;
    letter-spacing: -1px !important;
}
.cdl-ajax-shop .cdl-native-stars,
.cdl-ajax-shop .star-rating.cdl-star-rating-fixed,
.cdl-ajax-shop .star-rating {
    flex: 0 0 4.82em !important;
}
.cdl-ajax-shop .cdl-review-count {
    margin-left: 0 !important;
}

/* Product imagery should use the entire media box. */
.cdl-ajax-shop .cdl-default-card-media,
.cdl-ajax-shop .cdl-default-card-media img,
.cdl-ajax-shop .cdl-shop-results .e-loop-item img.attachment-woocommerce_thumbnail,
.cdl-ajax-shop .cdl-shop-results .e-loop-item img.wp-post-image {
    padding: 0 !important;
}

/* Strong page lock for the mobile drawer, including iOS/browser overscroll. */
html.cdl-shop-filter-lock,
body.cdl-shop-filter-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
body.cdl-shop-filter-lock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    /* Keep the page frozen with fixed positioning, but do not block touch
       gestures inside the independently scrollable filter drawer. */
    touch-action: auto !important;
}
.cdl-is-drawer-layout .cdl-sidebar-scroll {
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
}

/* Never expose the drawer/sidebar before JS resolves the responsive mode. */
.cdl-ajax-shop.cdl-preinit > .cdl-shop-sidebar {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.cdl-ajax-shop.cdl-js-ready > .cdl-shop-sidebar {
    opacity: 1;
}

@media (max-width: 640px) {
    /* One compact line on mobile. */
    .cdl-ajax-shop .cdl-default-rating.cdl-rating-row,
    .cdl-ajax-shop .cdl-rating-row,
    .cdl-ajax-shop .woocommerce-product-rating.cdl-rating-row {
        min-height: 20px !important;
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        line-height: 1 !important;
    }
    .cdl-ajax-shop .cdl-native-stars,
    .cdl-ajax-shop .star-rating.cdl-star-rating-fixed,
    .cdl-ajax-shop .star-rating,
    .cdl-ajax-shop .cdl-native-stars::before,
    .cdl-ajax-shop .cdl-native-stars > span::before,
    .cdl-ajax-shop .star-rating::before,
    .cdl-ajax-shop .star-rating span::before {
        width: 4.72em !important;
        max-width: 4.72em !important;
        height: 19px !important;
        line-height: 19px !important;
        font-size: 16px !important;
        letter-spacing: -0.8px !important;
    }
    .cdl-ajax-shop .cdl-native-stars,
    .cdl-ajax-shop .star-rating.cdl-star-rating-fixed,
    .cdl-ajax-shop .star-rating {
        flex: 0 0 4.72em !important;
    }
    .cdl-ajax-shop .cdl-native-stars > span,
    .cdl-ajax-shop .star-rating span {
        height: 19px !important;
        line-height: 19px !important;
    }
    .cdl-ajax-shop .cdl-review-count {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        font-size: 10px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 360px) {
    /* Two-column cards can become too narrow for useful review text. Keep stars,
       hide only the count instead of wrapping it below. */
    .cdl-ajax-shop .cdl-review-count {
        display: none !important;
    }
}


/* ========================================================================== 
   v2.1.0 — native sticky (no transform), first-paint mobile stability,
   no-jump mobile scroll lock
   ========================================================================== */

/* Browser-native sticky only. This intentionally overrides all earlier JS/fallback states. */
.cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar,
.cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-managed,
.cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-fixed,
.cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-bottom {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--cdl-sticky-offset, 115px) !important;
    inset-inline: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
    transition: none !important;
    height: fit-content !important;
    max-height: calc(100dvh - var(--cdl-sticky-offset, 115px) - 12px) !important;
    align-self: start !important;
    overflow: visible !important;
    z-index: 3 !important;
}

/* Sticky needs an unclipped containing block. Keep the shop grid itself in normal flow. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) {
    overflow: visible !important;
    align-items: start !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-content {
    min-width: 0 !important;
}

/* Keep only the category/brand lists scrollable inside the sticky shell. */
.cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar .cdl-sidebar-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
.cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: auto !important;
}

/* Mobile page lock: never use position:fixed/top on body, therefore closing cannot jump. */
html.cdl-shop-filter-lock,
body.cdl-shop-filter-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
body.cdl-shop-filter-lock {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
}

/* JS-ready mobile drawer stays completely outside page flow while closed. */
.cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    margin: 0 !important;
}
.cdl-ajax-shop.cdl-is-drawer-layout:not(.is-mobile-filters-open) > .cdl-shop-sidebar {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Pre-init root itself becomes one-column at small screens via the per-widget critical
   media rule printed by PHP. These general rules prevent any transition flash afterward. */
.cdl-ajax-shop.cdl-preinit > .cdl-mobile-overlay {
    display: none !important;
}


/* ========================================================================== 
   v2.1.0 — reliable Elementor-native sticky sidebar
   ========================================================================== */

/* Native sticky only: no transform, no fixed positioning, no scroll-position JS. */
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    align-items: start !important;
}

html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar,
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-managed,
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-fixed,
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-bottom {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--cdl-sticky-offset, 115px) !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset-inline: auto !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
    transition: none !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: max-content !important;
    min-height: 0 !important;
    max-height: calc(100vh - var(--cdl-sticky-offset, 115px) - 12px) !important;
    max-height: calc(100dvh - var(--cdl-sticky-offset, 115px) - 12px) !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 5 !important;
}

/* JS adds this only to actual ancestors that would otherwise become sticky scroll
   containers (common with Elementor's overflow:hidden/auto wrappers). */
html body .cdl-sticky-ancestor-fix {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* The sidebar shell stays sticky as one unit; only its filter lists scroll. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree {
    max-height: var(--cdl-category-live-height, min(var(--cdl-category-scroll-height, 430px), 42dvh)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    scrollbar-gutter: stable !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    max-height: var(--cdl-brand-live-height, min(var(--cdl-brand-scroll-height, 330px), 31dvh)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    scrollbar-gutter: stable !important;
}

/* Drawer mode must never inherit desktop ancestor/sticky behavior. */
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar {
    position: fixed !important;
    top: 0 !important;
    max-height: 100dvh !important;
}

/* ========================================================================== 
   v2.1.0 — deterministic desktop sticky engine
   No transform-based movement. The sidebar is normal-flow before the threshold,
   fixed at a constant 85px top offset while scrolling, and anchored to the shop
   bottom when the product grid ends.
   ========================================================================== */

/* Keep the second grid track occupied even while the sidebar is position:fixed. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-content {
    grid-column: 2 !important;
    min-width: 0 !important;
}

/* Default desktop state. This intentionally disables every older native-sticky rule. */
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar,
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-managed {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--cdl-sticky-max-height, calc(100dvh - 99px)) !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
    transition: none !important;
    align-self: start !important;
    overflow: visible !important;
    z-index: 5 !important;
}

/* Active sticky state: exact measured column position/width, never viewport width. */
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled.cdl-sticky-active:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-fixed {
    position: fixed !important;
    top: var(--cdl-sticky-offset, 115px) !important;
    left: var(--cdl-sticky-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--cdl-sticky-width, var(--cdl-sidebar-width, 290px)) !important;
    min-width: 0 !important;
    max-width: var(--cdl-sticky-width, var(--cdl-sidebar-width, 290px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--cdl-sticky-max-height, calc(100dvh - 99px)) !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
    transition: none !important;
    overflow: visible !important;
    z-index: 30 !important;
}

/* When the shop ends, keep the sidebar inside the shop instead of floating into footer. */
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled.cdl-sticky-at-bottom:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-bottom {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--cdl-sticky-width, var(--cdl-sidebar-width, 290px)) !important;
    min-width: 0 !important;
    max-width: var(--cdl-sticky-width, var(--cdl-sidebar-width, 290px)) !important;
    height: auto !important;
    max-height: var(--cdl-sticky-max-height, calc(100dvh - 99px)) !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
    overflow: visible !important;
    z-index: 5 !important;
}

/* The filter shell itself never becomes a scroll viewport. Only these two lists scroll. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Drawer rules always win on mobile. */
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-content {
    grid-column: 1 / -1 !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar,
html body .cdl-ajax-shop.cdl-is-drawer-layout.cdl-sticky-active > .cdl-shop-sidebar,
html body .cdl-ajax-shop.cdl-is-drawer-layout.cdl-sticky-at-bottom > .cdl-shop-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(var(--cdl-drawer-width, 88%), 430px) !important;
    max-width: calc(100vw - 34px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: translate3d(-105%, 0, 0) !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout.is-mobile-filters-open > .cdl-shop-sidebar {
    transform: translate3d(0, 0, 0) !important;
}

/* ========================================================================== 
   v2.2.0 — stable fixed sidebar shell + real mobile drawer scrolling
   This final override intentionally wins over earlier compatibility layers.
   ========================================================================== */

/* Desktop sticky shell: fixed only after the JS threshold, always below the
   85px site header, and never allowed to cover the content/header or its own
   Clear Filters action. */
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled.cdl-sticky-active:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-fixed {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: var(--cdl-sticky-offset, 115px) !important;
    left: var(--cdl-sticky-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--cdl-sticky-width, var(--cdl-sidebar-width, 290px)) !important;
    min-width: 0 !important;
    max-width: var(--cdl-sticky-width, var(--cdl-sidebar-width, 290px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--cdl-sticky-offset, 115px) - 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
    z-index: 4 !important;
}

/* Bottom-anchored state uses the same contained shell. */
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled.cdl-sticky-at-bottom:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar.cdl-sticky-bottom {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - var(--cdl-sticky-offset, 115px) - 12px) !important;
    overflow: hidden !important;
    z-index: 4 !important;
}

/* The section wrapper never becomes the scrolling layer on desktop. The two
   actual option lists remain the scroll surfaces. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 0 10px 0 0 !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-actions {
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 10px 0 0 !important;
    border: 0 !important;
    background: var(--cdl-surface, #fff) !important;
    z-index: 2 !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-actions .cdl-shop-clear-all {
    box-sizing: border-box !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Keep the actual filter lists inside their cards and make wheel scrolling
   predictable. No full-sidebar scroll chaining. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable !important;
}

/* --------------------------------------------------------------------------
   MOBILE DRAWER
   One scroll viewport only: header and Clear Filters are fixed by flex layout,
   while .cdl-sidebar-scroll receives all vertical touch/mouse scrolling.
   -------------------------------------------------------------------------- */
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar,
html body .cdl-ajax-shop.cdl-is-drawer-layout.cdl-sticky-active > .cdl-shop-sidebar,
html body .cdl-ajax-shop.cdl-is-drawer-layout.cdl-sticky-at-bottom > .cdl-shop-sidebar {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(var(--cdl-drawer-width, 88%), 430px) !important;
    max-width: calc(100vw - 28px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f7f8f9 !important;
    z-index: 2147483001 !important;
}

html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-mobile-sidebar-head {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 3 !important;
}

html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px 12px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scrollbar-width: thin !important;
}

/* Critical fix for long mobile category trees: earlier desktop animation rules
   capped an open section at 760px, clipping the tree before the drawer could
   scroll. Mobile open sections are natural height inside the one drawer scroll. */
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section.is-open > .cdl-filter-section-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-category-tree,
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-brand-list {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: auto !important;
}

html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-actions {
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #e4e7ea !important;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 3 !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-actions .cdl-shop-clear-all {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Lock only the page behind the drawer. Do not use fixed-body positioning, which
   can change the document's scroll origin on close. */
html.cdl-shop-filter-lock,
html.cdl-shop-filter-lock body,
body.cdl-shop-filter-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
body.cdl-shop-filter-lock {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
}

/* Site-wide button rules such as margin-top:20px!important must never move
   drawer controls or the Clear Filters action. */
html body .cdl-ajax-shop button,
html body .cdl-ajax-shop button[type="button"],
html body .cdl-ajax-shop button[type="submit"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ========================================================================== 
   v2.3.0 — 115px sticky offset + reliable desktop filter wheel scrolling
   ========================================================================== */

/* Final desktop sticky offset fallback. The widget also outputs the same value
   inline so existing Elementor instances migrate from the old 85/90px default. */
html body .cdl-ajax-shop.cdl-sidebar-sticky-enabled:not(.cdl-is-drawer-layout).cdl-sticky-active > .cdl-shop-sidebar.cdl-sticky-fixed {
    top: var(--cdl-sticky-offset, 115px) !important;
    max-height: calc(100dvh - var(--cdl-sticky-offset, 115px) - 12px) !important;
}

/* Make Categories/Brands true wheel targets. Important declarations protect
   against site/theme overflow, touch-action and pointer-event overrides. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section.is-open .cdl-category-tree,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section.is-open .cdl-brand-list {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: auto !important;
    scrollbar-gutter: stable !important;
    -webkit-overflow-scrolling: touch !important;
    contain: layout paint !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section[data-filter-section="categories"].is-open .cdl-category-tree {
    max-height: var(--cdl-category-live-height, min(var(--cdl-category-scroll-height, 430px), 42dvh)) !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section[data-filter-section="brands"].is-open .cdl-brand-list {
    max-height: var(--cdl-brand-live-height, min(var(--cdl-brand-scroll-height, 330px), 31dvh)) !important;
}

/* Keep the scrollbar itself clickable/visible and prevent descendants from
   creating another competing scroll surface. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree *,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list * {
    overscroll-behavior: auto !important;
}

/* ========================================================================== 
   v2.4.0 — smoother filter scrolling + modern, clearer sidebar navigation
   ========================================================================== */

/* Sidebar filter cards: quieter shell, stronger visual hierarchy. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section {
    border: 1px solid #e5e8eb !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 5px 18px rgba(20, 28, 38, .045) !important;
    overflow: hidden !important;
}

html body .cdl-ajax-shop .cdl-filter-section-title {
    border-bottom: 1px solid transparent !important;
    background: #fff !important;
}
html body .cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-title {
    border-bottom-color: #f0f2f4 !important;
}
html body .cdl-ajax-shop .cdl-section-chevron {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    border: 1px solid #e7eaed !important;
    border-radius: 9px !important;
    background: #f7f8f9 !important;
    color: #454d55 !important;
}
html body .cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-title .cdl-section-chevron {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}

/* Give the scrolling lists breathing room but keep their scrollbars visually quiet. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    scroll-behavior: auto !important; /* JS provides the eased wheel motion. */
    scrollbar-width: thin !important;
    scrollbar-color: #c1c8ce transparent !important;
    padding: 3px 5px 4px 0 !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar {
    width: 6px !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-track,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-track {
    margin-block: 4px !important;
    background: transparent !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb {
    min-height: 42px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: #c1c8ce !important;
    background-clip: padding-box !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb:hover,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb:hover {
    background: #929ba3 !important;
    background-clip: padding-box !important;
}

/* Category rows: parent/child relationship is immediately readable. */
html body .cdl-ajax-shop .cdl-category-row {
    grid-template-columns: minmax(0, 1fr) 30px !important;
    gap: 6px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    transition: background-color .18s ease, box-shadow .18s ease !important;
}
html body .cdl-ajax-shop .cdl-category-item.has-children > .cdl-category-row:hover {
    background: #f8f9fa !important;
}
html body .cdl-ajax-shop .cdl-category-item.has-children.is-expanded > .cdl-category-row {
    background: #f5f7f8 !important;
    box-shadow: inset 0 0 0 1px #edf0f2 !important;
}
html body .cdl-ajax-shop .cdl-filter-option {
    min-height: 38px !important;
    gap: 9px !important;
    padding: 6px 5px !important;
    border-radius: 9px !important;
    transition: background-color .16s ease, color .16s ease !important;
}
html body .cdl-ajax-shop .cdl-category-item.has-children > .cdl-category-row > .cdl-filter-option:hover {
    background: transparent !important;
}
html body .cdl-ajax-shop .cdl-filter-option:hover {
    background: #f7f8f9 !important;
}
html body .cdl-ajax-shop .cdl-filter-option:has(input:checked),
html body .cdl-ajax-shop .cdl-filter-option.is-selected {
    background: color-mix(in srgb, var(--cdl-accent) 8%, #fff) !important;
}

/* Strong but compact disclosure affordance. Closed = chevron; open = dark down state. */
html body .cdl-ajax-shop .cdl-category-toggle,
html body .cdl-ajax-shop button.cdl-category-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    justify-self: end !important;
    align-self: center !important;
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e4e8eb !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #66707a !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .035) !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}
html body .cdl-ajax-shop .cdl-category-toggle:hover,
html body .cdl-ajax-shop .cdl-category-toggle:focus-visible {
    background: #f1f3f5 !important;
    border-color: #d6dce1 !important;
    color: #111 !important;
    box-shadow: 0 2px 5px rgba(16, 24, 40, .07) !important;
}
html body .cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-row .cdl-category-toggle {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop .cdl-category-toggle svg {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    transform: rotate(0deg) !important;
    transform-origin: center !important;
    transition: transform .24s cubic-bezier(.22,.75,.2,1) !important;
}
html body .cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-row .cdl-category-toggle svg {
    transform: rotate(90deg) !important;
}

/* The branch opens as a visually connected group rather than a random indented list. */
html body .cdl-ajax-shop .cdl-category-children {
    display: grid !important;
    grid-template-rows: 0fr !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: grid-template-rows .3s cubic-bezier(.22,.75,.2,1), opacity .2s ease, visibility 0s linear .3s !important;
}
html body .cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-children {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: grid-template-rows .3s cubic-bezier(.22,.75,.2,1), opacity .2s ease, visibility 0s linear 0s !important;
}
html body .cdl-ajax-shop .cdl-category-children-inner {
    min-height: 0 !important;
    overflow: hidden !important;
}
html body .cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    position: relative !important;
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    margin: 3px 0 6px 10px !important;
    padding: 3px 0 3px 10px !important;
    border-left: 2px solid #e7ebee !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row {
    min-height: 35px !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-filter-option {
    min-height: 33px !important;
    padding-block: 4px !important;
}

/* Cleaner checkbox/count visuals. */
html body .cdl-ajax-shop .cdl-check-ui {
    width: 16px !important;
    height: 16px !important;
    border: 1.4px solid #cbd2d8 !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25) !important;
}
html body .cdl-ajax-shop .cdl-filter-option:has(input:checked) .cdl-check-ui {
    border-color: var(--cdl-accent) !important;
    background: var(--cdl-accent) !important;
}
html body .cdl-ajax-shop .cdl-option-count {
    min-width: 24px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border: 1px solid #e5e9ec !important;
    background: #f5f7f8 !important;
    color: #66707a !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* Brand search/rows match the category visual language. */
html body .cdl-ajax-shop .cdl-brand-search-wrap {
    min-height: 42px !important;
    height: 42px !important;
    margin: 2px 0 8px !important;
    border: 1px solid #dfe4e8 !important;
    border-radius: 11px !important;
    background: #f9fafb !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop .cdl-brand-search-wrap:focus-within {
    border-color: #b7c0c8 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, .045) !important;
}
html body .cdl-ajax-shop .cdl-brand-option {
    min-height: 36px !important;
    padding: 5px 5px !important;
}

/* Mobile drawer keeps the same visual hierarchy but uses a single native scroll surface. */
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section {
    border-radius: 15px !important;
    border-color: #e4e8eb !important;
    box-shadow: 0 3px 14px rgba(20,28,38,.04) !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section-title {
    min-height: 52px !important;
    padding: 11px 12px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    padding: 6px 10px 12px !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .cdl-ajax-shop .cdl-category-children,
    html body .cdl-ajax-shop .cdl-category-toggle svg,
    html body .cdl-ajax-shop .cdl-filter-section-body,
    html body .cdl-ajax-shop .cdl-filter-section-body-inner {
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   v2.5.0 — clean navigation-panel redesign
   A deliberately different visual direction: one premium sidebar surface,
   flat section navigation, quiet hierarchy, no card-within-card UI and no
   boxed chevron controls.
   ========================================================================== */

/* One composed sidebar panel instead of separate floating cards. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar {
    box-sizing: border-box !important;
    border: 1px solid #e3e7eb !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 30px rgba(18, 24, 32, .055) !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    padding: 0 16px !important;
    background: transparent !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-actions {
    padding: 12px 16px 16px !important;
    border-top: 1px solid #edf0f2 !important;
    background: #fff !important;
}

/* Sections become simple navigation groups separated by a hairline. */
html body .cdl-ajax-shop .cdl-filter-section,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
html body .cdl-ajax-shop .cdl-filter-section:last-child {
    border-bottom: 0 !important;
}

html body .cdl-ajax-shop .cdl-filter-section-title,
html body .cdl-ajax-shop button.cdl-filter-section-title {
    all: unset !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #111318 !important;
    cursor: pointer !important;
}
html body .cdl-ajax-shop .cdl-section-heading-main {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 0 !important;
}
html body .cdl-ajax-shop .cdl-section-icon,
html body .cdl-ajax-shop .cdl-section-count {
    display: none !important;
}
html body .cdl-ajax-shop .cdl-section-title-text {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}
html body .cdl-ajax-shop .cdl-section-heading-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    margin-left: 10px !important;
}
html body .cdl-ajax-shop .cdl-section-chevron {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex-basis: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5f6872 !important;
    box-shadow: none !important;
    transform: rotate(0deg) !important;
    transition: transform .24s cubic-bezier(.22,.75,.2,1), color .18s ease !important;
}
html body .cdl-ajax-shop .cdl-section-chevron svg {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
}
html body .cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-title .cdl-section-chevron {
    background: transparent !important;
    border: 0 !important;
    color: #111318 !important;
    transform: rotate(180deg) !important;
}

/* Open body: compact but not cramped. Closed body genuinely occupies no space. */
html body .cdl-ajax-shop .cdl-filter-section-body {
    margin: 0 !important;
    padding: 0 !important;
}
html body .cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    padding: 0 0 18px !important;
}
html body .cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body,
html body .cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Scroll surfaces are inset slightly so the thumb never sits on top of content. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 2px 7px 2px 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #b8c0c8 transparent !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar {
    width: 5px !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-track,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-track {
    background: transparent !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb {
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #b8c0c8 !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb:hover,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb:hover {
    background: #8d98a2 !important;
}

/* Category navigation: clean rows, no nested card look. */
html body .cdl-ajax-shop .cdl-category-level,
html body .cdl-ajax-shop .cdl-category-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body .cdl-ajax-shop .cdl-category-item + .cdl-category-item {
    margin-top: 2px !important;
}
html body .cdl-ajax-shop .cdl-category-row {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color .16s ease, box-shadow .16s ease !important;
}
html body .cdl-ajax-shop .cdl-category-item.has-children > .cdl-category-row:hover {
    background: #f7f8fa !important;
}
html body .cdl-ajax-shop .cdl-category-item.has-children.is-expanded > .cdl-category-row {
    background: #f5f7f9 !important;
    box-shadow: inset 2px 0 0 #111318 !important;
}
html body .cdl-ajax-shop .cdl-category-row > .cdl-filter-option {
    min-width: 0 !important;
}

html body .cdl-ajax-shop .cdl-filter-option,
html body .cdl-ajax-shop label.cdl-filter-option {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 17px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #171a1f !important;
    cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease !important;
}
html body .cdl-ajax-shop .cdl-filter-option:hover {
    background: #f7f8fa !important;
}
html body .cdl-ajax-shop .cdl-filter-option:has(input:checked),
html body .cdl-ajax-shop .cdl-filter-option.is-selected {
    background: #f1f3f5 !important;
    color: #0e1013 !important;
}

html body .cdl-ajax-shop .cdl-check-ui {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    margin: 0 !important;
    border: 1.3px solid #c9d0d7 !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop .cdl-check-ui svg {
    width: 11px !important;
    height: 11px !important;
}
html body .cdl-ajax-shop .cdl-filter-option:has(input:checked) .cdl-check-ui,
html body .cdl-ajax-shop .cdl-filter-option.is-selected .cdl-check-ui {
    border-color: #111318 !important;
    background: #111318 !important;
    color: #fff !important;
}

html body .cdl-ajax-shop .cdl-option-label {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    color: inherit !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: -.008em !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label {
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #3e454d !important;
}
html body .cdl-ajax-shop .cdl-brand-option .cdl-option-label {
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Product counts read as metadata, not as a second button. */
html body .cdl-ajax-shop .cdl-option-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 18px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #8a929a !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Parent disclosure is now a simple navigation chevron, not another boxed button. */
html body .cdl-ajax-shop .cdl-category-toggle,
html body .cdl-ajax-shop button.cdl-category-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    justify-self: end !important;
    align-self: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #8a929a !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: color .15s ease, background-color .15s ease !important;
}
html body .cdl-ajax-shop .cdl-category-toggle:hover,
html body .cdl-ajax-shop .cdl-category-toggle:focus-visible {
    background: #eaedf0 !important;
    color: #111318 !important;
}
html body .cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-row .cdl-category-toggle {
    background: transparent !important;
    color: #111318 !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop .cdl-category-toggle svg {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    transform: rotate(0deg) !important;
    transition: transform .24s cubic-bezier(.22,.75,.2,1) !important;
}
html body .cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-row .cdl-category-toggle svg {
    transform: rotate(90deg) !important;
}

/* Connected nested branch, using whitespace and one subtle guide line. */
html body .cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    box-sizing: border-box !important;
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    margin: 2px 0 5px 8px !important;
    padding: 2px 0 3px 10px !important;
    border-left: 1px solid #dde2e7 !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row {
    min-height: 34px !important;
    border-radius: 7px !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-filter-option {
    min-height: 32px !important;
    padding: 3px 6px !important;
}

/* Brand search is a clean utility field, visually subordinate to navigation. */
html body .cdl-ajax-shop .cdl-brand-search-wrap {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 0 10px !important;
    padding: 0 11px !important;
    border: 1px solid #dfe4e8 !important;
    border-radius: 9px !important;
    background: #fafbfc !important;
    box-shadow: none !important;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
html body .cdl-ajax-shop .cdl-brand-search-wrap:focus-within {
    border-color: #aeb8c1 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(17, 19, 24, .045) !important;
}
html body .cdl-ajax-shop .cdl-brand-search-wrap .cdl-control-icon {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    color: #7b848d !important;
}
html body .cdl-ajax-shop .cdl-brand-search {
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 12px !important;
    color: #171a1f !important;
}
html body .cdl-ajax-shop .cdl-brand-option {
    min-height: 36px !important;
    padding: 4px 7px !important;
}

/* Clear Filters is a deliberate secondary action rather than a detached card. */
html body .cdl-ajax-shop .cdl-shop-clear-all,
html body .cdl-ajax-shop button.cdl-shop-clear-all {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid #dfe4e8 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #343a40 !important;
    box-shadow: none !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    cursor: pointer !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease !important;
}
html body .cdl-ajax-shop .cdl-shop-clear-all:hover,
html body .cdl-ajax-shop .cdl-shop-clear-all:focus-visible {
    border-color: #111318 !important;
    background: #111318 !important;
    color: #fff !important;
}

/* Mobile: use the same flat-navigation language, not stacked cards. */
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar {
    background: #fff !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    padding: 0 16px 18px !important;
    background: #fff !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section {
    border: 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section-title {
    min-height: 58px !important;
    padding: 0 !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-section-title-text {
    font-size: 17px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    padding: 0 0 16px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-option-label {
    font-size: 14px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label {
    font-size: 12px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-actions {
    padding: 11px 16px max(12px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #e8ecef !important;
    background: rgba(255,255,255,.98) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .cdl-ajax-shop .cdl-section-chevron,
    html body .cdl-ajax-shop .cdl-category-toggle svg,
    html body .cdl-ajax-shop .cdl-category-children {
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   v2.6.0 — premium reference-matched sidebar UI
   Visual target: calm white filter shell, large section labels with icons,
   clear product counts, elevated active parent item, readable nested tree,
   refined brand list, and a strong bottom Clear All action.
   ========================================================================== */

/* Main sidebar shell */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar {
    box-sizing: border-box !important;
    border: 1px solid #e1e5e8 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 14px 42px rgba(15, 23, 42, .075) !important;
    overflow: hidden !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    box-sizing: border-box !important;
    padding: 0 22px !important;
    background: #fff !important;
}

/* Section blocks */
html body .cdl-ajax-shop .cdl-filter-section,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e9ecef !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
html body .cdl-ajax-shop .cdl-filter-section:last-child {
    border-bottom: 0 !important;
}
html body .cdl-ajax-shop .cdl-filter-section-title,
html body .cdl-ajax-shop button.cdl-filter-section-title {
    all: unset !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: #0f1115 !important;
    cursor: pointer !important;
}
html body .cdl-ajax-shop .cdl-section-heading-main {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 13px !important;
}
html body .cdl-ajax-shop .cdl-section-icon {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    margin: 0 !important;
    color: #b8a394 !important;
}
html body .cdl-ajax-shop .cdl-section-icon svg {
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    margin: 0 !important;
}
html body .cdl-ajax-shop .cdl-section-title-text {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    color: #101217 !important;
}
html body .cdl-ajax-shop .cdl-section-count {
    display: none !important;
}
html body .cdl-ajax-shop .cdl-section-heading-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    margin-left: 12px !important;
}
html body .cdl-ajax-shop .cdl-section-chevron {
    display: grid !important;
    place-items: center !important;
    width: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #101217 !important;
    transform: rotate(0deg) !important;
    transition: transform .22s cubic-bezier(.2,.75,.25,1) !important;
}
html body .cdl-ajax-shop .cdl-section-chevron svg {
    width: 18px !important;
    height: 18px !important;
}
html body .cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-title .cdl-section-chevron {
    transform: rotate(180deg) !important;
}

/* Section body: visibly separated, but never leaves ghost spacing when closed. */
html body .cdl-ajax-shop .cdl-filter-section-body {
    margin: 0 !important;
    padding: 0 !important;
}
html body .cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    padding: 0 0 22px !important;
}
html body .cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body,
html body .cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

/* Scroll surfaces */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 5px 10px 5px 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #aeb6be transparent !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar {
    width: 6px !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-track,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-track {
    background: transparent !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb {
    min-height: 54px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #aeb6be !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb:hover,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb:hover {
    background: #89939d !important;
}

/* Top-level category rows */
html body .cdl-ajax-shop .cdl-category-level,
html body .cdl-ajax-shop .cdl-category-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item {
    border-bottom: 1px solid #edf0f2 !important;
}
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item:last-child {
    border-bottom: 0 !important;
}
html body .cdl-ajax-shop .cdl-category-row {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 28px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color .18s ease, box-shadow .18s ease, border-radius .18s ease, transform .18s ease !important;
}
html body .cdl-ajax-shop .cdl-category-row > .cdl-filter-option {
    min-width: 0 !important;
}

/* Active/checked parent gets the elevated card from the supplied reference. */
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:has(.cdl-filter-option.is-selected),
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:has(input:checked) {
    margin: 6px 0 !important;
    padding: 5px 8px !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 5px 18px rgba(19, 26, 34, .11), 0 1px 3px rgba(19, 26, 34, .05) !important;
}
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:hover {
    background: #fafafa !important;
}

/* Option geometry */
html body .cdl-ajax-shop .cdl-filter-option,
html body .cdl-ajax-shop label.cdl-filter-option {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 18px minmax(0,1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111318 !important;
    cursor: pointer !important;
}
html body .cdl-ajax-shop .cdl-filter-option:hover,
html body .cdl-ajax-shop .cdl-filter-option:has(input:checked),
html body .cdl-ajax-shop .cdl-filter-option.is-selected {
    background: transparent !important;
}

/* Checkbox */
html body .cdl-ajax-shop .cdl-check-ui {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    border: 1.5px solid #b8c0c8 !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #fff !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop .cdl-check-ui svg {
    width: 12px !important;
    height: 12px !important;
}
html body .cdl-ajax-shop .cdl-filter-option:has(input:checked) .cdl-check-ui,
html body .cdl-ajax-shop .cdl-filter-option.is-selected .cdl-check-ui {
    border-color: #111318 !important;
    background: #111318 !important;
}

/* Labels and counts */
html body .cdl-ajax-shop .cdl-option-label {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: -.012em !important;
    color: #111318 !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label {
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #343a40 !important;
}
html body .cdl-ajax-shop .cdl-brand-option .cdl-option-label {
    font-size: 13px !important;
    font-weight: 500 !important;
}
html body .cdl-ajax-shop .cdl-option-count {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f2f3f4 !important;
    color: #343a40 !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) .cdl-option-count,
html body .cdl-ajax-shop .cdl-brand-option .cdl-option-count {
    min-width: 28px !important;
    height: 25px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
}

/* Disclosure navigation */
html body .cdl-ajax-shop .cdl-category-toggle,
html body .cdl-ajax-shop button.cdl-category-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    justify-self: end !important;
    width: 28px !important;
    height: 38px !important;
    min-width: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #4f5963 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop .cdl-category-toggle:hover,
html body .cdl-ajax-shop .cdl-category-toggle:focus-visible {
    background: #f3f4f5 !important;
    color: #111318 !important;
}
html body .cdl-ajax-shop .cdl-category-toggle svg {
    width: 17px !important;
    height: 17px !important;
    transform: rotate(0deg) !important;
    transition: transform .22s cubic-bezier(.2,.75,.25,1) !important;
}
html body .cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-row .cdl-category-toggle svg {
    transform: rotate(90deg) !important;
}

/* Nested hierarchy: connected, lighter, obviously subordinate. */
html body .cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 2px 0 8px 16px !important;
    padding: 2px 0 2px 12px !important;
    border-left: 1px solid #e1e5e8 !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row {
    min-height: 39px !important;
    padding: 1px 0 !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-filter-option {
    min-height: 37px !important;
    padding: 3px 2px !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row:hover {
    background: #fafafa !important;
    border-radius: 8px !important;
}

/* Brands search */
html body .cdl-ajax-shop .cdl-brand-search-wrap {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 0 12px !important;
    padding: 0 15px !important;
    border: 1px solid #dfe3e7 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop .cdl-brand-search-wrap:focus-within {
    border-color: #aeb6be !important;
    box-shadow: 0 0 0 3px rgba(52, 58, 64, .055) !important;
}
html body .cdl-ajax-shop .cdl-brand-search-wrap .cdl-control-icon {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    margin-right: 11px !important;
    color: #69737d !important;
}
html body .cdl-ajax-shop .cdl-brand-search {
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #111318 !important;
}
html body .cdl-ajax-shop .cdl-brand-search::placeholder {
    color: #8b949e !important;
    opacity: 1 !important;
}

/* Brand rows */
html body .cdl-ajax-shop .cdl-brand-option {
    min-height: 49px !important;
    padding: 4px 6px !important;
    border-bottom: 1px solid #edf0f2 !important;
}
html body .cdl-ajax-shop .cdl-brand-option:last-child {
    border-bottom: 0 !important;
}

/* Bottom Clear All action */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-actions {
    box-sizing: border-box !important;
    padding: 15px 22px 20px !important;
    border-top: 1px solid #e9ecef !important;
    background: #fff !important;
}
html body .cdl-ajax-shop .cdl-shop-clear-all,
html body .cdl-ajax-shop button.cdl-shop-clear-all {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    border: 1px solid #343a40 !important;
    border-radius: 12px !important;
    background: #343a40 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(28, 34, 40, .16) !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -.005em !important;
    cursor: pointer !important;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
html body .cdl-ajax-shop .cdl-shop-clear-all:hover,
html body .cdl-ajax-shop .cdl-shop-clear-all:focus-visible {
    background: #252a2e !important;
    border-color: #252a2e !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(28, 34, 40, .21) !important;
    transform: translateY(-1px) !important;
}
html body .cdl-ajax-shop .cdl-clear-filter-icon {
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
}
html body .cdl-ajax-shop .cdl-clear-filter-icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

/* Drawer/mobile: preserve the visual system while making it touch-friendly. */
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar {
    background: #fff !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    padding: 0 18px 18px !important;
    background: #fff !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section-title {
    min-height: 68px !important;
    padding: 0 2px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-section-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-section-icon svg {
    width: 24px !important;
    height: 24px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-section-title-text {
    font-size: 18px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-category-row {
    min-height: 52px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-option {
    min-height: 44px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-option-label {
    font-size: 14px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label {
    font-size: 12px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-option-count {
    height: 27px !important;
    min-width: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-brand-search-wrap {
    height: 48px !important;
    min-height: 48px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-actions {
    padding: 12px 18px max(14px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #e9ecef !important;
    background: rgba(255,255,255,.985) !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-shop-clear-all {
    min-height: 50px !important;
    border-radius: 11px !important;
}

@media (max-width: 480px) {
    html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-scroll {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-section-heading-main {
        gap: 10px !important;
    }
    html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-section-title-text {
        font-size: 17px !important;
    }
    html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-option {
        column-gap: 9px !important;
    }
}

/* ==========================================================================
   v2.7.0 — reference-accurate compact sidebar redesign
   Scales the supplied reference to a real 260–320px shop sidebar without
   truncating headings or crushing category labels. This section intentionally
   overrides previous sidebar visual layers while preserving AJAX/sticky logic.
   ========================================================================== */

/* Treat the sidebar as its own responsive component. */
html body .cdl-ajax-shop > .cdl-shop-sidebar {
    container-type: inline-size !important;
    container-name: cdlSidebar !important;
}

/* One premium shell, exactly like the reference — no stacked mini-cards. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar {
    border: 1px solid #e1e5e8 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 34px rgba(20, 27, 35, .065) !important;
}
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    padding: 0 18px !important;
    background: #fff !important;
}

/* Sections are simple divisions inside the same shell. */
html body .cdl-ajax-shop .cdl-filter-section,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e8ebee !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop .cdl-filter-section:last-child {
    border-bottom: 0 !important;
}

/* Header: icon + complete title + plain chevron. Never ellipsize. */
html body .cdl-ajax-shop .cdl-filter-section-title,
html body .cdl-ajax-shop button.cdl-filter-section-title {
    all: unset !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111318 !important;
    cursor: pointer !important;
}
html body .cdl-ajax-shop .cdl-section-heading-main {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 11px !important;
    overflow: visible !important;
}
html body .cdl-ajax-shop .cdl-section-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin: 0 !important;
    color: #baa596 !important;
}
html body .cdl-ajax-shop .cdl-section-icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
}
html body .cdl-ajax-shop .cdl-section-title-text {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    color: #111318 !important;
}
html body .cdl-ajax-shop .cdl-section-heading-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    margin: 0 0 0 8px !important;
}
html body .cdl-ajax-shop .cdl-section-chevron {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111318 !important;
}
html body .cdl-ajax-shop .cdl-section-chevron svg {
    width: 15px !important;
    height: 15px !important;
}

/* Section body spacing mirrors the reference's generous-but-controlled rhythm. */
html body .cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    padding: 0 0 16px !important;
}
html body .cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body,
html body .cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

/* Filter lists: use the full available width and keep scrollbar outside labels. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 8px 4px 0 !important;
    scrollbar-gutter: stable !important;
}

/* Top-level category row — simple divider navigation. */
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item {
    border-bottom: 1px solid #edf0f2 !important;
}
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item:last-child {
    border-bottom: 0 !important;
}
html body .cdl-ajax-shop .cdl-category-row {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 22px !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 47px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* The clickable option uses compact reference proportions so text does not wrap unnecessarily. */
html body .cdl-ajax-shop .cdl-filter-option,
html body .cdl-ajax-shop label.cdl-filter-option {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 17px minmax(0,1fr) auto !important;
    align-items: center !important;
    column-gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 3px 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
}

/* Checked parent becomes the raised row shown in the reference. */
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:has(.cdl-filter-option.is-selected),
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:has(input:checked) {
    margin: 5px 0 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg,#fff 0%,#fcfcfc 100%) !important;
    box-shadow: 0 5px 15px rgba(18, 25, 32, .10), 0 1px 2px rgba(18, 25, 32, .04) !important;
}
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:hover {
    background-color: #fafbfb !important;
}

/* Crisp reference checkbox. */
html body .cdl-ajax-shop .cdl-check-ui {
    display: grid !important;
    place-items: center !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    border: 1.5px solid #b9c1c9 !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: transparent !important;
}
html body .cdl-ajax-shop .cdl-check-ui svg {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    opacity: 0 !important;
    color: #fff !important;
}
html body .cdl-ajax-shop .cdl-filter-option:has(input:checked) .cdl-check-ui,
html body .cdl-ajax-shop .cdl-filter-option.is-selected .cdl-check-ui {
    border-color: #111318 !important;
    background: #111318 !important;
    color: #fff !important;
}
html body .cdl-ajax-shop .cdl-filter-option:has(input:checked) .cdl-check-ui svg,
html body .cdl-ajax-shop .cdl-filter-option.is-selected .cdl-check-ui svg {
    opacity: 1 !important;
}

/* Typography and count pills. */
html body .cdl-ajax-shop .cdl-option-label {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    color: #111318 !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label {
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: #30363c !important;
}
html body .cdl-ajax-shop .cdl-brand-option .cdl-option-label {
    font-size: 12.5px !important;
    font-weight: 500 !important;
}
html body .cdl-ajax-shop .cdl-option-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 25px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f1f3f4 !important;
    color: #343a40 !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) .cdl-option-count,
html body .cdl-ajax-shop .cdl-brand-option .cdl-option-count {
    min-width: 25px !important;
    height: 23px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
}

/* Plain disclosure arrow — no square button until hover/focus. */
html body .cdl-ajax-shop .cdl-category-toggle,
html body .cdl-ajax-shop button.cdl-category-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    justify-self: end !important;
    width: 22px !important;
    height: 34px !important;
    min-width: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #4d5760 !important;
    cursor: pointer !important;
}
html body .cdl-ajax-shop .cdl-category-toggle:hover,
html body .cdl-ajax-shop .cdl-category-toggle:focus-visible {
    background: #f3f5f6 !important;
    color: #111318 !important;
}
html body .cdl-ajax-shop .cdl-category-toggle svg {
    width: 14px !important;
    height: 14px !important;
}

/* Child tree — subtle vertical guide and compact subordinate rows. */
html body .cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    box-sizing: border-box !important;
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    margin: 1px 0 6px 10px !important;
    padding: 1px 0 2px 11px !important;
    border-left: 1px solid #e4e8eb !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row {
    min-height: 38px !important;
    padding: 0 !important;
}
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-filter-option {
    min-height: 36px !important;
    padding: 2px 0 !important;
    column-gap: 8px !important;
}

/* Brand search is a clean full-width field like the reference. */
html body .cdl-ajax-shop .cdl-brand-search-wrap {
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 0 9px !important;
    padding: 0 13px !important;
    border: 1px solid #dfe4e8 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop .cdl-brand-search-wrap .cdl-control-icon {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin-right: 9px !important;
    color: #67727c !important;
}
html body .cdl-ajax-shop .cdl-brand-search {
    font-size: 12px !important;
    line-height: 1 !important;
}
html body .cdl-ajax-shop .cdl-brand-option {
    min-height: 42px !important;
    padding: 2px 2px !important;
    border-bottom: 1px solid #edf0f2 !important;
}

/* Clear all action — reference dark footer button, compact for a real sidebar. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-actions {
    padding: 13px 18px 17px !important;
    border-top: 1px solid #e8ebee !important;
    background: #fff !important;
}
html body .cdl-ajax-shop .cdl-shop-clear-all,
html body .cdl-ajax-shop button.cdl-shop-clear-all {
    min-height: 50px !important;
    padding: 11px 14px !important;
    border-radius: 11px !important;
    background: #343a40 !important;
    border-color: #343a40 !important;
    box-shadow: 0 7px 16px rgba(28,34,40,.15) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
html body .cdl-ajax-shop .cdl-clear-filter-icon,
html body .cdl-ajax-shop .cdl-clear-filter-icon svg {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
}

/* Compact-width scaling: this is what prevents the current screenshot's
   Categori… / Bran… headings and excessive label wrapping. */
@container cdlSidebar (max-width: 290px) {
    html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    html body .cdl-ajax-shop .cdl-filter-section-title,
    html body .cdl-ajax-shop button.cdl-filter-section-title {
        min-height: 60px !important;
    }
    html body .cdl-ajax-shop .cdl-section-heading-main {
        gap: 9px !important;
    }
    html body .cdl-ajax-shop .cdl-section-icon,
    html body .cdl-ajax-shop .cdl-section-icon svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        flex-basis: 20px !important;
    }
    html body .cdl-ajax-shop .cdl-section-title-text {
        font-size: 16px !important;
        white-space: nowrap !important;
    }
    html body .cdl-ajax-shop .cdl-category-row {
        grid-template-columns: minmax(0,1fr) 20px !important;
        gap: 4px !important;
    }
    html body .cdl-ajax-shop .cdl-filter-option,
    html body .cdl-ajax-shop label.cdl-filter-option {
        grid-template-columns: 16px minmax(0,1fr) auto !important;
        column-gap: 7px !important;
    }
    html body .cdl-ajax-shop .cdl-check-ui {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
    }
    html body .cdl-ajax-shop .cdl-option-label {
        font-size: 12.5px !important;
    }
    html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label,
    html body .cdl-ajax-shop .cdl-brand-option .cdl-option-label {
        font-size: 11.5px !important;
    }
    html body .cdl-ajax-shop .cdl-option-count {
        min-width: 26px !important;
        height: 24px !important;
        padding: 0 7px !important;
    }
    html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-actions {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Wider sidebars can breathe closer to the large supplied reference. */
@container cdlSidebar (min-width: 330px) {
    html body .cdl-ajax-shop .cdl-section-title-text {
        font-size: 19px !important;
    }
    html body .cdl-ajax-shop .cdl-section-icon,
    html body .cdl-ajax-shop .cdl-section-icon svg {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        flex-basis: 25px !important;
    }
    html body .cdl-ajax-shop .cdl-option-label {
        font-size: 14px !important;
    }
}

/* Drawer/mobile uses the same visual hierarchy, without desktop compaction. */
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    padding: 0 18px 16px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-section-title-text {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 18px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-section-icon,
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-section-icon svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
}
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:has(input:checked) {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}


/* === v2.8.0 final sidebar cleanup and reference-style refinement === */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar {
    border-radius: 26px !important;
    overflow: hidden !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    padding: 0 16px 14px !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    padding-right: 2px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #b9c0c7 transparent !important;
}

html body .cdl-ajax-shop .cdl-filter-section-title,
html body .cdl-ajax-shop button.cdl-filter-section-title {
    min-height: 74px !important;
    padding: 0 2px !important;
}

html body .cdl-ajax-shop .cdl-section-heading-main {
    gap: 12px !important;
}

html body .cdl-ajax-shop .cdl-section-icon,
html body .cdl-ajax-shop .cdl-section-icon svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex-basis: 22px !important;
}

html body .cdl-ajax-shop .cdl-section-title-text {
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    color: #111318 !important;
}

html body .cdl-ajax-shop .cdl-section-chevron {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border: 0 !important;
    background: transparent !important;
    color: #111318 !important;
}

html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item {
    border-bottom: 1px solid #edf0f2 !important;
    padding: 5px 0 !important;
}

html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item:last-child {
    border-bottom: 0 !important;
}

html body .cdl-ajax-shop .cdl-category-row {
    grid-template-columns: minmax(0,1fr) 24px !important;
    gap: 8px !important;
    min-height: 52px !important;
    padding: 0 !important;
}

html body .cdl-ajax-shop .cdl-filter-option,
html body .cdl-ajax-shop label.cdl-filter-option {
    grid-template-columns: 18px minmax(0,1fr) auto !important;
    column-gap: 10px !important;
    min-height: 44px !important;
    padding: 4px 0 !important;
}

html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:has(.cdl-filter-option.is-selected),
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:has(input:checked) {
    margin: 4px 0 !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .05) !important;
}

html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:hover {
    background: #fafbfb !important;
    border-radius: 14px !important;
}

html body .cdl-ajax-shop .cdl-option-label {
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #111318 !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label,
html body .cdl-ajax-shop .cdl-brand-option .cdl-option-label {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}

html body .cdl-ajax-shop .cdl-option-count {
    min-width: 26px !important;
    height: 24px !important;
    padding: 0 7px !important;
    font-size: 10.5px !important;
    background: #f2f4f6 !important;
    color: #4b5560 !important;
}

html body .cdl-ajax-shop .cdl-category-toggle,
html body .cdl-ajax-shop button.cdl-category-toggle {
    width: 20px !important;
    height: 32px !important;
    min-width: 20px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #59636d !important;
}

html body .cdl-ajax-shop .cdl-category-toggle:hover,
html body .cdl-ajax-shop .cdl-category-toggle:focus-visible {
    background: transparent !important;
    color: #111318 !important;
}

html body .cdl-ajax-shop .cdl-category-toggle svg {
    width: 14px !important;
    height: 14px !important;
}

/* Clean children area: remove the awkward vertical line and use simple indentation. */
html body .cdl-ajax-shop .cdl-category-children {
    width: 100% !important;
    overflow: hidden !important;
}

html body .cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 6px 0 8px 24px !important;
    padding: 0 !important;
    border-left: 0 !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) {
    border: 0 !important;
    padding: 0 !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) + .cdl-category-item:not([data-depth="0"]) {
    margin-top: 4px !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row {
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-filter-option {
    min-height: 36px !important;
    padding: 2px 0 !important;
    column-gap: 8px !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row:hover {
    background: #f8f9fa !important;
}

html body .cdl-ajax-shop .cdl-brand-search-wrap {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 0 12px !important;
    border-radius: 13px !important;
}

html body .cdl-ajax-shop .cdl-brand-option {
    min-height: 44px !important;
    padding: 3px 0 !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-actions {
    padding: 14px 16px 18px !important;
}

html body .cdl-ajax-shop .cdl-shop-clear-all,
html body .cdl-ajax-shop button.cdl-shop-clear-all {
    min-height: 52px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

@container cdlSidebar (max-width: 290px) {
    html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    html body .cdl-ajax-shop .cdl-filter-section-title,
    html body .cdl-ajax-shop button.cdl-filter-section-title {
        min-height: 68px !important;
    }

    html body .cdl-ajax-shop .cdl-section-icon,
    html body .cdl-ajax-shop .cdl-section-icon svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        flex-basis: 20px !important;
    }

    html body .cdl-ajax-shop .cdl-section-title-text {
        font-size: 17px !important;
    }

    html body .cdl-ajax-shop .cdl-category-row {
        grid-template-columns: minmax(0,1fr) 20px !important;
        gap: 6px !important;
    }

    html body .cdl-ajax-shop .cdl-filter-option,
    html body .cdl-ajax-shop label.cdl-filter-option {
        grid-template-columns: 17px minmax(0,1fr) auto !important;
        column-gap: 8px !important;
    }

    html body .cdl-ajax-shop .cdl-option-label {
        font-size: 13px !important;
    }

    html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label,
    html body .cdl-ajax-shop .cdl-brand-option .cdl-option-label {
        font-size: 12px !important;
    }

    html body .cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
        width: calc(100% - 18px) !important;
        max-width: calc(100% - 18px) !important;
        margin-left: 18px !important;
    }
}

html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    padding: 0 18px 16px !important;
}

html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section-title,
html body .cdl-ajax-shop.cdl-is-drawer-layout button.cdl-filter-section-title {
    min-height: 72px !important;
}


/* ======================================================================
   v2.9.0 — MODERN COMPACT SIDEBAR UX RESET
   Design goal: quiet, compact, scannable, no decorative clutter, no rules
   between every row, no vertical tree rails, and no oversized padding.
   ====================================================================== */

/* Single clean shell. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar {
    border: 1px solid #eceff1 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 28px rgba(17, 24, 39, .045) !important;
    overflow: hidden !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    padding: 8px 10px 8px !important;
}

/* Sections are spaced groups, not bordered cards. */
html body .cdl-ajax-shop .cdl-filter-section,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .cdl-ajax-shop .cdl-filter-section + .cdl-filter-section,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section + .cdl-filter-section {
    margin-top: 10px !important;
    padding-top: 2px !important;
    border-top: 0 !important;
}

/* Compact section headings. Decorative icons/counts are deliberately hidden. */
html body .cdl-ajax-shop .cdl-filter-section-title,
html body .cdl-ajax-shop button.cdl-filter-section-title {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111318 !important;
}

html body .cdl-ajax-shop .cdl-filter-section-title:hover,
html body .cdl-ajax-shop .cdl-filter-section-title:focus-visible {
    background: #f7f8f9 !important;
}

html body .cdl-ajax-shop .cdl-section-heading-main {
    min-width: 0 !important;
    gap: 0 !important;
}

html body .cdl-ajax-shop .cdl-section-icon,
html body .cdl-ajax-shop .cdl-section-count {
    display: none !important;
}

html body .cdl-ajax-shop .cdl-section-title-text {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -.018em !important;
    color: #111318 !important;
}

html body .cdl-ajax-shop .cdl-section-heading-tools {
    gap: 0 !important;
}

html body .cdl-ajax-shop .cdl-section-chevron {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #5f6972 !important;
}

html body .cdl-ajax-shop .cdl-section-chevron svg {
    width: 13px !important;
    height: 13px !important;
}

/* Body padding exists only while open; closed remains true zero-height. */
html body .cdl-ajax-shop .cdl-filter-section.is-open > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    padding: 0 4px 8px !important;
}

html body .cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body,
html body .cdl-ajax-shop .cdl-filter-section:not(.is-open) > .cdl-filter-section-body > .cdl-filter-section-body-inner {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
}

/* Scroll areas: compact, contained, and no horizontal clipping. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #c4cad0 transparent !important;
    padding: 0 4px 0 0 !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar {
    width: 5px !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-track,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-track {
    background: transparent !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb {
    border: 0 !important;
    border-radius: 999px !important;
    background: #c4cad0 !important;
}

html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-category-tree::-webkit-scrollbar-thumb:hover,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-brand-list::-webkit-scrollbar-thumb:hover {
    background: #9da6ae !important;
}

/* Remove every old tree separator / border / rail. */
html body .cdl-ajax-shop .cdl-category-level,
html body .cdl-ajax-shop .cdl-category-item,
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item,
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item:last-child {
    border: 0 !important;
    box-shadow: none !important;
}

html body .cdl-ajax-shop .cdl-category-level,
html body .cdl-ajax-shop .cdl-category-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Parent rows: soft rounded navigation, no lines. */
html body .cdl-ajax-shop .cdl-category-row {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 22px !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 2px 0 !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color .16s ease !important;
}

html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:hover,
html body .cdl-ajax-shop .cdl-category-item.has-children > .cdl-category-row:hover {
    background: #f7f8f9 !important;
}

html body .cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-row {
    background: #f6f7f8 !important;
}

/* Checked category: intentional but quiet, no floating-card shadow. */
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:has(.cdl-filter-option.is-selected),
html body .cdl-ajax-shop .cdl-category-level.cdl-category-depth-0 > .cdl-category-item > .cdl-category-row:has(input:checked) {
    margin: 2px 0 !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f4f6f7 !important;
    box-shadow: none !important;
}

/* Filter option geometry. */
html body .cdl-ajax-shop .cdl-filter-option,
html body .cdl-ajax-shop label.cdl-filter-option {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 3px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .cdl-ajax-shop .cdl-filter-option:hover,
html body .cdl-ajax-shop .cdl-filter-option:has(input:checked),
html body .cdl-ajax-shop .cdl-filter-option.is-selected {
    background: transparent !important;
}

/* Small clean checkbox. */
html body .cdl-ajax-shop .cdl-check-ui {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    border: 1.25px solid #b9c1c8 !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #fff !important;
}

html body .cdl-ajax-shop .cdl-check-ui svg {
    width: 11px !important;
    height: 11px !important;
}

html body .cdl-ajax-shop .cdl-filter-option:has(input:checked) .cdl-check-ui,
html body .cdl-ajax-shop .cdl-filter-option.is-selected .cdl-check-ui {
    border-color: #20252a !important;
    background: #20252a !important;
}

/* Labels + counts. */
html body .cdl-ajax-shop .cdl-option-label {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 600 !important;
    letter-spacing: -.008em !important;
    color: #171a1d !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label,
html body .cdl-ajax-shop .cdl-brand-option .cdl-option-label {
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: #394047 !important;
}

html body .cdl-ajax-shop .cdl-option-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: 21px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #eef1f3 !important;
    color: #5a646d !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) .cdl-option-count,
html body .cdl-ajax-shop .cdl-brand-option .cdl-option-count {
    min-width: 22px !important;
    height: 20px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
}

/* Disclosure is a clean hit area, no outlined square. */
html body .cdl-ajax-shop .cdl-category-toggle,
html body .cdl-ajax-shop button.cdl-category-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    justify-self: end !important;
    width: 22px !important;
    height: 32px !important;
    min-width: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #6f7881 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

html body .cdl-ajax-shop .cdl-category-toggle:hover,
html body .cdl-ajax-shop .cdl-category-toggle:focus-visible {
    background: #eceff1 !important;
    color: #20252a !important;
}

html body .cdl-ajax-shop .cdl-category-toggle svg {
    width: 13px !important;
    height: 13px !important;
}

/* Children: simple indent, no rails/borders/extra boxes. */
html body .cdl-ajax-shop .cdl-category-children,
html body .cdl-ajax-shop .cdl-category-children-inner {
    border: 0 !important;
    box-shadow: none !important;
}

html body .cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 2px 0 6px 16px !important;
    padding: 0 !important;
    border: 0 !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row {
    min-height: 34px !important;
    margin: 1px 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-filter-option {
    min-height: 32px !important;
    padding: 2px 0 !important;
    column-gap: 7px !important;
}

html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row:hover {
    background: #f8f9fa !important;
}

/* Brand search: soft field, no visible border. */
html body .cdl-ajax-shop .cdl-brand-search-wrap {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 2px 0 8px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f6f7f8 !important;
    box-shadow: none !important;
}

html body .cdl-ajax-shop .cdl-brand-search-wrap:focus-within {
    background: #f3f5f6 !important;
    box-shadow: 0 0 0 2px rgba(52, 58, 64, .08) !important;
}

html body .cdl-ajax-shop .cdl-brand-search-wrap .cdl-control-icon {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    color: #7a838c !important;
}

html body .cdl-ajax-shop .cdl-brand-search {
    font-size: 12px !important;
}

/* Brand list rows match child navigation, no separators. */
html body .cdl-ajax-shop .cdl-brand-option,
html body .cdl-ajax-shop label.cdl-brand-option {
    min-height: 36px !important;
    padding: 2px 6px !important;
    border: 0 !important;
    border-radius: 8px !important;
}

html body .cdl-ajax-shop .cdl-brand-option:hover {
    background: #f8f9fa !important;
}

/* Footer action: compact, not a giant block. */
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-actions {
    padding: 8px 10px 10px !important;
    border: 0 !important;
    background: #fff !important;
}

html body .cdl-ajax-shop .cdl-shop-clear-all,
html body .cdl-ajax-shop button.cdl-shop-clear-all {
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #343a40 !important;
    box-shadow: none !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

html body .cdl-ajax-shop .cdl-clear-filter-icon,
html body .cdl-ajax-shop .cdl-clear-filter-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
}

/* Narrow real-world sidebars: stay compact without crushing labels. */
@container cdlSidebar (max-width: 290px) {
    html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-scroll {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    html body .cdl-ajax-shop .cdl-filter-section-title,
    html body .cdl-ajax-shop button.cdl-filter-section-title {
        min-height: 46px !important;
        height: 46px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
    html body .cdl-ajax-shop .cdl-section-title-text {
        font-size: 15px !important;
    }
    html body .cdl-ajax-shop .cdl-category-row {
        grid-template-columns: minmax(0, 1fr) 20px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    html body .cdl-ajax-shop .cdl-filter-option,
    html body .cdl-ajax-shop label.cdl-filter-option {
        grid-template-columns: 15px minmax(0, 1fr) auto !important;
        column-gap: 7px !important;
    }
    html body .cdl-ajax-shop .cdl-check-ui {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
    }
    html body .cdl-ajax-shop .cdl-option-label {
        font-size: 12.5px !important;
    }
    html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row .cdl-option-label,
    html body .cdl-ajax-shop .cdl-brand-option .cdl-option-label {
        font-size: 11.5px !important;
    }
    html body .cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
        width: calc(100% - 13px) !important;
        max-width: calc(100% - 13px) !important;
        margin-left: 13px !important;
    }
    html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) > .cdl-shop-sidebar > .cdl-sidebar-actions {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Mobile drawer uses the same quiet visual system with touch-friendly sizes. */
html body .cdl-ajax-shop.cdl-is-drawer-layout > .cdl-shop-sidebar > .cdl-sidebar-scroll {
    padding: 6px 12px 12px !important;
}

html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section-title,
html body .cdl-ajax-shop.cdl-is-drawer-layout button.cdl-filter-section-title {
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 8px !important;
}

html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-section-title-text {
    font-size: 16px !important;
}


/* === v3.0.0 archive-aware hierarchy + wider sidebar + full-width empty state === */
html body .cdl-ajax-shop {
    --cdl-sidebar-width: 320px;
}

/* Keep active archive ancestry visually understandable without adding noisy borders. */
html body .cdl-ajax-shop .cdl-category-item.has-active-descendant > .cdl-category-row > .cdl-filter-option .cdl-option-label {
    color: #111318 !important;
}
html body .cdl-ajax-shop .cdl-category-item.has-active-descendant > .cdl-category-row > .cdl-filter-option {
    font-weight: 600 !important;
}
html body .cdl-ajax-shop .cdl-category-item.is-current-filter > .cdl-category-row {
    background: #f5f7f8 !important;
    border-radius: 10px !important;
}

/* The nested menu is always constrained to the sidebar and can render 3+ levels safely. */
html body .cdl-ajax-shop .cdl-category-level,
html body .cdl-ajax-shop .cdl-category-item,
html body .cdl-ajax-shop .cdl-category-row,
html body .cdl-ajax-shop .cdl-category-children,
html body .cdl-ajax-shop .cdl-category-children-inner {
    box-sizing: border-box !important;
    max-width: 100% !important;
}
html body .cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    margin-left: 18px !important;
}
html body .cdl-ajax-shop .cdl-category-children-inner .cdl-category-children-inner > .cdl-category-level {
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
    margin-left: 14px !important;
}

/* No-result/error states must occupy the entire products column, never a narrow card. */
html body .cdl-ajax-shop .cdl-shop-content,
html body .cdl-ajax-shop .cdl-shop-main,
html body .cdl-ajax-shop .cdl-shop-results-wrap,
html body .cdl-ajax-shop .cdl-shop-results {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
html body .cdl-ajax-shop .cdl-shop-empty {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
html body .cdl-ajax-shop.cdl-has-no-results .cdl-shop-results,
html body .cdl-ajax-shop.cdl-has-no-results .cdl-shop-results > .cdl-shop-empty {
    width: 100% !important;
    max-width: 100% !important;
}


/* === v3.0.2 inner listing rows: compact flat separators === */
/* The requested geometry applies to every category row, including nested children. */
html body .cdl-ajax-shop .cdl-category-row,
html body .cdl-ajax-shop .cdl-category-item:not([data-depth="0"]) > .cdl-category-row {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 4px 0 10px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e7eaee !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep the final item clean instead of drawing a stray line at the end of a group. */
html body .cdl-ajax-shop .cdl-category-level > .cdl-category-item:last-child > .cdl-category-row {
    border-bottom-color: transparent !important;
}

/* Flat, readable hover/open/selected states. */
html body .cdl-ajax-shop .cdl-category-row:hover {
    background: #f7f8f9 !important;
    border-radius: 0 !important;
}
html body .cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-row,
html body .cdl-ajax-shop .cdl-category-item.is-current-filter > .cdl-category-row,
html body .cdl-ajax-shop .cdl-category-row:has(input:checked) {
    background: #eef1f3 !important;
    border-radius: 0 !important;
}

/* Nested children retain hierarchy through indentation only — no rounded cards. */
html body .cdl-ajax-shop .cdl-category-children,
html body .cdl-ajax-shop .cdl-category-children-inner,
html body .cdl-ajax-shop .cdl-category-children-inner > .cdl-category-level {
    border-radius: 0 !important;
}

/* Brand inner listings use the same flat row language and divider line. */
html body .cdl-ajax-shop .cdl-brand-option {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 4px 0 10px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e7eaee !important;
    background: transparent !important;
}
html body .cdl-ajax-shop .cdl-brand-option:last-child {
    border-bottom-color: transparent !important;
}
html body .cdl-ajax-shop .cdl-brand-option:hover {
    background: #f7f8f9 !important;
}
html body .cdl-ajax-shop .cdl-brand-option:has(input:checked),
html body .cdl-ajax-shop .cdl-brand-option.is-selected {
    background: #eef1f3 !important;
}

/* Remove the section-to-section divider introduced in v3.0.1; the dividers now belong to the inner listings. */
html body .cdl-ajax-shop .cdl-filter-section + .cdl-filter-section,
html body .cdl-ajax-shop:not(.cdl-is-drawer-layout) .cdl-filter-section + .cdl-filter-section,
html body .cdl-ajax-shop.cdl-is-drawer-layout .cdl-filter-section + .cdl-filter-section {
    border-top: 0 !important;
    padding-top: 0 !important;
}


/* === v3.0.3 hover cleanup: one flat hover target per listing row === */
/* The whole row owns hover. Child label/button hover backgrounds are suppressed so
   the user never gets two competing hover boxes inside one category item. */
html body .cdl-ajax-shop .cdl-category-row,
html body .cdl-ajax-shop .cdl-brand-option {
    transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}

html body .cdl-ajax-shop .cdl-category-row:hover {
    background-color: #f3f5f6 !important;
    border-radius: 0 !important;
}

html body .cdl-ajax-shop .cdl-category-row:hover > .cdl-filter-option,
html body .cdl-ajax-shop .cdl-category-row:hover > label.cdl-filter-option,
html body .cdl-ajax-shop .cdl-category-row > .cdl-filter-option:hover,
html body .cdl-ajax-shop .cdl-category-row > label.cdl-filter-option:hover {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Keep the disclosure control visually integrated with the row instead of
   creating a separate rounded hover chip. */
html body .cdl-ajax-shop .cdl-category-row:hover > .cdl-category-toggle,
html body .cdl-ajax-shop .cdl-category-toggle:hover,
html body .cdl-ajax-shop .cdl-category-toggle:focus-visible {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #111318 !important;
}

/* Open/current state is intentionally a little stronger than hover. */
html body .cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-row,
html body .cdl-ajax-shop .cdl-category-item.is-current-filter > .cdl-category-row,
html body .cdl-ajax-shop .cdl-category-row:has(input:checked) {
    background-color: #e9edef !important;
    border-radius: 0 !important;
}

/* Hovering an already-open/selected row should not flash to another color. */
html body .cdl-ajax-shop .cdl-category-item.is-expanded > .cdl-category-row:hover,
html body .cdl-ajax-shop .cdl-category-item.is-current-filter > .cdl-category-row:hover,
html body .cdl-ajax-shop .cdl-category-row:has(input:checked):hover {
    background-color: #e5eaed !important;
}

/* Brand rows follow exactly the same flat interaction language. */
html body .cdl-ajax-shop .cdl-brand-option:hover {
    background-color: #f3f5f6 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body .cdl-ajax-shop .cdl-brand-option.is-selected,
html body .cdl-ajax-shop .cdl-brand-option:has(input:checked) {
    background-color: #e9edef !important;
    border-radius: 0 !important;
}
html body .cdl-ajax-shop .cdl-brand-option.is-selected:hover,
html body .cdl-ajax-shop .cdl-brand-option:has(input:checked):hover {
    background-color: #e5eaed !important;
}