/* V242 — mobile package modal: one viewport, no nested/page scroll */
@media (max-width:980px){
  body.has-package-modal{overflow:hidden!important;overscroll-behavior:none!important}
  .flex-package-modal{
    position:fixed!important;inset:0!important;z-index:10080!important;
    display:grid!important;place-items:center!important;
    padding:6px!important;overflow:hidden!important;
  }
  .flex-package-modal-dialog{
    width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px)!important;
    min-height:0!important;max-height:calc(100dvh - 12px)!important;
    overflow:hidden!important;border-radius:18px!important;
    padding:8px 10px 10px!important;
    display:flex!important;flex-direction:column!important;
  }
  .flex-package-modal-head{
    flex:0 0 auto!important;min-height:52px!important;
    padding:2px 0 6px!important;margin:0!important;align-items:center!important;
  }
  .flex-package-modal-head .flex-kicker{font-size:8px!important;letter-spacing:.14em!important}
  .flex-package-modal-head h3{font-size:18px!important;line-height:1.05!important;margin:2px 0!important}
  .flex-package-modal-head p{font-size:9px!important;line-height:1.1!important;margin:0!important}
  .flex-package-modal-x{width:36px!important;height:36px!important;font-size:22px!important;border-radius:11px!important}

  .flex-package-modal-panel{
    flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;
    display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;
    gap:5px!important;padding-top:4px!important;
  }
  .flex-package-modal-panel[hidden]{display:none!important}
  .flex-package-modal-section-head{min-height:22px!important;margin:0!important}
  .flex-package-modal-section-head strong{font-size:11px!important}
  .flex-package-modal-section-head small{font-size:8px!important;padding:4px 7px!important}

  /* 16 packages stay visible as a 4x4 matrix on mobile */
  .flex-package-modal-list,
  .flex-package-modal-list[data-package-grid]{
    min-height:0!important;max-height:none!important;overflow:hidden!important;
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;align-content:stretch!important;
  }
  .flex-package-modal-item{
    position:relative!important;min-width:0!important;min-height:0!important;height:auto!important;
    padding:5px 3px!important;border-radius:10px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:2px!important;text-align:center!important;overflow:visible!important;
  }
  .flex-package-select-mark{
    position:absolute!important;top:4px!important;right:4px!important;
    width:16px!important;height:16px!important;border-radius:5px!important;font-size:10px!important;
  }
  .flex-package-modal-copy{display:grid!important;place-items:center!important;gap:1px!important;padding:0!important;min-width:0!important;width:100%!important}
  .flex-package-modal-copy b{font-size:11px!important;line-height:1!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
  .flex-package-modal-copy small{font-size:7px!important;line-height:1!important;white-space:nowrap!important;margin:0!important}
  .flex-package-modal-price{
    width:auto!important;min-width:0!important;max-width:100%!important;min-height:0!important;height:auto!important;
    padding:3px 5px!important;border-radius:7px!important;gap:2px!important;display:flex!important;flex-direction:column!important;align-items:center!important;
  }
  .flex-package-modal-price b{font-size:8.5px!important;line-height:1!important;white-space:nowrap!important}
  .flex-package-modal-discount{font-size:6.5px!important;line-height:1!important;padding:2px 4px!important;white-space:nowrap!important}
  .flex-package-favorite{top:-4px!important;left:50%!important;transform:translateX(-50%)!important;font-size:5.5px!important;padding:2px 4px!important}

  /* Bottom control block always remains visible */
  .flex-package-custom-choice{
    flex:0 0 auto!important;margin:0!important;padding:5px 0 0!important;border-top:1px solid var(--pkg240-border)!important;
    display:grid!important;grid-template-columns:1fr!important;gap:4px!important;min-width:0!important;
  }
  .flex-package-custom-head{display:none!important}
  .flex-package-custom-form{
    display:grid!important;
    grid-template-columns:minmax(118px,.85fr) minmax(0,1.15fr) minmax(90px,.65fr)!important;
    grid-template-areas:"step price action" "range range range"!important;
    gap:4px!important;align-items:center!important;
  }
  .flex-package-stepper{grid-area:step!important;height:42px!important;min-height:42px!important;grid-template-columns:34px minmax(0,1fr) 34px!important;border-radius:11px!important}
  .flex-package-stepper button{font-size:19px!important}
  .flex-package-stepper-center{padding:1px!important}
  .flex-package-qty-manual{height:34px!important;font-size:17px!important;padding:0 2px!important}
  .flex-package-range-wrap{grid-area:range!important;padding:0 2px!important;gap:2px!important;display:grid!important;grid-template-rows:auto auto!important}
  .flex-package-range-wrap input[type=range]{display:block!important;height:5px!important;width:100%!important;visibility:visible!important;opacity:1!important}
  .flex-package-range-meta{font-size:6.5px!important;line-height:1!important}
  .flex-package-live-box{grid-area:price!important;height:42px!important;min-height:42px!important;border-radius:11px!important;padding:4px 7px!important}
  .flex-package-live-box small{font-size:7px!important}
  .flex-package-live-box strong{font-size:11px!important;margin-top:1px!important}
  .flex-package-live-box span{display:none!important}
  .flex-package-continue{grid-area:action!important;height:42px!important;min-height:42px!important;border-radius:11px!important;font-size:10px!important;padding:0 6px!important;white-space:nowrap!important}

  .package-benefit-strip{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;margin:0!important;
  }
  .package-benefit-card{
    min-height:34px!important;padding:4px!important;border-radius:8px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;text-align:center!important;
  }
  .package-benefit-icon{width:18px!important;height:18px!important;font-size:9px!important;border-radius:6px!important}
  .package-benefit-card strong{font-size:6.5px!important;line-height:1.05!important;overflow-wrap:normal!important;word-break:normal!important}

  .package-ai-query{
    display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"copy providers"!important;
    gap:4px!important;align-items:center!important;padding:4px 5px!important;border-radius:9px!important;
  }
  .package-ai-copy{grid-area:copy!important;display:flex!important;align-items:center!important;gap:4px!important}
  .package-ai-kicker{font-size:6px!important;letter-spacing:.08em!important}
  .package-ai-copy strong{font-size:7px!important;white-space:nowrap!important}
  .package-ai-copy small{display:none!important}
  .package-ai-providers{grid-area:providers!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important}
  .package-ai-providers button{min-height:26px!important;padding:0 3px!important;border-radius:7px!important;font-size:6.5px!important;white-space:nowrap!important}
  .package-ai-status{display:none!important}
}

@media (max-width:390px){
  .flex-package-modal-dialog{padding:6px 7px 7px!important}
  .flex-package-modal-head{min-height:46px!important}
  .flex-package-modal-head h3{font-size:16px!important}
  .flex-package-modal-item{padding:4px 2px!important}
  .flex-package-modal-copy b{font-size:10px!important}
  .flex-package-modal-price b{font-size:7.8px!important}
  .flex-package-modal-discount{font-size:6px!important}
  .flex-package-stepper{grid-template-columns:30px minmax(0,1fr) 30px!important}
  .flex-package-qty-manual{font-size:16px!important}
  .package-benefit-card strong{font-size:6px!important}
  .package-ai-copy strong{display:none!important}
  .package-ai-query{grid-template-columns:1fr!important;grid-template-areas:"providers"!important}
}