/* ==============================
       RELATED SKELETON (WHITE)
    ============================== */
    .ab-skel-wrap {
        position: relative;
        width: 100%;
    }

    .ab-skel {
        position: absolute;
        inset: 0;
        z-index: 25;
        background: #fff;
        border-radius: 14px;
        padding: 12px;
        opacity: 1;
        visibility: visible;
        transition: opacity .18s ease, visibility .18s ease;
        pointer-events: none;
    }

    .ab-skel.is-hidden {
        opacity: 0;
        visibility: hidden;
    }

    .ab-skel-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 12px;
    }

    .ab-skel-card {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 12px 26px rgba(0, 0, 0, .08);
        overflow: hidden;
    }

    .ab-skel-line {
        position: relative;
        background: rgba(0, 0, 0, .07);
        border-radius: 10px;
        height: 12px;
        overflow: hidden;
    }

    .ab-skel-line.lg {
        height: 16px;
    }

    .ab-skel-gap {
        height: 12px;
    }

    .ab-skel-box {
        position: relative;
        background: rgba(0, 0, 0, .07);
        border-radius: 14px;
        overflow: hidden;
    }

    .ab-skel-shimmer::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-120%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
        animation: abSkel 1.05s infinite;
        opacity: .85;
    }

    @keyframes abSkel {
        100% {
            transform: translateX(120%)
        }
    }

    .ab-skel-related-grid {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .ab-skel-related-item {
        flex: 1 1 180px;
        min-width: 160px;
    }

    .ab-skel-related-img {
        height: 170px;
    }