/* Global base styles — stub for AgroMilk */
:root {
    /* Inter для основного текста, Space Grotesk для заголовков */
    --font-main: 'Inter', system-ui, sans-serif;
    --font-heading: 'Space Grotesk', sans-serif;

    --bg: #FCFCFC;
    --text: #111814;
    --text-muted: #666;
    --text-muted-green: #5B6B61;

    --brand: #096766;
    --brand-muted: #E7F0F0;
    --alert: #B82A22;

    --bg-white: #FFFFFF;
    --bg-white-muted: #ffffff99;

    --bg-footer: #E4EDED;

    --list-item-marker: rgba(0, 0, 0, 0.2);
    --bg-black: rgba(0, 0, 0, 0.60);

}

* {
    box-sizing: border-box !important;
}

html {
    font-size: 20px;
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    line-height: 120%;
    font-size: .9rem;
    overflow-x: clip;
    color: var(--text);
    background: var(--bg);
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

h1 {
    margin: 1.8rem 0 2.6rem 0;
    font-size: 2.6rem;
    line-height: 120%;
    font-weight: 500;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--brand);
}

a:hover {
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--text);
}


.container {
    max-width: calc(1820px + 1.6rem);
    margin: 0 auto;
    padding: 0 0.8rem;
    width: 100%;
}


section {
    margin-bottom: 7.5rem;
}

img {
    max-width: 100%;
    height: auto;
}

/* Scroll reveal — toggled by assets/js/global.js */
@media (prefers-reduced-motion: no-preference) {
    html.js-reveal-ready section.js-reveal:not(.is-revealed) {
        opacity: 0;
        transform: translate3d(0, 1.25rem, 0);
    }

    html.js-reveal-ready section.js-reveal {
        transition:
            opacity 0.65s ease,
            transform 0.65s ease;
    }

    html.js-reveal-ready section.js-reveal.is-revealed {
        opacity: 1;
        transform: none;

    }
}

h2 {
    font-size: 2.6rem;
    font-family: var(--font-heading);
    line-height: 120%;
    margin: 0;
    font-weight: 500;
}

p {
    margin: 0 0 .5rem 0;
    line-height: 120%;
}


p:last-child {
    margin: 0;
}

button {
    font-family: var(--font-main);
    cursor: pointer;
}

/* Rating stars: stroke border + fill overlay (clip-path inset) */
.rating-star {
    position: relative;
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
}

.rating-star__base,
.rating-star__solid {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
}

.rating-star__solid {
    position: absolute;
    inset: 0;
}


.entry--page {
    padding-top: 1.8rem;
}

@media (max-width: 1599px) {
    html {
        font-size: 18px;
    }
}

@media (max-width: 1499px) {
    section {
        margin-bottom: 5rem;
    }
}

@media (max-width: 1399px) {
    html {
        font-size: 16px;
    }

    /* iOS zooms the page when a focused field is under 16px. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="hidden"]):not([type="image"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

@media (max-width: 1024px) {
    html {
        font-size: 16px;
    }

    h1 {
        font-size: 2rem;
        line-height: 100%;
    }

    h2 {
        font-size: 2rem;
        line-height: 100%;
    }
}

dialog {
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
        opacity 0.32s ease,
        transform 0.32s ease,
        overlay 0.32s ease allow-discrete,
        display 0.32s ease allow-discrete;
}

dialog[open] {
    opacity: 1;
    transform: translateY(0);
}

dialog::backdrop {
    opacity: 0;
    transition: opacity 0.32s ease,
        overlay 0.32s ease allow-discrete,
        display 0.32s ease allow-discrete;
    backdrop-filter: blur(2.5px);
    background: var(--list-item-marker);
    background: var(--10, rgba(9, 103, 102, 0.10));
}

dialog[open]::backdrop {
    opacity: 1;
}

@starting-style {
    dialog[open] {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    dialog[open]::backdrop {
        opacity: 0;
    }
}

/*
 * Mobile bottom sheets (.feedback-dialog / .thanks-dialog):
 * generic dialog[open] { transform/opacity } must not win — JS drives
 * --dialog-drag-y / --dialog-drag-opacity (see components + global.js).
 */
@media (max-width: 768px) {
    /* Stop the page under a sheet from rubber-banding / scrolling. */
    html.is-dialog-sheet-open,
    html.is-dialog-sheet-open body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    dialog.feedback-dialog,
    dialog.thanks-dialog {
        opacity: var(--dialog-drag-opacity, 1);
        transform: translate3d(0, var(--dialog-drag-y, 100%), 0);
        transition: none;
        overscroll-behavior: none;
    }

    dialog.feedback-dialog[open],
    dialog.thanks-dialog[open] {
        opacity: var(--dialog-drag-opacity, 1);
        transform: translate3d(0, var(--dialog-drag-y, 100%), 0);
    }

    dialog.feedback-dialog[open].is-sheet-ready,
    dialog.thanks-dialog[open].is-sheet-ready {
        transition: transform 0.32s ease, opacity 0.32s ease;
    }

    dialog.feedback-dialog[open].is-dragging,
    dialog.thanks-dialog[open].is-dragging {
        transition: none;
        touch-action: none;
    }

    dialog.feedback-dialog[open].is-dragging .feedback-dialog__inner,
    dialog.thanks-dialog[open].is-dragging .thanks-dialog__inner {
        overflow: hidden;
        touch-action: none;
        overscroll-behavior: none;
    }

    dialog.feedback-dialog .feedback-dialog__inner,
    dialog.thanks-dialog .thanks-dialog__inner {
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    dialog.feedback-dialog::backdrop,
    dialog.thanks-dialog::backdrop {
        opacity: var(--dialog-drag-opacity, 1);
        transition: none;
        touch-action: none;
    }

    dialog.feedback-dialog[open].is-sheet-ready::backdrop,
    dialog.thanks-dialog[open].is-sheet-ready::backdrop {
        transition: opacity 0.32s ease;
    }

    dialog.feedback-dialog[open].is-dragging::backdrop,
    dialog.thanks-dialog[open].is-dragging::backdrop {
        transition: none;
    }

    @starting-style {
        dialog.feedback-dialog[open],
        dialog.thanks-dialog[open] {
            opacity: 1;
            transform: translate3d(0, 100%, 0);
        }

        dialog.feedback-dialog[open]::backdrop,
        dialog.thanks-dialog[open]::backdrop {
            opacity: 1;
        }
    }
}

@media (prefers-reduced-motion: reduce) {

    dialog,
    dialog::backdrop {
        transition: none;
    }
}