/* ===========================
   Gridzilla Items Catalog — Dark Mode
   Palette refs:
   Greens:  #0B846E #00DA5E #00F067 #3DFF94 #7FFFC2 #CCFFE5
   Purples: #000050 #050061 #070087 #1700D5 #4129FF #868BFF #ADA2FF #DAD7FF
   Accent:  #ff44ee
   =========================== */

.gridz-items-catalog{
  /* Core tokens */
  --bg:         #000050;      /* deep navy */
  --bg-elev:    #050061;      /* slightly raised surfaces */
  --bg-card:    #070087;      /* cards */
  --border:     #4129FF;
  --fg:         #EDEBFF;      /* main text (light lilac-white) */
  --muted:      #ADA2FF;      /* subtle text */
  --muted-2:    #868BFF;      /* secondary accents */
  --chip-bg:    rgba(218,215,255,0.08);
  --chip-bg-on: #ff44ee;
  --chip-fg-on: #0b0020;      /* readable on accent */
  --accent:     #ff44ee;      /* MAIN accent */
  --accent-2:   #3DFF94;      /* success / confirm */
  --shadow:     0 6px 16px rgba(0,0,0,.45);
  --gap:        14px;
  --radius:     16px;
	--cols: 6;
}

.gridz-items-controls{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center;margin:10px 0 18px}

/* Search */
.gridz-items-search{
  flex:1 1 260px;min-width:200px;
  padding:10px 12px;border:1px solid var(--border) !important;
  background: var(--bg-elev); color: var(--fg);
  outline:none !important; box-shadow:none;
	 border-radius: 999px !important;
}
.gridz-items-search::placeholder{color: rgba(237,235,255,.55);}
.gridz-items-search:focus{border-color: var(--accent);}

/* Filters (category pills) */
.gridz-items-filters{display:flex;gap:8px;flex-wrap:wrap}
.gridz-items-filters button{
  padding:8px 12px;border:1px solid var(--border);
  background: var(--chip-bg); color: var(--fg);
  border-radius:999px; cursor:pointer; transition:all .15s ease;
}
.gridz-items-filters button:hover{border-color: var(--muted-2)}
.gridz-items-filters button.is-active{
  background: var(--chip-bg-on); color: var(--chip-fg-on);
  border-color: var(--chip-bg-on);
}

/* Grouping */
.gridz-items-groups{display:grid;grid-template-columns:1fr;gap:28px}
.gridz-group{background:transparent}
.gridz-group-title{
  font-size:18px;margin:4px 0 10px;color: var(--muted-2);
}

/* Grid + Cards */
.gridz-items-grid{
  display:grid;grid-template-columns:repeat(var(--cols,4), minmax(0,1fr));gap:var(--gap)
}
.gridz-item{
  background: var(--bg-card); border:1px solid var(--border);
  border-radius: var(--radius); overflow:hidden;;
  cursor:pointer; outline:none; transition:transform .06s ease, border-color .15s ease;
}
.gridz-item:hover{transform: translateY(-1px); border-color: rgba(255,68,238,.45)}
.gridz-item:focus{}
.gridz-item-thumb{
  position:relative; aspect-ratio:1/1;
  background: linear-gradient(180deg, #070087, #000050);
  display:flex; align-items:center; justify-content:center
}
.gridz-item-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gridz-no-thumb{font-size:12px;color: rgba(237,235,255,.6)}
.gridz-copy{
  position:absolute;right:10px;bottom:10px;padding:6px 10px;
  border:none;border-radius:10px;background: var(--accent);color: var(--chip-fg-on);
  font-size:12px;opacity:.95; transition:opacity .15s ease, transform .05s ease;
}
.gridz-copy:hover{opacity:1; transform: translateY(-1px)}

/* Title + meta */
.gridz-item-title{font-size:16px;line-height:1.25;padding:10px 12px 0;margin:0;color:var(--fg)}
.gridz-item-meta{display:flex;gap:8px;align-items:center;padding:8px 12px 12px;color:var(--muted)}
.gridz-badge{
  background: linear-gradient(135deg,#1700D5,#4129FF);
  color:#fff;border-radius:999px;padding:2px 8px;font-size:12px
}
.gridz-arg{font-size:12px;color: var(--muted)}

/* Empty states */
.gridz-empty{opacity:.75;color:var(--muted);padding:12px}

/* Toast */
.gridz-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background: var(--accent); color: var(--chip-fg-on);
  padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s ease
}
.gridz-toast.is-show{opacity:1}

/* Page background helper (optional) */
body{background:#000050;}
/* If your theme already sets bg, feel free to remove the line above. */


/* Responsive */
@media (max-width: 1200px){
  .gridz-items-grid{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width: 900px){
  .gridz-items-grid{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width: 560px){
  .gridz-items-controls{gap:10px}
  .gridz-items-search{flex:1 1 100%}
  .gridz-items-filters{gap:6px}
  .gridz-items-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
  .gridz-item-title{font-size:14px}
}
@media (max-width: 380px){
  .gridz-items-grid{grid-template-columns:1fr;}
}