/* Latest releases (client feedback round 1, 12 October 2026, H5 option A): one quiet row of four
   books, then « Tous les livres ». Covers use the book mock-up (theme.css) at a fixed height, the width
   following the cover (as in « À la une »). Title, author and price under each other, the two buttons
   side by side. WordPress markup: a WooCommerce Product Collection whose wrapper and list are flattened
   (display: contents) so each product <li> is a grid item. */
.books-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 40px); align-items: stretch; }
.books-grid .books-query, .books-grid .wc-block-product-template { display: contents; }
/* WooCommerce sizes product-template items as flex columns; here they are grid items. */
.books-grid .wc-block-product-template.is-flex-container.is-flex-container > li { width: auto; }
.books-grid li { display: flex; flex-direction: column; min-width: 0; margin: 0; list-style: none; text-align: left; }
.books-grid li > * { margin-top: 0; }
.books-grid .book-cover { align-self: flex-start; width: auto; height: 260px; margin: 0 0 28px; padding-right: 10px; }
.books-grid h3 { margin: 0 0 4px; font-size: 1.3rem; line-height: 1.2; text-align: left; text-wrap: balance; }
.books-grid h3 a { color: inherit; text-decoration: none; }
.books-grid .book-meta { display: grid; gap: 2px; margin: 0; color: var(--color-text); font-weight: 500; }
.books-grid .book-meta > *, .books-grid .book-meta .wc-block-components-product-price { display: block; margin: 0; font-size: inherit; font-weight: inherit; text-align: left; }
.books-grid .book-meta .book-price { color: var(--color-text-muted); font-weight: 400; }
.books-grid .book-meta a { color: inherit; text-decoration: none; }
/* « En savoir plus » under « Acheter » (client feedback round 1), lined up across the row. */
.books-grid .book-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; padding-top: 16px; }
.books-grid .book-actions > * { margin: 0; }
.books-grid .book-actions .wp-element-button { min-height: 44px; padding: .5rem 1.15rem; }
.books-grid .books-more { grid-column: 1 / -1; display: flex; justify-content: end; margin: 0; }
.books-grid .books-more .text-link { white-space: nowrap; }

@media (max-width: 980px) {
  .books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .books-grid { gap: 32px 16px; }
  .books-grid .book-cover { height: 170px; margin-bottom: 18px; }
  .books-grid h3 { font-size: 1.08rem; }
  .books-grid .book-actions .wp-element-button { padding: .45rem 1rem; }
}