/** Нужен для быстрых фиксов типа "подровнять" или "подвинуть" **/

/* === Arthrolix macet palette (Figma KVcyuIaupyBtyqUPifu2WR) === */
:root {
    --primary-yellow: #F5F5F5;
    /* Primary CTA buttons (header / form / order) — pink gradient, dark text */
    --big-button-gradient: linear-gradient(90deg, #F4CAD8 0%, #FF6AAF 100%);
    /* Secondary green button (.green-btn) */
    --accent-green: #2DAE74;
    --accent-green-border: #2DAE74;
    /* Brand highlight (#start h1, .selected) — macet teal-green */
    --accent-green-dark: #529881;
    /* Light section background — macet mint */
    --accent-green-soft: #EAF7F2;
}


/* Hero stat cards: neutral grey, no peach/orange */
#start .section__item.yellow {
    background: #F5F5F5;
}


.big-button {
    background: var(--big-button-gradient);
    color: #28261B;
}

.big-button.black {
    background: linear-gradient(90deg, #FFF 0%, #EFEFEF 100%);
}

#start h1 {
    color: var(--accent-green-dark);
}

#start .selected {
    -webkit-text-fill-color: var(--accent-green-dark);
}

.selected {
    background: var(--accent-green-dark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Composition packshot height per device — match macet (desktop 430px, scale down) */
#composition .section__image.big-width {
    max-height: 430px;
}

@media (max-width: 1024px) {
    #composition .section__image.big-width {
        max-height: 380px;
    }
}

@media (max-width: 768px) {
    #composition .section__image.big-width {
        max-height: 330px;
    }
}

@media (max-width: 480px) {
    #composition .section__image.big-width {
        max-height: 280px;
    }
}


/* #buy packshot — keep object-fit:contain (stock multi-1 cover-cropped it at <=768/<=420) */
#buy .buy-card__img {
    object-fit: contain;
}

@media (max-width: 768px) {
    #buy .buy-card__img {
        max-height: 300px;
    }
}

@media (max-width: 420px) {
    #buy .buy-card__img {
        max-height: 240px;
    }
}