/* Catalogue first on every landing page (tools/catalogue/build.py, 8 Nov 2026).
   The rest of the range under the hand-picked cards, view badges, and a denser grid on phones
   so more of the catalogue fits on the first screens. */

.product-card-img { position: relative; }
.cat-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: inline-block; padding: 5px 10px; border-radius: 999px;
  font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
  box-shadow: 0 4px 12px rgba(26,58,74,0.15);
}
.cat-badge-pop { background: #C8A96E; color: #1A3A4A; }
.cat-badge-hot { background: #C2553A; color: #fff; }

.products-section .bestsellers-grid:has(+ .cat-more) { margin-bottom: 24px; }
.cat-more {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 1100px; margin: 0 auto 72px;
}
.cat-card .product-card-info { padding: 18px 20px 20px; }
.cat-card .product-card-link { margin-top: 8px; }

@media (max-width: 1024px) {
  .cat-more { grid-template-columns: repeat(3, 1fr); }
}
/* Phones: two cards a row everywhere in the catalogue, compact text */
@media (max-width: 640px) {
  .products-section .bestsellers-grid, .cat-more {
    grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 100%;
  }
  .products-section .bestsellers-grid { margin: 0 auto 40px; }
  .products-section .bestsellers-grid:has(+ .cat-more) { margin-bottom: 12px; }
  .cat-more { margin-bottom: 48px; }
  .products-section .product-card-info { padding: 12px 12px 14px; }
  .products-section .product-card-tag { font-size: 0.625rem; letter-spacing: 0.1em; padding: 3px 7px; margin-bottom: 6px; }
  .products-section .product-card-name { font-size: 1.1rem; }
  .products-section .product-card-sub { font-size: 0.8rem; margin-bottom: 8px; }
  .products-section .product-card-price { font-size: 1.2rem; }
  .products-section .product-card-link { font-size: 0.8125rem; margin-top: 6px; }
  .products-section .categories-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cat-badge { top: 8px; left: 8px; padding: 4px 8px; font-size: 0.625rem; }
}