:root{
  --bg:#0f0f10;
  --panel:#1a1b1e;
  --muted:#2a2b2f;
  --text:#f5f5f5;
  --sub:#b9bcc3;
  --white:#ffffff;
}

*{ box-sizing:border-box }

html, body{
  margin:0;
  padding:0;
  background-color: #E0E0E0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

a{
  color:#e5e7eb;
  text-decoration:none;
}
a:hover{ text-decoration:underline }

.container{
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:21px 20px;
  border-bottom:1px solid var(--muted);
  position:sticky;
  top:0;
  background:#000000;
  color:#ffffff;
  backdrop-filter:saturate(120%) blur(8px);
  z-index:20;
}

.brand{
  font-weight:800;
  font-size:20px;
  letter-spacing:.8px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 20px; /* consistent spacing between links */
  margin-left: auto; /* push links to the far right */
}

.navlinks a,
.navlinks .cart-toggle {
  margin: 0; /* remove old spacing overrides */
  color: var(--sub);
}

.cart-toggle{
  position:relative;
  display:flex;
  align-items:center;
  padding-right:0;
}

.nav .cart-toggle .cart-count{
  position:absolute;
  right:1px;
  top:2px !important;
  transform:none !important;
  min-width:18px;
  height:18px;
  padding:0 3px;
  border-radius:9999px;
  background:#fff;
  color:#111;
  font-size:11px;
  line-height:16px;
  text-align:center;
  border:2px solid #000;
  box-sizing:border-box;
}

/* =========================
   BUTTONS
   ========================= */
.btn{
  background:#000;
  color:#fff;
  border:1px solid #000;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  text-align:center;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{
  background:#222;
  border-color:#222;
  color:#fff;
}
.primary{
  background:#000;
  color:#fff;
  border-color:#000;
}
#signupForm .btn,
#loginForm .btn{
  background:#000;
  color:#fff;
  border-color:#000;
}
.btn *{ color:#fff; }

/* ========================= */

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

.card{
  background:var(--panel);
  border:1px solid var(--muted);
  border-radius:16px;
  overflow:hidden;
}
.card img{ width:100%; display:block; }
.card .p{ padding:14px }

.price{ color:var(--sub) }

.footer{
  margin-top:60px;
  border-top:1px solid var(--muted);
  padding:30px 20px;
  background:#000000;
  color:#ffffff;
}
.footer a{ color:#ffffff }

.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
  margin:24px 0;
}
.hero .panel{
  background:var(--panel);
  border:1px solid var(--muted);
  border-radius:18px;
  padding:28px;
}
.hero h1{
  margin:0 0 10px 0;
  font-size:44px;
  letter-spacing:.5px;
}
.hero p{
  margin:0 0 18px 0;
  color:var(--sub);
}

.badge{
  display:inline-block;
  background:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  color:var(--sub);
  font-size:12px;
  margin-bottom:10px;
}

.kicker{ font-size:12px; color:var(--sub); }

.inline{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.size-select{
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}

.size-pill{
  padding:6px 10px;
  border:1px solid var(--muted);
  border-radius:8px;
  cursor:pointer;
  color:var(--sub);
}
.size-pill.active{
  background:#fff;
  color:#111;
  border-color:#fff;
}

.cart-count{
  position:absolute;
  top:-6px;
  right:-6px;
  background:#fff;
  color:#111;
  font-size:12px;
  border-radius:999px;
  padding:2px 6px;
  border:1px solid #000;
}

/* Cart Popover */
#cartPopover{
  position:absolute;
  top:36px;
  right:0;
  width:380px;
  background:var(--panel);
  border:1px solid var(--muted);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  display:none;
  z-index:30;
}
#cartPopover.open{ display:block }
.cp-head{
  padding:12px 14px;
  border-bottom:1px solid var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.cp-items{
  max-height:360px;
  overflow:auto;
  padding:10px 14px;
}
.cp-item{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px dashed var(--muted);
  padding:10px 0;
}
.cp-foot{
  border-top:1px solid var(--muted);
  padding:12px 14px;
}

.input{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--muted);
  background:#0d0e10;
  color:var(--text);
}

@media (max-width:900px){
  .grid{ grid-template-columns:1fr 1fr }
  .hero{ grid-template-columns:1fr }
}
@media (max-width:600px){
  .grid{ grid-template-columns:1fr }
}

/* Make header flex row */
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  position:sticky;
  top:0;
}

/* Push the first element after .brand to right */
.brand + *{ margin-left:auto }

/* In-page links */
.container a{ color:#111 }
.footer a{ color:#fff }

/* Buttons light variant */
.btn-light {
  background:#fff;
  color:#000;
  border:1px solid #000;
}
.btn-light:hover {
  background:#f2f2f2;
  color:#000;
}

.promo-video {
  width:100%;
  margin:0;
  padding:0;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.promo-video video {
  width:100%;
  aspect-ratio:16/5;
  object-fit:cover;
}

/* Mobile nav */
.nav-toggle {
  display:none;
  background:transparent;
  border:1px solid var(--muted);
  color:#fff;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  font-size:16px;
}
@media (max-width:720px) {
  .nav {
    padding:14px 16px;
    justify-content:space-between;
  }
  .brand {
    position:static;
    transform:none;
    margin:0;
    white-space:nowrap;
  }
  .nav-toggle { display:inline-block; }
  .navlinks {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#000;
    border-top:1px solid var(--muted);
    display:none;
    flex-direction:column;
    padding:12px 16px;
    z-index:25;
  }
  .navlinks a {
    margin:10px 0;
    color:#fff;
  }
  .navlinks.open { display:flex; }
  .brand + * { margin-left:0; }
}
/* === Cart Fix Override === */
.navlinks .cart-toggle {
  position: relative !important;
  display: inline-block !important; /* put the badge over the icon, not inline with text */
}

.navlinks .cart-toggle .cart-count {
  position: absolute !important;
  top: -18px !important;
  right: -10px !important;
  margin: 0 !important;      /* remove flex margin interference */
  background: #fff !important;
  color: #000 !important;
  border-radius: 50% !important;
  padding: 2px 6px !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  border: 1px solid #000 !important;
}
/* === HERO VIDEO === */
.hero-video{
  position: relative;
  width: 100%;
  height: clamp(320px, 62vh, 460px); /* responsive height */
  overflow: hidden;
  border-radius: 0; /* set to 16px if you want rounded */
  z-index: 1;
}

.hero-video__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* soft gradient so white text always reads */
.hero-video__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.25) 40%,
      rgba(0,0,0,.65) 100%
    );
}

.hero-video__content{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 0 24px;
  text-align: center;
  color: #fff;
}

.hero-eyebrow{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 10px;
}

.hero-title{
  margin: 0 0 8px;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: .2px;
}

.hero-sub{
  margin: 0 0 18px;
  max-width: 720px;
  color: #e8e8e8;
  margin-inline: auto;
}

.hero-ctas{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* outline button to pair with your .btn + .btn-light */
.btn.btn-outline{
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.btn.btn-outline:hover{
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

/* (optional) let product grid slightly overlap hero */
.container.overlap { 
  margin-top: -80px;      /* tweak to taste or remove if you don't want overlap */
  position: relative;
  z-index: 2;
}

/* mobile tweaks */
@media (max-width: 720px){
  .hero-video{ height: clamp(320px, 56vh, 460px); }
  .hero-ctas .btn{ width: auto; }
}
html { scroll-behavior: smooth; }
.container.overlap { 
  margin-top: -80px;
  position: relative;
  z-index: 2;
}
.btn.btn-outline{
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.btn.btn-outline:hover{
  background: rgba(255,255,255,.12);
}
/* Sticky footer on all pages EXCEPT the home page */
html, body {
  height: 100%;
  margin: 0;
}

body:not(.home) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body:not(.home) main { flex: 1; }
body:not(.home) .footer { margin-top: auto; }

body.privacy {
  background-color: #E0E0E0;   /* lighter grey */
}
/* set the header height */
header.nav {
  height: 65px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

/* keep the centered brand inside the 65px bar */
.brand{
  position: absolute;
  left: 50%;
  top: 0;                  /* anchor to top of header */
  height: 65px;            /* match header height */
  transform: translateX(-50%);
  display: flex;
  align-items: center;     /* vertical centering for the logo */
}

/* make the link and image fill the brand box cleanly */
.brand a{
  display: flex;
  align-items: center;
  height: 100%;
}
.brand-logo{
  height: 65px;            /* tweak to taste (<= 32px fits well in 65px) */
  width: auto;
  display: block;          /* remove baseline gap */
}

.navlinks {
  height: 65px;
  display: flex;
  align-items: center;
}

.nav-toggle {
  display: none; /* hidden by default */
  height: 65px;
  align-items: center;
}

/* show the hamburger on small screens */
@media (max-width: 720px) {
  .navlinks {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}
/* faint logo watermark in hero */
/* faint logo watermark in hero - bottom right */
.hero-video::after {
  content: "";
  position: absolute;
  bottom: 15px;   /* adjust how far from bottom */
  right: 20px;    /* adjust how far from right */
  width: 160px;   /* size control */
  height: 160px;
  background: url("assets/logo.png") no-repeat bottom right;
  background-size: contain;
  opacity: 0.15;  /* tweak: 0.04–0.1 for faintness */
  pointer-events: none;
}