:root{
  --bg: #ffffff;
  --text: #101418;
  --muted: rgba(16,20,24,.65);
  --line: rgba(16,20,24,.10);

  --card: #ffffff;
  --soft: #f6f7f8;

  --brand: #1c7c6a;       /* classy green */
  --brand2: #135a4c;
  --accent: #d7b56d;      /* gold */
  --shadow: 0 18px 60px rgba(16,20,24,.12);

  --radius: 18px;
}
*, *::before, *::after {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}
/* ===== Scroll Hero ===== */
.scrollHero{
  height: 125vh;              /* controls how long the hero stays during scroll */
  position: relative;
  background: #fff;
}

.scrollHero__sticky{
  position: sticky;
  top: 0;
  height: 90vh;
  overflow: hidden;
}

.scrollHero__media{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.75) 20%,
      rgba(255,255,255,0.35) 45%,
      rgba(255,255,255,0.0) 65%
    ),
    url("images/image1.svg") center right / cover no-repeat;
  will-change: transform;
}
/* ===== Mobile: make hero background image responsive ===== */
/* ===== MOBILE HERO FIX ===== */
@media (max-width: 700px){

  /* Reduce hero height */
  .scrollHero__cta{
  flex-wrap: wrap;
  gap: 10px;
}

  .scrollHero__sticky{
    height: 100vh;
  }

  /* Proper mobile image treatment */
  .scrollHero__media{
    background:
      linear-gradient(
        to bottom,
        rgba(246,250,248,0.96) 0%,
        rgba(246,250,248,0.85) 5%,
        rgba(246,250,248,0.45) 15%,
        rgba(246,250,248,0.10) 25%,
        rgba(246,250,248,0.0) 10%
      ),
      url("images/mobile responsive.svg") center top / cover no-repeat;
    background-position: center 50%;

  }
}

  /* Push content slightly down, not centered */
  .scrollHero__content{
    align-items: flex-start;
    padding-top: 96px;
  }

  /* Text sizing for mobile */
   .scrollHero__title{
    font-size: 42px;
    line-height: 1.04;
    color: white;
    text-shadow:
      -1px -1px 0 rgb(232, 214, 214),
      1px -1px 0 rgb(160, 147, 147),
      -1px 1px 0 black,
      1px 1px 0 black;
  }


  .scrollHero__subtitle{
    font-size: 16px;
    max-width: 95%;
  
 

  }

  /* Buttons wrap cleanly */
  .hero__cta{
    flex-wrap: wrap;
    gap: 10px;
  }



/* Optional overlay */
.scrollHero__overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(900px 500px at 20% 30%, rgba(0,0,0,0.15), transparent 30%),
              linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.05));
  pointer-events:none;
}

/* Content */
.scrollHero__content{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.scrollHero__text{
  max-width: 640px;
  color: #0c0f12;
  will-change: transform, opacity;
}

.scrollHero__kicker{
  margin: 0 0 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(12,15,18,0.65);
}

.scrollHero__title{
  margin: 0 0 10px;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: .04em;
}

.scrollHero__subtitle{
  margin: 0 0 20px;
  font-size: 22px;
  color: rgba(12,15,18,0.70);
}




/* Make it responsive */
@media (max-width: 900px){
  .scrollHero__title{ font-size: 44px; }
  .scrollHero__subtitle{ font-size: 18px; }
  .scrollHero{ height: 150vh; }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(
      900px 500px at 15% 10%,
      rgba(94, 150, 140, 0.08),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #dcdcd2,
      #ffffff
    );
  line-height: 1.5;
}

a{color:inherit;text-decoration:none;}
.container{width:min(1120px, calc(100% - 40px)); margin:0 auto;}

.topbar{
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 0; gap: 12px;
}
.topbar__inner p{margin:0; color: var(--muted);}
.topbar__right{display:flex; gap:10px; align-items:center; color: var(--muted);}
.dot{opacity:.5}

.header{
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0; gap: 16px;
}
.brand{display:flex; align-items:center; gap: 10px;}
.brand__mark{
  width: 40px; height: 40px; border-radius: 12px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  color: #fff; font-weight: 700;
}
.brand__name{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .2px;
}
.nav{display:flex; gap: 18px; align-items:center; color: var(--muted); font-size: 14px;}
.nav a:hover{color: var(--text);}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
}

.brand__logo{
  height: 50px;   
  width: auto;
  max-width: none ;
  object-fit: contain;
}


@media (max-width: 560px){
  .brand__logo{
    height: 34px;
  }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px; padding: 10px 14px;
  border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; font-weight: 600; font-size: 13px;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
.btn:active{transform: translateY(1px);}
.btn--primary{
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  color: #fff;
  box-shadow: 0 10px 24px rgba(28,124,106,.18);
}
.btn--ghost{
  background: #fff;
  border-color: var(--line);
  color: var(--text);
}

.count{
  display:inline-grid; place-items:center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  background: rgba(28,124,106,.12);
  color: var(--brand2);
  font-size: 12px;
}

/* HERO */
.hero{
  padding: 56px 0 10px;
  background:
    radial-gradient(1100px 600px at 15% 0%, rgba(28,124,106,.12), transparent 60%),
    radial-gradient(900px 480px at 80% 10%, rgba(215,181,109,.10), transparent 60%);
}
.hero__grid{
  display:grid; grid-template-columns: 1.15fr .85fr;
  gap: 22px; align-items: start;
}
.kicker{
  margin:0 0 10px;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
}
.hero h1{
  margin: 0 0 12px;
  font-family: "Playfair Display", serif;
  font-size: 46px;
  line-height: 1.06;
}
.lead{margin:0 0 16px; color: var(--muted); max-width: 60ch;}
.hero__cta{display:flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 18px;}
.hero__badges{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.badge{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.7);
}
.badge__t{font-weight:700; font-size: 13px;}
.badge__s{color: var(--muted); font-size: 12px; margin-top: 4px;}

.hero__visual .note{margin: 12px 0 0; color: var(--muted); font-size: 13px;}

.heroCard{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.heroCard__img{
  height: 230px;
  background:
    linear-gradient(180deg, rgba(28,124,106,.10), rgba(0,0,0,0)),
    radial-gradient(280px 140px at 30% 40%, rgba(215,181,109,.18), transparent 60%),
    linear-gradient(180deg, #f3f5f6, #ffffff);
}
.heroCard__meta{padding: 14px 14px 16px;}
.heroCard__label{
  margin:0; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.heroCard__title{
  margin: 6px 0 6px;
  font-family: "Playfair Display", serif;
  font-size: 22px;
}
.heroCard__sub{margin:0 0 10px; color: var(--muted);}
.link{color: var(--brand2); font-weight: 700;}

/* Sections */
.section{padding: 56px 0;}
/* ===== Alternate section background ===== */
.section--alt{
  background:
    radial-gradient(
      800px 400px at 10% 0%,
      rgba(28,124,106,0.06),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #f2f7f5,
      #ffffff
    );
  border-top: 1px solid rgba(16,20,24,0.06);
  border-bottom: 1px solid rgba(16,20,24,0.06);
}

.section__head h2{
  margin:0 0 6px;
  font-family: "Playfair Display", serif;
  font-size: 34px;
}
.section__head p{margin:0; color: var(--muted); max-width: 75ch;}

/* Collections tiles */
.collectionGrid{
  margin-top: 18px;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.collectionTile{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:#fff;
  overflow:hidden;
  box-shadow: 0 8px 28px rgba(16,20,24,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.collectionTile:hover{transform: translateY(-2px); box-shadow: 0 16px 44px rgba(16,20,24,.10);}
.collectionTile__img{
  height: 120px;
  background:
    radial-gradient(220px 120px at 20% 40%, rgba(28,124,106,.16), transparent 60%),
    radial-gradient(220px 120px at 70% 70%, rgba(215,181,109,.16), transparent 60%),
    linear-gradient(180deg, #f2f4f6, #fff);
}
.collectionTile__text{padding: 12px 12px 14px;}
.collectionTile__text h3{margin:0 0 6px; font-size: 15px;}
.collectionTile__text p{margin:0; color: var(--muted); font-size: 13px;}

/* Features */
.featureGrid{
  margin-top: 18px;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.feature{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
  linear-gradient(
    90deg,
    #fffcf5 0%,
    rgb(251, 255, 194) 50%,
    #e4e0d5 100%
  );

  padding: 14px;
}
.feature h3{margin:0 0 8px; font-size: 15px;}
.feature p{margin:0; color: var(--muted);}

/* Shop controls */
.controls{margin-top: 16px; display:grid; gap: 10px;}
.search{
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  outline: none;
  background: #fff;
  font-size: 14px;
}
.search:focus{
  border-color: rgba(28,124,106,.45);
  box-shadow: 0 0 0 4px rgba(28,124,106,.12);
}
.chips{display:flex; gap: 10px; flex-wrap: wrap;}
.chip{
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  padding: 8px 12px;
  font-size: 13px;
  cursor:pointer;
  color: var(--muted);
}
.chip.isActive{
  background: rgba(28,124,106,.10);
  border-color: rgba(28,124,106,.25);
  color: var(--brand2);
  font-weight: 700;
}

/* Category blocks */
.categoryBlock{margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);}
.categoryHead{display:flex; justify-content:space-between; gap: 12px; align-items:flex-end;}
.categoryHead h3{
  margin:0;
  font-family: "Playfair Display", serif;
  font-size: 24px;
}
.categoryHead p{margin:0; color: var(--muted); max-width: 560px;}

/* Product grid */
.productGrid{
  margin-top: 12px;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.product{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:#fff;
  overflow:hidden;
  box-shadow: 0 8px 26px rgba(16,20,24,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.product:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(16,20,24,.12);
  border-color: rgba(28,124,106,.25);
}
.product__img{
  height: 150px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0)),
    radial-gradient(240px 120px at 20% 40%, rgba(28,124,106,.10), transparent 60%),
    radial-gradient(240px 120px at 70% 70%, rgba(215,181,109,.10), transparent 60%),
    #f2f4f6;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.product__body{padding: 12px;}
.product__top{display:flex; justify-content:space-between; gap: 10px; align-items:flex-start;}
.product__name{margin:0; font-weight: 700; font-size: 14px;}
.product__meta{color: var(--muted); font-size: 12px; margin-top: 4px;}
.product__pill{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  border: 1px solid rgba(28,124,106,.20);
  background: rgba(28,124,106,.10);
  color: var(--brand2);
  white-space: nowrap;
}
.product__desc{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product__actions{
  margin-top: 12px;
  display:flex; gap: 10px; flex-wrap: wrap;
}
.smallBtn{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size: 12px;
  font-weight: 700;
}
.smallBtn--primary{
  border-color: rgba(28,124,106,.25);
  background: rgba(28,124,106,.10);
  color: var(--brand2);
}

.subsection{margin-top: 34px;}
.subsection h3{margin:0 0 8px; font-family:"Playfair Display", serif; font-size: 22px;}
.muted{color: var(--muted);}
.pillList{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.pillList li{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background:#fff;
  font-size: 13px;
  color: var(--muted);
}

/* Contact */
.contactGrid{margin-top: 18px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
.contactCard{border-radius: var(--radius); border:1px solid var(--line); background:#fff; padding: 14px;}
.contactCard h3{margin:0 0 8px; font-size: 15px;}
.footer{margin-top: 18px; border-top:1px solid var(--line); padding-top: 14px;}

/* Modal */
.backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 20;
}
.modal{
  border: none;
  border-radius: 22px;
  width: min(880px, calc(100% - 30px));
  padding: 0;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  z-index: 30;
}
.modal::backdrop{background: transparent;}
.modal__inner{background:#fff; padding: 18px;}
.x{
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  cursor:pointer;
}
.modal__grid{display:grid; grid-template-columns: .9fr 1.1fr; gap: 14px; align-items:start;}
.modal__img{
  height: 320px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(320px 160px at 20% 40%, rgba(28,124,106,.16), transparent 60%),
    radial-gradient(320px 160px at 70% 70%, rgba(215,181,109,.16), transparent 60%),
    linear-gradient(180deg, #f2f4f6, #fff);
}
.pill{
  display:inline-block;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid rgba(28,124,106,.20);
  background: rgba(28,124,106,.10);
  color: var(--brand2);
  font-size: 12px;
  font-weight: 800;
}
.modal h3{margin: 10px 0 6px; font-family:"Playfair Display", serif; font-size: 30px;}
.modal h4{margin: 14px 0 8px; font-size: 13px; letter-spacing:.12em; text-transform: uppercase; color: var(--muted);}
.modal__actions{margin-top: 14px; display:flex; gap: 10px; flex-wrap: wrap;}

/* Drawer */
.drawer{
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background:#fff;
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .15s ease;
  z-index: 40;
  display:flex;
  flex-direction: column;
}
.drawer.isOpen{transform: translateX(0);}
.drawer__head{
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.drawer__head h3{margin:0; font-family:"Playfair Display", serif; font-size: 20px;}
.drawer__body{padding: 14px; overflow:auto; display:grid; gap: 10px;}
.drawerItem{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.drawerItem__top{display:flex; justify-content:space-between; gap:10px;}
.drawerItem__name{font-weight:800;}
.drawerItem__meta{color: var(--muted); font-size: 12px; margin-top: 4px;}
.drawerItem__actions{margin-top: 10px; display:flex; gap: 10px; align-items:center; justify-content:space-between;}
.qty{display:flex; gap: 10px; align-items:center;}
.qty button{
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--line); background:#fff; cursor:pointer;
}
.drawer__foot{padding: 14px; border-top: 1px solid var(--line);}
.small{font-size: 12px;}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr;}
  .hero__badges{grid-template-columns: 1fr;}
  .collectionGrid{grid-template-columns: 1fr 1fr;}
  .featureGrid{grid-template-columns: 1fr;}
  .productGrid{grid-template-columns: 1fr 1fr;}
  .contactGrid{grid-template-columns: 1fr;}
  .modal__grid{grid-template-columns: 1fr;}
}
@media (max-width: 560px){
  .nav{display:none;}
  .productGrid{grid-template-columns: 1fr;}
  .topbar__right{display:none;}
}
/* HERO HEADLINE – MATCHES QUEBEC WATERS LOGO */
.scrollHero__title{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: capitalize;
  color: #0b0b0b;
}

/* ===== Premium Stats Cards (replaces old badges) ===== */
.stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.statCard{
  border-radius: 22px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(16,20,24,0.10);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 18px 50px rgba(16,20,24,0.10);
  backdrop-filter: blur(10px);
}

.statValue{
  font-family: "Playfair Display", serif;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .02em;
  color: #0f1418;
  margin-bottom: 10px;
}

.statLabel{
  font-size: 10px;
  color: rgba(16,20,24,0.70);
}

.productGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Tablet */
@media (max-width: 980px){
  .productGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 560px){
  .productGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}


.heroCard__img{
  height: 220px;
  background: 
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.05),
      rgba(0,0,0,0.25)
    ),
    url("images/mojitomint featured (1).svg") center / cover no-repeat;
}

/* Collections image area (top of card) */
.collectionImage{
  height: 190px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mocktailImg{ background-image: url("images/mocktailscocktails.svg"); }
.coffeeImg{ background-image: url("images/coffeeimage.png"); }


@media (max-width: 900px){
  .collectionImage{
    height: 160px;
  }
}

.modal__img{
  display: block;
  width: 100%;
  min-height: 320px;     /* IMPORTANT: don't let it collapse */
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
}