/*
 * Mobile Webshop UX
 *
 * iOS Safari automatically zooms focused form controls when their computed
 * font size is below 16px. Keep mobile website controls at 16px so quantity,
 * search, filter and checkout fields behave more like native app controls.
 *
 * Do not disable user scaling in the viewport: customers can still pinch-zoom
 * when they intentionally want to.
 */
@media (max-width: 767.98px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select,
  .form-control,
  .form-select {
    font-size: 16px !important;
  }

  /* Reduce accidental double-tap zoom/delay on interactive webshop controls. */
  button,
  .btn,
  a,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    touch-action: manipulation;
  }

  /*
   * /all-products mobile catalogue:
   * remove page chrome that consumes vertical shopping space between the
   * fixed customer header and the actual filtering/search controls.
   *
   * Keep this tightly scoped to the product catalogue so breadcrumbs and
   * page headings remain untouched elsewhere on the website.
   */
  body.product-page[data-path="all-products"] .page-breadcrumbs,
  body.product-page[data-path="all-products"] .page-header-wrapper,
  body.product-page #page-all-products .page-breadcrumbs,
  body.product-page #page-all-products .page-header-wrapper {
    display: none !important;
  }

  body.product-page[data-path="all-products"] .page-content-wrapper > main.container,
  body.product-page #page-all-products .page-content-wrapper > main.container {
    margin-top: 8px !important;
  }

  body.product-page[data-path="all-products"] .page_content,
  body.product-page #page-all-products .page_content {
    padding-top: 0 !important;
  }

}