/* ===== THEME ===== */
:root{
  --bg:#f7faf7; --card:#fff; --line:#e6e8eb; --text:#0f172a; --muted:#475569;
  --primary:#10b981; --primary-600:#059669;
  --accent:#f59e0b; --accent-600:#d97706;
  --ring:rgba(16,185,129,.28);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* ===== UNIFIED HEADER (single row, green) ===== */
.site-header{
  background: linear-gradient(90deg, var(--primary), var(--primary-600));
  color:#fff; border-bottom:none; position:sticky; top:0; z-index:60;
}
.site-header a{ color:#fff; text-decoration:none }
.site-header a:hover{ text-decoration:underline }

/* One-row grid layout: brand | menu | search | right */
.header-inner.one-row{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:grid; align-items:center; column-gap:12px;
  grid-template-columns: auto minmax(340px,auto) 1fr auto;
}

/* Brand */
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{color:#fff}
.brand-text strong{font-weight:800}
.brand-sub{font-size:12px;opacity:.9}

/* Departments (desktop) */
.main-nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.main-nav .nav-link{
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.15);
  transition:.15s; font-weight:600;
}
.main-nav .nav-link:hover{background:rgba(255,255,255,.3)}

/* Search in header */
.search-form{display:flex;gap:8px;width:100%}
.search-input{
  flex:1; padding:10px 12px; border:none; border-radius:8px; outline:none; background:#fff;
}
.search-btn{
  padding:10px 14px; border:none; border-radius:8px;
  background:var(--accent); color:#fff; font-weight:700; cursor:pointer;
}
.search-btn:hover{background:var(--accent-600)}

/* Right side */
.header-right{display:flex;align-items:center;gap:10px}
.city-pill{background:rgba(255,255,255,.15); padding:6px 10px; border-radius:999px; font-size:.9rem}
.icon-link{padding:6px 8px; border-radius:8px}
.icon-link:hover{background:rgba(255,255,255,.2)}
.hamburger{
  display:none; font-size:20px; line-height:1; padding:6px 10px;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:8px; cursor:pointer;
}
.hamburger:hover{background:rgba(255,255,255,.2)}

/* Mobile drawer */
.mobile-menu{
  position: sticky; top:0; z-index:70;
  background: linear-gradient(90deg, var(--primary), var(--primary-600));
  padding:8px 12px 14px; animation: menuSlide .18s ease-out;
}
@keyframes menuSlide{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)}}
.mobile-nav{display:grid; gap:8px; max-width:1200px; margin:0 auto}
.mobile-link{
  display:block; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.12); color:#fff; text-decoration:none; font-weight:600;
}
.mobile-link:hover{background:rgba(255,255,255,.25)}
.mobile-menu hr{border:0; border-top:1px solid rgba(255,255,255,.25); margin:6px 0}

/* Responsive header */
@media (max-width:1024px){
  .header-inner.one-row{
    grid-template-columns: auto 1fr auto;  /* brand | search | right */
  }
  .main-nav{display:none}
  .hamburger{display:inline-block}
}
@media (max-width:680px){
  .header-inner.one-row{
    grid-template-columns: 1fr; row-gap:8px;
  }
  .brand{justify-content:center}
  .search-form{order:2}
  .header-right{justify-content:center; order:3}
}

/* ===== HERO ===== */
.hero{background:linear-gradient(180deg,#fff,#f3fff6);border-bottom:1px solid var(--line)}
.hero-inner{max-width:1200px;margin:0 auto;padding:22px 16px;display:grid;grid-template-columns:1.6fr .4fr;gap:16px;align-items:center}
.hero h1{margin:0 0 6px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--primary);background:var(--primary);color:#fff;text-decoration:none;font-weight:700;transition:.15s}
.btn:hover{background:var(--primary-600);border-color:var(--primary-600)}
.btn.ghost{background:#fff;color:var(--primary)}
.btn.ghost:hover{background:#ecfdf5}
.hero-inner > div > div:last-child{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
@media (max-width:860px){.hero-inner{grid-template-columns:1fr;text-align:center}}

/* ===== HOME WRAPPER ===== */
.home{max-width:1200px;margin:0 auto;padding:10px 16px 28px}
.row-head{display:flex;align-items:center;justify-content:space-between;margin:12px 2px 8px}
.row-head h2{margin:0;font-size:18px}
.row-head a{text-decoration:none;color:var(--primary)}
.row-head a:hover{text-decoration:underline}

/* ===== HOME PRODUCT GRID ===== */
.home .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;justify-items:center}

/* ===== CARD (shared) ===== */
.card{
  width:190px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.06)}
.img-wrap{background:#f7f7f7;height:150px;display:flex;align-items:center;justify-content:center}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.info{padding:10px;text-align:center}
.name{font-size:14px;line-height:1.25;min-height:36px}
.meta{font-size:12px;color:var(--muted);margin-top:2px}
.price{font-weight:800;margin-top:6px;color:var(--accent)}
.add-btn{width:100%;padding:10px;border-radius:10px;border:1px solid var(--primary);background:var(--primary);color:#fff;font-weight:800;cursor:pointer;margin-top:8px;transition:.15s}
.add-btn:hover{background:var(--primary-600);border-color:var(--primary-600)}

/* ===== DEPARTMENT HERO ===== */
.dept-hero{text-align:center;padding:20px 10px}
.dept-title{font-size:2rem;font-weight:800;margin:0;color:var(--primary)}
.dept-city{font-size:1rem;color:var(--muted);margin-top:4px}
.dept-menu{margin-top:16px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.dept-menu a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:#fff;color:var(--text)}
.dept-menu a:hover{background:var(--primary);color:#fff}

/* ===== DEPARTMENT CONTENT ===== */
.dept-content{max-width:1200px;margin:0 auto;padding:0 16px 28px}
.cat-head{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 10px}
.cat-title{margin:0;font-size:18px;font-weight:800}
.see-all{text-decoration:none;color:var(--primary);font-weight:600}
.see-all:hover{text-decoration:underline}

/* Four across (responsive) */
.cat-grid.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1024px){.cat-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cat-grid.four{grid-template-columns:1fr}}

/* Department cards fill column width */
.dept-content .card{width:auto}
.dept-content .img-wrap{height:160px}

/* ===== Quantity controls ===== */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.qty-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.qty-wrap{
  display:inline-flex; align-items:center; overflow:hidden;
  border:1px solid var(--line); border-radius:10px; background:#fff;
}
.qty-input{
  width:64px; text-align:center; border:0; padding:8px 6px; outline:none; font-weight:700;
  -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }
.qty-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:#fff; border:0; cursor:pointer; font-size:18px; font-weight:700;
  -webkit-appearance:none; appearance:none; line-height:1; user-select:none;
  border-right:1px solid var(--line);
}
.qty-btn:last-of-type{ border-right:0; border-left:1px solid var(--line); }

/* ===== UTIL ===== */
.empty{padding:36px;text-align:center;color:#475569}