:root{
    --gk-bg:#041426;
    --gk-bg2:#08213b;
    --gk-card:#0b2846;
    --gk-card2:#103554;
    --gk-line:rgba(104,165,220,.26);
    --gk-gold:#efbd59;
    --gk-gold2:#f6d783;
    --gk-text:#f7f9fc;
    --gk-muted:#9fb4c7;
    --gk-green:#2fc49f;
}

.gk319{
    width:min(1540px,calc(100% - 32px));
    margin:0 auto;
    color:var(--gk-text);
}

.gk319 *{
    box-sizing:border-box;
}

.gk319 a{
    text-decoration:none;
}

.gk319-hero{
    min-height:445px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:55px;
    margin:25px 0 18px;
    border:1px solid var(--gk-line);
    border-radius:26px;
    background:
        linear-gradient(
            90deg,
            rgba(3,17,32,.98),
            rgba(4,24,43,.72) 52%,
            rgba(4,24,43,.16)
        ),
        url('/assets/future-collection/v2/media/elia-orbit-2035.png')
        center/cover no-repeat;
}

.gk319-hero:after{
    content:"";
    position:absolute;
    width:165px;
    height:165px;
    border-radius:50%;
    top:72px;
    right:11%;
    background:
        radial-gradient(
            circle at 35% 30%,
            #49c2ef,
            #18549d 48%,
            #07182e
        );
    box-shadow:
        0 0 65px rgba(72,126,255,.46);
}

.gk319-hero-content{
    max-width:850px;
    position:relative;
    z-index:2;
}

.gk319-kicker{
    color:var(--gk-gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.gk319 h1{
    margin:15px 0 12px;
    font:700 clamp(44px,5.4vw,76px)/.98 Georgia,serif;
    letter-spacing:-.045em;
    color:#fff;
}

.gk319-hero p{
    max-width:720px;
    color:#c8d4df;
    font-size:16px;
    line-height:1.65;
}

.gk319-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:23px;
}

.gk319-btn{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 19px;
    border-radius:10px;
    border:1px solid var(--gk-line);
    background:#0c2c4a;
    color:#fff;
    font-weight:850;
    cursor:pointer;
}

.gk319-btn.gold{
    color:#071625;
    border-color:var(--gk-gold);
    background:
        linear-gradient(
            90deg,
            var(--gk-gold),
            var(--gk-gold2)
        );
}

.gk319-search{
    position:relative;
    z-index:3;
    margin:-66px 20px 32px;
    padding:18px;
    border:1px solid var(--gk-line);
    border-radius:20px;
    background:
        rgba(5,28,50,.96);
    box-shadow:
        0 24px 70px rgba(0,0,0,.23);
    backdrop-filter:blur(16px);
}

.gk319-search-tabs{
    display:flex;
    gap:8px;
    margin-bottom:13px;
}

.gk319-search-tab{
    color:#a8bed1;
    font-size:12px;
    font-weight:800;
}

.gk319-search-tab.active{
    color:var(--gk-gold);
}

.gk319-search-grid{
    display:grid;
    grid-template-columns:
        1.35fr
        1fr
        1fr
        .9fr
        .8fr
        auto;
    gap:9px;
}

.gk319-field{
    position:relative;
}

.gk319-field label{
    display:block;
    margin-bottom:5px;
    color:#7f9bb2;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}

.gk319-field input,
.gk319-field select{
    width:100%;
    min-height:51px;
    padding:0 13px;
    border:1px solid var(--gk-line);
    border-radius:10px;
    outline:none;
    background:#0a2b49;
    color:#fff;
}

.gk319-search-button{
    min-width:150px;
    min-height:51px;
    align-self:end;
    border:0;
    border-radius:10px;
    background:
        linear-gradient(
            90deg,
            #efbd59,
            #f5d57e
        );
    color:#061424;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
}

.gk319-filters{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:12px;
}

.gk319-filter{
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
    border:1px solid var(--gk-line);
    background:#092440;
    color:#b6c8d8;
    font-size:11px;
    cursor:pointer;
}

.gk319-filter.active{
    color:#061525;
    background:var(--gk-gold);
}

.gk319-section{
    padding:20px 0 50px;
}

.gk319-section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
    color:#10263d;
}

.gk319-section-head h2{
    margin:0;
    font:700 clamp(28px,3vw,42px)/1 Georgia,serif;
}

.gk319-count{
    color:#6f8294;
    font-size:13px;
}

.gk319-grid{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:15px;
}

.gk319-card{
    min-height:345px;
    position:relative;
    overflow:hidden;
    border-radius:17px;
    background:#06182b;
    color:#fff;
    border:1px solid rgba(67,120,170,.34);
    isolation:isolate;
    box-shadow:
        0 15px 40px rgba(5,27,48,.13);
}

.gk319-card-media,
.gk319-card-fallback{
    position:absolute;
    inset:0;
    z-index:-3;
}

.gk319-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s ease;
}

.gk319-card:hover img{
    transform:scale(1.05);
}

.gk319-card-fallback{
    background:
        radial-gradient(
            circle at 78% 16%,
            rgba(238,190,91,.26),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            #194b78,
            #06172a 65%
        );
}

.gk319-card:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(
            to top,
            rgba(2,12,22,.99),
            rgba(4,20,35,.6) 55%,
            rgba(4,20,35,.08)
        );
}

.gk319-card-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:18px;
}

.gk319-badge{
    display:inline-flex;
    min-height:25px;
    align-items:center;
    padding:0 8px;
    border-radius:999px;
    background:rgba(3,16,29,.7);
    border:1px solid rgba(255,255,255,.15);
    color:#f0c66c;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.gk319-card h3{
    margin:11px 0 6px;
    color:#fff;
    font:700 21px/1.08 Georgia,serif;
}

.gk319-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
    color:#b7c8d7;
    font-size:10px;
}

.gk319-card-bottom{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
}

.gk319-price small{
    display:block;
    color:#758da2;
    font-size:8px;
}

.gk319-price strong{
    color:#efc369;
    font-size:19px;
}

.gk319-arrow{
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
}

.gk319-empty{
    grid-column:1/-1;
    padding:45px;
    border:1px dashed #b7c4d0;
    border-radius:17px;
    text-align:center;
    color:#607589;
}

.gk319-hidden{
    display:none!important;
}

@media(max-width:1200px){

    .gk319-search-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .gk319-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}

@media(max-width:850px){

    .gk319-hero{
        min-height:390px;
        padding:28px 20px;
    }

    .gk319-hero:after{
        width:105px;
        height:105px;
        right:18px;
        top:22px;
    }

    .gk319-search{
        margin:-42px 7px 25px;
    }

    .gk319-search-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gk319-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:560px){

    .gk319{
        width:calc(100% - 18px);
    }

    .gk319 h1{
        font-size:42px;
    }

    .gk319-search{
        padding:12px;
    }

    .gk319-search-grid{
        grid-template-columns:1fr;
    }

    .gk319-search-button{
        width:100%;
    }

    .gk319-grid{
        grid-template-columns:1fr;
    }

    .gk319-card{
        min-height:330px;
    }
}
