@keyframes sk-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.sk-box {
    border-radius: var(--border-radius-small);
    background: linear-gradient(
            90deg,
            var(--color-light-background)  0%,
            var(--color-light-outline)    40%,
            var(--color-light-background) 80%
    );
    background-size: 800px 100%;
    animation: sk-shimmer 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.sk-wrapper {
    display: contents;
    opacity: 1;
    transition: opacity 0.22s ease;
}

.sk-wrapper--out {
    opacity: 0;
}

.sk-wrapper--shop {
    display: flex;
    gap: var(--default-gap);
    overflow: hidden;
}

.sk-shop {
    width: var(--catalogue-item-width, 284px);
    height: var(--catalogue-item-height, 148px);
    border-radius: var(--border-radius-medium);
    background-color: var(--color-light-background);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: 10px;
}

.sk-shop-img {
    width: 110px;
    height: 100%;
    border-radius: 0;
    flex-shrink: 0;
}

.sk-shop-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 12px 12px 12px 0;
}

.sk-shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.sk-shop-title   { height: 16px; flex: 1; }
.sk-shop-rating  { height: 14px; width: 36px; }
.sk-shop-delivery { height: 12px; width: 70px; }
.sk-shop-desc    { height: 11px; width: 85%; }
.sk-shop-desc--short { width: 55%; }

.sk-wrapper--shop .sk-shop.sk-shop--grid {
    width: 100%;
    height: auto;
    flex-direction: column;
}

.sk-shop--grid .sk-shop-img {
    width: 100%;
    height: 150px;
}

.sk-shop--grid .sk-shop-body {
    padding: 12px;
}

.sk-wrapper--dish {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    width: 100%;
}

@media (min-device-width: 769px) {
    .sk-wrapper--dish {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }
}

@media (min-device-width: 1200px) {
    .sk-wrapper--dish {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
}

.sk-dish {
    border-radius: var(--border-radius-medium);
    background-color: var(--color-light-background);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sk-dish-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    flex-shrink: 0;
}

.sk-dish-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.sk-dish-price  { height: 16px; width: 55px; }
.sk-dish-title  { height: 14px; width: 80%; }
.sk-dish-title--short { width: 55%; }
.sk-dish-weight { height: 11px; width: 40px; }

.sk-dish-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 6px;
}

.sk-dish-btn { height: 32px; width: 32px; border-radius: var(--border-radius-force-round); }

.sk-wrapper--address {
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
    width: 100%;
}

.sk-address {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--border-radius-medium);
    background-color: var(--color-light-background);
}

.sk-address-icon   { width: 40px; height: 40px; border-radius: var(--border-radius-small); flex-shrink: 0; }
.sk-address-body   { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.sk-address-label  { height: 14px; width: 60%; }
.sk-address-text   { height: 11px; width: 85%; }
.sk-address-action { width: 28px; height: 28px; border-radius: var(--border-radius-force-round); flex-shrink: 0; }

.sk-wrapper--payment {
    display: flex;
    flex-wrap: wrap;
    gap: var(--default-gap);
    width: 100%;
}

.sk-payment {
    width: 280px;
    min-width: 200px;
    border-radius: var(--border-radius-large);
    background-color: var(--color-light-background);
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sk-payment-top    { display: flex; justify-content: space-between; align-items: center; }
.sk-payment-network { height: 20px; width: 52px; border-radius: 4px; }
.sk-payment-badge  { height: 18px; width: 54px; border-radius: var(--border-radius-force-round); }
.sk-payment-number { height: 18px; width: 75%; }
.sk-payment-bottom { display: flex; justify-content: space-between; }
.sk-payment-holder { height: 13px; width: 45%; }
.sk-payment-exp    { height: 13px; width: 30px; }

.sk-wrapper--promo {
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
    width: 100%;
}

.sk-promo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--border-radius-medium);
    background-color: var(--color-light-background);
}

.sk-promo-icon     { width: 44px; height: 44px; border-radius: var(--border-radius-small); flex-shrink: 0; }
.sk-promo-info     { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.sk-promo-code     { height: 15px; width: 70%; }
.sk-promo-meta     { height: 11px; width: 45%; }
.sk-promo-discount { width: 48px; height: 38px; border-radius: var(--border-radius-small); flex-shrink: 0; }

.sk-wrapper--order {
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
    width: 100%;
}

.sk-order {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--border-radius-medium);
    background-color: var(--color-light-background);
}

.sk-order-dishes { display: flex; gap: 6px; flex-shrink: 0; }
.sk-order-dish-img { width: 48px; height: 48px; border-radius: var(--border-radius-small); }

.sk-order-body   { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-order-top    { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sk-order-shop   { height: 14px; width: 45%; }
.sk-order-status { height: 18px; width: 60px; border-radius: var(--border-radius-force-round); }
.sk-order-meta   { height: 11px; width: 75%; }

.sk-wrapper--notification {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.sk-notif {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
}

.sk-notif-dot  { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.sk-notif-body { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.sk-notif-title { height: 14px; width: 65%; }
.sk-notif-sub   { height: 11px; width: 85%; }
.sk-notif-time  { height: 10px; width: 35%; }

.sk-wrapper--text {
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
    width: 100%;
}

.sk-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.sk-text-line       { height: 13px; width: 100%; }
.sk-text-line--mid  { width: 72%; }
.sk-text-line--short { width: 44%; }

.sk-wrapper > *:nth-child(1) { animation-delay: 0s;     }
.sk-wrapper > *:nth-child(2) { animation-delay: 0.06s;  }
.sk-wrapper > *:nth-child(3) { animation-delay: 0.12s;  }
.sk-wrapper > *:nth-child(4) { animation-delay: 0.18s;  }
.sk-wrapper > *:nth-child(5) { animation-delay: 0.24s;  }
.sk-wrapper > *:nth-child(6) { animation-delay: 0.30s;  }

@keyframes sk-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.sk-wrapper > * {
    animation: sk-in 0.2s ease both;
}

.sk-wrapper > *:nth-child(1) { animation-delay: 0s;    }
.sk-wrapper > *:nth-child(2) { animation-delay: 0.04s; }
.sk-wrapper > *:nth-child(3) { animation-delay: 0.08s; }
.sk-wrapper > *:nth-child(4) { animation-delay: 0.12s; }
.sk-wrapper > *:nth-child(5) { animation-delay: 0.16s; }
.sk-wrapper > *:nth-child(6) { animation-delay: 0.20s; }