/* ============================================
   ОБЩИЕ СТИЛИ (для всех экранов)
   ============================================ */
   

/*-------------------------------------------   IPHONE grosses Bild --------------------------------------*/
@media screen and (min-width: 401px) {
										.lenta-detail-price {
																font-size: 24px;
															}
										.lenta-detail-stock {
															font-size: 16px;
															}
										.lenta-detail-info h1 {
																font-size: 24px;
																}
										.lenta-detail-description {
																font-size: 16px;
																max-height: 26vh;
																	}
										.lenta-detail-actions .more-button {
																font-size: 16px;
																			}
										.home-button {
														width: 80px;
														height: 80px;
														font-size: 34px;
														bottom: 60px;
														left: 25px;
														}
										.lenta-detail {
														height: calc(100dvh - 30px - env(safe-area-inset-bottom, 0px)); /* вместо 100dvh */
														max-height: calc(98dvh - 30px - env(safe-area-inset-bottom, 20px)); /* вместо 100dvh */
														}
										.home-button-fixed {
															width: 70px;
															height: 70px;
															font-size: 32px;
															bottom: 30px;
															left: 25px;
															}
										}
/*---------------------------------------------   ANDROID klein Bild --------------------------------------*/
@media screen and (max-width: 400px) {
										.lenta-detail-price {
															font-size: 16px;
															}
										.lenta-detail-stock {
															font-size: 12px;
															}
										.lenta-detail-info h1 {
																font-size: 16px;
																}
										.lenta-detail-description {
																font-size: 12px;
																max-height: 20vh;
																	}
										.lenta-detail-actions .more-button {
																font-size: 12px;
																			}
										.home-button {
														width: 50px;
														height: 50px;
														font-size: 24px;
														bottom: 15px;
														left: 15px;
														}
										.lenta-detail {
														height: calc(100dvh - 38px - env(safe-area-inset-bottom, 0px)); /* вместо 100dvh */
														max-height: calc(100dvh - 38px - env(safe-area-inset-bottom, 20px)); /* вместо 100dvh */
														}
										.home-button-fixed {
															width: 50px;
															height: 50px;
															font-size: 24px;
															bottom: 15px;
															left: 15px;
															}
									}
									
/* ===== ФИКСИРОВАННАЯ КНОПКА HOME (для всех страниц) ===== */
.home-button-fixed {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #4e831f;
    color: white;
    border: 2px solid white;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    flex-shrink: 0;
}

.home-button-fixed:hover {
    background: #3a6b16;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.home-button-fixed:active {
    transform: scale(0.95);
}
									
									
										.lenta-detail {
														width: 100%;
														max-width: 1000px;
														margin: 0 auto;
														padding: 2px;
														padding-bottom: env(safe-area-inset-bottom, 20px);
														background: #5c902c;
														box-sizing: border-box;
														overflow: hidden;
														flex-shrink: 0;
														flex-grow: 0;
														scroll-snap-align: start;
														scroll-margin-top: 5px;
														position: relative;
														transform: translateZ(0);
														backface-visibility: hidden;
													}
													/*
										.lenta-detail {
														width: 100%;
														max-width: 1000px;
														margin: 0 auto;
														padding: 2px;
														padding-bottom: env(safe-area-inset-bottom, 20px);
														background: #5c902c;
														box-sizing: border-box;
														overflow: hidden;
														/*border: 1px solid BLUE;
														flex-shrink: 0;
														flex-grow: 0;
														
														position: relative;
														scroll-snap-align: start;
														overflow: hidden;  /* ← ИЗМЕНЕНО: скрываем всё, что не помещается 
														scroll-margin-top: 5px;
														margin: 0 auto;
														scroll-snap-stop: normal;
														transform: translateZ(0);
														backface-visibility: hidden;
														
														
														
														}
													*/


.lenta-detail-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 5px;
    background: linear-gradient(180deg, #a5d772 50%, #4e831f 100%);
    /*border: 1px solid RED;*/
    /*border-radius: 10px; Скругление со всех сторон */
    box-sizing: border-box;
    width: 100%;
    height: 100%; /* Растягиваем на всю высоту родителя */
    overflow: hidden; /* Скрываем всё, что выходит за рамки */
	position: relative; /* Для позиционирования кнопки */
}

/*=================== кнопка HOME ==================================*/
.home-button {
    position: absolute;
    border-radius: 50%;
    background: #4e831f;
    color: white;
    border: 2px solid white;
    /*font-size: 24px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    flex-shrink: 0;
}

.home-button:hover {
    background: #3a6b16;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.home-button:active {
    transform: scale(0.95);
}
/*---------------------------------------------------------------------------------------------------*/










.lenta-detail-description {
    padding-left: 15px;
	padding-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: white;
    border-radius: 5px;
    border: 2px solid BLACK; /* ok */
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px;
    
    /* Занимает все доступное место но не больше родителя */
    flex: 1;
    min-height: 40px;
    overflow: hidden;
    
    /* Для flex-контейнера внутри */
    display: flex;
    flex-direction: column;
}

.lenta-detail-description .description-text {
    flex: 1;
    overflow: hidden;
}

.lenta-detail-actions {
						flex-shrink: 0;
						margin-top: auto;
					}
































.lenta-detail-price {
   /* font-size: 20px;*/
    font-weight: bold;
    color: #2e7d32;
    padding: 5px;
    background: #e8f5e9;
    border-radius: 5px;
	/*border: 1px solid #c8e6c9;*/
    border: 1px solid Black;
    word-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
    
    /* Делаем flex-контейнером */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lenta-detail-stock {
    /*font-size: 16px;*/
    padding: 3px 5px;
    background: #fff3e0;
    border-radius: 5px;
    /*border: 1px solid #ffe0b2;*/
    border: 1px solid BLACK; /* ok */
    word-wrap: break-word;
    box-sizing: border-box;
    
    /* Не растягивается */
    flex-shrink: 0;
    margin-top: 0; /* Убираем отрицательный отступ */
}



.lenta-detail-info {
    flex: 1 1 55%;
    min-width: 200px;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
    overflow: hidden; /* Обрезаем все, что выходит за пределы */
	border-radius: 10px;
	border: 1px solid Black; /* ok*/
}

.lenta-detail-info h1 {
    /*font-size: 20px;*/
    margin: 0; /* Убираем все отступы */
    padding: 0; /* Убираем все внутренние отступы */
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}


.lenta-detail-image {
    flex: 1 1 40%;
    min-width: 200px;
    padding: 2px;
    box-sizing: border-box;

}

.lenta-detail-image img {
    width: 100%;
    height: auto;
    border: 1px solid #000000;
    border-radius: 8px;
    display: block;
    background: white;
}


/******************************************************** КНОПКА ZURÜCK ************************************************/
/* ============================================
   КНОПКИ ACTIONS
   ============================================ */
.lenta-detail-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    padding-right: 15px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    flex-shrink: 0; /* Чтобы кнопки не сжимались */
}

.lenta-detail-actions .more-button {
    padding: 8px 2px;
    background: #4e831f;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    transition: background 0.3s;
    text-align: center;
    cursor: pointer;
    flex: 1;
}


.lenta-detail-actions .more-button:hover {
    background: #3a6b16;
}


.lenta-detail-actions .more-button {
    background: #4e831f;
}

.lenta-detail-actions .more-button:hover {
    background: #3a6b16;
}
/*----------------------------------------------------------------------------------------------------------------------*/




/******************************************************** КНОПКА СКРОЛЛА  ************************************************/
/* ===== СТРЕЛКА СКРОЛЛА (изображение) ===== */
.scroll-hint {
    position: fixed;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 100;
    
    display: none;
    align-items: center;
    justify-content: center;
    
    width: 120px;
    height: 160px;
    
    pointer-events: none;
    user-select: none;
    
    animation: scroll-bounce 4s ease-in-out infinite;
}

.arrow-down {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* сохраняет пропорции */
    display: block;
    
    /* Если изображение имеет прозрачность */
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

/* ===== АНИМАЦИЯ ===== */
@keyframes scroll-bounce {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, 50%) translateY(0);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, 50%) translateY(-40px);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, 50%) translateY(0);
    }
    30%, 100% {
        opacity: 0;
        transform: translate(-50%, 50%) translateY(0);
    }
}

/* ===== АДАПТИВ ===== */
@media screen and (max-width: 400px) {
    .scroll-hint {
        width: 80px;
        height: 110px;
    }
    
    @keyframes scroll-bounce {
        0%, 100% {
            opacity: 0;
            transform: translate(-50%, 50%) translateY(0);
        }
        10% {
            opacity: 1;
            transform: translate(-50%, 50%) translateY(-25px);
        }
        20% {
            opacity: 1;
            transform: translate(-50%, 50%) translateY(0);
        }
        30%, 100% {
            opacity: 0;
            transform: translate(-50%, 50%) translateY(0);
        }
    }
}

@media screen and (min-width: 401px) and (max-width: 768px) {
    .scroll-hint {
        width: 120px;
        height: 160px;
    }
}
/*----------------------------------------------------------------------------------------------------------------------*/