/*
Theme Name: GeneratePress Child (ARCHI-SPACE)
Template: generatepress
*/

:root {
            --bg: #ffffff;
            --text: #1a1a1a;
            --accent: #000000;
            --gray: #f9f9f9;
            --border: #eeeeee;
            --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }

        /* МЕНЮ — ВИПРАВЛЕНО І ВІДЦЕНТРОВАНО */
        nav { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; /* Центрує головні блоки по висоті */
            padding: 0 4%; 
            position: fixed; 
            width: 100%; 
            top: 0; 
            height: 70px; /* Чітка висота хедера */
            background: rgba(255,255,255,0.95); 
            z-index: 1000; 
            border-bottom: 1px solid var(--border); 
        }

        .logo { 
            font-weight: 700; 
            font-size: 20px; 
            letter-spacing: 2px; 
            cursor: pointer; 
            display: flex;
            align-items: center; /* Центрує сам текст логотипу */
            height: 100%;
        }

        .logo a {
            display: flex;
            align-items: center;
            color: inherit;
            text-decoration: none;
            height: 100%;
        }

        .nav-links { 
            display: flex; 
            gap: 30px; 
            list-style: none; 
            height: 100%; 
            align-items: center; /* Відцентровує всі пункти меню в один ряд */
            margin: 0;
            padding: 0;
        }

        .nav-links li {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .nav-links a { 
            text-decoration: none; 
            color: var(--text); 
            font-size: 14px; 
            text-transform: uppercase; 
            font-weight: 600; 
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .dropdown > a { 
            display: flex; 
            align-items: center; 
            gap: 5px; 
            height: 100%;
        }

        .nav-right { 
            display: flex; 
            align-items: center; 
            gap: 20px; 
            height: 100%; /* Дозволяє кнопкам праворуч також стояти чітко по центру */
        }

        .phone { font-weight: 600; font-size: 14px; }
        .btn-consult { background: var(--accent); color: #fff; padding: 10px 20px; border: none; cursor: pointer; text-transform: uppercase; font-size: 12px; }

        /* МЕГА-МЕНЮ (На всю ширину з 5 колонками) */
        .dropdown {
            position: static !important;
        }
        
        .dropdown-content { 
            position: absolute; 
            top: 100%; 
            left: 0; 
            width: 100%; 
            background: rgba(255, 255, 255, 0.98); 
            backdrop-filter: blur(10px); 
            box-shadow: 0 15px 40px rgba(0,0,0,0.05); 
            border-top: 1px solid var(--border); 
            padding: 60px 4% !important; 
            display: grid !important; 
            grid-template-columns: repeat(5, 1fr) !important; 
            gap: 30px !important; 
            opacity: 0; 
            visibility: hidden; 
            transition: 0.3s; 
            z-index: 1001; 
            transform: translateY(10px); 
        }
        
        @media(hover: hover) { .dropdown:hover .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); } }
        .dropdown.active .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); }
        
        /* Внутрішні елементи колонок мега-меню *//* Перетворюємо заголовок категорії в меню на кнопку з рамкою */
.menu-column h3.cat-menu-title {
    border-bottom: none !important; /* Прибираємо стару лінію знизу */
    margin-bottom: 25px !important;
    padding-bottom: 0 !important;
}

.menu-column h3.cat-menu-title a {
    display: block;            /* Тепер кнопка займає всю ширину колонки */
    max-width: 100%;          /* ширина кнопуи в % */
    padding: 5px 22px;        /*висота (перше значення) */
    border: 2px solid #d1d1d1; /* Тонка рамка */
    border-radius: 30px;        /* Заокруглені кути */
    
    text-decoration: none;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    text-align: center;        /* Центруємо текст всередині широкої кнопки */
}

/* Ефект при наведенні на кнопку категорії */
.menu-column h3.cat-menu-title a:hover {
    background-color: #000;
    color: #fff !important;
    border-color: #000;
    transform: translateY(-2px); /* Легке підняття при наведенні */
}

        .menu-items {
            display: flex;
            flex-direction: column;
            gap: 12px !important;
        }

        .menu-items a {
            text-decoration: none;
            color: #555 !important;
            font-size: 14px !important;
            font-weight: 400 !important;
            transition: all 0.3s ease;
            line-height: 1.3;
            text-transform: none !important;
        }

        .menu-items a:hover {
            color: #000 !important;
            padding-left: 5px;
        }

        /* Кнопка "Дивитися всі" */
        .view-all {
            display: inline-block;
            margin-top: 20px;
            padding: 8px 20px;
            font-weight: 700 !important;
            border: 1px solid #d1d1d1;
            border-radius: 30px;
            text-decoration: none;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #000 !important;
            transition: all 0.3s ease;
            text-align: center;
        }

        .view-all:hover {
            border-color: #000;
            background-color: #F7FBF5; 
            color: #000 !important;
			padding-left: 12px !important; /* зсув вліво */
        }

        /* Залишкові старі стилі меню (для мобільної версії) */
        .dropdown-col { display: flex; flex-direction: column; min-width: 15vw; align-items: flex-start; }
        .dropdown-cat-header { font-size: 14px; text-transform: uppercase; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 5px; color: var(--accent); font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 100%; transition: 0.2s; }
        .dropdown-cat-header:hover { color: #555; }
        .dropdown-cat-list { display: none; flex-direction: column; gap: 10px; padding-top: 10px; width: 100%; animation: fadeIn 0.3s; }
        .dropdown-col.open .dropdown-cat-list { display: flex; }
        .nav-links .dropdown-cat-list a { color: #555; font-size: 13px; text-transform: none; font-weight: 400; cursor: pointer; transition: 0.2s; display: block; }
        .nav-links .dropdown-cat-list a:hover { color: var(--accent); font-weight: 600; padding-left: 5px; }
        .nav-links .dropdown-cat-list .all-btn-link { font-weight: 600; color: #000; margin-bottom: 5px; text-transform: uppercase; font-size: 12px; }

        /* ГОЛОВНИЙ БЛОК (ВКЛАДКИ) */
        .hero-split { 
            display: flex; 
            height: calc(70vh - 70px); 
            margin-top: 70px; 
            transition: height var(--transition); 
            overflow-x: auto; 
            scroll-snap-type: x mandatory; 
            scrollbar-width: none; 
            -webkit-overflow-scrolling: touch; 
        }
        .hero-split::-webkit-scrollbar { display: none; } 
        .panel { flex: 0 0 20vw; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.1); background-size: cover; background-position: center; transition: flex var(--transition); scroll-snap-align: center; }
        .panel::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.3); transition: 0.4s; }
        .panel h2 { position: absolute; z-index: 2; color: #fff; text-transform: uppercase; letter-spacing: 3px; font-size: 24px; transform: rotate(-90deg); white-space: nowrap; transition: 0.4s; }
        
        .panel-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); opacity: 0; transition: opacity 0.4s ease; z-index: 1; pointer-events: none; }
        .panel.active-hover .panel-overlay { opacity: 1; }
        
        .panel-list { position: absolute; bottom: 40px; left: 40px; display: flex; flex-direction: column; gap: 12px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: 3; }
        .panel.active-hover .panel-list { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.1s; }
        .panel-list a { color: #fff; text-decoration: none; font-size: 16px; font-weight: 400; transition: opacity 0.3s; }
        .panel-list a:hover { opacity: 0.7; }
        
/* Оновлена кнопка "Всі вироби" внизу списку на головній */
.panel-list .all-products-link { 
    display: inline-block;
    margin-top: 15px; /* Відступ від списку товарів зверху */
    padding: 8px 20px;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 255, 255, 0.6); /* Світла тонка рамка */
    border-radius: 30px; /* Заокруглені кути */
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff !important; /* Білий текст */
    transition: all 0.3s ease;
    text-align: center;
}

/* Ефект наведення (з вашим кольором #F7FBF5) */
.panel-list .all-products-link:hover {
    background-color: #F7FBF5; 
    color: #000 !important; /* Текст стає чорним */
    border-color: #F7FBF5;
    opacity: 1 !important;
}

        .list-btn { background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 12px 15px; cursor: pointer; text-transform: uppercase; font-size: 12px; font-weight: 600; transition: 0.3s; width: 100%; }
        .list-btn:hover { background: #fff; color: #000; }
        .list-btn.all-btn { background: var(--accent); border-color: var(--accent); margin-bottom: 5px; }
        .list-btn.all-btn:hover { background: #333; color: #fff; }

        @media (hover: hover) {
            body:not(.active-mode):not(.catalog-mode):not(.product-mode) .panel:hover::after { background: rgba(0,0,0,0.7); }
            body:not(.active-mode):not(.catalog-mode):not(.product-mode) .panel:hover h2 { transform: translateY(-120px) rotate(0); font-size: 20px; }
            body:not(.active-mode):not(.catalog-mode):not(.product-mode) .panel:hover .panel-list { opacity: 1; pointer-events: auto; transform: translateY(0); }
        }
        body:not(.active-mode):not(.catalog-mode):not(.product-mode) .panel.active-hover::after { background: rgba(0,0,0,0.7); }
        body:not(.active-mode):not(.catalog-mode):not(.product-mode) .panel.active-hover h2 { transform: translateY(-120px) rotate(0); font-size: 20px; }

        /* СТАН ЗГОРНУТИХ ВКЛАДОК */
        body.active-mode .hero-split, body.catalog-mode .hero-split { height: 80px; position: sticky; top: 70px; z-index: 999; scroll-snap-type: none; overflow: visible; }
        body.active-mode .panel, body.catalog-mode .panel { flex: 1; pointer-events: auto; overflow: visible; }
        body.active-mode .panel h2, body.catalog-mode .panel h2 { transform: rotate(0) translateY(0); font-size: 14px; letter-spacing: 1px; }
        body.active-mode .panel-list, body.catalog-mode .panel-list { top: 80px; transform: translateX(-50%) translateY(10px); background: rgba(255, 255, 255, 0.98); box-shadow: 0 15px 40px rgba(0,0,0,0.1); padding: 15px; width: 220px; border-top: 2px solid var(--accent); border-radius: 0 0 8px 8px; left: 50%; }
        body.active-mode .panel.active-hover::after, body.catalog-mode .panel.active-hover::after { background: rgba(0,0,0,0.5); }
        body.active-mode .panel.active-hover .panel-list, body.catalog-mode .panel.active-hover .panel-list { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
        body.active-mode .list-btn, body.catalog-mode .list-btn { background: #f9f9f9; color: #333; border: 1px solid var(--border); }
        body.active-mode .list-btn:hover, body.catalog-mode .list-btn:hover { background: var(--border); color: #000; }
        body.active-mode .list-btn.all-btn, body.catalog-mode .list-btn.all-btn { background: var(--accent); color: #fff; border: none; }

        /* ВІДОБРАЖЕННЯ БЛОКІВ */
        #view-catalog, #landing-content, #view-product { display: none; padding: 40px 4%; animation: fadeIn 0.4s; }
        body.active-mode #about-company, body.catalog-mode #about-company, body.product-mode #about-company { display: none; }
        body.active-mode #landing-content { display: block; }
        body.catalog-mode #view-catalog { display: block; }
        body.product-mode .hero-split { display: none; }
        body.product-mode #view-product { display: block; padding-top: 100px; padding-bottom: 120px; }
        
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* ІНФОРМАЦІЯ ПРО КОМПАНІЮ */
        #about-company { padding: 80px 4%; background: var(--bg); text-align: center; }
        .about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; text-align: left; }

        /* КАТАЛОГ ТА ЛЕНДІНГ */
        .catalog-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; border-bottom: 2px solid #000; padding-bottom: 20px; }
        .filters { display: flex; gap: 20px; } .filter-group { display: flex; flex-direction: column; } .filter-group label { font-size: 12px; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; } .filter-group select { padding: 10px 15px; border: 1px solid #ddd; background: var(--gray); outline: none; min-width: 200px; font-family: 'Inter', sans-serif; }
        .catalog-grid-full, .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; margin-bottom: 60px; }
        .catalog-empty { grid-column: 1 / -1; text-align: center; padding: 60px 0; color: #888; font-size: 18px; background: var(--gray); }
        .product-card { border: 1px solid var(--border); padding: 25px; transition: 0.3s; cursor: pointer; } .product-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-color: var(--accent); } .product-card img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 15px; background: var(--border); }
        
        .cat-hero { height: 300px; background: var(--gray); display: flex; align-items: center; padding: 60px; margin-bottom: 40px; }
        .tech-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 80px; padding: 40px; background: var(--gray); } .feature-item { text-align: left; } .feature-icon { font-size: 30px; margin-bottom: 15px; }
        .synergy-block { background: var(--accent); color: #fff; padding: 60px; display: flex; align-items: center; gap: 40px; margin-bottom: 80px; } .synergy-text { flex: 1; } .synergy-text h2 { margin-bottom: 20px; font-size: 32px; color: #fff;} .synergy-visual { flex: 1; height: 250px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.2); }
        .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; margin-bottom: 80px; } .gallery-img { width: 100%; height: 300px; object-fit: cover; background: var(--border); }
        
        .info-section { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 80px; } .step { margin-bottom: 25px; padding-left: 20px; border-left: 2px solid #000; }

        /* ========================================= */
        /* НОВІ БЛОКИ СТОРІНКИ ТОВАРУ (PRODUCT PAGE) */
        /* ========================================= */
        .breadcrumbs { font-size: 12px; color: #888; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 1px; }
        .breadcrumbs span { color: var(--accent); font-weight: 600; cursor: pointer; } .breadcrumbs span:hover { text-decoration: underline; }

        .pdp-layout { display: flex; gap: 60px; margin-bottom: 60px; align-items: flex-start; }
        .pdp-gallery { flex: 1; position: sticky; top: 100px; }
        .pdp-main-img { width: 100%; height: 500px; object-fit: cover; background: var(--gray); margin-bottom: 15px; }
        .pdp-info { flex: 1; }
        .pdp-info h1 { font-size: 40px; line-height: 1.1; margin-bottom: 20px; text-transform: uppercase; }
        .pdp-desc { font-size: 16px; color: #555; margin-bottom: 30px; }
        
        .pdp-section { margin-bottom: 80px; }
        .pdp-section h2 { margin-bottom: 30px; font-size: 28px; }

        .specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .specs-drawing { background: #1a1a1a; color: #666; display: flex; align-items: center; justify-content: center; min-height: 350px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }
        .specs-table { width: 100%; border-collapse: collapse; }
        .specs-table td { padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: #333; }
        .specs-table tr:last-child td { border-bottom: none; }
        .specs-table td:first-child { color: #555; width: 45%; font-weight: 600; }

        .stages-list { display: flex; flex-direction: column; gap: 30px; }
        .stage-item { border-left: 2px solid #000; padding-left: 20px; }
        .stage-item h4 { margin-bottom: 5px; font-size: 16px; }
        .stage-item p { font-size: 14px; color: #555; line-height: 1.6; }

        .full-width-bg { background: var(--gray); padding: 80px 4%; margin: 0 -4% 80px -4%; }
        .about-prod-desc { max-width: 800px; font-size: 15px; color: #444; line-height: 1.8; }
        .custom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
        .custom-card { background: #fff; padding: 30px 20px; text-align: center; border: 1px solid var(--border); }
        .custom-card .icon { font-size: 32px; margin-bottom: 15px; }
        .custom-card strong { display: block; font-size: 15px; margin-bottom: 5px; }
        .custom-card span { font-size: 12px; color: #888; }

        /* З цим товаром також замовляють */
        .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .related-card { border: 1px solid var(--border); transition: 0.3s; cursor: pointer; background: #fff; }
        .related-card img { width: 100%; height: 200px; object-fit: cover; background: var(--border); border-bottom: 1px solid var(--border); }
        .related-card h4 { font-size: 14px; padding: 20px; font-weight: 600; }
        .related-card:hover { border-color: var(--accent); }

        /* ЛИПКА КНОПКА */
        .sticky-cta { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; padding: 15px 4%; box-shadow: 0 -10px 30px rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; z-index: 1000; border-top: 1px solid var(--border); transform: translateY(100%); transition: 0.4s; }
        body.product-mode .sticky-cta { transform: translateY(0); }
        .sticky-info strong { display: block; font-size: 16px; } .sticky-info span { font-size: 12px; color: #666; }
        .sticky-btn { background: var(--accent); color: #fff; padding: 15px 40px; border: none; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 14px; transition: 0.2s; } .sticky-btn:hover { background: #333; }

        .form-container { 
    background: var(--gray); 
    padding: 80px 4%; 
    margin-top: 80px; /* Додаємо відступ зверху, щоб відірвати футер від контенту */
    margin-bottom: 40px; 
    text-align: center; 
}

        .form-flex { display: flex; gap: 20px; margin-top: 30px; } input, select { flex: 1; padding: 15px; background: #fff; border: 1px solid #ddd; outline: none; } .btn-send { background: var(--accent); color: #fff; padding: 15px 40px; border: none; cursor: pointer; font-weight: 700; }

        /* Мобільна версія */
        @media (max-width: 768px) {
            .panel { flex: 0 0 80vw; overflow: hidden; } .panel h2 { transform: rotate(0); font-size: 28px; } 
            body:not(.active-mode):not(.catalog-mode):not(.product-mode) .panel.active-hover h2 { transform: translateY(-150px) rotate(0); }
            nav { padding: 15px 4%; } .nav-links { gap: 15px; font-size: 12px; }
            .dropdown-content { display: flex !important; position: fixed; top: 70px; left: 0; width: 100vw; height: calc(100vh - 70px); overflow-y: auto; flex-direction: column; justify-content: flex-start; padding: 20px 6% 40px 6% !important; gap: 20px !important; } .dropdown-col { min-width: 100%; }
            body.active-mode .panel h2, body.catalog-mode .panel h2 { transform: rotate(-90deg) translateY(0); font-size: 10px; }
            body.active-mode .panel-list, body.catalog-mode .panel-list { position: fixed; top: 155px; left: 4%; width: 92%; transform: translateY(10px); }
            .panel-list { left: 20px; bottom: 30px; }
            
            .catalog-header, .filters { flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } .filter-group select { width: 100%; }
            .tech-features, .synergy-block, .info-section, .form-flex, .pdp-layout, .specs-grid { flex-direction: column; grid-template-columns: 1fr !important; gap: 30px; }
            .custom-grid { grid-template-columns: repeat(2, 1fr); }
            .related-grid { grid-template-columns: 1fr; }
            .pdp-gallery { position: static; } .pdp-main-img { height: 300px; }
            .specs-drawing { min-height: 200px; }
            .sticky-info { display: none; } .sticky-btn { width: 100%; }
        }

        /* =========================================
           Анімація заголовка-кнопки (Лендінги категорій)
        ========================================= */
        .panel h2 a.hero-cat-link {
            color: #fff;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* Стандартний стан тексту ("Скло") */
        .title-default {
            transition: opacity 0.3s ease;
            opacity: 1;
        }

        /* Стан кнопки при наведенні ("Про скло ->") */
        .title-hover {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1.5px;
            white-space: nowrap;
            padding: 10px 24px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 30px;
            transition: all 0.3s ease;
            pointer-events: none; /* Не заважає, поки невидима */
            text-transform: uppercase;
        }

        /* Перемикання видимості при розкритті вкладки */
        body:not(.active-mode):not(.catalog-mode):not(.product-mode) .panel.active-hover .title-default {
            opacity: 0; /* Звичайний текст ховається */
        }

        body:not(.active-mode):not(.catalog-mode):not(.product-mode) .panel.active-hover .title-hover {
            opacity: 1; /* Кнопка з'являється */
            pointer-events: auto; /* Тепер на неї можна клікати */
        }

        /* Ефект наведення на саму кнопку */
        body:not(.active-mode):not(.catalog-mode):not(.product-mode) .panel.active-hover .title-hover:hover {
            background: #fff;
            color: #000;
            border-color: #fff;
        }

/* =========================================
   СТИЛІ З FOOTER.PHP
========================================= */

/* Блок для вводу телефону */
.form-phone-group {
    display: flex; 
    gap: 5px; 
    flex: 1;
}

/* Вибір коду країни (select) */
.form-phone-prefix {
    flex: 0.3;
}

/* Поле вводу номера (input) */
.form-phone-number {
    flex: 0.7;
}

/* Кнопка завантаження PDF */
.file-upload-label {
    background: #fff; 
    padding: 15px; 
    cursor: pointer; 
    border: 1px dashed #aaa; 
    flex: 1; 
    text-align: center;
}

/* Прихований системний інпут для файлу */
.file-upload-input {
    display: none;
}

/* Липка кнопка (видимий стан) */
.sticky-cta-visible {
    transform: translateY(0);
}
/* =========================================
=======   КІНЕЦЬ СТИЛІ З FOOTER.PHP
========================================= */


/* =========================================
   СТИЛІ З FRONT-PAGE.PHP
========================================= */

/* --- Hero Section --- */
.hero-empty-msg {
    color: #bbb; 
    font-size: 13px;
}

/* --- Секція Про Компанію --- */
.about-company-section {
    text-align: center; 
    padding: 60px 4%; 
    background: var(--bg);
}

.about-company-desc {
    max-width: 800px; 
    margin: 20px auto; 
    color: #555;
}

.completed-projects-container {
    display: flex; 
    flex-wrap: wrap; 
    align-items: stretch; 
    padding: 60px 0; 
    gap: 60px; 
    max-width: 1200px; 
    margin: 0 auto; 
    text-align: left;
}

.projects-image {
    flex: 1.2; 
    min-width: 300px; 
    min-height: 400px; 
    background-size: cover; 
    background-position: center; 
    border-radius: 8px; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.05); 
    background-color: #f5f5f5;
}

.projects-content {
    flex: 1; 
    min-width: 300px; 
    display: flex; 
    flex-direction: column;
}

.projects-title {
    font-size: clamp(28px, 4vw, 36px); 
    margin: 0 0 40px 0; 
    line-height: 1.2; 
    font-weight: 800; 
    color: #1a1a1a;
}

.projects-list {
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 30px;
}

.projects-list-item {
    border-left: 3px solid #C4A47C; 
    padding-left: 20px;
}

.projects-list-title {
    font-size: 18px; 
    font-weight: 700; 
    color: #1a1a1a; 
    margin: 0 0 8px 0;
}

.projects-list-text {
    margin: 0; 
    color: #555; 
    font-size: 15px; 
    line-height: 1.6;
}

.about-problems-title {
    font-size: clamp(28px, 4vw, 32px); 
    margin: 80px 0 10px 0;
}

.about-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
    margin-top: 20px; 
    text-align: left;
}

.about-grid-card {
    background: var(--gray); 
    padding: 30px; 
    border-radius: 8px;
}

.about-grid-card-title {
    margin-bottom: 15px;
}

/* --- Секція Для Архітекторів --- */
.architects-section {
    background-color: #2b2b2b; 
    padding: 80px 4%;
}

.architects-container {
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: 60px; 
    max-width: 1200px; 
    margin: 0 auto;
}

.architects-content {
    flex: 1; 
    min-width: 300px;
}

.architects-title {
    font-size: clamp(28px, 4vw, 36px); 
    margin: 0 0 20px 0; 
    line-height: 1.3; 
    font-weight: 800; 
    color: #ffffff;
}

.architects-desc {
    font-size: 15px; 
    color: #cccccc; 
    line-height: 1.6; 
    margin: 0 0 35px 0;
}

.architects-list {
    list-style: none; 
    padding: 0; 
    margin: 0 0 45px 0; 
    display: flex; 
    flex-direction: column; 
    gap: 15px;
}

.architects-list-item {
    display: flex; 
    gap: 12px; 
    align-items: flex-start; 
    color: #cccccc; 
    font-size: 14px; 
    line-height: 1.5;
}

.architects-list-icon {
    color: #ffffff; 
    font-weight: bold; 
    flex-shrink: 0; 
    font-size: 15px;
}

.architects-btn {
    display: inline-block; 
    padding: 16px 32px; 
    background-color: #ffffff; 
    color: #1a1a1a; 
    border: none; 
    font-weight: 700; 
    text-decoration: none; 
    border-radius: 4px; 
    font-size: 14px; 
    cursor: pointer; 
    transition: 0.3s;
}

.architects-btn:hover {
    background-color: #e0e0e0;
}

.architects-image-wrapper {
    flex: 1; 
    min-width: 300px;
}

.architects-image {
    width: 100%; 
    aspect-ratio: 1/1; 
    background-size: cover; 
    background-position: center; 
    border-radius: 8px; 
    background-color: #ffffff;
}

/* --- Секція Переваг (Як ми працюємо) --- */
.tech-features-section {
    padding: 80px 4%; 
    background: var(--gray); 
    margin-bottom: 80px;
}

.tech-features-title {
    font-size: clamp(28px, 4vw, 32px); 
    text-align: center; 
    margin: 0 0 50px 0; 
    color: #1a1a1a;
}

.tech-features-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 40px; 
    max-width: 1200px; 
    margin: 0 auto;
}

.feature-item-title {
    margin-bottom: 10px;
}

.feature-item-text {
    color: #555; 
    font-size: 14px;
}

/* --- Секція Синергії --- */
.synergy-block {
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    padding: 80px 4%; 
    gap: 40px;
}

.synergy-text {
    flex: 1; 
    min-width: 300px;
}

.synergy-title {
    font-size: 32px; 
    margin-bottom: 20px;
}

.synergy-desc {
    color: #555; 
    margin-bottom: 20px;
}

.synergy-visual {
    flex: 1; 
    min-width: 300px; 
    height: 400px; 
    background-size: cover; 
    background-position: center; 
    border-radius: 8px; 
    background-color: #ddd;
}

/* --- Секція FAQ --- */
.faq-section {
    padding: 60px 4%; 
    background: var(--gray);
}

.faq-accordion {
    max-width: 800px; 
    margin: 0 auto;
}

.faq-title {
    text-align: center; 
    margin-bottom: 40px; 
    font-size: 32px;
}

.faq-item {
    margin-bottom: 15px; 
    background: #fff; 
    /* Перше значення (20px) - відступ зверху/знизу, друге (30px) - справа/зліва */
    padding: 20px 30px; 
    border-radius: 8px; 
    border: 1px solid var(--border); /* Або залиште box-shadow, якщо вирішили його повернути */
}

.faq-summary {
    font-weight: 600; 
    font-size: 16px; 
    cursor: pointer; 
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px; /* Відстань між текстом та іконкою */
}

/* Приховуємо стандартний трикутник браузера (який буває за замовчуванням) */
.faq-summary::-webkit-details-marker { 
    display: none; 
}

/* Додаємо плюсик, коли питання закрите */
.faq-summary::after { 
    content: '+'; 
    font-size: 24px;
    color: var(--accent);
    font-weight: 400;
    line-height: 1;
}

/* Змінюємо плюсик на мінус, коли питання відкрите (тег details отримує атрибут open) */
details[open].faq-item .faq-summary::after { 
    content: '-'; 
}

.faq-text {
    margin-top: 15px; 
    color: #555; 
    line-height: 1.6;
}

/* --- SEO Блок --- */
.front-page-seo-content {
    padding: 40px 4%;
}

/* =========================================
======= КІНЕЦЬ   СТИЛІ З FRONT-PAGE.PHP
========================================= */


/* =========================================
   СТИЛІ З SINGLE-PRODUCT.PHP
========================================= */
/* 1. ПОВЕРТАЄМО ОБМЕЖЕННЯ ШИРИНИ ТА ЦЕНТРУВАННЯ (КРИТИЧНО) */
.container {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 4%;
}

/* 2. РОБИМО ХЛІБНІ КРИХТИ ЯК НА МАКЕТІ (ВЕЛИКИМИ ЛІТЕРАМИ) */
.pdp-breadcrumbs {
    margin-bottom: 30px; 
    font-size: 12px; 
    color: #888;
    text-transform: uppercase; /* Робить букви великими */
    letter-spacing: 1px;
}

.pdp-breadcrumbs a {
    color: inherit; 
    text-decoration: none;
}

.pdp-breadcrumbs span {
    color: #000; 
    font-weight: 600;
}

/* 3. ПОВЕРТАЄМО ПРАВИЛЬНУ СІТКУ ТА ФІКСАЦІЮ ФОТО ПРИ СКРОЛІ */
.pdp-layout {
    display: flex; 
    flex-wrap: wrap;
    gap: 60px; 
    margin-bottom: 60px;
    align-items: flex-start; /* Важливо для правильної фіксації */
}

@media (min-width: 769px) {
    .pdp-gallery {
        position: sticky; 
        top: 100px; /* Фото буде плавно їздити за екраном, коли ви гортаєте опис */
    }
}

/* Блок опцій */
.pdp-options-box {
    background: var(--gray); 
    padding: 25px; 
    border-radius: 8px; 
    margin-bottom: 30px;
}

.pdp-options-title {
    font-size: 14px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 20px;
}

.pdp-options-grid {
    display: flex; 
    gap: 20px;
}

.pdp-option-item {
    text-align: center; 
    flex: 1;
}

/* Кольорові кружечки */
.pdp-option-color {
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    margin: 0 auto 10px;
}

.pdp-option-color.color-ral {
    background: #222;
}

.pdp-option-color.color-wood {
    background: #e8c396;
}

.pdp-option-custom {
    width: 30px; 
    height: 30px; 
    border: 1px dashed #999; 
    border-radius: 50%; 
    margin: 0 auto 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px;
}

.pdp-option-label {
    font-size: 11px; 
    display: block;
}

/* Широка кнопка розрахунку */
.pdp-calc-btn {
    width: 100%; 
    padding: 20px; 
    font-size: 16px; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

/* --- Схожі рішення (Сітка та центрування) --- */
/* Робимо картку блочною і жорстко забираємо підкреслення (!important перебиває тему) */

.related-products-title {
    margin-bottom: 40px; 
    text-align: center;
}

.related-products-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
}

.related-product-card {
    display: block; 
    text-decoration: none !important; 
    color: inherit;
}

/* Обгортка для фото: фіксуємо розміри та заокруглення */
.related-product-img-wrapper {
    display: block;
    width: 100%;
    overflow: hidden; 
    border-radius: 8px; 
    margin-bottom: 15px;
}

/* Фото: примусово розтягуємо на 100% ширини колонки */
.related-product-img {
    display: block;
    width: 100%; 
    height: 100%;
    aspect-ratio: 4/3; 
    object-fit: cover; 
    transition: transform 0.3s ease;
}

.related-product-card:hover .related-product-img {
    transform: scale(1.05);
}

/* Заголовок товару: налаштовуємо шрифт і гарантуємо відсутність підкреслення */
.related-product-title {
    font-size: 16px;
    font-weight: 600; /* Робимо шрифт трохи жирнішим, як на макеті */
    margin: 0; 
    text-decoration: none !important;
    color: #1a1a1a;
}

/* Робимо так, щоб на мобільних телефонах вони ставали в одну колонку */
@media (max-width: 768px) {
    .related-products-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
==== КІНЕЦЬ   СТИЛІ З SINGLE-PRODUCT.PHP
========================================= */


/* =========================================
   СТИЛІ З TEMPLATE-CATALOG.PHP
========================================= */

/* Головний контейнер каталогу */
.catalog-main-content {
    display: block; 
    padding-top: 120px; 
    min-height: 80vh;
}

/* Хлібні крихти каталогу */
.catalog-breadcrumbs {
    margin-bottom: 30px; 
    font-size: 14px; 
    color: #888;
}

.catalog-breadcrumbs a {
    color: inherit; 
    text-decoration: none;
}

.catalog-breadcrumbs span {
    color: #000; 
    font-weight: 600;
}

/* Заголовки */
.catalog-title {
    font-size: 40px; 
    margin-bottom: 10px; 
    line-height: 1.1;
}

.catalog-subtitle {
    color: #555; 
    font-size: 16px;
}

/* Фільтри */
.catalog-filters-label {
    font-size: 14px; 
    color: #888; 
    font-weight: 600; 
    text-transform: uppercase;
}

.catalog-filter-select {
    padding: 12px 20px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    font-family: inherit; 
    font-size: 16px; 
    outline: none; 
    cursor: pointer; 
    background: #fff;
}

/* Сітка товарів */
.catalog-product-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 40px; 
    margin-bottom: 100px;
}

/* Картка товару */
.catalog-item-card {
    text-decoration: none; 
    color: inherit; 
    display: block;
}

.catalog-item-img-wrapper {
    aspect-ratio: 4/3; 
    overflow: hidden; 
    border-radius: 8px; 
    background: #f5f5f5; 
    margin-bottom: 20px;
    /* Тінь прибрано для чистоти дизайну */
}

.catalog-item-img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease;
}

/* Анімація збільшення фото при наведенні (замість JS onmouseover) */
.catalog-item-card:hover .catalog-item-img {
    transform: scale(1.05);
}

.catalog-item-placeholder {
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #ccc;
}

/* Тексти картки */
.catalog-item-title {
    font-size: 20px; 
    margin-bottom: 8px;
}

.catalog-item-more {
    color: #888; 
    font-size: 13px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 600;
}

/* Повідомлення про відсутність товарів */
.catalog-empty-msg {
    grid-column: 1 / -1; 
    text-align: center; 
    color: #888; 
    padding: 40px 0;
}
/* =========================================
====== КІНЕЦЬ СТИЛІ З TEMPLATE-CATALOG.PHP
========================================= */

/* =========================================
   СТИЛІ З TEMPLATE-CATEGORY.PHP (Лендінги)
========================================= */

/* Головний контейнер */
.landing-main-content {
    display: block; 
    padding-top: 120px;
}

/* Хлібні крихти */
.landing-breadcrumbs {
    margin-bottom: 30px; 
    font-size: 14px; 
    color: #888;
}

.landing-breadcrumbs a {
    color: inherit; 
    text-decoration: none;
}

.landing-breadcrumbs span {
    color: #000; 
    font-weight: 600;
}

/* Кнопка "Назад" */
.landing-back-btn {
    margin-bottom: 40px;
}

.landing-back-link {
    text-decoration: none; 
    color: var(--text); 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    gap: 10px;
}

/* Герой-блок категорії */
.landing-cat-hero {
    margin-bottom: 60px;
}

.landing-cat-title {
    font-size: clamp(32px, 5vw, 56px); 
    margin-bottom: 20px; 
    line-height: 1.1;
}

.landing-cat-desc {
    max-width: 800px; 
    color: #555; 
    font-size: 18px; 
    line-height: 1.6;
}

/* Сітка товарів */
.landing-product-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 40px; 
    margin-bottom: 100px;
}

/* Картка товару */
.landing-item-card {
    text-decoration: none; 
    color: inherit; 
    display: block;
}

.landing-item-img-wrapper {
    aspect-ratio: 4/3; 
    overflow: hidden; 
    border-radius: 8px; 
    background: #f5f5f5; 
    margin-bottom: 20px;
    /* Тіні вилучені для мінімалістичного стилю */
}

.landing-item-img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease;
}

/* Анімація при наведенні (заміняє onmouseover) */
.landing-item-card:hover .landing-item-img {
    transform: scale(1.05);
}

.landing-item-placeholder {
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #ccc;
}

/* Інфо товару */
.landing-item-title {
    font-size: 20px; 
    margin-bottom: 8px;
}

.landing-item-more {
    color: #888; 
    font-size: 13px; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    font-weight: 600;
}

/* Заглушка (коли товарів немає) */
.landing-empty-box {
    grid-column: 1/-1; 
    padding: 60px; 
    background: #f9f9f9; 
    border-radius: 8px; 
    text-align: center; 
    color: #888;
}

/* Нижня секція-заклик (CTA) */
.landing-cta-section {
    padding: 100px 4%; 
    background: var(--accent); 
    color: #fff; 
    text-align: center;
}

.landing-cta-title {
    font-size: 36px; 
    margin-bottom: 20px;
}

.landing-cta-desc {
    opacity: 0.8; 
    margin-bottom: 40px; 
    font-size: 18px;
}

.landing-cta-btn {
    background: #fff; 
    color: #000; 
    padding: 20px 50px; 
    border-radius: 0; 
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    transition: background 0.3s ease;
}

.landing-cta-btn:hover {
    background: #e0e0e0;
}

/* =========================================
====== КІНЕЦЬ   СТИЛІ З TEMPLATE-CATEGORY.PHP (Лендінги)
========================================= */




/* ==================================================================================
   DNA LANDING STYLES (Конверсійний шаблон) - файл template-master-category.php
================================================================================== */

/* Hero Block */
.landing-hero-dna {
    height: 90vh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Легкий паралакс ефект */
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 70px; /* Висота хедера */
}

.hero-dna-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.dna-breadcrumbs {
    color: rgba(255,255,255,0.6) !important;
    margin-bottom: 40px;
}
.dna-breadcrumbs a { color: #fff !important; }
.dna-breadcrumbs span { color: #fff !important; }

.text-white { color: #fff !important; }
.text-white-opacity { color: rgba(255,255,255,0.8) !important; }
.text-accent-light { color: #C4A47C; /* або ваш акцентний колір */ }

.hero-dna-actions {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.btn-consult-outline {
    background: transparent;
    color: #fff;
    padding: 15px 40px;
    border: 1px solid #fff;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    transition: 0.3s;
}

.btn-consult-outline:hover {
    background: #fff;
    color: #000;
}

/* Каталог / Секція */
.dna-section-header {
    text-align: center;
    margin-bottom: 60px;
}
.dna-section-title {
    font-size: 36px;
    margin-bottom: 10px;
}
.dna-section-subtitle {
    color: #888;
    font-size: 16px;
}

/* Картки товарів */
.dna-product-card {
    background: #fff;
    border: 1px solid var(--border);
    padding-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.dna-product-card .landing-item-img-wrapper {
    margin-bottom: 15px;
    border-radius: 0;
}

.dna-product-card .product-info {
    padding: 0 20px;
}

.dna-product-tags {
    margin: 10px 0 15px 0;
}

.dna-tag {
    display: inline-block;
    background: var(--gray);
    color: #555;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Процес (Synergy) */
.dna-synergy {
    background: #1a1a1a;
    border-radius: 12px;
}

.dna-process-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dna-process-list li {
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
    padding-left: 20px;
    border-left: 2px solid #C4A47C;
}

.dna-process-list strong {
    color: #fff;
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

/* Адаптивність */
@media (max-width: 768px) {
    .landing-hero-dna { height: auto; padding: 120px 0 80px 0; background-attachment: scroll; }
    .hero-dna-actions { flex-direction: column; }
    .btn-consult-outline { width: 100%; }
}

/* =================================================================================================
========= КІНЕЦЬ   DNA LANDING STYLES (Конверсійний шаблон) - файл template-master-category.php
================================================================================================= */