.store-map-page {
padding: 70px 0 100px;
}
.store-map-page__header {
margin-bottom: 40px;
}
.store-map-page__title {
margin: 0;
font-size: clamp(32px, 4vw, 56px);
font-weight: 500;
line-height: 1.1;
}
.store-map-page__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
height: clamp(560px, 70vh, 760px);
overflow: hidden;
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 25px;
}
.store-map-page__map,
.store-map-page__iframe {
width: 100%;
height: 100%;
}
.store-map-page__iframe {
display: block;
border: 0;
}
.store-map-page__sidebar {
display: flex;
min-height: 0;
padding: 20px;
flex-direction: column;
background: #fff;
border-left: 1px solid #e0e0e0;
}
.store-map-page__sidebar-title {
margin: 0 0 20px;
font-size: 28px;
font-weight: 500;
line-height: 1.2;
}
.store-map-page__locations {
display: flex;
min-height: 0;
padding-right: 6px;
gap: 12px;
flex: 1;
flex-direction: column;
overflow-y: auto;
}
.store-map-page__location {
display: block;
width: 100%;
padding: 15px 16px;
color: #1e1e1e;
font: inherit;
text-align: left;
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 14px;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.store-map-page__location:hover,
.store-map-page__location:focus-visible,
.store-map-page__location.is-active {
background: #f7f7f7;
border-color: #1e1e1e;
}
.store-map-page__location span,
.store-map-page__location small {
display: block;
}
.store-map-page__location span {
font-size: 17px;
line-height: 1.25;
}
.store-map-page__location small {
margin-top: 4px;
color: #707070;
font-size: 14px;
line-height: 1.35;
}
@media (max-width: 991.98px) {
.store-map-page {
padding: 48px 0 72px;
}
.store-map-page__layout {
grid-template-columns: 1fr;
height: auto;
}
.store-map-page__map {
height: min(58vh, 520px);
min-height: 360px;
}
.store-map-page__sidebar {
max-height: 520px;
border-top: 1px solid #e0e0e0;
border-left: 0;
}
}
@media (max-width: 575.98px) {
.store-map-page {
padding: 32px 0 56px;
}
.store-map-page__header {
margin-bottom: 22px;
}
.store-map-page__layout {
border-radius: 16px;
}
.store-map-page__map {
height: 420px;
min-height: 0;
}
.store-map-page__sidebar {
padding: 22px 14px 16px;
}
.store-map-page__sidebar-title {
font-size: 24px;
}
}