/* =====================================================================
 * KS-PDP-MOBILE-REORDER-V1 (2026-09-22)
 *
 * Defect: on <768px the gallery (single image + thumbnails + the
 * ks-key-facts widget, ~1270-1335px tall) renders before the product
 * name, price and buy button, so a phone buyer scrolls ~3.3 screens to
 * reach "Do koszyka". Target: CTA reachable within 1.0 screen.
 *
 * Fix: CSS-only reorder, no markup moved and no JS. `display:contents`
 * on the two wrapper divs (.pdp-col-buybox and its child
 * .product-information) "dissolves" them so their children become
 * direct flex items of .product-container.js-product-container
 * alongside .pdp-col-image, and flex `order` puts the essentials
 * (h1, price, stock/delivery line, buy form) first, the gallery next,
 * and everything else after that -- same content, same DOM, just a
 * different paint order on narrow screens. Desktop (>=768px) is
 * untouched -- every rule here is gated behind max-width:767px.
 *
 * NOTE: ks-iter.css already has its own !important order rules on
 * several of these same classes (.product-prices, .ks-availability-row,
 * .product-actions, .ks-buybox-divider, .ks-buybox-features, etc. --
 * an existing internal reorder scheme for .product-information's own
 * children that never accounted for the gallery). This file must beat
 * that cascade: every rule below uses !important + at least 3 classes
 * of specificity so it wins regardless of load order.
 *
 * Revert: delete this file and its <link> in
 * themes/classic/templates/catalog/product.tpl.
 * ===================================================================== */

@media (max-width: 767px) {
  body#product .row.product-container.js-product-container {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Dissolve the two wrappers so their children join the flex context above */
  body#product .pdp-col-buybox,
  body#product .pdp-col-buybox .product-information {
    display: contents !important;
  }

  /* Above-the-fold essentials, in reading order */
  body#product .pdp-col-buybox > h1.ks-product-title {
    order: 1 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  body#product .pdp-col-buybox .product-information > .product-prices {
    order: 2 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  body#product .pdp-col-buybox .product-information > .ks-availability-row {
    order: 3 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  body#product .pdp-col-buybox .product-information > .product-actions.js-product-actions {
    order: 4 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Gallery: collapsed to a single image, capped height, right after the CTA cluster.
     Thumbnails + the ks-key-facts widget live inside this same column, so ordering the
     column after the buy form automatically puts them below the CTA too. */
  body#product .pdp-col-image {
    order: 5 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  body#product .pdp-col-image .product-cover,
  body#product .pdp-col-image .images-container .product-cover {
    max-height: 45vh !important;
  }
  body#product .pdp-col-image .product-cover img,
  body#product .pdp-col-image .product-cover picture img {
    max-height: 45vh !important;
  }

  /* Everything else that used to sit between availability-row and the buy form in
     ks-iter.css's own order scheme (product-description, ks-buybox-features,
     ks-buybox-divider, product_header_container leftovers, blockreassurance_product)
     plus anything not explicitly listed: keep it, just push it after the gallery. */
  body#product .pdp-col-buybox .product-information > * {
    order: 6 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}