.webtouch-popular-posts {
    --webtouch-popular-border: rgba(127, 127, 127, .22);
    --webtouch-popular-muted: #687386;
}
.webtouch-popular-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: webtouch-popular-rank;
}
.webtouch-popular-posts-item {
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr) auto;
    align-items: start;
    gap: .7rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--webtouch-popular-border);
}
.webtouch-popular-posts-item:first-child { padding-top: .25rem; }
.webtouch-popular-posts-item:last-child { border-bottom: 0; padding-bottom: .25rem; }
.webtouch-popular-posts-rank {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    border: 1px solid rgba(100, 116, 139, .24);
    border-radius: 50%;
    color: #344054;
    background: linear-gradient(145deg, #f5f7fa, #e2e8f0);
    box-shadow: 0 2px 5px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.8);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.webtouch-popular-posts-rank--1 {
    color: #70470b;
    border-color: #d6a52d;
    background: linear-gradient(145deg, #fff2b3, #e7b637 72%, #dca12a);
    box-shadow: 0 3px 8px rgba(197, 144, 20, .25), inset 0 1px 0 rgba(255,255,255,.8);
}
.webtouch-popular-posts-rank--2 {
    color: #3f4a5a;
    border-color: #aab4c2;
    background: linear-gradient(145deg, #f5f7fa, #c6cfda 72%, #aab4c2);
    box-shadow: 0 3px 8px rgba(71, 85, 105, .18), inset 0 1px 0 rgba(255,255,255,.85);
}
.webtouch-popular-posts-rank--3 {
    color: #784322;
    border-color: #c8875c;
    background: linear-gradient(145deg, #f9dcc7, #d99a70 72%, #c47c50);
    box-shadow: 0 3px 8px rgba(154, 87, 45, .18), inset 0 1px 0 rgba(255,255,255,.75);
}
.webtouch-popular-posts-main { min-width: 0; }
.webtouch-popular-posts-link {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.webtouch-popular-posts-link:hover .webtouch-popular-posts-title,
.webtouch-popular-posts-link:focus .webtouch-popular-posts-title { text-decoration: underline; }
.webtouch-popular-posts-thumb {
    display: block;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
}
.webtouch-popular-posts-title-wrap { display: block; min-width: 0; }
.webtouch-popular-posts-title {
    display: block;
    min-width: 0;
    font-weight: 650;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.webtouch-popular-posts-categories {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .42rem;
}
.webtouch-popular-posts-category {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .18rem .5rem;
    border: 1px solid rgba(100, 116, 139, .18);
    border-radius: 999px;
    color: var(--webtouch-popular-muted);
    background: rgba(148, 163, 184, .10);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.webtouch-popular-posts-category:hover,
.webtouch-popular-posts-category:focus {
    color: inherit;
    border-color: rgba(100, 116, 139, .42);
    background: rgba(148, 163, 184, .18);
    text-decoration: none;
}
.webtouch-popular-posts-count {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25em;
    white-space: nowrap;
    font-size: .82em;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--webtouch-popular-muted);
    margin-top: .2rem;
}
.webtouch-popular-posts-eye { display: inline-block; vertical-align: -0.12em; }
.webtouch-popular-posts-empty { margin: .5em 0; }
@media (max-width: 480px) {
    .webtouch-popular-posts-item { grid-template-columns: 1.9rem minmax(0, 1fr); gap: .55rem; }
    .webtouch-popular-posts-rank { width: 1.8rem; height: 1.8rem; }
    .webtouch-popular-posts-count { grid-column: 2; justify-content: flex-start; margin-top: -.2rem; }
}