body {
    font-family: 'Segoe UI', sans-serif;
    transition: background-color 0.5s ease, color 0.5s ease;
    
}

.main-content {
    margin-top: 80px;
}

.site-header {
    background: #333;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    align-items: flex-start;
}

.logo-row {
    display: flex;
    justify-content: space-between; /* логотип зліва, кнопка справа */
    align-items: center;
    width: 100%;
}

.logo-block h1 {
    margin: 0;
    font-size: 1.5rem;
}

.main-nav {
    display: flex; /* робить меню горизонтальним */
    gap: 25px; /* відстань між пунктами */
    justify-content: center;
    flex: 1;
}

.nav-link {
    /*display: inline-block;*/ /* посилання стають в ряд */
    text-decoration: none;
    font-weight: 500;
    color: #fff;
    transition: color 0.3s ease;
}

    .nav-link:hover {
        color: #4cb5f5;
    }

.season-switcher {
    display: flex;
    gap: 10px;
}

.logo-block {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.menu-toggle {
    display: none; /* прихована на десктопі */
    font-size: 2rem;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

.product-card {
    transition: background-color 0.5s ease, color 0.5s ease, transform 0.2s ease;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100%; /* однакова висота */
}

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }

.product-card-img {
    max-height: 180px;
    object-fit: contain;
    background-color: #fff;
    padding: 10px;
}

.product-card-body {
    text-align: center;
}

.filtersForm {
    background-color: #f9fafb;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Базовий стиль для списку */
.size-item {
    cursor: pointer;
    padding: 10px 15px;
    margin-bottom: 5px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border 0.3s ease;
}


    /* при наведенні */
    .size-item:hover {
        background-color: #eee;
    }

 

/*========================================================================================================*/

/* Весна */
body.spring {
    background-color: #b3c100;
    color: #34675c;
}

   /* body.spring .main-nav {
        background-color: #34675c;
    }*/

    body.spring .nav-link {
        color: #73920b;
    }

        body.spring .nav-link:hover {
            color: #4cb5f5;
        }

    body.spring .product-card {
        background-color: #e6f7d9;
        color: #34675c;
    }

    body.spring .filtersForm {
        background-color: #f0fbe6;
        border: 1px solid #73920b;
    }

    body.spring .size-item {
        background-color: #f0fbe6;
        border: 1px solid #73920b;
        color: #34675c;
    }

        body.spring .size-item.selected {
            background-color: #4cb5f5;
            border: 2px solid #73920b;
            color: #34675c;
        }

    body.spring .btn-primary {
        background-color: #73920b;
        border: none;
        color: #fff;
    }

    body.spring .btn-outline-light {
        border: 1px solid #73920b;
        color: #73920b;
        background: transparent;
    }

    body.spring .categories-buttons .btn {
        color: #34675c;
        border-color: #34675c;
    }
/*========================================================================================================*/
/* Літо */
body.summer {
    background-color: #3f681c;
    color: #ffbb00;
}

    /*body.summer .main-nav {
        background-color: #375e97;
    }*/

    body.summer .nav-link {
        color: #ffbb00;
    }

        body.summer .nav-link:hover {
            color: #fb6542;
        }

    body.summer .product-card {
        background-color: #fff3d1;
        color: #3f681c;
    }

    body.summer .filtersForm {
        background-color: #fff7e6;
        border: 1px solid #ffbb00;
    }

    body.summer .size-item {
        background-color: #fff7e6;
        border: 1px solid #ffbb00;
        color: #3f681c;
    }

        body.summer .size-item.selected {
            background-color: #4cb5f5;
            border: 2px solid #ffbb00;
            color: #3f681c;
        }

    body.summer .btn-primary {
        background-color: #ffbb00;
        border: none;
        color: #3f681c;
    }

    body.summer .btn-outline-light {
        border: 1px solid #ffbb00;
        color: #ffbb00;
        background: transparent;
    }

    body.summer .categories-buttons .btn {
        color: #ffbb00;
        border-color: #ffbb00;
    }

/*========================================================================================================*/
/* Осінь */
body.autumn {
    background-color: #7d4427;
    color: #a2c523;
}

    /*body.autumn .main-nav {
        background-color: #2e4600;
    }*/

    body.autumn .nav-link {
        color: #a2c523;
    }

        body.autumn .nav-link:hover {
            color: #486b00;
        }

    body.autumn .product-card {
        background-color: #f5e6cc;
        color: #7d4427;
    }

    body.autumn .filtersForm {
        background-color: #faf2e6;
        border: 1px solid #a2c523;
    }

    body.autumn .size-item {
        background-color: #faf2e6;
        border: 1px solid #a2c523;
        color: #7d4427;
    }

        body.autumn .size-item.selected {
            background-color: #4cb5f5;
            border: 2px solid #a2c523;
            color: #7d4427;
        }

    body.autumn .btn-primary {
        background-color: #a2c523;
        border: none;
        color: #7d4427;
    }

    body.autumn .btn-outline-light {
        border: 1px solid #a2c523;
        color: #a2c523;
        background: transparent;
    }

    body.autumn .categories-buttons .btn {
        color: #a2c523;
        border-color: #a2c523;
    }

/*========================================================================================================*/
/* Зима */
body.winter {
    background-color: #3a5199;
    color: #ffffff;
}

    /*body.winter .main-nav {
        background-color: #2f2e33;
    }*/

    body.winter .nav-link {
        color: #ffffff;
    }

        body.winter .nav-link:hover {
            color: #d5d6d2;
        }

    body.winter .product-card {
        background-color: #e6ecf7;
        color: #3a5199;
    }

    body.winter .filtersForm {
        background-color: #f0f4fa;
        border: 1px solid #d5d6d2;
    }

    body.winter .size-item {
        background-color: #f0f4fa;
        border: 1px solid #d5d6d2;
        color: #3a5199;
    }
        body.winter .size-item.selected {
            background-color: #4cb5f5;
            border: 2px solid #007bff;
            color: #3a5199;
        }

    body.winter .btn-primary {
        background-color: #4cb5f5;
        border: #d5d6d2;
        color: #e6ecf7;
    }

    body.winter .btn-outline-light {
        border: 1px solid #3a5199;
        color: #3a5199;
        background: transparent;

    }

    body.winter .categories-buttons .btn {
        color: #e6ecf7;
        border-color: #007bff;
    }

/*========================================================================================================*/
.season-switcher {
    margin-left: 20px;
    display: flex;
    gap: 10px;
}

    .season-switcher button {
        padding: 5px 10px;
        border: none;
        cursor: pointer;
        font-weight: 600;
        border-radius: 4px;
        /*background: #eee;*/
        transition: background 0.3s ease;
    }

        .season-switcher button:hover {
            background: #ccc;
        }





.butterful {
    font-family: 'Great Vibes', cursive; /* рукописний стиль */
    color: #ff69b4; /* ніжно-рожевий */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* легка тінь */
    
}



.hero {
    background: linear-gradient(135deg, #b3c100, #4cb5f5);
    color: #fff;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.brand-title {
    font-family: 'Great Vibes', cursive;
    font-size: 4rem;
}

.about, .categories, .advantages {
    text-align: center;
}

.site-footer {
    background: #333;
    color: #fff;
}

    .site-footer a {
        color: #4cb5f5;
        text-decoration: none;
    }



.categories-buttons .btn {
    min-width: 160px; /* однаковий розмір */
    font-size: 1.1rem;
    padding: 12px 20px;
    border-radius: 8px;
}





/*========================================================================================================*/
/* --- Адаптивність --- */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column; /* елементи стають вертикально */
        align-items: flex-start;
    }

    .logo-block {
        width: 100%;
        display: flex;
        justify-content: space-between; /* логотип зліва, кнопка справа */
        align-items: center;
    }

    .menu-toggle {
        display: block; /* показуємо кнопку тільки на мобільному */
        font-size: 2rem;
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
    }

    .main-nav {
        display: none;
        flex-direction: column;
        background: #444;
        width: 100%;
        padding: 10px 0;
        margin-top: 120px; /* меню нижче логотипа */
    }

        .main-nav.active {
            display: flex; /* показуємо при кліку */
        }

        .main-nav .nav-link {
            padding: 10px 20px;
            color: #fff;
            text-align: left;
        }

    .hero-buttons {
        flex-direction: column; /* кнопки одна під одною */
        align-items: stretch; /* розтягнути на всю ширину */
        gap: 12px;
        padding: 0 20px;
    }

        .hero-buttons .btn-lg {
            width: 100%;
            font-size: 1rem;
            padding: 14px 0;
            border-radius: 8px;
        }


    .categories-buttons {
        flex-direction: column; /* кнопки одна під одною */
        align-items: center; /* по центру */
    }

        .categories-buttons .btn {
            width: 80%; /* займають більшу частину ширини */
            margin-bottom: 12px;
        }
       
}