.bw-popular-routes{
    --bw-pr-accent:#F30101;
    position:relative;
    overflow:hidden;
    padding:var(--bw-pr-desktop-top,54px) 0 var(--bw-pr-desktop-bottom,54px);
    background:#fff;
    color:#111;
    font-family:var(--font-interface);
}

.bw-popular-routes>.bw-shell{
    position:relative;
    z-index:1;
}

.bw-popular-routes__header{
    max-width:980px;
    margin-bottom:clamp(22px,2.2vw,34px);
}

.bw-popular-routes__eyebrow{
    margin:0 0 10px;
    color:var(--bw-pr-accent);
    font-size:clamp(10px,.72vw,13px);
    font-weight:800;
    line-height:1.3;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.bw-popular-routes__title{
    margin:0;
    color:#111;
    font-family:var(--font-display);
    font-size:clamp(38px,3.55vw,62px);
    font-style:normal;
    font-weight:600;
    line-height:1.02;
    letter-spacing:-.035em;
    text-wrap:balance;
}

.bw-popular-routes__paragraph{
    max-width:760px;
    margin:12px 0 0;
    color:rgba(0,0,0,.68);
    font-size:clamp(14px,.94vw,17px);
    line-height:1.6;
}

.bw-popular-routes__layout{
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(440px,.96fr);
    align-items:start;
    gap:clamp(28px,3.2vw,54px);
    max-height:var(--bw-pr-desktop-max-height,840px);
}

.bw-popular-routes__navigator{
    min-width:0;
}

.bw-popular-routes__list{
    position:relative;
    display:grid;
    gap:2px;
    margin:0;
    padding:0 0 0 26px;
    list-style:none;
}

.bw-popular-routes__list::before{
    content:"";
    position:absolute;
    top:25px;
    bottom:25px;
    left:12px;
    width:1px;
    background:rgba(243,1,1,.34);
}

.bw-popular-routes__item{
    position:relative;
    min-width:0;
    min-height:52px;
    border-radius:6px;
}

.bw-popular-routes__node{
    position:absolute;
    z-index:2;
    top:50%;
    left:-20px;
    width:14px;
    height:14px;
    border:2px solid rgba(243,1,1,.62);
    border-radius:50%;
    background:#fff;
    transform:translateY(-50%);
    transition:border-color 180ms ease,background 180ms ease,box-shadow 180ms ease;
}

.bw-popular-routes__route-link{
    display:grid;
    grid-template-columns:34px minmax(96px,.75fr) minmax(90px,1fr) minmax(126px,.95fr);
    align-items:center;
    min-height:52px;
    gap:12px;
    padding:7px 16px;
    border-radius:6px;
    color:#111;
    text-decoration:none;
    transition:background 180ms ease,color 180ms ease;
}

.bw-popular-routes__number{
    color:rgba(243,1,1,.8);
    font-size:12px;
    font-weight:800;
    line-height:1;
}

.bw-popular-routes__origin,
.bw-popular-routes__destination{
    min-width:0;
    font-size:clamp(13px,.92vw,16px);
    font-weight:700;
    line-height:1.25;
}

.bw-popular-routes__destination{text-align:left}

.bw-popular-routes__connector{
    position:relative;
    display:block;
    height:16px;
}

.bw-popular-routes__connector::before,
.bw-popular-routes__connector::after,
.bw-popular-routes__connector i::before{
    content:"";
    position:absolute;
    top:50%;
}

.bw-popular-routes__connector::before{
    left:3px;
    right:8px;
    height:1px;
    background:rgba(243,1,1,.58);
    transform:translateY(-50%);
}

.bw-popular-routes__connector::after{
    right:2px;
    width:8px;
    height:8px;
    border-top:1.5px solid var(--bw-pr-accent);
    border-right:1.5px solid var(--bw-pr-accent);
    transform:translateY(-50%) rotate(45deg);
}

.bw-popular-routes__connector i::before{
    left:0;
    width:7px;
    height:7px;
    border:1px solid var(--bw-pr-accent);
    border-radius:50%;
    background:#fff;
    transform:translateY(-50%);
}

.bw-popular-routes__item:hover .bw-popular-routes__route-link,
.bw-popular-routes__route-link:focus-visible{
    background:rgba(243,1,1,.06);
}

.bw-popular-routes__route-link:focus-visible,
.bw-popular-routes__preview-button:focus-visible,
.bw-popular-routes__route-title a:focus-visible,
.bw-popular-routes__quote:focus-visible{
    outline:3px solid var(--bw-pr-accent);
    outline-offset:3px;
}

.bw-popular-routes__item.is-active .bw-popular-routes__route-link{
    background:var(--bw-pr-accent);
    color:#fff;
}

.bw-popular-routes__item.is-active .bw-popular-routes__number{color:#fff}
.bw-popular-routes__item.is-active .bw-popular-routes__connector::before{background:rgba(255,255,255,.72)}
.bw-popular-routes__item.is-active .bw-popular-routes__connector::after{border-color:#fff}
.bw-popular-routes__item.is-active .bw-popular-routes__connector i::before{border-color:#fff;background:var(--bw-pr-accent)}
.bw-popular-routes__item.is-active .bw-popular-routes__node{
    border-color:#fff;
    background:var(--bw-pr-accent);
    box-shadow:0 0 0 2px var(--bw-pr-accent);
}

.bw-popular-routes__preview-button{
    display:none;
}

.bw-popular-routes__preview{
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    background:#fff;
}

.bw-popular-routes__media{
    overflow:hidden;
    aspect-ratio:16 / 9;
    background:#f4f4f4;
}

.bw-popular-routes__picture,
.bw-popular-routes__picture img{
    display:block;
    width:100%;
    height:100%;
}

.bw-popular-routes__picture img{
    object-fit:cover;
    transition:opacity 180ms ease;
}

.bw-popular-routes__preview.is-updating .bw-popular-routes__picture img,
.bw-popular-routes__preview.is-updating .bw-popular-routes__preview-body{
    opacity:.55;
}

.bw-popular-routes__preview-body{
    padding:clamp(18px,1.8vw,28px);
    transition:opacity 180ms ease;
}

.bw-popular-routes__selected-label{
    margin:0 0 8px;
    color:var(--bw-pr-accent);
    font-size:clamp(10px,.72vw,12px);
    font-weight:800;
    line-height:1.3;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.bw-popular-routes__route-title{
    margin:0 0 14px;
    font-family:var(--font-display);
    font-size:clamp(31px,2.8vw,48px);
    font-style:normal;
    font-weight:600;
    line-height:1.02;
    letter-spacing:-.03em;
}

.bw-popular-routes__route-title a{
    color:#111;
    text-decoration:none;
}

.bw-popular-routes__route-title a:hover{color:var(--bw-pr-accent)}

.bw-popular-routes__details{
    margin:0;
    padding:0;
}

.bw-popular-routes__detail{
    display:grid;
    grid-template-columns:minmax(160px,.85fr) minmax(0,1.15fr);
    align-items:center;
    min-height:45px;
    gap:16px;
    border-top:1px solid rgba(0,0,0,.1);
}

.bw-popular-routes__detail:last-child{border-bottom:1px solid rgba(0,0,0,.1)}

.bw-popular-routes__detail dt,
.bw-popular-routes__detail dd{
    margin:0;
}

.bw-popular-routes__detail dt{
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    align-items:center;
    gap:10px;
    color:#111;
    font-size:clamp(11px,.75vw,13px);
    font-weight:800;
    line-height:1.35;
}

.bw-popular-routes__detail dd{
    color:rgba(0,0,0,.68);
    font-size:clamp(11px,.75vw,13px);
    line-height:1.42;
}

.bw-popular-routes__detail-icon,
.bw-popular-routes__note-icon{
    display:grid;
    place-items:center;
    color:var(--bw-pr-accent);
}

.bw-popular-routes__detail-icon svg{
    width:28px;
    height:28px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.bw-popular-routes__quote{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    gap:12px;
    margin-top:16px;
    padding:10px 18px;
    border-radius:6px;
    background:var(--bw-pr-accent);
    color:#fff;
    font-size:clamp(12px,.84vw,14px);
    font-weight:800;
    letter-spacing:.08em;
    line-height:1.2;
    text-decoration:none;
    text-transform:uppercase;
}

.bw-popular-routes__quote svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform 180ms ease;
}

.bw-popular-routes__quote:hover svg{transform:translateX(4px)}

.bw-popular-routes__note{
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    align-items:start;
    gap:9px;
    margin:14px 0 0;
    color:rgba(0,0,0,.58);
    font-size:clamp(10px,.68vw,12px);
    line-height:1.45;
}

.bw-popular-routes__note-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media (max-width:1199px){
    .bw-popular-routes__layout{
        grid-template-columns:minmax(0,1fr) minmax(390px,.92fr);
        gap:26px;
    }

    .bw-popular-routes__route-link{
        grid-template-columns:28px minmax(82px,.72fr) minmax(70px,.92fr) minmax(110px,.9fr);
        gap:9px;
        padding-inline:12px;
    }

    .bw-popular-routes__route-title{font-size:clamp(30px,3.2vw,42px)}
    .bw-popular-routes__preview-body{padding:18px}
}

@media (max-width:1023px){
    .bw-popular-routes{
        padding:var(--bw-pr-tablet-top,50px) 0 var(--bw-pr-tablet-bottom,50px);
    }

    .bw-popular-routes__layout{
        grid-template-columns:1fr;
        max-height:none;
        gap:24px;
    }

    .bw-popular-routes__list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        padding:0;
    }

    .bw-popular-routes__list::before,
    .bw-popular-routes__node{display:none}

    .bw-popular-routes__route-link{
        grid-template-columns:28px minmax(72px,.8fr) minmax(58px,.65fr) minmax(96px,.9fr);
        min-height:50px;
        border:1px solid rgba(0,0,0,.1);
    }

    .bw-popular-routes__preview{
        display:grid;
        grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    }

    .bw-popular-routes__media{height:100%;aspect-ratio:auto;min-height:360px}
}

@media (max-width:767px){
    .bw-popular-routes{
        padding:var(--bw-pr-mobile-top,46px) 0 var(--bw-pr-mobile-bottom,46px);
    }

    .bw-popular-routes__header{margin-bottom:20px}
    .bw-popular-routes__title{font-size:clamp(34px,10vw,45px)}
    .bw-popular-routes__paragraph{font-size:16px}

    .bw-popular-routes__navigator{
        margin-inline:calc(var(--site-gutter,20px) * -1);
        padding-inline:var(--site-gutter,20px);
        overflow-x:auto;
        scrollbar-width:thin;
        scroll-snap-type:x mandatory;
        overscroll-behavior-inline:contain;
    }

    .bw-popular-routes__list{
        display:flex;
        width:max-content;
        min-width:100%;
        gap:10px;
        padding-bottom:8px;
    }

    .bw-popular-routes__item{
        display:grid;
        grid-template-columns:minmax(0,1fr) 42px;
        width:min(78vw,310px);
        min-height:66px;
        flex:0 0 auto;
        border:1px solid rgba(0,0,0,.1);
        border-radius:7px;
        scroll-snap-align:start;
    }

    .bw-popular-routes__route-link{
        grid-template-columns:1fr auto 1fr;
        grid-template-areas:
            "number number number"
            "origin connector destination";
        min-height:64px;
        gap:4px 8px;
        padding:8px 10px;
        border:0;
    }

    .bw-popular-routes__number{grid-area:number;font-size:10px}
    .bw-popular-routes__origin{grid-area:origin}
    .bw-popular-routes__connector{grid-area:connector;width:42px}
    .bw-popular-routes__destination{grid-area:destination}
    .bw-popular-routes__origin,
    .bw-popular-routes__destination{font-size:13px}

    .bw-popular-routes__preview-button{
        display:grid;
        width:42px;
        min-height:64px;
        place-items:center;
        padding:0;
        border:0;
        border-left:1px solid rgba(0,0,0,.1);
        border-radius:0 7px 7px 0;
        background:transparent;
        color:var(--bw-pr-accent);
        font-size:17px;
        cursor:pointer;
    }

    .bw-popular-routes__item.is-active .bw-popular-routes__preview-button{
        border-color:rgba(255,255,255,.35);
        background:var(--bw-pr-accent);
        color:#fff;
    }

    .bw-popular-routes__preview{
        display:block;
    }

    .bw-popular-routes__media{
        min-height:0;
        aspect-ratio:16 / 10;
    }

    .bw-popular-routes__preview-body{padding:18px 16px}
    .bw-popular-routes__route-title{font-size:clamp(30px,9vw,40px)}

    .bw-popular-routes__detail{
        grid-template-columns:1fr;
        gap:2px;
        padding:10px 0;
    }

    .bw-popular-routes__detail dt{
        grid-template-columns:28px minmax(0,1fr);
    }

    .bw-popular-routes__detail dd{padding-left:38px;font-size:13px}
    .bw-popular-routes__quote{min-height:50px}
}

@media (max-width:390px){
    .bw-popular-routes__item{width:84vw}
    .bw-popular-routes__title{font-size:35px}
}

@media (prefers-reduced-motion:reduce){
    .bw-popular-routes__node,
    .bw-popular-routes__route-link,
    .bw-popular-routes__picture img,
    .bw-popular-routes__preview-body,
    .bw-popular-routes__quote svg{
        transition:none!important;
    }
}

/* Compact desktop refinement: reduces vertical space without affecting links or preview behaviour. */
@media (min-width:1024px){
    .bw-popular-routes{
        padding:36px 0;
    }

    .bw-popular-routes__header{
        margin-bottom:18px;
    }

    .bw-popular-routes__eyebrow{
        margin-bottom:7px;
        font-size:clamp(10px,.64vw,12px);
    }

    .bw-popular-routes__title{
        font-size:clamp(34px,3vw,52px);
        line-height:1;
    }

    .bw-popular-routes__paragraph{
        margin-top:8px;
        font-size:clamp(13px,.8vw,15px);
        line-height:1.5;
    }

    .bw-popular-routes__layout{
        grid-template-columns:minmax(0,1.03fr) minmax(410px,.97fr);
        gap:clamp(22px,2.2vw,38px);
        max-height:none;
    }

    .bw-popular-routes__list{
        gap:1px;
        padding-left:24px;
    }

    .bw-popular-routes__list::before{
        top:21px;
        bottom:21px;
        left:11px;
    }

    .bw-popular-routes__item{
        min-height:44px;
        border-radius:5px;
    }

    .bw-popular-routes__node{
        left:-18px;
        width:12px;
        height:12px;
    }

    .bw-popular-routes__route-link{
        grid-template-columns:30px minmax(88px,.74fr) minmax(76px,.96fr) minmax(116px,.94fr);
        min-height:44px;
        gap:9px;
        padding:4px 12px;
        border-radius:5px;
    }

    .bw-popular-routes__number{
        font-size:11px;
    }

    .bw-popular-routes__origin,
    .bw-popular-routes__destination{
        font-size:clamp(12px,.78vw,14px);
    }

    .bw-popular-routes__preview{
        border-radius:8px;
    }

    .bw-popular-routes__media{
        aspect-ratio:2 / 1;
    }

    .bw-popular-routes__preview-body{
        padding:15px 17px 16px;
    }

    .bw-popular-routes__selected-label{
        margin-bottom:5px;
        font-size:10px;
    }

    .bw-popular-routes__route-title{
        margin-bottom:10px;
        font-size:clamp(28px,2.25vw,40px);
        line-height:1;
    }

    .bw-popular-routes__detail{
        grid-template-columns:minmax(145px,.83fr) minmax(0,1.17fr);
        min-height:38px;
        gap:12px;
    }

    .bw-popular-routes__detail dt{
        grid-template-columns:27px minmax(0,1fr);
        gap:8px;
        font-size:clamp(10px,.66vw,12px);
    }

    .bw-popular-routes__detail dd{
        font-size:clamp(10px,.66vw,12px);
        line-height:1.35;
    }

    .bw-popular-routes__detail-icon svg{
        width:23px;
        height:23px;
    }

    .bw-popular-routes__quote{
        min-height:46px;
        margin-top:12px;
        padding:8px 15px;
        font-size:clamp(11px,.72vw,13px);
    }

    .bw-popular-routes__quote svg{
        width:18px;
        height:18px;
    }

    .bw-popular-routes__note{
        grid-template-columns:20px minmax(0,1fr);
        gap:7px;
        margin-top:10px;
        font-size:clamp(9px,.61vw,11px);
    }

    .bw-popular-routes__note-icon svg{
        width:17px;
        height:17px;
    }
}