/* Banner */
.canna-menu{ width:100%; max-width:none; margin:0; }
.canna-banner{
  background:#000; color:#fff; text-align:center;
  padding:10px 12px; font-weight:700; letter-spacing:.3px;
  margin-bottom:12px; border-radius:6px;
}

/* Header: title left / filters right */
.canna-header{
  display:grid; grid-template-columns: 1fr auto; align-items:end;
  gap:16px; margin: 12px 0 18px;
}
.canna-header h2{ margin:0; }
.canna-header .filters{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.canna-header .filters select, .canna-header .filters input{ width:280px; }
#canna-grid{ margin-top:8px; }

/* Grid & cards (portrait images) */
.canna-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }
.canna-card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 4px 12px rgba(0,0,0,.05); overflow:hidden; transition:transform .2s, box-shadow .2s; }
.canna-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.1); }
.canna-img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:#f1f5f9; }
.canna-body{ padding:16px; display:flex; flex-direction:column; gap:8px; }
.canna-name{ font-weight:700; font-size:18px; }
.field-row{ display:flex; gap:6px; font-size:13px; color:#475569; }
.field-label{ font-weight:700; color:#111827; }
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.badge.in{ background:#ecfdf5; color:#065f46; }
.badge.out{ background:#fef2f2; color:#991b1b; }

/* Mobile: force exactly 3 cards per row */
@media (max-width: 768px){
  .canna-header{ grid-template-columns: 1fr; }
  .canna-header .filters{ align-items:stretch; }
  .canna-header .filters select, .canna-header .filters input{ width:100%; }
  .canna-grid{ grid-template-columns: repeat(3, 1fr); gap:8px; }
  .canna-body{ padding:10px; }
  .canna-name{ font-size:14px; }
  .field-row{ font-size:12px; }
}