.videos-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px}
.video-card{display: flex; flex-direction: column; text-decoration: none; color: var(--text-main); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); border: 1px solid var(--border-color); transition: transform 0.2s, box-shadow 0.2s}
.video-card:hover{transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08)}
.video-preview{position: relative; height: clamp(200px, 30vw, 400px); width: 100%; overflow: hidden; background: #f5f5f5; cursor: pointer}
.video-preview img{width: 100%; height: clamp(200px, 30vw, 400px); object-fit: cover; transition: transform 0.3s; object-position: center center}
.video-card:hover .video-preview img{transform: scale(1.05)}
.video-play-icon{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(0,0,0,0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; transition: all 0.2s ease; pointer-events: none}
.video-card:hover .video-play-icon{width: 56px; height: 56px; font-size: 28px}
.video-duration{position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); padding: 4px 8px; border-radius: 4px; font-size: 11px; color: white; font-weight: 500}
.video-info{padding: 16px}
.video-title{font-size: 15px; font-weight: 600; margin: 0 0 6px 0; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
.video-store{font-size: 13px; color: var(--text-muted); margin: 0; display: flex; align-items: center; gap: 4px}
.verified-icon{color: #4CAF50; font-size: 14px}
.video-card.video-hidden{display: none}
.no-results{grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: #fdfdfd; border-radius: 16px; border: 1px dashed #dcdcdc}
.no-results p{font-size: 18px; color: var(--primary-color); font-weight: 600; margin-bottom: 8px}
.video-count{font-size: 14px; color: var(--text-muted); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color)}
#reset-filters{font-size:16px}
@media (max-width: 992px) {    
	.video-preview img, .video-preview{height: clamp(260px, 45vw, 440px);}
}

@media (max-width: 576px) {
	.videos-grid {grid-template-columns: repeat(2, 1fr);gap: 10px;}
	.video-preview img, .video-preview{height: 65vw;}
    .video-info {padding: 12px}
    .video-title{font-size: 14px}
}