/* Touch targets: everything a thumb taps is at least 44 x 44 px (Apple 44 pt, Material 48 dp).
   The look stays as it is wherever possible: a control grows by padding or by an invisible hit area, not by a redesign. */
@media (pointer: coarse), (max-width: 767px) {
  :root { --tap: 44px; }

  /* Header. The cart, quote list and wishlist live in the bottom tab bar and the account drawer on a phone, so the header keeps the logo, colour mode and language. */
  .site-header-icon { display: none; }
  .site-header-logo-link, .ts__btn, .site-header-language { min-width: var(--tap); min-height: var(--tap); }
  .site-header-logo-link, .site-header-language { display: inline-flex; align-items: center; justify-content: center; }
  .ts__btn { width: var(--tap); height: var(--tap); }
  .site-header-language { padding-inline: 10px; }

  /* Fields and buttons of forms. 16 px text also stops iPhones from zooming in on focus. */
  .store-shell :where(button:not([data-wl-toggle]), select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]):not([type=range])) { min-height: var(--tap); }
  .store-shell :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]):not([type=range]), select, textarea) { font-size: max(16px, 1em); }

  /* Product cards: the add button and the heart. The heart keeps its 28 px look and gets a 44 px hit area. */
  .pcc-add { width: var(--tap); height: var(--tap); }
  .pcc-add.pcc-add--quote { width: auto; min-height: var(--tap); }
  .pcard-img > button[data-wl-toggle], .pcard-img-wrap > button[data-wl-toggle] { width: var(--tap) !important; height: var(--tap) !important; top: -1px !important; inset-inline-end: -1px !important; background: transparent !important; box-shadow: none !important; }
  .pcard-img > button[data-wl-toggle]::before, .pcard-img-wrap > button[data-wl-toggle]::before { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--wh-surface) 92%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
  .pcard-img > button[data-wl-toggle] i, .pcard-img-wrap > button[data-wl-toggle] i { position: relative; }
  .store-shell .wl-remove { width: var(--tap); height: var(--tap); top: 0; inset-inline-end: 0; }

  /* Links that act as buttons or list rows. */
  .section-link, .brands-all, .mchip, .type-card, .page-btn, .mob-more-btn, .pdp-category, .wl-add-btn, .wl-continue, .qc-add-btn,
  .ft-link, .ft-contact, .ft-legal a, .ft-legal button, .breadcrumb a, .pdp-share-btn, .mnav-drawer-item {
    display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap);
  }
  .ft-link, .ft-contact { display: flex; margin-bottom: 0; }
  .ft-contact { align-items: center; }
  .page-btn, .pdp-share-btn, .wl-remove { justify-content: center; }
  .pdp-share-btn { width: var(--tap); height: var(--tap); }
  .pdp-stepper button { flex: 0 0 var(--tap); width: var(--tap); }
  .u-bc3b15 a { display: inline-flex; align-items: center; min-height: var(--tap); }

  /* Button-style links that were given their look as generated utility classes (cart, orders, quotes, account). */
  .u-4f9334, .u-8a08ad, .u-e56a69, .u-a592e4, .u-bf3f9c, .u-d89539, .u-385573, .u-e342ab, .u-34d048 { min-height: var(--tap); }
  .u-a592e4 { display: flex; align-items: center; justify-content: center; }
}

/* Product cards on narrow phones (catalogue and homepage share them): the action row wraps instead of cutting the cart button off. */
@media (max-width: 768px) {
  .pcard { min-width: 0; }
  .pcard .pcard-act { flex-wrap: wrap; min-width: 0; }
  .pcard .pcard-price { flex: 1 1 auto; min-width: min-content; }
  .pcard .pcard-unit { white-space: normal; }
  .pcard .pcard-cart { min-width: 0; max-width: 100%; }
  .pcard .pcc-add--quote { max-width: 100%; white-space: normal; text-align: center; justify-content: center; padding-block: 6px; line-height: 1.2; }
}