.wp-block-products {
margin-top: 4em;
margin-bottom: 4em;
}
.wp-block-products h2 {
margin: 0;
} .wp-block-products .toolbar {
display: flex;
flex-wrap: wrap;
gap: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;
position: relative;
}
.wp-block-products .toolbar label.visability {
margin-bottom: 1em;
position: absolute;
right: 0;
bottom: 100%;
}
.wp-block-products .toolbar .search,
.wp-block-products .toolbar select {
background-color: #FFFFFF;
border: 1px solid #BCB4A9;
border-radius: 4px;
color: #BCB4A9;
font-family: 'Calibri';
padding: 0.5em 0.75em;
}
.wp-block-products .toolbar .search {
flex: 1;
}
.wp-block-products .toolbar select {
width: 8em;
} .wp-block-products .list {
display: grid;
grid-gap: 4em 2em;
grid-template-columns: repeat(4, 1fr);
padding: 0;
}
.wp-block-products .list li {
display: block;
}
.wp-block-products .list li > a {
color: #001F59;
display: block;
height: 100%;
text-align: center;
text-decoration: none;
}
.wp-block-products .list li .image {
aspect-ratio: 1 / 1;
position: relative;
}
.wp-block-products .list li img {
display: block;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s;
width: 100%;
}
.wp-block-products .list li img + img {
background-color: #F0E6D8;
height: 100%;
opacity: 0;
width: 100%;
}
.wp-block-products .list li a:hover img + img {
opacity: 1;
}
.wp-block-products .list h5 {
margin-top: 0.5em;
margin-bottom: 0;
} .wp-block-products .pagination {
display: flex;
justify-content: center;
gap: 0.5em;
margin-top: 1.5em;
padding: 0;
}
.wp-block-products .pagination li {
display: block;
}
.wp-block-products .pagination a {
background-color: #FFFFFF;
border: 1px solid #BCB4A9;
border-radius: 4px;
color: #BCB4A9;
font-family: 'Calibri';
padding: 0.5em 0.75em;
text-decoration: none;
}
.wp-block-products .pagination a:hover {
background-color: #FAF7F2;
}
.wp-block-products .pagination li.active a {
background-color: #FFD100;
border-color: transparent;
color: #001F59;
}
@media (max-width: 992px) {
.wp-block-products .toolbar .search {
flex: 100%;
}
.wp-block-products .toolbar select {
flex: 1;
}
.wp-block-products .list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.wp-block-products .toolbar label.visability {
display: flex;
flex-direction: row-reverse;
margin-bottom: 0;
position: relative;
}
.wp-block-products .list {
grid-template-columns: repeat(1, 1fr);
}
} .wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-products h2,
.wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-products .toolbar {
opacity: 0;
}
.wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-products .list li {
transform: scale(0);
}