/* General Skeleton Styles */
.skeleton {
    background-color: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.skeleton::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Loading Logo Animation */
.loading-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px; /* Adjust height based on image size */
    background-color: #e0e0e0;
    border-radius: 4px;
}

.pulsing-logo {
    animation: pulse 1.5s infinite;
    opacity: 0.7;
    object-fit: contain;
    object-position: center;
    position: absolute;
    top: 0;
    width: 60% !important;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}

/* Product Skeleton Styles */
.product.loading .product__content .skeleton-text {
    height: 20px; /* Adjust height based on text size */
    margin: 8px 0;
}

.product.loading .product__price.skeleton-text {
    width: 50px;
}

.product.loading .product__content .skeleton-price {
    height: 35px;
	width: 40%;
    margin: 8px 0;
}