/* skeleton loading animation */
@keyframes skeleton-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--productwidth_max, 240px), 1fr));
    gap: 16px;
    padding: 0;
    min-height: 400px;
}

.skeleton-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
}

.skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    margin-bottom: 10px;
}

.skeleton-line.title {
    width: 55%;
    height: 20px;
    margin-bottom: 16px;
}

.skeleton-line.desc1 { width: 90%; }
.skeleton-line.desc2 { width: 70%; }
.skeleton-line.desc3 { width: 80%; }

.skeleton-line.price {
    width: 40%;
    height: 22px;
    margin-top: auto;
    margin-bottom: 12px;
}

.skeleton-line.btn {
    width: 100%;
    height: 36px;
    border-radius: 4px;
    margin-top: 4px;
}

/* sidebar active transition */
.sky-cart-submenu-item {
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.sky-cart-menu-title {
    transition: color 0.25s ease;
}

/* wap active transition */
.sky-wap-sub-product {
    transition: background 0.25s ease, color 0.25s ease;
}

/* smooth fade transitions */
#cart-product-area {
    opacity: 1;
    transition: opacity 0.18s ease;
    will-change: opacity;
}

#cart-product-area.fade-out {
    opacity: 0;
    pointer-events: none;
}

#cart-product-area.fade-in {
    opacity: 0;
}