.wp-block-acf-store-filter {
--filter-gap: var(--gap-width);
}
.wp-block-acf-store-filter .store-filter-image {
width: 40%;
position: relative;
}
.wp-block-acf-store-filter .store-filter-image img {
width: calc(100% - 14px);
aspect-ratio: 1;
display: block;
object-fit: cover;
border-radius: 5px;
box-shadow: 14px 14px 0px 0px var(--wp--preset--color--custom-dark-blue);
position: absolute;
bottom: 0;
z-index: 1;
}
.wp-block-acf-store-filter .filter-display-options-wrap {
display: flex;
gap: calc(var(--gap-width) / 3.5);
justify-content: space-between;
}
.wp-block-acf-store-filter .filter-display-options-wrap .display-toggle {
display: flex;
flex-direction: column;
gap: calc(var(--gap-width) / 3.5);
width: 100px;
padding-right: 30px;
}
.wp-block-acf-store-filter .filter-display-options-wrap .display-toggle button {
width: 68px;
height: 48px;
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--custom-dark-blue);
background-color: transparent;
border: 0;
cursor: pointer;
border-radius: 5px;
transition: var(--time);
}
.wp-block-acf-store-filter .filter-display-options-wrap .display-toggle button.active {
background-color: color-mix(in srgb, var(--wp--preset--color--custom-dark-blue) 15%, transparent);
}
.wp-block-acf-store-filter h5.store-title {
font-weight: 700;
font-size: 20px;
white-space: nowrap;
overflow: hidden;
display: block; }
.wp-block-acf-store-filter .isotope-wrap:not(.row-view) h5.store-title {
line-height: calc(20px + 10%);
}
.wp-block-acf-store-filter .item-info > * {
margin: 0;
}
.wp-block-acf-store-filter .filter-items-wrap {
overflow: hidden;
}
.wp-block-acf-store-filter .isotope-wrap {
width: calc(100% + var(--filter-gap));
}
.wp-block-acf-store-filter .isotope-wrap .item {
width: calc(33.33% - var(--filter-gap));
margin: 0 var(--filter-gap) calc(var(--filter-gap) * .65) 0;
box-sizing: border-box;
float: left;
background-color: #F5F3F2;
border: 2px solid var(--wp--preset--color--custom-dark-blue);
border-radius: 5px;
aspect-ratio: .9;
overflow: hidden;
display: flex;
flex-direction: column;
}
.wp-block-acf-store-filter .image {
aspect-ratio: 1.35;
overflow: hidden;
background-color: var(--wp--preset--color--custom-white);
position: relative;
border-bottom: 2px solid var(--wp--preset--color--custom-dark-blue);
container-type: inline-size;
display: flex;
justify-content: center;
flex-shrink: 0;
}
.wp-block-acf-store-filter .isotope-wrap:not(.row-view) .image {
flex-basis: 60%;
}
.wp-block-acf-store-filter .isotope-wrap.row-view .item {
width: calc(100% - var(--filter-gap));
margin: 0 0 calc(var(--filter-gap) * .65) 0;
aspect-ratio: unset;
flex-direction: row;
}
.wp-block-acf-store-filter .isotope-wrap.row-view .item .image {
width: 25%;
border-bottom: 0;
border-right: 2px solid var(--wp--preset--color--custom-dark-blue);
aspect-ratio: 1.5;
}
.wp-block-acf-store-filter .isotope-wrap.grid-view .store-category, .wp-block-acf-store-filter .isotope-wrap.grid-view .shop-info-block  {display: none;}
.wp-block-acf-store-filter .isotope-wrap.row-view .store-category {display: block;}
.wp-block-acf-store-filter .isotope-wrap.row-view .shop-info-block {display:flex;}
.wp-block-acf-store-filter .item-info {
padding: 20px;
}
.wp-block-acf-store-filter .item-info .trading-hours {
padding-top: .2em;
}
.wp-block-acf-store-filter .item-info .detail .material-symbols {
background-color: var(--wp--preset--color--custom-dark-blue);
color: var(--wp--preset--color--custom-white);
display: inline-flex;
justify-content: center;
align-items: center;
aspect-ratio: 1;
border-radius: 50%;
width: 16px;
height: 16px;
font-size: 13px;
}
.wp-block-acf-store-filter .item-info .detail {
display: flex;
align-items: center;
gap: .5em;
}
.wp-block-acf-store-filter .acronym {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 15cqw;
background-color: var(--wp--preset--color--custom-light-grey);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 40cqw;
height: 40cqw;
outline: 4cqw solid color-mix(in srgb, var(--wp--preset--color--custom-grey) 45%, transparent);
}
.wp-block-acf-store-filter .store .image img {
width: 70%;
max-width: 100%;
height: 100%;
overflow: hidden;
object-fit: contain;
padding: 2rem;
object-position: center;
display: block;
}
.wp-block-acf-store-filter .isotope-wrap .item.store-letter-heading {
width: 100% !important;
aspect-ratio: unset;
border: 0;
display: block;
background-color: transparent;
border-radius: unset;
margin-bottom: calc(var(--gap-width) / 2.5);
}
.wp-block-acf-store-filter .isotope-wrap .item.store-letter-heading span {
color: var(--wp--preset--color--custom-white);
background-color: var(--wp--preset--color--custom-dark-blue);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
border-radius: 5px;
font-weight: 500;
}
.wp-block-acf-store-filter #active-letter-title {
color: var(--wp--preset--color--custom-white);
background-color: var(--wp--preset--color--custom-dark-blue);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
border-radius: 5px;
font-weight: 500;
margin-top: 50px;
margin-bottom: 50px;
}
.wp-block-acf-store-filter #active-letter-title.void {
opacity: 0;
margin-bottom: -50px;
}
.wp-block-acf-store-filter .filter-options {
display: flex;
flex-direction: column;
gap: calc(var(--gap-width) / 3.5);
width: 620px;
max-width: 100%;
}
#active-category-title {
font-size: 24px;
position: relative;
top: 20px;
} .wp-block-acf-store-filter select,
.wp-block-acf-store-filter input[type="text"] {
border: 2px solid var(--wp--preset--color--custom-dark-blue);
border-radius: 5px;
color: var(--wp--preset--color--custom-dark-blue);
text-transform: uppercase;
width: 100%;
background-color: var(--wp--preset--color--custom-light-grey);
letter-spacing: .1em;
padding: .75em 1.5em;
font-size: 14px;
font-weight: 300;
font-family: inherit;
height: 48px;
}
.wp-block-acf-store-filter select::placeholder,
.wp-block-acf-store-filter input[type="text"]::placeholder {
color: var(--wp--preset--color--custom-dark-blue);
} .wp-block-acf-store-filter .button-group.filter-button-group {
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 16px;
position: relative;
}
.wp-block-acf-store-filter .button-group.filter-button-group button {
cursor: pointer;
border-radius: 5px;
color: var(--wp--preset--color--custom-dark-blue);
border: 2px solid var(--wp--preset--color--custom-dark-blue);
background-color: var(--wp--preset--color--custom-white);
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
aspect-ratio: 1;
transition: var(--time);
}
.wp-block-acf-store-filter .button-group.filter-button-group button:not(.active):not(.reset):hover {
background-color: color-mix(in srgb, var(--wp--preset--color--custom-dark-blue) 15%, transparent);
}
.wp-block-acf-store-filter .button-group.filter-button-group button.reset {
position: absolute;
left: calc(100% + (var(--gap-width) / 3.5));
bottom: 0;
border: 0;
padding: 0;
aspect-ratio: unset;
}
.wp-block-acf-store-filter .button-group.filter-button-group button.reset.active {
background-color: unset;
}
.button-group.filter-button-group button.active {
color: var(--wp--preset--color--custom-white);
background-color: var(--wp--preset--color--custom-dark-blue);
}
#active-letter-title.void + .isotope-wrap {
margin-top: -50px;
}
#active-category-title:not(.void) + #active-letter-title.void {
margin-bottom: 50px !important;
}
.wp-block-acf-store-filter .isotope-wrap .shop-info-block {
width: 25%;
color: var(--wp--preset--color--custom-white);
background: var(--wp--preset--color--custom-dark-blue);
justify-content: center;
align-items: center;
gap: .5em;
transition: var(--time);
position: relative;
}
.wp-block-acf-store-filter .isotope-wrap .shop-info-block:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: var(--wp--preset--gradient--custom-blue);
opacity: 0;
transition: var(--time);
}
.wp-block-acf-store-filter .isotope-wrap .shop-info-block > span {
position: relative;
z-index: 1;
display: flex;
gap: .5em;
font-size: var(--wp--preset--font-size--medium);
}
.wp-block-acf-store-filter .isotope-wrap .item:hover .shop-info-block:after {
opacity: 1;
}
.wp-block-acf-store-filter .isotope-wrap.row-view .item-info {
width: 50%;
padding: 35px var(--wp--style--root--padding-left);
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.wp-block-acf-store-filter .isotope-wrap.row-view h5.store-title {
font-size: var(--wp--preset--font-size--large);
}
.wp-block-acf-store-filter .isotope-wrap.row-view .store-category {
margin-bottom: .7em;
margin-top: .3em;
}
.isotope-wrap.grid-view .trading-hours .today {
display: none;
}
.isotope-wrap.grid-view .trading-hours {
line-height: 1.7;
}
.isotope-wrap.grid-view .details {
line-height: 1.5;
}