#shop-toolbar {
--yaroo-shop-edge-gap: clamp(0.7rem, 1.2vw, 1.25rem);
position: relative;
z-index: 12;
width: 100%;
overflow: visible;
} #shop-toolbar .shop-cat-filter,
#shop-toolbar .shop-actions-row {
width: min(calc(100vw - (var(--yaroo-shop-edge-gap) * 2)), 1920px);
max-width: calc(100vw - (var(--yaroo-shop-edge-gap) * 2));
margin-left: calc(50% - 50vw + var(--yaroo-shop-edge-gap));
margin-right: 0;
box-sizing: border-box;
overflow: visible;
} #shop-toolbar::before,
#shop-toolbar::after,
#shop-toolbar .shop-cat-filter::before,
#shop-toolbar .shop-cat-filter::after,
#shop-toolbar .shop-actions-row::before,
#shop-toolbar .shop-actions-row::after {
content: none !important;
display: none !important;
}
#shop-toolbar .shop-cat-filter {
padding-left: 0;
padding-right: 0;
overflow-x: auto;
overflow-y: visible;
scrollbar-width: thin;
}
.shop-actions-row {
margin-top: 0.95rem;
margin-bottom: 1.2rem;
padding: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
position: relative;
z-index: 18;
overflow: visible;
}
.shop-actions-row .shop-sort-bar {
margin-left: auto;
width: auto !important;
min-width: 0;
max-width: min(calc(100vw - 2 * var(--yaroo-shop-edge-gap) - 145px), 860px);
display: inline-flex;
flex: 0 1 auto;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.75rem;
text-align: right;
align-self: flex-start;
box-sizing: border-box;
overflow: visible;
} .shop-actions-row .shop-sort-bar .woocommerce-ordering,
.shop-actions-row .shop-sort-bar .woocommerce-result-count {
margin-left: 0;
margin-right: 0;
flex: 0 0 auto;
}
.shop-actions-row .shop-sort-bar .woocommerce-result-count {
white-space: nowrap;
}
.shop-actions-row .shop-sort-bar select,
.shop-actions-row .shop-sort-bar .orderby {
max-width: min(100%, 280px);
}
.shop-actions-row .shop-sort-bar .woocommerce-ordering {
max-width: 100%;
}
.yaroo-shop-filters-wrap {
width: auto;
margin: 0;
position: relative;
flex: 0 0 auto;
z-index: 30;
}
.yaroo-shop-filters-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 42px;
border: 1px solid rgba(255, 122, 0, 0.48);
border-radius: 999px;
background: linear-gradient(135deg, rgba(255, 122, 0, 0.16), rgba(9, 9, 9, 0.96));
color: #fff;
font-family: inherit;
font-size: 0.78rem;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.68rem 1.05rem;
cursor: pointer;
box-shadow: 0 0 18px rgba(255, 122, 0, 0.13);
transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.yaroo-shop-filters-toggle:hover,
.yaroo-shop-filters-toggle:focus-visible,
.yaroo-shop-filters-toggle[aria-expanded="true"] {
color: #ff7a00;
border-color: rgba(255, 122, 0, 0.85);
box-shadow: 0 0 26px rgba(255, 122, 0, 0.26);
transform: translateY(-1px);
}
.yaroo-shop-filters-toggle__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 0.35rem;
border-radius: 999px;
background: #ff7a00;
color: #080808;
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0;
}
.yaroo-shop-filters {
position: absolute;
top: calc(100% + 0.55rem);
left: 0;
width: min(92vw, 510px);
max-height: min(74vh, 720px);
overflow: auto;
display: none;
border: 1px solid rgba(255, 122, 0, 0.26);
border-radius: 22px;
padding: 1rem;
background:
radial-gradient(circle at 10% 0%, rgba(255, 122, 0, 0.18), transparent 35%),
linear-gradient(135deg, rgba(18, 18, 18, 0.985), rgba(4, 4, 4, 0.985));
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.68), 0 0 34px rgba(255, 122, 0, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
color: #fff;
scrollbar-color: rgba(255, 122, 0, 0.75) rgba(255, 255, 255, 0.08);
}
.yaroo-shop-filters.is-open {
display: block;
animation: yarooFilterDrop 0.24s ease both;
}
@keyframes yarooFilterDrop {
from {
opacity: 0;
transform: translateY(-8px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.yaroo-shop-filters__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}
.yaroo-shop-filters h2 {
margin: 0;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 1.08rem;
}
.yaroo-shop-filters__clear {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
border: 1px solid rgba(255, 122, 0, 0.45);
border-radius: 999px;
padding: 0.43rem 0.68rem;
text-decoration: none;
font-weight: 850;
font-size: 0.72rem;
letter-spacing: 0.06em;
transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.yaroo-shop-filters__clear:hover,
.yaroo-shop-filters__clear:focus-visible {
color: #ff7a00;
border-color: rgba(255, 122, 0, 0.9);
box-shadow: 0 0 16px rgba(255, 122, 0, 0.28);
}
.yaroo-shop-filters__active {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.35rem 0 0.85rem;
}
.yaroo-shop-filters__chip {
display: inline-flex;
align-items: center;
min-height: 27px;
padding: 0.28rem 0.6rem;
border-radius: 999px;
background: rgba(255, 122, 0, 0.13);
border: 1px solid rgba(255, 122, 0, 0.34);
color: #f5f5f5;
font-size: 0.72rem;
font-weight: 750;
}
.yaroo-shop-filters__list {
display: grid;
grid-template-columns: 1fr;
gap: 0.55rem;
}
.yaroo-filter-group,
.yaroo-price-filter,
.yaroo-filter-option--stock {
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 17px;
background: rgba(0, 0, 0, 0.24);
overflow: clip;
}
.yaroo-filter-group[open],
.yaroo-price-filter:focus-within,
.yaroo-filter-option--stock:hover,
.yaroo-filter-option--stock:focus-within {
border-color: rgba(255, 122, 0, 0.34);
box-shadow: 0 0 20px rgba(255, 122, 0, 0.08);
}
.yaroo-filter-group summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0.82rem;
cursor: pointer;
color: #fff;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.78rem;
}
.yaroo-filter-group summary::-webkit-details-marker {
display: none;
}
.yaroo-filter-group__chevron {
width: 9px;
height: 9px;
border-right: 2px solid #ff7a00;
border-bottom: 2px solid #ff7a00;
transform: rotate(45deg);
transition: transform 0.2s ease;
flex: 0 0 auto;
}
.yaroo-filter-group[open] .yaroo-filter-group__chevron {
transform: rotate(225deg) translate(-2px, -2px);
}
.yaroo-filter-group__options {
display: grid;
gap: 0.15rem;
padding: 0 0.6rem 0.65rem;
max-height: 210px;
overflow: auto;
scrollbar-color: rgba(255, 122, 0, 0.75) rgba(255, 255, 255, 0.08);
}
.yaroo-filter-option {
position: relative;
display: grid;
grid-template-columns: 19px 1fr auto;
align-items: center;
gap: 0.5rem;
min-height: 33px;
padding: 0.34rem 0.38rem;
border-radius: 12px;
cursor: pointer;
color: rgba(255, 255, 255, 0.86);
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.yaroo-filter-option--stock {
min-height: 46px;
padding: 0.58rem 0.78rem;
}
.yaroo-filter-option:hover,
.yaroo-filter-option:focus-within {
background: rgba(255, 122, 0, 0.11);
color: #fff;
box-shadow: 0 0 14px rgba(255, 122, 0, 0.12);
}
.yaroo-filter-option input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.yaroo-filter-option__box {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1px solid rgba(255, 122, 0, 0.58);
background: rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.9);
}
.yaroo-filter-option input[type="checkbox"]:checked + .yaroo-filter-option__box {
background: #ff7a00;
border-color: #ff7a00;
box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.88), 0 0 14px rgba(255, 122, 0, 0.45);
}
.yaroo-filter-option__name {
font-size: 0.84rem;
font-weight: 650;
}
.yaroo-filter-option__count {
min-width: 25px;
padding: 0.16rem 0.35rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.68);
font-size: 0.69rem;
text-align: center;
font-weight: 800;
}
.yaroo-price-filter {
padding: 0.78rem 0.82rem 0.88rem;
}
.yaroo-price-filter__title {
margin: 0 0 0.58rem;
color: #fff;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.yaroo-price-filter__labels,
.yaroo-price-filter__fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
}
.yaroo-price-filter__labels {
color: rgba(255, 255, 255, 0.72);
font-size: 0.72rem;
margin-bottom: 0.65rem;
}
.yaroo-price-filter__labels strong {
color: #ff7a00;
font-size: 0.78rem;
}
.yaroo-price-filter__sliders {
position: relative;
height: 42px;
margin: 0.1rem 0 0.62rem;
}
.yaroo-price-filter__track {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 6px;
border-radius: 999px;
transform: translateY(-50%);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), #ff7a00, rgba(255, 255, 255, 0.12));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 16px rgba(255, 122, 0, 0.12);
}
.yaroo-price-filter__range {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 6px;
margin: 0;
transform: translateY(-50%);
background: transparent;
pointer-events: none;
appearance: none;
-webkit-appearance: none;
z-index: 2;
}
.yaroo-price-filter__range--max {
z-index: 3;
}
.yaroo-price-filter__range::-webkit-slider-thumb {
pointer-events: auto;
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: -7px;
border-radius: 50%;
border: 2px solid #080808;
background: #ff7a00;
box-shadow: 0 0 18px rgba(255, 122, 0, 0.55);
cursor: grab;
}
.yaroo-price-filter__range::-moz-range-thumb {
pointer-events: auto;
width: 20px;
height: 20px;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid #080808;
background: #ff7a00;
box-shadow: 0 0 18px rgba(255, 122, 0, 0.55);
cursor: grab;
}
.yaroo-price-filter__range::-webkit-slider-runnable-track {
height: 6px;
background: transparent;
border: 0;
}
.yaroo-price-filter__range::-moz-range-track {
height: 6px;
background: transparent;
border: 0;
}
.yaroo-price-filter__fields label {
display: grid;
gap: 0.25rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.yaroo-price-filter__fields input {
width: 100%;
border: 1px solid rgba(255, 122, 0, 0.28);
border-radius: 12px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-family: inherit;
font-weight: 750;
padding: 0.52rem 0.55rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.yaroo-price-filter__fields input:hover,
.yaroo-price-filter__fields input:focus {
border-color: rgba(255, 122, 0, 0.86);
box-shadow: 0 0 18px rgba(255, 122, 0, 0.28);
}
.yaroo-shop-filters__actions {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 0.95rem;
}
.yaroo-shop-filters__submit {
border: 0;
border-radius: 999px;
padding: 0.72rem 1rem;
background: #ff7a00;
color: #070707;
font-family: inherit;
font-size: 0.78rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 0 24px rgba(255, 122, 0, 0.24);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.yaroo-shop-filters__submit:hover,
.yaroo-shop-filters__submit:focus-visible {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow: 0 0 34px rgba(255, 122, 0, 0.42);
}
.yaroo-shop-filters__clear--mobile {
display: none;
}
@media (max-width: 860px) {
#shop-toolbar {
--yaroo-shop-edge-gap: 0.65rem;
}
#shop-toolbar .shop-cat-filter,
#shop-toolbar .shop-actions-row {
width: auto;
max-width: none;
margin-left: var(--yaroo-shop-edge-gap);
margin-right: var(--yaroo-shop-edge-gap);
}
.shop-actions-row {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
padding-left: 0;
padding-right: 0;
}
.shop-actions-row .shop-sort-bar {
margin-left: 0;
width: 100%;
max-width: 100%;
justify-content: stretch;
}
.yaroo-shop-filters-wrap {
width: 100%;
}
.yaroo-shop-filters-toggle {
width: 100%;
}
.yaroo-shop-filters {
position: static;
width: 100%;
max-height: none;
margin-top: 0.6rem;
border-radius: 20px;
padding: 0.9rem;
}
.yaroo-shop-filters__head > .yaroo-shop-filters__clear {
display: none;
}
.yaroo-shop-filters__actions {
flex-direction: column;
align-items: stretch;
}
.yaroo-shop-filters__submit,
.yaroo-shop-filters__clear--mobile {
width: 100%;
text-align: center;
justify-content: center;
}
.yaroo-shop-filters__clear--mobile {
display: inline-flex;
}
} .woocommerce mark,
.woocommerce mark.count,
.woocommerce .count,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark.count,
.woocommerce ul.products li.product .woocommerce-loop-category__title mark,
.woocommerce ul.products li.product .woocommerce-loop-category__title mark.count,
.product-category mark,
.product-category mark.count,
mark.count {
background: transparent !important;
background-color: transparent !important;
color: inherit !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark.count,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count,
.woocommerce .product-category .count {
font-weight: inherit !important;
border-radius: 0 !important;
} body.post-type-archive-product .woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products,
body.tax-product_tag .woocommerce ul.products,
body.woocommerce-shop .woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: clamp(1.05rem, 1.7vw, 2rem) !important;
align-items: stretch !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.post-type-archive-product .woocommerce ul.products::before,
body.post-type-archive-product .woocommerce ul.products::after,
body.tax-product_cat .woocommerce ul.products::before,
body.tax-product_cat .woocommerce ul.products::after,
body.tax-product_tag .woocommerce ul.products::before,
body.tax-product_tag .woocommerce ul.products::after,
body.woocommerce-shop .woocommerce ul.products::before,
body.woocommerce-shop .woocommerce ul.products::after {
content: none !important;
display: none !important;
}
body.post-type-archive-product .woocommerce ul.products li.product,
body.tax-product_cat .woocommerce ul.products li.product,
body.tax-product_tag .woocommerce ul.products li.product,
body.woocommerce-shop .woocommerce ul.products li.product,
body.post-type-archive-product .woocommerce-page ul.products li.product,
body.tax-product_cat .woocommerce-page ul.products li.product,
body.tax-product_tag .woocommerce-page ul.products li.product,
body.woocommerce-shop .woocommerce-page ul.products li.product {
float: none !important;
clear: none !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
body.post-type-archive-product .woocommerce ul.products li.product a img,
body.tax-product_cat .woocommerce ul.products li.product a img,
body.tax-product_tag .woocommerce ul.products li.product a img,
body.woocommerce-shop .woocommerce ul.products li.product a img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
}
@media (max-width: 980px) {
body.post-type-archive-product .woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products,
body.tax-product_tag .woocommerce ul.products,
body.woocommerce-shop .woocommerce ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 560px) {
body.post-type-archive-product .woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products,
body.tax-product_tag .woocommerce ul.products,
body.woocommerce-shop .woocommerce ul.products {
grid-template-columns: 1fr !important;
}
} @media (min-width: 981px) {
html body.woocommerce ul.products,
html body.woocommerce-page ul.products,
html body.post-type-archive-product ul.products,
html body.tax-product_cat ul.products,
html body.tax-product_tag ul.products,
html body.woocommerce-shop ul.products,
html body #main-content .woocommerce ul.products,
html body main .woocommerce ul.products,
html body .woocommerce ul.products.columns-3,
html body .woocommerce ul.products.columns-4,
html body .woocommerce ul.products.columns-5,
html body .woocommerce ul.products[class*="columns-"] {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: clamp(1.35rem, 2.1vw, 2.6rem) !important;
row-gap: clamp(1.45rem, 2.25vw, 2.75rem) !important;
width: 100% !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html body.woocommerce ul.products li.product,
html body.woocommerce-page ul.products li.product,
html body.post-type-archive-product ul.products li.product,
html body.tax-product_cat ul.products li.product,
html body.tax-product_tag ul.products li.product,
html body.woocommerce-shop ul.products li.product,
html body .woocommerce ul.products.columns-3 li.product,
html body .woocommerce ul.products.columns-4 li.product,
html body .woocommerce ul.products.columns-5 li.product,
html body .woocommerce ul.products[class*="columns-"] li.product {
float: none !important;
clear: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
flex: initial !important;
flex-basis: auto !important;
margin: 0 !important;
box-sizing: border-box !important;
}
html body.woocommerce ul.products li.product > a:first-of-type,
html body.woocommerce-page ul.products li.product > a:first-of-type,
html body .woocommerce ul.products[class*="columns-"] li.product > a:first-of-type {
padding: clamp(1.05rem, 1.35vw, 1.45rem) clamp(1.05rem, 1.35vw, 1.45rem) 0 !important;
}
html body.woocommerce ul.products li.product > a:first-of-type img,
html body.woocommerce-page ul.products li.product > a:first-of-type img,
html body .woocommerce ul.products[class*="columns-"] li.product > a:first-of-type img {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: clamp(260px, 23vw, 410px) !important;
max-height: none !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
object-position: center !important;
}
html body.woocommerce ul.products li.product .woocommerce-loop-product__title,
html body.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
html body .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title {
font-size: clamp(1.03rem, 1.05vw, 1.22rem) !important;
padding-left: clamp(1.05rem, 1.35vw, 1.45rem) !important;
padding-right: clamp(1.05rem, 1.35vw, 1.45rem) !important;
}
html body.woocommerce ul.products li.product .price,
html body.woocommerce-page ul.products li.product .price,
html body .woocommerce ul.products[class*="columns-"] li.product .price {
font-size: clamp(1.08rem, 1.15vw, 1.32rem) !important;
padding-left: clamp(1.05rem, 1.35vw, 1.45rem) !important;
padding-right: clamp(1.05rem, 1.35vw, 1.45rem) !important;
}
html body.woocommerce ul.products li.product .button,
html body.woocommerce ul.products li.product .add_to_cart_button,
html body.woocommerce-page ul.products li.product .button,
html body.woocommerce-page ul.products li.product .add_to_cart_button,
html body .woocommerce ul.products[class*="columns-"] li.product .button,
html body .woocommerce ul.products[class*="columns-"] li.product .add_to_cart_button {
width: calc(100% - (clamp(1.05rem, 1.35vw, 1.45rem) * 2)) !important;
margin-left: clamp(1.05rem, 1.35vw, 1.45rem) !important;
margin-right: clamp(1.05rem, 1.35vw, 1.45rem) !important;
min-height: 46px !important;
}
}
@media (min-width: 561px) and (max-width: 980px) {
html body.woocommerce ul.products,
html body.woocommerce-page ul.products,
html body .woocommerce ul.products[class*="columns-"] {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 1.15rem !important;
}
html body.woocommerce ul.products li.product,
html body.woocommerce-page ul.products li.product,
html body .woocommerce ul.products[class*="columns-"] li.product {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
float: none !important;
}
}