/* ===== RESET ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* ===== BASE ===== */

body {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    color: #222;

    margin: 0;
    padding: 20px 10px;
}

/* базовый контейнер (пока просто заготовка) */
.container {
    width: 1200px;
    margin: 0 auto;
}
header {
    position: relative;
    padding: 20px 10px;
}
.header h1 {
    text-align: center;
    margin: 0;
}
.auth-links {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    gap: 10px;
}
header a {
     text-decoration: none; /* убираем подчёркивание у ссылок в шапке */
     display: inline-block; /* делаем ссылку блочным по поведению (можно нормально наводиться) */
     color: #555;           /* базовый серый цвет */
 }
.auth-links a {
    padding: 6px 10px;
    border-radius: 6px;
    color: #333;
}

.auth-links a:hover {
    background: #007BFF;
    color: white;
}

.link-button {
    background: lightgray;
    border: none;
    padding: 6px 10px;

    color: #333;
    cursor: pointer;
    font: inherit;

    border-radius: 6px;
}

.link-button:hover {
    background: #007BFF;
    color: white;
}

.cart-button {
    padding: 6px 10px;
    border-radius: 6px;

    color: #333;
    background: transparent;

    transition: 0.2s;
}

.cart-button:hover {
    background: #007BFF;
    color: white;
}


/* эффект при наведении */
header a:hover {
    color: #111; /* темнее при наведении */
}

/* =========================
   HEADINGS (GLOBAL)
========================= */

h1 {
    font-size: 2.5rem; /* главный заголовок страницы */
    text-align: center; /* центрируем для витринного эффекта */
    margin-bottom: 20px; /* отделяем от контента */
}

h1 small {
    font-size: 1rem; /* подзаголовок */
    color: #666; /* приглушённый вторичный текст */
    display: block; /* перенос на новую строку */
}


@media (max-width: 768px) {

    .auth-links {
        position: static;          /* убираем absolute */
        transform: none;

        justify-content: center;   /* центрируем */
        margin-top: 10px;
    }

    .header {
        text-align: center;        /* чтобы всё красиво по центру */
    }
}