.wc-product-gallery-container { margin: 30px 0; padding: 0; background: transparent; } .wc-product-gallery-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #e0e0e0; } .wc-product-gallery-header h3 { margin: 0; font-size: 28px; font-weight: 700; color: #222; } .wc-gallery-count { font-size: 14px; color: #666; padding: 6px 16px; background: #f8f8f8; border-radius: 20px; font-weight: 500; } .wc-product-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } @media (min-width: 768px) { .wc-product-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; } } @media (max-width: 767px) { .wc-product-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } } @media (max-width: 480px) { .wc-product-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } .wc-gallery-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #f9f9f9; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #e8e8e8; } .wc-gallery-item:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); border-color: #d0d0d0; } .wc-gallery-image-thumb, .wc-gallery-video-thumb { width: 100%; height: 100%; position: relative; overflow: hidden; background: #fff; } .wc-gallery-image-thumb img, .wc-gallery-video-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .wc-gallery-item:hover .wc-gallery-image-thumb img, .wc-gallery-item:hover .wc-gallery-video-thumb video { transform: scale(1.05); } .wc-gallery-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(0, 0, 0, 0.75); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; transition: all 0.3s ease; pointer-events: none; } .wc-gallery-item:hover .wc-gallery-play-icon { background: rgba(0, 0, 0, 0.9); transform: translate(-50%, -50%) scale(1.1); } .wc-gallery-video-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 10px; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .wc-product-gallery-container > p { text-align: center; color: #999; padding: 60px 20px; font-size: 16px; background: #f9f9f9; border-radius: 8px; border: 2px dashed #ddd; }