:root {
--kslf-bg: #ffffff;
--kslf-text: #111827;
--kslf-text-soft: #374151;
--kslf-text-muted: #64748b;
--kslf-border: rgba(16, 24, 40, 0.08);
--kslf-border-strong: rgba(16, 24, 40, 0.14);
--kslf-shadow: 0 1px 0 rgba(16, 24, 40, 0.03), 0 2px 6px rgba(16, 24, 40, 0.04);
--kslf-radius: 14px;
--kslf-radius-sm: 10px;
--kslf-accent: #0f766e;
--kslf-accent-strong: #065f46;
--kslf-focus: #3b82f6;
--kslf-surface-soft: #f4f5f7;
--kslf-surface-soft-hover: #eef0f3;
--kslf-highlight: linear-gradient(180deg, rgba(245, 247, 250, 0.7), rgba(245, 247, 250, 0));
}
.kslf {
margin: 0 0 1.5rem;
}
.kslf .widget-title,
.kslf .kslf-title {
margin: 0 0 0.75rem;
} .kslf-filters,
.kslf .kslf-cats,
.kslf .kslf-related {
background: var(--kslf-bg);
border: 1px solid var(--kslf-border);
border-radius: var(--kslf-radius);
box-shadow: var(--kslf-shadow);
}
.kslf-filters {
margin: 1rem 0;
padding: 0.75rem 0.9rem;
}
.kslf .kslf-cats,
.kslf .kslf-related {
padding: 0.75rem 0.9rem;
margin: 0 0 1rem;
} .kslf-filters.kslf--sticky {
position: sticky;
top: clamp(12px, 4vh, 32px);
z-index: 2;
} .kslf-filters__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.kslf-clear {
font: inherit;
line-height: 1.1;
cursor: pointer;
padding: 0.28rem 0.65rem;
border-radius: 0.45rem;
border: 1px solid var(--kslf-border-strong);
background: var(--kslf-surface-soft);
color: var(--kslf-text);
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.kslf-clear:hover {
background: var(--kslf-surface-soft-hover);
}
.kslf-clear:active {
transform: translateY(1px);
}
.kslf-clear:focus-visible {
outline: 2px solid var(--kslf-focus);
outline-offset: 2px;
}
.kslf-filters__head + .kslf-form {
border-top: 1px solid var(--kslf-border);
} .kslf-group {
border-bottom: 1px solid var(--kslf-border);
}
.kslf-group:last-child {
border-bottom: 0;
}
.kslf-group--highlight {
background: var(--kslf-highlight);
border-radius: var(--kslf-radius-sm);
}
.kslf-acc {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
text-align: left;
font: inherit;
background: none;
border: 0;
padding: 0.65rem 0;
cursor: pointer;
}
.kslf-acc:focus-visible {
outline: 2px solid var(--kslf-focus);
outline-offset: 2px;
}
.kslf-label {
font-weight: 600;
color: var(--kslf-text);
}
.kslf-chevron {
opacity: 0.6;
transform: rotate(0deg);
transition: transform 0.2s ease, opacity 0.2s ease;
}
.kslf-acc[aria-expanded="true"] .kslf-chevron {
opacity: 0.9;
transform: rotate(180deg);
} .kslf-terms {
list-style: none;
margin: 0 0 0.6rem;
padding: 0.2rem 0 0.5rem;
}
.kslf-term {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.22rem 0;
cursor: pointer;
color: var(--kslf-text);
}
.kslf-term input {
transform: translateY(1px);
flex: 0 0 auto;
}
.kslf-term span {
line-height: 1.35;
}
.kslf-term input:checked + span {
font-weight: 600;
color: var(--kslf-accent);
}
.kslf-term:hover span {
text-decoration: underline;
}
.kslf-term input:disabled + span {
opacity: 0.55;
text-decoration: none;
} .kslf-status {
margin-top: 0.35rem;
font-size: 0.9rem;
color: var(--kslf-text-soft);
opacity: 0.92;
} .kslf .kslf-title {
margin: 0 0 0.5rem;
font-size: 1.05rem;
font-weight: 700;
}
.kslf .product-categories {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--kslf-border);
}
.kslf .product-categories > li {
margin: 0;
padding: 0;
border-bottom: 1px solid var(--kslf-border);
}
.kslf .product-categories > li:last-child {
border-bottom: 0;
}
.kslf .product-categories a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.55rem 0;
color: var(--kslf-text);
text-decoration: none;
transition: color 0.15s ease;
}
.kslf .product-categories a:hover {
color: var(--kslf-accent);
}
.kslf .product-categories a::after {
content: "›";
flex: 0 0 auto;
font-size: 1rem;
line-height: 1;
opacity: 0.55;
transform: translateX(0);
transition: transform 0.15s ease, opacity 0.15s ease;
}
.kslf .product-categories a:hover::after {
opacity: 0.9;
transform: translateX(2px);
}
.kslf .product-categories .count {
margin-left: auto;
font-size: 0.85rem;
color: var(--kslf-text-muted);
}
.kslf .kslf-cats.kslf-cats--compact .product-categories a {
padding: 0.42rem 0;
}
.kslf .kslf-related h4 {
margin: 0 0 0.4rem;
font-size: 0.95rem;
font-weight: 700;
} .kslf-group--onsale {
margin-top: 0.35rem;
padding: 0.25rem 0.5rem;
border: 1px dashed var(--kslf-border-strong);
border-radius: 12px;
}
.kslf-group--onsale .kslf-label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--kslf-accent);
}
.kslf-group--onsale .kslf-label::before {
content: "%";
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
background: var(--kslf-accent);
color: #fff;
font-weight: 700;
font-size: 0.8rem;
line-height: 1;
}
.kslf-group--onsale .kslf-term {
padding-top: 0.35rem;
}
.kslf-group--onsale .kslf-term input:checked + span {
color: var(--kslf-accent-strong);
} @media (max-width: 768px) {
.kslf-filters,
.kslf .kslf-cats,
.kslf .kslf-related {
border-radius: 12px;
}
.kslf-filters {
padding: 0.6rem 0.7rem;
}
.kslf .kslf-cats,
.kslf .kslf-related {
padding: 0.65rem 0.75rem;
}
.kslf-filters__head {
flex-wrap: wrap;
row-gap: 0.4rem;
}
} @media (prefers-color-scheme: dark) {
:root {
--kslf-bg: #0b0f14;
--kslf-text: #e5e7eb;
--kslf-text-soft: #cbd5e1;
--kslf-text-muted: #93a3b8;
--kslf-border: rgba(255, 255, 255, 0.06);
--kslf-border-strong: rgba(255, 255, 255, 0.18);
--kslf-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
--kslf-accent: #34d399;
--kslf-accent-strong: #6ee7b7;
--kslf-surface-soft: #0f141a;
--kslf-surface-soft-hover: #141b22;
--kslf-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}
.kslf-group--onsale .kslf-label::before {
background: var(--kslf-accent);
color: #041316;
}
} .kslf-cat-panel ~ nav.woocommerce-pagination,
.kslf-shop-top ~ nav.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination[aria-label="Paginacija proizvoda"] {
display: none !important;
}