:root {
	--pi-city-capt-height: 18px;
	--pi-capt-padding: 8px;
	--nav-btn-height: 40px;
}

.sale-item .product-item .product-item-title h3 {
	height: 1.2em;
	line-height: 1.2em;
	margin-top: var(--pi-capt-padding) !important;
	/*
	height: calc(var(--line-width) - var(--pi-city-capt-height));
    line-height: calc(var(--line-width) - var(--pi-city-capt-height));
    */
}

.sale-item .product-item .product-item-title h3 b { font-weight: 400; }

.sale-item .product-item .product-item-title h3 + .brick {
	height: .7em;
	line-height: 1.2em;
	position: relative;
    top: calc(-.85 * var(--pi-capt-padding));
    /*
	height: var(--pi-city-capt-height);
    line-height: var(--pi-city-capt-height);
    */
}

.sale-item .product-item .product-item-title .wrap {
	height: var(--line-width);
}

#city-filter__container {
    font-size: 16px;
    width: 33.33%;
    margin: auto;
    padding: 0px;
    height: 45px;
    z-index: 50;
}

.city-filter__wrapper { padding: 0px 20px; background-color: #fff; border: 1px solid #ddd; }

.city-filter__holder { cursor: pointer; }

.city-filter__holder, .city-filter__item {
    padding: 10px 0px;
    display: block;
    margin: 0;
    overflow: hidden;
}

.city-filter__item input {
	display: none;
}

.city-filter__item input + .input-checkbox {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #ddd;
	margin-right: 20px;
}

.city-filter__item input:checked + .input-checkbox {
	/*background-color: #ddd;*/
	position: relative;
}

.city-filter__item input:checked + .input-checkbox:before,
.city-filter__item input:checked + .input-checkbox:after{
	content: '';
    position: absolute;
    height: 1px;
    width: 18px;
    visibility: hidden;
    display: inline-block;
    background-color: var(--grey-social-color);
    top: 9px;
    left: 0px;
    z-index: 4;
    transform-origin: center;
}

.city-filter__item input:checked + .input-checkbox:before { transform: rotate(45deg); }
.city-filter__item input:checked + .input-checkbox:after { transform: rotate(-45deg); }

.city-filter__item input:checked + .input-checkbox:before, 
.city-filter__item input:checked + .input-checkbox:after {
    visibility: visible;
}

.city-filter__holder { font-weight: 300; color: #888; }
.city-filter__item { font-weight: 400; }

.city-filter__toggler .svgIcon {
    fill: #808080;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
    top: 13px;
    transform: rotate(-90deg);
}

#city-filter__container.slipped .city-filter__toggler .svgIcon {
	transform: rotate(90deg);
}

#city-filter__container.slipped .city-filter__items__container { 
	height: 0px; 
	padding: 0px; 
	overflow: hidden;
	background-color: #fff;
	transition: .3s ease-out;
}

.filter-shadow {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(210, 210, 210, .8);
    z-index: 40;
    width: 100%;
    height: 100%;
}

.city-filter__apply-btn {
    width: 100%;
    background-color: var(--grey-vlight-color);
    height: var(--nav-btn-height);
    line-height: var(--nav-btn-height);
    display: inline-block;
    text-align: center;
    font-size: var(--body-bigger-size);
    text-transform: uppercase;
    cursor: pointer;
} 

.city-filter__items__container {
	padding-bottom: 15px;
}

@media (max-width: 700px) {
    #city-filter__container { width: 100%; }
}