/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Segoe UI, Arial, sans-serif;
  background:#f4f4f4;
}

/* ===== TOP BRAND BAR ===== */
.top-brand{
  background:#b10f0f;
  color:#fff;
  text-align:center;
  padding:12px;
  font-size:22px;
  font-weight:700;
  position:relative;
  letter-spacing:1px;
}

.login-btn{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  color:#b10f0f;
  padding:7px 14px;
  font-size:13px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition:all 0.25s ease;
}

.login-btn:hover{
  background:#f2f2f2;
  transform:translateY(-50%) scale(1.05);
}

/* ===== HEADER ===== */
.main-header{
  background:#fff;
  padding:10px 20px;
  border-bottom:2px solid #b10f0f;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

.logo img{
  height:55px;
}

/* NAV */
nav{
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
}

nav a{
  margin-left:18px;
  text-decoration:none;
  color:#b10f0f;
  font-weight:600;
  font-size:14px;
  padding-bottom:3px;
  transition:0.25s;
}

nav a:hover{
  border-bottom:2px solid #b10f0f;
}

/* ===== MAIN CONTAINER ===== */
.container{
  max-width:1100px;
  margin:25px auto;
  padding:0 15px;
}

/* GRID */
.menu-grid{
  display:flex;
  gap:22px;
  flex-wrap:wrap; /* IMPORTANT FIX */
}

/* CATEGORY BOX */
.category{
  background:#fff;
  border:2px solid #b10f0f;
  flex:1;
  min-width:280px; /* prevents squeeze */
  transition:0.25s ease;
}

/* TITLE */
.category-title{
  background:#b10f0f;
  color:#fff;
  padding:10px;
  text-align:center;
  font-size:15px;
  font-weight:700;
}

/* ITEM */
.item{
  display:block;
  padding:11px 14px;
  border-bottom:1px solid #e0e0e0;
  text-decoration:none;
  color:#000;
  font-size:14px;
  transition:all 0.2s ease;
}

/* ITEM HOVER — ORIGINAL */
.item:hover{
  background:#b10f0f;
  color:#fff;
  padding-left:18px;
}

/* PRICE */
.price{
  float:right;
  color:#b10f0f;
  font-weight:600;
  transition:0.2s;
}

.item:hover .price{
  color:#fff;
}

/* ===== FOOTER ===== */
footer{
  background:#b10f0f;
  color:#fff;
  margin-top:35px;
}

.footer-inner{
  max-width:1100px;
  margin:auto;
  padding:14px;
  display:flex;
  justify-content:space-between;
  font-size:14px;
  align-items:center;
}

/* ========================= */
/* ===== MOBILE FIX ONLY ==== */
/* ========================= */

@media(max-width:600px){

  .menu-grid{
    flex-direction:column;
  }

  .category{
    width:100%;
  }

  nav{
    width:100%;
    justify-content:center;
    margin-top:8px;
  }

  nav a{
    margin:6px 10px;
  }

  .footer-inner{
    flex-direction:column;
    gap:6px;
    text-align:center;
  }
}