/* CG Productions – minimal responsive grid */
.cg-prod-wrap { --gap: 16px; padding: 4rem 12rem; }
.cg-prod-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--gap);
  margin-bottom: 5rem;
}
.cg-prod-filters { display: flex; gap: 12px; align-items: center;justify-content: center; }

.cg-filter:hover{
	color:white;
}

.cg-filter.active {
	letter-spacing: .2px;
	text-transform:none;
	font-size:1rem;
	display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 18%;
    min-height: 44px;
    border-radius: 4px;
    padding: 10px 18px;
    text-decoration: none;
    border: 1px solid #333333;
    background:#333333;
    color: white;
    transition: transform .06s 
ease, box-shadow .2s 
ease, background .2s 
ease, color .2s 
ease;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

.cg-filter {
	letter-spacing: .2px;
	text-transform:none;
	font-size:1rem;
	display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 18%;
    min-height: 44px;
    border-radius: 4px;
    padding: 10px 18px;
    text-decoration: none;
    border: 1px solid #333333;
    background:white;
    color: #333333;
    transition: transform .06s 
ease, box-shadow .2s 
ease, background .2s 
ease, color .2s 
ease;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

.cg-filter.active:hover {
	letter-spacing: .2px;
	background:#AEE8F4;
  border:1px solid #AEE8F4;
  color: #333333;
}

.cg-filter:hover {
	letter-spacing: .2px;
	background:#AEE8F4;
  border:1px solid #AEE8F4;
  color: #333333;
}

.cg-prod-search input[type="search"]{
  padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; min-width: 220px;
}

.cg-prod-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--gap);
}
@media (max-width: 1024px){
  .cg-prod-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .cg-prod-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.cg-prod-item{ aspect-ratio: 2/3; overflow: hidden; border-radius: 8px; }
.cg-prod-item img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-prod-ph{ width: 100%; height: 100%; background: #f3f3f3; }

.cg-prod-item a {
  pointer-events: none;
  cursor: default;
}