:root {

    --dlx-text: #111;

    --dlx-muted: #6f7680;

    --dlx-blue: #1a5cff;

    --dlx-star: #f5a623;


    --dlx-r28: 28px;

    --dlx-r22: 22px;

    --dlx-r16: 16px;

    --dlx-r999: 999px;


    /* никаких выделений, только мягкая тень */

    --dlx-shadow: 0 10px 24px rgba(0, 0, 0, .05);

    --dlx-shadow-h: 0 16px 38px rgba(0, 0, 0, .08);


    /* нейтральные поверхности внутри (теги/отзывы) */

    --dlx-soft: #f5f6f8;

    --dlx-soft2: #fafbfc;

    --dlx-line: rgba(0, 0, 0, .06);

}


.dlx-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

}


.dlx-card {

    display: grid;

    grid-template-columns: 148px 1fr 210px;

    gap: 18px;

    padding: 16px;


    border-radius: var(--dlx-r28);


    /* важно: карточка без фона и без рамок */

    background: transparent;

    border: 0;


    /* только тень */

    box-shadow: var(--dlx-shadow);

    transition: transform .15s ease, box-shadow .15s ease;

}


.dlx-card:hover {

    transform: translateY(-1px);

    box-shadow: var(--dlx-shadow-h);

}


/* media */

.dlx-media {

    width: 148px;

    height: 148px;

    border-radius: var(--dlx-r22);

    overflow: hidden;

    background: linear-gradient(180deg, #f7f8fa, #eef1f5);

    border: 1px solid var(--dlx-line);

    position: relative;

    display: block;

}


.dlx-media::after {

    content: attr(data-fallback);

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

    font-size: 20px;

    letter-spacing: .4px;

    color: #9aa0a6;

}


.dlx-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    position: relative;

    z-index: 1;

}


/* content */

.dlx-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding-top: 2px;

}


.dlx-title {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;


    margin: 0;

    color: var(--dlx-text);

    text-decoration: none;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.1px;

}


.dlx-title:hover {

    text-decoration: underline;

    text-underline-offset: 3px;

}


.dlx-desc {

    margin: 0;

    color: #2f2f2f;

    font-size: 14px;

    line-height: 1.55;


    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    overflow: hidden;

    max-height: calc(1.55em * 3);

    word-break: break-word;

    max-width: 760px;

}


/* tags */

.dlx-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.dlx-tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 10px;

    border-radius: var(--dlx-r999);

    background: var(--dlx-soft);

    border: 1px solid var(--dlx-line);

    color: var(--dlx-text);

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

}


/* reviews (2 as requested) */

.dlx-reviews {

    margin-top: 2px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}


.dlx-mini {

    border: 1px solid var(--dlx-line);

    background: var(--dlx-soft2);

    border-radius: var(--dlx-r16);

    padding: 10px;

    display: flex;

    gap: 10px;

    min-width: 0;

}


.dlx-mini__avatar {

    width: 30px;

    height: 30px;

    border-radius: 999px;

    background: #111;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

    font-size: 12px;

    flex: 0 0 auto;

}


.dlx-mini__body {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.dlx-mini__top {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

}


.dlx-mini__name {

    font-size: 12.5px;

    font-weight: 800;

    color: var(--dlx-text);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 140px;

}


.dlx-mini__stars {

    font-size: 12px;

    font-weight: 900;

    color: var(--dlx-star);

    letter-spacing: .6px;

    line-height: 1;

    flex: 0 0 auto;

}


.dlx-mini__text {

    margin: 0;

    color: #2f2f2f;

    font-size: 13px;

    line-height: 1.45;


    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

    max-height: calc(1.45em * 2);

    word-break: break-word;

}


/* empty reviews prompt */

.dlx-empty {

    margin-top: 2px;

    border: 1px dashed var(--dlx-line);

    background: var(--dlx-soft2);

    border-radius: var(--dlx-r16);

    padding: 10px 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}


.dlx-empty__text {

    min-width: 0;

    margin: 0;

    font-size: 13px;

    color: var(--dlx-muted);

    line-height: 1.35;

}


.dlx-empty__link {

    flex: 0 0 auto;

    font-size: 13px;

    font-weight: 800;

    color: var(--dlx-blue);

    text-decoration: none;

    white-space: nowrap;

}


.dlx-empty__link:hover {

    text-decoration: underline;

    text-underline-offset: 3px;

}


/* bottom row */

.dlx-bottom {

    margin-top: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;

    padding-top: 2px;

}


.dlx-cat {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: var(--dlx-muted);

    white-space: nowrap;

}

.dlx-cat b {

    color: var(--dlx-text);

    font-weight: 800;

}

.dlx-cat a {

    color: var(--dlx-blue);

    text-decoration: none;

    font-weight: 700;

}

.dlx-cat a:hover {

    text-decoration: underline;

    text-underline-offset: 3px;

}


.dlx-rate {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

    line-height: 1;

}

.dlx-rate__stars {

    color: var(--dlx-star);

    font-weight: 900;

    letter-spacing: .7px;

    font-size: 14px;

    line-height: 1;

}

.dlx-rate__reviews {

    color: var(--dlx-muted);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

}

.dlx-rate__reviews:hover {

    color: var(--dlx-text);

    text-decoration: underline;

    text-underline-offset: 3px;

}


/* actions */

.dlx-actions {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-end;

    gap: 10px;

    padding-top: 2px;

}


.dlx-action {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 16px;

    min-width: 190px;

    border-radius: var(--dlx-r16);


    background: #111;

    color: #fff;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;


    box-shadow: 0 12px 26px rgba(0, 0, 0, .16);

    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;

    text-align: center;

    border: 0;

}


.dlx-action:hover {

    background: #000;

    transform: translateY(-1px);

    box-shadow: 0 16px 32px rgba(0, 0, 0, .20);

}


.dlx-link {

    color: var(--dlx-muted);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

}

.dlx-link:hover {

    color: var(--dlx-text);

    text-decoration: underline;

    text-underline-offset: 3px;

}


/* responsive */

@media (max-width: 992px) {

    .dlx-card {

        grid-template-columns: 92px 1fr;

        grid-template-areas:

        "media content"

        "actions actions";

        gap: 12px;

        padding: 12px;

        border-radius: 22px;

    }


    .dlx-media {

        grid-area: media;

        width: 92px;

        height: 92px;

        border-radius: 18px;

    }

    .dlx-media::after {
        font-size: 16px;
    }


    .dlx-content {
        grid-area: content;
        gap: 8px;
    }


    .dlx-title {
        font-size: 15.5px;
    }


    .dlx-desc {

        font-size: 13px;

        -webkit-line-clamp: 2;

        max-height: calc(1.55em * 2);

        max-width: 100%;

    }


    .dlx-reviews {

        grid-template-columns: 1fr;

    }


    .dlx-actions {

        grid-area: actions;

        align-items: stretch;

        justify-content: flex-start;

        gap: 10px;

        padding-top: 0;

    }


    .dlx-action {

        width: 100%;

        min-width: 0;

        border-radius: 18px;

    }

    .dlx-link {
        text-align: center;
    }

}


@media (prefers-reduced-motion: reduce) {

    .dlx-card, .dlx-action {
        transition: none !important;
    }

    .dlx-card:hover {
        transform: none !important;
    }

    .dlx-action:hover {
        transform: none !important;
    }

}