/* Alternate purchase popups only.
   The classic popup has no data-buy-popup attribute and is not styled here. */

#mps-order-modal[data-buy-popup] .mps-modal-dialog {
    max-width: 372px !important;
    width: min(372px, calc(100vw - 24px)) !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-body {
    padding: 12px 14px 0 !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-close {
    top: 12px !important;
    inset-inline-end: 12px !important;
    z-index: 4 !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-eyebrow {
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
    margin: 0 0 12px !important;
    padding-inline-end: 40px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-product {
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 8px !important;
    border-radius: 8px !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-product.has-fav {
    padding-inline-end: 8px !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-product img,
#mps-order-modal[data-buy-popup] .mps-modal-product-placeholder {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-product-placeholder svg {
    width: 16px !important;
    height: 16px !important;
}

#mps-order-modal[data-buy-popup] .mps-fav-btn--modal {
    position: relative !important;
    top: auto !important;
    inset-inline-end: auto !important;
    flex: 0 0 32px !important;
    align-self: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    margin-inline-start: 6px !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#mps-order-modal[data-buy-popup] .mps-fav-btn--modal:hover,
#mps-order-modal[data-buy-popup] .mps-fav-btn--modal:focus-visible {
    transform: none !important;
    background: rgba(225, 29, 72, 0.08) !important;
    border-color: transparent !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-title {
    margin: 0 0 2px !important;
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-price-row {
    gap: 6px !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-price-label {
    font-size: 11px !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-price {
    font-size: 0.92rem !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-desc {
    margin: 0 0 10px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

#mps-order-modal[data-buy-popup] .mps-form-group,
#mps-order-modal[data-buy-popup] .mps-order-form .mps-form-group {
    margin-bottom: 10px !important;
    scroll-margin-block: 8px;
}

#mps-order-modal[data-buy-popup] .mps-form-group label {
    margin-bottom: 4px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

#mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input),
#mps-order-modal[data-buy-popup] .mps-form-group select,
#mps-order-modal[data-buy-popup] .mps-form-group textarea,
#mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field {
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    border-width: 1px !important;
    outline: none !important;
    box-shadow: none !important;
}

#mps-order-modal[data-buy-popup] .mps-form-group textarea {
    min-height: 68px !important;
}

#mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):hover,
#mps-order-modal[data-buy-popup] .mps-form-group select:hover,
#mps-order-modal[data-buy-popup] .mps-form-group textarea:hover,
#mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:hover,
#mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):focus,
#mps-order-modal[data-buy-popup] .mps-form-group select:focus,
#mps-order-modal[data-buy-popup] .mps-form-group textarea:focus,
#mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:focus,
#mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):focus-visible,
#mps-order-modal[data-buy-popup] .mps-form-group select:focus-visible,
#mps-order-modal[data-buy-popup] .mps-form-group textarea:focus-visible,
#mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:focus-visible,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):hover,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group select:hover,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group textarea:hover,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:hover,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):focus,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group select:focus,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group textarea:focus,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:focus,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):focus-visible,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group select:focus-visible,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group textarea:focus-visible,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:focus-visible,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):hover,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group select:hover,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group textarea:hover,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:hover,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):focus,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group select:focus,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group textarea:focus,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:focus,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):focus-visible,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group select:focus-visible,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group textarea:focus-visible,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:focus-visible {
    background: var(--satoads-field-bg, #ffffff) !important;
    border-width: 1px !important;
    border-color: var(--satoads-field-border, rgba(20, 20, 19, 0.16)) !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):hover,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group select:hover,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group textarea:hover,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:hover,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):focus,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group select:focus,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-form-group textarea:focus,
[data-theme="dark"] #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:focus,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):hover,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group select:hover,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group textarea:hover,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:hover,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input):focus,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group select:focus,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-form-group textarea:focus,
html.satoads-dark #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field:focus {
    background: var(--satoads-field-bg, #1f1e1b) !important;
    border-color: var(--satoads-field-border, rgba(255, 255, 255, 0.32)) !important;
}

#mps-order-modal[data-buy-popup] .mps-qty-btn {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1rem !important;
}

#mps-order-modal[data-buy-popup] .mps-qty-input:not(select) {
    min-height: 40px !important;
    padding: 6px 8px !important;
    font-size: 16px !important;
}

#mps-order-modal[data-buy-popup] .mps-qty-limit {
    min-height: 34px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
}

#mps-order-modal[data-buy-popup] .mps-order-form-foot {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
}

#mps-order-modal[data-buy-popup] .mps-order-form-foot .mps-modal-total {
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-total-label {
    font-size: 12px !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-total-value,
#mps-order-modal[data-buy-popup] #mps-total-amount {
    font-size: 1rem !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-actions {
    gap: 8px !important;
}

#mps-order-modal[data-buy-popup] .mps-btn-outline,
#mps-order-modal[data-buy-popup] .mps-btn-primary,
#mps-order-modal[data-buy-popup] #mps-confirm-order {
    min-height: 42px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

#mps-order-modal[data-buy-popup] #mps-confirm-order {
    min-height: 44px !important;
}

#mps-order-modal[data-buy-popup] .mps-form-msg {
    margin-bottom: 8px !important;
    font-size: 13px !important;
}

#mps-order-modal[data-buy-popup] .mps-modal-form-skeleton .mps-skeleton-line {
    height: 34px !important;
}

#mps-order-modal[data-buy-popup] button,
#mps-order-modal[data-buy-popup] .mps-qty-btn {
    touch-action: manipulation;
}

#mps-order-modal[data-buy-popup] .mps-btn-primary:focus-visible,
#mps-order-modal[data-buy-popup] .mps-btn-outline:focus-visible,
#mps-order-modal[data-buy-popup] .mps-modal-close:focus-visible,
#mps-order-modal[data-buy-popup] .mps-qty-btn:focus-visible {
    outline: 2px solid var(--satoads-field-border-focus, #cc785c) !important;
    outline-offset: 2px !important;
}

@media (min-width: 769px) {
    #mps-order-modal[data-buy-popup] .mps-form-group input:not(.mps-qty-input),
    #mps-order-modal[data-buy-popup] .mps-form-group select,
    #mps-order-modal[data-buy-popup] .mps-form-group textarea,
    #mps-order-modal[data-buy-popup] .mps-order-form .mps-custom-field {
        font-size: 14px !important;
    }
}

/* Express: flat product row, total beside the confirm button. */
#mps-order-modal[data-buy-popup="express"] .mps-modal-dialog {
    max-width: 400px !important;
    width: min(400px, calc(100vw - 20px)) !important;
}

#mps-order-modal[data-buy-popup="express"] .mps-modal-eyebrow {
    margin-bottom: 6px !important;
}

#mps-order-modal[data-buy-popup="express"] .mps-modal-product {
    background: transparent !important;
    border-width: 0 0 1px !important;
    border-style: solid !important;
    border-color: var(--satoads-hairline, rgba(20, 20, 19, 0.14)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 8px !important;
    margin: 0 0 8px !important;
}

#mps-order-modal[data-buy-popup="express"] .mps-modal-product img,
#mps-order-modal[data-buy-popup="express"] .mps-modal-product-placeholder {
    width: 34px !important;
    height: 34px !important;
}

#mps-order-modal[data-buy-popup="express"] .mps-order-form-foot {
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
}

#mps-order-modal[data-buy-popup="express"] .mps-order-form-foot .mps-modal-total {
    margin: 0 !important;
}

#mps-order-modal[data-buy-popup="express"] .mps-modal-actions {
    grid-template-columns: auto minmax(0, 1fr) !important;
}

#mps-order-modal[data-buy-popup="express"] .mps-order-form-foot:has(.mps-form-msg:not([hidden])) {
    grid-template-areas:
        "msg msg"
        "total actions" !important;
}

#mps-order-modal[data-buy-popup="express"] .mps-order-form-foot:has(.mps-form-msg:not([hidden])) .mps-form-msg {
    grid-area: msg !important;
    margin: 0 !important;
}

#mps-order-modal[data-buy-popup="express"] .mps-order-form-foot:has(.mps-form-msg:not([hidden])) .mps-modal-total {
    grid-area: total !important;
}

#mps-order-modal[data-buy-popup="express"] .mps-order-form-foot:has(.mps-form-msg:not([hidden])) .mps-modal-actions {
    grid-area: actions !important;
}

@media (max-width: 520px) {
    #mps-order-modal[data-buy-popup="express"] .mps-order-form-foot {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "total"
            "actions" !important;
    }

    #mps-order-modal[data-buy-popup="express"] .mps-order-form-foot .mps-modal-total {
        grid-area: total !important;
    }

    #mps-order-modal[data-buy-popup="express"] .mps-modal-actions {
        grid-area: actions !important;
    }

    #mps-order-modal[data-buy-popup="express"] .mps-order-form-foot:has(.mps-form-msg:not([hidden])) {
        grid-template-areas:
            "msg"
            "total"
            "actions" !important;
    }

    #mps-order-modal[data-buy-popup="express"] .mps-form-msg:not([hidden]) {
        grid-area: msg !important;
    }
}

/* Sheet: bottom purchase panel, two columns on wide screens. */
#mps-order-modal[data-buy-popup="sheet"] {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

#mps-order-modal[data-buy-popup="sheet"][hidden] {
    display: none !important;
}

#mps-order-modal[data-buy-popup="sheet"] .mps-modal-dialog {
    width: 100% !important;
    max-width: 640px !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    height: min(max-content, calc(100dvh - env(safe-area-inset-bottom, 0px))) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px) !important;
}

#mps-order-modal[data-buy-popup="sheet"] .mps-modal-body {
    padding: 12px 14px 0 !important;
}

#mps-order-modal[data-buy-popup="sheet"] .mps-modal-product img,
#mps-order-modal[data-buy-popup="sheet"] .mps-modal-product-placeholder {
    width: 34px !important;
    height: 34px !important;
}

#mps-order-modal[data-buy-popup="sheet"] .mps-order-form-foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

#mps-order-modal[data-buy-popup="sheet"] .mps-modal-actions {
    grid-template-columns: 5.25rem minmax(0, 1fr) !important;
}

#mps-order-modal[data-buy-popup="sheet"] #mps-confirm-order {
    min-height: 46px !important;
    font-size: 15px !important;
}

@media (max-width: 768px) {
    #mps-order-modal[data-buy-popup="sheet"] .mps-modal-actions {
        grid-template-columns: minmax(0, 1fr) 4.25rem !important;
        align-items: stretch !important;
    }

    #mps-order-modal[data-buy-popup="sheet"] .mps-modal-actions #mps-confirm-order {
        order: -1 !important;
        min-height: 48px !important;
        padding: 10px 12px !important;
        font-size: 15px !important;
    }

    #mps-order-modal[data-buy-popup="sheet"] .mps-modal-actions .mps-btn-outline {
        order: 1 !important;
        min-height: 40px !important;
        padding: 8px 6px !important;
        font-size: 13px !important;
    }
}

@media (min-width: 900px) {
    #mps-order-modal[data-buy-popup="sheet"] {
        align-items: center;
        padding: 16px;
    }

    #mps-order-modal[data-buy-popup="sheet"] .mps-modal-dialog {
        width: min(520px, calc(100vw - 32px)) !important;
        max-width: 520px !important;
        border-radius: 16px !important;
        height: min(max-content, calc(100dvh - 32px)) !important;
        max-height: calc(100dvh - 32px) !important;
    }

    #mps-order-modal[data-buy-popup="sheet"] .mps-order-form-scroll:has(> .mps-form-group + .mps-form-group) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 10px !important;
        align-content: start !important;
    }

    #mps-order-modal[data-buy-popup="sheet"] .mps-modal-note,
    #mps-order-modal[data-buy-popup="sheet"] .mps-form-group:has(textarea) {
        grid-column: 1 / -1 !important;
    }
}