:root{
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#777;
  --accent:#c8a96a;
  --soft:#f7f5f2;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
}

/* NAV */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 60px;
  position:sticky;
  top:0;
  background:white;
}

.logo{
  font-size:20px;
  letter-spacing:3px;
  font-weight:300;
}

.logo img{
  height: 65px;
  width: auto;
  display: block;
}

nav ul{
  display:flex;
  gap:30px;
  list-style:none;
  font-size:14px;
  color:var(--muted);
}

nav ul li a{
  text-decoration: none;
  color: #777;
  font-size: 14px;
  letter-spacing: 1px;
  transition: 0.3s;
}

nav ul li a:hover{
  color: #c8a96a;
}
nav ul{
  display:flex;
  gap:30px;
  list-style:none;
}

nav ul li a{
  position: relative;
}

nav ul li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0%;
  height:1px;
  background:#c8a96a;
  transition:0.3s;
}

nav ul li a:hover::after{
  width:100%;
}

/* HERO */
.hero{
  height: 90vh;

  /* 👇 your image */
  background: 
    linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
    url("../images/organize-beauty1.jpg");

  background-size: cover;
  background-position: center;

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

/* CONTENT */
.hero-content{
  color: white;
}

/* BUTTON */
.btn{
  display:inline-block;
  margin-top:20px;
  padding:12px 28px;
  border:1px solid white;
  background:white;
  color:black;
  text-decoration:none;
  transition:0.3s;
}

.btn:hover{
  background:white;
  color:black;
}
/* SECTION */
.section{
  padding:80px 60px;
}

.section h2{
  font-weight:300;
  margin-bottom:40px;
  letter-spacing:2px;
}

/* PRODUCTS */
.products{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.product{
  background:white;
  border:1px solid #eee;
  transition:0.3s;
}

.product:hover{
  transform:translateY(-5px);
}

.product img{
  width:100%;
  height:320px;
  object-fit:cover;
}

.product-info{
  padding:20px;
}

.product-info h3{
  font-weight:400;
  margin-bottom:5px;
}

.product-info p{
  color:var(--muted);
  font-size:14px;
}

/* BANNER */
.banner{
  background:var(--soft);
  padding:80px 60px;
  text-align:center;
  margin-top:60px;
}

.banner h2{
  font-weight:300;
  font-size:36px;
}

.banner p{
  margin-top:10px;
  color:var(--muted);
}

/* FOOTER */
footer{
  padding:50px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid #eee;
}

/* RESPONSIVE */
@media(max-width:768px){
  nav{
    padding:20px;
  }

  .hero h1{
    font-size:34px;
  }

  .products{
    grid-template-columns:1fr;
  }

  .section{
    padding:50px 20px;
  }
}

a{
  color: inherit;
  text-decoration: none;
}
nav ul li a{
  color: #1a1a1a;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
  transition: 0.3s;
}

/* prevent mobile blue default */
nav ul li a:link,
nav ul li a:visited{
  color: #1a1a1a;
}

nav ul li a:hover{
  color: #c8a96a;
}
a, a:visited, a:active{
  color: inherit;
}
.btn{
  display:inline-block;
  padding:12px 28px;
  border:1px solid #1a1a1a;
  color:#1a1a1a;
  text-decoration:none;
  transition:0.3s;
}

.btn:hover{
  background:#1a1a1a;
  color:white;
}
.product-image{
  position: relative;
}
.badge{
  position: absolute;
  top: 15px;
  right: 15px;

  background: #fa8171;
  color: white;

  padding: 6px 16px;
  border-radius: 50px;

  font-size: 12px;
  letter-spacing: 1px;

  opacity: 1; /* always visible */
}
.product-container img{
  width: 100%;
  max-width: 400px; /* 👈 controls size */
  height: auto;
  object-fit: cover;
}
/* =========================
   STACKERS-STYLE PRODUCT PAGE
========================= */

/* layout spacing */
.product-container{
  display:flex;
  gap:80px;
  align-items:flex-start;
  padding:80px 60px;
}

/* image */
.product-container img.main-img{
  max-width:380px;
  border-radius:4px;
}

/* typography */
.product-info h1{
  font-size:28px;
  font-weight:300;
  letter-spacing:1px;
  margin-bottom:10px;
}

.product-info .price{
  font-size:14px;
  color:#777;
  margin-bottom:30px;
}

/* section titles */
.product-info h3{
  font-size:13px;
  font-weight:500;
  letter-spacing:1px;
  margin-top:30px;
  margin-bottom:10px;
  text-transform:uppercase;
  color:#555;
}

/* option rows */
.option-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

/* option images */
.option-row img{
  width:55px;
  height:55px;
  object-fit:cover;
  border-radius:4px;
}

/* inputs */
.product-info input[type="number"]{
  width:70px;
  padding:6px;
  border:1px solid #ddd;
  font-size:14px;
}

.product-info input[type="text"]{
  width:100%;
  max-width:260px;
  padding:8px;
  border:1px solid #ddd;
  margin-top:8px;
}

/* radio + checkbox spacing */
.product-info label{
  font-size:14px;
  color:#333;
}

/* total price */
#totalPrice{
  font-size:20px;
  font-weight:400;
  margin-top:30px;
}

/* button */
.btn{
  margin-top:20px;
  padding:12px 28px;
  border:1px solid #1a1a1a;
  background:transparent;
  color:#1a1a1a;
  font-size:14px;
  letter-spacing:1px;
  transition:0.3s;
}

.btn:hover{
  background:#1a1a1a;
  color:white;
}

/* subtle hover on options */
.option-row:hover{
  background:#f7f5f2;
  border-radius:4px;
  cursor:pointer;
  padding:4px;
}

/* mobile */
@media(max-width:768px){
  .product-container{
    flex-direction:column;
    padding:40px 20px;
    gap:40px;
  }

  .product-container img.main-img{
    max-width:100%;
  }
}
.cart-icon a{
  position: relative;
  font-size:14px;
}

#cartCount{
  background:#fa8171;
  color:white;
  border-radius:50%;
  padding:2px 6px;
  font-size:12px;
  margin-left:5px;
}
.cart-drawer{
  position: fixed;
  right: -400px;
  top: 0;
  width: 350px;
  height: 100%;
  background: white;
  box-shadow: -2px 0 15px rgba(0,0,0,0.2);
  padding: 20px;
  transition: right 0.35s ease;
  z-index: 1001;
  overflow-y: auto;
}

.cart-drawer.open{
  right: 0;
}

/* OVERLAY */
.cart-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 1000;
}

.cart-overlay.show{
  opacity: 1;
  visibility: visible;
}

/* BUTTON */
.checkout-btn{
  width: 100%;
  padding: 12px;
  background: black;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 15px;
  font-size: 16px;
}
.continue-shopping {
  margin-top: 12px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  display: inline-block;
  transition: 0.2s;
}
.continue-shopping:hover {
  color: black;
  transform: translateX(-3px);
}
.arrow {
  margin-right: 6px;
  font-size: 14px;
}
.product-description{
  margin-top:15px;
  font-size:14px;
  color:#555;
  line-height:1.6;
  max-width:400px;
}