@media only screen and (min-width: 651px) {
    body {max-width: 650px; margin: 0 auto !important; }
}

@media only screen and (max-width: 1100px) {
    body{ max-width: unset; }
}

body{ font-family: arial; }
.top_menu{ max-width: 650px; width: -webkit-fill-available; }   
footer{background-color: #272727; color: white; padding: 10px; font-size: 14pt; margin-top: 20px;}
footer a{ text-decoration: none; }
.article_subheader h4{ line-height: 1.3; margin-top: 0; margin-buttom: 5px; }
.container{ padding: 0; margin-top: 60px; /*max-width: 650px;*/ width: -webkit-fill-available; }

.article{ user-select: none; cursor: pointer; letter-spacing: 1px; border-bottom: 2px solid transparent; padding: 10px; margin: 0 0px; overflow: hidden;}
.article_active .header_img{ filter: invert(1); }
.article_active{ background-color: #444; color: white; }
.article_active{ position: sticky; top: 0; z-index: 101; background-color: #444; }
.article:hover{ background-color: #444; color: white; }
.article h3{ font-weight: bold; margin-top: 0; }
.article:hover .header_img {filter: invert(1); }

.article_container{ padding: 0px 10px 15px 10px; box-shadow: inset 0px 0px 6px 0px black; font-size: 16px; }
.article_subheader{ font-size: 22px; padding: 10px 0 5px; line-height: 1.4; color: black; font-weight: bold; text-align: center; }
.article_content div { padding: 5px; }
.article_content img { width: -webkit-fill-available; margin: 0px -14px; }

	.footer_a, .footer_h{ font-size: 16px; color: white !important;}
	.footer_a:hover{ color: #ccc; }
	.footer_link {text-decoration: none; color: #bbb;}
	.footer_link:hover {text-decoration: none; color: white;}

	.footer_container{flex-direction: unset; padding: 5px;}
	.footer_left_half{text-align: center; font-size: 16px; margin-right: 10px;}



    @media only screen and (max-width: 450px) {
		.footer_container{flex-direction: column-reverse;}
        .footer_left_half{width: 100%;}
    }

.header_price{ background-color: orangered; color: white; padding: 2px 5px; /*margin-left: 10px;*/ background-color: #4CAF50; border-radius: 5px; }

/*Слайдер - НАЧАЛО*/
    .photos-container {position: relative; width: -webkit-fill-available; max-width: -webkit-fill-available; aspect-ratio: 5 / 6; overflow: hidden; }
    .photos-container img {margin: 0px; position: absolute; top: 0; left: 0; max-width: -webkit-fill-available; max-height: -webkit-fill-available; object-fit: cover; object-position: center; transition: opacity 0.5s ease, transform 0.5s ease; opacity: 0; user-select: none; transform: translateX(0); }

    /* Активная картинка */
    .photos-container img.active {opacity: 1; z-index: 10; }

    /* --- КЛАССЫ АНИМАЦИИ --- */
    .photos-container img.slide-in-from-right {transform: translateX(0); opacity: 1; }
    .photos-container img.slide-out-to-left {transform: translateX(-100%); opacity: 0; }
    .photos-container img.slide-in-from-left {transform: translateX(0); opacity: 1; }
    .photos-container img.slide-out-to-right {transform: translateX(100%); opacity: 0; }

    /* Кнопки */
    .photos-container .nav-button {position: absolute; top: 0; width: 50px; height: 100%; background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); border: none; cursor: pointer; user-select: none; opacity: 0; transition: opacity 0.3s ease; z-index: 20; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; }
    .photos-container .nav-button.prev {display: none; left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); }
    .photos-container .nav-button.next {display: none; right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); }
    .photos-container:hover .nav-button {opacity: 1; }
    /* Индикаторы */
    .photo-indicators {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 13px; z-index: 30; }
    .photo-indicators .indicator {width: 15px; height: 15px; border-radius: 50%; background-color: rgba(0,0,0,0.5); cursor: pointer; transition: background-color 0.3s ease; }
    .photo-indicators .indicator.active {background-color: rgba(0,0,0,0.9); }

    #modalZoom {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); z-index: 9999; justify-content: center; align-items: center; overflow: hidden; }
    #modalZoom img {max-width: 100%; max-height: 100%; touch-action: none; /* отключаем стандартные жесты браузера */ user-select: none; will-change: transform; }
    #modalClose {position: absolute; top: 20px; right: 20px; color: white; font-size: 30px; background: none; border: none; cursor: pointer; }

/*Слайдер - КОНЕЦ*/

    /* стили маски загрузки данных */
    .back_ground {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000b8; z-index: 9999; text-align: center; justify-content: center; align-items: center; flex-direction: column; }
    .back_ground img {max-width: 100%; height: auto; display: inline-block; }
    .timer{position: relative; top: -105px; font-size: 40px; user-select: none; color: #fff;}
    .td_status{ color:black; padding: 0 5; margin: 0 5px; border: 1px solid #222; border-radius: 5px; }
    /* ********** */