/* AquaLinked BMVP Emergency Mobile Reset
   Purpose: prevent desktop-width elements from breaking the mobile bookstore.
*/

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

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

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

@media (max-width: 768px) {
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #f3f7f6;
  }

  main,
  section,
  header,
  footer,
  .container,
  .wrap,
  .store-container,
  .store-wrap,
  .aq-wrap,
  .aql-wrap,
  .page-wrap,
  .content-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  .hero,
  .hero-card,
  .store-hero,
  .aq-hero,
  .aql-hero,
  .counter,
  .bookstore-counter,
  .aql-counter,
  .aql-impact-counter,
  .aql-bookstore-counter,
  .impact-counter,
  .notice,
  .panel,
  .box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .grid,
  .cards,
  .books-grid,
  .products-grid,
  .product-grid,
  .aq-grid,
  .store-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .card,
  .book-card,
  .product-card,
  .store-card,
  .aq-card,
  .aql-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  h1 {
    font-size: 28px !important;
    line-height: 1.12 !important;
    word-break: normal !important;
  }

  h2 {
    font-size: 22px !important;
    line-height: 1.18 !important;
  }

  p,
  li,
  a,
  button {
    max-width: 100% !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}