/*
 * Mobile-only layout reorder for the curated WooCommerce product pages
 * listed in functions.php (cpw_mobile_reorder_target_ids). Opt-in via
 * body class .cpw-mobile-reorder. Targets <=849px (Flatsome small-down breakpoint).
 *
 * Currently applied to: Cloudster Pillow Dark/Camo/White Holster Wedge,
 * Ultimate/Core/Essentials Carry Bundles. All share the same DOM structure
 * (variable product + Mag Carrier bundle-sell + thwepo foam/Velcro extras).
 */
@media (max-width: 849px) {

  /* Shrink mobile hero so title/rating/price/size are above the fold. */
  body.single-product.cpw-mobile-reorder .product-gallery .woocommerce-product-gallery__wrapper img,
  body.single-product.cpw-mobile-reorder .product-gallery .slide img,
  body.single-product.cpw-mobile-reorder .product-gallery .flickity-slider img {
    max-height: 60vh;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
  }
  body.single-product.cpw-mobile-reorder .product-gallery .slider {
    max-height: 62vh;
  }

  /* Optional add-on accordions inserted by product-mobile-reorder.js. */
  body.single-product.cpw-mobile-reorder details.cpw-addon-accordion {
    margin: 0.75rem 0;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #fafafa;
    overflow: hidden;
  }
  body.single-product.cpw-mobile-reorder details.cpw-addon-accordion > summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    list-style: none;
    user-select: none;
    color: #0d3b66;
  }
  body.single-product.cpw-mobile-reorder details.cpw-addon-accordion > summary::-webkit-details-marker {
    display: none;
  }
  body.single-product.cpw-mobile-reorder details.cpw-addon-accordion > summary::after {
    content: "+";
    float: right;
    font-weight: 700;
    color: #0d3b66;
  }
  body.single-product.cpw-mobile-reorder details.cpw-addon-accordion[open] > summary::after {
    content: "−";
  }
  body.single-product.cpw-mobile-reorder details.cpw-addon-accordion > .cpw-addon-body {
    padding: 0.5rem 1rem 1rem;
    background: #fff;
  }
  body.single-product.cpw-mobile-reorder details.cpw-addon-accordion > .cpw-addon-body table.extra-options {
    width: 100%;
  }

  /* Hide the original thwepo extras table once its rows have been extracted. */
  body.single-product.cpw-mobile-reorder .woocommerce-variation-add-to-cart > table.extra-options.cpw-mobile-extras-hidden {
    display: none !important;
  }

  /* Make sure the buy block (qty + Add to Cart + Apple Pay) sits above the accordions visually too,
     in case JS hasn't applied yet (progressive enhancement fallback). */
  body.single-product.cpw-mobile-reorder form.variations_form .single_variation_wrap {
    display: flex;
    flex-direction: column;
  }
  body.single-product.cpw-mobile-reorder form.variations_form .single_variation_wrap > .woocommerce-variation { order: 1; }
  body.single-product.cpw-mobile-reorder form.variations_form .single_variation_wrap > .woocommerce-variation-add-to-cart { order: 2; }
  body.single-product.cpw-mobile-reorder form.variations_form .single_variation_wrap > details.cpw-addon-accordion { order: 3; }
  body.single-product.cpw-mobile-reorder form.variations_form .single_variation_wrap > .bundle_sells_title,
  body.single-product.cpw-mobile-reorder form.variations_form .single_variation_wrap > .bundle_form,
  body.single-product.cpw-mobile-reorder form.variations_form .single_variation_wrap > .bundle_data { order: 4; }
}