/*
 * VAIO Gaming - Production layout guard
 * Purpose: protect the storefront from mobile/RTL horizontal drift and keep
 * checkout/payment blocks responsive without changing the visual identity.
 */
html,
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
body.vaio-body{
  position:relative;
  min-width:0;
}
*,*::before,*::after{box-sizing:border-box;}
img,svg,video,canvas,iframe{max-width:100%;}

.vaio-bg-atmosphere,
.vaio-topbar,
.vaio-header,
.vaio-main,
.vaio-footer,
.vaio-newsletter,
.vaio-hero,
.vaio-section,
.vaio-page-body,
.vaio-unified-page-hero,
.vaio-unified-page-section,
.woocommerce,
.woocommerce-page,
.site,
.site-main,
.content-area{
  width:100%;
  max-width:100%;
  min-width:0;
}

.vaio-main,
.vaio-header,
.vaio-topbar,
.vaio-footer,
.vaio-newsletter,
.vaio-hero,
.vaio-section{
  margin-left:0;
  margin-right:0;
}

.vaio-container{
  width:100%;
  max-width:min(var(--vaio-container, 1200px), 100%);
  min-width:0;
  margin-left:auto;
  margin-right:auto;
}

.vaio-hero,
.vaio-hero-slides,
.vaio-hero-slide{
  max-width:100%;
  min-width:0;
}

.vaio-hero-slide,
.vaio-hero-content,
.vaio-hero-art{
  box-sizing:border-box;
}

.woocommerce .woocommerce-notices-wrapper,
.woocommerce form,
.woocommerce table,
.woocommerce-checkout,
.woocommerce-cart-form,
.woocommerce-checkout-review-order,
.vaio-checkout-layout,
.vaio-checkout-main,
.vaio-checkout-sidebar,
.vaio-payment-fullwidth,
.vaio-payment-section{
  max-width:100%;
  min-width:0;
}

@supports (overflow:clip){
  .vaio-main,
  .vaio-hero,
  .vaio-section,
  .woocommerce{
    overflow-x:clip;
  }
}

@media (max-width:900px){
  body.admin-bar,
  body.customize-support,
  body.customize-partial-edit-shortcuts-shown{
    max-width:100%;
    overflow-x:hidden;
  }

  .vaio-container{
    max-width:100%!important;
    padding-left:clamp(12px,4vw,18px)!important;
    padding-right:clamp(12px,4vw,18px)!important;
  }

  .vaio-header .vaio-container,
  .vaio-topbar .vaio-container{
    max-width:100%!important;
  }

  .vaio-header-inner,
  .vaio-topbar-inner{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .vaio-main > *,
  .vaio-section > *,
  .woocommerce > *,
  .woocommerce-page > *{
    max-width:100%;
  }

  .vaio-hero-title{
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
    text-wrap:balance;
  }

  .vaio-hero-content{
    max-width:min(64vw, 330px)!important;
    min-width:0!important;
    overflow:visible!important;
  }

  body.lang-ar .vaio-hero-content{
    right:clamp(16px,5vw,22px)!important;
    left:auto!important;
  }

  body:not(.lang-ar) .vaio-hero-content{
    left:clamp(16px,5vw,22px)!important;
    right:auto!important;
  }

  .vaio-hero-art,
  body.lang-ar .vaio-hero-art,
  body:not(.lang-ar) .vaio-hero-art{
    max-width:min(48vw, 250px)!important;
    overflow:hidden!important;
  }

  .woocommerce-checkout #payment,
  .woocommerce-checkout .woocommerce-checkout-payment,
  .woocommerce-checkout .vaio-payment-fullwidth,
  .woocommerce-checkout .vaio-payment-section{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  .woocommerce-checkout #payment ul.payment_methods,
  .woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:0!important;
    margin:0!important;
  }

  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method,
  .woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods li.wc_payment_method{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:14px!important;
    margin:0!important;
    overflow:visible!important;
  }

  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input.input-radio,
  .woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods li.wc_payment_method > input.input-radio{
    position:absolute!important;
    top:16px!important;
    inset-inline-end:16px!important;
    width:22px!important;
    height:22px!important;
    margin:0!important;
    z-index:3!important;
  }

  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label,
  .woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods li.wc_payment_method > label{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:86px!important;
    height:auto!important;
    padding:18px 44px 10px!important;
    margin:0!important;
    text-align:center!important;
    line-height:1.35!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }

  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img,
  .woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods li.wc_payment_method > label img{
    display:block!important;
    width:auto!important;
    max-width:min(170px, 72%)!important;
    height:auto!important;
    max-height:48px!important;
    object-fit:contain!important;
    margin:4px auto 0!important;
    float:none!important;
  }

  .woocommerce-checkout #payment div.payment_box,
  .woocommerce-checkout .woocommerce-checkout-payment div.payment_box{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin:12px 0 0!important;
    padding:14px!important;
    text-align:center!important;
    line-height:1.65!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    overflow:visible!important;
  }

  .woocommerce-checkout #payment div.payment_box *,
  .woocommerce-checkout .woocommerce-checkout-payment div.payment_box *{
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
  }

  .woocommerce-checkout #payment div.payment_box p,
  .woocommerce-checkout #payment div.payment_box label,
  .woocommerce-checkout .woocommerce-checkout-payment div.payment_box p,
  .woocommerce-checkout .woocommerce-checkout-payment div.payment_box label{
    display:block!important;
    width:100%!important;
    text-align:center!important;
  }

  .woocommerce-checkout #payment div.payment_box .form-row,
  .woocommerce-checkout .woocommerce-checkout-payment div.payment_box .form-row{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    flex-wrap:wrap!important;
  }

  .woocommerce-checkout #payment div.payment_box input[type="checkbox"],
  .woocommerce-checkout .woocommerce-checkout-payment div.payment_box input[type="checkbox"]{
    position:static!important;
    flex:0 0 auto!important;
    width:18px!important;
    height:18px!important;
    margin:0!important;
  }
}

@media (max-width:430px){
  .vaio-container{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .vaio-hero-content{
    max-width:62vw!important;
  }

  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label,
  .woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods li.wc_payment_method > label{
    padding-left:38px!important;
    padding-right:38px!important;
  }
}