:root {
    --vorik-navy:#082754;
    --vorik-navy-deep:#041c3f;
    --vorik-blue:#2878ed;
    --vorik-yellow:#ffca05;
    --vorik-green:#12a866;

    --vorik-text:#0b2854;
    --vorik-muted:#6e83a4;
    --vorik-line:#dce5f1;
    --vorik-surface:#ffffff;
    --vorik-background:#f5f8fc;

    --vorik-radius-xl:28px;
    --vorik-radius-lg:22px;
    --vorik-radius-md:16px;

    --vorik-shadow:
        0 16px 45px rgba(10,39,82,.08);
}


/* ==========================================================
   BASE
   ========================================================== */

* {
    box-sizing:border-box;
}

html {
    background:var(--vorik-background);
}

body.vorik-vehicle-detail-page {
    margin:0;
    color:var(--vorik-text);
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(40,120,237,.07),
            transparent 28rem
        ),
        var(--vorik-background);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color:inherit;
}


/* ==========================================================
   SHELL
   ========================================================== */

.vorik-detail-shell {
    width:min(1240px, calc(100% - 48px));
    margin:0 auto;
    padding:28px 0 80px;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.vorik-detail-navigation {
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
}

.vorik-detail-back {
    display:inline-flex;
    align-items:center;
    gap:11px;

    font-size:15px;
    font-weight:750;
    text-decoration:none;
}

.vorik-detail-back > span:first-child {
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border:1px solid var(--vorik-line);
    border-radius:50%;
    background:#fff;

    font-size:22px;

    box-shadow:
        0 7px 20px rgba(7,36,76,.06);
}

.vorik-detail-brand {
    display:flex;
    align-items:center;
    gap:10px;

    font-size:18px;
    letter-spacing:.12em;
}

.vorik-detail-brand-mark {
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    background:var(--vorik-yellow);
    border-radius:12px;

    font-weight:900;
}


/* ==========================================================
   LAYOUT
   ========================================================== */

.vorik-detail-layout {
    display:grid;
    grid-template-columns:
        minmax(0, 1fr)
        370px;

    gap:34px;
    align-items:start;
}


/* ==========================================================
   GALLERY
   ========================================================== */

.vorik-detail-gallery {
    margin-bottom:30px;
}

.vorik-detail-hero {
    position:relative;

    height:520px;

    overflow:hidden;

    background:#e8eef6;
    border-radius:var(--vorik-radius-xl);

    box-shadow:var(--vorik-shadow);
}

.vorik-detail-hero-image {
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .35s ease,
        opacity .2s ease;
}

.vorik-detail-hero:hover
.vorik-detail-hero-image {
    transform:scale(1.015);
}


/* Availability */

.vorik-detail-availability {
    position:absolute;
    top:20px;
    left:20px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 15px;

    color:#087544;
    background:rgba(255,255,255,.94);

    border-radius:999px;

    font-size:14px;
    font-weight:800;

    box-shadow:
        0 7px 20px rgba(0,0,0,.10);

    backdrop-filter:blur(12px);
}

.vorik-detail-availability span {
    width:9px;
    height:9px;

    background:var(--vorik-green);
    border-radius:50%;
}


/* Favorite */

.vorik-detail-favorite {
    position:absolute;
    top:20px;
    right:20px;

    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;

    color:#fff;
    background:rgba(5,29,61,.54);

    font-size:26px;

    cursor:pointer;

    backdrop-filter:blur(10px);
}


/* Count */

.vorik-detail-photo-count {
    position:absolute;
    left:20px;
    bottom:20px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:9px 13px;

    border-radius:999px;

    color:#fff;
    background:rgba(5,25,52,.72);

    font-size:14px;
    font-weight:700;

    backdrop-filter:blur(10px);
}


/* Thumbnails */

.vorik-detail-thumbnails {
    display:flex;
    gap:12px;

    margin-top:14px;
    padding:2px;

    overflow-x:auto;

    scrollbar-width:none;
}

.vorik-detail-thumbnails::-webkit-scrollbar {
    display:none;
}

.vorik-detail-thumbnail {
    flex:0 0 116px;

    height:78px;

    padding:0;

    overflow:hidden;

    border:3px solid transparent;
    border-radius:14px;

    background:#fff;

    cursor:pointer;
}

.vorik-detail-thumbnail.is-active {
    border-color:var(--vorik-yellow);
}

.vorik-detail-thumbnail img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


/* ==========================================================
   IDENTITY
   ========================================================== */

.vorik-detail-identity {
    padding:
        8px
        4px
        30px;
}

.vorik-detail-title-row {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:25px;
}

.vorik-detail-category {
    margin-bottom:7px;

    color:var(--vorik-blue);

    font-size:13px;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.vorik-detail-title-row h1 {
    margin:0;

    color:var(--vorik-navy);

    font-size:clamp(32px, 4vw, 46px);
    line-height:1.08;
    letter-spacing:-.035em;
}

.vorik-detail-model {
    margin:10px 0 0;

    color:var(--vorik-muted);

    font-size:17px;
}

.vorik-detail-verified {
    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:7px;

    padding:9px 13px;

    border-radius:999px;

    color:#1f65ca;
    background:#edf5ff;

    font-size:14px;
    font-weight:800;
}

.vorik-detail-verified span {
    width:23px;
    height:23px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#fff;
    background:var(--vorik-blue);

    font-size:12px;
}


/* ==========================================================
   ESSENTIALS
   ========================================================== */

.vorik-detail-essentials {
    display:grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:10px;

    margin-top:28px;
}

.vorik-detail-essential {
    min-height:78px;

    display:flex;
    align-items:center;
    gap:11px;

    padding:14px;

    border:1px solid var(--vorik-line);
    border-radius:16px;

    background:#fff;
}

.vorik-detail-essential-icon {
    width:34px;
    height:34px;

    flex:0 0 34px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:var(--vorik-blue);
    background:#edf5ff;

    font-size:15px;
}

.vorik-detail-essential strong,
.vorik-detail-essential small {
    display:block;
}

.vorik-detail-essential strong {
    font-size:14px;
}

.vorik-detail-essential small {
    margin-top:3px;

    color:var(--vorik-muted);

    font-size:12px;
}


/* Use cases */

.vorik-detail-use-cases {
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:17px;
}

.vorik-detail-use-cases span {
    padding:8px 13px;

    border-radius:999px;

    color:#496381;
    background:#edf2f8;

    font-size:13px;
    font-weight:700;
}


/* ==========================================================
   CONTENT SECTIONS
   ========================================================== */

.vorik-detail-section {
    margin-top:20px;
    padding:28px;

    border:1px solid var(--vorik-line);
    border-radius:var(--vorik-radius-lg);

    background:#fff;

    box-shadow:
        0 8px 30px rgba(7,36,76,.035);
}

.vorik-detail-section-heading {
    display:flex;
    align-items:center;
    gap:11px;

    margin-bottom:18px;
}

.vorik-detail-section-heading h2 {
    margin:0;

    font-size:20px;
    letter-spacing:-.015em;
}

.vorik-detail-section-mark {
    width:5px;
    height:25px;

    border-radius:999px;

    background:var(--vorik-yellow);
}

.vorik-detail-description {
    margin:0;

    color:#536b89;

    font-size:16px;
    line-height:1.75;
}


/* ==========================================================
   TRUST
   ========================================================== */

.vorik-detail-trust-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
}

.vorik-detail-trust-grid article {
    display:flex;
    gap:12px;

    padding:16px;

    border-radius:16px;

    background:#f7f9fc;
}

.vorik-detail-trust-icon {
    width:36px;
    height:36px;

    flex:0 0 36px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#145fc6;
    background:#e9f3ff;

    font-size:13px;
    font-weight:900;
}

.vorik-detail-trust-grid strong {
    display:block;

    font-size:14px;
}

.vorik-detail-trust-grid p {
    margin:5px 0 0;

    color:var(--vorik-muted);

    font-size:12px;
    line-height:1.45;
}


/* ==========================================================
   BOOKING CARD
   ========================================================== */

.vorik-detail-booking-column {
    position:relative;
}

.vorik-detail-booking-card {
    position:sticky;
    top:24px;

    padding:27px;

    border:1px solid #dce5f0;
    border-radius:26px;

    background:#fff;

    box-shadow:
        0 18px 50px rgba(7,36,76,.11);
}

.vorik-detail-booking-eyebrow {
    display:block;

    margin-bottom:13px;

    color:var(--vorik-blue);

    font-size:13px;
    font-weight:850;
    letter-spacing:.11em;
    text-transform:uppercase;
}


/* Price */

.vorik-detail-price small {
    display:block;

    margin-bottom:5px;

    color:var(--vorik-muted);

    font-size:13px;
}

.vorik-detail-price > div {
    display:flex;
    align-items:baseline;
    gap:8px;
}

.vorik-detail-price strong {
    color:var(--vorik-navy);

    font-size:35px;
    line-height:1;
    letter-spacing:-.035em;
}

.vorik-detail-price span {
    color:#506987;

    font-size:15px;
    font-weight:700;
}

.vorik-detail-price p {
    margin:7px 0 0;

    color:var(--vorik-muted);

    font-size:14px;
}

.vorik-detail-booking-divider {
    height:1px;

    margin:24px 0;

    background:var(--vorik-line);
}


/* Booking options */

.vorik-detail-booking-options {
    display:grid;
    gap:16px;
}

.vorik-detail-booking-options > div {
    display:flex;
    gap:11px;
}

.vorik-detail-booking-options > div > span {
    width:24px;
    height:24px;

    flex:0 0 24px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#087544;
    background:#e7f8ef;

    font-size:12px;
    font-weight:900;
}

.vorik-detail-booking-options p {
    margin:0;
}

.vorik-detail-booking-options strong,
.vorik-detail-booking-options small {
    display:block;
}

.vorik-detail-booking-options strong {
    font-size:14px;
}

.vorik-detail-booking-options small {
    margin-top:3px;

    color:var(--vorik-muted);

    font-size:12px;
}


/* CTA */

.vorik-detail-book-button {
    min-height:58px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:25px;
    padding:0 20px;

    border-radius:16px;

    color:var(--vorik-navy-deep);
    background:var(--vorik-yellow);

    text-decoration:none;

    font-size:16px;
    font-weight:850;

    box-shadow:
        0 10px 25px rgba(255,202,5,.25);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.vorik-detail-book-button:hover {
    transform:translateY(-2px);

    box-shadow:
        0 14px 30px rgba(255,202,5,.32);
}

.vorik-detail-book-button > span:last-child {
    font-size:24px;
}

.vorik-detail-booking-note {
    margin:13px 0 0;

    color:var(--vorik-muted);

    text-align:center;

    font-size:12px;
    line-height:1.5;
}


/* ==========================================================
   MOBILE BOOKING
   ========================================================== */

.vorik-detail-mobile-booking {
    display:none;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:980px) {

    .vorik-detail-layout {
        grid-template-columns:1fr;
    }

    .vorik-detail-booking-column {
        display:none;
    }

    .vorik-detail-essentials {
        grid-template-columns:
            repeat(2,1fr);
    }

    .vorik-detail-mobile-booking {
        position:fixed;

        z-index:100;

        left:0;
        right:0;
        bottom:0;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:15px;

        padding:
            12px
            max(18px, env(safe-area-inset-right))
            calc(
                12px
                + env(safe-area-inset-bottom)
            )
            max(18px, env(safe-area-inset-left));

        border-top:1px solid var(--vorik-line);

        background:rgba(255,255,255,.96);

        box-shadow:
            0 -10px 30px rgba(5,31,68,.09);

        backdrop-filter:blur(15px);
    }

    .vorik-detail-mobile-booking small {
        display:block;

        color:var(--vorik-muted);

        font-size:11px;
    }

    .vorik-detail-mobile-booking strong {
        display:block;

        margin-top:2px;

        font-size:19px;
    }

    .vorik-detail-mobile-booking strong span {
        font-size:11px;
    }

    .vorik-detail-mobile-booking > a {
        min-height:50px;

        display:flex;
        align-items:center;
        gap:20px;

        padding:0 20px;

        border-radius:14px;

        color:var(--vorik-navy);
        background:var(--vorik-yellow);

        text-decoration:none;

        font-size:15px;
        font-weight:850;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:640px) {

    .vorik-detail-shell {
        width:100%;
        padding:
            12px
            14px
            120px;
    }

    .vorik-detail-navigation {
        min-height:50px;
        margin-bottom:12px;
    }

    .vorik-detail-back {
        font-size:14px;
    }

    .vorik-detail-back > span:first-child {
        width:40px;
        height:40px;
    }

    .vorik-detail-back > span:last-child {
        display:none;
    }

    .vorik-detail-brand {
        font-size:15px;
    }

    .vorik-detail-brand-mark {
        width:34px;
        height:34px;
    }


    /* Gallery */

    .vorik-detail-hero {
        height:
            clamp(
                280px,
                76vw,
                390px
            );

        border-radius:22px;
    }

    .vorik-detail-availability {
        top:13px;
        left:13px;

        padding:8px 12px;

        font-size:13px;
    }

    .vorik-detail-favorite {
        top:13px;
        right:13px;

        width:43px;
        height:43px;

        font-size:23px;
    }

    .vorik-detail-photo-count {
        left:13px;
        bottom:13px;
    }

    .vorik-detail-thumbnails {
        gap:8px;
        margin-top:9px;
    }

    .vorik-detail-thumbnail {
        flex-basis:88px;
        height:62px;
        border-radius:11px;
    }


    /* Identity */

    .vorik-detail-identity {
        padding:
            15px
            3px
            18px;
    }

    .vorik-detail-title-row {
        gap:12px;
    }

    .vorik-detail-title-row h1 {
        font-size:28px;
    }

    .vorik-detail-model {
        font-size:15px;
    }

    .vorik-detail-verified {
        padding:7px 9px;

        font-size:12px;
    }

    .vorik-detail-verified > span {
        width:20px;
        height:20px;
    }

    .vorik-detail-essentials {
        gap:8px;
        margin-top:20px;
    }

    .vorik-detail-essential {
        min-height:68px;
        padding:11px;
    }


    /* Sections */

    .vorik-detail-section {
        margin-top:12px;
        padding:20px;

        border-radius:19px;
    }

    .vorik-detail-section-heading h2 {
        font-size:17px;
    }

    .vorik-detail-description {
        font-size:15px;
    }

    .vorik-detail-trust-grid {
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width:390px) {

    .vorik-detail-title-row {
        display:block;
    }

    .vorik-detail-verified {
        width:max-content;
        margin-top:12px;
    }

    .vorik-detail-essentials {
        grid-template-columns:1fr 1fr;
    }

}

/* ============================================================
   VORIK VEHICLE DETAIL
   MOBILE WIDTH SAFETY
   ============================================================ */

html,
body.vorik-vehicle-detail-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


.vorik-detail-shell,
.vorik-detail-layout,
.vorik-detail-main,
.vorik-detail-gallery,
.vorik-detail-identity,
.vorik-detail-section,
.vorik-detail-booking-column {
    min-width: 0;
    max-width: 100%;
}


.vorik-detail-hero,
.vorik-detail-hero-image {
    max-width: 100%;
}


.vorik-detail-title-row,
.vorik-detail-title-row > div {
    min-width: 0;
}


.vorik-detail-title-row h1,
.vorik-detail-model,
.vorik-detail-description {
    max-width: 100%;

    overflow-wrap: anywhere;
    word-break: normal;
}


.vorik-detail-essentials,
.vorik-detail-essential,
.vorik-detail-essential > div {
    min-width: 0;
}


.vorik-detail-trust-grid,
.vorik-detail-trust-grid article,
.vorik-detail-trust-grid article > div {
    min-width: 0;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

    .vorik-detail-shell {
        width: 100%;
        max-width: 100%;

        padding:
            12px
            14px
            120px;

        margin: 0;
    }


    .vorik-detail-layout {
        width: 100%;
        max-width: 100%;

        grid-template-columns:
            minmax(0, 1fr);
    }


    /*
     * Prevent title + verified badge
     * from forcing the viewport wider.
     */
    .vorik-detail-title-row {
        width: 100%;

        align-items: flex-start;
    }


    .vorik-detail-title-row > div:first-child {
        flex:
            1 1 auto;

        min-width: 0;
    }


    .vorik-detail-verified {
        flex:
            0 0 auto;
    }


    /*
     * Two equal columns that are actually
     * allowed to shrink.
     */
    .vorik-detail-essentials {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    /*
     * Gallery thumbnails may scroll internally,
     * but must not enlarge the document.
     */
    .vorik-detail-thumbnails {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;
    }


    /*
     * Bottom booking bar must remain inside
     * the physical viewport.
     */
    .vorik-detail-mobile-booking {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }


    .vorik-detail-mobile-booking > div {
        min-width: 0;

        flex:
            1 1 auto;
    }


    .vorik-detail-mobile-booking > a {
        flex:
            0 0 auto;

        min-width: 0;
    }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 390px) {

    .vorik-detail-title-row {
        display: block;
    }


    .vorik-detail-verified {
        width: max-content;
        max-width: 100%;

        margin-top: 12px;
    }


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

}