/* Mobile touch targets — Google + Material Design require 48dp on touch devices.
   Lifted as a shared rule across the site (homepage, /billing, /templates,
   /community, /blog/, /app2 already inline). Desktop > 768px is untouched. */
@media (max-width: 768px) {
    a:not([hidden]):not([style*="display:none"]),
    button:not([disabled]),
    [role="button"],
    .btn,
    [class*="btn-"]:not(.btn-link):not(.btn-text),
    .icon-btn,
    .lang-pill,
    .preset,
    .user-pill,
    .menu-item,
    .filter-pill, .filter-btn,
    .sort-tab, [class*="sort-"],
    .cat-pill, .category-pill,
    .nav-link, .nav-cta,
    .mp-overlay-btn,
    [data-action] {
        min-height: 48px;
    }
    /* Icon-only / square hit targets */
    .mobile-toggle, #mobile-toggle, .icon-btn,
    button[aria-label][class*="icon"],
    .footer-social-link, [class*="social-link"],
    .lang-switch a, [class*="lang-switch"] a {
        min-width: 48px !important;
        min-height: 48px !important;
    }
    /* Text-link tap area (logo, "← Back" links etc.) — 48dp without changing
       the visual size by adding flex padding. */
    .logo, #logo, #logoLink,
    .back-link, [class*="back-"],
    .footer-link {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
    }
    /* Inline images that lack explicit width/height — guard against CLS by
       reserving aspect-ratio when neither dimension is set. */
    img:not([width]):not([height]):not([class*="icon"]) {
        aspect-ratio: 16/9;
        width: 100%;
        height: auto;
    }
}