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

body { 
  background:#f5f7fb; 
  color:#222; 
  padding-top:85px;
  overflow-x:hidden;
}

/* WRAPPER FIX */
#page-wrapper {
  width:100%;
  overflow:hidden;
}

/* HEADER */
#header {
  display:flex; 
  justify-content:space-between; 
  align-items:center;
  padding:20px 20px;
  background:#0b3d91; 
  color:white; 
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  flex-wrap:nowrap;
  overflow:hidden;
}

/* LOGO */
#logo { 
  display:flex; 
  align-items:center; 
  gap:8px; 
  max-width:60%;
  min-width:0;
}

#logo img { 
  height:40px; 
  max-width:100%;
  flex-shrink:0;
}

#logo span { 
  font-size:14px; 
  opacity:0.9; 
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* NAVIGATION */
#nav ul { 
  display:flex; 
  list-style:none; 
  gap:20px; 
}

#nav a { 
  text-decoration:none; 
  color:white; 
  font-weight:600; 
  transition:0.3s; 
}

#nav a:hover { color:#ff4b4b; }

#hamburger { 
  display:none; 
  cursor:pointer; 
  font-size:24px; 
}

/* CART ICON */
#cart-icon { 
  background:#ff4b4b; 
  padding:8px 12px;
  border-radius:6px; 
  cursor:pointer; 
  font-weight:bold; 
  white-space:nowrap;
}

#cart-icon:hover { background:#d92f2f; }

/* BANNER */
#banner-wrapper { 
  background:linear-gradient(135deg,#0b3d91,#1c63d5); 
  color:white; 
  padding:80px 20px; 
}

#banner { text-align:center; }

#banner h2 { 
  font-size:36px; 
  margin-bottom:10px; 
}

#banner p { 
  font-size:18px; 
  margin-bottom:25px; 
}

/* BUTTON */
.button { 
  display:inline-block; 
  padding:10px 25px; 
  border-radius:6px; 
  text-decoration:none; 
  font-weight:bold; 
  cursor:pointer;
}

.button.primary { 
  background:#ff3c3c; 
  color:white; 
}

.button.primary:hover { background:#d62c2c; }

/* PRODUCTS */
#features-wrapper { padding:60px 20px; }

.row { 
  display:flex; 
  gap:20px; 
  flex-wrap:wrap; 
  justify-content:center; 
}

.col-4 { 
  width:300px; 
}

/* PRODUCT CARD */
.product { 
  background:white; 
  border-radius:10px; 
  box-shadow:0 5px 15px rgba(0,0,0,0.1); 
  overflow:hidden; 
  transition:0.3s; 
}

.product:hover { 
  transform:translateY(-6px); 
  box-shadow:0 10px 25px rgba(0,0,0,0.15); 
}

/* ✅ REDUCED HEIGHT */
.product img { 
  width:100%; 
  height:160px; 
  object-fit:cover;  
  object-position:center; 
}

/* ✅ REDUCED PADDING */
.product .inner { 
  padding:14px; 
  text-align:center; 
}

/* ✅ SLIGHTLY SMALLER TEXT */
.product h2 { 
  color:#0b3d91; 
  margin-bottom:5px; 
  font-size:16px;
}

.product p { 
  color:#ff3c3c; 
  font-size:16px; 
  font-weight:bold; 
  margin-bottom:10px; 
}

/* CART PANEL */
#cart-panel {
  position:fixed; 
  right:-350px; 
  top:90px; 
  width:350px; 
  height:calc(100% - 90px);
  background:white; 
  padding:25px; 
  box-shadow:-4px 0 20px rgba(0,0,0,0.2);
  transition:0.4s; 
  z-index:999;
}

#cart-panel.open { right:0; }

#cart-panel h3 { color:#0b3d91; }

#close-cart { 
  cursor:pointer; 
  font-size:18px; 
  color:#ff3c3c; 
}

/* CART ITEMS */
#cart-items { 
  margin:15px 0; 
  max-height:300px; 
  overflow:auto; 
}

.cart-item { 
  display:flex; 
  justify-content:space-between; 
  margin-bottom:10px; 
  padding-bottom:10px; 
  border-bottom:1px solid #eee; 
}

/* TOAST */
#toast {
  position:fixed; 
  bottom:20px; 
  right:20px; 
  background:#0b3d91; 
  color:white; 
  padding:12px 18px; 
  border-radius:6px;
  opacity:0; 
  transition:0.4s; 
  z-index:1000;
}

#toast.show { opacity:1; }

/* ================= MOBILE ================= */
@media (max-width:768px) {

  #header {
    padding:12px;
  }

  #logo {
    max-width:55%;
  }

  #logo img {
    height:32px;
  }

  #logo span {
    font-size:12px;
  }

  /* NAV */
  #nav ul { 
    flex-direction:column; 
    background:#0b3d91; 
    position:absolute; 
    top:70px; 
    right:0; 
    width:180px; 
    display:none; 
    padding:10px; 
    border-radius:0 0 0 10px; 
  }

  #nav ul.show { display:flex; }

  #hamburger { display:block; color:white; }

  .row { gap:12px; }

  /* ✅ 2 COLUMNS */
  .col-4 { 
    width:calc(50% - 12px); 
  }
}

/* SMALL PHONES */
@media (max-width:480px) {

  #logo {
    max-width:50%;
  }

  #logo img {
    height:28px;
  }

  #logo span {
    font-size:11px;
  }

  #cart-icon {
    padding:6px 10px;
    font-size:13px;
  }

  /* ✅ STILL 2 COLUMNS */
  .col-4 { 
    width:calc(50% - 10px); 
  }

  .product img {
    height:150px; /* slightly smaller for tiny screens */
  }
  @media (max-width:768px) {
  .product .button {
    white-space: nowrap;
    width: 100%;
    font-size: 14px;
    padding: 12px;
  }
}
}