.l24-shop-layout {
display: grid;
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
gap: 34px;
align-items: start;
width: 100%;
margin: 0;
font-family: "Inter", Arial, sans-serif;
}
.l24-shop-sidebar {
position: static;
top: auto;
display: flex;
flex-direction: column;
gap: 26px;
min-width: 0;
padding: 24px;
border: 1px solid #ececec;
border-radius: 14px;
background: #ffffff;
}
.l24-filter-group {
min-width: 0;
}
.l24-filter-title {
margin: 0 0 14px;
padding: 0;
color: #121212;
font-family: "Inter", Arial, sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0;
}
.l24-filter-options,
.l24-filter-tags {
display: flex;
flex-direction: column;
gap: 10px;
}
.l24-filter-check,
.l24-filter-tag {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
margin: 0;
color: #292929;
font-family: "Inter", Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
cursor: pointer;
}
.l24-filter-check input,
.l24-filter-tag input {
width: 16px;
height: 16px;
margin: 0;
accent-color: #fb6307;
flex: 0 0 auto;
}
.l24-filter-tag span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 7px 12px;
border: 1px solid #e6e6e6;
border-radius: 999px;
background: #ffffff;
transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.l24-filter-tag input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.l24-filter-tag input:checked + span {
border-color: #fb6307;
background: #fff2ea;
color: #121212;
}
.l24-price-filter {
display: flex;
flex-direction: column;
gap: 14px;
}
.l24-price-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.l24-price-fields label {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
color: #686868;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
}
.l24-price-fields input {
width: 100%;
height: 40px;
margin: 0;
padding: 8px 10px;
border: 1px solid #dedede;
border-radius: 8px;
background: #ffffff;
color: #121212;
font-family: "Inter", Arial, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
box-shadow: none;
}
.l24-range-slider {
position: relative;
height: 34px;
}
.l24-range-slider::before {
position: absolute;
top: 16px;
right: 0;
left: 0;
height: 4px;
border-radius: 999px;
background: #eeeeee;
content: "";
}
.l24-range-slider::after {
position: absolute;
top: 16px;
right: calc(100% - var(--l24-max-percent, 100%));
left: var(--l24-min-percent, 0%);
height: 4px;
border-radius: 999px;
background: #fb6307;
content: "";
}
.l24-range-slider input[type="range"] {
position: absolute;
z-index: 2;
top: 8px;
left: 0;
width: 100%;
height: 20px;
margin: 0;
padding: 0;
background: transparent;
pointer-events: none;
accent-color: #fb6307;
appearance: none;
}
.l24-range-slider input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
border-radius: 999px;
background: transparent;
}
.l24-range-slider input[type="range"]::-webkit-slider-thumb {
width: 18px;
height: 18px;
margin-top: -7px;
border: 3px solid #ffffff;
border-radius: 999px;
background: #fb6307;
box-shadow: 0 2px 8px rgba(18, 18, 18, 0.18);
cursor: pointer;
pointer-events: auto;
appearance: none;
}
.l24-range-slider input[type="range"]::-moz-range-track {
height: 4px;
border-radius: 999px;
background: transparent;
}
.l24-range-slider input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border: 3px solid #ffffff;
border-radius: 999px;
background: #fb6307;
box-shadow: 0 2px 8px rgba(18, 18, 18, 0.18);
cursor: pointer;
pointer-events: auto;
}
.l24-price-caption {
display: flex;
justify-content: space-between;
gap: 12px;
color: #121212;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.l24-filter-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.l24-filter-submit,
.l24-filter-submit:hover {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
padding: 12px 16px !important;
border: 1px solid #fb6307 !important;
border-radius: 10px !important;
background: #fb6307 !important;
color: #ffffff !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-decoration: none !important;
cursor: pointer;
box-shadow: none !important;
}
.l24-filter-submit::before,
.l24-filter-submit::after {
display: none !important;
content: none !important;
}
.l24-filter-reset {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
color: #666666;
font-family: "Inter", Arial, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
}
.l24-filter-reset:hover {
color: #121212;
}
.l24-shop-main {
min-width: 0;
}
.l24-shop-layout.is-loading .l24-shop-main {
opacity: 0.55;
pointer-events: none;
transition: opacity 160ms ease;
}
.l24-shop-layout.is-loading .l24-filter-submit {
cursor: progress;
opacity: 0.86;
}
.l24-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 24px;
}
.l24-shop-count {
margin: 0;
color: #666666;
font-family: "Inter", Arial, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.l24-sort-control {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
color: #555555;
font-family: "Inter", Arial, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
.l24-sort-control select {
min-width: 230px;
height: 42px;
padding: 8px 42px 8px 14px;
border: 1px solid #dedede;
border-radius: 10px;
background-color: #ffffff;
background-image: linear-gradient(45deg, transparent 50%, #121212 50%), linear-gradient(135deg, #121212 50%, transparent 50%);
background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px;
background-repeat: no-repeat;
background-size: 5px 5px, 5px 5px;
color: #121212;
font-family: "Inter", Arial, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
box-shadow: none;
cursor: pointer;
appearance: none;
}
.l24-sort-control select option {
color: #121212;
font-family: "Inter", Arial, sans-serif;
font-size: 14px;
}
.l24-products-empty {
padding: 36px 24px;
border: 1px solid #ececec;
border-radius: 14px;
color: #555555;
font-family: "Inter", Arial, sans-serif;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.l24-search-results {
width: 100%;
font-family: "Inter", Arial, sans-serif;
}
.l24-search-results .l24-shop-toolbar {
margin-bottom: 24px;
}
.l24-search-results .l24-shop-count strong {
color: #121212;
font-weight: 800;
}
.l24-products-grid {
--l24-products-gap: 28px;
display: grid;
grid-template-columns: repeat(var(--l24-products-columns, 4), minmax(0, 1fr));
gap: var(--l24-products-gap);
width: 100%;
font-family: "Inter", Arial, sans-serif;
}
.l24-product-card {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
border-radius: 14px;
color: #121212;
font-family: "Inter", Arial, sans-serif;
}
.l24-product-card__media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1 / 1;
border-radius: 12px;
background: #f5f5f5;
color: inherit;
flex: 0 0 auto;
text-decoration: none;
}
.l24-product-card__badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 6px 11px;
border-radius: 999px;
background: #121212;
color: #ffffff;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
}
.l24-product-card__image-wrap {
position: absolute;
inset: 0;
display: block;
}
.l24-product-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 280ms ease, opacity 280ms ease;
}
.l24-product-card__image--hover {
opacity: 0;
}
.l24-product-card:hover .l24-product-card__image {
transform: scale(1.055);
}
.l24-product-card:hover .has-hover-image .l24-product-card__image--primary {
opacity: 0;
}
.l24-product-card:hover .has-hover-image .l24-product-card__image--hover {
opacity: 1;
}
.l24-product-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding-top: 15px;
}
.l24-product-card__title {
margin: 0 0 7px;
padding: 0;
color: #121212 !important;
font-family: "Inter", Arial, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0;
}
.l24-product-card__title a {
color: #121212 !important;
text-decoration: none !important;
}
.l24-product-card__title a:hover {
color: #121212 !important;
}
.l24-product-card__price {
margin-top: auto;
min-height: 24px;
color: #121212;
font-family: "Inter", Arial, sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.35;
}
.l24-product-card__price .woocommerce-Price-amount,
.l24-product-card__price .woocommerce-Price-currencySymbol {
color: inherit;
font-family: "Inter", Arial, sans-serif !important;
letter-spacing: 0;
}
.l24-product-card__price del {
margin-right: 6px;
color: #777777;
font-weight: 400;
opacity: 1;
}
.l24-product-card__price ins {
color: #121212;
font-weight: 700;
text-decoration: none;
}
.l24-product-card__button,
.l24-product-card__button.button {
box-sizing: border-box !important;
display: inline-flex !important;
flex: 0 0 auto;
align-items: center !important;
justify-content: center !important;
gap: 9px;
width: 100% !important;
min-height: 48px;
margin-top: 18px !important;
padding: 13px 18px !important;
border: 1px solid #121212 !important;
border-radius: 10px !important;
background: #121212 !important;
color: #ffffff !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-align: center !important;
text-decoration: none !important;
appearance: none;
box-shadow: none !important;
transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.l24-product-card__button:hover,
.l24-product-card__button.button:hover {
border-color: #2b2b2b !important;
background: #2b2b2b !important;
color: #ffffff !important;
text-decoration: none !important;
}
.l24-product-card__button::before,
.l24-product-card__button::after {
display: none !important;
content: none !important;
}
.l24-product-card__button span {
color: inherit !important;
font-family: inherit !important;
line-height: 1.2 !important;
}
.l24-product-card__button-icon {
display: block !important;
width: 18px !important;
height: 18px !important;
filter: brightness(0) invert(1);
flex: 0 0 auto;
}
.l24-product-card__button.added {
opacity: 0.85;
}
.l24-products-grid .added_to_cart {
display: none;
}
@media (max-width: 980px) {
.l24-shop-layout {
grid-template-columns: 1fr;
gap: 28px;
}
.l24-shop-sidebar {
position: static;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.l24-filter-actions {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.l24-products-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
}
@media (max-width: 767px) {
.l24-shop-sidebar {
grid-template-columns: 1fr;
padding: 18px;
border-radius: 12px;
}
.l24-filter-actions {
grid-template-columns: 1fr;
}
.l24-shop-toolbar {
align-items: stretch;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.l24-sort-control {
align-items: flex-start;
flex-direction: column;
gap: 7px;
width: 100%;
}
.l24-sort-control select {
width: 100%;
min-width: 0;
}
.l24-products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 16px;
}
.l24-product-card__title {
font-size: 15px;
}
.l24-product-card__price {
font-size: 14px;
}
}
@media (max-width: 420px) {
.l24-products-grid {
grid-template-columns: 1fr;
}
}