/* ==========================================================================
   mobile-polish.css
   Sitewide mobile refinements for DIY KIT. Loaded LAST (after site-core.css
   and theme-a.css) so it can refine both without editing them. Everything is
   scoped to small viewports — desktop rendering is untouched. Safe-polish
   only: readability, tap-target sizing, button/label clarity, form usability,
   and overflow / vertical-text guards. No layout redesign.
   ========================================================================== */

/* ---- Phones & small tablets (<= 640px) --------------------------------- */
@media (max-width: 640px){

  /* Squeezed flex text must never stack one letter per line. Pairs with the
     site-core fix (overflow-wrap:break-word) for belt-and-braces safety. */
  .btn, .chip, .pill, .badge, .tag, .ps-eyebrow, .ps-count, .p-status,
  .p-action-btn, .sd-cat-pill, [class*="eyebrow"]{
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Readable floor for the smallest labels (~12.8px at the 16.5px base). */
  small, .muted, .ps-eyebrow, .ps-count, .badge, .tag, .p-status,
  .p-meta, figcaption, .form-hint, .help-text, .hint{
    font-size: .78rem !important;
    line-height: 1.45;
  }

  /* Tap targets: grow anything interactive to the 44px finger minimum. */
  .btn, button, a.btn, input[type="submit"], input[type="button"],
  .p-action-btn, .p-compare-btn, .sh-icon-btn,
  .pagination a, .pagination button{
    min-height: 44px !important;
  }
  .sh-icon-btn{ min-width: 44px !important; }
  .p-compare-btn{ min-height: 42px !important; }

  /* Forms: 16px prevents iOS auto-zoom on focus; roomy, tappable controls. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control{
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea{ min-height: 104px; }

  /* Clear spacing inside product action button groups. */
  .p-actions{ gap: 8px; }

  /* Hard stop on accidental horizontal scrolling. */
  html, body{ overflow-x: hidden; max-width: 100%; }
  img, svg, video, iframe, table, pre{ max-width: 100%; }
  table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Very small phones (<= 380px) -------------------------------------- */
@media (max-width: 380px){
  .btn, .p-action-btn{
    padding-left: 12px;
    padding-right: 12px;
    font-size: .86rem;
  }
}