/* #5764: only the existing popular YOOtheme grid. */
body.home .cska-popular-section .cska-popular-grid > div { min-width: 0; }
body.home .cska-popular-section .cska-popular-grid .el-item {
    background: #fff;
    border: 1px solid #dce2eb;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(16,24,40,.08);
    overflow: hidden;
    width: 100%;
}
body.home .cska-popular-section .cska-popular-grid .el-item > a,
body.home .cska-popular-section .cska-popular-grid .el-item > a > div { display: block; border-radius: 0; }
body.home .cska-popular-section .cska-popular-grid .el-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
body.home .cska-popular-section .cska-popular-grid .el-title {
    margin: 0 !important;
    padding: 16px;
    font: 400 22px/1.25 Oswald, Arial, sans-serif;
}
body.home .cska-popular-section .cska-popular-grid .el-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: #2e3daa;
    text-decoration: none;
    min-height: 2.5em;
}
body.home .cska-popular-section .cska-popular-grid a { -webkit-tap-highlight-color: transparent; }
body.home .cska-popular-section .cska-popular-grid a:focus-visible { outline: 3px solid #2663d5; outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
    body.home .cska-popular-section .cska-popular-grid .el-title a:hover { color: #26338e; text-decoration: underline; }
}
@media (max-width: 639px) {
    body.home .cska-popular-section .cska-popular-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        width: 100vw;
        max-width: none;
        margin: 0 calc(50% - 50vw);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 0 0 24px;
    }
    body.home .cska-popular-section .cska-popular-grid::-webkit-scrollbar { display: none; }
    body.home .cska-popular-section .cska-popular-grid > div {
        flex: 0 0 calc(100vw - 40px);
        width: calc(100vw - 40px);
        padding: 0;
        margin: 0 !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    body.home .cska-popular-section .cska-popular-grid > div:last-child { scroll-snap-align: end; }
    body.home .cska-popular-section .cska-popular-grid .el-item { height: 100% !important; box-sizing: border-box; }
    body.home .cska-popular-section .cska-popular-grid .el-title { font-size: 24px; }
}
