:root {
  --cream: #F4F1EA;
  --orange: #E07B2A;
  --coral: #E3602A;
  --teal: #5FA3A3;
  --gold: #E6A200;
  --ink: #1F2937;
  --card: #ffffff;
  --muted: #6b7280;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(31,41,55,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--ink); background: radial-gradient(1000px 600px at 20% -10%, rgba(224,123,42,.18), transparent 55%), radial-gradient(900px 500px at 90% 0%, rgba(95,163,163,.18), transparent 55%), var(--cream);}
a{color:inherit;text-decoration:none}
.container{width:min(1100px, 92%); margin:0 auto;}
header{position:sticky;top:0; z-index:20; backdrop-filter: blur(10px); background: rgba(244,241,234,.75); border-bottom:1px solid rgba(31,41,55,.08);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:18px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:88px; height:88px; border-radius:50%; box-shadow: 0 6px 18px rgba(224,123,42,.18); background:#fff;}
.brand .name{font-weight:800; letter-spacing:.5px;}
.brand .tag{font-size:12px; color:var(--muted); margin-top:-2px;}
nav ul{display:flex; gap:14px; list-style:none; padding:0; margin:0; align-items:center;}
nav a{padding:10px 12px; border-radius:999px; font-weight:600; color:rgba(31,41,55,.9);}
nav a:hover{background: rgba(224,123,42,.12);}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; font-weight:800; border:1px solid rgba(31,41,55,.10); background:#fff; box-shadow: var(--shadow);}
.btn.primary{border-color: transparent; background: linear-gradient(135deg, var(--orange), var(--coral)); color:white;}
.btn.primary:hover{filter:saturate(1.1) brightness(1.02);}
.btn:hover{transform: translateY(-1px); transition: .15s ease;}
.hero{padding:54px 0 26px;}
.hero-grid{display:grid; gap:22px; grid-template-columns: 1.15fr .85fr; align-items:center;}
@media (max-width: 880px){ .hero-grid{grid-template-columns:1fr;} nav ul{display:none;} .mobile{display:block;} }
.kicker{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; background: rgba(95,163,163,.14); border:1px solid rgba(95,163,163,.25); color: rgba(31,41,55,.88); font-weight:700; font-size:12px;}
h1{font-size: clamp(34px, 4vw, 52px); line-height:1.05; margin:14px 0 10px;}
p.lead{font-size:18px; color: rgba(31,41,55,.80); line-height:1.55; margin:0 0 18px;}
.card{background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid rgba(31,41,55,.08);}
.hero-card{padding:18px;}
.hero-card img{width:100%; height:auto; border-radius: 16px; background:#fff;}
.section{padding:34px 0;}
.section h2{font-size:28px; margin:0 0 10px;}
.section p{color: rgba(31,41,55,.78); line-height:1.6; margin:0;}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:16px;}
@media (max-width: 880px){ .grid3{grid-template-columns:1fr;} }
.feature{padding:18px;}
.feature .icon{width:44px;height:44px;border-radius:14px; display:grid; place-items:center; background: rgba(224,123,42,.14); border: 1px solid rgba(224,123,42,.25); margin-bottom:10px;}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.badge{padding:8px 10px; border-radius:999px; background: rgba(224,224,224,.55); border:1px solid rgba(31,41,55,.08); font-weight:700; font-size:12px; color: rgba(31,41,55,.82);}
.table-wrap{overflow:auto; border-radius: var(--radius);}
table{width:100%; border-collapse:collapse; background:#fff;}
th,td{padding:12px 12px; border-bottom:1px solid rgba(31,41,55,.08); text-align:left;}
th{background: rgba(224,224,224,.45); font-size:12px; letter-spacing:.6px; text-transform:uppercase; color: rgba(31,41,55,.75);}
td small{color: var(--muted);margin-left:15px;}
.price{font-weight:900;}
footer{padding:26px 0 46px; color: rgba(31,41,55,.72);}
.footer-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start;}
@media (max-width: 880px){ .footer-grid{grid-template-columns:1fr;} }
input, textarea{width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(31,41,55,.14); background:#fff; font:inherit;}
textarea{min-height:120px; resize:vertical;}
.form{display:grid; gap:10px;}
.notice{font-size:12px; color: rgba(31,41,55,.65);}
@media (max-width: 880px) {
  .nav {
    position: relative;
    justify-content: space-between;
  }

/* Base styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

/* Hide hamburger by default */
.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* Nav links list */
.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}



@media (max-width: 768px) {
  .hamburger {
    display: block;
    z-index: 1001;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;          /* FULL WIDTH */
    background: #ffffff;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    margin: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-links li a {
    display: block;
    width: 100%;
    padding: 15px 0;
  }
}




#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: none;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 12px 16px;
  font-size: 18px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#backToTop:hover {
  background-color: #444;
}
.hamburger {
  display: none; /* default: hidden */
}

@media (max-width: 468px) {
  .hamburger {
    display: block; /* show only on mobile */
  }
}
@media (max-width: 768px) {
  table thead { display: none; }
  table, tr, td { display: block; width: 100%; }
  td { padding: 8px 0; }
  td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
  }
}




/* ✨ Inventory Grid Layout */
.inventory-section {
  padding: 1.2rem;
  max-width: 1200px;
  margin: auto;
}

.inventory-section h1,
.inventory-section h2 {
  text-align: center;
  margin: 1rem 0 0.7rem;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.item-card {
  
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease;
}

.item-card:hover {
  transform: translateY(-3px);
}

.item-card img {
  width: 100%;
  height: auto;
  display: block;
}

.item-info {
  padding: 0.75rem 1rem;
  text-align: left;
}

.item-info h3 {
  margin: 0.3rem 0 0.6rem;
  font-size: 1.1rem;
}

.item-info p {
  margin: 0.2rem 0;
}