:root {
    --item-width: 210px;
    --item-height: 390px;
    --item-padding: 20px;
    --item-skeleton: linear-gradient(
        #fff var(--item-height),
        transparent 0
    );

    --picture-height: 175px;
    --picture-width: 120px;
    --picture-position: center var(--item-padding);
    --picture-skeleton: linear-gradient(
        #eee var(--picture-height),
        transparent 0
    );

    --title-height: 15px;
    --title-width: 85%;
    --title-position: center calc(var(--picture-height) + var(--title-height) + 15px);
    --title-skeleton: linear-gradient(
        #eee var(--title-height),
        transparent 0
    );

    --author-height: 15px;
    --author-width: 70%;
    --author-position: center calc(var(--picture-height) + var(--title-height) + var(--author-height) + (15px * 2));
    --author-skeleton: linear-gradient(
        #eee var(--title-height),
        transparent 0
    );

    --rating-height: 15px;
    --rating-width: 50%;
    --rating-position: center calc(var(--picture-height) + var(--title-height) + var(--author-height) + var(--rating-height) + (15px * 3));
    --rating-skeleton: linear-gradient(
        #eee var(--title-height),
        transparent 0
    );

    --type-height: 15px;
    --type-width: 30%;
    --type-position: center calc(var(--picture-height) + var(--title-height) + var(--author-height) + var(--rating-height) + var(--type-height) + (15px * 4));
    --type-skeleton: linear-gradient(
        #eee var(--title-height),
        transparent 0
    );

    --price-height: 15px;
    --price-width: 40%;
    --price-position: center calc(var(--picture-height) + var(--title-height) + var(--author-height) + var(--rating-height) + var(--type-height) + var(--price-height) + (15px * 5));
    --price-skeleton: linear-gradient(
        #eee var(--title-height),
        transparent 0
    );

    --blur-width: 150px;
    --blur-size: var(--blur-width) var(--item-height);
}

.skeleton-product-card {
    width: var(--item-width);
    height: var(--item-height);
}

.skeleton-product-card:empty::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255, 0),
            rgba(255,255,255,0.6),
            rgba(255,255,255, 0)
        ),
        var(--picture-skeleton),
        var(--title-skeleton),
        var(--author-skeleton),
        var(--rating-skeleton),
        var(--type-skeleton),
        var(--price-skeleton),
        var(--item-skeleton);
    ;
    background-size:
        var(--blur-size),
        var(--picture-width) var(--picture-height),
        var(--title-width) var(--title-height),
        var(--author-width) var(--author-height),
        var(--rating-width) var(--rating-height),
        var(--type-width) var(--type-height),
        var(--price-width) var(--price-height),
        100% 100%
    ;
    background-position:
        -150% 0,
        var(--picture-position),
        var(--title-position),
        var(--author-position),
        var(--rating-position),
        var(--type-position),
        var(--price-position),
        0 0
    ;
    background-repeat: no-repeat;
    animation: loadingProd 1.5s infinite;
}

@keyframes loadingProd {
    to {
        background-position:
            350% 0,
            var(--picture-position),
            var(--title-position),
            var(--author-position),
            var(--rating-position),
            var(--type-position),
            var(--price-position),
            0 0
        ;
    }
}


[v-cloak] {
  display: none;
}





/* Attached files section */
.attached-files__title {
    display: flex;
    align-items: center;
    gap: 8px;
    /* font-size: 1rem; */
    font-weight: 600;
    margin-bottom: 12px;
}

.attached-files__title svg {
    width: 18px;
    height: 18px;
}

.attached-files__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attached-files__item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.attached-files__item a:hover {
    border-color: #c0c4cc;
    background-color: #f9fafb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.attached-files__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #f3f4f6;
    flex-shrink: 0;
}

.attached-files__icon svg {
    width: 20px;
    height: 20px;
    color: #6b7280;
}

.attached-files__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.attached-files__name {
    /* font-size: 0.9rem; */
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attached-files__ext {
    /* font-size: 0.75rem; */
    color: #9ca3af;
    margin-top: 2px;
}

.attached-files__download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f3f4f6;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.attached-files__item a:hover .attached-files__download {
    background-color: #e5e7eb;
}

.attached-files__download svg {
    width: 16px;
    height: 16px;
    color: #6b7280;
}