/*
 * Storvly storefront mobile baseline
 * ----------------------------------
 * Loaded by every vendor theme _layout.html. Fixes a small set of
 * cross-theme mobile defects identified by the May 2026 audit without
 * touching individual theme code:
 *
 *   1. Floor sub-12px text inside common eyebrow / badge / chip classes
 *   2. Collapse 4-col product / related grids to 2 / 1 on small screens
 *   3. Enforce 44x44 minimum tap targets on nav icons
 *   4. Reduce nav horizontal padding on <=640px so 360px viewports
 *      keep usable content width
 *   5. Prevent iOS auto-zoom by ensuring form inputs are >= 16px
 *   6. GPU-hint long-running marquees
 *   7. Move floating WhatsApp button to right on narrow screens
 *   8. Honour the iOS safe-area on bottom-sticky bars
 *
 * Each rule is wrapped in @media so desktop is untouched. Selectors
 * are intentionally generic (common class fragments). If a theme
 * already handles a case correctly the rule is harmless overlap.
 */

/* 1. Font-size floor for sub-12px chrome (eyebrows, badges, chips) */
@media (max-width: 540px) {
  .eyebrow, .label-eyebrow, .chip, .cat-chip, .pill,
  .badge, .product-badge, .tag,
  [class*="text-[10px]"], [class*="text-[11px]"] {
    font-size: 11px !important;
    letter-spacing: .04em;
  }
}

/* 2. Collapse 4-col related-products grids on phones.
 *    Themes commonly use .related-products / .related-grid / .pd-related
 *    or repeat(4, 1fr) inline. Cover the named cases. */
@media (max-width: 768px) {
  .related-products, .related-grid, .pd-related, .related,
  .product-related, .you-may-also-like, .recommended-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 480px) {
  .related-products, .related-grid, .pd-related, .related,
  .product-related, .you-may-also-like, .recommended-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 3. Touch target floor for nav icon buttons (WCAG 2.5.5: 44x44) */
@media (max-width: 768px) {
  .nav-actions a, .nav-actions button,
  .aes-ham, .ham, .hamburger, .nav-icon,
  header button, header a.icon-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* 4. Nav padding crush on 360px viewports — most themes set 32–40px */
@media (max-width: 640px) {
  header, .site-header, .top-bar, .nav-wrap, .navbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 5. iOS auto-zoom: form inputs must be >= 16px to suppress zoom-on-focus.
 *    Themes ship 14px inputs widely; bump only on mobile so desktop is
 *    untouched. */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="search"],
  input[type="url"], textarea, select {
    font-size: 16px !important;
  }
}

/* 6. GPU hint for marquees + slow infinite animations.
 *    Cheaper paints on budget Android. */
.marquee, [class*="marquee"], .ticker, .scroll-x-infinite {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* 7. Floating WhatsApp / chat bubbles — move to right on narrow screens
 *    where the hamburger occupies the top-left and bottom-left bunching
 *    causes visual conflict with system gesture bars. */
@media (max-width: 480px) {
  .whatsapp-float, .wa-float, .floating-whatsapp,
  [class*="whatsapp"][class*="float"] {
    left: auto !important;
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* 8. iOS bottom safe-area for sticky CTAs (Add to bag, sticky checkout) */
.sticky-bottom, .mobile-cta-bar, .pd-sticky-cta,
.add-to-cart-sticky, .checkout-sticky {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* 9. Eliminate accidental horizontal scroll on body / main */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* 10. Tap delay / highlight cleanup for iOS */
a, button {
  -webkit-tap-highlight-color: rgba(33, 211, 244, .15);
  touch-action: manipulation;
}

/* 11. Prevent layout-shift "screen shake" from browser chrome appearing/disappearing.
 *     Mobile browsers toggle their address bar on scroll, changing the 100vh value.
 *     Hero sections that use height:100vh are the primary offenders — switching them
 *     to min-height with the dvh fallback means the section grows to fit but never
 *     forces an expensive relayout when chrome toggles.
 *     Covers the most common hero class patterns seen across all Storvly themes. */
@media (max-width: 1024px) {
  .hero, .hero-section, .hero-banner, .hero-wrap,
  [class*="-hero"]:not([class*="__"]), [class*="hero-"]:not([class*="__"]),
  .banner-hero, .store-hero, .full-hero, .split-hero,
  .ar-hero, .nv-hero, .dr-hero, .noir-hero,
  .aes-hero, .aura-hero, .hh-hero, .carbon-hero {
    /* dvh is supported in all modern mobile browsers (2023+).
       Fallback to -webkit-fill-available for older iOS. */
    min-height: -webkit-fill-available;
    min-height: 100svh;
    /* If dvh is supported, override to avoid any box sizing mismatch */
    @supports (min-height: 100dvh) {
      min-height: 100dvh;
    }
    /* Never use a hard height; let content grow */
    height: auto !important;
  }
}

/* 12. Clip absolutely-positioned children that poke outside narrow viewports.
 *     Some themes place decorative blobs / gradients with negative left/right that
 *     create invisible overflow and trigger horizontal scrollbar flicker (shake). */
@media (max-width: 768px) {
  main, .site-main, .page-content,
  section, .section, [class*="-section"] {
    overflow-x: clip;  /* clip (not hidden) to avoid breaking position:sticky */
  }
}

/* 13. Carbon-family bottom nav: add padding-bottom to main content so the fixed
 *     56 px nav bar does not obscure the last scroll position. */
@media (max-width: 768px) {
  /* carbon-apparel and carbon-draughtsman ship .carbon-main or rely on body padding */
  body:has(.carbon-bottom-nav) main,
  body:has(nav.fixed.bottom-0) main,
  body:has(nav.fixed.bottom-0) .page-content {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}