/* MAGNA V63 — corrección responsive del flujo Comprar en móvil.
   Este archivo va al final para sobrescribir únicamente el modal de compra. */

.magna-purchase-flow-modal,
.magna-purchase-flow-modal *{box-sizing:border-box}

@media (max-width:760px){
  .magna-purchase-flow-overlay{
    padding:0!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    overscroll-behavior:contain;
  }

  .magna-purchase-flow-modal{
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:24px 16px calc(24px + env(safe-area-inset-bottom))!important;
    border-left:0!important;
    border-right:0!important;
    border-top:0!important;
    border-bottom:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }

  .magna-purchase-flow-close{
    top:calc(10px + env(safe-area-inset-top))!important;
    right:14px!important;
    width:44px!important;
    height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:34px!important;
  }

  .purchase-flow-kicker{
    padding-right:52px!important;
    font-size:11px!important;
    letter-spacing:2px!important;
  }

  .magna-purchase-flow-modal h2{
    max-width:calc(100% - 44px)!important;
    margin:0 0 18px!important;
    font-size:34px!important;
    line-height:.98!important;
    overflow-wrap:anywhere;
  }

  /* Pasos compactos en una sola fila. */
  .purchase-flow-steps{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin:0 0 18px!important;
  }
  .purchase-flow-steps i{display:none!important}
  .purchase-flow-steps span{
    min-width:0!important;
    gap:6px!important;
    white-space:normal!important;
    font-size:9px!important;
    line-height:1.15!important;
    letter-spacing:.7px!important;
  }
  .purchase-flow-steps span b{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    flex:0 0 28px!important;
  }

  /* En Safari iOS el height:100% previo hacía que el producto invadiera Regalos. */
  .purchase-flow-product-wrap{
    display:block!important;
    width:100%!important;
    margin:14px 0 16px!important;
  }
  .purchase-flow-product-wrap .purchase-flow-product,
  .purchase-flow-product{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 10px!important;
    padding:12px!important;
    gap:12px!important;
    overflow:hidden!important;
  }
  .purchase-flow-product img{
    display:block!important;
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    flex:0 0 72px!important;
    padding:6px!important;
    margin:0!important;
    border-radius:8px!important;
    object-fit:contain!important;
  }
  .purchase-flow-product>div{
    min-width:0!important;
    width:auto!important;
    flex:1 1 auto!important;
  }
  .purchase-flow-product span{
    margin:0 0 3px!important;
    font-size:9px!important;
    line-height:1.2!important;
    letter-spacing:1.2px!important;
  }
  .purchase-flow-product strong{
    margin:0 0 3px!important;
    font-size:21px!important;
    line-height:1.05!important;
    overflow-wrap:anywhere!important;
  }
  .purchase-flow-product small{
    display:block!important;
    max-width:100%!important;
    font-size:13px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .purchase-flow-gifts{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:14px 15px!important;
    overflow:visible!important;
  }
  .purchase-flow-gifts>span{font-size:9px!important}
  .purchase-flow-gifts>strong{
    margin:4px 0 8px!important;
    font-size:18px!important;
    line-height:1.1!important;
  }
  .purchase-flow-gifts ul{
    gap:5px!important;
  }
  .purchase-flow-gifts li{
    font-size:12px!important;
    line-height:1.35!important;
    padding-left:17px!important;
  }

  .self-security-card{
    width:100%!important;
    padding:18px 16px!important;
    overflow:hidden!important;
  }
  .self-security-brand{
    flex-wrap:wrap!important;
    margin-bottom:12px!important;
  }
  .self-security-card h3{
    font-size:23px!important;
    line-height:1.08!important;
  }
  .self-security-card p{
    font-size:14px!important;
    line-height:1.5!important;
  }
  .self-security-card ul{
    font-size:13px!important;
    line-height:1.55!important;
  }
  .self-security-price{
    position:static!important;
    margin-top:12px!important;
    font-size:27px!important;
  }

  .purchase-flow-actions,
  .purchase-flow-actions.two,
  .purchase-flow-actions.three{
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-top:16px!important;
  }
  .purchase-flow-primary,
  .purchase-flow-secondary,
  .purchase-flow-back{
    width:100%!important;
    min-height:50px!important;
    padding:0 14px!important;
  }

  .purchase-flow-accessories{
    grid-template-columns:1fr!important;
    max-height:none!important;
    overflow:visible!important;
    padding-right:0!important;
  }

  .purchase-flow-summary-main{
    grid-template-columns:68px minmax(0,1fr)!important;
    gap:12px!important;
    padding:13px!important;
  }
  .purchase-flow-summary-main img{
    width:68px!important;
    height:68px!important;
  }
  .purchase-flow-summary-main>b{
    grid-column:2!important;
    font-size:18px!important;
  }
  .purchase-flow-summary-row{
    align-items:flex-start!important;
    font-size:13px!important;
  }
  .purchase-flow-summary-total strong{font-size:27px!important}
}

@media (max-width:390px){
  .magna-purchase-flow-modal{
    padding-left:13px!important;
    padding-right:13px!important;
  }
  .magna-purchase-flow-modal h2{font-size:31px!important}
  .purchase-flow-product img{
    width:62px!important;
    height:62px!important;
    min-width:62px!important;
    flex-basis:62px!important;
  }
  .purchase-flow-product strong{font-size:19px!important}
  .purchase-flow-product small{font-size:12px!important}
  .purchase-flow-gifts{padding:13px!important}
  .self-security-card{padding:16px 14px!important}
}