/* Mobile-only visual sequence. Keep one copy of every existing control so
 * variation, gallery, cart and composition listeners retain their targets.
 * Desktop layout and the composition plugin are intentionally untouched.
 */
@media only screen and (max-width: 767px) {
  @supports (display: contents) {
    .base .p-product__wrapper {
      display: flex;
      flex-direction: column;
      row-gap: 24px;
    }

    .base .p-product__wrapper > .p-product__info,
    .base .p-product__wrapper .p-product__info > .p-product__info-column {
      display: contents;
    }

    .base .p-product__wrapper > .p-product__breadcrumbs-row {
      order: 0;
      margin-bottom: 0;
    }

    .base .p-product__wrapper .p-product__info-column > .p-product__title,
    .base .p-product__wrapper .p-product__info > .p-product__images-column,
    .base .p-product__wrapper .p-product__info-column > .p-product__price,
    .base .p-product__wrapper .p-product__info-column > .p-product__variants,
    .base .p-product__wrapper .p-product__info-column > .p-product__buy-row,
    .base .p-product__wrapper .p-product__info-column > .p-product__preview,
    .base .p-product__wrapper > .p-product__tags,
    .base .p-product__wrapper > .p-product__description-and-comments,
    .base .p-product__wrapper > .bcpc-public-composition,
    .base .p-product__wrapper > .p-product__suitable-products {
      box-sizing: border-box;
      flex: none;
      align-self: center;
      width: calc(100% - 40px);
      max-width: 960px;
      min-width: 0;
      margin: 0;
    }

    .base .p-product__wrapper .p-product__info-column > .p-product__title {
      order: 10;
    }

    .base .p-product__wrapper .p-product__info > .p-product__images-column {
      order: 20;
    }

    .base .p-product__wrapper .p-product__info-column > .p-product__price {
      order: 30;
    }

    .base .p-product__wrapper .p-product__info-column > .p-product__variants {
      order: 40;
    }

    .base .p-product__wrapper .p-product__info-column > .p-product__buy-row {
      order: 50;
    }

    .base .p-product__wrapper .p-product__info-column > .p-product__mark {
      order: 60;
      align-self: flex-start;
      box-sizing: border-box;
      width: fit-content;
      max-width: calc(100% - 40px);
      margin: -8px 20px;
      overflow-wrap: anywhere;
    }

    .base .p-product__wrapper > .p-product__tags {
      order: 70;
    }

    .base .p-product__wrapper .p-product__info-column > .p-product__preview {
      order: 80;
      padding-left: 0;
      padding-right: 0;
    }

    .base .p-product__wrapper > .p-product__description-and-comments {
      order: 90;
      padding: 0;
    }

    .base .p-product__wrapper > .bcpc-public-composition {
      order: 100;
      padding: 0;
    }

    .base .p-product__wrapper > .p-product__suitable-products {
      order: 110;
      margin-top: 8px;
      padding: 0;
    }
  }
}