/* ========= GLOBAL BASE ========= */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
html, body{
  max-width:100%;
  overflow-x:hidden;
}
body{
  font-family:'Inter', sans-serif;
  background-color:#fdf7f1;
  color:#5a4b44;
}
a{ color:#000; text-decoration:none; }
a:hover{ color:#c28b6d; }

/* ========= ANNOUNCEMENT ========= */
.announcement{
  background-color:#a14c29;
  color:#fff;
  text-align:center;
  padding:10px;
  font-size:.9rem;
}

/* ========= HEADER ========= */
.header{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:50px;
  padding:0 15px;
  background-color:#F7E6E1;
  font-weight:bold;
}
.menu-icon a{
  color:#5a4b44;
  font-size:1.3rem;
}
.logo{
  position:absolute;
  left:50%;
  top:55%;
  transform:translate(-50%,-50%);
  height:155px;
}
.logo img{ height:100%; display:block; }

.header-right{ display:flex; align-items:center; }
.search-icon, .cart{
  color:#5a4b44;
  font-size:1.3rem;
  margin-left:5px;
}
.search-icon a, .cart a{
  color:inherit;
  position:relative;
}
.cart-badge{
  position:absolute;
  top:-8px;
  right:-10px;
  background:red;
  color:#fff;
  font-size:10px;
  padding:3px 6px;
  border-radius:50%;
  line-height:1;
}

/* ========= SEARCH OVERLAY ========= */
.search-overlay{
  display:none;
  position:absolute;
  left:0; right:0;
  height:49px;
  background:#fff;
  z-index:9999;
  padding:10px 20px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.search-overlay input[type="text"]{
  width:230px;
  font-size:16px;
  border:none;
  outline:none;
  background:transparent;
  color:#000;
      margin-left: 13px;

}
.search-overlay button{
  background:#fff;
  border:none;
  cursor:pointer;
  font-size:20px;
}

.search-overlay input,
.search-overlay button,
.search-overlay i {
  line-height: 1.3;
 
}


/* ========= WHATSAPP ========= */
.whatsapp-float{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#25d366;
  color:#fff;
  border-radius:50%;
  padding:16px;
  font-size:24px;
  z-index:1000;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  transition:transform .3s ease;
}
.whatsapp-float:hover{ transform:scale(1.1); }
.whatsapp-icon{ color:#fff; }

/* ========= OVERLAY + MOBILE MENU ========= */
#overlay{
  position:fixed;
  width:100%;
  height:100vh;
  top:0; left:0;
  background:rgba(0,0,0,.5);
  display:none;
  z-index:998;
}
.mobile-menu{
  position:fixed;
  top:0; left:0;
  width:70%;
  height:calc(var(--vh, 1vh) * 100);
  background-color:#F7E6E1;
  z-index:9999;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:translateX(-100%);
  transition:transform .3s ease-in-out;
}
.mobile-menu.show{ transform:translateX(0); }

body.menu-open, html.menu-open{
  height:100%;
  overflow:hidden;
  position:fixed;
  width:100%;
}

.mobile-menu-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:20px;
  font-weight:bold;
  margin-bottom:20px;
}
.mobile-menu-links li{
  list-style:none;
  padding:12px 0;
  border-bottom:1px solid #ccc;
}
.mobile-menu-links a{
  color:#000;
  font-weight:500;
  font-size:16px;
}

.profile-section{ display:flex; align-items:center; gap:10px; }
.profile-icon{ font-size:26px; color:#000; }
.login-link{ color:#555; font-weight:600; }

.mobile-menu-footer{
  margin-top:auto;
  padding:20px;
  border-top:1px solid #ccc;
  background:#fff;
  border-radius:12px 12px 0 0;
}

.alert-success{
  background:#d1e7dd;
  color:#0f5132;
  padding:12px 20px;
  border:1px solid #badbcc;
  border-radius:6px;
  margin:10px auto;
  width:90%;
  max-width:800px;
  text-align:center;
  font-size:15px;
  z-index:99;
}


/* ===== Sticky Footer (safe wrapper; no header/body impact) ===== */
.page-shell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content{
  flex: 1;
}