/* =========================================================
   HEALTHYVAPE HOMEPAGE V3
   BRAND:
   Electric Purple #6C4CFF
   Deep Navy       #111633
   Soft Lavender   #F5F3FF
   White           #FFFFFF
========================================================= */

:root{
    --hv-purple:#6c4cff;
    --hv-purple-dark:#5031df;
    --hv-navy:#111633;
    --hv-text:#16182a;
    --hv-muted:#6f7080;
    --hv-line:#e9e8ef;
    --hv-soft:#f6f5fb;
    --hv-white:#ffffff;

    --hv-radius-xl:32px;
    --hv-radius-lg:24px;
    --hv-radius-md:18px;

    --hv-shadow:
        0 20px 60px rgba(25,22,62,.09);
}


/* =========================================
   RESET / ASTRA HOMEPAGE
========================================= */

body.home{
    background:#fff;
    color:var(--hv-text);
}

body.home #content{
    padding:0 !important;
}

body.home #content > .ast-container{
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    display:block !important;
}

body.home .site-main{
    width:100%;
}

.hv3-home,
.hv3-home *{
    box-sizing:border-box;
}

.hv3-home{
    width:100%;
    overflow:hidden;
}

.hv3-shell{
    width:min(1380px, calc(100% - 64px));
    margin:0 auto;
}

.hv3-visually-hidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}


/* =========================================
   GLOBAL TYPE
========================================= */

.hv3-home h2,
.hv3-home h3,
.hv3-home p{
    margin-top:0;
}

.hv3-home h2{
    margin-bottom:0;
    font-size:clamp(40px,4.2vw,68px);
    line-height:.97;
    letter-spacing:-.055em;
    font-weight:800;
    color:var(--hv-navy);
}

.hv3-home h2 span{
    color:var(--hv-purple);
}

.hv3-kicker{
    display:block;
    margin-bottom:18px;

    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.15em;
    color:var(--hv-purple);
}


/* =========================================
   BUTTONS
========================================= */

.hv3-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:52px;
    padding:0 24px;

    border-radius:999px;

    font-size:14px;
    line-height:1;
    font-weight:700;

    text-decoration:none !important;

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

.hv3-btn:hover{
    transform:translateY(-2px);
}

.hv3-btn--primary{
    background:var(--hv-purple);
    color:#fff !important;
    box-shadow:
        0 12px 30px rgba(108,76,255,.28);
}

.hv3-btn--primary:hover{
    background:var(--hv-purple-dark);
}

.hv3-btn--glass{
    background:rgba(255,255,255,.92);
    color:var(--hv-navy) !important;
    border:1px solid rgba(255,255,255,.8);
    backdrop-filter:blur(14px);
}

.hv3-btn--dark{
    background:var(--hv-navy);
    color:#fff !important;
}


/* =========================================
   HERO
========================================= */

.hv3-hero{
    position:relative;
    width:100%;
    background:#eef4ff;
}

.hv3-hero__picture{
    display:block;
    width:100%;
}

.hv3-hero__picture img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:cover;
}

.hv3-hero__actions{
    position:absolute;
    left:max(5vw,40px);
    bottom:42px;

    display:flex;
    gap:12px;
    flex-wrap:wrap;
}


/* =========================================
   BRAND STRIP
========================================= */

.hv3-brand-strip{
    padding:68px 0;
    background:var(--hv-navy);
}

.hv3-brand-strip__inner{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:80px;
    align-items:center;
}

.hv3-brand-strip .hv3-kicker{
    color:#a99bff;
}

.hv3-brand-strip h2{
    color:#fff;
    font-size:clamp(40px,4vw,62px);
}

.hv3-brand-strip h2 span{
    color:#8f78ff;
}

.hv3-brand-strip__facts{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.hv3-fact{
    min-height:132px;
    padding:24px;

    border-radius:22px;

    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
}

.hv3-fact strong{
    display:block;
    margin-bottom:22px;

    color:#fff;
    font-size:30px;
    line-height:1;
    letter-spacing:-.04em;
}

.hv3-fact span{
    color:#c7c8d4;
    font-size:13px;
    line-height:1.4;
}


/* =========================================
   FLAVOR SECTION
========================================= */

.hv3-flavors{
    padding:108px 0 118px;
    background:#fff;
}

.hv3-section-head{
    display:grid;
    grid-template-columns:1.1fr .6fr;
    gap:80px;
    align-items:end;

    margin-bottom:50px;
}

.hv3-section-head p{
    max-width:420px;
    margin-bottom:4px;

    font-size:16px;
    line-height:1.7;
    color:var(--hv-muted);
}


/* =========================================
   FLAVOR GRID
========================================= */

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

.hv3-flavor-card{
    position:relative;
    overflow:hidden;

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

    background:#fff;
    box-shadow:
        0 8px 30px rgba(25,22,62,.045);

    color:var(--hv-text) !important;
    text-decoration:none !important;

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

.hv3-flavor-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--hv-shadow);
}

.hv3-flavor-card__media{
    position:relative;
    overflow:hidden;

    aspect-ratio:1 / 1;

    background:#f5f6f8;
}

.hv3-flavor-card__img{
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    display:block;

    transition:transform .45s ease;
}

.hv3-flavor-card:hover .hv3-flavor-card__img{
    transform:scale(1.035);
}

.hv3-flavor-card__number{
    position:absolute;
    top:16px;
    left:16px;

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

    width:38px;
    height:38px;

    border-radius:50%;

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

    font-size:11px;
    font-weight:800;
    color:var(--hv-navy);

    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.hv3-flavor-card__body{
    min-height:112px;
    padding:20px 20px 22px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}

.hv3-flavor-card__meta{
    display:block;
    margin-bottom:7px;

    font-size:10px;
    line-height:1;
    letter-spacing:.12em;
    font-weight:800;
    text-transform:uppercase;
    color:var(--hv-muted);
}

.hv3-flavor-card h3{
    margin:0;

    font-size:21px;
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:750;

    color:var(--hv-navy);
}

.hv3-flavor-card__arrow{
    flex:0 0 auto;

    width:38px;
    height:38px;

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

    border-radius:50%;

    background:var(--hv-soft);
    color:var(--hv-purple);

    font-size:20px;
}


/* =========================================
   CARD ACCENT BORDERS
========================================= */

.hv3-flavor-card--blue{
    --accent:#4e8cff;
}

.hv3-flavor-card--orange{
    --accent:#ff962f;
}

.hv3-flavor-card--watermelon{
    --accent:#ff5578;
}

.hv3-flavor-card--rose{
    --accent:#e96391;
}

.hv3-flavor-card--cola{
    --accent:#7b5236;
}

.hv3-flavor-card--vanilla{
    --accent:#d6aa6b;
}

.hv3-flavor-card--mint{
    --accent:#52b886;
}

.hv3-flavor-card--mullein{
    --accent:#78ad69;
}

.hv3-flavor-card::after{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    bottom:0;

    height:3px;

    border-radius:3px 3px 0 0;
    background:var(--accent);
    opacity:.8;
}

.hv3-shop-all{
    display:flex;
    justify-content:center;
    margin-top:42px;
}


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

@media (max-width:1024px){

    .hv3-shell{
        width:min(100% - 40px, 1200px);
    }

    .hv3-brand-strip__inner{
        grid-template-columns:1fr;
        gap:44px;
    }

    .hv3-section-head{
        grid-template-columns:1fr;
        gap:24px;
    }

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

}


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

@media (max-width:767px){

    .hv3-shell{
        width:calc(100% - 32px);
    }

    .hv3-home h2{
        font-size:40px;
    }


    /* HERO */

    .hv3-hero__picture img{
        aspect-ratio:4 / 5;
        object-fit:cover;
    }

    .hv3-hero__actions{
        left:16px;
        right:16px;
        bottom:18px;

        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .hv3-btn{
        min-height:48px;
        padding:0 12px;
        font-size:12px;
    }


    /* BRAND */

    .hv3-brand-strip{
        padding:56px 0;
    }

    .hv3-brand-strip__facts{
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .hv3-fact{
        min-height:108px;
        padding:16px 12px;
        border-radius:16px;
    }

    .hv3-fact strong{
        margin-bottom:16px;
        font-size:24px;
    }

    .hv3-fact span{
        font-size:10px;
    }


    /* FLAVORS */

    .hv3-flavors{
        padding:72px 0 80px;
    }

    .hv3-section-head{
        margin-bottom:32px;
    }

    .hv3-section-head p{
        font-size:14px;
    }

    .hv3-flavor-grid{
        display:flex;
        gap:12px;

        margin-left:-16px;
        margin-right:-16px;

        padding-left:16px;
        padding-right:16px;
        padding-bottom:14px;

        overflow-x:auto;
        scroll-snap-type:x mandatory;

        scrollbar-width:none;
    }

    .hv3-flavor-grid::-webkit-scrollbar{
        display:none;
    }

    .hv3-flavor-card{
        flex:0 0 78vw;
        max-width:320px;

        scroll-snap-align:start;
    }

    .hv3-flavor-card__body{
        min-height:98px;
    }

    .hv3-next{
        padding:72px 0 78px;
    }

}


/* ===== HV3 LIFESTYLE START ===== */

.hv3-life{
    padding:110px 0 120px;
    background:#f7f7fb;
}

.hv3-life__head{
    margin-bottom:48px;
}

.hv3-life__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}


/* CARD */

.hv3-life-card{
    overflow:hidden;

    border-radius:30px;
    background:#fff;

    box-shadow:
        0 18px 55px rgba(20,18,50,.07);
}

.hv3-life-card__media{
    position:relative;
    overflow:hidden;

    aspect-ratio:1 / 1;
}

.hv3-life-card__img{
    display:block;

    width:100% !important;
    height:100% !important;

    object-fit:cover;

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1);
}

.hv3-life-card:hover .hv3-life-card__img{
    transform:scale(1.025);
}


/* CONTENT */

.hv3-life-card__content{
    padding:30px 32px 34px;
}

.hv3-life-card__eyebrow{
    display:block;

    margin-bottom:14px;

    font-size:10px;
    line-height:1;
    font-weight:850;
    letter-spacing:.15em;
}

.hv3-life-card h3{
    margin:0;

    max-width:470px;

    font-size:clamp(31px,3vw,47px);
    line-height:.98;

    letter-spacing:-.05em;
    font-weight:800;
}

.hv3-life-card h3 span{
    display:block;
}

.hv3-life-card p{
    max-width:470px;

    margin:20px 0 26px;

    font-size:14px;
    line-height:1.7;
}

.hv3-life-card__link{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding-bottom:5px;

    font-size:13px;
    line-height:1;
    font-weight:800;

    text-decoration:none !important;

    border-bottom:1px solid currentColor;
}

.hv3-life-card__link span{
    font-size:18px;
}


/* DAY */

.hv3-life-card--day{
    background:#edf6ff;
}

.hv3-life-card--day .hv3-life-card__eyebrow{
    color:#4272dc;
}

.hv3-life-card--day h3{
    color:#122250;
}

.hv3-life-card--day h3 span{
    color:#4b7ee8;
}

.hv3-life-card--day p{
    color:#5c6882;
}

.hv3-life-card--day .hv3-life-card__link{
    color:#234fae;
}


/* NIGHT */

.hv3-life-card--night{
    background:#12172c;
}

.hv3-life-card--night .hv3-life-card__eyebrow{
    color:#c6d64a;
}

.hv3-life-card--night h3{
    color:#fff;
}

.hv3-life-card--night h3 span{
    color:#d4e64e;
}

.hv3-life-card--night p{
    color:#c4c7d3;
}

.hv3-life-card--night .hv3-life-card__link{
    color:#fff;
}


/* TABLET */

@media (max-width:1024px){

    .hv3-life{
        padding:86px 0 96px;
    }

}


/* MOBILE */

@media (max-width:767px){

    .hv3-life{
        padding:70px 0 76px;
    }

    .hv3-life__grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .hv3-life-card{
        border-radius:24px;
    }

    .hv3-life-card__media{
        aspect-ratio:1 / 1;
    }

    .hv3-life-card__content{
        padding:24px 22px 28px;
    }

    .hv3-life-card h3{
        font-size:34px;
    }

    .hv3-life-card p{
        font-size:13px;
    }

}

/* ===== HV3 LIFESTYLE END ===== */


/* ===== HV3 DISCOVERY START ===== */


/* =========================================================
   CATEGORY DISCOVERY
========================================================= */

.hv3-categories{
    padding:110px 0 120px;
    background:#fff;
}

.hv3-category-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.hv3-category{
    overflow:hidden;

    border-radius:28px;
    border:1px solid #e8e8ef;

    background:#fff;

    text-decoration:none !important;
    color:#111633 !important;

    box-shadow:
        0 12px 38px rgba(22,20,55,.055);

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

.hv3-category:hover{
    transform:translateY(-5px);

    box-shadow:
        0 24px 60px rgba(22,20,55,.11);
}


/* IMAGE */

.hv3-category__media{
    overflow:hidden;
    aspect-ratio:1 / 1;
}

.hv3-category__img{
    display:block;

    width:100% !important;
    height:100% !important;

    object-fit:cover;

    transition:transform .45s ease;
}

.hv3-category:hover .hv3-category__img{
    transform:scale(1.025);
}


/* BODY */

.hv3-category__body{
    position:relative;

    min-height:250px;
    padding:25px 26px 28px;

    display:flex;
    flex-direction:column;
}

.hv3-category__index{
    margin-bottom:34px;

    font-size:11px;
    font-weight:850;
    letter-spacing:.08em;
}

.hv3-category__eyebrow{
    display:block;

    margin-bottom:9px;

    font-size:10px;
    line-height:1;
    font-weight:850;
    letter-spacing:.14em;
}

.hv3-category h3{
    margin:0;

    font-size:34px;
    line-height:.98;

    letter-spacing:-.045em;
    font-weight:800;

    color:#111633;
}

.hv3-category p{
    max-width:300px;

    margin:16px 0 0;

    color:#6e7080;

    font-size:13px;
    line-height:1.65;
}

.hv3-category__arrow{
    position:absolute;
    right:24px;
    bottom:26px;

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

    width:42px;
    height:42px;

    border-radius:50%;

    background:#fff;

    font-size:20px;

    box-shadow:
        0 7px 20px rgba(25,20,65,.08);
}


/* ACCENTS */

.hv3-category--blue .hv3-category__body{
    background:#edf5ff;
}

.hv3-category--blue .hv3-category__index,
.hv3-category--blue .hv3-category__eyebrow,
.hv3-category--blue .hv3-category__arrow{
    color:#3775e9;
}


.hv3-category--orange .hv3-category__body{
    background:#fff4e7;
}

.hv3-category--orange .hv3-category__index,
.hv3-category--orange .hv3-category__eyebrow,
.hv3-category--orange .hv3-category__arrow{
    color:#e67721;
}


.hv3-category--green .hv3-category__body{
    background:#eef7ed;
}

.hv3-category--green .hv3-category__index,
.hv3-category--green .hv3-category__eyebrow,
.hv3-category--green .hv3-category__arrow{
    color:#50844e;
}



/* =========================================================
   BUYING GUIDE
========================================================= */

.hv3-guide{
    padding:120px 0;

    background:#111633;
}

.hv3-guide__grid{
    display:grid;
    grid-template-columns:.92fr 1.08fr;

    gap:82px;
    align-items:center;
}


/* IMAGE */

.hv3-guide__media{
    overflow:hidden;

    border-radius:32px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.28);
}

.hv3-guide__img{
    display:block;

    width:100% !important;
    height:auto !important;

    aspect-ratio:1 / 1;

    object-fit:cover;
}


/* CONTENT */

.hv3-guide__content .hv3-kicker{
    color:#a997ff;
}

.hv3-guide__content h2{
    color:#fff;

    max-width:650px;
}

.hv3-guide__content h2 span{
    color:#8e76ff;
}

.hv3-guide__lead{
    max-width:610px;

    margin:28px 0 38px;

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

    color:#c5c7d4;
}


/* POINTS */

.hv3-guide__points{
    border-top:
        1px solid rgba(255,255,255,.12);
}

.hv3-guide-point{
    display:grid;

    grid-template-columns:48px 1fr;

    gap:16px;

    padding:20px 0;

    border-bottom:
        1px solid rgba(255,255,255,.12);
}

.hv3-guide-point > span{
    padding-top:4px;

    font-size:11px;
    font-weight:850;
    letter-spacing:.08em;

    color:#8e76ff;
}

.hv3-guide-point strong{
    display:block;

    margin-bottom:6px;

    color:#fff;

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

.hv3-guide-point p{
    max-width:520px;

    margin:0;

    font-size:13px;
    line-height:1.65;

    color:#999cab;
}


/* ACTIONS */

.hv3-guide__actions{
    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:22px;

    margin-top:34px;
}

.hv3-guide__text-link{
    color:#fff !important;

    font-size:13px;
    font-weight:750;

    text-decoration:none !important;

    border-bottom:
        1px solid rgba(255,255,255,.4);

    padding-bottom:4px;
}

.hv3-guide__note{
    max-width:630px;

    margin:28px 0 0;

    color:#777b8f;

    font-size:11px;
    line-height:1.6;
}


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

@media(max-width:1024px){

    .hv3-categories{
        padding:88px 0 96px;
    }

    .hv3-category-grid{
        gap:14px;
    }

    .hv3-category h3{
        font-size:29px;
    }

    .hv3-guide{
        padding:90px 0;
    }

    .hv3-guide__grid{
        gap:50px;
    }

}


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

@media(max-width:767px){

    .hv3-categories{
        padding:72px 0 78px;
    }


    /* Category cards */

    .hv3-category-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .hv3-category{
        display:grid;

        grid-template-columns:42% 58%;

        border-radius:22px;
    }

    .hv3-category__media{
        aspect-ratio:auto;
        min-height:240px;
    }

    .hv3-category__body{
        min-height:240px;

        padding:20px 18px 22px;
    }

    .hv3-category__index{
        margin-bottom:26px;
    }

    .hv3-category h3{
        font-size:27px;
    }

    .hv3-category p{
        padding-right:8px;

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

    .hv3-category__arrow{
        right:16px;
        bottom:18px;

        width:36px;
        height:36px;
    }


    /* Guide */

    .hv3-guide{
        padding:72px 0 78px;
    }

    .hv3-guide__grid{
        grid-template-columns:1fr;

        gap:42px;
    }

    .hv3-guide__media{
        border-radius:24px;
    }

    .hv3-guide__lead{
        font-size:14px;
    }

    .hv3-guide-point{
        grid-template-columns:38px 1fr;

        padding:17px 0;
    }

    .hv3-guide__actions{
        align-items:flex-start;
        flex-direction:column;

        gap:18px;
    }

}

/* ===== HV3 DISCOVERY END ===== */


/* ===== HV3 HOME FINISH START ===== */


/* =========================================================
   HIDE ASTRA DEFAULT FOOTER ON HOMEPAGE ONLY
========================================================= */

body.home .site-footer,
body.home footer#colophon{
    display:none !important;
}


/* =========================================================
   FINAL CTA
========================================================= */

.hv3-final-cta{
    padding:110px 0;
    background:#fff;
}

.hv3-final-cta__card{
    position:relative;
    overflow:hidden;

    min-height:560px;

    display:grid;
    grid-template-columns:1.05fr .95fr;

    border-radius:34px;

    background:#171735;

    box-shadow:
        0 30px 80px rgba(20,18,52,.14);
}


/* IMAGE */

.hv3-final-cta__media{
    position:relative;
    overflow:hidden;
}

.hv3-final-cta__img{
    display:block;

    width:100% !important;
    height:100% !important;

    object-fit:cover;
}


/* CONTENT */

.hv3-final-cta__content{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:64px 70px;
}

.hv3-final-cta__kicker{
    display:block;

    margin-bottom:22px;

    color:#9f8cff;

    font-size:11px;
    line-height:1;
    font-weight:850;
    letter-spacing:.16em;
}

.hv3-final-cta h2{
    margin:0;

    color:#fff;

    font-size:clamp(42px,4.5vw,68px);
    line-height:.95;
}

.hv3-final-cta h2 span{
    color:#8e76ff;
}

.hv3-final-cta p{
    max-width:480px;

    margin:28px 0 0;

    color:#c8cad6;

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


/* CTA ACTIONS */

.hv3-final-cta__actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:24px;

    margin-top:36px;
}

.hv3-final-cta__link{
    color:#fff !important;

    font-size:13px;
    font-weight:750;

    text-decoration:none !important;

    padding-bottom:4px;

    border-bottom:
        1px solid rgba(255,255,255,.42);
}


/* =========================================================
   CUSTOM FOOTER
========================================================= */

.hv3-footer{
    background:#0c1026;
    color:#fff;

    padding:78px 0 28px;
}

.hv3-footer__top{
    display:grid;

    grid-template-columns:
        minmax(280px,1.8fr)
        repeat(3,minmax(130px,.7fr));

    gap:56px;

    padding-bottom:64px;
}


/* BRAND */

.hv3-footer__logo{
    display:inline-block;

    margin-bottom:22px;

    color:#fff !important;

    font-size:26px;
    line-height:1;
    font-weight:850;

    letter-spacing:-.045em;

    text-decoration:none !important;
}

.hv3-footer__brand p{
    max-width:360px;

    margin:0 0 22px;

    color:#989bab;

    font-size:13px;
    line-height:1.7;
}

.hv3-footer__tag{
    display:inline-flex;

    align-items:center;

    min-height:32px;

    padding:0 14px;

    border-radius:999px;

    background:rgba(108,76,255,.14);

    color:#b9adff;

    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}


/* COLUMNS */

.hv3-footer__col{
    display:flex;
    flex-direction:column;

    gap:12px;
}

.hv3-footer__col h3{
    margin:0 0 10px;

    color:#fff;

    font-size:12px;
    line-height:1;
    font-weight:850;

    text-transform:uppercase;
    letter-spacing:.12em;
}

.hv3-footer__col a{
    color:#9699aa !important;

    font-size:12px;
    line-height:1.4;

    text-decoration:none !important;

    transition:
        color .2s ease,
        transform .2s ease;
}

.hv3-footer__col a:hover{
    color:#fff !important;

    transform:translateX(2px);
}


/* BOTTOM */

.hv3-footer__bottom{
    display:flex;

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

    gap:30px;

    padding-top:26px;

    border-top:
        1px solid rgba(255,255,255,.09);

    color:#747789;

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


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

@media(max-width:1024px){

    .hv3-final-cta__content{
        padding:48px;
    }

    .hv3-footer__top{
        grid-template-columns:1.4fr repeat(3,1fr);

        gap:34px;
    }

}


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

@media(max-width:767px){

    .hv3-final-cta{
        padding:72px 0;
    }

    .hv3-final-cta__card{
        min-height:0;

        grid-template-columns:1fr;

        border-radius:24px;
    }

    .hv3-final-cta__media{
        aspect-ratio:1 / 1;
    }

    .hv3-final-cta__content{
        padding:34px 24px 38px;
    }

    .hv3-final-cta h2{
        font-size:42px;
    }

    .hv3-final-cta p{
        font-size:13px;
    }

    .hv3-final-cta__actions{
        align-items:flex-start;
        flex-direction:column;

        gap:18px;

        margin-top:28px;
    }


    /* FOOTER */

    .hv3-footer{
        padding:60px 0 24px;
    }

    .hv3-footer__top{
        grid-template-columns:repeat(2,1fr);

        gap:42px 24px;

        padding-bottom:48px;
    }

    .hv3-footer__brand{
        grid-column:1 / -1;
    }

    .hv3-footer__brand p{
        max-width:310px;
    }

    .hv3-footer__bottom{
        align-items:flex-start;
        flex-direction:column;

        gap:8px;
    }

}

/* ===== HV3 HOME FINISH END ===== */


/* ===== HEALTHYVAPE FOOTER LOGO V2 START ===== */

.hv3-footer__logo{
    display:block;

    width:215px;
    max-width:100%;

    margin-bottom:24px;

    line-height:0;
}

.hv3-footer__logo-img{
    display:block;

    width:100% !important;
    height:auto !important;

    object-fit:contain;
}

@media(max-width:767px){

    .hv3-footer__logo{
        width:188px;
    }

}

/* ===== HEALTHYVAPE FOOTER LOGO V2 END ===== */


/* ===== HEALTHYVAPE HOMEPAGE V5 AIRY START ===== */


/* -----------------------------------------
   HERO
----------------------------------------- */

.hv5-hero{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#111633;
}

.hv5-hero__picture{
    position:relative;
    display:block;
    width:100%;
    margin:0;
}

.hv5-hero__picture img{
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    object-fit:contain;
}

.hv5-hero__shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(17,22,51,0) 55%,
            rgba(17,22,51,.34) 100%
        );
}

.hv5-hero__actions{
    position:absolute;
    z-index:3;

    left:50%;
    bottom:34px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}



/* -----------------------------------------
   BUTTONS
----------------------------------------- */

.hv5-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:48px;
    padding:0 24px;

    border-radius:999px;

    text-decoration:none;

    font-size:13px;
    line-height:1;
    font-weight:750;

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

.hv5-btn:hover{
    transform:translateY(-2px);
}

.hv5-btn--primary{
    color:#fff;
    background:#6c4cff;

    box-shadow:
        0 12px 28px
        rgba(108,76,255,.24);
}

.hv5-btn--primary:hover{
    color:#fff;
    background:#5b3df4;
}

.hv5-btn--glass{
    color:#fff;

    border:
        1px solid
        rgba(255,255,255,.55);

    background:
        rgba(17,22,51,.30);

    backdrop-filter:blur(10px);
}

.hv5-btn--glass:hover{
    color:#fff;

    background:
        rgba(17,22,51,.52);
}

.hv5-btn--dark{
    color:#fff;
    background:#111633;
}

.hv5-btn--dark:hover{
    color:#fff;
    background:#23294e;
}



/* -----------------------------------------
   BRAND BRIDGE
----------------------------------------- */

.hv5-brand{
    padding:
        118px 22px
        124px;

    background:#fff;
}

.hv5-brand__grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(360px,.95fr);

    align-items:center;

    gap:96px;
}

.hv5-brand__content{
    max-width:690px;
}

.hv5-eyebrow{
    display:block;

    margin-bottom:21px;

    color:#6c4cff;

    font-size:11px;
    line-height:1;
    font-weight:850;

    letter-spacing:.20em;
}

.hv5-brand h1{
    margin:0;

    max-width:660px;

    color:#111633;

    font-size:
        clamp(44px,5.1vw,72px);

    line-height:.98;

    letter-spacing:-.055em;

    font-weight:850;
}

.hv5-brand h1 span{
    display:block;
    color:#6c4cff;
}

.hv5-brand__lead{
    max-width:610px;

    margin:
        30px 0 0;

    color:#686d80;

    font-size:17px;
    line-height:1.76;
}

.hv5-brand__divider{
    width:100%;

    height:1px;

    margin:
        40px 0 34px;

    background:#ececf3;
}



/* PURE MATE INTRO */

.hv5-pure-intro{
    display:grid;

    grid-template-columns:
        155px 1fr;

    gap:28px;

    align-items:start;
}

.hv5-pure-intro__label{
    color:#111633;

    font-size:18px;
    line-height:1;

    font-weight:900;

    letter-spacing:.04em;
}

.hv5-pure-intro__label small{
    display:block;

    margin-top:8px;

    color:#6c4cff;

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

    letter-spacing:.19em;
}

.hv5-pure-intro p{
    margin:0;

    color:#74788b;

    font-size:14px;
    line-height:1.65;
}

.hv5-brand__actions{
    display:flex;

    align-items:center;

    gap:24px;

    flex-wrap:wrap;

    margin-top:36px;
}

.hv5-text-link{
    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#111633;

    text-decoration:none;

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

.hv5-text-link span{
    color:#6c4cff;

    transition:
        transform .2s ease;
}

.hv5-text-link:hover{
    color:#6c4cff;
}

.hv5-text-link:hover span{
    transform:translateX(3px);
}



/* -----------------------------------------
   SINGLE EDITORIAL IMAGE
----------------------------------------- */

.hv5-brand__visual{
    position:relative;

    max-width:520px;

    aspect-ratio:4 / 5;

    justify-self:end;

    overflow:hidden;

    border-radius:30px;

    background:#f5f3ff;

    box-shadow:
        0 28px 70px
        rgba(17,22,51,.09);
}

.hv5-brand__img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.hv5-brand__visual::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(17,22,51,0) 63%,
            rgba(17,22,51,.44) 100%
        );

    pointer-events:none;
}

.hv5-brand__caption{
    position:absolute;
    z-index:3;

    left:22px;
    right:22px;
    bottom:22px;

    display:flex;

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

    padding:
        16px 18px;

    border:
        1px solid
        rgba(255,255,255,.45);

    border-radius:18px;

    color:#fff;

    background:
        rgba(17,22,51,.52);

    backdrop-filter:blur(13px);
}

.hv5-brand__caption strong{
    display:block;

    font-size:18px;
    line-height:1.1;
}

.hv5-brand__caption span{
    display:block;

    margin-top:4px;

    color:
        rgba(255,255,255,.70);

    font-size:10px;
    line-height:1.2;

    text-transform:uppercase;
    letter-spacing:.16em;
}

.hv5-brand__caption
.hv5-brand__caption-arrow{
    margin:0;

    color:#fff;

    font-size:23px;
    line-height:1;

    letter-spacing:0;
}



/* -----------------------------------------
   ADD MORE BREATHING ROOM
   TO EXISTING SECTIONS
----------------------------------------- */

.hv3-home .hv3-flavors{
    padding-top:108px;
    padding-bottom:116px;
}

.hv3-home .hv3-section-head{
    margin-bottom:42px;
}

.hv3-home .hv3-flavor-grid{
    gap:22px;
}



/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 1024px){

    .hv5-brand{
        padding:
            90px 20px
            96px;
    }

    .hv5-brand__grid{
        gap:50px;

        grid-template-columns:
            minmax(0,1fr)
            minmax(300px,.85fr);
    }

}



/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 767px){
    .hv5-hero{
        min-height:0;
    }

    .hv5-hero__actions{
        left:16px;
        right:16px;
        bottom:22px;

        transform:none;

        display:grid;

        grid-template-columns:
            1fr 1fr;

        gap:8px;
    }

    .hv5-btn{
        min-height:45px;

        padding:
            0 13px;

        font-size:11px;
    }


    .hv5-brand{
        padding:
            70px 18px
            78px;
    }

    .hv5-brand__grid{
        display:flex;
        flex-direction:column;

        gap:44px;
    }

    .hv5-brand__content{
        max-width:none;
    }

    .hv5-eyebrow{
        margin-bottom:17px;
    }

    .hv5-brand h1{
        font-size:44px;
        line-height:1;
    }

    .hv5-brand__lead{
        margin-top:22px;

        font-size:15px;
        line-height:1.7;
    }

    .hv5-brand__divider{
        margin:
            30px 0 27px;
    }

    .hv5-pure-intro{
        grid-template-columns:1fr;

        gap:14px;
    }

    .hv5-pure-intro__label{
        font-size:17px;
    }

    .hv5-brand__actions{
        display:grid;

        grid-template-columns:1fr;

        gap:17px;

        margin-top:29px;
    }

    .hv5-brand__actions
    .hv5-btn{
        width:100%;
    }

    .hv5-brand__visual{
        width:100%;
        max-width:none;

        aspect-ratio:4 / 4.65;

        border-radius:24px;
    }

    .hv5-brand__caption{
        left:15px;
        right:15px;
        bottom:15px;

        padding:
            13px 14px;

        border-radius:15px;
    }

    .hv5-brand__caption strong{
        font-size:16px;
    }


    .hv3-home .hv3-flavors{
        padding-top:74px;
        padding-bottom:80px;
    }

    .hv3-home .hv3-section-head{
        margin-bottom:30px;
    }

    .hv3-home .hv3-flavor-grid{
        gap:14px;
    }

}


/* ===== HEALTHYVAPE HOMEPAGE V5 AIRY END ===== */


/* ===== HEALTHYVAPE V5 AIRY STAGE 2 START ===== */


/* =========================================
   FEATURED FLAVORS
========================================= */

.hv5-featured{
    padding:
        116px 22px
        126px;

    background:#fff;
}

.hv5-featured__head{
    display:grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(300px,.9fr);

    align-items:end;

    gap:70px;

    margin-bottom:48px;
}

.hv5-featured__head h2{
    margin:0;

    max-width:650px;

    color:#111633;

    font-size:
        clamp(42px,4.5vw,64px);

    line-height:1;

    letter-spacing:-.055em;

    font-weight:850;
}

.hv5-featured__head h2 span{
    display:block;
    color:#6c4cff;
}

.hv5-featured__intro{
    max-width:460px;
    justify-self:end;
}

.hv5-featured__intro p{
    margin:
        0 0 20px;

    color:#73778a;

    font-size:14px;
    line-height:1.7;
}


/* GRID */

.hv5-featured__grid{
    display:grid;

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

    gap:22px;
}


/* CARD */

.hv5-flavor-card{
    display:block;

    overflow:hidden;

    border:
        1px solid
        #ececf3;

    border-radius:22px;

    background:#fff;

    color:#111633;

    text-decoration:none;

    box-shadow:
        0 10px 30px
        rgba(17,22,51,.045);

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

.hv5-flavor-card:hover{
    transform:
        translateY(-5px);

    box-shadow:
        0 20px 46px
        rgba(17,22,51,.09);
}

.hv5-flavor-card__media{
    position:relative;

    aspect-ratio:1 / 1.13;

    overflow:hidden;

    background:#f7f7fb;
}

.hv5-flavor-card__img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .45s ease;
}

.hv5-flavor-card:hover
.hv5-flavor-card__img{
    transform:scale(1.025);
}

.hv5-flavor-card__body{
    display:flex;

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

    gap:14px;

    padding:
        19px 18px 20px;
}

.hv5-flavor-card__meta{
    display:block;

    margin-bottom:7px;

    color:#888ca0;

    font-size:8px;
    line-height:1;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;
}

.hv5-flavor-card h3{
    margin:0;

    color:#111633;

    font-size:15px;
    line-height:1.2;

    letter-spacing:-.02em;

    font-weight:800;
}

.hv5-flavor-card__arrow{
    display:flex;

    align-items:center;
    justify-content:center;

    flex:
        0 0 34px;

    width:34px;
    height:34px;

    border-radius:50%;

    color:#6c4cff;

    background:#f3f1ff;

    font-size:15px;
}

.hv5-featured__mobile-more{
    display:none;
}



/* =========================================
   ONE REAL MOMENT
========================================= */

.hv5-moment{
    padding:
        126px 22px;

    background:#f7f6ff;
}

.hv5-moment__grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.04fr)
        minmax(0,.96fr);

    align-items:center;

    gap:96px;
}


/* IMAGE */

.hv5-moment__media{
    position:relative;

    overflow:hidden;

    max-width:650px;

    aspect-ratio:1.08 / 1;

    border-radius:30px;

    background:#eae8ff;

    box-shadow:
        0 26px 70px
        rgba(17,22,51,.08);
}

.hv5-moment__img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


/* COPY */

.hv5-moment__content{
    max-width:580px;
}

.hv5-moment h2{
    margin:0;

    color:#111633;

    font-size:
        clamp(42px,4.5vw,62px);

    line-height:1;

    letter-spacing:-.055em;

    font-weight:850;
}

.hv5-moment h2 span{
    display:block;
    color:#6c4cff;
}

.hv5-moment__lead{
    margin:
        27px 0 0;

    color:#6f7387;

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


/* NOTES */

.hv5-moment__notes{
    margin-top:34px;

    border-top:
        1px solid
        #deddea;
}

.hv5-moment__notes > div{
    display:grid;

    grid-template-columns:
        38px 1fr;

    gap:17px;

    padding:
        17px 0;

    border-bottom:
        1px solid
        #deddea;
}

.hv5-moment__notes span{
    color:#6c4cff;

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

    letter-spacing:.10em;
}

.hv5-moment__notes p{
    margin:0;

    color:#4f5469;

    font-size:13px;
    line-height:1.55;
}


/* ACTIONS */

.hv5-moment__actions{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:24px;

    margin-top:32px;
}



/* =========================================
   MORE SPACE BEFORE CATEGORIES
========================================= */

.hv3-categories{
    padding-top:126px;
    padding-bottom:126px;
}



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

@media (max-width:1024px){

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

        gap:20px;
    }

    .hv5-moment__grid{
        gap:54px;
    }

}



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

@media (max-width:767px){

    .hv5-featured{
        padding:
            76px 0
            82px;
    }

    .hv5-featured__head{
        display:block;

        padding:
            0 18px;

        margin-bottom:30px;
    }

    .hv5-featured__head h2{
        font-size:42px;
    }

    .hv5-featured__intro{
        max-width:none;

        margin-top:20px;
    }

    .hv5-featured__intro
    .hv5-text-link{
        display:none;
    }


    /* MOBILE HORIZONTAL SLIDER */

    .hv5-featured__grid{
        display:flex;

        overflow-x:auto;

        gap:13px;

        padding:
            0 18px 16px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:none;
    }

    .hv5-featured__grid::-webkit-scrollbar{
        display:none;
    }

    .hv5-flavor-card{
        flex:
            0 0 76vw;

        max-width:300px;

        scroll-snap-align:start;

        border-radius:20px;
    }

    .hv5-flavor-card__media{
        aspect-ratio:
            1 / 1.08;
    }

    .hv5-featured__mobile-more{
        display:block;

        padding:
            4px 18px 0;
    }

    .hv5-featured__mobile-more
    .hv5-btn{
        width:100%;
    }


    /* MOMENT */

    .hv5-moment{
        padding:
            80px 18px
            88px;
    }

    .hv5-moment__grid{
        display:flex;

        flex-direction:column;

        gap:44px;
    }

    .hv5-moment__media{
        width:100%;

        max-width:none;

        aspect-ratio:
            1 / 1.03;

        border-radius:24px;
    }

    .hv5-moment__content{
        max-width:none;
    }

    .hv5-moment h2{
        font-size:42px;
    }

    .hv5-moment__lead{
        margin-top:21px;

        font-size:15px;
    }

    .hv5-moment__notes{
        margin-top:27px;
    }

    .hv5-moment__actions{
        display:grid;

        grid-template-columns:1fr;

        gap:17px;

        margin-top:28px;
    }

    .hv5-moment__actions
    .hv5-btn{
        width:100%;
    }


    .hv3-categories{
        padding-top:82px;
        padding-bottom:88px;
    }

}

/* ===== HEALTHYVAPE V5 AIRY STAGE 2 END ===== */



/* ===== HEALTHYVAPE V5 SPACING POLISH START ===== */

/* Brand bridge: keep airy, but reduce excessive empty space */
.hv5-brand{
    padding-top:92px;
    padding-bottom:96px;
}

.hv5-brand__grid{
    gap:74px;
}

/* Featured flavors: bring section slightly closer */
.hv5-featured{
    padding-top:92px;
    padding-bottom:104px;
}

.hv5-featured__head{
    margin-bottom:38px;
}

/* Lifestyle: keep this as the main visual breathing section */
.hv5-moment{
    padding-top:104px;
    padding-bottom:108px;
}

/* Categories: slightly tighten after lifestyle */
.hv3-categories{
    padding-top:104px;
    padding-bottom:110px;
}

/* Mobile */
@media (max-width:767px){

    .hv5-brand{
        padding-top:58px;
        padding-bottom:64px;
    }

    .hv5-brand__grid{
        gap:34px;
    }

    .hv5-featured{
        padding-top:64px;
        padding-bottom:70px;
    }

    .hv5-moment{
        padding-top:68px;
        padding-bottom:74px;
    }

    .hv3-categories{
        padding-top:70px;
        padding-bottom:76px;
    }

}

/* ===== HEALTHYVAPE V5 SPACING POLISH END ===== */


/* ===== HEALTHVAPE SEARCH INTENT BRIDGE START ===== */

.hv5-healthvape-bridge{
    display:grid;

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

    align-items:center;

    gap:28px;

    margin-top:38px;
    padding-top:27px;

    border-top:
        1px solid #ececf3;
}

.hv5-healthvape-bridge__eyebrow{
    display:block;

    margin-bottom:8px;

    color:#8a8ea0;

    font-size:9px;
    line-height:1;

    font-weight:850;

    letter-spacing:.17em;
}

.hv5-healthvape-bridge p{
    max-width:480px;

    margin:0;

    color:#73778a;

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

.hv5-healthvape-bridge__link{
    display:inline-flex;

    align-items:center;

    gap:8px;

    white-space:nowrap;

    color:#111633;

    text-decoration:none;

    font-size:12px;
    line-height:1.3;

    font-weight:800;

    transition:
        color .2s ease;
}

.hv5-healthvape-bridge__link span{
    color:#6c4cff;

    transition:
        transform .2s ease;
}

.hv5-healthvape-bridge__link:hover{
    color:#6c4cff;
}

.hv5-healthvape-bridge__link:hover span{
    transform:translateX(3px);
}


@media (max-width:767px){

    .hv5-healthvape-bridge{
        grid-template-columns:1fr;

        gap:14px;

        margin-top:30px;
        padding-top:24px;
    }

    .hv5-healthvape-bridge p{
        max-width:none;

        font-size:12px;
    }

    .hv5-healthvape-bridge__link{
        white-space:normal;

        font-size:12px;
    }

}

/* ===== HEALTHVAPE SEARCH INTENT BRIDGE END ===== */