/* mobile-tap-targets.css — meet the 44px minimum on touch screens.
 *
 * Measured on a live PDP at 390×844: 31 of 53 interactive controls were under
 * the 44×44 CSS-px minimum that both Apple HIG and WCAG 2.5.8 specify. The
 * worst offenders sit directly on the buying path:
 *
 *   carousel tabs (Oak / Cushion / Seated / Interior / At the window)   30px
 *   sticky buy bar: CHOOSE SELECTION 42px, Ask 43×42
 *   currency selector                                                   36px
 *   nav burger                                       38×32
 *   modal close buttons                              23–32px
 *
 * Mobile converts far worse than desktop here — of visitors who scroll a
 * product page, 20% of desktop pick an option versus 8% on mobile. Undersized
 * tap targets are not the whole story, but they are a measurable, mechanical
 * part of it that costs nothing to fix.
 *
 * Approach: expand the HIT AREA, not the visual weight. Padding and min-height
 * grow the touchable box; where that would change the layout (dense tab rows,
 * small close buttons) an ::after overlay extends the target beyond the painted
 * edge instead. The design reads identically; the finger has somewhere to land.
 *
 * Scoped to narrow viewports OR a coarse pointer. Width is the primary guard:
 * a `(pointer: coarse)` query alone silently fails to match in CDP device
 * emulation (and on a touch-capable laptop it would over-apply), so the rule
 * would look shipped while doing nothing. Desktop mice sit above 820px and are
 * unaffected either way.
 */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {

  /* Hero view tabs — Oak / Cushion / Seated / Interior / At the window.
     Real selector verified in the DOM: BUTTON < DIV.vtools < DIV.visual.
     8px padding gave a 30px box; 14px lifts it past 44 without moving the row. */
  .vtools button {
    min-height: 44px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* Sticky buy bar — the permanent route to purchase on a phone. */
  .sticky-buy .sb-add,
  .sticky-buy .sb-ask,
  .sb-add,
  .sb-ask {
    min-height: 44px;
    min-width: 44px;
  }

  /* Currency selector: SELECT < SPAN < DIV.navright */
  .navright select,
  nav select,
  #topnav select {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Nav burger: keep the drawn icon at its current size, extend the hit box
     symmetrically past it. */
  .burger {
    position: relative;
    min-width: 44px;
    min-height: 44px;
  }

  /* Close buttons on the menu and the inquiry modal are small by design —
     an invisible overlay gives them a full-size target without redrawing. */
  .mclose,
  .mli-x,
  .es-lightbox-close {
    position: relative;
  }
  .mclose::after,
  .mli-x::after,
  .es-lightbox-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* The 3D gate and the story toggle sit at 32–43px. */
  .mv-gate,
  .st-toggle {
    min-height: 44px;
  }

  /* Swatches are already large (350×200 on Ishi) but smaller collections use a
     compact grid — floor them too. */
  .sw,
  .ib-sw {
    min-height: 44px;
    min-width: 44px;
  }

  /* Remaining sub-44 controls found on a second pass: the trade "Request"
     links, newsletter Subscribe, and the cookie banner's Decline/Accept.
     Cookie consent in particular is the first thing a phone user must hit. */
  .cookie-banner button,
  .cc-actions button,
  [class*="cookie"] button,
  button[data-cc],
  .newsletter button,
  .nl-form button,
  form button[type="submit"] {
    min-height: 44px;
  }

  /* "Request →" links in the professionals / resources grids. */
  a.req,
  .res-req,
  [class*="request"] a,
  a[class*="request"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}