/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/



/* Contenedor - adapta paddings/margins a tu diseño real */
 .top-cart-item.skeleton {
     display: flex;
     gap: 12px;
     align-items: flex-start;
     padding: 10px;
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
 }

/* Imagen cuadrada */
.skeleton-img {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e6e6e6 25%, #f4f4f4 50%, #e6e6e6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
    flex: 0 0 72px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);
}

/* Badge (la X) como círculo pequeño en la esquina */
.skeleton-badge {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-35%, -35%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(90deg, #e6e6e6 25%, #f4f4f4 50%, #e6e6e6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
    box-shadow: 0 0 0 2px white inset;
    border: 1px solid rgba(0,0,0,0.03);
}

/* Texto - líneas */
.skeleton-line {
    height: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #e6e6e6 25%, #f4f4f4 50%, #e6e6e6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
}

/* Largo de la "title" y "price" */
.title-line {
    width: 220px;
    height: 14px;
    margin-bottom: 10px;
}
.price-line {
    width: 90px;
    height: 12px;
}

/* Chip de cantidad */
.skeleton-chip {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: linear-gradient(90deg, #e6e6e6 25%, #f4f4f4 50%, #e6e6e6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
}

/* Organización interna */
.top-cart-item-desc {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.top-cart-item-desc-title {
    flex: 1;
}

/* Animación shimmer */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pequeñas adaptaciones responsivas */
@media (max-width: 420px) {
    .skeleton-img { width: 56px; height: 56px; flex: 0 0 56px; }
    .title-line { width: 140px; }
    .price-line { width: 70px; }
}