/* Shared mobile layout patch. Desktop styles remain owned by each site. */
@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
  }

  .site-header,
  .topbar-inner,
  .shell-header,
  .header-inner {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand,
  .logo,
  .brand-text,
  .brand-lines,
  main,
  section,
  article,
  form {
    min-width: 0;
  }

  .brand,
  .logo,
  .brand-text,
  .brand-lines,
  h1,
  h2,
  h3,
  p,
  a,
  span,
  strong {
    overflow-wrap: anywhere;
  }

  h1 {
    font-size: 2.1rem;
    line-height: 1.08;
  }

  h2 {
    font-size: 1.6rem;
    line-height: 1.15;
  }

  .hero,
  .hero-inner,
  .hero-card,
  .hero-board,
  .hero-panel,
  .hero-copy,
  .hero-visual,
  .hero-image,
  .hero-search,
  .hero-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero,
  .hero-inner,
  .hero-card,
  .hero-board,
  .hero-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-card,
  .hero-board,
  .hero-panel {
    min-height: 0;
    padding-left: 18px;
    padding-right: 18px;
  }

  .category-grid,
  .product-grid,
  .agent-grid,
  .guide-grid,
  .how-grid,
  .why-grid,
  .benefit-grid,
  .workflow-grid,
  .stats-grid,
  .steps-grid,
  .pill-grid,
  .card-grid,
  .tile-grid,
  .info-grid,
  .quick-panels,
  .split-section {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .category-grid,
  .product-grid,
  .agent-grid,
  .guide-grid,
  .how-grid,
  .why-grid,
  .benefit-grid,
  .workflow-grid,
  .card-grid,
  .tile-grid,
  .info-grid,
  .split-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .product-card,
  .category-card,
  .category-tile,
  .guide-card,
  .workflow-card,
  .hero-card,
  .card,
  .tile {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .product-card img,
  .product-image img,
  .thumb,
  .visual {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }

  .product-search,
  .search-form,
  .search-bar,
  .hero-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
    min-width: 0;
  }

  .product-search input,
  .product-search button,
  .search-form input,
  .search-form button,
  .search-bar input,
  .search-bar button,
  .hero-search input,
  .hero-search button {
    width: 100%;
    min-height: 44px;
  }

  .nav,
  .main-nav,
  .primary-nav {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .menu-toggle,
  .auto-menu-toggle {
    width: 48px;
    min-width: 48px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .mobile-existing-nav .menu-toggle {
    display: inline-flex !important;
  }

  .mobile-existing-nav .nav,
  .mobile-existing-nav .main-nav,
  .mobile-existing-nav .primary-nav {
    display: none !important;
  }

  .mobile-existing-nav .nav.open,
  .mobile-existing-nav .nav.active,
  .mobile-existing-nav .nav.is-open,
  .mobile-existing-nav .main-nav.open,
  .mobile-existing-nav .main-nav.active,
  .mobile-existing-nav .main-nav.is-open,
  .mobile-existing-nav .primary-nav.open,
  .mobile-existing-nav .primary-nav.active,
  .mobile-existing-nav .primary-nav.is-open {
    display: flex !important;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-auto-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 10px;
  }

  .auto-menu-toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    background: #fff;
    color: #171717;
    font: inherit;
    font-size: 1.45rem;
    cursor: pointer;
  }

  .mobile-auto-nav > nav {
    display: none !important;
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mobile-auto-nav > nav.is-mobile-open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
  }

  .mobile-auto-nav > nav.is-mobile-open a {
    width: 100%;
    min-height: 44px;
    padding: 12px;
  }

  .section,
  .section-inner,
  .directory,
  .content-section,
  .page-section,
  .category-section,
  .product-section,
  .popular-products,
  .features,
  .faq-section,
  .cta-band {
    width: calc(100% - 24px);
    max-width: none;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .site-footer,
  .footer {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  table {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .auto-menu-toggle {
    display: none !important;
  }
}