/* =========================================================
   HEALTHYVAPE HOMEPAGE — COMPLETE REBUILD
========================================================= */

:root{
  --hvx-teal:#0e5b5b;
  --hvx-teal-dark:#0b3b3c;
  --hvx-mint:#ddf1ec;
  --hvx-aqua:#8ccbc5;
  --hvx-ivory:#fbf8f1;
  --hvx-amber:#e5a85b;

  --hvx-ink:#172321;
  --hvx-text:#485855;
  --hvx-muted:#66736f;

  --hvx-white:#ffffff;
  --hvx-line:#dbe5e1;

  --hvx-radius:24px;
}


/* ---------- PAGE RESET ---------- */

body.home{
  background:var(--hvx-ivory);
}

body.home .entry-header,
body.home .entry-title,
body.home .site-footer{
  display:none !important;
}

body.home .site-content,
body.home .site-main,
body.home .entry-content{
  margin:0 !important;
  padding:0 !important;
}

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


/* ---------- HEADER ---------- */

body.home .site-header{
  position:sticky;
  top:0;
  z-index:999;

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

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border-bottom:1px solid rgba(14,91,91,.09);
}

body.home .main-header-bar{
  min-height:72px;
  background:transparent !important;
  border:0 !important;
}

body.home .site-title a{
  color:var(--hvx-ink) !important;
  font-weight:800;
  letter-spacing:-.03em;
}

body.home .main-header-menu > .menu-item > .menu-link{
  color:#4f615d;
  font-size:13px;
  font-weight:650;
}

body.home .main-header-menu > .menu-item > .menu-link:hover,
body.home .main-header-menu > .current-menu-item > .menu-link{
  color:var(--hvx-teal);
}


/* ---------- GLOBAL ---------- */

.hvx-home{
  color:var(--hvx-ink);
}

.hvx-shell{
  width:100%;
  max-width:1200px;

  margin:0 auto;
  padding:0 24px;
}

.hvx-section{
  padding:100px 0;
}

.hvx-eyebrow,
.hvx-kicker{
  margin:0 0 12px;

  color:var(--hvx-teal);

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

.hvx-section-head{
  display:grid;

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

  gap:60px;

  align-items:end;

  margin-bottom:42px;
}

.hvx-section-head h2,
.hvx-why-title h2,
.hvx-shop-band h2,
.hvx-faq h2{
  margin:0;

  color:var(--hvx-ink);

  font-size:clamp(34px,4vw,52px);
  line-height:1.04;
  letter-spacing:-.045em;
}

.hvx-section-head > p{
  max-width:460px;
  margin:0;

  color:var(--hvx-muted);

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


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

.hvx-actions{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:30px;
}

.hvx-btn{
  min-height:52px;

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

  padding:14px 23px;

  border-radius:999px;

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

  text-decoration:none !important;

  transition:.2s ease;
}

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

.hvx-btn-primary{
  color:#fff !important;
  background:var(--hvx-teal);
}

.hvx-btn-primary:hover{
  background:var(--hvx-teal-dark);
}

.hvx-btn-secondary{
  color:var(--hvx-teal-dark) !important;

  background:#fff;

  border:1px solid rgba(14,91,91,.18);
}

.hvx-btn-amber{
  color:#172321 !important;
  background:var(--hvx-amber);
}


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

.hvx-hero{
  position:relative;
  overflow:hidden;

  padding:100px 0 104px;

  background:
    radial-gradient(
      circle at 87% 13%,
      rgba(140,203,197,.25),
      transparent 30%
    ),
    var(--hvx-ivory);
}

.hvx-hero::after{
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  right:-220px;
  bottom:-300px;

  border-radius:50%;

  background:rgba(221,241,236,.7);
}

.hvx-hero-grid{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(380px,.92fr);

  gap:86px;

  align-items:center;
}

.hvx-hero-copy h1{
  max-width:760px;

  margin:0;

  color:var(--hvx-ink);

  font-size:clamp(50px,5.2vw,76px);
  line-height:.98;
  letter-spacing:-.055em;
}

.hvx-hero-copy h1 span{
  display:block;
  color:var(--hvx-teal);
}

.hvx-hero-lead{
  max-width:620px;

  margin:28px 0 0;

  color:var(--hvx-text);

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

.hvx-proof{
  display:flex;
  flex-wrap:wrap;

  gap:10px 22px;

  margin-top:28px;
}

.hvx-proof span{
  position:relative;

  padding-left:15px;

  color:#596964;

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

.hvx-proof span::before{
  content:"";

  position:absolute;

  left:0;
  top:6px;

  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--hvx-amber);
}


/* HERO PANEL */

.hvx-compare-card{
  width:100%;

  padding:28px;

  border-radius:28px;

  color:#fff;

  background:
    linear-gradient(
      155deg,
      #0b3b3c 0%,
      #0e5b5b 100%
    );

  box-shadow:
    0 35px 80px
    rgba(11,59,60,.22);
}

.hvx-compare-head{
  display:flex;
  justify-content:space-between;

  gap:20px;

  padding-bottom:20px;
}

.hvx-compare-head small{
  display:block;

  margin-bottom:7px;

  color:#9fd4cc;

  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
}

.hvx-compare-head strong{
  color:#fff;
  font-size:18px;
}

.hvx-live-dot{
  width:10px;
  height:10px;

  margin-top:4px;

  border-radius:50%;

  background:var(--hvx-amber);

  box-shadow:
    0 0 0 7px
    rgba(229,168,91,.12);
}

.hvx-compare-list{
  display:grid;

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

.hvx-compare-list a{
  display:grid;

  grid-template-columns:
    34px
    minmax(0,1fr)
    30px;

  align-items:center;

  gap:12px;

  min-height:78px;

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

  color:#fff !important;
  text-decoration:none !important;
}

.hvx-compare-index{
  color:#8fc8c0;

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

.hvx-compare-list strong{
  display:block;

  margin-bottom:5px;

  color:#fff;

  font-size:15px;
}

.hvx-compare-list small{
  color:#9fc0bb;
  font-size:11px;
}

.hvx-compare-list b{
  width:28px;
  height:28px;

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

  border-radius:50%;

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

  color:#fff;

  font-size:13px;
}

.hvx-compare-foot{
  display:grid;

  grid-template-columns:auto 1fr;

  gap:16px;

  align-items:start;

  margin-top:23px;
}

.hvx-compare-foot span{
  color:var(--hvx-amber);

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

.hvx-compare-foot p{
  margin:0;

  color:#a9c4bf;

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


/* =========================================================
   CATEGORIES
========================================================= */

.hvx-categories{
  background:#fff;
}

.hvx-category-grid{
  display:grid;

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

  gap:18px;
}

.hvx-category-card{
  min-width:0;
  min-height:430px;

  display:flex;
  flex-direction:column;

  padding:23px;

  border-radius:var(--hvx-radius);

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

  border:1px solid rgba(20,70,65,.08);

  transition:.2s ease;
}

.hvx-category-card:hover{
  transform:translateY(-6px);

  box-shadow:
    0 25px 55px
    rgba(33,70,62,.10);
}

.hvx-cat-a{
  background:#e9f4f0;
}

.hvx-cat-b{
  background:#f8f0e3;
}

.hvx-cat-c{
  background:#e7f0ec;
}

.hvx-cat-d{
  background:#eef1ef;
}

.hvx-category-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.hvx-category-meta span{
  color:#52756d;

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

.hvx-category-meta b{
  width:34px;
  height:34px;

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

  border-radius:50%;

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

  color:var(--hvx-teal);
}

.hvx-category-mark{
  width:104px;
  height:104px;

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

  margin:45px auto 34px;

  border-radius:50%;

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

  border:
    1px solid
    rgba(14,91,91,.12);

  color:var(--hvx-teal);

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

.hvx-category-body{
  margin-top:auto;
}

.hvx-category-body small{
  display:block;

  margin-bottom:8px;

  color:#517269;

  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
}

.hvx-category-body h3{
  margin:0;

  color:var(--hvx-ink);

  font-size:22px;
  line-height:1.12;
  letter-spacing:-.025em;
}

.hvx-category-body p{
  min-height:66px;

  margin:12px 0 18px;

  color:#586762;

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

.hvx-category-body strong{
  color:var(--hvx-teal);

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


/* =========================================================
   WHY
========================================================= */

.hvx-why{
  background:var(--hvx-ivory);
}

.hvx-why-grid{
  display:grid;

  grid-template-columns:
    minmax(0,.8fr)
    minmax(0,1.2fr);

  gap:90px;

  align-items:start;
}

.hvx-why-title h2 span{
  display:block;
  color:var(--hvx-teal);
}

.hvx-why-title > p:last-child{
  max-width:430px;

  margin:22px 0 0;

  color:var(--hvx-muted);

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

.hvx-values{
  display:grid;
}

.hvx-values article{
  display:grid;

  grid-template-columns:50px 180px 1fr;

  gap:20px;

  padding:25px 0;

  border-bottom:1px solid var(--hvx-line);
}

.hvx-values article:first-child{
  border-top:1px solid var(--hvx-line);
}

.hvx-values span{
  color:var(--hvx-teal);

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

.hvx-values h3{
  margin:0;

  color:var(--hvx-ink);

  font-size:18px;
}

.hvx-values p{
  margin:0;

  color:var(--hvx-muted);

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


/* =========================================================
   FORMAT BOARD
========================================================= */

.hvx-format{
  background:#fff;
}

.hvx-format-board{
  overflow:hidden;

  border:1px solid var(--hvx-line);
  border-radius:24px;
}

.hvx-format-row{
  display:grid;

  grid-template-columns:
    1.25fr .8fr 1fr .55fr;

  gap:20px;

  align-items:center;

  padding:20px 24px;

  border-bottom:1px solid var(--hvx-line);

  color:var(--hvx-ink) !important;
  text-decoration:none !important;
}

.hvx-format-row:last-child{
  border-bottom:0;
}

.hvx-format-row:hover{
  background:#f8fbfa;
}

.hvx-format-header{
  background:#f2f7f5;

  color:#75817d;

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

.hvx-format-row strong{
  font-size:15px;
}

.hvx-format-row span{
  color:#667570;
  font-size:13px;
}

.hvx-format-row b{
  color:var(--hvx-teal);
  font-size:12px;
}


/* =========================================================
   GUIDES
========================================================= */

.hvx-guides{
  background:#f0f6f4;
}

.hvx-guide-grid{
  display:grid;

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

  gap:18px;
}

.hvx-guide-card{
  min-height:330px;

  display:flex;
  flex-direction:column;

  padding:28px;

  border-radius:24px;

  background:#fff;

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

  border:1px solid rgba(14,91,91,.08);
}

.hvx-guide-featured{
  color:#fff !important;

  background:var(--hvx-teal-dark);
}

.hvx-guide-card > span{
  color:var(--hvx-teal);

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

.hvx-guide-featured > span{
  color:var(--hvx-amber);
}

.hvx-guide-card h3{
  margin:60px 0 12px;

  color:inherit;

  font-size:25px;
  line-height:1.12;
}

.hvx-guide-card p{
  margin:0;

  color:#687671;

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

.hvx-guide-featured p{
  color:#abc4bf;
}

.hvx-guide-card strong{
  margin-top:auto;

  padding-top:28px;

  color:var(--hvx-teal);

  font-size:12px;
}

.hvx-guide-featured strong{
  color:#fff;
}


/* =========================================================
   SHOP BAND
========================================================= */

.hvx-shop-band{
  padding:82px 0;

  background:var(--hvx-teal-dark);
}

.hvx-shop-band-inner{
  display:grid;

  grid-template-columns:
    1.15fr .85fr;

  gap:80px;

  align-items:end;
}

.hvx-shop-band .hvx-eyebrow{
  color:var(--hvx-amber);
}

.hvx-shop-band h2{
  max-width:650px;
  color:#fff;
}

.hvx-shop-band-copy p{
  max-width:420px;

  margin:0 0 23px;

  color:#afc6c1;

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


/* =========================================================
   FAQ
========================================================= */

.hvx-faq{
  background:#fff;
}

.hvx-faq-layout{
  display:grid;

  grid-template-columns:
    .75fr 1.25fr;

  gap:90px;
}

.hvx-faq-intro{
  max-width:350px;

  margin:18px 0 0;

  color:var(--hvx-muted);

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

.hvx-faq-list details{
  border-top:1px solid var(--hvx-line);
}

.hvx-faq-list details:last-child{
  border-bottom:1px solid var(--hvx-line);
}

.hvx-faq-list summary{
  cursor:pointer;

  padding:22px 2px;

  color:var(--hvx-ink);

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

.hvx-faq-list details p{
  max-width:700px;

  margin:0;
  padding:0 2px 23px;

  color:var(--hvx-muted);

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


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

.hvx-footer{
  padding:70px 0 25px;

  color:#fff;

  background:#102b2b;
}

.hvx-footer-top{
  display:grid;

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

  gap:80px;

  padding-bottom:55px;
}

.hvx-footer-brand{
  display:inline-block;

  color:#fff !important;

  font-size:27px;
  font-weight:850;
  letter-spacing:-.04em;

  text-decoration:none !important;
}

.hvx-footer-top > div:first-child p{
  max-width:340px;

  margin:15px 0 0;

  color:#9db8b3;

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

.hvx-footer-links{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:40px;
}

.hvx-footer-links > div{
  display:grid;
  align-content:start;

  gap:9px;
}

.hvx-footer-links strong{
  margin-bottom:5px;

  color:#fff;

  font-size:12px;
}

.hvx-footer-links a{
  color:#9db8b3 !important;

  font-size:12px;

  text-decoration:none !important;
}

.hvx-footer-links a:hover{
  color:#fff !important;
}

.hvx-footer-bottom{
  display:flex;

  justify-content:space-between;

  gap:20px;

  padding-top:22px;

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

  color:#72918b;

  font-size:10px;
}


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

@media(max-width:1000px){

  .hvx-hero-grid{
    grid-template-columns:1fr;
    gap:50px;
  }

  .hvx-compare-card{
    max-width:650px;
  }

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

  .hvx-why-grid{
    grid-template-columns:1fr;
    gap:50px;
  }

  .hvx-values article{
    grid-template-columns:
      45px 180px 1fr;
  }

  .hvx-shop-band-inner,
  .hvx-faq-layout{
    grid-template-columns:1fr;
    gap:42px;
  }

  .hvx-footer-top{
    grid-template-columns:1fr;
  }

}


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

@media(max-width:680px){

  .hvx-shell{
    padding:0 20px;
  }

  .hvx-section{
    padding:68px 0;
  }

  .hvx-section-head{
    grid-template-columns:1fr;
    gap:16px;
    margin-bottom:28px;
  }


  /* HERO */

  .hvx-hero{
    padding:64px 0 68px;
  }

  .hvx-hero-grid{
    gap:40px;
  }

  .hvx-hero-copy h1{
    font-size:44px;
  }

  .hvx-hero-lead{
    margin-top:21px;

    font-size:15px;
  }

  .hvx-actions{
    display:grid;
  }

  .hvx-btn{
    width:100%;
  }

  .hvx-proof{
    display:grid;
    gap:8px;
  }

  .hvx-compare-card{
    padding:21px;
    border-radius:22px;
  }

  .hvx-compare-list a{
    min-height:70px;
  }

  .hvx-compare-list small{
    white-space:normal;
  }


  /* CATEGORY MOBILE SLIDER */

  .hvx-category-grid{
    display:grid;

    grid-auto-flow:column;
    grid-auto-columns:84%;

    grid-template-columns:none;

    gap:13px;

    overflow-x:auto;

    margin-right:-20px;
    padding-right:20px;
    padding-bottom:12px;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;
  }

  .hvx-category-grid::-webkit-scrollbar{
    display:none;
  }

  .hvx-category-card{
    min-height:410px;

    scroll-snap-align:start;
  }


  /* WHY */

  .hvx-values article{
    grid-template-columns:36px 1fr;
    gap:12px;
  }

  .hvx-values article p{
    grid-column:2;
  }


  /* FORMAT */

  .hvx-format-board{
    border-radius:18px;
  }

  .hvx-format-header{
    display:none;
  }

  .hvx-format-row{
    grid-template-columns:1fr auto;

    gap:8px 15px;

    padding:19px;
  }

  .hvx-format-row strong{
    grid-column:1;
  }

  .hvx-format-row span{
    grid-column:1;
  }

  .hvx-format-row b{
    grid-column:2;
    grid-row:1 / span 3;
  }


  /* GUIDES */

  .hvx-guide-grid{
    grid-template-columns:1fr;
  }

  .hvx-guide-card{
    min-height:270px;
  }


  /* FOOTER */

  .hvx-footer{
    padding-top:55px;
  }

  .hvx-footer-top{
    gap:45px;
  }

  .hvx-footer-links{
    grid-template-columns:
      repeat(3,1fr);

    gap:15px;
  }

  .hvx-footer-bottom{
    flex-direction:column;
  }

}