/* V23.4.50 — final viewport safety layer. No catalog content or imagery is replaced. */
html,body{width:100%;max-width:100%;overflow-x:clip}
*,*::before,*::after{min-width:0}
img,svg,video,canvas{max-width:100%}
.container{width:min(calc(100% - 32px),var(--container))}
.modal-card,.drawer-panel,.checkout-fields,.checkout-summary,.product-body{overflow-wrap:anywhere}
.modal-card{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.checkout-modal{align-items:flex-start;overflow-y:auto}
.checkout-card{height:auto;overflow-y:auto}
.order-turnstile{width:100%;max-width:100%;min-height:68px}
.order-turnstile iframe{max-width:100%!important}
.product-image>img,.product-gallery-stage>img,.product-config-visual>.product-gallery-stage>img{
  width:100%!important;height:100%!important;max-width:94%!important;max-height:94%!important;
  object-fit:contain!important;object-position:center!important;transform:none!important
}
.float-pill-two{max-width:min(250px,70vw);white-space:normal;text-align:center;line-height:1.25}

/* The AI title must stay in its own grid column on every desktop width. */
.ai-body-light .ai-main-layout{grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:clamp(28px,4vw,58px)}
.ai-body-light .ai-intro h1{max-width:100%;font-size:clamp(3rem,4vw,4.6rem);line-height:.94;letter-spacing:-.06em;overflow-wrap:normal}
.ai-body-light .ai-intro,.ai-body-light .ai-chat-card{min-width:0}
.ai-body-light .ai-message,.ai-howto,.ai-intro-note{overflow-wrap:anywhere}
.ai-composer{min-width:0}
.ai-composer textarea{min-width:0}

@media(max-width:1120px){
  .header .logo,.header .site-logo-lockup{width:210px!important;min-width:210px!important}
  .header .site-logo-image{width:208px!important;height:54px!important}
  .hero-grid{grid-template-columns:1fr!important}
  .hero-copy-block{text-align:center}
  .hero-copy-block .eyebrow,.hero-copy,.hero-actions{margin-inline:auto}
  .hero-points{justify-content:center}
  .hero-visual-column{min-height:620px}
  .ai-body-light .ai-main-layout{grid-template-columns:1fr;align-items:start}
  .ai-body-light .ai-intro{text-align:center}
  .ai-body-light .ai-intro .eyebrow,.ai-body-light .ai-intro>p,.ai-body-light .ai-intro-note,.ai-howto{margin-inline:auto}
}

@media(max-width:760px){
  .container{width:min(calc(100% - 22px),var(--container))}
  .modal{align-items:flex-start;overflow-y:auto;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .modal-head{gap:10px}
  .modal-head h2,.modal-head strong{font-size:clamp(1.2rem,6vw,1.55rem)}
  .checkout-grid{grid-template-columns:1fr!important;gap:16px}
  .checkout-card{width:100%!important;padding:16px!important}
  .checkout-summary{padding:16px!important}
  .form-grid.two,.choice-grid,.installment-term-grid{grid-template-columns:1fr!important}
  .hero{padding-top:38px}
  .hero h1{font-size:clamp(2.75rem,14vw,4.2rem)!important;line-height:.92}
  .hero-visual-column{min-height:560px!important}
  .hero-stage{height:395px!important}
  #heroPhoneWrap{width:min(350px,88vw)!important;height:370px!important}
  .float-pill-two{left:50%!important;top:225px!important;transform:translateX(-50%)!important}
  .hero-config{left:0!important;right:0!important;padding:15px!important}
  .hero-config-title{gap:10px}
  .hero-config-title h2{font-size:1.05rem!important}
  .price-row{gap:8px;flex-wrap:wrap}
  .price-row>div:first-child{flex:1 1 150px}
  .hero-buy-actions{flex:1 1 150px;justify-content:flex-end}
  .product-grid{grid-template-columns:1fr!important}
  .product-image{height:clamp(245px,78vw,330px)!important}
  .wheel-shell{width:min(370px,calc(100vw - 30px))!important}
  .wheel-stage{min-height:min(420px,100vw)!important}
  .wheel-prize-list{grid-template-columns:1fr!important}
  .phone-verify-card{width:100%!important;max-height:calc(100dvh - 16px)!important;overflow-y:auto!important}
  .phone-verify-body{padding:22px 18px!important}
  .phone-verify-body h3{font-size:clamp(1.2rem,6vw,1.45rem)!important}
  .phone-verify-phone{font-size:16px!important}
  .ai-main-header .header-inner{grid-template-columns:minmax(0,1fr) auto!important}
  .ai-main-header .ai-back{min-height:40px!important;padding-inline:10px!important;font-size:.58rem!important;white-space:normal!important;text-align:center}
  .ai-shell-with-main-header{padding:8px!important}
  .ai-body-light .ai-main-layout{padding:24px 0 30px!important;gap:22px}
  .ai-body-light .ai-intro h1{font-size:clamp(2.65rem,13vw,3.8rem)!important;line-height:.95}
  .ai-body-light .ai-intro>p{font-size:.84rem;line-height:1.6}
  .ai-body-light .ai-chat-card{min-height:560px;padding:14px;border-radius:22px}
  .ai-starters{max-width:100%;overflow-x:auto}
  .ai-composer{grid-template-columns:minmax(0,1fr) 44px;padding:8px}
  .ai-send{width:44px;height:44px}
}

@media(max-width:430px){
  .header .logo,.header .site-logo-lockup{width:128px!important;min-width:128px!important;height:45px!important}
  .header .site-logo-image{width:126px!important;height:36px!important}
  .header-inner{grid-template-columns:minmax(0,1fr) auto!important;gap:5px!important}
  .header-actions{gap:3px!important}
  .icon-btn,.profile-button,.menu-btn{width:36px!important;height:36px!important;min-height:36px!important;border-radius:11px!important}
  .hero h1{font-size:clamp(2.45rem,13.5vw,3.45rem)!important}
  .hero-copy{font-size:.84rem!important}
  .hero-points{font-size:.68rem}
  .hero-visual-column{min-height:535px!important}
  .hero-stage{height:365px!important}
  #heroPhoneWrap{height:340px!important}
  .float-pill-two{top:205px!important;font-size:.58rem!important}
  .hero-config{padding:13px!important}
  .config-line{grid-template-columns:47px minmax(0,1fr)!important}
  .hero-config .options{gap:5px}
  .hero-config .chip{min-height:32px;padding-inline:8px;font-size:.58rem}
  .price-row strong{font-size:1.2rem!important}
  .hero-buy-actions .btn,.hero-buy-actions .btn-secondary{min-height:40px;padding-inline:10px;font-size:.6rem}
  .section-head h2,.tradein-copy h2,.wheel-copy h2,.contacts-shell h2{font-size:clamp(2rem,10vw,2.8rem)!important}
  .wheel-center{width:82px!important;height:82px!important}
  .wheel-center strong{font-size:.62rem}
  .modal-card{padding:14px!important}
  .summary-item,.summary-lines>div{gap:8px}
  .ai-main-header .header-actions{max-width:130px}
  .ai-main-header .ai-back{font-size:.52rem!important}
  .ai-body-light .ai-intro h1{font-size:clamp(2.35rem,12vw,3.2rem)!important}
}

@media(max-height:560px) and (orientation:landscape){
  .modal-card,.phone-verify-card{max-height:calc(100dvh - 12px)!important;overflow-y:auto!important}
  .hero{padding-top:24px}
  .ai-body-light .ai-chat-card{min-height:480px}
}