/*
 * AYESH v1.0.201 — checkout mobile viewport / width consolidation.
 * Presentation-only. Do not resize the document with CSS zoom or transforms.
 * Prevent earlier container paddings and intrinsic grid sizing from leaving
 * a visible right-side gutter or shrinking the entire checkout.
 */
@media screen and (max-width: 767px) {
  html body.woocommerce-checkout:not(.woocommerce-order-received) {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: clip !important;
    transform: none !important;
  }
  /* Header and body are viewport-width surfaces; only the interior is padded. */
  html body.woocommerce-checkout:not(.woocommerce-order-received) .ayesh-checkout-minimal,
  html body.woocommerce-checkout:not(.woocommerce-order-received) main#hb-main-content {
    display: block !important;
    position: relative;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  html body.woocommerce-checkout:not(.woocommerce-order-received) .ayesh-checkout-minimal__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding-inline: 14px !important;
    box-sizing: border-box !important;
  }
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received) #hb-main-content {
    padding: 0 12px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    background: #f5f5f7 !important;
  }
  /* page.php wraps WooCommerce in .hb-container, which normally already has
     horizontal gutters. Remove that second gutter on checkout ONLY. */
  html body.woocommerce-checkout:not(.woocommerce-order-received)
    #hb-main-content > .hb-container.hb-content {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }
  html body.woocommerce-checkout:not(.woocommerce-order-received)
    #hb-main-content > .hb-container.hb-content > .woocommerce {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }
  /* Force a single real grid track: min-content sizing from nested order
     tables, selects, and long amounts must not expand the page. */
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    form.checkout.woocommerce-checkout {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "details" "delivery" "payment" "summary" !important;
    gap: 12px !important;
    align-items: start !important;
    justify-items: stretch !important;
  }
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    form.checkout.woocommerce-checkout > :is(#customer_details,.ayesh-v182-delivery,.hb-checkout-payment-wrap,.hb-checkout-summary-wrap) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    #customer_details .woocommerce-billing-fields__field-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0,1fr) !important;
  }
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    #customer_details .woocommerce-billing-fields__field-wrapper > .form-row,
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    #customer_details .woocommerce-input-wrapper,
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    #customer_details .select2-container,
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    #customer_details :is(input.input-text,textarea,select) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    #customer_details :is(input.input-text,textarea,select) {
    font-size: 16px !important; /* avoid Safari focus auto-zoom */
  }
  /* Keep the four-step region from creating a phantom horizontal overflow. */
  html body.woocommerce-checkout:not(.woocommerce-order-received) .hb-checkout-hero,
  html body.woocommerce-checkout:not(.woocommerce-order-received) .hb-checkout-steps {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
  html body.woocommerce-checkout:not(.woocommerce-order-received) .hb-checkout-steps {
    gap: clamp(3px,1.25vw,7px) !important;
    font-size: clamp(11px,3.3vw,13px) !important;
  }
  html body.woocommerce-checkout:not(.woocommerce-order-received) .hb-checkout-steps span {
    min-width: 0 !important;
    gap: 5px !important;
    overflow-wrap: normal;
    white-space: normal !important;
  }
  html body.woocommerce-checkout:not(.woocommerce-order-received) .hb-checkout-steps i {
    min-width: 6px !important;
    flex-basis: 12px !important;
    max-width: 22px !important;
  }
  /* Keep sticky total and Place Order fully inside the viewport, with no
     fixed-width or translate inherited from legacy markup. */
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    .ayesh-v181-mobile-bar {
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    .ayesh-v181-mobile-bar__total {
    min-width: 0 !important;
  }
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    .ayesh-v181-mobile-bar__action {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    white-space: normal !important;
  }
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    #order_review,
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    #order_review .hbco-totals,
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received)
    .hb-checkout-summary-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
@media screen and (max-width: 359px) {
  html body.woocommerce-checkout.ayesh-v182-checkout:not(.woocommerce-order-received) #hb-main-content {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
  html body.woocommerce-checkout:not(.woocommerce-order-received) .ayesh-checkout-minimal__inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}