/*
  AQL Mobile Book Cover Contain Fix
  Purpose: on phones, book covers must shrink to fit the screen.
  Rule: never crop/cut covers.
*/
@media screen and (max-width: 768px) {

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

  body * {
    box-sizing: border-box !important;
  }

  main,
  .container,
  .page-shell,
  .content,
  .product-detail,
  .book-detail,
  .product-main,
  .book-main {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  /*
    Force cover/gallery sections to one column on mobile.
    This prevents two book covers from sharing one narrow row.
  */
  .gallery,
  .gallery-grid,
  .cover-gallery,
  .book-gallery,
  .product-gallery,
  .image-gallery,
  .product-images,
  .book-images,
  .covers,
  .cover-grid,
  .images-grid,
  .media-grid,
  .detail-grid,
  .product-grid,
  .book-grid,
  [class*="gallery"],
  [class*="Gallery"],
  [class*="cover-grid"],
  [class*="image-grid"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
  }

  /*
    Cards must be full width, but must NOT crop their images.
  */
  article,
  figure,
  .card,
  .product-card,
  .book-card,
  .cover-card,
  .gallery-card,
  .image-card,
  .media-card,
  .product-image-card,
  .book-image-card,
  [class*="card"],
  [class*="Card"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
    overflow: visible !important;
  }

  /*
    The most important part:
    image must fit by shrinking, not by cropping.
  */
  img,
  picture img,
  figure img,
  article img,
  main img,
  .card img,
  .product-card img,
  .book-card img,
  .cover-card img,
  .gallery-card img,
  .image-card img,
  .media-card img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clip-path: none !important;
  }

  /*
    If some previous style gave fixed image height, cancel it.
  */
  img[style] {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}