/* ==========================================================================
   Canteen Hub — Customer storefront
   ========================================================================== */
:root{
  --bg:#fbf7f4;
  --surface:#ffffff;
  --ink:#20130d;
  --ink-2:#5c4b42;
  --muted:#9b8b82;
  --border:#efe6df;
  --brand:#ff5722;
  --brand-ink:#e64a19;
  --brand-soft:#fff0ea;
  --accent:#1f9d57;
  --green:#1f9d57; --amber:#f59e0b; --red:#e0412f;
  --radius:16px; --radius-sm:12px; --radius-lg:26px;
  --shadow-sm:0 2px 8px rgba(40,20,10,.06);
  --shadow:0 12px 30px rgba(40,20,10,.10);
  --shadow-lg:0 24px 60px rgba(40,20,10,.16);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Plus Jakarta Sans',var(--font);
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-display); letter-spacing:-.02em; margin:0}
a{color:var(--brand-ink); text-decoration:none}
img{max-width:100%}
::selection{background:var(--brand-soft)}

/* ---------- top nav ---------------------------------------------------- */
.site-nav{
  position:sticky; top:0; z-index:50; background:var(--surface);
  border-bottom:1px solid var(--border);
}
.site-nav .inner{max-width:1180px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:20px}
.site-nav .logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--ink)}
.site-nav .logo .mark{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),#ff8a4c); color:#fff; box-shadow:0 6px 14px rgba(255,87,34,.35)}
.site-nav .links{display:flex; align-items:center; gap:6px; margin-left:auto}
.site-nav .links a{padding:8px 14px; border-radius:10px; color:var(--ink-2); font-weight:600; font-size:.9rem}
.site-nav .links a:hover{background:var(--brand-soft); color:var(--brand-ink)}
.site-nav .links a.active{color:var(--brand-ink)}
.cart-btn{position:relative; display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:var(--ink); color:#fff!important}
.cart-btn:hover{background:#3a241a}
.cart-btn .count{position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:.7rem; font-weight:700; display:grid; place-items:center; border:2px solid var(--surface)}
.btn-ghost{border:1px solid var(--border); padding:8px 16px; border-radius:11px; font-weight:600; color:var(--ink-2)}
.nav-toggle{display:none; background:none; border:none; font-size:1.3rem; color:var(--ink); margin-left:auto}

/* ---------- buttons -------------------------------------------------- */
.btn2{display:inline-flex; align-items:center; gap:8px; justify-content:center; font-family:var(--font);
  font-weight:700; border:none; border-radius:12px; padding:12px 22px; font-size:.95rem; cursor:pointer;
  transition:transform .12s, box-shadow .16s, background .16s}
.btn2:active{transform:translateY(1px)}
.btn2-primary{background:var(--brand); color:#fff; box-shadow:0 10px 24px rgba(255,87,34,.32)}
.btn2-primary:hover{background:var(--brand-ink); color:#fff; box-shadow:0 14px 30px rgba(255,87,34,.4)}
.btn2-dark{background:var(--ink); color:#fff}
.btn2-dark:hover{background:#000; color:#fff}
.btn2-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--border)}
.btn2-ghost:hover{border-color:var(--brand); color:var(--brand-ink)}
.btn2-sm{padding:8px 15px; font-size:.85rem; border-radius:10px}
.btn2-block{width:100%}

/* ---------- layout ------------------------------------------------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.section{padding:38px 0}

/* ---------- hero -------------------------------------------------- */
.hero{
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(255,255,255,.28), transparent),
    linear-gradient(135deg,#ff5722,#ff8a3d);
  color:#fff; padding:56px 0 96px; position:relative; overflow:hidden;
}
.hero::after{content:""; position:absolute; right:-80px; bottom:-120px; width:340px; height:340px; border-radius:50%;
  background:rgba(255,255,255,.10)}
.hero .wrap{position:relative; z-index:2}
.hero .eyebrow{font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; opacity:.85}
.hero h1{font-size:2.6rem; font-weight:800; margin:10px 0 8px; line-height:1.1}
.hero p{font-size:1.05rem; opacity:.92; margin:0; max-width:520px}
.hero .stats{display:flex; gap:26px; margin-top:24px}
.hero .stats b{font-family:var(--font-display); font-size:1.3rem; display:block}
.hero .stats span{font-size:.8rem; opacity:.85}

.searchbar{
  max-width:640px; margin:-56px auto 0; position:relative; z-index:20; background:var(--surface);
  border-radius:16px; box-shadow:var(--shadow); padding:10px; display:flex; align-items:center; gap:10px;
}
.searchbar i{color:var(--muted); margin-left:12px}
.searchbar input{flex:1; border:none; outline:none; font-size:1rem; padding:12px 6px; background:transparent; color:var(--ink)}

/* ---------- offer strip ---------------------------------------- */
.offers{display:flex; flex-direction:column; gap:10px; margin-top:26px}
.offer{
  display:flex; align-items:center; gap:12px; background:#fff; border:1px dashed #f6b99e;
  border-radius:14px; padding:12px 16px; color:var(--brand-ink); font-size:.92rem;
}
.offer i{font-size:1.1rem}

/* ---------- category chips ------------------------------------ */
.chips{display:flex; gap:10px; overflow-x:auto; padding:6px 0 12px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0; padding:9px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--border);
  color:var(--ink-2); font-weight:600; font-size:.88rem; white-space:nowrap; transition:.15s;
}
.chip:hover{border-color:var(--brand); color:var(--brand-ink)}
.chip.active{background:var(--ink); border-color:var(--ink); color:#fff}

/* ---------- product grid ------------------------------------ */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; margin-top:8px}
.pcard{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s;
}
.pcard:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.pcard .ph{position:relative; aspect-ratio:4/3; background:#f4ece7; overflow:hidden}
.pcard .ph img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.pcard:hover .ph img{transform:scale(1.06)}
.pcard .ribbon{position:absolute; top:10px; left:10px; background:var(--ink); color:#fff; font-size:.68rem;
  font-weight:700; padding:4px 9px; border-radius:999px; letter-spacing:.03em}
.pcard .ribbon.low{background:var(--amber)}
.pcard .ribbon.hot{background:var(--brand)}
.pcard .pb{padding:14px 15px 16px; display:flex; flex-direction:column; flex:1}
.pcard .cat{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.pcard h3{font-size:1.02rem; font-weight:700; margin:3px 0 4px}
.pcard .desc{font-size:.83rem; color:var(--ink-2); flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcard .pf{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--border)}
.pcard .price{font-family:var(--font-display); font-weight:800; font-size:1.05rem}
.pcard .add{border:none; background:var(--brand-soft); color:var(--brand-ink); width:38px; height:38px; border-radius:11px;
  font-size:.95rem; cursor:pointer; display:grid; place-items:center; transition:.15s}
.pcard .add:hover{background:var(--brand); color:#fff}
.pcard .sold{font-size:.78rem; font-weight:700; color:var(--muted)}

.empty{text-align:center; padding:60px 20px; color:var(--muted)}
.empty i{font-size:2.4rem; opacity:.4; margin-bottom:12px}

/* ---------- generic card / panel --------------------------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.panel-p{padding:22px}
.h-title{font-family:var(--font-display); font-weight:800; font-size:1.5rem; margin-bottom:4px}

/* ---------- cart ----------------------------------------- */
.cart-row{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--border)}
.cart-row:last-child{border-bottom:none}
.cart-row img{width:66px; height:66px; border-radius:12px; object-fit:cover}
.cart-row .nm{font-weight:700}
.stepper{display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; overflow:hidden}
.stepper button{border:none; background:var(--surface); width:32px; height:32px; cursor:pointer; color:var(--ink)}
.stepper button:hover{background:var(--brand-soft); color:var(--brand-ink)}
.stepper .q{min-width:34px; text-align:center; font-weight:700}
.summary{position:sticky; top:88px}
.summary .line{display:flex; justify-content:space-between; margin-bottom:10px; font-size:.92rem; color:var(--ink-2)}
.summary .total{display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--ink)}
.promo-in{display:flex; gap:8px; margin:14px 0}
.promo-in input{flex:1; border:1px solid var(--border); border-radius:10px; padding:10px 12px; text-transform:uppercase; font-weight:600}

/* ---------- forms --------------------------------------- */
.field{margin-bottom:16px}
.field label{display:block; font-weight:600; font-size:.85rem; color:var(--ink-2); margin-bottom:6px}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:.95rem;
  font-family:var(--font); background:var(--surface); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}

/* ---------- alerts ------------------------------------- */
.note{border-radius:12px; padding:13px 16px; font-size:.9rem; margin-bottom:14px; display:flex; gap:10px; align-items:flex-start}
.note-ok{background:#e9f7ef; color:#0e6b3c; border:1px solid #bfe6cf}
.note-err{background:#fdeceb; color:#b3271b; border:1px solid #f4c9c4}
.note-warn{background:#fef4e6; color:#96590a; border:1px solid #f6ddb4}

/* ---------- star picker -------------------------------- */
.stars{display:inline-flex; flex-direction:row-reverse; gap:4px}
.stars input{display:none}
.stars label{font-size:2rem; color:#e2d6ce; cursor:pointer; transition:.1s}
.stars input:checked ~ label,
.stars label:hover, .stars label:hover ~ label{color:var(--amber)}

/* ---------- testimonial -------------------------------- */
.tmt{border-bottom:1px solid var(--border); padding:12px 0}
.tmt:last-child{border-bottom:none}
.tmt .who{font-weight:700; font-size:.9rem}
.tmt .rt{color:var(--amber); font-size:.85rem}
.tmt .msg{font-size:.86rem; color:var(--ink-2)}

/* ---------- footer ------------------------------------- */
.site-foot{background:var(--ink); color:#d9c9c0; padding:40px 0 30px; margin-top:60px}
.site-foot .inner{max-width:1180px; margin:0 auto; padding:0 20px; display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between}
.site-foot h4{color:#fff; font-size:1.05rem; margin-bottom:6px}
.site-foot .muted{font-size:.85rem; opacity:.7}

/* ---------- mobile cart bar --------------------------- */
.mcart{display:none}

@media (max-width:860px){
  .hero h1{font-size:2rem}
  .grid2{grid-template-columns:1fr}
  .site-nav .links{display:none; position:absolute; top:64px; left:0; right:0; background:var(--surface);
    flex-direction:column; padding:12px; border-bottom:1px solid var(--border); gap:2px}
  .site-nav .links.open{display:flex}
  .site-nav .links a{width:100%}
  .nav-toggle{display:block}
  .cart-btn{order:-1}
  .summary{position:static}
}