/* ---------------- RESET ---------------- */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', sans-serif; background:#fff8e7; color:#333; line-height:1.6; }

/* ---------------- HEADER ---------------- */
header {
  background:#6b4226; color:white; padding:15px 30px;
  display:flex; justify-content:space-between; align-items:center;
}
header .logo { font-size:30px; font-weight:bold; color:#f4f3f1; }
header nav a { color:white; margin-left:20px; text-decoration:none; font-weight:500; transition:0.3s; }
header nav a:hover { color:#d4a017; }

/* ---------------- HERO ---------------- */
.hero { text-align:center; padding:80px 20px; background:linear-gradient(to right,#d4a017,#6b4226); color:white; }
.hero h1 { font-size:40px; margin-bottom:15px; }
.hero p { font-size:20px; }
.hero button { background:white; color:#6b4226; padding:12px 25px; font-size:16px; border:none; margin-top:20px; cursor:pointer; border-radius:30px; font-weight:bold; transition:0.3s; }
.hero button:hover { background:#d4a017; color:white; }

/* ---------------- POPULAR SELLER ---------------- */
.popular-seller { text-align:center; padding:40px 20px; background:#fef4d9; border-top:3px solid #d4a017; border-bottom:3px solid #d4a017; }
.popular-seller h2 { font-size:28px; margin-bottom:10px; color:#6b4226; }
.popular-seller p { font-size:18px; font-weight:500; }

/* ---------------- PRODUCTS ---------------- */
.products { padding:60px 20px; text-align:center; }
.products h2 { font-size:30px; color:#6b4226; margin-bottom:25px; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; margin-top:20px; }
.product { background:white; padding:25px; border-radius:20px; box-shadow:0 5px 16px rgba(0,0,0,0.15); transition:0.3s; max-width:380px; margin:auto; }
.product:hover { transform:translateY(-8px); box-shadow:0 8px 20px rgba(0,0,0,0.25); }
.product img { width:100%; height:280px; border-radius:14px; margin-bottom:18px; object-fit:contain; background:#fdf8f3; }
.product h3 { font-size:20px; color:#6b4226; margin-bottom:10px; }
.product p { font-size:15px; color:#555; min-height:50px; }
.price { display:block; font-size:18px; font-weight:bold; color:#d4a017; margin:12px 0; }
.product button { background:#d4a017; color:white; padding:10px 18px; border:none; cursor:pointer; border-radius:25px; transition:0.3s; font-size:15px; font-weight:500; }
.product button:hover { background:#6b4226; }

/* ---------------- CONTACT ---------------- */
.contact { text-align:center; padding:60px 20px; background:#fff3e0; border-top:3px solid #d4a017; margin-top:50px; }
.contact h2 { font-size:28px; margin-bottom:15px; color:#6b4226; }
.contact p { font-size:18px; margin:8px 0; }

/* ---------------- FOOTER ---------------- */
footer { background:#6b4226; color:white; text-align:center; padding:18px; margin-top:50px; font-size:15px; }

/* ---------------- VIDEO ---------------- */
.video-section { text-align:center; padding:40px 20px; }
.video-section h2 { font-size:28px; margin-bottom:20px; color:#6b4226; }
.video-wrapper { position:relative; display:inline-block; max-width:700px; width:100%; }
.video-wrapper video { width:100%; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.2); cursor:pointer; }
.play-button { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:45px; color:white; background:rgba(0,0,0,0.5); border-radius:50%; padding:12px 18px; cursor:pointer; transition:0.3s; }
.play-button:hover { background:rgba(0,0,0,0.8); }
.mute-button, .fullscreen-button { position:absolute; bottom:12px; font-size:22px; color:white; background:rgba(0,0,0,0.5); border-radius:50%; padding:8px 12px; cursor:pointer; transition:0.3s; }
.mute-button { right:12px; }
.fullscreen-button { left:12px; }
.mute-button:hover, .fullscreen-button:hover { background:rgba(0,0,0,0.8); }

/* ---------------- CART OVERLAY ---------------- */
.cart-overlay {
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.5);
  z-index:900;
  display: none;
}

/* Show overlay when cart is open */
.cart-popup.open + .cart-overlay,
.cart-overlay.open {
  display: block;
}

/* ---------------- CART POPUP ---------------- */
.cart-popup {
  position: fixed; top:0; right:-400px; width:380px; height:100%; 
  background:#fff1d6; border-left:3px solid #d4a017;
  box-shadow:-6px 0 20px rgba(0,0,0,0.25); padding:20px; overflow-y:auto; 
  z-index:1000; transition:right 0.4s ease;
}
.cart-popup.open { right:0; }
.cart-popup h3 { text-align:center; color:#6b4226; margin-bottom:15px; }
.cart-popup ul { list-style:none; padding:0; }
.cart-popup li.cart-item {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
  background:white; border-radius:10px; padding:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.cart-popup li.cart-item img { width:50px; height:50px; border-radius:6px; object-fit:contain; margin-right:12px; }
.cart-popup .item-info { display:flex; align-items:center; justify-content:flex-start; flex:1; }
/* ---------------- REMOVE BUTTON UNIFORM SIZE ---------------- */
.cart-popup .remove-btn { 
  background:#d44100; color:white; border:none; padding:8px 14px; 
  font-weight:bold; border-radius:8px; cursor:pointer; font-size:14px; width:50px; text-align:center;
  transition:0.3s; 
}
.cart-popup .remove-btn:hover { background:#b33600; }

.cart-popup button { width:100%; margin-top:8px; padding:12px; border:none; border-radius:8px; font-weight:bold; cursor:pointer; }
.cart-popup button:first-of-type { background:#25d366; color:white; }
.cart-popup button:nth-of-type(2) { background:#d4a017; color:white; }
.cart-popup button:last-of-type { background:#ccc; color:#333; }