@media (max-width:670px) {
    .framer-toolbar {
        position: fixed !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: #fff;
        padding: 5px 15px;
        border-radius: 18px;
        display: flex;
        gap: 15px;
        box-shadow: 2px 4px 12px #00000014;
        z-index: 100;
        border: 0.1px solid #F2E9E9;
        width: 300px !important;
    }


    #cart {
        background: #0271e3;
        color: white;
        min-width: 75px;
        border-radius: 10px;
        font-size: 12px !important;
        font-weight: 600;
        padding: 3px 10px !important;
    }

    .framer-modal-content {
        width: 100% !important;
        border-radius: 0 !important;
    }

    .size-save-row {
        position: relative !important;
        bottom: 105px !important;
    }

    .size-save-row .left {
        left: -70px !important;
        position: relative;
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    .size-save-row .right {
        flex: 0 0 auto;
        right: -72px !important;
        position: relative !important;
    }

.edit-zoom {
        position: absolute !important;
        bottom: 152px !important;
    }

    .passepartout-option{
        width: 85px !important;
        height: auto !important;  /* авто-висота — вміщує картинку + підпис */
        min-height: 90px !important;
    }

}


@media (max-width: 720px) {
    /* сам круглий “плюс” */


    #framer-app {
        width: 100vw;
        height: auto !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .thumb-wrap {
        box-shadow: rgba(0, 0, 0, 0.07) -2px -2px 4px 0px, rgba(0, 0, 0, 0.11) 7.01px 8.01px 16.87px 0px, rgba(0, 0, 0, 0.09) 5.9px 4.9px 10.017px 0px, rgba(0, 0, 0, 0.07) -0.15px 4.85px 3.32px 0px, rgba(0, 0, 0, 0.05) 2.85px 1.85px 0.21px 0px;
    }


    /* Панель внизу: розтягуємо кнопки рівномірно */
    .bottom-controls {
        width: 100%;
        left: 0;
        transform: none;
        gap: 0;
        /* щоб не ламало рівномірність */
        justify-content: space-between;
        padding: 8px 10px;
    }

    /* Всі звичайні кнопки — однакова ширина */
    .bottom-controls > .control-item {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Центруємо контент всередині */
    .bottom-controls > .control-item {
        align-items: center;
        justify-content: center;
    }

    /* “Плюс” прибираємо з потоку, робимо floating */
    #add-more-btn-control {
        flex: 0 0 auto;
        position: fixed;
        right: 14px;
        bottom: calc(70px + env(safe-area-inset-bottom));
        /* підніми як треба */
        z-index: 9999;
        padding: 0;
        /* щоб не роздувало */
    }

    #add-more-btn-control .add-style {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #cart a span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 20px;
        line-height: 1;
    }



    /* inner modal має бути над усім екраном */
    .framer-modal-inner {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2050 !important;
    }

    .framer-modal-content {
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        max-width: none;
        bottom: 0px !important;
        box-shadow: 0 5px 25px rgba(0, 0, 0, .5);
        height: 195px !important;
        position: fixed !important;
        overflow: hidden;
    }

    /* Паспарту може мати більше опцій — гнучка висота з прокруткою */
    #passepartout-modal .framer-modal-content,
    #passepartout-modal-edit .framer-modal-content {
        height: auto !important;
        min-height: 170px;
        max-height: 55vh;
        overflow-y: auto;
    }

    /* сам bottom-sheet */
    .framer-modal-inner .framer-modal-content {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        transform: none !important;
        max-width: none !important;
        width: 100% !important;

        border-radius: 0 !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   MOBILE: Нативний horizontal scroll замість Swiper
   ========================================================================== */
@media (max-width: 768px) {

    /* Mobile modal має position relative для градієнта */
    #size-modal .framer-modal-content,
    #size-modal-edit .framer-modal-content {
        position: relative;
        overflow: hidden;
        /* Щоб градієнт не вилазив */
    }

    /* Ховаємо Swiper контейнер, використовуємо простий flex scroll */
    .size-swiper,
    .size-swiper-edit {
        overflow: visible !important;
        position: relative;
        /* Для ::after градієнта */
    }

    .size-swiper .swiper-wrapper,
    .size-swiper-edit .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 15px 15px 20px 0px;
        /* трохи більше знизу */
        transform: none !important;
        /* Ховаємо scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* ⭐ Градієнт hint що можна скролити */
        position: relative;
    }


    .size-swiper .swiper-wrapper::-webkit-scrollbar,
    .size-swiper-edit .swiper-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Слайди */
    .swiper-slide {
        flex-shrink: 0 !important;
        scroll-snap-align: center;
        width: auto !important;
        margin-right: 0 !important;
        gap: 8px;
    }

    .swiper-slide img {
        max-width: 60px !important;
        width: 60px !important;
        height: auto;
    }

    .size-option-btn {
        font-size: 12px;
        padding: 0px 0px 10px 0px;
        white-space: nowrap;
        min-width: 56px;
    }

    /* Ховаємо кнопки навігації на mobile */
    .size-swiper .swiper-button-next,
    .size-swiper .swiper-button-prev,
    .size-swiper-edit .swiper-button-next,
    .size-swiper-edit .swiper-button-prev {
        display: none !important;
    }
}