/* ==========================================================================
 * Single Product Layout (CLEAN)
 * File: assets/css/woocommerce-single/10-layout.css
 * Scope: body.single-product.woocommerce
 * Purpose:
 *  - Desktop: 2-column (media left, summary right)
 *  - Mobile : follow Fig-2 order strictly
 *    Title -> Media -> Price -> (Qty | Add to cart) -> Short desc -> Rest
 * ========================================================================== */

/* -----------------------------
 * Page container
 * ----------------------------- */
body.single-product.woocommerce .mj-product{
  max-width: 1200px;
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 28px 0 64px;
}

/* -----------------------------
 * Desktop grid (baseline)
 * ----------------------------- */
body.single-product.woocommerce .mj-product__grid{
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

/* Prevent any grid child causing horizontal overflow */
body.single-product.woocommerce .mj-product__media,
body.single-product.woocommerce .mj-product__summary,
body.single-product.woocommerce .mj-product__grid > *{
  min-width: 0;
}

/* Below content wrapper spacing */
body.single-product.woocommerce .mj-product__below{
  margin-top: 26px;
}

/* ==========================================================================
 * Mobile layout (<= 860px) : Follow Fig-2
 * Title (full) -> Media (full) -> Price (full) -> Cart row (full)
 * ========================================================================== */
@media (max-width: 860px){

  body.single-product.woocommerce .mj-product{
    width: calc(100% - 24px);
    padding: 18px 0 54px;
  }

  /* Use mj-product__grid as mobile layout engine */
  body.single-product.woocommerce .mj-product__grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "title title"
      "media media"
      "price price"
      "cart  cart"
      "short short"
      "rest  rest" !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    align-items: start !important;
  }

  /* Media block should end cleanly (avoid overlay feeling) */
  body.single-product.woocommerce .mj-product__media{
    grid-area: media !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Let summary children become grid items */
  body.single-product.woocommerce .mj-product__summary,
  body.single-product.woocommerce .mj-product__grid .summary{
    display: contents !important;
  }

  /* Title */
  body.single-product.woocommerce .mj-product__grid .product_title{
    grid-area: title !important;
    margin: 0 !important;
  }

  /* Price (must be BELOW media, not covered by photo) */
  body.single-product.woocommerce .mj-product__grid .price{
    grid-area: price !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important; /* ensure above any gallery effects */
    clear: both !important;
  }

  /* Cart row (Qty | Add to cart) */
  body.single-product.woocommerce .mj-product__grid form.cart{
    grid-area: cart !important;

    margin: 0 !important;
    padding: 0 !important;

    /* Root-cause prevention: never allow overlay positioning */
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    float: none !important;
    clear: both !important;

    z-index: 2 !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  body.single-product.woocommerce .mj-product__grid form.cart .quantity{
    width: 100% !important;
    margin: 0 !important;
  }

  body.single-product.woocommerce .mj-product__grid form.cart .quantity input,
  body.single-product.woocommerce .mj-product__grid form.cart .quantity select{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.single-product.woocommerce .mj-product__grid form.cart .single_add_to_cart_button,
  body.single-product.woocommerce .mj-product__grid form.cart button{
    width: 100% !important;
    margin: 0 !important;
  }

  /* Short description */
  body.single-product.woocommerce .mj-product__grid .woocommerce-product-details__short-description{
    grid-area: short !important;
    margin: 0 !important;
  }

  /* Anything else inside summary flows after short description */
  body.single-product.woocommerce .mj-product__grid .mj-product__summary > :not(.product_title):not(.price):not(form.cart):not(.woocommerce-product-details__short-description),
  body.single-product.woocommerce .mj-product__grid .summary > :not(.product_title):not(.price):not(form.cart):not(.woocommerce-product-details__short-description){
    grid-area: rest !important;
  }
}

/* ===== ROOT FIX: Prevent gallery from collapsing height (absolute/overlay) ===== */
@media (max-width: 860px){

  /* 1) Make sure gallery wrappers participate in layout (not absolute) */
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery__wrapper,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery__image{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    height: auto !important;
  }

  /* 2) Ensure media block has real bottom spacing so next rows never overlap */
  body.single-product.woocommerce .mj-product__media{
    margin-bottom: 14px !important;
    isolation: isolate; /* create clean stacking context */
  }

  /* 3) Price always stays above any gallery effect layer */
  body.single-product.woocommerce .mj-product__grid .price{
    position: relative !important;
    z-index: 5 !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 860px){
  /* Price: push down a bit more */
  body.single-product.woocommerce .mj-product__grid .price{
    margin-top: 22px !important; /* 原本 10px，改更大 */
  }
}