/* Empire Five · 30-system: last word on shared components after every page slice (wave 3, pass 2).
   Kept short on purpose. Tokens, type, buttons and fields live in main.css; this file only holds
   cross-slice fixes that need to load after 30-* page parts. Selectors stay generic and low specificity,
   so any route-scoped rule in a page slice (.route-product .wa-float and similar) still wins. */

/* Icons inside buttons never squash when a label wraps at 320 to 375. */
.btn .icon, .text-link .icon, .more-link a .icon { flex: none; }

/* WhatsApp button: a little smaller and tighter to the corner on phones, so it covers less copy
   while scrolling. Route-specific offsets (product sticky bar, catalog bar) are more specific and keep working. */
@media (max-width: 560px) {
  .wa-float { width: 48px; height: 48px; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .wa-float .icon { width: 22px; height: 22px; }
}

/* Windows high contrast drops box-shadow, which is the only focus mark on fields. Give it a real outline. */
@media (forced-colors: active) {
  .input:focus, .sizes-grid input:focus { outline: 2px solid CanvasText; outline-offset: 1px; }
  .btn { border: 1px solid ButtonText; }
}