.pg-f4b4cf37-wrapper { width: 100%; }
.pg-f4b4cf37-categories { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; }
.pg-f4b4cf37-cat { padding: 8px 16px; border: 1px solid #ccc; background: #fff; cursor: pointer; transition: 0.3s; }
.pg-f4b4cf37-cat.active { background: #333; color: #fff; border-color: #333; }
.pg-f4b4cf37-grid { display: grid; gap: 20px; }
.pg-f4b4cf37-card { border: 1px solid #eee; padding: 15px; border-radius: 8px; transition: transform 0.3s; }
.pg-f4b4cf37-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.pg-f4b4cf37-image-wrap { position: relative; overflow: hidden; border-radius: 4px; margin-bottom: 15px; }
.pg-f4b4cf37-badge { position: absolute; top: 10px; left: 10px; background: red; color: white; padding: 2px 8px; font-size: 12px; border-radius: 4px; z-index: 2; }
.pg-f4b4cf37-main-img { width: 100%; height: 250px; object-fit: cover; transition: opacity 0.3s ease; }
.pg-f4b4cf37-card:hover .pg-f4b4cf37-main-img { transform: scale(1.05); transition: transform 0.5s ease; }
.pg-f4b4cf37-content { text-align: center; }
.pg-f4b4cf37-title { font-size: 18px; margin: 0 0 5px; }
.pg-f4b4cf37-price { font-weight: bold; color: #666; margin-bottom: 15px; }
.pg-f4b4cf37-btn { width: 100%; padding: 8px; background: #333; color: #fff; border: none; cursor: pointer; border-radius: 4px; font-size: 14px; }
.pg-f4b4cf37-thumbs { display: flex; gap: 5px; margin-top: 15px; overflow-x: auto; padding-bottom: 5px; }
.pg-f4b4cf37-thumb { width: 50px; height: 50px; object-fit: cover; cursor: pointer; opacity: 0.6; transition: 0.3s; border-radius: 4px; }
.pg-f4b4cf37-thumb.active, .pg-f4b4cf37-thumb:hover { opacity: 1; border: 2px solid #333; }
.pg-f4b4cf37-quickview { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; background: white; padding: 10px; border-radius: 50%; cursor: pointer; transition: 0.3s; z-index: 2; }
.pg-f4b4cf37-card:hover .pg-f4b4cf37-quickview { opacity: 1; }