/* MEGRA Colorlight — Mobile A (easy read in mobile browser)
   NOT app UI. Desktop layout kept; phone readability only.
   Scope: overflow, type size, header wrap, images, tabs, grids.
*/
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, svg {
  max-width: 100% !important;
  height: auto !important;
}

/* Avoid tiny text / cramped chrome on phones */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Header — readable, wrap, no sideways crush */
  .megra-site-header__bar {
    font-size: 11px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
  }

  .megra-site-header__main {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  .megra-site-header__logo {
    font-size: 32px !important;
  }

  .megra-site-header__tag {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }

  .megra-site-header__actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .megra-site-header__nav {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .megra-site-header__nav a {
    padding: 10px 14px !important;
    font-size: 15px !important;
    min-height: 44px !important;
  }

  .megra-site-header__cta {
    padding: 12px 16px !important;
    font-size: 15px !important;
    min-height: 44px !important;
  }

  /* Main content breathing room */
  #brx-content,
  main#brx-content,
  .brxe-section,
  .body-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .brxe-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Titles readable */
  h1.brxe-heading,
  h1.body-section-title,
  h1.category-block-title,
  .product-page-tab .tab-menu h1.brxe-heading,
  .brxe-heading.body-section-title {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  h2, h3.brxe-heading,
  .product-block-title,
  .category-block-title {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem) !important;
    line-height: 1.3 !important;
  }

  p, .brxe-text-basic, .brxe-text, li {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  /* Breadcrumb — allow wrap */
  .page-breadcrumbs,
  nav.brxe-breadcrumbs {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  /* Product hero / gallery images fill width cleanly */
  .product-page img,
  .woocommerce-product-gallery img,
  .brxe-image img,
  img.brxe-image,
  .tab-pane img,
  .product-page-tab-spec img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Tabs — easier tap */
  .tab-title,
  .tab-headers,
  .brxe-tabs-nested .tab-title {
    font-size: 15px !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .tab-menu,
  .brxe-block.tab-menu {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Product / category grids → 1 column */
  .brx-grid,
  .product-grid,
  .jsfb-filterable,
  [class*="brx-grid"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  a.product-grid,
  .brxe-div.product-grid,
  .brxe-block.product-grid,
  a.brxe-div.product-grid,
  .category-block,
  .product-block {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-bottom: 14px !important;
  }

  .product-block-image,
  .category-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Spec tables — scroll instead of page stretch */
  table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Mega menu leftovers if any still visible */
  .brx-has-megamenu .brx-dropdown-content,
  #mm-custom-product-container {
    min-width: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Footer */
  .megra-footer-min,
  #brx-footer {
    font-size: 14px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #brx-footer .brx-grid,
  #brx-footer .brxe-container.brx-grid {
    display: block !important;
  }

  /* Hide noisy filter chrome that wastes phone space if empty */
  #brxe-tcrmqy,
  .jet-smart-filters-search,
  .jet-smart-filters-sorting,
  .jet-smart-filters-pagination {
    /* keep search if useful — only shrink padding */
    max-width: 100% !important;
  }

  input, select, button, textarea {
    font-size: 16px !important; /* reduces iOS zoom-on-focus */
    max-width: 100% !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .megra-site-header__logo {
    font-size: 28px !important;
  }
  .megra-site-header__nav a {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
}

/* Henry 2026-09-09: remove top legal bar (not required for SEO) */
.megra-site-header__bar { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border: 0 !important; }