/* --- БАЗОВІ НАЛАШТУВАННЯ СТОРІНКИ --- */
body {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    background-color: #000000;
    margin: 0;
    padding: 0;
}




/* ========================================== */
/* СТИЛІ ДЛЯ ДЕСКТОПНОЇ ВЕРСІЇ                */
/* ========================================== */

.hero-desktop {
    width: 100%;
    max-width: 1920px;
    height: 922px; /* Точна висота твого макета з Figma */
    margin: 0 auto; /* Центруємо по центру екрана, якщо монітор більше ніж 1920 */
    
    /* Ставимо твою картинку на фон */
    background-image: url('../img/INDEX_FONE.webp');
    background-position: top center; /* Прив'язка до верху по центру */
    background-repeat: no-repeat; /* Щоб фон не дублювався */
    background-size: cover; /* Фото акуратно заповнює весь простір екрану */
}

/* ========================================== */
/* ЕЛЕМЕНТИ ГОЛОВНОГО ЕКРАНУ (ЛОГО ТА ТЕКСТ)  */
/* ========================================== */

/* Оновлюємо наш головний екран, додаючи relative */
.hero-desktop {
    position: relative; /* Тепер внутрішні елементи рахують відступи від цього екрана */
    width: 100%;
    max-width: 1920px;
    height: 922px;
    margin: 0 auto;
    background-image: url('../img/INDEX_FONE.webp');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Великий логотип JERKY_LOGO */
.hero-logo {
    position: absolute;
    top: 190px; /* Твій відступ зверху */
    left: 50%; /* Магія центрування */
    transform: translateX(-50%);
    width: 518px;
    height: 528px;
}

.hero-logo img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Нижня плашка/текст BUTTON_TEXT_INDEX */
.hero-text-btn {
    position: absolute;
    top: 874px; /* Твій відступ зверху */
    left: 50%; /* Магія центрування */
    transform: translateX(-50%);
    width: 713px;
    height: 18px;
}

.hero-text-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ========================================== */
/* ОНОВЛЕНИЙ КОНТЕЙНЕР (ВСЯ ВИСОТА САЙТУ)    */
/* ========================================== */

.desktop-version {
    display: block;
    position: relative; /* Батьківський контейнер */
    width: 100%;
    max-width: 1920px;
    height: 4621px; /* Точна висота твого макета */
    margin: 0 auto;
    
    /* ✂️ МАГІЯ ПРОТИ ГОРИЗОНТАЛЬНОГО СКРОЛУ: */
    overflow-x: hidden; /* Залізобетонно ховає все, що вилазить зліва чи справа від макета */
}

/* ========================================== */
/* ЕКРАН 2: INDEX_FONE_2                      */
/* ========================================== */
.section-second-bg {
    position: absolute;
    top: 922px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    height: 1750px;
    background-image: url('../img/INDEX_FONE_2.webp');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 5;
}

/* ========================================== */
/* ЕКРАН 3: INDEX_FONE_3 (ВИПРАВЛЕНО)         */
/* ========================================== */
.section-third-bg {
    position: absolute;
    top: 3260px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    height: 1080px; 
    background-image: url('../img/INDEX_FONE_3.webp');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}



/* ========================================== */
/* ПІДВАЛ: PLATFORM_BOTTOM_DESK               */
/* ========================================== */
.footer-platform {
    position: absolute;
    top: 4340px; /* Чітко твій відступ зверху */
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 281px; /* Твоя висота */
    box-sizing: border-box;
    background-image: url('../img/PLATFORM_BOTTOM_DESK.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Логотип по центру */
.footer-logo {
    position: absolute;
    top: 47px;
    left: 50%;
    transform: translateX(-50%);
    width: 184px;
    height: 187px;
}
.footer-logo img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Основні посилання (Domov, O nás...) */
.footer-link {
    position: absolute;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 25px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.06em;
    color: #000000; /* Чистий чорний */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #F39200; /* Зміна кольору при наведенні */
}

/* Координати основних посилань */
.footer-domov    { left: 100px; top: 70px; }
.footer-onas     { left: 237px; top: 70px; }
.footer-kontakt  { left: 356px; top: 70px; }
.footer-recenze  { left: 509px; top: 70px; }

/* Юридичні посилання (Obchodní podmínky...) */
.footer-link-sub {
    position: absolute;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.06em;
    color: rgba(0, 0, 0, 0.5); /* Чорний з 50% прозорості */
    text-decoration: none;
    transition: color 0.3s ease, color 0.3s ease;
}

.footer-link-sub:hover {
    color: #F39200;
}

/* Координати юридичних посилань */
.footer-tac  { left: 100px; top: 117px; }
.footer-data { left: 348px; top: 117px; }

/* Напис "Máte dotaz?" справа */
.footer-question {
    position: absolute;
    right: 391px;
    top: 40px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: -0.06em;
    color: rgba(0, 0, 0, 0.5); /* 50% прозорості */
}

/* Копірайт знизу */
.footer-copyright {
    position: absolute;
    left: 100px;
    top: 216px;
    font-family: 'Atyp Display', sans-serif;
    font-size: 20px;
    line-height: 1;
}

.footer-copyright .brand {
    font-weight: 500; /* Medium */
    color: #000000;
    letter-spacing: 0;
}

.footer-copyright .rights {
    font-weight: 400; /* Regular */
    color: #000000;
    letter-spacing: 0;
}

/* ========================================== */
/* СТИЛІ ФОРМИ ЗВОРТОНОГО ЗВ'ЯЗКУ В ПІДВАЛІ   */
/* ========================================== */

.footer-tg-form {
    position: absolute;
    width: 417px;
    right: 100px;
    top: 0;
}

/* Спільні базові стилі (те, що в них ОДНАКОВЕ) */
.form-input-email, 
.form-input-text {
    position: absolute;
    width: 417px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.5);
    color: #000000;
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 20px;
    letter-spacing: -0.05em;
    
    outline: none;
    transition: border-color 0.3s ease;
}

.form-input-email:focus, 
.form-input-text:focus {
    border-color: #F39200;
}

.form-input-email::placeholder,
.form-input-text::placeholder {
    color: rgba(0, 0, 0, 0.3);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.05em;
}

/* 📬 КОНКРЕТНО ДЛЯ ПОЛЯ ПОШТИ (ПОВНИЙ КОНТРОЛЬ ВИСОТИ) */
.form-input-email {
    height: 45px;
    top: 70px;
    right: 0;
    border-radius: 20px 20px 20px 5px; 
    
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    
    /* ТРЮК ДЛЯ ПІДНЯТТЯ ТЕКСТУ ВИЩЕ: */
    padding-top: 0; 
    line-height: 10px; /* ТВОЯ НОВА КНОПКА КЕРУВАННЯ! */
    /* Чим МЕНШЕ це число (наприклад: 30px, 25px, 20px), тим ВИЩЕ стрибатиме текст. 
       Підбирай це значення в пікселях, поки текст не стане ідеально! */
}

/* 📝 КОНКРЕТНО ДЛЯ ТЕКСТОВОГО ПОЛЯ ЗАПИТАННЯ */
.form-input-text {
    height: 112px;
    top: 124px;
    right: 0;
    border-radius: 5px 20px 20px 20px;
    resize: none;
    
    /* Для textarea залишаємо класичний відступ, тут він працює добре */
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 40px !important; /* Щоб текст не залізав під кнопку */
    padding-right: 45px !important; 
    line-height: 20px;
}

/* ========================================== */
/* СТИЛІ КНОПКИ ВІДПРАВКИ ВСЕРЕДИНІ ФОРМИ     */
/* ========================================== */

/* Кнопка-стрілочка */
.form-submit-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    
    /* Координати: оскільки висота всього блоку форми рахується від верху підвалу,
       а textarea закінчується на позначці 124px + 112px = 236px, 
       то відступ кнопки знизу 10px і справа 15px вираховується так: */
    right: 15px; /* Твій відступ справа */
    top: 196px;  /* Точна координата, щоб кнопка сіла в куток textarea (124 + 112 - 30 - 10) */
    
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10; /* Щоб кнопка завжди була поверх тексту */
    transition: opacity 0.3s ease;
}

/* Ефект наведення на кнопку відправки */
.form-submit-btn:hover {
    opacity: 0.5; /* Втрачає 50% прозорості при наведенні */
}

.form-submit-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Оновлюємо стилі textarea, щоб текст не наповзав на кнопку */
.form-input-text {
    /* Додаємо додатковий відступ знизу 40px і справа 45px, щоб текст красиво обтікав кнопку */
    padding-bottom: 40px !important;
    padding-right: 45px !important; 
}

/* ========================================== */
/* КОНТЕНТ НА ДРУГОМУ ЕКРАНІ (TEXT BLOCK)      */
/* ========================================== */

/* Заголовок другого екрана */
.second-title {
    position: absolute;
    top: 110px; /* Локальний відступ зверху всередині екрана (1032 - 922) */
    left: 140px; /* Твій відступ зліва */
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 40px;
    line-height: 1;
    text-transform: uppercase; /* КАПС */
    letter-spacing: -0.06em;
    color: #ffffff; /* Чистий білий */
}

/* Текстова зона під заголовок */
.second-text-block {
    position: absolute;
    top: 173px; /* Локальний відступ зверху всередині екрана (1095 - 922) */
    left: 140px; /* Твій відступ зліва */
    
    width: 867px;
    height: 288px; /* Жорсткі розміри зони під макет */
    box-sizing: border-box;
}

/* Сам параграф тексту */
.second-text-block p {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 24px; /* Для тексту 40px — це забагато, ставимо комфортні 24px для читання, або якщо в макеті точно 40px, зміни на 40px */
    line-height: 1.4; /* Гарний міжрядковий інтервал для абзацу */
    letter-spacing: -0.06em;
    color: #ffffff;
}

/* Виділення назви бренду CheatMeat жирнішим шрифтом (як на скрині) */
.second-text-block .text-bold {
    font-weight: 600; /* Semibold */
}

/* ========================================== */
/* СТИЛІ ІНТЕРАКТИВНОГО СЛАЙДШОУ (ЕКРАН 2)    */
/* ========================================== */

.slideshow-container {
    position: absolute;
    top: 578px; /* Твій відступ зверху на другому екрані */
    left: 140px; /* Твій відступ зліва */
    width: 866px;
    height: 490px;
    box-sizing: border-box;
}

/* Базовий стан для кожного слайду */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Усі слайди за замовчуванням невидимі */
    transition: opacity 1s ease-in-out; /* Плавне перетікання фотографій */
    z-index: 1;
}

/* Активний слайд, який ми будемо вмикати скриптом */
.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px; /* Якщо потрібні гострі кути, залишаємо 0 */
}

/* Текст поверх фотографії */
.slide-text {
    position: absolute;
    left: 40px; /* Відступ зліва всередині фото */
    bottom: 30px; /* Відступ знизу всередині фото */
    z-index: 3;
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 40px;
    line-height: 100%; /* Міжрядковий інтервал 100% */
    letter-spacing: -0.06em;
    color: #ffffff;
    text-transform: uppercase; /* КАПС */
}

/* Контейнер для прямокутників-індикаторів */
.slideshow-dots {
    position: absolute;
    top: 515px; /* Ставимо рівно під фото (490px висота фото + 25px відступ) */
    left: -140px; /* Скидаємо відступ батька, щоб твої абсолютні координати left (403, 493...) рахувалися ідеально від краю екрану */
    width: 1920px;
    height: 10px;
    z-index: 10;
}

/* Маленькі прямокутники */
.dot {
    position: absolute;
    top: 0;
    width: 70px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 10px; /* Закруглення кутів 10 */
    opacity: 0.1; /* За замовчуванням 30% прозорості */
    transition: opacity 0.5s ease;
}

/* Активний прямокутник */
.dot.active {
    opacity: 1; /* 100% прозорості */
}

/* ========================================== */
/* СТИЛІ ВЕЛИКОЇ КАРУСЕЛІ ПРОДУКТІВ (ЕКРАН 2) */
/* ========================================== */

/* ========================================== */
/* ЕКРАН 2: ВЕЛИКА КАРУСЕЛЬ ПРОДУКТІВ          */
/* ========================================== */
.product-carousel-container {
    position: absolute;
    top: 1933px; 
    left: 0;
    width: 1920px;
    height: 906px;
    box-sizing: border-box;
    overflow: hidden; 
    
    /* 👑 ПІДНІМАЄМО КАРУСЕЛЬ НА САМИЙ ВЕРХ */
    z-index: 10; 
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Базовий стан для ВСІХ пачок (вони сховані за замовчуванням) */
.product-slide {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    width: 645px;
    height: 774px;
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.8s ease, 
                z-index 0.8s ease;
    z-index: 1;
}

.product-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 👑 ЦЕНТРАЛЬНА ПАЧКА (АКТИВНА) */
.product-slide.active {
    opacity: 1;
    transform: translateX(-50%) scale(1); /* Повний розмір */
    z-index: 10; /* Поверх усіх */
}

/* 👈 ЛІВА ПАЧКА (Розсунули далі ліворуч) */
.product-slide.prev {
    opacity: 0.2;
    /* Було -115%, ставимо -135%, щоб вона відлетіла лівіше */
    transform: translateX(-145%) scale(0.75); 
    z-index: 5;
}

/* 👉 ПРАВА ПАЧКА (Розсунули далі праворуч) */
.product-slide.next {
    opacity: 0.2;
    /* Було 15%, ставимо 35%, щоб вона відлетіла правіше */
    transform: translateX(45%) scale(0.75); 
    z-index: 5;
}

/* Про всяк випадок коригуємо дальні пачки, щоб вони не вилізали завчасно */
.product-slide.far-prev {
    opacity: 0;
    transform: translateX(-190%) scale(0.6);
    z-index: 1;
}
.product-slide.far-next {
    opacity: 0;
    transform: translateX(90%) scale(0.6);
    z-index: 1;
}

/* 🛠 СТИЛІ СТРІЛОЧОК */
.carousel-arrow {
    position: absolute;
    top: 388px; /* Локальний відступ від верху контейнера каруселі (3243 - 2855) */
    width: 80px;
    height: 80px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 20;
    transition: opacity 0.3s ease, transform 0.5s ease;
    opacity: 0; /* Спочатку сховані для анімації появи */
}

.carousel-arrow img {
    width: 100%;
    height: 100%;
    display: block;
}

.carousel-arrow:hover {
    opacity: 0.5 !important; /* Втрачає 50% прозорості при наведенні */
}

/* Точне розташування стрілочок за твоїми координатами */
.arrow-left {
    left: 400px;
}

.arrow-right {
    right: 400px;
}

/* КЛАСИ ДЛЯ АНІМАЦІЇ ПОЯВИ ПРИ СКРОЛІ */
.arrow-left.revealed {
    animation: slideInFromLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.arrow-right.revealed {
    animation: slideInFromRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Ефекти виїзду стрілочок зі своїх сторін */
@keyframes slideInFromLeft {
    0% { transform: translateX(-150px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromRight {
    0% { transform: translateX(150px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* ========================================== */
/* НЕЗАЛЕЖНІ ОСТАННІ ЕЛЕМЕНТИ (БЕЗПЕЧНІ)      */
/* ========================================== */

/* Великий заголовок над пачками (Глобальна координата) */
.carousel-main-title {
    position: absolute;
    top: 2550px; /* Твоя точна координата від самого верху сайту */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 80px;
    line-height: 100%;
    text-transform: uppercase;
    letter-spacing: -0.06em;
    color: #ffffff;
    z-index: 99; /* Лягає поверх усього як магія */
}

/* Велика кнопка магазину під пачками (Глобальна координата) */
.carousel-shop-btn {
    position: absolute;
    top: 3650px; /* Твоя точна координата з Figma від самого верху сайту */
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 90px;
    display: block;
    z-index: 100; /* Найвищий шар, лежить поверх третього фону */
}

.carousel-shop-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Ефекти ховеру для помаранчевої кнопки */
.carousel-shop-btn .img-hover {
    display: none !important;
}
.carousel-shop-btn:hover .img-normal {
    display: none !important;
}
.carousel-shop-btn:hover .img-hover {
    display: block !important;
}


































/* ========================================== */
/* СТИЛІ ГОЛОВНОГО МЕНЮ (ПЛАТФОРМИ)            */
/* ========================================== */

.main-menu-platform {
    position: fixed;
    top: -100px; 
    left: 50%;
    transform: translateX(-50%);
    
    width: 948px;
    height: 74px;
    z-index: 9999;
    
    background-image: url('../img/PLATFORM_MAINMENU_INDEX.svg');
    background-repeat: no-repeat;
    background-size: contain;
    
    transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1) !important; 
}

.main-menu-platform.slide-down {
    top: 30px; 
}

/* Спільні стилі для текстових посилань */
.menu-link {
    position: absolute;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 25px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    color: #000000; /* Твій чорний колір посилань */
    text-decoration: none;
    transition: color 0.3s ease; /* Плавна зміна КОЛЬОРУ замість opacity */
}

/* ЕФЕКТ НАВЕДЕННЯ ДЛЯ ТЕКСТУ: тепер стає помаранчевим */
.menu-link:hover {
    color: #F39200; 
}

/* Точні координати для кожної кнопки */
.link-domov { left: 40px; top: 23px; }
.link-onas { left: 177px; top: 23px; }
.link-kontakt { left: 296px; top: 23px; }
.link-recenze { left: 449px; top: 23px; }

/* --- ЛОГІКА ДЛЯ КНОПОК-КАРТИНОК З ХОВЕРОМ --- */

/* Базово ховерні картинки заховані */
.menu-basket-btn .img-hover,
.menu-shop-btn .img-hover {
    display: none !important;
}

/* При наведенні ховаємо звичайну картинку */
.menu-basket-btn:hover .img-normal,
.menu-shop-btn:hover .img-normal {
    display: none !important;
}

/* При наведенні показуємо ховерну картинку */
.menu-basket-btn:hover .img-hover,
.menu-shop-btn:hover .img-hover {
    display: block !important;
}

/* Кнопка-іконка кошика */
.menu-basket-btn {
    position: absolute;
    left: 662px;
    top: 13px;
    width: 48px;
    height: 48px;
    display: block;
}
.menu-basket-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Помаранчевий кружечок кошика */
.menu-basket-badge {
    position: absolute;
    left: 695px;
    top: 13px;
    width: 14px;
    height: 14px;
    background-color: #F39200;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Щоб кружечок не заважав наводити мишку на кошик */
}
.menu-basket-badge span {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 8px;
    color: #000000;
    line-height: 1;
    text-align: center;
}

/* Кнопка Магазину (SHOP) */
.menu-shop-btn {
    position: absolute;
    right: 13px;
    top: 13px;
    width: 215px;
    height: 48px;
    display: block;
}
.menu-shop-btn img {
    width: 100%;
    height: 100%;
    display: block;
}


/* ========================================== */
/* СТИЛІ ДЛЯ ПРЕДЗАВАНТАЖЕННЯ (PRELOADER)     */
/* ========================================== */

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* Вище ніж меню, перекриває ВСЕ */
    background-color: #ffffff; /* Твій базовий колір */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease; /* Плавне зникнення */
}

.preloader img {
    width: 1920px;
    height: 922px;
    object-fit: cover; /* Щоб картинка прелоадера ідеально сіла на екран */
}


























/* ========================================== */
/* АВТОНОМНІ СТИЛІ ДЛЯ СТОРІНКИ КОНТАКТИ    */
/* ========================================== */

/* Контейнер всієї сторінки */
.desktop-version.about-page {
    background-color: #ffffff; 
    height: 2322px; 
    position: relative;
    
    /* ✂️ ФІНАЛЬНИЙ УДАР ПО ДРУГОМУ СКРОЛУ: */
    overflow: hidden; /* Забороняє створювати будь-які внутрішні повзунки, знищує баг повністю! */
}

/* 🖼 ШАР 1: Великий фоновий малюнок сторінки (Рівень 1) */
.about-main-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img_about/FONE_ABOUT.webp');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1; /* Самий нижній рівень */
}

/* 📦 ШАР 2: Пакування в правому нижньому кутку (Рівень 2) */
.about-bg-packing {
    position: absolute;
    bottom: 0;   
    right: 0;    
    width: 901px;
    height: 955px;
    z-index: 2;  /* Стоїть НАД головним фоном, але ПІД футером */
    pointer-events: none; 
}

.about-bg-packing img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Платформа меню для сторінки про нас */
.about-menu {
    position: fixed;
    top: -100px; 
    left: 50%;
    transform: translateX(-50%);
    width: 948px;
    height: 74px;
    z-index: 9999;
    background-image: url('../img/PLATFORM_MAINMENU_ABOUT.svg') !important;
    background-repeat: no-repeat;
    background-size: contain;
    transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1) !important; 
}

.about-menu.slide-down {
    top: 30px; 
}

/* Загальний стиль текстових посилань у меню про нас */
.menu-link-about {
    position: absolute;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 25px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    color: #ffffff !important; /* Чистий білий текст */
    text-decoration: none;
    transition: color 0.3s ease;
}

.menu-link-about:hover {
    color: #F39200 !important; /* Помаранчевий ховер */
}

/* Точні координати кожної текстової кнопки */
.link-domov-about { left: 40px; top: 23px; }
.link-onas-about { left: 177px; top: 23px; }
.link-kontakt-about { left: 296px; top: 23px; }
.link-recenze-about { left: 449px; top: 23px; }

/* Ховер логіка для картинок-кнопок */
.menu-basket-btn-about .img-hover,
.menu-shop-btn-about .img-hover {
    display: none !important;
}
.menu-basket-btn-about:hover .img-normal,
.menu-shop-btn-about:hover .img-normal {
    display: none !important;
}
.menu-basket-btn-about:hover .img-hover,
.menu-shop-btn-about:hover .img-hover {
    display: block !important;
}

/* Кнопка кошика */
.menu-basket-btn-about {
    position: absolute;
    left: 662px;
    top: 13px;
    width: 48px;
    height: 48px;
    display: block;
}
.menu-basket-btn-about img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Помаранчевий кружечок кошика */
.menu-basket-badge-about {
    position: absolute;
    left: 695px;
    top: 13px;
    width: 14px;
    height: 14px;
    background-color: #F39200;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
}
.menu-basket-badge-about span {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 8px;
    color: #000000;
    line-height: 1;
    text-align: center;
}

/* Кнопка магазину (SHOP) */
.menu-shop-btn-about {
    position: absolute;
    right: 13px;
    top: 13px;
    width: 215px;
    height: 48px;
    display: block;
}
.menu-shop-btn-about img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 👑 ШАР 3: Підвал сайту (Рівень 10) */
.about-page .footer-platform {
    position: absolute;
    top: 2041px; 
    z-index: 10; /* Перекриває пакуночки зверху */
}

/* ========================================== */
/* ТРИ ВЕЛИКІ КНОПКИ-КАРТКИ (ABOUT CONTENT)  */
/* ========================================== */

.about-main-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Лежать над фоном, але під меню */
}

/* Базовий стиль для всіх трьох карток */
.about-card-btn {
    position: absolute;
    width: 400px;
    height: 600px;
    display: block;
    opacity: 0; /* Спочатку приховані для анімації */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.4s ease;
}

.about-card-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 🎯 Ефект при наведенні: картки трішки меншають */
.about-card-btn:hover {
    transform: scale(0.96) !important; /* Ефект легкого вдавлювання */
}

/* Точні координати кожної кнопки з Figma */
.card-mail {
    top: 200px;
    left: 290px;
}

.card-inst {
    top: 200px;
    left: 760px;
}

.card-fb {
    top: 200px;
    right: 290px; /* Притиснута справа на 290px */
}

/* ========================================== */
/* КЛАСИ ДЛЯ АНІМАЦІЇ ПОЯВИ (ОДНАКОВА М'ЯКІСТЬ) */
/* ========================================== */

/* 1. Ліва картка (Mail) — проявляється першою */
.card-mail.start-anim {
    animation: cardPureFadeIn 1s ease forwards;
    animation-delay: 0s !important; /* Одразу після прелоадера */
}

/* 2. Центральна картка (Inst) — проявляється другою */
.card-inst.start-anim {
    animation: cardPureFadeIn 1s ease forwards;
    animation-delay: 0.2s !important; /* Легка затримка для ритму */
}

/* 3. Права картка (Fb) — проявляється третьою */
.card-fb.start-anim {
    animation: cardPureFadeIn 1s ease forwards;
    animation-delay: 0.4s !important; /* З'являється фінальною */
}

/* 👑 ЄДИНИЙ ІДЕАЛЬНИЙ КЕЙФРЕЙМ ДЛЯ ВСІХ КАРТОК
   Він змінює ТІЛЬКИ прозорість, залишаючи transform на 100% вільним для ховеру! */
@keyframes cardPureFadeIn {
    0% { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}

/* ========================================== */
/* ТЕКСТОВІ БЛОКИ НА СТОРІНЦІ ABOUT.HTML      */
/* ========================================== */

/* 1. Великий заголовок (Medium, 60px) */
.about-text-heading {
    position: absolute;
    top: 1755px; /* Твій відступ зверху */
    left: 100px; /* Твій відступ зліва */
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600; /* Medium */
    font-size: 40px;
    line-height: 100%; /* Міжрядковий інтервал 100% */
    letter-spacing: -0.05em;
    color: #000000; /* Чорний колір */
    text-transform: none; /* Прописними, не капс */
    z-index: 6;
}

/* 2. Опис нижче (Regular, 40px) */
.about-text-description {
    position: absolute;
    top: 1905px; /* Твій відступ зверху */
    left: 100px; /* Твій відступ зліва */
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 30px;
    line-height: 100%; /* Міжрядковий інтервал 100% */
    letter-spacing: -0.05em;
    color: #000000; /* Чорний колір */
    text-transform: none; /* Прописними, не капс */
    z-index: 6;
}




























/* ========================================== */
/* АВТОНОМНІ СТИЛІ СТОРІНКИ KATALOG.HTML      */
/* ========================================== */

/* Контейнер сторінки каталогу */
.desktop-version.catalog-page {
    background-color: #ffffff; /* Твоє біле чисте тло сторінки */
    height: 2462px; /* Твоя точна висота з Figma */
    position: relative;
    overflow: hidden; /* Наш фірмовий захист від багів та подвійних скролів */
}

/* Платформа меню для сторінки каталогу */
.catalog-menu {
    position: fixed;
    top: -100px; 
    left: 50%;
    transform: translateX(-50%);
    width: 948px;
    height: 74px;
    z-index: 9999;
    background-image: url('../img/PLATFORM_MAINMENU_ABOUT.svg') !important; /* Наша преміальна чорна плашка */
    background-repeat: no-repeat;
    background-size: contain;
    transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1) !important; 
}

.catalog-menu.slide-down {
    top: 30px; 
}

/* Текстові посилання меню каталогу */
.menu-link-catalog {
    position: absolute;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 25px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    color: #ffffff !important; /* Контрастний білий на чорному */
    text-decoration: none;
    transition: color 0.3s ease;
}

.menu-link-catalog:hover {
    color: #F39200 !important; /* Фірмовий помаранчевый ховер */
}

/* Координати текстових кнопок */
.link-domov-catalog { left: 40px; top: 23px; }
.link-onas-catalog { left: 177px; top: 23px; }
.link-kontakt-catalog { left: 296px; top: 23px; }
.link-recenze-catalog { left: 449px; top: 23px; }

/* Ховер логіка для картинок-кнопок каталогу */
.menu-basket-btn-catalog .img-hover {
    display: none !important;
}
.menu-basket-btn-catalog:hover .img-normal {
    display: none !important;
}
.menu-basket-btn-catalog:hover .img-hover {
    display: block !important;
}

/* 🛒 НОВІ КООРДИНАТИ КОШИКА (Ставимо в самий правий куток плашки!) */
.menu-basket-btn-catalog {
    position: absolute;
    right: 13px; /* Замість left: 662px тулимо до правого краю, де була кнопка магазину */
    top: 13px;
    width: 48px;
    height: 48px;
    display: block;
}
.menu-basket-btn-catalog img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 🎯 НОВІ КООРДИНАТИ КРУЖЕЧКА ЦИФРИ КОШИКА */
.menu-basket-badge-catalog {
    position: absolute;
    right: 13px; /* Вирівнюємо по правому краю над кнопкою */
    top: 13px;
    width: 14px;
    height: 14px;
    background-color: #F39200;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
}
.menu-basket-badge-catalog span {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 8px;
    color: #000000;
    line-height: 1;
    text-align: center;
}

/* Тимчасова підкладка під підвал для висоти 2462px */
.catalog-page .footer-platform {
    position: absolute;
    top: 2181px; /* 2462 - 281 (висота підвалу) */
    z-index: 10;
}

/* ========================================== */
/* СІТКА ТОВАРІВ ТА ФІЛЬТРИ (KATALOG.HTML)    */
/* ========================================== */

.catalog-main-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

/* --- БІЧНЕ МЕНЮ КАТЕГОРІЙ --- */
.catalog-filter-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    width: 450px;
    height: 100%;
}

/* Заголовок KATEGORIE (Капс, Medium, 40px) */
.filter-heading {
    position: absolute;
    left: 100px;
    top: 230px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: #000000;
    text-transform: uppercase;
}

/* Стиль інтерактивної кнопки-контейнера */
.filter-btn {
    position: absolute;
    left: 100px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: flex-start; /* Вирівнювання по верхній грані тексту */
    outline: none;
    opacity: 0.5; /* Базова прозорість 50% */
    transition: opacity 0.3s ease;
}

/* Координати кнопок категорій */
.filter-btn[data-category="chicken"] { top: 303px; }
.filter-btn[data-category="pork"]    { top: 414px; }
.filter-btn[data-category="sticks"]  { top: 525px; }

/* Активна категорія стає повністю видимою */
.filter-btn.active {
    opacity: 1 !important;
}

/* Ефект наведення: втрачає прозорість до 20% (тобто opacity: 0.2) */
.filter-btn:hover {
    opacity: 0.2;
}

/* Галочка MARK_KATALOG */
.filter-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px; /* Відстань зліва від тексту 10px */
    display: block;
    object-fit: contain;
}

/* Текст всередині кнопок категорій (Medium, 30px) */
.filter-text {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: #000000;
    text-transform: none;
    text-align: left;
    display: block;
}

/* --- СТИЛІ КАРТОК ТОВАРІВ --- */
.product-card {
    position: absolute;
    width: 403px;
    height: 776px;
    display: block;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    /* 🚀 МАГІЯ: Плавне переміщення та зникнення при сортуванні */
    transition: left 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                top 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.4s ease, 
                visibility 0.4s;
    visibility: visible;
}

/* Схована картка повністю зникає з клікабельності */
.product-card.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

/* Особливості для картки "BRZY" (вона без ховерів) */
.item-brzy {
    height: 727px;
    cursor: default;
}
.item-brzy img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Внутрішній контент звичайних карток */
.product-card .plate-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.product-card .product-pack { 
    position: absolute; bottom: 0; left: 0; width: 403px; height: 729px; 
    object-fit: contain; z-index: 2; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); transform-origin: bottom center; 
}
.product-card:not(.item-brzy):hover .product-pack { transform: scale(1.05) rotate(3deg); }
.product-card .product-title { position: absolute; top: 590px; left: 50px; font-family: 'Atyp Display', sans-serif; font-weight: 500; font-size: 35px; line-height: 100%; letter-spacing: -0.03em; color: #000000; z-index: 3; }
.product-card .product-desc { position: absolute; top: 636px; left: 50px; font-family: 'Atyp Display', sans-serif; font-weight: 400; font-size: 33px; line-height: 100%; letter-spacing: -0.03em; color: #000000; z-index: 3; }

/* --- БАЗОВІ СТАРТОВІ КООРДИНАТИ (УСІ КАРТКИ НА МІСЦЯХ) --- */
.item-chicken { left: 531px; top: 425px; }
.item-pork-steak { left: 974px; top: 425px; }
.item-soy-honey { left: 1417px; top: 425px; }
.item-sticks-fuet { left: 531px; top: 1266px; }
.item-sticks-original { left: 974px; top: 1266px; }
.item-brzy { left: 1417px; top: 1315px; } /* Твої координати зліва 1417, зверху 1315 */

/* ========================================== */
/* НАВІГАЦІЙНИЙ МАРШРУТ (BREADCRUMBS)         */
/* ========================================== */

.catalog-breadcrumbs {
    position: absolute;
    left: 531px; /* Твій точний відступ зліва */
    top: 230px;  /* Твій точний відступ зверху */
    z-index: 10;
    display: block;
    white-space: nowrap;
}

/* Спільний стиль для текстових елементів маршруту */
.catalog-breadcrumbs .crumb-link,
.catalog-breadcrumbs .crumb-btn,
.catalog-breadcrumbs .crumb-dynamic-text {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -0.05em;
    text-transform: uppercase; /* Тільки КАПС */
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
}

/* Кнопка HOME: чорна, 50% прозорості */
#breadcrumb-home {
    color: #000000;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
#breadcrumb-home:hover {
    opacity: 1; /* Легкий ховер для зручності */
}

/* Стрілочка VECTOR_POSITION */
.catalog-breadcrumbs .crumb-arrow {
    width: 6px;
    height: 8px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px; /* Відстань зліва і справа від текстів по 20px */
    position: relative;
    top: 2px; /* Ювелірне центрування по висоті шрифту */
}

/* Початковий стан "Sušené maso": помаранчевий колір #F39200, 50% прозорості */
#breadcrumb-main-cat.active-initial {
    color: #F39200 !important;
    opacity: 0.5 !important;
    cursor: default;
}

/* Стан "Sušené maso", коли обрано фільтр: стає чорним, 50% прозорості та клікабельним */
#breadcrumb-main-cat.clickable {
    color: #000000 !important;
    opacity: 0.5 !important;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
#breadcrumb-main-cat.clickable:hover {
    opacity: 1 !important; /* Натяк, що на неї можна натиснути і скинути все */
}

/* --- Кольори для динамічних підкатегорій (50% прозорості за умовчанням) --- */

/* Курятина (kuřecí): помаранчева */
.catalog-breadcrumbs .color-chicken {
    color: #F39200;
    opacity: 0.5;
}

/* Свинина та стіки (vepřové / Meat sticks): глибокий червоний */
.catalog-breadcrumbs .color-pork,
.catalog-breadcrumbs .color-sticks {
    color: #B32733;
    opacity: 0.5;
}

/* ========================================== */
/* ЛІЧИЛЬНИК ТОВАРІВ (ПРАВА СТОРОНА)          */
/* ========================================== */

.product-counter {
    position: absolute;
    right: 100px; /* Відстань справа 100px */
    top: 230px;   /* Відстань зверху 230px — ідеальний синхрон з крихтами та KATEGORIE */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.5; /* 50% прозорості */
    text-transform: uppercase; /* Тільки КАПС */
    text-align: right; /* Вирівнювання по правій стороні */
    z-index: 10;
    white-space: nowrap;
}

/* ========================================== */
/* ВЕЛИКИЙ ДИНАМІЧНИЙ ЗАГОЛОВОК КАТАЛОГУ      */
/* ========================================== */

.catalog-page-title {
    position: absolute;
    left: 531px;  /* Твій точний відступ зліва */
    top: 230px;   /* Твій точний відступ зверху */
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 80px;
    line-height: 100%; /* Міжрядковий інтервал 100% */
    letter-spacing: -0.05em;
    color: #000000; /* Чорний колір, 100% прозорість */
    text-transform: uppercase; /* Тільки КАПС */
    z-index: 10;
    white-space: nowrap;
}

/* ========================================== */
/* БЛОК НАЙПРОДАВАНІШІ (BEST SELLERS)         */
/* ========================================== */

/* Заголовок блоку (Застилізуємо аналогічно до KATEGORIE, але без абсолюту, бо він всередині контейнера) */
.best-sellers-heading {
    position: absolute;
    left: 100px;
    top: 710px; /* Зручний відступ над першою маленькою карткою */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: #000000;
    text-transform: uppercase;
}

/* Базовий стиль для інтерактивної міні-картки */
.best-card {
    position: absolute;
    left: 100px; /* Твій залізобетонний відступ зліва */
    width: 355px;
    height: 186px;
    display: block;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 🎯 ТВОЯ ПРАВКА: При наведенні картка трішки меншає */
.best-card:hover {
    transform: scale(0.96);
}

/* Картинка фону-підкладки на всю ширину і висоту */
.best-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Внутрішній текстовий блок поверх картинки */
.best-card-text {
    position: absolute;
    left: 152px; /* Відступ всередині блоку зліва */
    top: 36px;  /* Відступ всередині блоку зверху */
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 20px;
    line-height: 100%; /* Міжрядковий інтервал 100% */
    letter-spacing: -0.05em;
    color: #000000; /* Чорний колір, 100% прозорість */
    text-transform: none; /* Прописними, не капс */
    text-align: left;
}

/* 📍 ТОЧНІ ВІДСТАНІ ЗВЕРХУ ДЛЯ КОЖНОЇ КАРТКИ */
.b-card-chicken { top: 783px; }
.b-card-pork-steak { top: 994px; }
.b-card-pork-soy { top: 1205px; }

/* ========================================== */
/* РОЗДІЛЬНІ ЛІНІЇ В МЕНЮ КАТЕГОРІЙ           */
/* ========================================== */

.filter-line {
    position: absolute;
    left: 100px;         /* Твій відступ зліва */
    width: 320px;        /* Твоя довжина лінії */
    height: 0.5px;       /* Твоя товщина лінії */
    background-color: rgba(0, 0, 0, 0.5); /* Чорний колір, 50% прозорості */
    z-index: 4;
}

/* 📍 ТОЧНІ ВІДСТАНІ ЗВЕРХУ ДЛЯ КОЖНОЇ ЛІНІЇ */
.filter-line.line-1 { top: 384px; }
.filter-line.line-2 { top: 495px; }
.filter-line.line-3 { top: 606px; }





























/* ========================================== */
/* СТИЛІ СТОРІНКИ ОКРЕМОГО ТОВАРУ (Argentinské Jerky)     */
/* ========================================== */

/* Статичні посилання категорій на сторінці продукту */
.filter-btn-static {
    position: absolute;
    left: 100px;
    display: flex;
    align-items: flex-start;
    text-decoration: none;
    opacity: 0.3; /* Базова прозорість неактивних 30% */
    transition: opacity 0.3s ease;
}

/* Координати (відповідно до твого макету каталогу) */
.filter-btn-static[href*="katalog.html"]:nth-of-type(1),
.filter-btn-static.active { top: 303px; }
.filter-btn-static:nth-of-type(2) { top: 414px; }
.filter-btn-static:nth-of-type(3) { top: 525px; }

/* Активна категорія світиться на всі 100% */
.filter-btn-static.active {
    opacity: 1 !important;
    cursor: default; /* Натяк, що ми вже тут */
}

/* Ховер для неактивних категорій */
.filter-btn-static:not(.active):hover {
    opacity: 0.2; /* Твоя умова згасання до 20% */
}

/* --- Оновлення хлібних крихт для сторінки продукту --- */

/* --- Оновлення хлібних крихт для сторінки продукту --- */

/* Кнопка HOME: чорна, 50% прозорості (за ТЗ) */
#breadcrumb-home.crumb-link {
    color: #000000 !important;
    opacity: 0.5 !important;
    transition: opacity 0.3s ease;
}
#breadcrumb-home.crumb-link:hover {
    opacity: 1 !important;
}

/* Посилання "Sušené maso": чорне, 50% */
.catalog-breadcrumbs .crumb-link-back {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #000000;
    opacity: 0.5;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.3s ease;
}
.catalog-breadcrumbs .crumb-link-back:hover {
    opacity: 1;
}

/* 🎯 НОВИЙ СТИЛЬ ДЛЯ КЛІКАБЕЛЬНОГО "kuřecí": чорний, 50% прозорості */
.catalog-breadcrumbs .crumb-link-back-sub {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #000000;
    opacity: 0.5;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.3s ease;
}
.catalog-breadcrumbs .crumb-link-back-sub:hover {
    opacity: 1; /* Ефект підсвічування при наведенні */
}

/* --- 🛑 БЛОКУВАННЯ ПОТОЧНОГО ТОВАРУ В БЛОЦІ TOP --- */
.best-card.current-product-disabled {
    opacity: 0.3 !important; /* Твоя умова: 30% прозорості за замовчуванням */
    cursor: default !important;
    pointer-events: none !important; /* Повністю вбиваємо клікабельність та ховери! */
}

/* ========================================== */
/* НАЧИНКА КАРТКИ ТОВАРУ (JERKY_CHICKEN)      */
/* ========================================== */

.single-product-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none; /* Контейнер не перехоплює кліки */
}

/* Велика біла плашка-контейнер */
.product-single-plate {
    position: absolute;
    left: 519px; /* Твій відступ зліва */
    top: 285px;  /* Твій відступ зверху */
    width: 1301px;
    height: 780px;
}

.plate-single-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* --- 📸 КОНТЕНТ СЛАЙДЕРА ФОТОГРАФІЙ --- */
.product-gallery-slider {
    position: absolute;
    left: 38px;  /* Відступ зліва всередині PLATE */
    top: 85px;   /* Відступ зверху всередині PLATE */
    width: 447px;
    height: 657px;
    z-index: 2;
}

/* Контейнер для самих фотографій */
.slider-photos-holder {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Активне фото, яке показуємо */
.slide-img.active {
    opacity: 1;
    visibility: visible;
}

/* Інтерактивні стрілочки гортання */
.slider-arrow {
    position: absolute;
    top: 304px; /* Твій відступ зверху всередині фотографії */
    width: auto;
    height: auto;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 3;
    opacity: 1; /* Початкова 100% яскравість */
    transition: opacity 0.3s ease;
    outline: none;
}

.slider-arrow img {
    display: block;
}

/* 🎯 ТВОЯ ПРАВКА: при наведенні втрачають 50% прозорості (стають opacity: 0.5) */
.slider-arrow:hover {
    opacity: 0.5;
}

.slider-arrow.btn-left { left: 20px; }  /* Зліва 20px */
.slider-arrow.btn-right { right: 20px; } /* Справа 20px */


/* --- 📝 ТЕКСТОВІ БЛОКИ ВСЕРЕДИНІ PLATE --- */

/* 4. Заголовок (Medium, 50px) */
.single-product-title {
    position: absolute;
    left: 585px;
    top: 55px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 50px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: #000000;
    text-transform: none;
    z-index: 2;
}

/* 5. Перший опис (Regular + Medium, 30px, 70% прозорості) */
.single-product-desc-1 {
    position: absolute;
    left: 585px;
    top: 347px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0em;
    color: rgba(0, 0, 0, 0.7); /* Чорний колір, 70% прозорості */
    text-transform: none;
    z-index: 2;
}

/* Окремі слова робимо медіум, але зберігаємо загальну прозорість блоку */
.single-product-desc-1 .font-medium {
    font-weight: 500;
}

/* 6. Другий опис (Regular, 25px, 70% прозорості) */
.single-product-desc-2 {
    position: absolute;
    left: 585px;
    top: 527px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 25px;
    line-height: 100%;
    letter-spacing: 0em;
    color: rgba(0, 0, 0, 0.7); /* Чорний колір, 70% прозорості */
    text-transform: none;
    z-index: 2;
}

.product-single-plate {
    pointer-events: auto;
}

.slider-arrow {
    pointer-events: auto;
}

/* ========================================== */
/* СТИЛІ КАЛЬКУЛЯТОРА ЦІНИ, ВАГИ ТА КІЛЬКОСТІ */
/* ========================================== */

/* 1. Блок ЦІНИ (Medium, 50px, Капс) */
.single-price-text {
    position: absolute;
    left: 585px;
    top: 265px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: #000000;
    text-transform: uppercase;
    text-align: left;
    z-index: 10;
}

/* Спільний клас для всіх стрілочок калькулятора */
.calc-arrow {
    position: absolute;
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease;
    outline: none;
}
.calc-arrow img { width: 100%; height: 100%; display: block; }

/* Стан блокування стрілочок (50% прозорості) */
.calc-arrow.disabled {
    opacity: 0.5 !important;
    cursor: default !important;
    pointer-events: none;
}

/* 2 & 3. ЕЛЕМЕНТИ ВАГИ */
.btn-w-left  { left: 892px; top: 267px; }
.btn-w-right { left: 1062px; top: 267px; }

.single-weight-text {
    position: absolute;
    left: 952px;
    top: 275px;
    width: 100px; /* Задаємо ширину для ідеального центрування */
    text-align: center;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.5; /* 50% прозорості */
    z-index: 10;
}

/* 4 & 5. ЕЛЕМЕНТИ КІЛЬКОСТІ (Позиціонування знизу!) */
.btn-q-left  { left: 745px; bottom: 38px; }
.btn-q-right { left: 851px; bottom: 38px; }

.single-quantity-text {
    position: absolute;
    left: 810px;
    bottom: 52px;
    width: 25px;
    text-align: center;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.5; /* 50% прозорості */
    z-index: 10;
}

/* 6. ТЕКСТ ПІДСКАЗКИ B2B */
.b2b-hint-msg {
    position: absolute;
    left: 606px;
    bottom: 52px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 15px;
    line-height: 100%;
    letter-spacing: -0.03em;
    color: #000000;
    text-align: left;
    text-transform: none;
    z-index: 10;
    opacity: 0; /* Прихована на старті */
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Клас активації підказки */
.b2b-hint-msg.show {
    opacity: 1;
    visibility: visible;
}

/* ========================================== */
/* СТИЛІ ДЛЯ ПЕРЕМИКАЧА РЕЖИМІВ B2C / B2B    */
/* ========================================== */

.mode-switch-btn {
    position: absolute;
    width: 140px;
    height: 58px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 99; /* Лягають поверх усього сайту */
    outline: none;
}
.mode-switch-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 🎯 Точні координати зліва та зверху від краю екрану ПК */
#btn-mode-b2c { left: 1520px; top: 254px; }
#btn-mode-b2b { left: 1680px; top: 254px; }

/* Текст підказки про DPH (12%) */
.dph-tax-hint {
    position: absolute;
    left: 587px;
    bottom: 435px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 15px;
    line-height: 100%;
    letter-spacing: -0.03em;
    color: #000000;
    text-align: left;
    text-transform: none;
    z-index: 10;
    
    /* Базово приховано (режим B2C) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Активація тексту DPH у режимі B2B */
.dph-tax-hint.show {
    opacity: 1;
    visibility: visible;
}

/* ========================================== */
/* КНОПКА "ДОДАТИ В КОШИК" (jerky_chicken.html) */
/* ========================================== */

.add-to-basket-btn {
    position: absolute;
    left: 1450px;
    top: 977px;
    width: 332px;
    height: 50px;

    display: block;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    z-index: 6;
}

.add-to-basket-btn:hover {
    opacity: 0.5;
}

.add-to-basket-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ========================================== */
/* НОВИЙ ВЕЛИКИЙ БЛОК ОПИСУ (POPIS SECTION)   */
/* ========================================== */

/* Контейнер всього нижнього опису */
.product-detailed-popis-section {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
}

/* 2. Заголовок POPIS (Капс, Medium, 40px) */
.popis-main-heading {
    position: absolute;
    left: 557px;  /* Твій точний відступ зліва */
    top: 1130px; /* Твій точний відступ зверху */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.06em;
    color: #000000;
    text-transform: uppercase; /* Тільки КАПС */
    z-index: 12;
}

/* 1. Роздільна лінія LINE_POPIS */
.popis-divider-line {
    position: absolute;
    left: 557px;  /* Твій відступ зліва */
    top: 1220px; /* Твій відступ зверху */
    width: 1270px;
    height: 7px;
    z-index: 12;
}

/* 3. Головний текст опису (Regular, 30px, 70% прозорості) */
.popis-content-text {
    position: absolute;
    left: 557px;  /* Твій відступ зліва */
    top: 1250px; /* Твій відступ зверху */
    width: 1270px; /* Обмежуємо по ширині лінії, щоб верстка не роз'їхалась */
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 25px;
    line-height: 125%; /* Трохи додамо повітря між лініями, щоб читалося дорого */
    letter-spacing: 0em; /* Леттер спейсінг 0 за ТЗ */
    color: rgba(0, 0, 0, 0.7); /* Чорний колір, 70% прозорості */
    text-transform: none; /* Зберігаємо нормальний регістр, як на макеті */
    z-index: 12;
}

/* Абзаци всередині блоку */
.popis-content-text p {
    margin-bottom: 40px; /* Красиві відступи між абзацами */
}

/* Окремі слова з накресленням Medium */
.popis-content-text .font-medium {
    font-weight: 500;
    color: #000000; /* Вони стають чіткими та насиченими, як на макеті */
}

/* Спеціальний блок виробника в самому кінці */
.popis-manufacturer-block {
    line-height: 110%; /* Компактний блок для контактів */
}


















/* ========================================== */
/* КОРЕКЦІЯ ВИСОТИ ОПИСУ ДЛЯ СТІКІВ           */
/* ========================================== */

/* Піднімаємо на 30px вгору (з 527px до 497px) суворо на цьому екрані */
.single-product-desc-2.desc-sticks-short {
    top: 497px !important;
}














/* ========================================== */
/* НАДІЙНІ СТИЛІ СТОРІНКИ КОШИКА (БЕЗ СКРОЛЛУ)*/
/* ========================================== */

.basket-page-global {
    position: relative;
    width: 1920px;
    height: 3220px; /* Фіксована початкова висота за ТЗ */
    background-color: #FFFFFF;
    margin: 0 auto; /* Центруємо сторінку по центру екрану */
    
    /* 🛡️ ГАРАНТІЯ: Повністю вбиваємо будь-який горизонтальний скролл! */
    overflow-x: hidden; 
}

/* Контейнер-обгортка контенту */
.basket-dynamic-content-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

/* 🔝 Зона товарів */
.basket-top-products-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

/* 🧲 Зона анкети та оплати */
.basket-bottom-checkout-area {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0; /* Розтягуємо контейнер на всю висоту сторінки, щоб діти могли орієнтуватись через bottom */
    width: 100%;

    /* 🛡️ Контейнер невидимий і розтягнутий на всю сторінку (включно з ділянкою
       товару вище) — без цього він перехоплює кліки по кнопках "Odebrat" та
       селектору кількості, бо лежить над ними в стеку. Клікабельність
       повертаємо точково — лише полям вводу анкети. */
    pointer-events: none;
}

/* ========================
   ЗАГОЛОВКИ АНКЕТИ
   — орієнтуються від НИЗУ сторінки (не зсуваються, коли basket-main-plate
     розтягується згори і збільшує висоту сторінки)
   ======================== */
.checkout-title {
    position: absolute;
    bottom: 2385px;
    margin: 0;

    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 35px;
    line-height: 100%;
    letter-spacing: -0.06em;
    color: #000000;
    text-transform: none;
}

.checkout-title-left { left: 180px; }
.checkout-title-right { right: 180px; }

/* ========================
   ПОЛЯ АНКЕТИ (ВВОДУ ДАНИХ)
   ======================== */
.checkout-input {
    position: absolute;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 30px;
    outline: none;
    pointer-events: auto; /* Повертаємо клікабельність — батько вимкнув її globally */

    padding: 0px 20px 8px 30px; /* Невеликий нижній відступ піднімає текст ближче до центру */

    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: -0.06em;
    color: #000000;
    text-transform: none;
}

.checkout-input::placeholder {
    color: rgba(0, 0, 0, 0.3);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: -0.06em;
    text-transform: none;
}

.checkout-input.input-psc,
.checkout-input.input-psc::placeholder,
.checkout-input.input-ic,
.checkout-input.input-ic::placeholder,
.checkout-input.input-dic,
.checkout-input.input-dic::placeholder {
    text-transform: uppercase;
}

.input-jmeno    { left: 150px; bottom: 2245px; width: 706px; height: 81px; }
.input-prijmeni { left: 150px; bottom: 2134px; width: 706px; height: 81px; }
.input-email    { left: 150px; bottom: 2023px; width: 706px; height: 81px; }
.input-telefon  { left: 150px; bottom: 1912px; width: 706px; height: 81px; }
.input-ulice    { left: 150px; bottom: 1801px; width: 706px; height: 81px; }
.input-mesto    { left: 150px; bottom: 1690px; width: 454px; height: 81px; }
.input-psc      { left: 634px; bottom: 1690px; width: 222px; height: 81px; }

/* Права колонка — Fakturační údaje */
.input-nazev-spolecnosti { right: 150px; bottom: 2245px; width: 706px; height: 81px; }
.input-ulice-spolecnosti { right: 150px; bottom: 2134px; width: 706px; height: 81px; }
.input-mesto-spolecnosti { right: 150px; bottom: 2023px; width: 706px; height: 81px; }
.input-psc-spolecnosti   { right: 150px; bottom: 1912px; width: 706px; height: 81px; }
.input-ic                { right: 518px; bottom: 1801px; width: 338px; height: 81px; }
.input-dic               { right: 150px; bottom: 1801px; width: 338px; height: 81px; }

/* ========================
   ГОЛОВНА ПЛАШКА КОШИКА
   — 1720×417px, top: 300px, по центру
   ======================== */
.basket-main-plate {
    position: absolute !important;
    top: 300px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 1720px !important;
    height: 417px !important;

    background-color: rgba(0, 0, 0, 0.1) !important;
    border: 3px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 40px !important;
    box-sizing: border-box !important;
}

/* ========================
   ПЛАШКА ПРОДУКТУ (PRODUCT_PLATE)
   — 1624×226px, top: 48px, по центру горизонталі
   ======================== */
.basket-product-plate-wrapper {
    position: absolute !important;
    top: 48px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 1624px !important;
    height: 226px !important;
}

.basket-product-plate-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}


/* ========================
   ТЕКСТ "KOŠÍK JE PRÁZDNÝ"
   — по центру PRODUCT_PLATE (і горизонтально, і вертикально)
   ======================== */
.basket-empty-text {
    position: absolute !important;
    top: 60px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    white-space: nowrap !important;

    font-family: 'Atyp Display', sans-serif !important;
    font-weight: 600 !important;
    font-size: 50px !important;
    line-height: 100% !important;
    letter-spacing: -0.05em !important;
    color: rgba(0, 0, 0, 0.2) !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

/* ========================
   КАРТКА ТОВАРУ В КОШИКУ (одна на кожен товар, генерується JS)
   — 1624×226px, позиція top задається інлайново для кожної картки
   ======================== */
.basket-card {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 1624px !important;
    height: 226px !important;
}

/* Назва товару */
.basket-item-title {
    position: absolute;
    left: 227px;
    top: 64px;
    margin: 0;

    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0em;
    color: #000000;
    text-transform: none;
}

/* Обрана вага товару */
.basket-item-weight {
    position: absolute;
    left: 227px;
    top: 141px;

    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: rgba(0, 0, 0, 0.5);
    text-transform: none;
}

/* Кнопки селектора кількості (позиції всередині плашки) */
.basket-qty-btn {
    top: 88px; /* Центруємо 50px кнопку по вертикалі в 226px плашці */
}
.basket-qty-left { left: 674px; }
.basket-qty-right { left: 790px; }

/* Число кількості між кнопками */
.basket-item-quantity {
    position: absolute;
    left: 724px;
    top: 88px;
    width: 66px;
    height: 50px;
    line-height: 50px;
    text-align: center;

    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -0.05em;
    color: #000000;
}

/* Підпис "Celkem" */
.basket-item-celkem-label {
    position: absolute;
    left: 953px;
    top: 79px;

    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0em;
    color: #000000;
    text-transform: none;
}

/* Ціна товару (з обраними характеристиками) */
.basket-item-price {
    position: absolute;
    left: 953px;
    top: 126px;

    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: rgba(0, 0, 0, 0.5);
    text-transform: none;
}

/* Позначка режиму B2C / B2B, в якому товар було додано (не клікабельна) */
.basket-item-mode-mark {
    position: absolute;
    left: 1193px;
    top: 88px; /* Центруємо 50px по вертикалі в 226px картці */
    width: 120px;
    height: 50px;
    display: block;
    pointer-events: none;
}

/* Підказка "Cena s DPH (12%)" — показується лише для товарів, доданих у режимі B2B */
.basket-item-dph-hint {
    position: absolute;
    left: 953px;
    top: 156px;

    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0em;
    color: #000000;
    text-transform: none;
}

/* Кнопка "Odebrat" (прибрати товар з кошика) */
.basket-remove-btn {
    position: absolute;
    left: 1333px;
    top: 88px; /* Центруємо 50px кнопку по вертикалі в 226px плашці */
    width: 211px;
    height: 50px;
    z-index: 20;

    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.basket-remove-btn:hover {
    opacity: 0.5;
}
.basket-remove-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ========================
   ТЕКСТ "CENA CELKEM"
   — знизу 58px, зліва 100px
   ======================== */
.basket-total-label {
    position: absolute !important;
    bottom: 58px !important;
    left: 100px !important;

    font-family: 'Atyp Display', sans-serif !important;
    font-weight: 600 !important;
    font-size: 40px !important;
    line-height: 100% !important;
    letter-spacing: -0.05em !important;
    color: rgba(0, 0, 0, 0.2) !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

/* ========================
   ТЕКСТ "0,00 Kč"
   — знизу 58px, справа 100px
   ======================== */
.basket-total-price {
    position: absolute !important;
    bottom: 58px !important;
    right: 100px !important;

    font-family: 'Atyp Display', sans-serif !important;
    font-weight: 600 !important;
    font-size: 40px !important;
    line-height: 100% !important;
    letter-spacing: -0.05em !important;
    color: rgba(0, 0, 0, 0.2) !important;
    text-transform: uppercase !important;
    text-align: right !important;
}

/* ========================
   ФУТЕР (basket page)
   — притиснутий до низу
   ======================== */
.basket-page-global .footer-platform {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    transform: none !important;
    z-index: 10 !important;
}

















/* ========================================== */
/* ЛОГІКА РОЗДІЛЕННЯ: ДЕСКТОП / МОБІЛКА       */
/* ========================================== */

/* За замовчуванням (для комп'ютерів): */
.desktop-version {
    display: block; /* ПК версію показуємо */
}
.mobile-version {
    display: none; /* Мобільну версію повністю ховаємо */
}

/* Коли екран стає меншим за 1024px (планшети та смартфони): */
@media (max-width: 1023px) {
    .desktop-version {
        display: none; /* ПК версія повністю зникає */
    }
    .mobile-version {
        display: block; /* Мобільна версія з'являється */
    }
}