/* Touch screens (Material guidance): every target at least 44-48px, achieved with padding or invisible hit areas so the visuals stay put. */

@media (pointer: coarse) {
  /* Small round icon buttons get a larger invisible hit area. */
  .p-actions button, .stone-dot, .cycle-toggle, .icon-btn, .unit-toggle button { position: relative; }
  .p-actions button::after, .stone-dot::after, .cycle-toggle::after, .unit-toggle button::after {
    content: ''; position: absolute; inset: -8px; border-radius: inherit;
  }
  .p-actions { gap: 10px; }
  .p-actions button { width: 40px; height: 40px; }
  .stone-dots { gap: 12px; }
  .cycle-toggle { width: 40px; height: 40px; }

  /* Chips, tabs and buttons: 44px tall minimum. */
  :is(.chip, .tab, .btn, .btn-sm, .pill-btn, .link-btn, .crumbs a):not([hidden]) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-block:not([hidden]) { display: flex; }
  .tabs .tab { min-height: 48px; }
  .site-header .logo { min-height: 44px; }
  .crumbs { display: flex; align-items: center; flex-wrap: wrap; }
  .crumbs a { padding-inline: 6px; margin-left: -6px; }
  .qty button { width: 48px; }
  .unit-toggle button { padding: 6px 10px; font-size: 11.5px; }

  /* Text links in lists (footer columns, mega menus): padded rows instead of tight lines. */
  .site-footer .footer-grid a:not([hidden]) { display: flex; align-items: center; min-height: 44px; }
  .link-arrow:not([hidden]) { min-height: 44px; display: inline-flex; align-items: center; }

  /* Filter checkboxes: the whole labelled row is the target. */
  :is(.filters, .facet) label:not([hidden]) { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  .filters input[type="checkbox"], .facet input[type="checkbox"] { width: 20px; height: 20px; }
}

/* Bottom navigation labels: Material keeps them at 12px for legibility. */
@media (max-width: 767px) {
  .mb-item { font-size: 11.5px; }
}