/* ==========================================================================
   [V12-COMPONENT] 3. Quick Icons (qi-)
   ========================================================================== */
#od-quick-icons { padding: 80px 0 60px; background: #fff; }
.qi-list { display: grid; grid-template-columns: repeat(8, 1fr); gap: 15px; text-align: center; }
.qi-item { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; transition: 0.3s; }
.qi-item:hover { transform: translateY(-5px); }
.qi-icon { width: 85px; height: 85px; border-radius: 50%; background: #f8f9fa; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: 0.3s; }
.qi-icon img { width: 50px; height: 50px; object-fit: contain; }
.qi-label { font-size: 13px; font-weight: 700; color: var(--ml-fg); }

@media (max-width: 1024px) {
  .qi-list { display: flex; overflow-x: auto; white-space: nowrap; gap: 20px; margin: 0 -20px; padding: 0 20px 10px; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .qi-list::-webkit-scrollbar { display: none; }
  .qi-item { flex: 0 0 auto; width: 75px; scroll-snap-align: start; }
  .qi-icon { width: 65px; height: 65px; }
  .qi-icon img { width: 35px; height: 35px; }
}