/* Nana Online Store V3 — full-width GeneratePress layout guard. */
body.woocommerce-page #page,
body.woocommerce-page .site-content,
body.woocommerce-page main.nana-studio-shop,
body.woocommerce-page .nana-studio-pdp,
body.woocommerce-page .nana-commerce-os {
  width: 100%;
  max-width: none;
  min-width: 0;
}

body.woocommerce-page .site-content {
  display: block;
}

body.woocommerce-page main.nana-studio-shop,
body.woocommerce-page .nana-studio-pdp,
body.woocommerce-page .nana-commerce-os {
  flex: 0 0 100%;
}

/* Logged-out My Account contains one authentication form. The generic
 * account dashboard grid reserves a 250px navigation column even though no
 * navigation exists, which makes the login card look like a phone mock-up. */
body:not(.logged-in).woocommerce-account .nana-commerce-os--account .woocommerce {
  display: block !important;
  width: min(100%, 720px) !important;
  margin-inline: auto;
}

body:not(.logged-in).woocommerce-account .nana-commerce-os--account .u-columns {
  display: block !important;
  width: 100%;
}

body:not(.logged-in).woocommerce-account .nana-commerce-os--account :is(.u-column1, .u-column2) {
  float: none !important;
  width: 100% !important;
}

body:not(.logged-in).woocommerce-account .nana-commerce-os--account :is(.woocommerce-form-login, .woocommerce-form-register) {
  width: 100% !important;
  max-width: 640px !important;
  margin-inline: auto !important;
  padding: clamp(28px, 4vw, 46px) !important;
}

body:not(.logged-in).woocommerce-account .nana-commerce-os--account .woocommerce-password-input {
  position: relative;
  display: block;
}

body:not(.logged-in).woocommerce-account .nana-commerce-os--account .show-password-input {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #10110f !important;
  transform: translateY(-50%) !important;
}

body:not(.logged-in).woocommerce-account .nana-commerce-os--account .show-password-input::after {
  color: currentColor !important;
}

/* WooCommerce classic checkout keeps 48% floats and a sticky order review.
 * Once the Nana layout becomes one column those legacy rules can overlap the
 * customer form. Tablet/mobile is therefore forced into an explicit vertical
 * document flow. */
@media (max-width: 1080px) {
  body.woocommerce-checkout .nana-commerce-os--checkout form.checkout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    gap: 24px !important;
  }

  body.woocommerce-checkout .nana-commerce-os--checkout #customer_details,
  body.woocommerce-checkout .nana-commerce-os--checkout #order_review {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    box-sizing: border-box;
  }

  body.woocommerce-checkout .nana-commerce-os--checkout #customer_details {
    order: 1;
  }

  body.woocommerce-checkout .nana-commerce-os--checkout #order_review {
    order: 2;
  }

  body.woocommerce-checkout .nana-commerce-os--checkout #customer_details :is(.col-1, .col-2) {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

@media (max-width: 760px) {
  body.woocommerce-checkout .nana-commerce-os--checkout #order_review {
    padding: 20px !important;
    overflow: hidden;
  }

  body.woocommerce-checkout .nana-commerce-os--checkout .woocommerce-checkout-review-order-table {
    width: 100% !important;
    table-layout: fixed;
  }

  body.woocommerce-checkout .nana-commerce-os--checkout .woocommerce-checkout-review-order-table :is(th, td) {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}