:root {
    --c-main: #137dad;
    --main-font-family: "Fira Sans Extra Condensed", sans-serif;
    --c-main-font: #404040;
    --c-btn: #137dad;
    --c-btn-font: #fff;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}
body {
    font-family: var(--main-font-family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--c-main-font);
}
.site {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--c-btn-font);
    text-align: center;
    border: none;
    border-radius: 10px;
    background: var(--c-btn);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}
.btn:hover {
    transform: scale(1.02);
}
section h1.title {
    
}

section h2.title {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}


/* Стили для артикула в каталоге */
.loop-product-sku {
    font-size: 13px;
    color: #777; /* Делаем текст чуть бледнее, чтобы он не спорил с названием и ценой */
    margin-bottom: 5px;
    text-align: left; /* Выравнивание (можно изменить на center) */
}

.loop-product-sku span {
    font-weight: 600;
    color: #333; /* Сам номер артикула делаем темнее */
}


/* Стили для слова "Цена:" в каталоге */
.price-prefix {
    font-size: 15px;       /* Размер шрифта (сделайте чуть меньше или вровень с ценой) */
    font-weight: 400;      /* Делаем слово обычным (не жирным), чтобы выделить саму сумму */
    color: #666;           /* Чуть приглушаем цвет текста */
    margin-right: 4px;     /* Делаем небольшой отступ справа до самой цены */
    display: inline-block; /* Гарантируем, что текст останется в одной строке с ценой */
}