/* Guest My Account forms: contain the mobile grid without clipping its widgets.
 * The page's Divi CSS uses a min-content-sized 1fr track and nested padding.
 * Keep at least 300px for the existing normal-size Turnstile widget at 320px+.
 * Authentication and account-dashboard behavior are unchanged; Turnstile uses its supported flexible width.
 */
@media (max-width: 980px) {
  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login > .col-1,
  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login > .col-2 {
    min-width: 0;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login form,
  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login .form-row {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 560px) {
  body.woocommerce-account:not(.logged-in) #page-container .tuners-account-section {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body.woocommerce-account:not(.logged-in) #page-container .tuners-account-section .et_pb_row {
    width: 100% !important;
  }

  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account {
    padding: 20px 12px !important;
  }

  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login > .col-1,
  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login > .col-2 {
    padding: 24px 10px;
  }
}

@media (max-width: 374px) {
  body.woocommerce-account:not(.logged-in) #page-container .tuners-account-section,
  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login > .col-1,
  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login > .col-2 {
    padding-right: 4px;
    padding-left: 4px;
  }
}

@media (max-width: 343px) {
  body.woocommerce-account:not(.logged-in) #page-container .tuners-account-section,
  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login > .col-1,
  body.woocommerce-account:not(.logged-in) #page-container .tuners-my-account #customer_login > .col-2 {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Google supplies an iframe wider than its visible button to include its own
 * margins/focus ring. The theme's generic max-width:100% cuts that iframe.
 * Preserve Google's intrinsic geometry and never replace its official logo. */
body.woocommerce-account:not(.logged-in) #customer_login .googlesitekit-sign-in-with-google__frontend-output-button,
body.woocommerce-account:not(.logged-in) #customer_login .googlesitekit-sign-in-with-google__frontend-output-button > div {
  overflow: visible !important;
}
body.woocommerce-account:not(.logged-in) #customer_login .googlesitekit-sign-in-with-google__frontend-output-button iframe {
  max-width: none !important;
}
body.woocommerce-account:not(.logged-in) #customer_login .trss-account-challenge {
  width: 100%;
  box-sizing: border-box;
  clear: both;
}
body.woocommerce-account:not(.logged-in) #customer_login .trss-account-challenge .cf-turnstile {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}