/* Mommy Crafts · Personalización móvil segura v3.47.0
   Solución anti-congelamiento: el modal móvil usa scroll nativo del navegador,
   sin JavaScript de scroll, sin touch-action restrictivo y sin contenedores anidados bloqueantes. */

@media (max-width: 760px) {
    body.modal-open {
        overflow: hidden !important;
    }

    #modal-personalizar.modal-overlay,
    #modal-personalizar.modal-overlay.mc-customization-pro {
        position: fixed !important;
        inset: 0 !important;
        display: none !important;
        align-items: initial !important;
        justify-content: initial !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        background: rgba(31, 24, 27, .68) !important;
    }

    #modal-personalizar.modal-overlay.active,
    #modal-personalizar.modal-overlay[aria-hidden="false"] {
        display: block !important;
    }

    #modal-personalizar .modal-box,
    #modal-personalizar.mc-customization-pro .modal-box,
    #modal-personalizar .modal-box.modal-box {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100svh !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        animation: none !important;
    }

    #modal-personalizar .modal-header {
        position: relative !important;
        top: auto !important;
        z-index: 5 !important;
        min-height: auto !important;
        padding: 1rem 1.05rem .8rem !important;
        background: rgba(255, 255, 255, .98) !important;
        border-bottom: 1px solid rgba(234, 223, 226, .9) !important;
    }

    #modal-personalizar .modal-header .modal-eyebrow {
        margin-bottom: .2rem !important;
        font-size: .86rem !important;
        letter-spacing: .09em !important;
    }

    #modal-personalizar .modal-header h2 {
        max-width: calc(100vw - 7rem) !important;
        font-size: 1.68rem !important;
        line-height: 1.08 !important;
        gap: .65rem !important;
    }

    #modal-personalizar .modal-close {
        width: 3.8rem !important;
        min-width: 3.8rem !important;
        height: 3.8rem !important;
        border-radius: 50% !important;
    }

    #modal-personalizar .mc-customization-trust-strip {
        display: none !important;
    }

    #modal-personalizar .modal-steps {
        position: relative !important;
        z-index: 4 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: .55rem !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 5.5rem !important;
        padding: .75rem 1rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: none !important;
        scrollbar-width: none !important;
        border-top: 1px solid rgba(234, 223, 226, .65) !important;
        border-bottom: 1px solid rgba(234, 223, 226, .9) !important;
        background: #fff !important;
    }

    #modal-personalizar .modal-steps::-webkit-scrollbar {
        display: none !important;
    }

    #modal-personalizar .modal-steps .step-line {
        display: none !important;
    }

    #modal-personalizar .modal-steps .step {
        flex: 0 0 auto !important;
        min-width: 8.6rem !important;
        min-height: 4rem !important;
        padding: .62rem .7rem !important;
        border-radius: 1rem !important;
        gap: .45rem !important;
        white-space: nowrap !important;
        font-size: .98rem !important;
        line-height: 1 !important;
    }

    #modal-personalizar .modal-steps .step span {
        width: 2.25rem !important;
        min-width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: .98rem !important;
    }

    #modal-personalizar .modal-body,
    #modal-personalizar .modal-body-preview,
    #modal-personalizar.mc-customization-pro .modal-body-preview {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: .9rem 1rem 1.1rem !important;
        gap: .9rem !important;
        overflow: visible !important;
        background: linear-gradient(180deg, #fff, #fff7fa) !important;
    }

    #modal-personalizar .live-preview-panel,
    #modal-personalizar.mc-customization-pro .live-preview-panel {
        position: relative !important;
        top: auto !important;
        order: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: .78rem !important;
        border: 1px solid rgba(234, 223, 226, .95) !important;
        border-radius: 1.25rem !important;
        background: #fff !important;
        box-shadow: 0 8px 22px rgba(55, 42, 50, .055) !important;
        overflow: hidden !important;
    }

    #modal-personalizar .live-preview-panel h3,
    #modal-personalizar .preview-note {
        display: none !important;
    }

    #modal-personalizar .product-preview,
    #modal-personalizar.mc-customization-pro .product-preview {
        width: 100% !important;
        min-height: 15.5rem !important;
        height: 15.5rem !important;
        max-height: 15.5rem !important;
        margin: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
        border-radius: 1.05rem !important;
    }

    #modal-personalizar .preview-product-shape {
        width: min(100%, 18rem) !important;
        max-width: 18rem !important;
        max-height: 18rem !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
    }

    #modal-personalizar #preview-product-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    #modal-personalizar #preview-user-image,
    #modal-personalizar #preview-main-text,
    #modal-personalizar #preview-secondary-text {
        max-width: 68% !important;
        max-height: 68% !important;
    }

    #modal-personalizar .preview-image-controls,
    #modal-personalizar .image-editor-controls,
    #modal-personalizar .text-editor-controls {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 2 !important;
        max-width: 100% !important;
        margin-top: .65rem !important;
        padding: .6rem !important;
        display: flex !important;
        gap: .45rem !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 1rem !important;
        background: rgba(255, 255, 255, .98) !important;
    }

    #modal-personalizar .edit-btn {
        flex: 0 0 3.55rem !important;
        width: 3.55rem !important;
        height: 3.55rem !important;
    }

    #modal-personalizar .customization-form {
        order: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #modal-personalizar .modal-step-content {
        width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        padding: 1rem !important;
        border-radius: 1.25rem !important;
        overflow: visible !important;
        background: #fff !important;
        box-shadow: 0 8px 22px rgba(55, 42, 50, .05) !important;
    }

    #modal-personalizar .modal-step-content.active {
        display: block !important;
    }

    #modal-personalizar .modal-step-content h3,
    #modal-personalizar .customization-product-panel-header h3 {
        margin: 0 0 .75rem !important;
        font-size: 1.55rem !important;
        line-height: 1.15 !important;
    }

    #modal-personalizar .customization-step-description,
    #modal-personalizar .mc-customization-helper,
    #modal-personalizar .style-info-box,
    #modal-personalizar .upload-info-box,
    #modal-personalizar .editor-selection-help {
        margin: .5rem 0 .8rem !important;
        padding: .75rem .85rem !important;
        border-radius: 1rem !important;
        font-size: 1.08rem !important;
        line-height: 1.35 !important;
    }

    #modal-personalizar .customization-category-grid,
    #modal-personalizar .customizable-products-grid,
    #modal-personalizar .option-grid,
    #modal-personalizar .color-options-grid,
    #modal-personalizar .color-selection-grid,
    #modal-personalizar #color-selection-area,
    #modal-personalizar .text-fields,
    #modal-personalizar .form-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .8rem !important;
        overflow: visible !important;
    }

    #modal-personalizar .option-grid,
    #modal-personalizar .color-options-grid,
    #modal-personalizar .color-selection-grid,
    #modal-personalizar #color-selection-area {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #modal-personalizar .customization-category-card,
    #modal-personalizar .customizable-product-card,
    #modal-personalizar .option-card,
    #modal-personalizar .color-option-card,
    #modal-personalizar .customization-size-option {
        width: 100% !important;
        min-width: 0 !important;
        transform: none !important;
    }

    #modal-personalizar .customization-category-card:hover,
    #modal-personalizar .customizable-product-card:hover,
    #modal-personalizar .option-card:hover,
    #modal-personalizar .color-option-card:hover,
    #modal-personalizar .customization-size-option:hover {
        transform: none !important;
    }

    #modal-personalizar .customization-category-card {
        min-height: 7rem !important;
        grid-template-columns: 3.8rem minmax(0, 1fr) !important;
        padding: .85rem !important;
    }

    #modal-personalizar .customization-category-card > i {
        width: 3.8rem !important;
        height: 3.8rem !important;
        font-size: 1.45rem !important;
    }

    #modal-personalizar .customization-category-content strong,
    #modal-personalizar .customizable-product-card strong,
    #modal-personalizar .option-card span,
    #modal-personalizar .color-option-card span {
        font-size: 1.12rem !important;
        line-height: 1.2 !important;
    }

    #modal-personalizar .customization-category-count,
    #modal-personalizar .customization-category-price,
    #modal-personalizar .customizable-product-card span {
        font-size: .98rem !important;
    }

    #modal-personalizar .customizable-product-card {
        min-height: 7rem !important;
        grid-template-columns: 5.8rem minmax(0, 1fr) !important;
        gap: .85rem !important;
        padding: .8rem !important;
    }

    #modal-personalizar .customizable-product-card img {
        width: 5.8rem !important;
        height: 5.8rem !important;
        border-radius: .9rem !important;
    }

    #modal-personalizar .customization-product-panel-header {
        display: flex !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: .65rem !important;
        margin-bottom: .8rem !important;
    }

    #modal-personalizar .customization-base-price {
        width: 100% !important;
        justify-items: start !important;
        padding: .72rem .85rem !important;
        border-radius: 1rem !important;
    }

    #modal-personalizar .option-card {
        min-height: 7.8rem !important;
        padding: .85rem .6rem !important;
    }

    #modal-personalizar .color-option-card {
        min-height: 7.3rem !important;
        padding: .8rem .55rem !important;
    }

    #modal-personalizar .customization-size-section {
        margin-top: 1rem !important;
        padding: .9rem !important;
        border-radius: 1.1rem !important;
    }

    #modal-personalizar .customization-size-options {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: .65rem !important;
    }

    #modal-personalizar .upload-area {
        min-height: 13rem !important;
        margin-top: .8rem !important;
        padding: 1.1rem !important;
        border-radius: 1.2rem !important;
        position: relative !important;
        overflow: hidden !important;
    }

    #modal-personalizar .field-group {
        width: 100% !important;
        min-width: 0 !important;
        padding: .92rem !important;
        border-radius: 1.1rem !important;
    }

    #modal-personalizar input[type="text"],
    #modal-personalizar textarea,
    #modal-personalizar select {
        width: 100% !important;
        min-height: 4.35rem !important;
        font-size: 1.22rem !important;
    }

    #modal-personalizar textarea {
        min-height: 9rem !important;
    }

    #modal-personalizar .modal-footer,
    #modal-personalizar.mc-customization-pro .modal-footer {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 3 !important;
        display: grid !important;
        grid-template-columns: minmax(8.8rem, .75fr) minmax(0, 1.25fr) !important;
        gap: .7rem !important;
        align-items: center !important;
        width: 100% !important;
        padding: .78rem 1rem calc(.78rem + env(safe-area-inset-bottom)) !important;
        background: rgba(255, 255, 255, .98) !important;
        border-top: 1px solid rgba(234, 223, 226, .95) !important;
        box-shadow: 0 -8px 22px rgba(70, 42, 52, .1) !important;
    }

    #modal-personalizar .customization-running-total {
        min-width: 0 !important;
        padding: .72rem !important;
        border-radius: .95rem !important;
    }

    #modal-personalizar .customization-running-total span {
        font-size: .9rem !important;
    }

    #modal-personalizar .customization-running-total strong {
        font-size: 1.26rem !important;
    }

    #modal-personalizar .modal-footer-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: .52rem !important;
    }

    #modal-personalizar .modal-footer-actions .btn-primary,
    #modal-personalizar .modal-footer-actions .btn-secondary {
        min-height: 4.05rem !important;
        padding-inline: .65rem !important;
        font-size: 1.04rem !important;
        white-space: nowrap !important;
    }

    #modal-personalizar .modal-summary {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 1.15rem 1rem calc(1.2rem + env(safe-area-inset-bottom)) !important;
        background: #fff !important;
    }
}

@media (max-width: 390px) {
    #modal-personalizar .option-grid,
    #modal-personalizar .color-options-grid,
    #modal-personalizar .color-selection-grid,
    #modal-personalizar #color-selection-area {
        grid-template-columns: 1fr !important;
    }

    #modal-personalizar .customization-size-options {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #modal-personalizar .modal-header h2 {
        font-size: 1.5rem !important;
    }
}