/* Vocabulary · Infinite — word-pack carousel */
.packs-section { padding: 78px 0 86px; }
.packs-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.packs-heading-row h2 { margin: 7px 0 12px; }
.packs-intro { max-width: 640px; margin: 0; line-height: 1.65; }
.packs-controls { display: flex; gap: 10px; flex-shrink: 0; }
.packs-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #a5c8c4; background: #fff; color: #214b49; font: inherit; font-size: 23px; cursor: pointer; transition: background .15s ease; }
.packs-arrow:hover:not(:disabled) { background: #d8f2ee; }
.packs-arrow:focus-visible, .packs-carousel:focus-visible { outline: 3px solid #327b78; outline-offset: 3px; }
.packs-arrow:disabled { opacity: .35; cursor: default; }
.packs-carousel { display: flex; gap: 18px; padding: 8px 2px 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #aaccc7 transparent; }
.packs-card { flex: 0 0 clamp(190px, 24%, 258px); scroll-snap-align: start; min-width: 0; min-height: 280px; padding: 22px 16px 20px; border-radius: 22px; border: 1px solid #c6e3de; background: #edf8f5; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; box-sizing: border-box; }
.packs-card:nth-child(4n + 2) { background: #f9f2e8; border-color: #e8ddd0; }
.packs-card:nth-child(4n + 3) { background: #f0ecfa; border-color: #ddd5ed; }
.packs-card:nth-child(4n + 4) { background: #fcefee; border-color: #ecd9d5; }
.packs-card img { display: block; width: min(100%, 178px); aspect-ratio: 1; object-fit: contain; }
.packs-card h3 { font-size: 1rem; line-height: 1.35; margin: auto 0 0; color: #244744; }
.packs-loading, .packs-error { padding: 40px 0; color: #456b67; }
.packs-footnote { margin: 13px 0 0; font-size: .9rem; color: #527774; }
@media (max-width: 700px) {
  .packs-section { padding: 56px 0 65px; }
  .packs-heading-row { align-items: start; }
  .packs-controls { display: none; }
  .packs-card { flex-basis: min(76vw, 270px); min-height: 260px; }
  .packs-carousel { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .packs-carousel { scroll-behavior: auto; } }