/* Локальные стили страницы ./blank/ для МОБИЛЬНОЙ версии */
/* Используем схему MobileFirst на случай, если @media не сработает */

.goods__navigate { 
    position: fixed;
    top: 94px;
    width: 280px;
    background-color: white;
    border-right: 1px solid #dddddd;
    z-index: 10;
	overflow-y: scroll;
	height: 90%;
    height: -moz-available;          /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    height: fill-available;
	
}

.price_button_top { padding: 20px 20px 0px 20px; }	

.goods__menu {
	padding: 20px;
    font-family: 'Vida33Pro';
    font-size: 14px;
}	

.goods__menu li {
	padding: 6px;
    border-bottom: 1px solid #dddddd;
	cursor: pointer;	
}
.goods__menu li:first-child {
	border-top: 1px solid #dddddd;
}	
.goods__menu li:hover {
    box-shadow: 0 4px 37px 3px rgba(0, 0, 0, 0.15);
}
.goods__menu li a{
	display: block;
	cursor: pointer;	
}

.price_button_middle { padding: 0px 20px 20px 20px; }	
.price_button_bottom { padding: 0px 20px 160px 20px; }	

.goods__content { 
	position: relative;
	width: 100%;
	padding-top: 40px;	
}

.show { 
	position: relative; 
	padding-top: 0px; 
	padding-bottom: 100px; 
}

.goods_title {
	text-align: center;
	padding: 20px;
}	
	
.goods_list {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-around;
    align-items: center;
	gap: 16px;
	padding: 0 20px 30px 20px;
}
.goods_list li {
	cursor: pointer;	
}	
.goods_list li:hover {
    box-shadow: 0 4px 37px 3px rgba(0, 0, 0, 0.15);
}

.goods_item {
	display: flex; 
	flex-wrap: nowrap; 
	justify-content: flex-start;
    align-items: center;
	border: 1px solid #dddddd;
    padding: 10px;
	min-height: 140px;
	width:  100%;
}

.border_red {
	border: 2px solid #FF0000;
}

.goods_item figure {
	width:  110px;
	min-width: 110px;
	height:  110px;
	min-width: 110px;
	text-align: center;
}	
.goods_item figure img{
	max-width: 110px;
	max-height: 110px;
	margin: auto;
}	


.goods_descr {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: flex-start;
    align-items: center;
}

.goods_name {
	padding: 10px 10px 10px 20px;
	width: 100%;
    font-size: 14px;
	font-weight: normal;
}	


.goods_line {
	display: flex; 
	flex-wrap: nowrap; 
	justify-content: space-between;
    align-items: center;
	width: 100%;
	height: 44px;
}	

.goods_price {
	padding: 10px 10px 10px 20px;
	width: 100%;
    font-size: 14px;
	color: var(--secondary);
}	


.price-list__descr {
	font-family: 'Vida33Pro';
    font-size: 14px;
	text-align: left;
	padding: 12px;
}	

.price-list {
	width: 300px;
	margin: 0 auto;
}
.price-list__item {
	display: flex; 
	flex-wrap: nowrap; 
	justify-content: center;
    align-items: center;
	gap: 10px;
}	
.price-list__number { width: 50%; font-size: 20px; }
.price-list__value { width: 50%; font-size: 20px; color: var(--secondary); }

.add-num { }
.add-hrn { width: 40%; }
.add-alt { width: auto; text-decoration: line-through; text-decoration-color: red; }
.add-red { width: auto; color: red; }



.promo_content {
	padding: 0 20px 30px 20px;
    font-family: 'Vida33Pro';
    font-size: 14px;
	text-align: center;
}

.promo_content a {
	color: var(--secondary); 
	text-decoration: none; 
	border-bottom: 2px solid transparent; 
	-webkit-transition: all 0.2s linear; 
	-moz-transition: all 0.2s linear; 
	-o-transition: all 0.2s linear; 
	transition: all 0.2s linear; 
	white-space: nowrap;
}
.promo_content a:hover { 
	color: var(--primary); 
	text-decoration: none; 
	border-bottom: 2px solid var(--primary); 
}

.anchor-padding-3 { height: 114px;  margin-top: -240px;} /* отступ для точного позиционирования якорных ссылок */

.end_page { display: none; }	
footer { display: none; }	
	
/* ======================================================================================================================= */
/* Media Queries - модифицируем некоторые стили в зависимости от пропорций и размера окна ================================ */
/* ======================================================================================================================= */

/* ЛЮБОЙ ДЕСКТОП */
@media screen and (min-width: 860px) {
	.goods_item { width:  32%; }
	.goods__content { width: calc(100% - 280px); margin-left: 280px; }	
}
	

/* НИЗКИЙ ДЕСКТОП */
@media screen and (min-width: 860px) and (max-height: 650px) {
}

/* УЗКИЙ ДЕСКТОП */
@media screen and (min-width: 860px) and (max-width: 1180px) {
	.goods_item { width:  48%; }
}
	
/* НИЗКИЙ УЗКИЙ ДЕСКТОП */
@media screen and (min-width: 860px) and (max-width: 1180px) and (max-height: 650px) {
}

/* НИЗКАЯ МОБИЛЬНАЯ */
@media screen and (max-width: 860px) and (max-height: 650px) {
}
