/**
 * Дополнительные исправления для сайта Faretti
 */

/* Изменение стиля для Perfetto, чтобы шрифт был такой же как для "итальянский десерт" */
#perfetto .section-header h2,
#classico .section-header h2,
#uno .section-header h2 {
    font-family: 'TT Livret', serif;
  /*  font-style: italic;*/
    font-weight: normal;
}

/* Уменьшение отступа от логотипа для горизонтального меню */
.main-nav {
    margin-left: -40px; /* Сдвигаем меню левее для центрирования */
}

@media (max-width: 1200px) {
    .main-nav {
        margin-left: -20px; /* Меньший сдвиг для маленьких экранов */
    }
}

@media (max-width: 992px) {
    .main-nav {
        margin-left: 0; /* Для мобильных устройств не нужен сдвиг */
    }
}

/* Стили для уменьшенных карточек продуктов линейки Classico - ширина карточек 130 г сохранена */
.product-card-small {
    transform: scale(0.85);
    margin: -10px;
}

.product-image-frame-small {
    width: 90%;
    margin: 0 auto;
}

.product-image-small {
    max-width: 90%;
    max-height: 60%;
    transition: transform 0.3s ease;
    margin-top: 60px;
}

.product-card-small .product-info h4 {
  /*  font-size: 0.9em;*/
}

.product-card-small .product-weight {
    font-size: 0.9em;
}

/* Центрирование контейнера для маленьких карточек */
.product-grid:has(.product-card-small) {
    justify-content: center;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .product-card-small {
        transform: scale(0.9);
        margin: -5px;
    }
}

/* Дополнительные исправления для мобильного меню */

/* Исправление для z-index'ов в мобильном меню */
@media (max-width: 768px) {
    .header {
        z-index: 1100 !important;
    }
    
    .mobile-menu-toggle {
        z-index: 1110 !important;
        position: relative !important;
    }
    
    .main-nav {
        z-index: 1090 !important;
    }
    
    .main-nav.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }
    
    .nav-item a {
        pointer-events: auto !important;
        color: var(--primary-color) !important;
        z-index: 1100 !important;
        position: relative !important;
    }
    
    /* Предотвращаем прокрутку при открытом меню */
    body.menu-open {
        overflow: hidden !important;
    }
    
    /* Убираем возможные проблемы с кликами на ссылках */
    .main-nav.active * {
        pointer-events: auto !important;
    }
}

/* Обратная совместимость для обработчиков клика */
.nav-item a {
    cursor: pointer !important;
}

/* Исправление для возможного перекрытия ссылок */
@media (max-width: 768px) {
    .main-nav.active ul {
        position: relative !important;
        z-index: 1091 !important;
    }
    
    .main-nav.active li {
        position: relative !important;
        z-index: 1092 !important;
    }
    
    .main-nav.active a {
        position: relative !important;
        z-index: 1093 !important;
    }
}

/* Стили для скрытого абзаца */
.hidden-paragraph {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    margin-top: 15px;
}

.hidden-paragraph.visible {
    display: block;
    opacity: 1;
}

/* Стиль для первого абзаца, который всегда виден */
.about-text p:first-of-type {
    display: block;
    margin-bottom: 15px;
}



/* Делаем фотографии в секции производства квадратными и уменьшаем их размер */
.production-image img,
#production img,
.product-image img {
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 0 !important;
    width: 100%;
    max-width: 280px; /* Уменьшено с 300px до 280px */
    margin: 0 auto;
    display: block;
}

/* Уменьшаем высоту первого блока на 50% */
.hero-section,
.production-hero {
   /* height: 50vh !important; /* Уменьшаем высоту вдвое */
    min-height: 340px !important; /* Минимальная высота для маленьких экранов */
}

.hero-section .container,
.production-hero .container {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.hero-section .hero-image img,
.production-hero .hero-image img {
    max-height: 40vh !important;
}

/* Дополнительные стили для production-hero */
.production-hero .hero-content {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* Стили для изображений на странице */
.production-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 30px;
    max-width: 800px; /* Уменьшено с 1000px до 800px */
    margin-left: auto;
    margin-right: auto;
}

.production-gallery-item {
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 0;
    max-width: 180px; /* Уменьшено с 220px до 180px */
    margin: 0 auto;
}

.production-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.3s ease;
}

.production-gallery-item:hover img {
    transform: scale(1.05);
}

/* Переопределение стилей галереи из about-production.html */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; /* Уменьшено с 250px до 200px */
    gap: 15px !important; /* Уменьшено с 20px до 15px */
    max-width: 900px !important; /* Уменьшено с 1100px до 900px */
    margin: 0 auto;
    padding: 0 20px;
}

/* Скрываем блок с фотографиями производства */
#production-gallery, 
.production-gallery {
    display: none !important;
}

.gallery-item img {
    width: 100%;
    height: 200px !important; /* Уменьшено с 250px до 200px */
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 768px) {
    .production-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}