/* 2026-07-01 v2: homepage books block mobile fit. CSS only; no route/click/DOM changes. */
@media (max-width: 640px) {
  /* This is the homepage books selector grid: top = two book covers, bottom = detail card. */
  main div[class*="lg:grid-cols-[440px_1fr]"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 2rem !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  main div[class*="lg:grid-cols-[440px_1fr]"] > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    opacity: 1 !important;
  }

  main div[class*="lg:grid-cols-[440px_1fr]"] > div:first-child > div[class*="items-end"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  main div[class*="lg:grid-cols-[440px_1fr]"] > div:first-child > div[class*="items-end"] > button {
    flex: 1 1 0 !important;
    width: calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  main div[class*="lg:grid-cols-[440px_1fr]"] > div:first-child > div[class*="items-end"] > button > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4.1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  main div[class*="lg:grid-cols-[440px_1fr]"] > div:first-child > div[class*="items-end"] img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  main div[class*="lg:grid-cols-[440px_1fr]"] > div:first-child > div[class*="items-end"] > button p,
  main div[class*="lg:grid-cols-[440px_1fr]"] > div:first-child > div[class*="items-end"] > button div {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  main div[class*="lg:grid-cols-[440px_1fr]"] > div:nth-child(2) {
    margin-top: 1.5rem !important;
  }

  main div[class*="lg:grid-cols-[440px_1fr]"] > div:nth-child(2) > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}