:root {
	--shop-instance-height: 340px;
	--nav-btn-height: 40px;
	--modal-map-padding: var(--page-h-padding);
	--modal-container-margin: 60px;
}

.flex.column {
	flex-direction: column;
	align-items: baseline;
}

.h3.bold {
	font-weight: 600;
}

.container { max-width: 100%; }

.noPaddingLeft { padding-left: 0; }

#mapHolder  {
	aspect-ratio: 16 / 9;
	margin: var(--page-h-padding) 0px;
	background-color: var(--grey-vlight-color);
}

#modalMap, #mapHolder {
	filter: grayscale(1);
}

#shopHolder {
	padding-bottom: var(--page-h-padding);
}

.map-list-btn {
    display: block;
    padding: 5px 10px;
    width: 100%;
    min-width: 250px;
    font-size: .8em;
    text-align: center;
    text-transform: uppercase;
    background-color: var(--grey-vlight-color);
    margin-top: 5px;
    cursor: pointer;
}

[class*='balloon__content'] {
    font-family: Manrope;
}

.shops_country__caller { margin-bottom: 5px; }
.underlined-row { padding-bottom: 3px; border-bottom: 1px solid #ddd; transition: .3s ease-out; }
.shop_region_wrapper { padding-top: 15px; padding-left: 30px; }

.shops_country_wrapper.active .shops_country__caller { fill: var(--red-active-color); border-bottom-color: var(--red-active-color); color: var(--red-active-color)}
.shop_region_wrapper.active .shops_region__caller { border-bottom-color: transparent; }

.shops_country_wrapper + .shops_country_wrapper { margin-top: 10px; }

.shops_country__region_list { padding-bottom: 20px; }

.shop_wrapper__instance { 
	height: var(--shop-instance-height);
	padding-top: 15px; 
}

.shop_wrapper__instance + .shop_wrapper__instance { padding-top: 30px; }

.shop_wrapper__instance .rightPadding {
	padding-right: var(--page-h-padding);
}

.geo-btn {
	background-color: var(--grey-vlight-color);
    padding: 10px;
    display: inline-block;
    cursor: pointer;
}

.shop-photo-slider { height: 100%; }
.shop-photo-slider .swiper-slide { width: auto; }
.shop-photo-slider img { height: 100%; }


.shop-photo-slider .slider-btn {
	height: 100%;
	padding: 15px;
	top: 0;
	left: 0;
	z-index: 5;
}

.shop-photo-slider .slider-btn.slider-next { left: auto; right: 15px; }

.shop-photo-slider .slider-btn svg { 
	fill: #fff; 
	width: calc(var(--nav-btn-height) * .5);
    height: var(--nav-btn-height);
}

.modal-map-container {
    position: fixed;
    padding: var(--page-h-padding) var(--modal-container-margin);
    top: calc(1.5 * var(--header-height));
    left: 0;
    width: 100%;
    height: calc(100vh - 1.5 * var(--header-height));
    z-index: 100;
}

.modal-map-container .shadow {
	background-color: #000;
	opacity: .2;
}

.modal-map-container .wrapper {
	padding: var(--modal-map-padding);
	background-color: #fff;
	height: 100%;
}

.hide-modal-map { padding: 20px; fill: var(--grey-light-color); }

.hide-modal-map svg { height: 20px; width: 20px; }

.row_toggler__handler {
	right: 0;
	bottom: 0;
	position: absolute;
}

.row_toggler__handler svg {
	width: 20px;
	height: 20px;
	transform: rotate(90deg);
}

@media (max-width: 768px) and (min-width: 500px) { 
	:root {
		--shop-instance-height: 265px;
	}
}

@media (max-width: 499px) {
	:root {
		--modal-container-margin: 15px;
	}

	#mapHolder { aspect-ratio: 9 / 10; }

	.shop_wrapper__instance { padding-bottom: 15px; border-bottom: 1px solid var(--grey-vlight-color); }

	#photo-slider-modal { top: 15px; }
}