body {
--neutral-50: #fafafa;
}
.fuse {
max-width: calc(50% - 8px) !important;
}
.lojista__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 220px));
gap: 20px;
margin-top: -36px;
}
.lojista__item {
padding: 16px;
padding-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: var(--box-shadow-warm);
scroll-margin-top: 136px;
overflow: clip;
}
.lojista__item svg {
flex-shrink: 0;
}
.lojista__item .name {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--neutral-100);
background: var(--main);
color: #fff;
margin: -16px;
padding: 16px;
}
.lojista__item .name svg path {
stroke: #fff;
}
.lojista__item h2 {
font-size: calc(12 / 16 * 1rem);
line-height: 16px;
}
.lojista__item .info {
margin-top: 32px;
}
.lojista__item .local {
display: flex;
gap: 4px;
}
.lojista__item .phone {
display: flex;
gap: 4px;
margin-top: 8px;
}
.lojista__item span {
font-size: calc(12 / 16 * 1rem);
line-height: 16px;
color: var(--neutral-500);
}
.archive_1__searches {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
#cityInput {
width: 100%;
min-height: 40px;
padding: 0 12px;
border: 1px solid var(--neutral-200);
border-radius: 4px;
font-size: calc(16 / 16 * 1rem);
line-height: 24px;
font-weight: normal;
color: var(--neutral-700);
}
#cityInput:focus-within {
outline: 2px solid var(--neutral-300);
outline-offset: 2px;
}
#cityInput::placeholder {
position: relative;
left: -2px;
}
#cityClearButton {
position: absolute;
top: 2px;
right: 2px;
padding: 8px;
background-color: #fff;
border-radius: 4px;
}
#cityClearButton:hover {
background-color: var(--neutral-50);
}
#cityResults {
position: absolute;
margin-top: 8px;
box-shadow: var(--box-shadow-next);
width: 100%;
border-radius: 4px;
background-color: var(--neutral-100);
flex-direction: column;
overflow: hidden;
max-height: 320px;
overflow-y: auto;
z-index: 9;
animation: show 125ms forwards;
}
#cityResults > a,
#cityResults > span {
padding: 8px;
background-color: #fff;
font-size: calc(14 / 16 * 1rem);
display: flex;
gap: 8px;
align-items: baseline;
}
#cityResults > a:hover {
background-color: var(--neutral-50);
}
#cityResults > a:focus-visible {
outline-offset: -1px;
} 
#cityResults > a + a {
border-top: 1px solid var(--neutral-100);
}
#cityResults > a > span:first-child {
height: 100%;
align-self: center;
}
@media(max-width: 700px) {
.fuse {
max-width: 100% !important;
}
}
@media (max-width: 500px) {
.lojista__list {
grid-template-columns: 1fr;
}
}