/* Moonlit — touch targets. Loaded LAST on purpose; see tools/mlt/parts/touch.mjs. */
/* Up to 1023, not 767: a tablet is a touch screen too, and the 768 column of the responsive sweep
   had 116 controls under 24px for exactly that reason. Only hit areas grow here, never a size that
   is drawn, so the layout at 768 is unchanged. */
@media (max-width: 1023px), (pointer: coarse) {
  .ml-ib,
  .ml-arrow { min-width: 44px; min-height: 44px; }

  .ml-card__w { width: 44px; height: 44px; }

  /* the slideshow dots are drawn 7px; the hit area is padded out around them */
  .ml-hero__dot { position: relative; }
  .ml-hero__dot::after { content: ''; position: absolute; inset: -19px; }   /* 7 + 19x2 = 45 */

  .ml-chip,
  .ml-stile,
  .ml-qty__b,
  .ml-mmenu__tab { min-height: 44px; }

  .ml-link,
  .ml-pop__no,
  .ml-line__x,
  .ml-sort select { min-height: 44px; display: inline-flex; align-items: center; }

  /* The card's metal dots are drawn 16px (the design's own size) and they are now real controls —
     a click swaps the card. The dot keeps its size; the tappable square around it is 44px. */
  /* the footer's social icons are 18px marks; same trick, the mark keeps its size */
  .ml-social a { position: relative; display: inline-flex; }
  .ml-social a::after { content: ''; position: absolute; inset: -13px; }

  .ml-mt { position: relative; }
  /* 44px tall, but sideways only into half the 14px gap: a 44px-wide area overlapped the next dot, so a tap on
     White Gold picked Yellow Gold (found by a real touchscreen tap, mlt-swapflow). Five metals in a 168px phone card
     cannot each be 44px wide — 28 x 44 (above the 24px WCAG minimum) is a declared deviation. */
  .ml-mt::after { content: ''; position: absolute; inset: -15px -7px; }
  /* and they need room not to overlap each other once their hit areas are that big */
  .ml-card__mt { gap: 14px; }

  /* the builder's own controls, measured at 375 */
  .ml-ref__o,
  .ml-ref__m,
  .ml-dd__t,
  .ml-rb__sum a,
  .ml-pager__a { min-height: 44px; display: inline-flex; align-items: center; }
  .ml-dcard,
  .ml-drow { cursor: pointer; }
  .ml-drow { min-height: 64px; }

  /* footer links sit in a dense list; 36px keeps them reachable without stretching the column */
  .ml-foot__col a,
  .ml-foot__legal a { min-height: 44px; display: inline-flex; align-items: center; }

  /* the responsive sweep at 375 / 768 / 1024 (touch), tools/mlt/mlt-resp.mjs → verify/md/TSDRC-resp.txt */
  /* text links and marks keep their drawn size; an invisible extender gives the 44px tap area */
  .ml-logo, .ml-top__appt, .ml-crumb a, .ml-rbstep__chg, .ml-mom__w, .ml-nav__link { position: relative; }
  .ml-logo::after, .ml-crumb a::after, .ml-rbstep__chg::after, .ml-mom__w::after { content: ''; position: absolute; inset: -14px -6px; }
  .ml-top__appt::after, .ml-nav__link::after { content: ''; position: absolute; inset: -15px -4px; }
  /* CARD-TITLE 4 Nov: the 2-line box (2 x 1.15em) and a 44px tap area. Where 2 lines are shorter than 44px (17px names on a
     phone: 39px) the extra goes ABOVE the text as padding, taken back by a negative margin, so the 2 lines end exactly at
     the box's bottom edge — a 44px box with the text at the top let the clipped 3rd line peek out below. */
  .ml-card__t { min-height: max(44px, calc(2 * 1.15em)); padding-top: max(0px, calc(44px - 2 * 1.15em)); margin-top: min(0px, calc(2 * 1.15em - 44px)); }
  .ml-card__q { height: 44px; }
  .ml-ib, .ml-call, .ml-hero__pause { min-width: 44px; min-height: 44px; }
  .ml-foot__ch { min-height: 44px; width: 100%; }
  .ml-btn, .ml-sub__b, .ml-refbtn, .ml-rb__tab, .ml-rb__fbtn, .ml-pdp__act, .ml-gal button { min-height: 44px; }
  .ml-pdp__act { display: inline-flex; align-items: center; }
  .ml-rb__vb, .ml-pager__a, .ml-pager__n, .ml-sw, .ml-stile, .ml-ref__m { min-width: 44px; min-height: 44px; }
  .ml-a11y-skip { min-height: 44px; }
  .ml-foot input, .ml-hsrch__i, .ml-srch__i, .ml-ref input[type="number"], .ml-cfsl input[type="number"], .ml-rb input[type="number"], .ml-input { min-height: 44px; }
  input[type="range"] { min-height: 44px; }
  /* second sweep: rules elsewhere set a smaller min-height with more specificity, so these win with body */
  body .ml-bigsearch .ml-btn, body .ml-bigsearch input, body .ml-chip--sm, body .ml-rbseg__b, body select { min-height: 44px; }
  body .ml-pager__a, body .ml-pager__n { min-width: 44px; }
  .ml-pager { flex-wrap: wrap; row-gap: 10px; }
  .ml-foot a { min-width: 44px; }
  .ml-top__appt { min-width: 44px; justify-content: center; }
  .ml-crumb a::after, .ml-rbstep__chg::after { inset: -15px -6px; }
  .ml-rbstep__chg:not([hidden]) { display: inline-flex; justify-content: center; min-width: 44px; }
  .ml-rbstep__chg::after { inset: -15px 0; }
  /* third sweep */
  body .ml-pills .ml-chip, body .ml-pills .ml-chip--sm { min-height: 44px; }
  body select { min-width: 44px; }
  .ml-help summary { min-height: 44px; }
  li > a.ml-small, a[href^="tel:"], a[href^="mailto:"], a[href*="google.com/maps"] { min-height: 44px; display: inline-flex; align-items: center; }
}
/* the 44px targets take room: at 1024 (a touch tablet) four 44px header icons pushed "Book a virtual appointment"
   into the logo, and on a phone the Daylight / Moonlight pill grew into "View in 3D". Those labels become
   icon-only there; the words stay as the accessible name (visually hidden, the .ml-sr pattern). */
@media (max-width: 1199px) {
  .ml-top__appt span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 767px) {
  .ml-gal__light button span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ml-gal__light button { min-width: 44px; justify-content: center; padding-inline: 0; }
}

/* 31 Oct responsive pass (tools/mlt/mlt-resp.mjs at 375 / 390 / 768 / 1024 → moonlit-fine-jewelry-resp/): the last
   sub-44px controls. The drawn size stays; an invisible extender gives the tap area where growing the box would
   change the layout (the bag / cart steppers sit beside Remove and the price). */
@media (max-width: 1023px), (pointer: coarse) {
  .ml-qty .ml-qty__b { position: relative; }
  .ml-qty .ml-qty__b::after { content: ''; position: absolute; inset: 0 -13px; }          /* 18 → 44 wide; the sides reach into the gap and the number */
  .ml-line__acts a, .ml-line__acts button { position: relative; }
  .ml-line__acts a::after, .ml-line__acts button::after { content: ''; position: absolute; inset: -15px -9px; }   /* EDIT is 27px wide → 45 */
  .ml-nav__link::after { inset: -16px -4px; }                                             /* the 11px tablet nav: 13 + 32 = 45 tall */   /* EDIT · Move to wishlist · Add gift note (15px captions) */
  .ml-line__acts { gap: 24px; }
  .ml-tog::after { content: ''; position: absolute; inset: -12px -4px; }                 /* the 36x20 gift switch */
  .ml-bag__note { min-height: 44px; }
}
/* 31 Oct (filter audit, tablet): the Filters button grows to 44px on touch, the Sort box beside it stayed 36px (its select spilled
   4px over both edges) — the box now matches. */
@media (max-width: 1023px), (pointer: coarse) { .ml-ctool .ml-sort { box-sizing: border-box; height: auto; min-height: 44px; } .ml-ctool .ml-sort select { min-height: 42px; } }
/* 3 Nov (RESPONSIVE, 9-width sweep tools/mlt/mlt-resp9.mjs): on a phone every text field is 16px, so iOS Safari does
   not zoom the page when one is focused (13-14px fields: newsletter, PDP length / size select, qty, contact and
   account forms, price filter, bag note). Fields only; the labels and buttons beside them keep their size. */
@media (max-width: 767px) {
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), body select, body textarea { font-size: 16px; }
  /* the same fields when they carry the theme's own class (.ml-select / .ml-field / .ml-cart__ta, one class each)
     — a bare "body select" lost to them, the re-sweep showed */
  body select[class], body textarea[class] { font-size: 16px; }
}