.up-products {
--up-orange: #F05A28;
--up-orange-dark: #D4471A;
--up-dark: #1E1E1E;
--up-text: #4A4A4A;
--up-label: #5E5E5E;
--up-light: #F5F5F5;
--up-border: #E4E4E4;
--up-placeholder: #DEDEDE;
color: var(--up-dark);
font-family: "Roboto", sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: left;
}
.up-products *,
.up-products *::before,
.up-products *::after {
box-sizing: border-box;
} .up-products h3,
.up-products p,
.up-products ul,
.up-products form {
margin: 0;
padding: 0;
}
.up-products h3 {
color: inherit;
font-family: inherit;
letter-spacing: normal;
text-transform: none;
}
.up-products a {
color: inherit;
text-decoration: none;
transition: color 0.15s, border-color 0.15s;
}
.up-products a:focus-visible,
.up-products .up-products__control:focus-visible,
.up-products .up-products__apply:focus-visible {
outline: 2px solid var(--up-orange);
outline-offset: 2px;
} .up-products .up-products__filters {
margin-bottom: 28px;
padding: 24px 0 28px;
border-top: 1px solid var(--up-border);
border-bottom: 1px solid var(--up-border);
}
.up-products .up-products__intro {
margin-bottom: 18px;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.up-products .up-products__fields {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 16px 24px;
}
.up-products .up-products__field {
display: flex;
flex: 1 1 240px;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.up-products .up-products__field-label {
margin: 0;
color: var(--up-label);
font-size: 13px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.up-products .up-products__control {
width: 100%;
height: 48px;
margin: 0;
padding: 0 14px;
border: 1px solid var(--up-border);
border-radius: 0;
background-color: #FFFFFF;
background-repeat: no-repeat;
box-shadow: none;
color: var(--up-dark);
font-family: inherit;
font-size: 15px;
line-height: 1.3;
transition: border-color 0.15s;
}
.up-products .up-products__control:hover {
border-color: var(--up-label);
}
.up-products .up-products__control:focus {
border-color: var(--up-orange);
box-shadow: none;
}
.up-products .up-products__control::placeholder {
color: var(--up-label);
opacity: 1;
} .up-products .up-products__control--search {
padding-left: 42px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5E5E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
background-position: left 14px center;
background-size: 18px;
}
.up-products .up-products__control--select {
padding-right: 40px;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5E5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-position: right 14px center;
background-size: 16px;
cursor: pointer;
}
.up-products .up-products__actions {
flex: none;
} .up-products .up-products__apply {
height: 48px;
margin: 0;
padding: 0 32px;
border: 0;
border-radius: 0;
background: var(--up-orange);
box-shadow: none;
color: #FFFFFF;
font-family: inherit;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background-color 0.15s;
}
.up-products .up-products__apply:hover,
.up-products .up-products__apply:focus {
background: var(--up-orange-dark);
color: #FFFFFF;
} .up-products.is-ready .up-products__actions {
display: none;
} .up-products .up-products__bar {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 16px;
margin-bottom: 24px;
}
.up-products .up-products__count {
color: var(--up-label);
font-size: 15px;
}
.up-products .up-products__reset {
color: var(--up-orange);
font-size: 15px;
font-weight: 700;
}
.up-products .up-products__reset:hover {
color: var(--up-orange-dark);
} .up-products .up-products__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 44px 24px;
list-style: none;
}
.up-products .up-products__item {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.up-products .up-products__card {
display: flex;
flex-direction: column;
width: 100%;
color: var(--up-dark);
} .up-products .up-products__media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1 / 1;
border: 1px solid var(--up-border);
background: #FFFFFF;
transition: border-color 0.15s;
}
.up-products .up-products__img {
display: block;
width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.up-products .up-products__media--contain .up-products__img {
padding: 6%;
object-fit: contain;
}
.up-products .up-products__img--empty {
background: var(--up-placeholder);
}
.up-products .up-products__badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 8px;
background: #FFFFFF;
box-shadow: 0 0 0 1px var(--up-border);
color: var(--up-dark);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.up-products .up-products__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 6px;
padding-top: 16px;
}
.up-products .up-products__title {
font-size: 18px;
font-weight: 700;
line-height: 1.3;
transition: color 0.15s;
}
.up-products .up-products__label {
color: var(--up-label);
font-size: 13px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.up-products .up-products__desc {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
color: var(--up-text);
font-size: 15px;
line-height: 1.55;
}
.up-products .up-products__more {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 8px;
color: var(--up-orange);
font-size: 15px;
font-weight: 700;
line-height: 1.3;
transition: color 0.15s;
}
.up-products .up-products__icon {
flex: none;
transition: transform 0.15s;
}
.up-products .up-products__card:hover .up-products__media {
border-color: var(--up-orange);
}
.up-products .up-products__card:hover .up-products__media--cover .up-products__img {
transform: scale(1.03);
}
.up-products .up-products__card:hover .up-products__title {
color: var(--up-orange);
}
.up-products .up-products__card:hover .up-products__more {
color: var(--up-orange-dark);
}
.up-products .up-products__card:hover .up-products__icon {
transform: translateX(3px);
} .up-products .up-products__empty {
padding: 48px 24px;
background: var(--up-light);
color: var(--up-text);
text-align: center;
} .up-products .up-products__item[hidden],
.up-products .up-products__reset[hidden],
.up-products .up-products__empty[hidden] {
display: none;
} @media (max-width: 1099px) {
.up-products .up-products__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} @media (max-width: 767px) {
.up-products .up-products__filters {
padding: 20px 0 24px;
}
.up-products .up-products__intro {
font-size: 16px;
}
.up-products .up-products__actions,
.up-products .up-products__apply {
width: 100%;
} .up-products .up-products__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 12px;
}
.up-products .up-products__badge {
top: 8px;
left: 8px;
font-size: 11px;
}
.up-products .up-products__body {
padding-top: 12px;
}
.up-products .up-products__title {
font-size: 15px;
}
.up-products .up-products__label {
font-size: 12px;
}
.up-products .up-products__desc {
font-size: 14px;
}
.up-products .up-products__more {
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.up-products *,
.up-products *::before,
.up-products *::after {
transition: none;
}
}