/* Phones: readable small print and finger-sized tap targets.
   Loaded last, after site.css and the section stylesheets. Only small screens are touched;
   nothing here changes the desktop layout. Every rule names an element measured at 375px
   as under 12px text or under 40px tall to tap. */

@media (max-width:768px){
  /* Menu: sub-links were 24px tall with 10px gaps; give each a full row to tap */
  .mil-main-menu .mil-has-children > ul > li{margin-bottom:0}
  .mil-main-menu .mil-has-children > ul > li > a{display:inline-block;padding:10px 0}

  /* Footer menu and breadcrumbs: same spacing, a taller hit area */
  .mil-footer-menu li a{display:inline-block;padding:12px 0;margin:-12px 0}
  .mil-breadcrumbs li a{display:inline-block;padding:12px 0;margin:-12px 0}

  /* Influencer Lab: Knocky's three clips become a swipeable row instead of 108px tiles */
  .mil-lab-knocky-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -15px;padding:0 15px 6px;scrollbar-width:none}
  .mil-lab-knocky-grid::-webkit-scrollbar{display:none}
  .mil-lab-knocky-grid figure{flex:0 0 68%;scroll-snap-align:center}
}

@media (max-width:576px){
  /* Nothing under 12px. !important because the section stylesheets size these with
     deeper selectors; this block only ever raises a size, on phones. */
  .mil-menu-login-label,
  .mil-lang-code,
  .mil-sample-chip,
  .mil-inf-tag,
  .mil-er-stat small,
  .mil-er-code,
  .mil-er-when,
  .mil-er-stay,
  .mil-er-chip,
  .mil-er-frame-k,
  .mil-er-frame-more,
  .mil-pt-eyebrow,
  .mil-pt-brand-badge,
  .mil-pt-ind i,
  .mil-pt-row-k,
  .mil-cr-eyebrow,
  .mil-cr-card-meta,
  .cs .cs-swatch b{font-size:12px!important}
}