/* =========================================================
   CATALOG — TURWELTBAND
   ========================================================= */


/* =========================================================
   ОСНОВНАЯ ОБЛАСТЬ
   ========================================================= */

main {

    max-width: 1200px;

    margin: 0 auto;

    padding: 40px;

}


main h1 {

    margin-top: 0;

    margin-bottom: 35px;

}


/* =========================================================
   ЗАГОЛОВОК КАТАЛОГА
   ========================================================= */

main > h1 {

    position: relative;

    display: inline-block;

    padding: 8px 18px;

    border:
        1px solid
        rgba(255, 63, 164, 0.45);

    background:
        rgba(17, 17, 22, 0.9);

    box-shadow:
        0 0 12px
        rgba(255, 63, 164, 0.12);

    font-family:
        monospace;

    font-size:
        26px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


main > h1::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -7px;

    width: 100%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff3fa4,
            #37f7ff,
            #ff3fa4,
            transparent
        );

    opacity:
        0.7;

}


/* =========================================================
   РАСКЛАДКА КАТАЛОГА
   ========================================================= */

.catalogLayout {

    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr);

    gap: 40px;

    align-items: start;

    width: 100%;

}


/* =========================================================
   БОКОВАЯ ПАНЕЛЬ
   ========================================================= */

.categorySidebar {

    position: sticky;

    top: 30px;

    grid-column: 1;

    grid-row: 1;

    padding: 20px;

    background:
        linear-gradient(
            180deg,
            #15151b,
            #0c0c10
        );

    border:
        1px solid
        rgba(255, 63, 164, 0.35);

    border-radius:
        6px;

    box-shadow:

        0 0 18px
        rgba(255, 63, 164, 0.08),

        inset 0 0 20px
        rgba(0, 0, 0, 0.45);

    overflow: hidden;

}


/* =========================================================
   CRT-ЛИНИИ ПАНЕЛИ
   ========================================================= */

.categorySidebar::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity:
        0.35;

}


/* =========================================================
   ЗАГОЛОВОК КАТЕГОРИЙ
   ========================================================= */

.categoryTitle {

    position: relative;

    margin-bottom:
        15px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid
        rgba(55, 247, 255, 0.25);

    color:
        #37f7ff;

    font-family:
        monospace;

    font-size:
        14px;

    font-weight:
        bold;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.categoryTitle::before {

    content:
        "▶ ";

    color:
        #ff3fa4;

}


/* =========================================================
   ГРУППЫ КАТЕГОРИЙ
   ========================================================= */

.categoryGroup {

    margin-top:
        5px;

}


/* =========================================================
   КНОПКИ КАТЕГОРИЙ
   ========================================================= */

.categoryButton {

    position:
        relative;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        11px 12px;

    border:
        1px solid
        transparent;

    border-radius:
        3px;

    background:
        transparent;

    color:
        white;

    text-align:
        left;

    font-family:
        monospace;

    font-size:
        15px;

    letter-spacing:
        0.5px;

    cursor:
        pointer;

    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;

}


.categoryButton:hover {

    background:
        rgba(55, 247, 255, 0.07);

    border-color:
        rgba(55, 247, 255, 0.12);

    color:
        #37f7ff;

}


.categoryButton.active {

    background:
        linear-gradient(
            90deg,
            rgba(255,63,164,0.9),
            rgba(255,63,164,0.55)
        );

    border-color:
        rgba(255,63,164,0.7);

    color:
        white;

    box-shadow:
        0 0 10px
        rgba(255,63,164,0.2);

}


/* =========================================================
   СТРЕЛКА КАТЕГОРИИ
   ========================================================= */

.categoryArrow {

    margin-left:
        10px;

    color:
        #37f7ff;

    font-family:
        monospace;

    font-size:
        14px;

    transition:
        transform 0.2s,
        color 0.2s;

}


/* =========================================================
   ПОДКАТЕГОРИИ
   ========================================================= */

.subcategoryList {

    display:
        none;

    margin-bottom:
        5px;

    padding-left:
        12px;

}


.categoryGroup.open
.subcategoryList {

    display:
        block;

}


/* =========================================================
   КНОПКИ ПОДКАТЕГОРИЙ
   ========================================================= */

.subcategoryButton {

    width:
        100%;

    padding:
        9px 12px;

    border:
        none;

    border-left:
        2px solid
        rgba(55,247,255,0.18);

    background:
        transparent;

    color:
        #aaa;

    text-align:
        left;

    font-family:
        monospace;

    cursor:
        pointer;

    transition:
        color 0.2s,
        border-color 0.2s,
        background 0.2s;

}


.subcategoryButton:hover {

    border-left-color:
        #37f7ff;

    background:
        rgba(55,247,255,0.04);

    color:
        #37f7ff;

}


.subcategoryButton.active {

    border-left-color:
        #ff3fa4;

    color:
        #ff3fa4;

}


/* =========================================================
   СЕТКА ТОВАРОВ
   ========================================================= */

.catalog {

    grid-column:
        2;

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px, 1fr)
        );

    gap:
        25px;

    min-width:
        0;

}


/* =========================================================
   КАРТОЧКА ТОВАРА
   ========================================================= */

.productCard {

    position:
        relative;

    padding:
        18px;

    background:
        linear-gradient(
            180deg,
            #15151b,
            #0d0d11
        );

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius:
        8px;

    cursor:
        pointer;

    overflow:
        hidden;

    transition:
        transform 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;

}


.productCard::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    border-radius:
        inherit;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.012) 0px,
            rgba(255,255,255,0.012) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity:
        0.3;

}


.productCard:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(255,63,164,0.75);

    box-shadow:

        0 0 20px
        rgba(255,63,164,0.15),

        inset 0 0 15px
        rgba(0,0,0,0.35);

}


/* =========================================================
   ИЗОБРАЖЕНИЕ ТОВАРА
   ========================================================= */

.productCard img {

    position:
        relative;

    z-index:
        1;

    display:
        block;

    width:
        100%;

    height:
        220px;

    object-fit:
        contain;

    margin-bottom:
        15px;

}


/* =========================================================
   НАЗВАНИЕ ТОВАРА
   ========================================================= */

.productCard h3 {

    position:
        relative;

    z-index:
        1;

    margin:
        0 0 10px;

    color:
        #f2edf4;

    font-size:
        18px;

    line-height:
        1.35;

}


/* =========================================================
   ЦЕНА
   ========================================================= */

.productPrice {

    position:
        relative;

    z-index:
        1;

    margin-bottom:
        8px;

    color:
        #ff3fa4;

    font-family:
        monospace;

    font-size:
        20px;

    font-weight:
        bold;

}


/* =========================================================
   ОСТАТОК
   ========================================================= */

.productStock {

    position:
        relative;

    z-index:
        1;

    margin-bottom:
        10px;

    color:
        #888;

    font-family:
        monospace;

    font-size:
        13px;

}


/* =========================================================
   УПРАВЛЕНИЕ КОЛИЧЕСТВОМ
   ========================================================= */

.productControls {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin:
        14px 0;

}


.quantityButton {

    width:
        30px;

    height:
        30px;

    padding:
        0;

    border:
        1px solid
        #444;

    border-radius:
        50%;

    background:
        #0b0b0f;

    color:
        white;

    font-family:
        monospace;

    font-size:
        18px;

    line-height:
        28px;

    cursor:
        pointer;

    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;

}


.quantityButton:hover {

    border-color:
        #37f7ff;

    color:
        #37f7ff;

    background:
        rgba(55,247,255,0.05);

}


.quantityButton:disabled {

    opacity:
        0.35;

    cursor:
        not-allowed;

}


.quantityButton:disabled:hover {

    border-color:
        #444;

    color:
        white;

    background:
        #0b0b0f;

}


.productQuantity {

    min-width:
        20px;

    color:
        white;

    font-family:
        monospace;

    text-align:
        center;

    font-size:
        15px;

}


/* =========================================================
   КНОПКА "В КОРЗИНУ"
   ========================================================= */

.addToCartButton {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    padding:
        10px;

    border:
        1px solid
        #ff3fa4;

    border-radius:
        5px;

    background:
        #ff3fa4;

    color:
        white;

    font-family:
        monospace;

    font-size:
        14px;

    cursor:
        pointer;

    transition:
        background 0.2s,
        box-shadow 0.2s,
        transform 0.15s;

}


.addToCartButton:hover {

    background:
        #ff5aae;

    box-shadow:
        0 0 12px
        rgba(255,63,164,0.35);

    transform:
        translateY(-1px);

}


.addToCartButton:active {

    transform:
        translateY(1px);

}


.addToCartButton:disabled {

    background:
        #333;

    border-color:
        #444;

    color:
        #777;

    cursor:
        not-allowed;

    box-shadow:
        none;

    transform:
        none;

}


/* =========================================================
   ИЗБРАННОЕ
   ========================================================= */

.favoriteButton {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        100%;

    margin-top:
        7px;

    padding:
        6px;

    border:
        none;

    background:
        transparent;

    color:
        #777;

    font-family:
        monospace;

    font-size:
        13px;

    cursor:
        pointer;

    transition:
        color 0.2s;

}


.favoriteButton:hover {

    color:
        #ff3fa4;

}


.favoriteButton.favoriteActive {

    color:
        #ff3fa4;

}


/* =========================================================
   РАСПРОДАНО
   ========================================================= */

.productCard.soldOut {

    border-color:
        rgba(255,255,255,0.06);

    opacity:
        0.72;

}


.productCard.soldOut:hover {

    border-color:
        rgba(255,63,164,0.5);

    box-shadow:
        0 0 15px
        rgba(255,63,164,0.08);

}


/* =========================================================
   ПЛАШКА "РАСПРОДАНО"
   ========================================================= */

.soldOutBadge {

    position:
        absolute;

    top:
        15px;

    left:
        15px;

    z-index:
        5;

    padding:
        6px 10px;

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius:
        5px;

    background:
        rgba(30,30,35,0.95);

    color:
        #ddd;

    font-family:
        monospace;

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        0.5px;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,0.4);

}


/* =========================================================
   ТЕКСТ "РАСПРОДАНО"
   В МОДАЛЬНОМ ОКНЕ
   ========================================================= */

.soldOutText {

    color:
        #ff6b9d !important;

    font-weight:
        bold;

}


/* =========================================================
   КНОПКА "РАСПРОДАНО"
   ========================================================= */

.soldOutButton {

    background:
        #333 !important;

    color:
        #777 !important;

    cursor:
        not-allowed !important;

    box-shadow:
        none !important;

}


/* =========================================================
   МОДАЛЬНОЕ ОКНО
   ========================================================= */

.productModal {

    display:
        none;

    position:
        fixed;

    inset:
        0;

    z-index:
        1000;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(0,0,0,0.78);

    backdrop-filter:
        blur(3px);

}


.productModal.active {

    display:
        flex;

}


/* =========================================================
   СОДЕРЖИМОЕ МОДАЛЬНОГО ОКНА
   ========================================================= */

.productModalContent {

    position:
        relative;

    display:
        flex;

    gap:
        30px;

    width:
        min(800px, 100%);

    max-height:
        90vh;

    overflow-y:
        auto;

    padding:
        30px;

    background:
        linear-gradient(
            180deg,
            #17151b,
            #0c0c10
        );

    border:
        1px solid
        rgba(255,63,164,0.35);

    border-radius:
        8px;

    box-shadow:

        0 0 30px
        rgba(255,63,164,0.2),

        inset 0 0 20px
        rgba(0,0,0,0.45);

}


.productModalContent::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    border-radius:
        inherit;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.012) 0px,
            rgba(255,255,255,0.012) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity:
        0.3;

}


/* =========================================================
   КНОПКА ЗАКРЫТИЯ
   ========================================================= */

.closeProductModal {

    position:
        absolute;

    top:
        10px;

    right:
        15px;

    z-index:
        5;

    width:
        35px;

    height:
        35px;

    border:
        none;

    background:
        transparent;

    color:
        #777;

    font-family:
        monospace;

    font-size:
        28px;

    line-height:
        35px;

    cursor:
        pointer;

    transition:
        color 0.2s;

}


.closeProductModal:hover {

    color:
        #ff3fa4;

}


/* =========================================================
   ИЗОБРАЖЕНИЕ В МОДАЛЬНОМ ОКНЕ
   ========================================================= */

.modalProductImage {

    position:
        relative;

    z-index:
        1;

    width:
        320px;

    height:
        320px;

    flex-shrink:
        0;

    object-fit:
        contain;

    border-radius:
        10px;

}


/* =========================================================
   ИНФОРМАЦИЯ О ТОВАРЕ
   ========================================================= */

.modalProductInfo {

    position:
        relative;

    z-index:
        1;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;

}


.modalProductInfo h2 {

    margin-top:
        0;

    margin-bottom:
        15px;

    color:
        #f2edf4;

    font-size:
        28px;

    line-height:
        1.25;

}


/* =========================================================
   ОПИСАНИЕ
   ========================================================= */

.modalProductDescription {

    margin:
        0;

    color:
        #ccc;

    line-height:
        1.6;

}


/* =========================================================
   ЦЕНА В МОДАЛЬНОМ ОКНЕ
   ========================================================= */

.modalProductPrice {

    margin-top:
        18px;

    color:
        #ff3fa4;

    font-family:
        monospace;

    font-size:
        24px;

    font-weight:
        bold;

}


/* =========================================================
   НАЛИЧИЕ В МОДАЛЬНОМ ОКНЕ
   ========================================================= */

.modalProductStock {

    margin-top:
        8px;

    color:
        #999;

    font-family:
        monospace;

}


/* =========================================================
   КОЛИЧЕСТВО В МОДАЛЬНОМ ОКНЕ
   ========================================================= */

.modalQuantity {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        20px;

}


.modalQuantity button {

    width:
        36px;

    height:
        36px;

    border:
        1px solid
        #444;

    border-radius:
        6px;

    background:
        #0b0b0f;

    color:
        white;

    font-family:
        monospace;

    font-size:
        20px;

    cursor:
        pointer;

    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;

}


.modalQuantity button:hover {

    border-color:
        #37f7ff;

    color:
        #37f7ff;

}


.modalQuantity button:disabled {

    opacity:
        0.35;

    cursor:
        not-allowed;

}


.modalQuantity button:disabled:hover {

    border-color:
        #444;

    color:
        white;

}


#modalQuantity {

    min-width:
        25px;

    color:
        white;

    font-family:
        monospace;

    text-align:
        center;

    font-size:
        18px;

}


/* =========================================================
   КНОПКА В МОДАЛЬНОМ ОКНЕ
   ========================================================= */

.modalAddToCart {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    margin-top:
        20px;

    padding:
        13px 20px;

    border:
        1px solid
        #ff3fa4;

    border-radius:
        6px;

    background:
        #ff3fa4;

    color:
        white;

    font-family:
        monospace;

    font-size:
        16px;

    cursor:
        pointer;

    transition:
        background 0.2s,
        box-shadow 0.2s,
        transform 0.15s;

}


.modalAddToCart:hover {

    background:
        #ff5aae;

    box-shadow:
        0 0 15px
        rgba(255,63,164,0.35);

}


.modalAddToCart:active {

    transform:
        translateY(1px);

}


.modalAddToCart:disabled {

    opacity:
        1;

}


/* =========================================================
   СТРАНИЦА ИЗБРАННОГО
   ========================================================= */

.favoritesGrid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px, 1fr)
        );

    gap:
        25px;

}


/* =========================================================
   КАРТОЧКА ИЗБРАННОГО
   ========================================================= */

.favoriteCard {

    position:
        relative;

    padding:
        18px;

    background:
        linear-gradient(
            180deg,
            #15151b,
            #0d0d11
        );

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius:
        8px;

    overflow:
        hidden;

    transition:
        transform 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;

}


.favoriteCard:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(255,63,164,0.75);

    box-shadow:
        0 0 20px
        rgba(255,63,164,0.15);

}


.favoriteCard img {

    display:
        block;

    width:
        100%;

    height:
        220px;

    object-fit:
        contain;

    margin-bottom:
        15px;

}


.favoriteCard h3 {

    margin:
        0 0 10px;

    font-size:
        18px;

}


.favoritePrice {

    margin-bottom:
        8px;

    color:
        #ff3fa4;

    font-family:
        monospace;

    font-size:
        20px;

    font-weight:
        bold;

}


.favoriteStock {

    margin-bottom:
        15px;

    color:
        #888;

    font-family:
        monospace;

    font-size:
        13px;

}


/* =========================================================
   КНОПКА КОРЗИНЫ
   ========================================================= */

.favoriteCartButton {

    width:
        100%;

    padding:
        10px;

    border:
        1px solid
        #ff3fa4;

    border-radius:
        5px;

    background:
        #ff3fa4;

    color:
        white;

    font-family:
        monospace;

    cursor:
        pointer;

    font-size:
        14px;

    transition:
        background 0.2s,
        box-shadow 0.2s;

}


.favoriteCartButton:hover {

    background:
        #ff5aae;

    box-shadow:
        0 0 12px
        rgba(255,63,164,0.3);

}


/* =========================================================
   УДАЛЕНИЕ ИЗ ИЗБРАННОГО
   ========================================================= */

.removeFavoriteButton {

    width:
        100%;

    margin-top:
        8px;

    padding:
        7px;

    border:
        none;

    background:
        transparent;

    color:
        #777;

    font-family:
        monospace;

    cursor:
        pointer;

    font-size:
        13px;

    transition:
        color 0.2s;

}


.removeFavoriteButton:hover {

    color:
        #ff3fa4;

}


/* =========================================================
   ПУСТОЕ ИЗБРАННОЕ
   ========================================================= */

.emptyFavorites {

    grid-column:
        1 / -1;

    padding:
        80px 20px;

    text-align:
        center;

}


.emptyFavoritesIcon {

    margin-bottom:
        15px;

    color:
        #ff3fa4;

    font-family:
        monospace;

    font-size:
        60px;

    text-shadow:
        0 0 10px
        rgba(255,63,164,0.25);

}


.emptyFavorites h2 {

    margin-bottom:
        10px;

}


.emptyFavorites p {

    margin-bottom:
        25px;

    color:
        #888;

}


/* =========================================================
   КНОПКА "В КАТАЛОГ"
   ========================================================= */

.favoritesCatalogButton {

    display:
        inline-block;

    padding:
        11px 20px;

    border:
        1px solid
        #ff3fa4;

    border-radius:
        5px;

    background:
        #ff3fa4;

    color:
        white;

    font-family:
        monospace;

    transition:
        background 0.2s,
        box-shadow 0.2s;

}


.favoritesCatalogButton:hover {

    background:
        #ff5aae;

    box-shadow:
        0 0 12px
        rgba(255,63,164,0.3);

}


/* =========================================================
   ИЗБРАННОЕ В МОДАЛЬНОМ ОКНЕ
   ========================================================= */

.modalFavoriteButton {

    width:
        100%;

    margin-top:
        10px;

    padding:
        12px 20px;

    border:
        1px solid
        #ff3fa4;

    border-radius:
        6px;

    background:
        transparent;

    color:
        white;

    font-family:
        monospace;

    font-size:
        16px;

    cursor:
        pointer;

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;

}


.modalFavoriteButton:hover {

    background:
        rgba(
            255,
            63,
            164,
            0.12
        );

    box-shadow:
        0 0 10px
        rgba(
            255,
            63,
            164,
            0.25
        );

}


.modalFavoriteButton.favoriteActive {

    background:
        #ff3fa4;

    color:
        white;

    box-shadow:
        0 0 12px
        rgba(
            255,
            63,
            164,
            0.4
        );

}


.modalFavoriteButton.favoriteActive:hover {

    background:
        #ff5aae;

}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 800px) {

    main {

        padding:
            25px 15px;

    }


    main > h1 {

        margin-bottom:
            30px;

        padding:
            7px 14px;

        font-size:
            22px;

    }


    .catalogLayout {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .categorySidebar {

        position:
            relative;

        top:
            auto;

        grid-column:
            1;

        grid-row:
            1;

        padding:
            16px;

    }


    .catalog {

        grid-column:
            1;

        grid-row:
            2;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            15px;

    }


    .categoryButton {

        padding:
            10px;

    }


    .subcategoryButton {

        padding:
            8px 10px;

    }


    .productCard {

        padding:
            14px;

    }


    .productCard img {

        height:
            180px;

        margin-bottom:
            12px;

    }


    .productCard h3 {

        font-size:
            16px;

        line-height:
            1.3;

    }


    .productPrice {

        font-size:
            17px;

    }


    .productStock {

        font-size:
            12px;

    }


    .productControls {

        gap:
            9px;

        margin:
            12px 0;

    }


    .quantityButton {

        width:
            28px;

        height:
            28px;

        font-size:
            17px;

        line-height:
            26px;

    }


    .addToCartButton {

        padding:
            9px 6px;

        font-size:
            13px;

    }


    .favoriteButton {

        font-size:
            12px;

    }


    .soldOutBadge {

        top:
            10px;

        left:
            10px;

        padding:
            5px 8px;

        font-size:
            10px;

    }


    /* =========================
       МОДАЛЬНОЕ ОКНО
       ========================= */

    .productModal {

        padding:
            12px;

        align-items:
            center;

    }


    .productModalContent {

        flex-direction:
            column;

        align-items:
            center;

        gap:
            18px;

        width:
            100%;

        max-height:
            92vh;

        padding:
            24px 18px;

        border-radius:
            7px;

    }


    .modalProductImage {

        width:
            210px;

        height:
            210px;

    }


    .modalProductInfo {

        width:
            100%;

    }


    .modalProductInfo h2 {

        margin-bottom:
            12px;

        font-size:
            23px;

    }


    .modalProductDescription {

        font-size:
            14px;

        line-height:
            1.55;

    }


    .modalProductPrice {

        margin-top:
            14px;

        font-size:
            21px;

    }


    .modalProductStock {

        font-size:
            13px;

    }


    .modalQuantity {

        margin-top:
            15px;

    }


    .modalAddToCart {

        margin-top:
            16px;

        padding:
            12px;

        font-size:
            14px;

    }


    .modalFavoriteButton {

        padding:
            10px;

        font-size:
            14px;

    }


    /* =========================
       ИЗБРАННОЕ
       ========================= */

    .favoritesGrid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            15px;

    }


    .favoriteCard {

        padding:
            14px;

    }


    .favoriteCard img {

        height:
            180px;

    }


    .favoriteCard h3 {

        font-size:
            16px;

    }


    .favoritePrice {

        font-size:
            17px;

    }

}


/* =========================================================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ
   ========================================================= */

@media (max-width: 480px) {

    main {

        padding:
            20px 10px;

    }


    main > h1 {

        font-size:
            20px;

        letter-spacing:
            1.5px;

    }


    .categorySidebar {

        padding:
            13px;

    }


    .categoryTitle {

        font-size:
            13px;

    }


    .categoryButton {

        font-size:
            14px;

    }


    .catalog {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }


    .productCard {

        padding:
            15px;

    }


    .productCard img {

        height:
            210px;

    }


    .productCard h3 {

        font-size:
            17px;

    }


    .productPrice {

        font-size:
            19px;

    }


    .productStock {

        font-size:
            13px;

    }


    .quantityButton {

        width:
            30px;

        height:
            30px;

    }


    .addToCartButton {

        padding:
            10px;

        font-size:
            14px;

    }


    .favoriteButton {

        font-size:
            13px;

    }


    /* =========================
       МОДАЛЬНОЕ ОКНО
       ========================= */

    .productModal {

        padding:
            8px;

    }


    .productModalContent {

        gap:
            15px;

        padding:
            22px 15px;

    }


    .modalProductImage {

        width:
            180px;

        height:
            180px;

    }


    .modalProductInfo h2 {

        font-size:
            21px;

    }


    .modalProductDescription {

        font-size:
            13px;

    }


    .modalProductPrice {

        font-size:
            20px;

    }


    /* =========================
       ИЗБРАННОЕ
       ========================= */

    .favoritesGrid {

        grid-template-columns:
            1fr;

    }


    .favoriteCard img {

        height:
            220px;

    }


    .emptyFavorites {

        padding:
            60px 15px;

    }


    .emptyFavoritesIcon {

        font-size:
            50px;

    }

}