.jd-replays-hub{padding:4px 0 36px;}
.jd-replays-hero{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:34px;
    margin-bottom:28px;
    background:
        radial-gradient(circle at 88% 18%,rgba(255,122,89,.28),transparent 32%),
        radial-gradient(circle at 12% 10%,rgba(74,144,226,.22),transparent 34%),
        linear-gradient(135deg,#07111f 0%,#10294a 48%,#07111f 100%);
    color:#fff;
    box-shadow:0 22px 55px rgba(7,17,31,.18);
}
.jd-replays-hero:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 45%);
    pointer-events:none;
}
.jd-replays-hero span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#8cc8ff;
    font-weight:900;
}
.jd-replays-hero span:before{
    content:"";
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ff4b35;
    box-shadow:0 0 0 6px rgba(255,75,53,.15);
}
.jd-replays-hero h1{
    position:relative;
    z-index:1;
    margin:8px 0 10px;
    font-size:38px;
    line-height:1.08;
    color:#fff;
}
.jd-replays-hero p{
    position:relative;
    z-index:1;
    margin:0;
    color:#dbeafe;
    max-width:760px;
    font-size:15px;
}

.jd-replay-row{margin:30px 0;}
.jd-replay-row-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}
.jd-replay-row-head h2{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    border:0;
    padding:0;
    font-size:22px;
    color:#07111f;
}
.jd-replay-row-head h2:before{
    content:"";
    width:5px;
    height:22px;
    border-radius:999px;
    background:linear-gradient(180deg,#ff4b35,#ff9d3b);
}
.jd-replay-row-head a{
    flex:0 0 auto;
    font-weight:800;
    color:#0d518d;
    font-size:13px;
}
.jd-replay-slider{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding:4px 2px 18px;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
}
.jd-replay-slider::-webkit-scrollbar{height:8px;}
.jd-replay-slider::-webkit-scrollbar-track{background:#e8eef6;border-radius:999px;}
.jd-replay-slider::-webkit-scrollbar-thumb{background:#b9c8d8;border-radius:999px;}

.jd-replay-card{
    flex:0 0 255px;
    scroll-snap-align:start;
}
.jd-replay-card a{
    display:block;
    color:inherit;
    text-decoration:none;
}
.jd-replay-thumb{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:18px;
    background:#07111f;
    box-shadow:0 14px 34px rgba(15,23,42,.16);
}
.jd-replay-thumb:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.5));
    opacity:.85;
}
.jd-replay-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .28s ease,filter .28s ease;
}
.jd-replay-card:hover img{
    transform:scale(1.06);
    filter:saturate(1.1);
}
.jd-replay-noimage{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.42);
    font-size:44px;
    background:
        linear-gradient(135deg,transparent 48%,rgba(255,255,255,.08) 49%,rgba(255,255,255,.08) 51%,transparent 52%),
        linear-gradient(45deg,transparent 48%,rgba(255,255,255,.08) 49%,rgba(255,255,255,.08) 51%,transparent 52%),
        #07111f;
}
.jd-replay-play{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:2;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.94);
    color:#07111f;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    transition:transform .22s ease;
}
.jd-replay-card:hover .jd-replay-play{transform:scale(1.08);}
.jd-replay-info{padding:11px 4px 0;}
.jd-replay-card h3{
    margin:0 0 5px;
    font-size:15px;
    line-height:1.28;
    color:#07111f;
}
.jd-replay-date{
    font-size:12px;
    color:#64748b;
    font-weight:700;
}

@media(max-width:760px){
    .jd-replays-hero{padding:24px;border-radius:20px;}
    .jd-replays-hero h1{font-size:30px;}
    .jd-replay-card{flex-basis:220px;}
}
.jd-replay-row{position:relative;}
.jd-replay-row-head{padding-right:8px;}
.jd-replay-slider{scroll-behavior:smooth;padding-right:28px;}
.jd-replay-card{flex-basis:238px;}
.jd-replay-row:hover .jd-replay-slider{padding-bottom:20px;}
.jd-replay-thumb{border:1px solid rgba(255,255,255,.08);}
.jd-replay-card h3{font-weight:800;}

.pe-core-page--replays-hub{
    display:block!important;
}
.pe-core-main--replays-hub{
    width:100%!important;
    max-width:100%!important;
}

/* ==========================================================
   JD Replays Hub - Full width layout category=9
   ========================================================== */

.pe-main--replays {
    width: min(100% - 56px, 1240px) !important;
    max-width: 1240px !important;
}

.pe-main--replays .pe-page-head,
.pe-main--replays .pe-core-page--replays-hub,
.pe-main--replays .pe-core-main--replays-hub,
.pe-main--replays .jd-replays-hub {
    width: 100% !important;
    max-width: 100% !important;
}

.pe-main--replays .pe-core-page--replays-hub {
    display: block !important;
}

.pe-main--replays .pe-core-main--replays-hub {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pe-main--replays .jd-replays-hero,
.pe-main--replays .jd-replay-row,
.pe-main--replays .jd-replay-slider {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 720px) {
    .pe-main--replays {
        width: min(100% - 28px, 1240px) !important;
    }
}

/* ==========================================================
   JD Replays Hub - Premium polish v1
   ========================================================== */

.pe-main--replays {
    padding-top: 0 !important;
}

.pe-main--replays .pe-page-head {
    margin-bottom: 22px !important;
}

.pe-main--replays .jd-replays-hub {
    padding-bottom: 54px !important;
}

.pe-main--replays .jd-replays-hero {
    margin-bottom: 34px !important;
}

.pe-main--replays .jd-replay-row {
    margin: 36px 0 42px !important;
}

.pe-main--replays .jd-replay-row-head {
    margin-bottom: 16px !important;
}

.pe-main--replays .jd-replay-row-head h2 {
    font-size: 23px !important;
    letter-spacing: -0.03em;
}

.pe-main--replays .jd-replay-row-head a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #0b477c !important;
    background: rgba(13, 81, 141, .06);
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.pe-main--replays .jd-replay-row-head a:hover {
    background: rgba(255, 75, 53, .10);
    color: #ff4b35 !important;
    transform: translateX(2px);
}

.pe-main--replays .jd-replay-slider {
    gap: 18px !important;
    padding: 4px 2px 22px !important;
    scrollbar-width: thin;
}

.pe-main--replays .jd-replay-slider::-webkit-scrollbar {
    height: 6px;
}

.pe-main--replays .jd-replay-slider::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, .06);
    border-radius: 999px;
}

.pe-main--replays .jd-replay-slider::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, .22);
    border-radius: 999px;
}

.pe-main--replays .jd-replay-card {
    flex-basis: 232px !important;
}

.pe-main--replays .jd-replay-thumb {
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .13) !important;
}

.pe-main--replays .jd-replay-card h3 {
    font-size: 14.5px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
}

.pe-main--replays .jd-replay-date {
    font-size: 11.5px !important;
}

.pe-main--replays .jd-replay-play {
    width: 38px !important;
    height: 38px !important;
}

@media (max-width: 760px) {
    .pe-main--replays .jd-replay-card {
        flex-basis: 218px !important;
    }

    .pe-main--replays .jd-replay-row {
        margin: 28px 0 34px !important;
    }

    .pe-main--replays .jd-replay-row-head h2 {
        font-size: 20px !important;
    }
}

/* ==========================================================
   JD Replays Hub - Sticky header overlap fix
   ========================================================== */

.pe-main--replays {
    position: relative;
    z-index: 1;
}

.pe-main--replays .jd-replays-hero {
    position: relative;
    z-index: 1;
}

/* Cuando el header flotante aparece, evitamos que el hero quede pegado debajo */
.pe-main--replays .pe-page-head + .pe-core-page--replays-hub {
    margin-top: 18px !important;
}

/* Más aire entre breadcrumb y hero */
.pe-main--replays .pe-page-head {
    margin-top: 0 !important;
    margin-bottom: 26px !important;
}

/* Hero un poco más limpio y menos alto */
.pe-main--replays .jd-replays-hero {
    min-height: 132px !important;
    padding: 30px 34px !important;
    border-radius: 22px !important;
}

/* En pantallas bajas o cuando el header sticky tapa mucho, reducimos impacto visual */
@media (max-width: 900px) {
    .pe-main--replays .jd-replays-hero {
        min-height: 118px !important;
        padding: 26px 24px !important;
    }
}

/* ==========================================================
   JD Replays Hub - Featured replay
   ========================================================== */

.pe-main--replays .jd-replay-featured {
    margin: 30px 0 42px !important;
}

.pe-main--replays .jd-replay-featured-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 80% 18%, rgba(255, 92, 64, .22), transparent 34%),
        linear-gradient(135deg, #071426 0%, #102c4c 52%, #211827 100%);
    box-shadow: 0 24px 60px rgba(8, 20, 38, .18);
}

.pe-main--replays .jd-replay-featured-link {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 0;
    color: #fff !important;
    text-decoration: none !important;
    min-height: 310px;
}

.pe-main--replays .jd-replay-featured-media {
    position: relative;
    min-height: 310px;
    background: #06101e;
    overflow: hidden;
}

.pe-main--replays .jd-replay-featured-media img {
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    opacity: .82;
    transition: transform .35s ease, opacity .35s ease;
}

.pe-main--replays .jd-replay-featured-noimage {
    width: 100%;
    height: 100%;
    min-height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(7, 20, 38, .96), rgba(11, 38, 67, .96)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 2px, transparent 2px, transparent 14px);
    color: rgba(255,255,255,.38);
    font-size: 76px;
}

.pe-main--replays .jd-replay-featured-media:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 45%, rgba(7, 20, 38, .80) 100%);
    pointer-events: none;
}

.pe-main--replays .jd-replay-featured-info {
    position: relative;
    z-index: 2;
    padding: 42px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pe-main--replays .jd-replay-featured-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    margin-bottom: 12px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .84);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.pe-main--replays .jd-replay-featured-info h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.pe-main--replays .jd-replay-featured-info p {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
    line-height: 1.55;
}

.pe-main--replays .jd-replay-featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 700;
}

.pe-main--replays .jd-replay-featured-meta i {
    color: #ffb23f;
    margin-right: 5px;
}

.pe-main--replays .jd-replay-featured-btn {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    padding: 12px 17px;
    border-radius: 999px;
    background: #fff;
    color: #071426;
    font-weight: 900;
    font-size: 13px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pe-main--replays .jd-replay-featured-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255, 87, 58, .96);
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    box-shadow: 0 12px 26px rgba(255, 87, 58, .25);
}

.pe-main--replays .jd-replay-featured-play {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #071426;
    font-size: 18px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .24);
}

.pe-main--replays .jd-replay-featured-card:hover .jd-replay-featured-media img {
    transform: scale(1.055);
    opacity: .94;
}

.pe-main--replays .jd-replay-featured-card:hover .jd-replay-featured-btn {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .24);
}

@media (max-width: 900px) {
    .pe-main--replays .jd-replay-featured-link {
        grid-template-columns: 1fr;
    }

    .pe-main--replays .jd-replay-featured-media,
    .pe-main--replays .jd-replay-featured-media img,
    .pe-main--replays .jd-replay-featured-noimage {
        min-height: 220px;
    }

    .pe-main--replays .jd-replay-featured-media:after {
        background: linear-gradient(180deg, transparent 35%, rgba(7, 20, 38, .78) 100%);
    }

    .pe-main--replays .jd-replay-featured-info {
        padding: 28px 24px 30px;
    }
}

@media (max-width: 560px) {
    .pe-main--replays .jd-replay-featured {
        margin: 24px 0 34px !important;
    }

    .pe-main--replays .jd-replay-featured-info h2 {
        font-size: 25px;
    }

    .pe-main--replays .jd-replay-featured-play {
        width: 48px;
        height: 48px;
    }
}

/* ==========================================================
   JD Replays Hub - Slider arrows
   ========================================================== */

.pe-main--replays .jd-replay-row {
    position: relative;
}

.pe-main--replays .jd-replay-slider-nav {
    position: absolute;
    top: 56px;
    left: -19px;
    right: -19px;
    z-index: 6;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.pe-main--replays .jd-replay-slider-btn {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .96);
    color: #071426;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 14px 32px rgba(8, 20, 38, .18);
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.pe-main--replays .jd-replay-slider-btn i {
    font-size: 24px;
    line-height: 1;
}

.pe-main--replays .jd-replay-slider-btn:hover {
    transform: scale(1.06);
    background: #fff;
}

.pe-main--replays .jd-replay-slider-btn:disabled {
    opacity: 0;
    pointer-events: none;
    transform: scale(.92);
}

.pe-main--replays .jd-replay-slider {
    scroll-behavior: smooth;
}

@media (max-width: 760px) {
    .pe-main--replays .jd-replay-slider-nav {
        display: none !important;
    }
}

/* ==========================================================
   JD Replays Hub - Arrow icon fallback fix
   ========================================================== */

.pe-main--replays .jd-replay-slider-btn {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #071426 !important;
    text-align: center !important;
    padding: 0 0 4px 0 !important;
}

.pe-main--replays .jd-replay-slider-btn i {
    display: none !important;
}

/* ==========================================================
   JD Replays Hub - Slider arrows visual polish
   ========================================================== */

.pe-main--replays .jd-replay-slider-nav {
    top: 62px !important;
    left: -16px !important;
    right: -16px !important;
    opacity: 0;
    transition: opacity .18s ease;
}

.pe-main--replays .jd-replay-row:hover .jd-replay-slider-nav {
    opacity: 1;
}

.pe-main--replays .jd-replay-slider-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 28px !important;
    padding: 0 0 3px 0 !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #071426 !important;
    box-shadow: 0 10px 24px rgba(8, 20, 38, .14) !important;
}

.pe-main--replays .jd-replay-slider-btn:hover {
    background: #ffffff !important;
    transform: scale(1.05);
}

.pe-main--replays .jd-replay-slider-btn:disabled {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* En pantallas táctiles dejamos que el usuario haga swipe */
@media (max-width: 900px) {
    .pe-main--replays .jd-replay-slider-nav {
        display: none !important;
    }
}

/* ==========================================================
   JD Replays Hub - Hide native scrollbar, keep scroll active
   ========================================================== */

.pe-main--replays .jd-replay-slider {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.pe-main--replays .jd-replay-slider::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ajuste fino de flechas para que no parezcan flotando fuera del hub */
.pe-main--replays .jd-replay-slider-nav {
    left: -10px !important;
    right: -10px !important;
}

.pe-main--replays .jd-replay-slider-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 26px !important;
    background: rgba(255, 255, 255, .94) !important;
}

/* TEMP TEST - catlist=4 */
.jd-catlist-test {
    display: inline-flex;
    width: fit-content;
    margin: 6px 0 4px;
    padding: 4px 7px;
    border-radius: 999px;
    background: #ff4b35;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

/* ==========================================================
   JD Replays Hub - Category fallback thumbs
   ========================================================== */

.pe-main--replays .jd-replay-noimage {
    position: relative;
    overflow: hidden;
}

.pe-main--replays .jd-replay-noimage:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 2px, transparent 2px, transparent 16px);
}

.pe-main--replays .jd-replay-noimage:after {
    content: "";
    position: absolute;
    inset: auto -20% -45% -20%;
    height: 85%;
    background: radial-gradient(circle, rgba(255,255,255,.13), transparent 62%);
}

.pe-main--replays .jd-replay-noimage i {
    position: relative;
    z-index: 2;
}

.pe-main--replays .jd-replay-noimage-kicker {
    position: absolute;
    left: 13px;
    top: 12px;
    z-index: 3;
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255,255,255,.13);
    backdrop-filter: blur(8px);
}

.pe-main--replays .jd-replay-noimage--sociedad {
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 87, 58, .32), transparent 32%),
        radial-gradient(circle at 18% 82%, rgba(36, 130, 255, .25), transparent 36%),
        linear-gradient(135deg, #071426 0%, #102d4f 52%, #211827 100%) !important;
}

.pe-main--replays .jd-replay-noimage--religion {
    background:
        radial-gradient(circle at 75% 24%, rgba(255, 178, 63, .32), transparent 34%),
        radial-gradient(circle at 16% 80%, rgba(72, 145, 255, .20), transparent 38%),
        linear-gradient(135deg, #071426 0%, #132f4c 50%, #241b2b 100%) !important;
}

.pe-main--replays .jd-replay-card--sociedad .jd-replay-thumb {
    box-shadow: 0 12px 28px rgba(13, 81, 141, .16) !important;
}

.pe-main--replays .jd-replay-card--religion .jd-replay-thumb {
    box-shadow: 0 12px 28px rgba(255, 178, 63, .13) !important;
}

/* ==========================================================
   JD Replays Hub - Category thumbs polish
   ========================================================== */

.pe-main--replays .jd-replay-noimage-kicker {
    padding: 4px 7px !important;
    font-size: 9px !important;
    letter-spacing: .09em !important;
    background: rgba(7, 20, 38, .48) !important;
    border: 1px solid rgba(255, 255, 255, .13);
}

.pe-main--replays .jd-replay-noimage--sociedad i,
.pe-main--replays .jd-replay-noimage--religion i {
    color: rgba(255, 255, 255, .42) !important;
    font-size: 38px !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
}

.pe-main--replays .jd-replay-noimage--sociedad {
    background:
        radial-gradient(circle at 82% 24%, rgba(255, 87, 58, .20), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(36, 130, 255, .16), transparent 38%),
        linear-gradient(135deg, #071426 0%, #10243e 55%, #211827 100%) !important;
}

.pe-main--replays .jd-replay-noimage--religion {
    background:
        radial-gradient(circle at 78% 24%, rgba(255, 178, 63, .20), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(72, 145, 255, .14), transparent 38%),
        linear-gradient(135deg, #071426 0%, #102842 55%, #211827 100%) !important;
}

.pe-main--replays .jd-replay-noimage:before {
    opacity: .38 !important;
}

/* ==========================================================
   JD Replays Hub - Latest/default fallback thumb
   ========================================================== */

.pe-main--replays .jd-replay-noimage--latest {
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 87, 58, .22), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(45, 126, 255, .18), transparent 38%),
        linear-gradient(135deg, #06101e 0%, #102842 52%, #211827 100%) !important;
}

.pe-main--replays .jd-replay-noimage--latest i {
    color: rgba(255, 255, 255, .42) !important;
    font-size: 42px !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.24));
}

.pe-main--replays .jd-replay-card--latest .jd-replay-thumb {
    box-shadow: 0 12px 28px rgba(8, 20, 38, .15) !important;
}

.pe-main--replays .jd-replay-card--latest .jd-replay-noimage-kicker {
    background: rgba(7, 20, 38, .50) !important;
    border: 1px solid rgba(255, 255, 255, .13);
}

/* ==========================================================
   JD Replays Hub - Latest/default fallback thumb
   ========================================================== */

.pe-main--replays .jd-replay-noimage--latest {
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 87, 58, .22), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(45, 126, 255, .18), transparent 38%),
        linear-gradient(135deg, #06101e 0%, #102842 52%, #211827 100%) !important;
}

.pe-main--replays .jd-replay-noimage--latest i {
    color: rgba(255, 255, 255, .42) !important;
    font-size: 42px !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.24));
}

.pe-main--replays .jd-replay-card--latest .jd-replay-thumb {
    box-shadow: 0 12px 28px rgba(8, 20, 38, .15) !important;
}

.pe-main--replays .jd-replay-card--latest .jd-replay-noimage-kicker {
    background: rgba(7, 20, 38, .50) !important;
    border: 1px solid rgba(255, 255, 255, .13);
}

/* TEMP TEST - category tags */
.pe-main--replays .jd-cat-tags-test {
    display: grid;
    gap: 2px;
    margin: 5px 0;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255, 75, 53, .10);
    color: #0b1b2f;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
}

/* ==========================================================
   JD Replays Hub - Latest row category detected from URL
   ========================================================== */

.pe-main--replays .jd-replay-card--latest .jd-replay-noimage--latest.jd-replay-noimage--sociedad {
    background:
        radial-gradient(circle at 82% 24%, rgba(255, 87, 58, .20), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(36, 130, 255, .16), transparent 38%),
        linear-gradient(135deg, #071426 0%, #10243e 55%, #211827 100%) !important;
}

.pe-main--replays .jd-replay-card--latest .jd-replay-noimage--latest.jd-replay-noimage--religion {
    background:
        radial-gradient(circle at 78% 24%, rgba(255, 178, 63, .20), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(72, 145, 255, .14), transparent 38%),
        linear-gradient(135deg, #071426 0%, #102842 55%, #211827 100%) !important;
}

.pe-main--replays .jd-replay-card--latest .jd-replay-noimage--sociedad i,
.pe-main--replays .jd-replay-card--latest .jd-replay-noimage--religion i {
    color: rgba(255, 255, 255, .42) !important;
    font-size: 38px !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
}

/* ==========================================================
   JD Replays Hub - Remove temporary category test output
   ========================================================== */

.pe-main--replays .jd-cat-tags-test {
    display: none !important;
}

/* ==========================================================
   JD Replays Hub - Remove temporary category test output
   ========================================================== */

.pe-main--replays .jd-cat-tags-test {
    display: none !important;
}

/* ==========================================================
   JD Replays Hub - Mobile polish v1
   ========================================================== */

@media (max-width: 760px) {

    .pe-main--replays {
        width: min(100% - 20px, 1240px) !important;
    }

    .pe-main--replays .pe-page-head {
        margin-bottom: 18px !important;
    }

    .pe-main--replays .jd-replays-hero {
        min-height: auto !important;
        padding: 24px 18px !important;
        margin-bottom: 26px !important;
        border-radius: 18px !important;
    }

    .pe-main--replays .jd-replays-hero h1 {
        font-size: 27px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.04em;
    }

    .pe-main--replays .jd-replays-hero p {
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .pe-main--replays .jd-replay-featured {
        margin: 22px 0 34px !important;
    }

    .pe-main--replays .jd-replay-featured-card {
        border-radius: 20px !important;
    }

    .pe-main--replays .jd-replay-featured-link {
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
    }

    .pe-main--replays .jd-replay-featured-media,
    .pe-main--replays .jd-replay-featured-media img,
    .pe-main--replays .jd-replay-featured-noimage {
        min-height: 165px !important;
    }

    .pe-main--replays .jd-replay-featured-noimage {
        font-size: 58px !important;
    }

    .pe-main--replays .jd-replay-featured-badge {
        top: 14px !important;
        left: 14px !important;
        padding: 7px 10px !important;
        font-size: 11px !important;
    }

    .pe-main--replays .jd-replay-featured-play {
        right: 14px !important;
        bottom: 14px !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 15px !important;
    }

    .pe-main--replays .jd-replay-featured-info {
        padding: 22px 18px 24px !important;
    }

    .pe-main--replays .jd-replay-featured-kicker {
        margin-bottom: 9px !important;
        padding: 6px 9px !important;
        font-size: 10px !important;
    }

    .pe-main--replays .jd-replay-featured-info h2 {
        font-size: 24px !important;
        line-height: 1.08 !important;
        margin-bottom: 9px !important;
    }

    .pe-main--replays .jd-replay-featured-info p {
        font-size: 13px !important;
        line-height: 1.42 !important;
        margin-bottom: 15px !important;
    }

    .pe-main--replays .jd-replay-featured-meta {
        gap: 9px !important;
        margin-bottom: 16px !important;
        font-size: 11px !important;
    }

    .pe-main--replays .jd-replay-featured-btn {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }

    .pe-main--replays .jd-replay-row {
        margin: 34px 0 38px !important;
    }

    .pe-main--replays .jd-replay-row-head {
        margin-bottom: 13px !important;
        align-items: center !important;
    }

    .pe-main--replays .jd-replay-row-head h2 {
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    .pe-main--replays .jd-replay-row-head a {
        padding: 6px 9px !important;
        font-size: 11px !important;
    }

    .pe-main--replays .jd-replay-slider {
        gap: 12px !important;
        padding: 2px 0 8px !important;
    }

    .pe-main--replays .jd-replay-card {
        flex: 0 0 178px !important;
        max-width: 178px !important;
    }

    .pe-main--replays .jd-replay-thumb {
        border-radius: 13px !important;
    }

    .pe-main--replays .jd-replay-noimage-kicker {
        top: 9px !important;
        left: 9px !important;
        padding: 4px 6px !important;
        font-size: 8px !important;
    }

    .pe-main--replays .jd-replay-noimage--latest i,
    .pe-main--replays .jd-replay-noimage--sociedad i,
    .pe-main--replays .jd-replay-noimage--religion i {
        font-size: 31px !important;
    }

    .pe-main--replays .jd-replay-play {
        width: 32px !important;
        height: 32px !important;
        right: 9px !important;
        bottom: 9px !important;
    }

    .pe-main--replays .jd-replay-play i {
        font-size: 12px !important;
    }

    .pe-main--replays .jd-replay-card h3 {
        font-size: 12.5px !important;
        line-height: 1.22 !important;
        margin-top: 8px !important;
    }

    .pe-main--replays .jd-replay-date {
        font-size: 10px !important;
    }
}

@media (max-width: 380px) {
    .pe-main--replays .jd-replay-card {
        flex-basis: 168px !important;
        max-width: 168px !important;
    }

    .pe-main--replays .jd-replay-row-head h2 {
        font-size: 19px !important;
    }
}

/* ==========================================================
   JD Replays Hub - Mobile final spacing
   ========================================================== */

@media (max-width: 760px) {
    .pe-main--replays .jd-replays-hub {
        padding-bottom: 72px !important;
    }

    .pe-main--replays .jd-replay-row:last-child {
        margin-bottom: 54px !important;
    }

    .pe-main--replays .jd-replay-slider {
        scroll-padding-left: 0;
        padding-bottom: 12px !important;
    }
}

/* ==========================================================
   JD Replays Hub - Featured category fallback thumb
   ========================================================== */

.pe-main--replays .jd-replay-featured-noimage {
    position: relative;
    overflow: hidden;
}

.pe-main--replays .jd-replay-featured-noimage:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .40;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 2px, transparent 2px, transparent 16px);
}

.pe-main--replays .jd-replay-featured-noimage:after {
    content: "";
    position: absolute;
    inset: auto -20% -45% -20%;
    height: 85%;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 62%);
}

.pe-main--replays .jd-replay-featured-noimage i {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, .42);
    font-size: 78px;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.25));
}

.pe-main--replays .jd-replay-featured-cat {
    position: absolute;
    left: 22px;
    top: 62px;
    z-index: 4;
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(7, 20, 38, .52);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.pe-main--replays .jd-replay-featured-noimage--default {
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 87, 58, .22), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(45, 126, 255, .18), transparent 38%),
        linear-gradient(135deg, #06101e 0%, #102842 52%, #211827 100%) !important;
}

.pe-main--replays .jd-replay-featured-noimage--sociedad {
    background:
        radial-gradient(circle at 82% 24%, rgba(255, 87, 58, .22), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(36, 130, 255, .17), transparent 38%),
        linear-gradient(135deg, #071426 0%, #10243e 55%, #211827 100%) !important;
}

.pe-main--replays .jd-replay-featured-noimage--religion {
    background:
        radial-gradient(circle at 78% 24%, rgba(255, 178, 63, .22), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(72, 145, 255, .15), transparent 38%),
        linear-gradient(135deg, #071426 0%, #102842 55%, #211827 100%) !important;
}

@media (max-width: 760px) {
    .pe-main--replays .jd-replay-featured-noimage i {
        font-size: 54px !important;
    }

    .pe-main--replays .jd-replay-featured-cat {
        top: 52px;
        left: 14px;
        padding: 5px 8px;
        font-size: 9px;
    }
}


/* ==========================================================
   JD Replays Hub - New replay category fallback thumbs
   ========================================================== */

.pe-main--replays .jd-replay-noimage--deportivos {
    background:
        radial-gradient(circle at 82% 24%, rgba(0, 120, 255, .22), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(255, 178, 63, .15), transparent 38%),
        linear-gradient(135deg, #071426 0%, #102b4a 55%, #162136 100%) !important;
}

.pe-main--replays .jd-replay-noimage--comunitarios {
    background:
        radial-gradient(circle at 82% 24%, rgba(40, 190, 130, .20), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(72, 145, 255, .14), transparent 38%),
        linear-gradient(135deg, #071426 0%, #102842 55%, #152a2b 100%) !important;
}

.pe-main--replays .jd-replay-noimage--politicos {
    background:
        radial-gradient(circle at 82% 24%, rgba(255, 87, 58, .20), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(255, 178, 63, .13), transparent 38%),
        linear-gradient(135deg, #071426 0%, #272033 55%, #211827 100%) !important;
}

.pe-main--replays .jd-replay-noimage--culturales {
    background:
        radial-gradient(circle at 82% 24%, rgba(168, 85, 247, .20), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(255, 178, 63, .15), transparent 38%),
        linear-gradient(135deg, #071426 0%, #182340 55%, #251c33 100%) !important;
}

.pe-main--replays .jd-replay-noimage--especiales {
    background:
        radial-gradient(circle at 82% 24%, rgba(255, 178, 63, .22), transparent 34%),
        radial-gradient(circle at 16% 84%, rgba(255, 87, 58, .16), transparent 38%),
        linear-gradient(135deg, #071426 0%, #20233b 55%, #2a1e25 100%) !important;
}

.pe-main--replays .jd-replay-noimage--deportivos i,
.pe-main--replays .jd-replay-noimage--comunitarios i,
.pe-main--replays .jd-replay-noimage--politicos i,
.pe-main--replays .jd-replay-noimage--culturales i,
.pe-main--replays .jd-replay-noimage--especiales i {
    color: rgba(255, 255, 255, .42) !important;
    font-size: 38px !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
}

/* ==========================================================
   JD Replays Hub - Empty category state
   ========================================================== */

.pe-main--replays .jd-replay-empty {
    width: 100%;
    min-height: 92px;
    display: flex;
    align-items: center;
    padding: 18px 20px;
    border: 1px dashed rgba(11, 71, 124, .22);
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 20%, rgba(255, 87, 58, .08), transparent 32%),
        rgba(255, 255, 255, .46);
    color: rgba(7, 20, 38, .68);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 14px 34px rgba(8, 20, 38, .045);
}

@media (max-width: 760px) {
    .pe-main--replays .jd-replay-empty {
        min-height: 78px;
        padding: 15px 16px;
        border-radius: 15px;
        font-size: 12px;
        line-height: 1.35;
    }
}

/* ==========================================================
   JD Replays Hub - Compact empty categories
   ========================================================== */

.pe-main--replays .jd-replay-empty {
    min-height: 70px !important;
    padding: 15px 18px !important;
    font-size: 12.5px !important;
}

.pe-main--replays .jd-replay-row:has(.jd-replay-empty) {
    margin-bottom: 30px !important;
}

@media (max-width: 760px) {
    .pe-main--replays .jd-replay-empty {
        min-height: 62px !important;
        padding: 13px 15px !important;
    }

    .pe-main--replays .jd-replay-row:has(.jd-replay-empty) {
        margin-bottom: 26px !important;
    }
}