/* =========================
   GLOW LAB — CLEAN CSS (PASTE THIS)
   Valid CSS (no nesting), mobile-first
   ========================= */

/* ==== DESIGN SYSTEM ==== */
:root{
  --bg0:#fbf7ff;
  --bg1:#f3eafe;
  --card:rgba(255,255,255,.58);
  --text:#2d233a;
  --muted:#5a4a74;
  --btnText:#ffffff;
  --shadow: 0 18px 55px rgba(70, 30, 120, .14);
  --shadow2: 0 10px 30px rgba(70, 30, 120, .10);
  --radius: 22px;
  --max: 1120px;
}

/* ==== RESET / BASE ==== */
*{ box-sizing:border-box; }
html, body{ width:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(183,154,232,.35), transparent 65%),
    radial-gradient(900px 500px at 15% 20%, rgba(233,220,255,.75), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* ==== LAYOUT WRAP ==== */
.wrap{
  width:min(var(--max), calc(100% - 24px));
  margin:0 auto;
}

/* ==== HEADER ==== */
header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(251,247,255,.86), rgba(251,247,255,.45));
  border-bottom:1px solid rgba(120,80,170,.10);
}/* Mobile menu should be hidden by default */
.mobileMenu[hidden] { display: none !important; }

/* When it's NOT hidden, show it */
.mobileMenu { display: none; }
.mobileMenu.isOpen { display: grid; }

nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  flex-wrap:wrap;
}

.brandmark{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:210px;
}

.logo{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: rgba(183,154,232,.22);
  border:1px solid rgba(120,80,170,.12);
}

.brandtext .top{
  font-family:"Playfair Display", serif;
  letter-spacing:.08em;
  font-weight:600;
  font-size:16px;
  line-height:1.1;
  text-transform:uppercase;
}

.brandtext .sub{
  font-size:11px;
  letter-spacing:.28em;
  color:var(--muted);
  line-height:1.2;
  text-transform:uppercase;
  margin-top:2px;
}

/* Desktop nav links */
nav ul{
  display:flex;
  gap:22px;
  list-style:none;
  padding:0;
  margin:0;
  font-size:14px;
  color:var(--muted);
  flex-wrap:wrap;
}

nav ul a{
  padding:8px 10px;
  border-radius:999px;
}

nav ul a:hover{
  background:rgba(255,255,255,.55);
  color:var(--text);
}

/* Header buttons */
.cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Buttons */
.btn{
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  border:1px solid rgba(120,80,170,.16);
  background: linear-gradient(180deg, rgba(183,154,232,.95), rgba(159,127,224,.95));
  color:var(--btnText);
  box-shadow: var(--shadow2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:normal;
  text-align:center;
}

.btn.secondary{
  background: rgba(255,255,255,.60);
  color:var(--text);
}

/* ==== HERO ==== */
.hero{ padding:28px 0 20px; }

.heroCard{
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.38));
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:24px;
  border:1px solid rgba(120,80,170,.12);
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:center;
  text-align:center;
  justify-items:center;
}

.kicker{
  font-family:"Playfair Display", serif;
  font-size:clamp(32px, 7vw, 54px);
  margin:0 0 10px;
  line-height:1.08;
}

.subkicker{
  font-size:15px;
  color:var(--muted);
  max-width:520px;
  margin:0 auto;
  line-height:1.6;
}

.pillRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin-top:10px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(120,80,170,.12);
  font-weight:800;
  font-size:13px;
  color:var(--text);
}

.pill .flag{ font-size:15px; }

/* Hero image container */
.heroArt{
  width:min(520px, 100%);
  margin:0 auto;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow2);
  border:1px solid rgba(120,80,170,.12);
  background: rgba(255,255,255,.35);
}

/* The actual hero image */
.heroImg{
  width:100%;
  height:auto;
  display:block;
}

/* ==== SECTION TITLES ==== */
.section{ padding:18px 0 50px; }

.sectionTitle{
  font-family:"Playfair Display", serif;
  font-size:24px;
  margin:0 0 8px;
}

.sectionDesc{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
}

/* ==== PROTOCOL CARDS ==== */
.protocolGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
}

.protocolCard{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:22px;
  border:1px solid rgba(120,80,170,.12);
}

.protocolTitle{
  font-family:"Playfair Display", serif;
  font-size:18px;
  margin:0 0 6px;
}

.protocolSub{
  color: var(--muted);
  font-size:13px;
  line-height:1.5;
  margin:0 0 14px;
}

.protocolBullets{
  margin:0 0 14px 18px;
  color: var(--text);
  font-size:13px;
}

/* ==== ORDER BOX ==== */
.orderBox{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(120,80,170,.10);
}

.orderRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:10px 0;
}

.orderRow label{
  font-size:13px;
  color: var(--muted);
  min-width:92px;
}

.orderRow select{
  flex:1;
  min-width:160px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(120,80,170,.20);
  background: rgba(255,255,255,.75);
  outline:none;
}

.addonLine{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  color: var(--text);
  margin-top:10px;
}

.priceLine{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  margin-top:10px;
}

.priceBig{
  font-weight:900;
  letter-spacing:.01em;
}

.smallNote{
  font-size:12px;
  color: var(--muted);
  margin-top:10px;
  line-height:1.45;
}

.btnBuy{
  width:100%;
  margin-top:12px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(120,80,170,.16);
  background: linear-gradient(180deg, rgba(183,154,232,.95), rgba(159,127,224,.95));
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

/* ==== FOOTER ==== */
footer{
  padding:26px 0;
  font-size:12px;
  color:var(--muted);
  text-align:center;
  border-top:1px solid rgba(120,80,170,.12);
}

/* ==== BREAKPOINTS ==== */
@media (min-width: 900px){
  .wrap{ width:min(var(--max), calc(100% - 40px)); }
  nav{ padding:18px 0; flex-wrap:nowrap; }

  .hero{ padding:40px 0; }
  .heroCard{
    padding:36px;
    grid-template-columns: 1.1fr .9fr;
    gap:30px;
    text-align:left;
    justify-items:stretch;
  }

  .pillRow{ justify-content:flex-start; }
  .subkicker{ margin:0; }

  .heroArt{
    width:100%;
    max-width:420px;
    margin: 0 0 0 auto;
  }
}

/* FORCE header to be centered on every page (even if wrap is missing) */
header .nav,
header .headerInner,
header .headerInner .desktopNav,
header .headerInner nav,
header .headerInner .cta{
  width: min(var(--max), calc(100% - 24px));
  margin-left: auto;
  margin-right: auto;
}
/* Keep the HEADER logo normal size */
header img.brandlogo,
header .brandmark img{
  max-width: 180px !important;
  width: 180px !important;
  height: auto !important;
}

/* If that same logo file is used INSIDE the page, prevent it from becoming gigantic */
main img[src*="glow-lab-compounds-logo"],
main img[src*="compounds-logo"],
main img[src*="glow-lab-logo"]{
  max-width: 520px !important;
  width: min(520px, 100%) !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}
.featuredPartner{
  margin: 40px 0;
  padding: 28px;
  border-radius: 28px;
  background: linear-gradient(135deg, #f5edff, #ffffff);
  box-shadow: 0 20px 50px rgba(140, 90, 255, 0.15);
  border: 1px solid rgba(140,90,255,0.15);
}

.featuredContent{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.featuredText{
  max-width: 520px;
}

.featuredBadge{
  display: inline-block;
  background: #ffe87a;
  color: #5a4a00;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}

.featuredText h2{
  font-size: 32px;
  margin-bottom: 10px;
}

.featuredDesc{
  color: #555;
  line-height: 1.6;
  margin-bottom: 14px;
}

.featuredBenefits{
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
}

.featuredBenefits li{
  margin-bottom: 6px;
  font-size: 14px;
}

.featuredPromo{
  background: #fff4d6;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}

.featuredBtn{
  display: inline-block;
  background: linear-gradient(135deg, #7a5cff, #5a3df0);
  color: white;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
}

.featuredBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(90,60,200,0.3);
}

.featuredImage img{
  width: 260px;
  border-radius: 16px;
}

/* MOBILE */
@media (max-width: 900px){
  .featuredContent{
    flex-direction: column;
    text-align: center;
  }

  .featuredImage img{
    width: 200px;
  }
}