/* 
 * 🖥️ DESKTOP LAYOUT - CONTAINER & SPACING
 * 
 * Правильный layout как в оригинальном дизайне
 * Контент не на весь экран, а с отступами
 * ТОЛЬКО ДЛЯ ДЕСКТОПА (> 768px)
 */

/* ============================================
   DESKTOP CONTAINER & SPACING
   ============================================ */

/* Стандартный десктоп (769px+) */
@media (min-width: 769px) {
    
    /* Container с ограничением ширины - УЖЕ чем раньше */
    .container {
        max-width: 1100px !important;
        margin: 0 auto !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    
    /* Main wrapper */
    .wrapper {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Product sections */
    .product {
        padding: 40px 0 !important;
    }
    
    .intro {
        padding: 60px 0 !important;
    }
    
}


/* Широкий десктоп (1024px+) */
@media (min-width: 1024px) {
    
    .container {
        max-width: 1150px !important;
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
    
    .product {
        padding: 50px 0 !important;
    }
    
    .intro {
        padding: 80px 0 !important;
    }
    
}


/* Очень широкий десктоп (1440px+) */
@media (min-width: 1440px) {
    
    .container {
        max-width: 1200px !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
    
    .product {
        padding: 60px 0 !important;
    }
    
    .intro {
        padding: 100px 0 !important;
    }
    
}


/* 4K экраны (1920px+) */
@media (min-width: 1920px) {
    
    .container {
        max-width: 1300px !important;
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
    
}


/* ============================================
   HEADER LAYOUT
   ============================================ */

@media (min-width: 769px) {
    
    /* Header top - full width background, но контент в container */
    .header__top {
        background: #1a1a1a !important;
        padding: 15px 0 !important;
    }
    
    .header__top .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* Header bottom navigation */
    .header__bottom {
        background: #000 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .header__bottom .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .header-nav {
        padding: 0 !important;
    }
    
}