.tek-filter-wrapper[data-tek-filter],
.tek-filter-wrapper[data-tek-filter] * {
box-sizing: border-box;
}
.tek-filter-wrapper[data-tek-filter] {
position: relative !important;
display: block !important;
width: 100% !important;
margin: 0 0 22px 0 !important;
padding: 0 0 13px 0 !important;
border: 0 !important;
border-bottom: 1px solid #e3e3e3 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
z-index: 80;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
width: 100% !important;
min-width: 0 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-info {
display: flex !important;
flex: 1 1 auto !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 6px 12px !important;
min-width: 0 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-results-count {
width: auto !important;
margin: 0 !important;
color: #111 !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
white-space: normal !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-status {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
color: #555 !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-status-dot {
display: block !important;
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: #42a846 !important;
box-shadow: 0 0 0 3px rgba(66, 168, 70, 0.12) !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-status.is-muted .tek-stock-status-dot {
background: #8b8b8b !important;
box-shadow: 0 0 0 3px rgba(139, 139, 139, 0.12) !important;
} .tek-filter-wrapper[data-tek-filter] .tek-filter-toggle {
position: relative !important;
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-width: 112px !important;
min-height: 42px !important;
margin: 0 !important;
padding: 0 14px !important;
border: 1px solid var(--tkb-orange, #ff9900) !important;
border-radius: 8px !important;
background: var(--tkb-orange, #ff9900) !important;
color: #000 !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: 13px !important;
font-weight: 900 !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: 0.25px !important;
cursor: pointer !important;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
} .tek-filter-wrapper[data-tek-filter] .tek-filter-toggle:hover,
.tek-filter-wrapper[data-tek-filter] .tek-filter-toggle:focus-visible {
background: #111 !important;
color: var(--tkb-orange, #ff9900) !important;
} .tek-filter-wrapper[data-tek-filter].is-open .tek-filter-toggle {
background: var(--tkb-orange, #ff9900) !important;
color: #000 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-toggle:active {
transform: translateY(1px) !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-toggle-svg {
display: block !important;
width: 20px !important;
height: 20px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-active-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 19px !important;
height: 19px !important;
padding: 0 5px !important;
border-radius: 999px !important;
background: #000 !important;
color: var(--tkb-orange, #ff9900) !important;
font-size: 10px !important;
font-weight: 900 !important;
line-height: 1 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-toggle:hover .tek-filter-active-count,
.tek-filter-wrapper[data-tek-filter] .tek-filter-toggle:focus-visible .tek-filter-active-count {
background: var(--tkb-orange, #ff9900) !important;
color: #000 !important;
}
.tek-filter-wrapper[data-tek-filter].is-open .tek-filter-toggle .tek-filter-active-count {
background: #000 !important;
color: var(--tkb-orange, #ff9900) !important;
} .tek-filter-portal {
position: fixed !important;
inset: 0 !important;
display: block !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
overflow: visible !important;
pointer-events: none !important;
z-index: 2147483000 !important;
}
.tek-filter-portal.is-open {
pointer-events: auto !important;
} .tek-filter-wrapper[data-tek-filter] .tek-filter-backdrop {
position: fixed !important;
inset: 0 !important;
display: none !important;
background: rgba(0, 0, 0, 0.68) !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
z-index: 2147483001 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-backdrop[hidden] {
display: none !important;
} .tek-filter-wrapper[data-tek-filter] .tek-filter-container {
position: fixed !important;
top: 90px;
right: 20px;
bottom: auto;
left: auto;
display: block !important;
width: 360px;
max-width: calc(100vw - 24px) !important;
max-height: min(640px, calc(100dvh - 24px)) !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden auto !important;
border: 1px solid #343434 !important;
border-radius: 11px !important;
background: #171717 !important;
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.58) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-8px) scale(0.985) !important;
transform-origin: top right !important;
transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important;
z-index: 2147483002 !important;
}
.tek-filter-wrapper[data-tek-filter].is-open .tek-filter-container,
.tek-filter-container.is-open {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) scale(1) !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-panel-head {
position: sticky !important;
top: 0 !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 66px !important;
padding: 14px 16px !important;
border-bottom: 1px solid #303030 !important;
background: #171717 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-panel-head h2 {
margin: 0 !important;
padding: 0 !important;
color: #fff !important;
font-size: 17px !important;
font-weight: 900 !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: 0.25px !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-close {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 7px !important;
background: transparent !important;
color: #b7b7b7 !important;
cursor: pointer !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-close:hover,
.tek-filter-wrapper[data-tek-filter] .tek-filter-close:focus-visible {
background: #262626 !important;
color: var(--tkb-orange, #ff9900) !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-close svg {
width: 24px !important;
height: 24px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-panel-body {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 4px 16px 16px !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-group,
.tek-filter-wrapper[data-tek-filter] .tek-sort-filter,
.tek-filter-wrapper[data-tek-filter] .tek-stock-filter,
.tek-filter-wrapper[data-tek-filter] .tek-reset-filter-wrap {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 15px 0 !important;
border-bottom: 1px solid #303030 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-group > label,
.tek-filter-wrapper[data-tek-filter] .tek-filter-field-label {
display: block !important;
margin: 0 0 8px 0 !important;
color: #aaa !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
letter-spacing: 0.35px !important;
}
.tek-filter-wrapper[data-tek-filter] select.tek-tag-filter,
.tek-filter-wrapper[data-tek-filter] select.tek-format-filter,
.tek-filter-wrapper[data-tek-filter] select.orderby {
appearance: none !important;
-webkit-appearance: none !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 40px 0 13px !important;
border: 1px solid #3d3d3d !important;
border-radius: 7px !important;
background-color: #2a2a2a !important;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,50 70,95 120,50' fill='none' stroke='%23ff9900' stroke-width='18' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 13px center !important;
background-size: 10px !important;
color: #fff !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 42px !important;
cursor: pointer !important;
}
.tek-filter-wrapper[data-tek-filter] select.tek-tag-filter:hover,
.tek-filter-wrapper[data-tek-filter] select.tek-format-filter:hover,
.tek-filter-wrapper[data-tek-filter] select.orderby:hover,
.tek-filter-wrapper[data-tek-filter] select.tek-tag-filter:focus,
.tek-filter-wrapper[data-tek-filter] select.tek-format-filter:focus,
.tek-filter-wrapper[data-tek-filter] select.orderby:focus {
outline: none !important;
border-color: var(--tkb-orange, #ff9900) !important;
background-color: #303030 !important;
box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.12) !important;
}
.tek-filter-wrapper[data-tek-filter] select option {
background: #222 !important;
color: #fff !important;
} .tek-filter-wrapper[data-tek-filter] .tek-stock-filter > label {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
width: 100% !important;
min-height: 58px !important;
margin: 0 !important;
padding: 10px 12px !important;
border: 1px solid #3d3d3d !important;
border-radius: 7px !important;
background: #252525 !important;
color: #fff !important;
cursor: pointer !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-filter > label:hover {
border-color: var(--tkb-orange, #ff9900) !important;
background: #2b2b2b !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-filter-copy {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
gap: 3px !important;
min-width: 0 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-filter-copy strong {
color: #fff !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-filter-copy small {
color: #999 !important;
font-size: 10.5px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-filter input[type="checkbox"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-switch {
position: relative !important;
display: block !important;
flex: 0 0 42px !important;
width: 42px !important;
height: 24px !important;
border-radius: 999px !important;
background: #4a4a4a !important;
transition: background-color 0.2s ease !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-switch::after {
position: absolute !important;
top: 3px !important;
left: 3px !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35) !important;
content: "" !important;
transition: transform 0.2s ease !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-filter input[type="checkbox"]:checked + .tek-stock-switch {
background: var(--tkb-orange, #ff9900) !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-filter input[type="checkbox"]:checked + .tek-stock-switch::after {
transform: translateX(18px) !important;
background: #000 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-filter input[type="checkbox"]:focus-visible + .tek-stock-switch {
outline: 2px solid var(--tkb-orange, #ff9900) !important;
outline-offset: 3px !important;
} .tek-filter-wrapper[data-tek-filter] .tek-reset-filter-wrap {
padding-bottom: 0 !important;
border-bottom: 0 !important;
text-align: right !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-reset-filters {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 36px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid transparent !important;
border-radius: 0 !important;
background: transparent !important;
color: #bcbcbc !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1 !important;
cursor: pointer !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-reset-filters:hover,
.tek-filter-wrapper[data-tek-filter] .tek-reset-filters:focus-visible {
color: var(--tkb-orange, #ff9900) !important;
border-bottom-color: var(--tkb-orange, #ff9900) !important;
}
body.tek-filter-panel-open {
overflow: hidden !important;
} @media only screen and (max-width: 980px) {
.tek-filter-wrapper[data-tek-filter] {
margin-bottom: 18px !important;
padding-bottom: 11px !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-head {
gap: 10px !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-info {
gap: 4px 8px !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-results-count {
width: 100% !important;
font-size: 12.5px !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-stock-status {
font-size: 10px !important;
} .tek-filter-wrapper[data-tek-filter] .tek-filter-toggle {
flex: 0 0 44px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
min-height: 42px !important;
padding: 0 !important;
gap: 0 !important;
font-size: 0 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-toggle > span:not(.tek-filter-active-count) {
display: none !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-toggle-svg {
width: 22px !important;
height: 22px !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-filter-active-count {
position: absolute !important;
top: -7px !important;
right: -7px !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 4px !important;
border: 2px solid #fff !important;
}
.tek-filter-portal .tek-filter-backdrop:not([hidden]) {
display: block !important;
} .tek-filter-portal .tek-filter-container {
top: max(12px, calc(env(safe-area-inset-top) + 10px)) !important;
right: 12px !important;
bottom: auto !important;
left: 12px !important;
width: auto !important;
height: auto !important;
max-width: none !important;
max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
border-radius: 12px !important;
transform: translateY(14px) scale(0.985) !important;
transform-origin: top center !important;
z-index: 2147483002 !important;
}
.tek-filter-portal.is-open .tek-filter-container,
.tek-filter-portal .tek-filter-container.is-open {
transform: translateY(0) scale(1) !important;
}
.tek-filter-portal .tek-filter-panel-head {
min-height: 58px !important;
padding: 9px 12px !important;
}
.tek-filter-portal .tek-filter-panel-body {
padding: 0 14px calc(14px + env(safe-area-inset-bottom)) !important;
} body.admin-bar .tek-filter-portal .tek-filter-backdrop {
top: 46px !important;
}
body.admin-bar .tek-filter-portal .tek-filter-container {
top: max(58px, calc(env(safe-area-inset-top) + 56px)) !important;
max-height: calc(100dvh - 70px - env(safe-area-inset-bottom)) !important;
}
}
@media only screen and (min-width: 783px) and (max-width: 980px) {
body.admin-bar .tek-filter-portal .tek-filter-backdrop {
top: 32px !important;
}
body.admin-bar .tek-filter-portal .tek-filter-container {
top: max(44px, calc(env(safe-area-inset-top) + 42px)) !important;
max-height: calc(100dvh - 56px - env(safe-area-inset-bottom)) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.tek-filter-wrapper[data-tek-filter] .tek-filter-container,
.tek-filter-portal .tek-filter-container,
.tek-filter-wrapper[data-tek-filter] .tek-filter-toggle,
.tek-filter-wrapper[data-tek-filter] .tek-stock-switch,
.tek-filter-wrapper[data-tek-filter] .tek-stock-switch::after {
transition: none !important;
}
} .tek-filter-wrapper[data-tek-filter] .tek-ajax-filter {
position: relative !important;
display: block !important;
width: 100% !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-control {
position: relative !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-input {
appearance: none !important;
-webkit-appearance: none !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 42px 0 13px !important;
border: 1px solid #3d3d3d !important;
border-radius: 7px !important;
background: #2a2a2a !important;
color: #fff !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: normal !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-input::placeholder {
color: #8f8f8f !important;
opacity: 1 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-input::-webkit-search-cancel-button {
display: none !important;
-webkit-appearance: none !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-input:hover,
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-input:focus {
outline: none !important;
border-color: var(--tkb-orange, #ff9900) !important;
background: #303030 !important;
box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.12) !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-clear {
position: absolute !important;
top: 50% !important;
right: 7px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 30px !important;
height: 30px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 6px !important;
background: transparent !important;
color: #aaa !important;
font-size: 22px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer !important;
transform: translateY(-50%) !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-clear:hover,
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-clear:focus-visible {
background: #222 !important;
color: var(--tkb-orange, #ff9900) !important;
outline: none !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-clear[hidden] {
display: none !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-results {
position: absolute !important;
top: calc(100% + 6px) !important;
right: 0 !important;
left: 0 !important;
z-index: 8 !important;
display: block !important;
max-height: 240px !important;
margin: 0 !important;
padding: 5px !important;
overflow-y: auto !important;
border: 1px solid #444 !important;
border-radius: 7px !important;
background: #202020 !important;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45) !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-results[hidden] {
display: none !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-option,
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-message {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
width: 100% !important;
min-height: 38px !important;
margin: 0 !important;
padding: 8px 9px !important;
border: 0 !important;
border-radius: 5px !important;
background: transparent !important;
color: #fff !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
text-align: left !important;
}
.tek-filter-wrapper[data-tek-filter] button.tek-ajax-filter-option {
cursor: pointer !important;
}
.tek-filter-wrapper[data-tek-filter] button.tek-ajax-filter-option:hover,
.tek-filter-wrapper[data-tek-filter] button.tek-ajax-filter-option:focus-visible,
.tek-filter-wrapper[data-tek-filter] button.tek-ajax-filter-option.is-highlighted {
outline: none !important;
background: #303030 !important;
color: var(--tkb-orange, #ff9900) !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-option-count {
flex: 0 0 auto !important;
color: #999 !important;
font-size: 11px !important;
font-weight: 800 !important;
}
.tek-filter-wrapper[data-tek-filter] .tek-ajax-filter-message {
color: #aaa !important;
font-size: 12px !important;
font-weight: 600 !important;
} .tkb-products .tbkif-filtered-out,
.tkb-products.woocommerce .tbkif-filtered-out {
display: none !important;
} .single-artist .tkb-products ul.products > li.product,
.single-label .tkb-products ul.products > li.product,
.post-type-archive-artist .tkb-products ul.products > li.product,
.post-type-archive-label .tkb-products ul.products > li.product {
clear: none !important;
}
.single-artist .tkb-products ul.products > li.product.first,
.single-label .tkb-products ul.products > li.product.first,
.post-type-archive-artist .tkb-products ul.products > li.product.first,
.post-type-archive-label .tkb-products ul.products > li.product.first {
clear: both !important;
}