/* inputs */
/* categories navigation */
/* compare products */
/* page structure */
/* mechanics and animations */
/* --- components ---- */
/* no image icon */
/* basic dropdowns (dropdowns from init.js) */
/* miniboxes */
/* waiting circle */
/* newsletter */
/* header */
/* stepper */
/* tables */
/* tooltips */
/* tooltips and modals */
/* ---- pages ---- */
/* product list */
/* product details */
/* message bars and texts */
/* cart */
/* editing order stuff */
/* Other */
.products-page__main-container {
display: flex;
gap: 2%;
margin: 30px 9%;
justify-content: center;
}
.products-page__main-container.categories-map-container {
display: block;
}
.products-page__main-container .left {
width: 23%;
}
.products-page__main-container .right {
width: 75%;
}
.products-page__main-container .companies {
padding: 0;
}
.categories {
padding: 15px;
border: 1px solid #D5D5D5;
border-radius: 8px;
}
.categories__title {
font-size: 18px;
font-weight: 600;
line-height: 24px;
}
.categories__parent {
margin: 25px 10px 20px 10px;
font-size: 14px;
line-height: 20px;
}
.categories__parent a {
color: rgba(33,90,60,1.00);
}
.categories__current {
margin: 20px 10px;
}
.categories__current .name {
font-weight: 600;
font-size: 14px;
line-height: 20px;
}
.categories__undercategories .undercategory {
margin: 20px;
}
.categories__undercategories a .name {
color: #2E2E2E;
font-size: 14px;
line-height: 20px;
}
.categories .count {
color: #767676;
font-size: 12px;
line-height: 16px;
}
.filters {
margin-top: 15px;
padding: 15px;
border: 1px solid #D5D5D5;
border-radius: 8px;
}
.filters__title {
font-size: 18px;
font-weight: 600;
line-height: 24px;
color: #2E2E2E;
padding-bottom: 15px;
}
.filters__price {
margin-top: 15px;
border-top: 1px solid #D5D5D5;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
position: relative;
}
.filters__price .title {
font-weight: 600;
font-size: 14px;
line-height: 20px;
margin: 15px 10px;
}
.filters__price .range {
display: flex;
align-items: baseline;
margin: 0 10px;
margin-bottom: 16px;
}
.filters__price fieldset {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255,255,255,1.00);
width: 50%;
height: 52px;
border: 1px solid #4A4A4A;
border-radius: 5px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
.filters__price fieldset span {
font-size: 12px;
position: relative;
bottom: 6px;
}
.filters__price fieldset input {
border: none;
width: 75%;
height: 100%;
font-size: 14px;
position: relative;
bottom: 6px;
}
.filters__price fieldset legend {
font-size: 12px;
color: #4A4A4A;
}
.filters__price span {
font-size: 12px;
position: relative;
bottom: 6px;
margin: 0 0.5em;
}
.filters__item {
border-top: 1px solid #D5D5D5;
transition: height 500ms;
}
.filters__item .toggle-checkbox {
display: none;
}
.filters__item .toggle-checkbox + .name + .values {
visibility: hidden;
}
.filters__item .toggle-checkbox:checked + .name + .values {
max-height: 500px;
margin-bottom: 16px;
visibility: visible;
}
.filters__item .toggle-checkbox:checked + .name svg {
transform: rotate(180deg);
}
.filters__item .name {
color: #2E2E2E;
font-weight: 600;
font-size: 14px;
line-height: 20px;
margin: 15px 10px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.filters__item .name svg {
width: 15px;
height: 15px;
transition: all ease 500ms;
}
.filters__item label.name {
color: #2E2E2E;
font-size: 14px;
height: auto;
width: auto;
margin: 15px 10px;
}
.filters__item .values {
transition: all ease 500ms;
max-height: 0;
overflow: hidden;
}
.filters__item-show-more {
display: none;
}
.filters__item-show-more ~ label .less {
display: none;
}
.filters__item-show-more:checked ~ label .less {
display: inline;
}
.filters__item-show-more:checked ~ label .more {
display: none;
}
.filters .checkbox {
padding: 5px 10px;
}
.filters .checkbox input {
display: none;
}
.filters .checkbox input:checked + label:before {
content: "";
text-align: center;
background-color: rgba(33,90,60,1.00);
overflow: hidden;
border: solid 1px rgba(33,90,60,1.00);
}
.filters .checkbox input:checked + label .checkbox__icon {
display: block;
position: absolute;
left: 2px;
margin-top: 2px;
}
.filters .checkbox label {
display: flex;
align-items: center;
column-gap: 8px;
cursor: pointer;
position: relative;
background-color: rgba(0, 0, 0, 0);
color: #232323;
transition: all 200ms ease;
font-size: 14px;
line-height: 20px;
}
.filters .checkbox label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 4px;
border: solid 1px #767676;
color: #fff;
background-color: #FFFFFF;
box-sizing: border-box;
transition: all 200ms ease;
min-width: 16px;
min-height: 16px;
}
.filters .checkbox__icon {
display: none;
}
.filters .checkbox__color {
width: 18px;
height: 18px;
border-radius: 50%;
}
.filters .checkbox svg {
fill: #FFFFFF;
width: 12px;
height: 12px;
}
.filters .checkbox .count {
color: #767676;
font-size: 12px;
line-height: 16px;
}
.filters .primary-action-button {
font-weight: 600;
font-size: 14px;
line-height: 20px !important;
padding: 8px 32px;
width: 100%;
}
.filters__more-btn {
margin: 8px 10px 4px;
width: fit-content;
}
.filters__more-filters {
overflow: hidden;
max-height: 0;
transition: max-height 500ms;
}
.selected-filters {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
padding-bottom: 25px;
border-bottom: 1px solid #E7E7E7;
margin-bottom: 25px;
}
.selected-filters__clear-all {
cursor: pointer;
color: rgba(33,90,60,1.00);
font-weight: 600;
font-size: 14px;
line-height: 20px;
}
.selected-filters__item {
display: flex;
gap: 10px;
align-items: center;
padding: 5px 5px 5px 10px;
border: 1px solid #4A4A4A;
border-radius: 24px;
cursor: pointer;
color: #2E2E2E;
background-color: #fff;
font-size: 14px;
}
.selected-filters__item svg {
width: 15px;
height: 15px;
fill: #4A4A4A;
}
.sorting-and-views {
display: flex;
justify-content: space-between;
margin-bottom: 25px;
}
.sorting-and-views select {
display: none;
}
.sorting-and-views .select__input {
min-width: 250px;
border: 1px solid #4A4A4A;
border-radius: 5px;
padding: 7px 15px;
}
.sorting-and-views .select__input svg {
width: 15px;
height: 15px;
}
.sorting-and-views__toggle-filters-menu {
display: none;
}
.sorting-and-views__views-list {
display: flex;
gap: 10px;
}
.sorting-and-views__views-list button svg {
width: 40px;
height: 40px;
padding: 9px 7px;
fill: rgba(149,149,149,1.00);
cursor: pointer;
}
.sorting-and-views__views-list button.active-js svg {
fill: rgba(46,46,46,1.00);
background-color: rgba(248,249,250,1.00);
}
.quick-shopping-buttons-container {
display: flex;
justify-content: space-between;
align-items: center;
margin: 25px 0;
}
.quick-shopping-buttons-container__total-items {
color: #2E2E2E;
font-size: 14px;
line-height: 20px;
}
.quick-shopping-buttons-container__buttons {
display: flex;
gap: 25px;
}
.quick-shopping-buttons-container__buttons .login-to-see-prices {
display: flex;
align-items: center;
gap: 10px;
}
.quick-shopping-buttons-container__buttons .login-to-see-prices__icon {
width: 19px;
height: 19px;
}
.quick-shopping-buttons-container__buttons .login-to-see-prices__info {
font-size: 14px;
line-height: 20px;
}
.quick-shopping-buttons-container__buttons .primary-action-button {
width: 230px;
margin-left: 15px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 10px 20px;
}
.quick-shopping-buttons-container__buttons .primary-action-button svg {
width: 20px;
height: 20px;
}
.quick-shopping-buttons-container__buttons .secondary-action-button {
width: 40px;
aspect-ratio: 1;
padding: 10px 20px;
}
.quick-shopping-buttons-container__buttons .secondary-action-button svg {
flex-shrink: 0;
width: 24px;
height: 24px;
fill: rgba(33,90,60,1.00);
}
.categories-and-filters-header {
display: none;
}
.no-items-container {
display: flex;
gap: 25px;
margin-bottom: 25px;
justify-content: center;
}
.no-items-container .title {
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin-bottom: 5px;
}
.no-items-container .info {
color: #767676;
font-size: 16px;
line-height: 20px;
}