<?php
session_start();
$cartCount = isset($_SESSION['cart'])
  ? array_sum(array_column($_SESSION['cart'], 'qty'))
  : 0;
?>
<style>
*{box-sizing:border-box;margin:0;padding:0}

/* HEADER */
.site-header{
  width:100%;
  background:linear-gradient(90deg,#2F6B2F,#245A24);
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

.header-container{
  width:100%;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.logo{
  font-size:23px;
  font-weight:700;
  color:#ffffff;
  text-decoration:none;
}

/* NAV */
.nav{
  display:flex;
  gap:28px;
}

.nav a{
  color:#ffffff;
  text-decoration:none;
  font-size:16px;
  position:relative;
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#F2C94C;
  transition:0.3s;
}

.nav a:hover::after,
.nav a.active::after{
  width:100%;
}

/* RIGHT */
.header-right{
  display:flex;
  align-items:center;
  gap:24px;
}

/* CART */
.cart-icon{
  position:relative;
  display:flex;
  align-items:center;
}

.cart-icon svg{
  width:32px;
  height:32px;
  stroke:#ffffff;
  stroke-width:2.4;
}

.cart-count{
  position:absolute;
  top:-6px;
  right:-8px;
  background:#F2C94C;
  color:#000;
  font-size:12px;
  font-weight:700;
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* MOBILE */
.menu-btn{
  display:none;
  font-size:26px;
  color:#ffffff;
}

@media(max-width:900px){
  .nav{display:none}
  .menu-btn{display:block}
}
</style>

<header class="site-header">
  <div class="header-container">

    <a href="index.php" class="logo">Organic Store</a>

    <nav class="nav">
      <a href="index.php">Home</a>
      <a href="products.php" class="active">Products</a>
      <a href="about.php">About</a>
      <a href="contact.php">Contact</a>
    </nav>

    <div class="header-right">
      <a href="cart.php" class="cart-icon">
        <svg viewBox="0 0 24 24" fill="none"
          stroke-linecap="round" stroke-linejoin="round">
          <circle cx="9" cy="21" r="1.4"></circle>
          <circle cx="20" cy="21" r="1.4"></circle>
          <path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"></path>
        </svg>
        <span class="cart-count"><?= $cartCount ?></span>
      </a>
      <div class="menu-btn">☰</div>
    </div>

  </div>
</header>
