.vca-grid-wrapper { width: 100% !important; max-width: 1200px !important; margin: 20px auto !important; padding: 0 !important; display: block !important; overflow: visible !important; }
.vca-layout { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 25px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; }
.vca-item-link { text-decoration: none !important; display: flex !important; flex-direction: column !important; text-align: center !important; color: inherit !important; transition: transform 0.2s ease !important; outline: none !important; }
.vca-item-link:focus-visible { outline: 2px solid #007aff !important; outline-offset: 4px !important; border-radius: 12px !important; }
.vca-item-link:active { transform: scale(0.98) !important; }
.vca-item-link:visited { color: inherit !important; }
.vca-item-title { font-family: var(--dcui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif) !important; font-weight: 700 !important; margin: 0 0 12px 0 !important; font-size: 1.1rem !important; color: #333 !important; line-height: 1.3 !important; }
.vca-image-box { position: relative !important; overflow: hidden !important; border-radius: 12px !important; aspect-ratio: 1 / 1 !important; background: #f8f9fa !important; width: 100% !important; }
.vca-cat-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.4s ease !important; }
.vca-item-link:hover .vca-cat-img { transform: scale(1.08) !important; }
.vca-overlay-action { position: absolute !important; bottom: 12px !important; right: 12px !important; z-index: 2 !important; pointer-events: none !important; }
.vca-arrow-circle { background-color: #007aff !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; transition: transform 0.2s ease !important; }
.vca-item-link:hover .vca-arrow-circle { transform: scale(1.1) !important; }
.vca-arrow-icon-diag { width: 16px !important; height: 16px !important; stroke: #fff !important; stroke-width: 3 !important; fill: none !important; }
@media (max-width: 1024px) and (min-width: 768px) { .vca-layout { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } }
@media (max-width: 767px) { .vca-grid-wrapper { overflow: hidden !important; margin-left: -15px !important; margin-right: -15px !important; width: calc(100% + 30px) !important; max-width: none !important; } .vca-layout { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 15px !important; padding: 0 15px 30px 15px !important; scrollbar-width: none !important; } .vca-layout::-webkit-scrollbar { display: none !important; } .vca-item-link { flex: 0 0 80% !important; width: 80% !important; scroll-snap-align: center !important; } .vca-item-title { font-size: 1.1rem !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; margin-bottom: 10px !important; padding: 0 5px !important; } .vca-arrow-circle { width: 32px !important; height: 32px !important; } .vca-arrow-icon-diag { width: 14px !important; height: 14px !important; } }
@media (max-width: 480px) { .vca-item-link { flex: 0 0 85% !important; width: 85% !important; } }