.koya-mam,
.koya-mam-modal { display: none; }

@media (max-width: 767px) {
    .koya-mam {
        display: block;
        position: fixed;
        z-index: 999990;
        right: 10px;
        left: 10px;
        bottom: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        transform: translate3d(0, 0, 0);
        opacity: 1;
        transition: transform .18s ease, opacity .18s ease;
        will-change: transform, opacity;
        font-family: inherit;
    }

    .koya-mam.is-scrolling,
    .koya-mam.is-cart-open {
        transform: translate3d(0, calc(100% + 26px), 0);
        opacity: 0;
        pointer-events: none;
    }

    .koya-mam__inner {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: hidden;
        border-radius: 15px;
        box-shadow: 0 8px 28px rgba(0,0,0,.20);
        background: #fff;
    }

    .koya-mam__button {
        appearance: none;
        -webkit-appearance: none;
        min-width: 0;
        min-height: 64px;
        margin: 0;
        padding: 7px 5px 6px;
        border: 0 !important;
        border-radius: 0;
        outline: 0;
        text-decoration: none !important;
        text-transform: none !important;
        background: var(--koya-bg, #111) !important;
        color: var(--koya-color, #fff) !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .koya-mam__button + .koya-mam__button {
        box-shadow: inset 1px 0 0 rgba(255,255,255,.16);
    }

    .koya-mam__button:active:not(.is-disabled) {
        filter: brightness(.92);
    }

    .koya-mam__button:focus-visible {
        position: relative;
        z-index: 2;
        box-shadow: inset 0 0 0 3px rgba(255,255,255,.92);
    }

    .koya-mam__button.is-disabled {
        opacity: .45;
        cursor: default;
    }

    .koya-mam__icon {
        display: inline-flex;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }

    .koya-mam__label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        line-height: 1.15;
        font-weight: 700;
        letter-spacing: 0;
    }

    .koya-mam-modal {
        position: fixed;
        z-index: 1000000;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s ease, visibility .18s ease;
    }

    .koya-mam-modal[hidden] { display: none !important; }

    .koya-mam-modal.is-open {
        opacity: 1;
        visibility: visible;
    }

    .koya-mam-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.78);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .koya-mam-modal__dialog {
        position: relative;
        z-index: 1;
        width: 90vw !important;
        height: 90vh !important;
        height: 90dvh !important;
        max-width: 90vw !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 12px;
        overflow: visible;
        background: transparent !important;
        box-shadow: 0 24px 70px rgba(0,0,0,.45);
        transform: translateY(12px) scale(.985);
        transition: transform .18s ease;
    }

    .koya-mam-modal.is-open .koya-mam-modal__dialog {
        transform: translateY(0) scale(1);
    }

    .koya-mam-modal__media {
        position: relative;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 0 !important;
        border-radius: 12px;
        background: transparent !important;
        line-height: 0 !important;
    }

    .koya-mam-modal__media iframe,
    .koya-mam-modal__media video {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 12px;
        object-fit: cover !important;
        object-position: center center !important;
        background: #000;
    }

    .koya-mam-modal__close {
        position: absolute;
        z-index: 3;
        top: -15px;
        left: -7px;
        width: 38px;
        height: 38px;
        padding: 0 0 3px;
        border: 2px solid rgba(255,255,255,.85);
        border-radius: 50%;
        background: #111;
        color: #fff;
        font: 400 31px/30px Arial, sans-serif;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0,0,0,.35);
    }

    .koya-mam-modal__close:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

    html.koya-mam-modal-open,
    body.koya-mam-modal-open {
        overflow: hidden !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .koya-mam,
    .koya-mam-modal,
    .koya-mam-modal__dialog { transition: none !important; }
}