/* Mobile layout fix — blog/products 2-col, brand name visible, drawer above overlay.
   Load AFTER watchguys-theme.css / mobile-fix.css. */
@media (max-width: 1100px) {
  /* Blog + home blog: always 2 columns on phone/tablet */
  .blog-grid,
  .home-blog-grid,
  .wg-selling-grid.home-blog-grid,
  #brandPostGrid.blog-grid,
  #blog-search-results.blog-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 12px !important;
  }

  /* Products: 2 columns (never 1, never 5/6 on small screens) */
  .product-grid,
  .product-catalog,
  .product-grid.product-catalog,
  .product-recommend-grid,
  .product-grid.home-shop-grid,
  .product-grid.arrivals-grid,
  .product-grid.home-top-clicks {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
  }

  /* Site name: stop letter-spacing / max-width clipping (USASHOI look) */
  .brand,
  .brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-self: center !important;
    max-width: min(54vw, 240px) !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .brand-mark {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }
  .brand-name {
    display: inline !important;
    font-size: clamp(0.7rem, 2.5vw, 0.88rem) !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }

  body.nav-open .brand,
  body.nav-open .brand-logo,
  body.nav-open .brand-name,
  body.mdrawer-open .brand,
  body.mdrawer-open .brand-logo,
  body.mdrawer-open .brand-name {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Keep header chrome above page; drawer script raises further when open */
  .site-header,
  .site-chrome {
    position: relative !important;
    z-index: 40 !important;
  }
}

@media (max-width: 520px) {
  .blog-grid,
  .home-blog-grid,
  .product-grid,
  .product-catalog,
  .product-recommend-grid,
  .product-grid.home-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}