/* Eon catalog (/shop) PREVIEW 2026-10-18: catalog-only rules on top of home-x.css (the homepage cards). */
.x3.shop-main { --x-gutter: 0px; }
.x3 #shop-grid.products.x-cards { gap: clamp(.75rem, 1.6vw, 1.5rem); }
.x3 .x-card .product-card__name .product-card__size { font: 500 .86em/1 var(--font-mono); color: var(--x-slate); white-space: nowrap; }
.x3 .x-card--pack .product-card__tag { color: var(--x-ink-2); }
.x3 .x-perks--shop { margin: 0 0 clamp(1rem, 2vw, 1.75rem); }
.x3 .x-perks--shop .x-perks__in { padding-block: .9rem; }
/* phones: compact 2x2 (icon beside the title, no second line) so the first products stay near the top of the screen */
@media (max-width: 640px) {
  .x3 .x-perks--shop .x-perks__in { padding-block: .7rem .8rem; gap: .5rem; }
  .x3 .x-perks--shop .x-perks__list { gap: 8px; }
  .x3 .x-perks--shop .x-perk { flex-direction: row; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: 14px; }
  .x3 .x-perks--shop .x-perk__ic, .x3 .x-perks--shop .x-perk__ic--coin { width: 30px; height: 30px; border-radius: 9px; }
  .x3 .x-perks--shop .x-perk__ic svg { width: 16px; height: 16px; }
  .x3 .x-perks--shop .x-perk__ic--coin .eon-coin { width: 26px; height: 26px; box-shadow: 0 0 0 2px #3A5D7A; }
  .x3 .x-perks--shop .x-perk__ic--coin .eon-coin svg { width: 12px; height: 14px; }
  .x3 .x-perks--shop .x-perk b { font-size: .78rem; }
  .x3 .x-perks--shop .x-perk small { display: none; }
}