/* Define loader colors as variables */
:root {
    --loader-background-color: #EEEEEE;
    --loader-highlight-color: #DEDEDE;
}

.aico-skeleton-card {
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    margin-bottom:16px;
    border: 1px solid #d5d5d5;
}

.aico-skeleton{
    width: 310px ! !important;
}

.aico-skeleton-100{
  width: 100% !important;
}
.aico-skeleton-75{
  width: 80% !important;
}
.aico-skeleton-50{
  width: 60% !important;
}

.aico-skeleton-loader {
    display: block !important;
    height: 12px;
    background: linear-gradient(90deg, var(--loader-background-color) 25%, var(--loader-highlight-color) 50%, var(--loader-background-color) 75%);
    background-size: 200% 100%;
    animation: aico-loading 2s infinite ease-in-out;
    border-radius: 8px;
    margin-bottom: 16px;
}

.aico-skeleton.aico-skeleton-template2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    margin: 20px 0;
    flex-wrap: wrap;
    width: 100% !important;
}
.aico-skeleton.aico-skeleton-template2 .aico-skeleton-card {
    width: 100%;
    border-radius: 50px;
    margin-bottom: 0;
    display: block;
    width: calc(25% - 30px);
}
.aico-skeleton.aico-skeleton-template2 .aico-skeleton-card .aico-skeleton-loader {
    margin: 0 !important;
}


.aico-product-grid-container { display: flex; max-width: var(--page-width); flex-wrap: nowrap; margin: 0 auto; gap: 30px; padding: 30px 5rem; }
.aico-product-grid-container .aico-skeleton { order: 0; width: 20% }
.aico-product-grid-container .collection { order: 1; width: 80%; margin: 0; padding: 0 }
.aico-product-grid-container .collection ul { margin: 0 }

@keyframes aico-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}