@media (max-width: 991px) {
    .main > .mainslide.header .hero-shell {
        grid-template-columns: minmax(220px, 1fr);
        width: min(420px, 100%);
    }

    .main > .mainslide.header .hero-logo {
        width: clamp(112px, 28vw, 156px);
        height: clamp(112px, 28vw, 156px);
        margin-bottom: 16px;
    }

    .main > .mainslide.header .monitoring {
        order: 1;
    }

    .main > .mainslide.header .block-middle {
        order: 2;
    }

    .main > .mainslide.header .hero-action {
        order: 3;
    }

    .main > .donate .tabs > .tab-links {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .main > .donate .tabs > .tab-links > li .tab-link {
        width: 100%;
        min-width: 0;
    }

    .main > .donate .donate-shop {
        grid-template-columns: 100%;
    }

    .main .donate .items > .item-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Mobile: the buy panel opens as a TALL bottom-sheet overlay on item tap (instead of a
       section scrolled to at the page bottom). It fills from a small top gap down to the
       very bottom edge; header (title + ×) and footer (Купить) stay fixed, body scrolls.
       Lifted above the navbar via the .container rule below. */
    .main > .donate .donate-sidebar {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 50000;
        display: none;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin: 0;
        padding: 0 12px;
        border-left: 0;
        background: rgba(5, 10, 20, 0.72);
        overflow: hidden;
    }

    body.donate-open { overflow: hidden; }
    body.donate-open .main > .donate .donate-sidebar { display: flex; }
    /* The overlay sits inside `.main > .donate > .container` which is a stacking context
       (z-index:3), so the overlay's own z-index can't beat the sticky navbar (9999). Lift
       that context above the navbar — but ONLY while the overlay is open, so normal
       browsing and desktop are untouched. */
    body.donate-open .main > .donate > .container { z-index: 50001; }

    .main > .donate .donate-sidebar .donate-panel { width: 100%; max-width: 640px; margin: 0; }
    .main > .donate .donate-sidebar .donate-panel > .wrapper { width: 100%; padding: 0; height: auto; }
    .main > .donate .donate-sidebar .donate-panel > .wrapper > .modal-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 86vh;
        height: 86dvh;
        max-height: 86dvh;
        border-radius: 18px;
        animation: donate-sheet-up .2s ease;
    }
    .main > .donate .donate-sidebar .donate-panel > .wrapper > .modal-content > .modal-header { flex: none; padding-right: 120px; }
    .main > .donate .donate-sidebar .donate-panel > .wrapper > .modal-content > .modal-footer { flex: none; }
    /* The body fills the space between the fixed header/footer; the description inside it
       grows to fill (no 220px desktop cap) so it reads "long" on mobile and scrolls only
       if it genuinely overflows. */
    .main > .donate .donate-sidebar .donate-panel > .wrapper > .modal-content > .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .main > .donate .donate-sidebar .modal-body .donate-description {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
    @keyframes donate-sheet-up { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }

    .donate-panel-close { display: flex !important; }

    /* The close × and the selected-item artwork both sat in the top-right corner and
       overlapped. On mobile, tuck the artwork to the left of the × (smaller) so both fit. */
    .main > .donate .donate-sidebar .donate-item-image { top: 14px; right: 58px; width: 60px; height: 60px; }

    /* Corner × also on the data-entry (checkout) and payment-method windows so they can be
       dismissed in one tap on a narrow screen. */
    #checkoutform > .wrapper > .modal-content,
    #methodform > .wrapper > .modal-content { position: relative; }
    #checkoutform .modal-header,
    #methodform .modal-header { padding-right: 46px; }

    .main > .donate .donate-products:after {
        display: none;
    }
}

@media (max-width: 767px) {
    .main > .mainslide.header > .container {
        min-height: auto;
        padding-top: 42px;
        padding-bottom: 48px;
        gap: 16px;
    }

    .main > .mainslide.header .description {
        display: flex;
        width: 100%;
        min-height: 0;
        padding: 16px;
        border-radius: 14px;
    }

    .main > .mainslide.header .monitoring {
        width: 100%;
        padding: 16px;
    }

    .main > .mainslide.header .hero-action {
        min-height: 0;
        padding: 16px;
        border-radius: 14px;
    }

    .main > .mainslide.header .monitoring .btn {
        font-size: 15px;
    }

    .main > .mainslide.donate > .container {
        padding-top: 36px;
        padding-bottom: 48px;
    }

    .main .donate .items > .item-list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 14px;
    }

    .main .donate .items > .item-list > .item-id {
        min-height: 318px;
        padding: 18px;
    }

    .main .donate .items > .item-list > .item-id > .image {
        width: min(190px, 100%);
        margin-top: 44px;
    }

    .donate-panel[data-id="donate"] .modal-header {
        font-size: 22px;
    }

    .donate-panel[data-id="donate"] .modal-footer .btn {
        flex-basis: 100%;
        width: 100%;
    }

    .donate-panel[data-id="donate"] .donate-description {
        max-height: 220px;
    }

    #checkoutform > .wrapper > .modal-content {
        border-radius: 16px !important;
    }

    #checkoutform .checkout-footer {
        grid-template-columns: 100%;
        padding-top: 20px;
    }

    #checkoutform .checkout-footer .btn[data-modal-close] {
        justify-self: stretch;
    }
}

@media (max-width: 479px) {
    .main > .donate .tabs > .tab-links,
    .main .donate .items > .item-list,
    #methodform .methods {
        grid-template-columns: 100%;
    }

    .main .donate .items > .item-list > .item-id > .discount {
        max-width: calc(100% - 96px);
    }

    #methodform .methods > li > .btn {
        grid-template-columns: 46px minmax(0, 1fr) 16px;
        min-height: 72px;
        height: auto;
        padding: 10px;
    }

    #methodform .method-icon {
        width: 46px;
        height: 46px;
    }

    #methodform .method-title {
        font-size: 15px;
    }

    #methodform .method-text {
        font-size: 12px;
    }

    #methodform .method-product {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    #methodform .method-product-image {
        width: 46px;
        height: 46px;
    }

    #methodform .method-product-price {
        grid-column: 1 / -1;
        justify-self: start;
    }

    #methodform > .wrapper > .modal-content {
        border-radius: 16px !important;
    }

    #numberform .easydonate-buy,
    #numberform .easydonate-tg {
        min-width: 0;
        width: 100%;
    }
}