.page-products {
display: flex;
flex-direction: column;
} .page-products .banner-products {
display: flex;
width: 100%;
position: relative;
}
.page-products .banner-products .pic {
display: flex;
width: 100%;
height: 20rem;
}
.page-products .banner-products .pic .image {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.5);
}
.page-products .banner-products .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
font-family: "Anton";
color: var(--white);
line-height: 1;
text-align: center;
text-wrap: nowrap;
} .page-products .full-content {
margin-top: 4rem;
margin-bottom: 4rem;
}
.page-products .full-content .cover {
display: flex;
gap: 4rem;
} .page-products .filters-mobile-toggle {
display: none;
}
.page-products .products-filters {
display: flex;
flex-direction: column;
gap: 2rem;
flex: 0 0 15rem;
}
.page-products .products-filters .title-cat {
font-size: 1rem;
font-weight: 500;
font-family: "Gotham Rounded", sans-serif;
}
.page-products .products-filters .title-cat {
margin-bottom: 1rem;
}
.page-products .products-filters .filters-main {
display: flex;
flex-direction: column;
gap: 1rem;
}
.page-products .products-filters .filters-main .filter-group {
display: flex;
flex-direction: column;
font-size: 0.9rem;
}
.page-products .products-filters .filters-main .filter-group.cat .all {
padding-bottom: 0.75rem;
border-bottom: 1px solid #dfdfdf;
}
.page-products .products-filters .filters-main .filter-group .category {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
border-bottom: 1px solid #dfdfdf;
}
.page-products .products-filters .filters-main .filter-group .category .opt {
display: flex;
align-items: center;
justify-content: space-between;
}
.page-products .products-filters .filters-main .filter-group .category .name {
flex: 1;
height: 100%;
display: flex;
align-items: center;
}
.page-products
.products-filters
.filters-main
.filter-group
.category
.opt
.cat-toggle {
display: flex;
border: none;
cursor: pointer;
padding: 0;
background: none;
border-radius: 50%;
padding: 0.25rem;
color: #8d8d8d;
transition: all 0.3s ease;
}
.page-products
.products-filters
.filters-main
.filter-group
.category
.opt
.cat-toggle:hover {
background-color: #8d8d8d;
color: var(--white);
}
.page-products
.products-filters
.filters-main
.filter-group
.category
.category-children {
display: none;
flex-direction: column;
gap: 0.5rem;
}
.page-products
.products-filters
.filters-main
.filter-group
.category.active
.category-children
label {
cursor: pointer;
}
.page-products
.products-filters
.filters-main
.filter-group
.category.active
.category-children {
display: flex;
}
.page-products
.products-filters
.filters-main
.filter-group
.category.active
.cat-toggle
svg {
transform: rotate(180deg);
}
.page-products .products-filters .filters-main .filter-group.brand .br {
cursor: pointer;
}
.page-products
.products-filters
.filters-main
.filter-group.brand
.br:not(:last-child) {
padding-bottom: 0.5rem;
}
.page-products .products-filters .filters-main .filter-group.brand .br input {
cursor: pointer;
} .page-products .products-list-wrapper {
display: flex;
flex-direction: column;
flex: 1;
}
.page-products .products-list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
width: 100%;
align-content: flex-start;
}
.page-products .products-list .product-card {
width: calc((100% - 4rem) / 3);
overflow: hidden;
position: relative;
}
.page-products .products-list .product-card .link {
display: flex;
flex-direction: column;
height: 100%;
}
.page-products .products-list .product-card .product-image {
height: 20rem;
display: flex;
align-items: center;
justify-content: center;
background-color: #f7f7f7;
margin-bottom: 1rem;
overflow: hidden;
position: relative;
padding: 1rem;
}
.page-products .products-list .product-card .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-products .full-content .products-list .product-card .brand {
font-size: 0.9rem;
color: #858585;
margin-bottom: 0.5rem;
}
.page-products .full-content .products-list .product-card .name {
color: var(--blue);
font-size: 0.85rem;
margin-bottom: 0.5rem;
font-family: "Gotham Rounded", sans-serif;
}
.page-products .full-content .products-list .product-card .price {
color: var(--black);
font-size: 1rem;
font-family: "Gotham Rounded", sans-serif;
margin-top: auto;
}
.page-products .products-list .product-card .add-item {
position: absolute;
top: calc(20rem - 3rem);
left: 50%;
background-color: var(--yellow);
color: var(--black);
opacity: 0;
transform: translate(-50%, 2rem);
transition: all 0.3s ease;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 0.5rem;
font-family: "Gotham Rounded";
font-size: 0.9rem;
z-index: 2;
text-wrap: nowrap;
cursor: pointer;
}
.page-products .products-list .product-card .add-item:hover {
background-color: var(--white);
}
.page-products .products-list .product-card:hover .add-item {
opacity: 1;
transform: translate(-50%, 0);
}
.page-products .products-list .product-card .add-item.is-loading {
color: transparent;
}
.product-card .add-item.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid #9a9a9a66;
border-top-color: var(--black);
border-radius: 50%;
animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
to {
transform: rotate(360deg);
}
}
.page-products .products-list-wrapper .load-more-wrapper {
display: flex;
margin: auto;
width: fit-content;
margin-top: 2rem;
}
.page-products .products-list-wrapper .load-more-wrapper .btn-load-more {
background-color: var(--black);
color: var(--white);
border: 2px solid var(--black);
outline: 0;
padding: 0.75rem 3rem;
font-size: 1rem;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.page-products .products-list-wrapper .load-more-wrapper .btn-load-more:hover {
background-color: var(--white);
color: var(--black);
}
.page-products .products-list-wrapper .load-more-wrapper .loader {
font-family: "Gotham Rounded";
padding-top: 0.75rem;
} @media (max-width: 100rem) { }
@media (max-width: 75rem) { }
@media (max-width: 62rem) { .page-products .products-list .product-card {
width: calc((100% - 2rem) / 2);
}
}
@media (max-width: 48rem) { .page-products .full-content .cover {
flex-direction: column;
gap: 0;
}
.page-products .products-list {
gap: 1rem;
}
.page-products .products-list .product-card {
width: calc((100% - 1rem) / 2);
}
.page-products .products-list .product-card .product-image {
padding: 0;
}
.page-products .products-list .product-card .product-image img {
width: 15rem;
height: auto;
}
.page-products .products-filters {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.page-products .products-filters.is-open {
max-height: none;
overflow: visible;
margin-bottom: 2rem;
}
.page-products .filters-mobile-toggle {
display: flex;
margin-bottom: 2rem;
}
.page-products .btn-filmb svg {
transition: transform 0.3s ease;
}
.page-products .btn-filmb[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.page-products .filters-mobile-toggle .btn-filmb {
display: flex;
width: 100%;
padding: 0;
margin: 0;
align-items: center;
justify-content: space-between;
padding: 0.5rem;
background-color: #f7f7f7;
border: 0;
font-family: "Gotham Rounded";
font-size: 1rem;
}
}
@media (max-width: 36rem) { .page-products .products-list .product-card .product-image {
height: 12rem;
}
.page-products .products-list .product-card .product-image img {
width: 100%;
height: auto;
}
.page-products .products-list .product-card .add-item {
display: none;
}
.page-products .banner-products .pic {
height: auto;
}
.page-products .banner-products .title {
font-size: 1.5rem;
}
}