/* Телефон и планшет (до 899px, включая альбомный S23) на весь экран.
   С 900px — ПК: фиксированный кадр макета 360×640 по центру.
   Селектор с body переживает мягкую навигацию, когда CSS страницы
   оказывается в конце <head>. */

@media (max-width: 899px) {
    body .home-screen,
    body .wishlist-screen,
    body .wishlist-item-screen,
    body .my-wishlists-screen,
    body .profile,
    body .profile-screen,
    body .friend-profile-screen,
    body .product-screen,
    body .start-screen,
    body .success-screen,
    body .congrats-screen,
    body .error-screen,
    body .login-new,
    body .legal-doc {
        width: 100%;
        height: 100svh;
        height: 100dvh;
        min-height: 100svh;
        min-height: 100dvh;
        align-items: stretch;
        justify-content: stretch;
    }

    body .profile {
        padding: 0;
    }

    body .login-new__frame {
        width: 100%;
        height: 100%;
        flex: 1 1 auto;
    }

    body:has(.friends-screen),
    body:has(.notifications-screen) {
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    body .home-screen__phone,
    body .wishlist-screen__phone,
    body .wishlist-item-screen__phone,
    body .my-wishlists-phone,
    body .profile__phone,
    body .profile-screen__phone,
    body .friend-profile-screen__phone,
    body .product-screen__phone,
    body .start-screen__phone,
    body .success-screen__phone,
    body .congrats-screen__phone,
    body .error-screen__phone,
    body .login-new__phone,
    body .legal-doc__phone,
    body .friends-screen,
    body .notifications-screen {
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        max-height: none;
        margin-inline: 0;
        border-radius: 0;
        flex: 1 1 auto;
    }

    body .wishlist-screen__phone:has(#wishlist-fulfill-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-settings-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-edit-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-delete-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-member-remove-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-item-delete-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-members-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-invite-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-forbidden-sheet.app-sheet--open) {
        border-radius: 0;
    }

    #wishlist-fulfill-sheet .app-sheet__panel,
    #wishlist-settings-sheet .app-sheet__panel,
    #wishlist-edit-sheet .app-sheet__panel,
    #wishlist-delete-sheet .app-sheet__panel,
    #wishlist-member-remove-sheet .app-sheet__panel,
    #wishlist-item-delete-sheet .app-sheet__panel,
    #wishlist-members-sheet .app-sheet__panel,
    #wishlist-invite-sheet .app-sheet__panel,
    #wishlist-forbidden-sheet .app-sheet__panel {
        width: 100%;
        max-width: none;
    }

    .wishlist-settings__list {
        width: calc(100% + 30px);
        max-width: none;
    }

    .wc-confirm-dialog {
        width: 100%;
        max-width: none;
    }

    /* Контент макета 330px не растягиваем вместе с full-bleed холстом. */
    body .home-screen__phone,
    body .my-wishlists-phone,
    body .friend-profile-screen__phone,
    body .wishlist-item-screen__phone,
    body .profile__phone,
    body .product-screen__phone,
    body .wishlist-screen__phone:has(#wishlist-form) {
        align-items: center;
    }
}

/* Уже 360 макет не влезает. Сначала кадр по центру, потом масштаб от
   его середины: иначе он липнет влево и правый край, включая кнопку
   действий, обрезается о ширину экрана. */
@media (max-width: 359px) {
    body .home-screen,
    body .wishlist-screen,
    body .wishlist-item-screen,
    body .my-wishlists-screen,
    body .profile,
    body .profile-screen,
    body .friend-profile-screen,
    body .product-screen,
    body .start-screen,
    body .success-screen,
    body .congrats-screen,
    body .error-screen,
    body .login-new,
    body .legal-doc,
    body:has(.friends-screen),
    body:has(.notifications-screen) {
        justify-content: center;
        align-items: flex-start;
    }

    body .home-screen__phone,
    body .wishlist-screen__phone,
    body .wishlist-item-screen__phone,
    body .my-wishlists-phone,
    body .profile__phone,
    body .profile-screen__phone,
    body .friend-profile-screen__phone,
    body .product-screen__phone,
    body .start-screen__phone,
    body .success-screen__phone,
    body .congrats-screen__phone,
    body .error-screen__phone,
    body .legal-doc__phone,
    body .friends-screen,
    body .notifications-screen,
    body .login-new__frame {
        width: 360px;
        max-width: none;
        height: calc(100dvh * 360px / 100vw);
        margin-inline: auto;
        flex: 0 0 auto;
        transform: scale(calc(100vw / 360px));
        transform-origin: top center;
    }

    body .login-new__phone {
        width: 100%;
        max-width: none;
        transform: none;
    }
}

@media (min-width: 900px) {
    body .home-screen,
    body .wishlist-screen,
    body .wishlist-item-screen,
    body .my-wishlists-screen,
    body .profile,
    body .profile-screen,
    body .friend-profile-screen,
    body .product-screen,
    body .start-screen,
    body .success-screen,
    body .congrats-screen,
    body .error-screen,
    body .login-new,
    body .legal-doc {
        width: 100%;
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        align-items: center;
        justify-content: center;
    }

    body .login-new__frame {
        width: auto;
        height: auto;
        flex: 0 0 auto;
    }

    body:has(.friends-screen),
    body:has(.notifications-screen) {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        align-items: center;
        justify-content: center;
    }

    body .home-screen__phone,
    body .wishlist-screen__phone,
    body .wishlist-item-screen__phone,
    body .my-wishlists-phone,
    body .profile__phone,
    body .profile-screen__phone,
    body .friend-profile-screen__phone,
    body .product-screen__phone,
    body .start-screen__phone,
    body .success-screen__phone,
    body .congrats-screen__phone,
    body .error-screen__phone,
    body .login-new__phone,
    body .legal-doc__phone,
    body .friends-screen,
    body .notifications-screen {
        width: 360px;
        max-width: 360px;
        height: 640px;
        min-height: 640px;
        max-height: 640px;
        margin-inline: auto;
        /* На ПК без скругления: иначе низ sheet/плашек режется в углы 32px */
        border-radius: 0;
        flex: 0 0 auto;
    }

    /* ID в :has() сильнее class-only; иначе wishlist.css снова ставит 32px 32px 0 0 */
    body .wishlist-screen__phone:has(#wishlist-fulfill-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-settings-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-edit-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-delete-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-member-remove-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-item-delete-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-gift-how-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-members-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-invite-sheet.app-sheet--open),
    body .wishlist-screen__phone:has(#wishlist-forbidden-sheet.app-sheet--open),
    body .home-screen__phone:has(.app-sheet.app-sheet--open),
    body .wishlist-item-screen__phone:has(.app-sheet.app-sheet--open),
    body .my-wishlists-phone:has(.app-sheet.app-sheet--open),
    body .profile__phone:has(.app-sheet.app-sheet--open),
    body .profile-screen__phone:has(.app-sheet.app-sheet--open),
    body .friend-profile-screen__phone:has(.app-sheet.app-sheet--open),
    body .product-screen__phone:has(.app-sheet.app-sheet--open),
    body .friends-screen:has(.app-sheet.app-sheet--open) {
        border-radius: 0;
    }
}

.glass-fit-before::before {
    background-image: var(--glass-before) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 100% 100% !important;
}

.glass-fit-after::after {
    background-image: var(--glass-after) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 100% 100% !important;
}

.glass-fit-self {
    background-image: var(--glass-self) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 100% 100% !important;
}