.cb-catalog {
--cb-ink:#1d1d1f;
--cb-muted:#6b6b70;
--cb-line:#e4e2dd;
--cb-bg:#faf9f6;
--cb-accent:#b3261e;

  max-width:1280px;
	margin:0 auto;
	padding:24px 16px 48px;
	color:var(--cb-ink);
	font-family:inherit;
}

.cb-catalog * {
	box-sizing:border-box;
}

.cb-filters {
	display:grid;
	gap:10px;
	align-items:end;

  margin-bottom:20px;
}

.cb-filters label {
	display:flex;
	flex-direction:column;
	gap:4px;
	font-size:12px;
	color:var(--cb-muted);

  text-transform:uppercase;
	letter-spacing:.04em;
}

.cb-filters input,.cb-filters select {
	font:inherit;
	font-size:15px;
	color:var(--cb-ink);
	padding:9px 10px;

  border:1px solid var(--cb-line);
	border-radius:6px;
	background:#fff;
	width:100%;
	min-width:0;
}

.cb-filters,
.cb-filters.cb-nobrand{grid-template-columns:2fr 1fr 1fr 110px auto}

.cb-filters button {
	font:inherit;
	font-size:15px;
	padding:10px 18px;
	border:0;
	border-radius:6px;

  background:var(--cb-ink);
	color:#fff;
	cursor:pointer;
}

.cb-bar {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	margin-bottom:16px;

  font-size:14px;
	color:var(--cb-muted);
}

.cb-bar a {
	color:var(--cb-accent);
}

.cb-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
	gap:28px 20px;
	list-style:none;

  margin:0;
	padding:0;
}

.cb-card a {
	display:block;
	color:inherit;
	text-decoration:none;
}

.cb-photo {
	aspect-ratio:3/4;
	background:var(--cb-bg);
	border-radius:6px;
	overflow:hidden;
}

.cb-photo img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .3s;
}

.cb-card a:hover .cb-photo img {
	transform:scale(1.03);
}

.cb-noimg {
	display:flex;
	height:100%;
	align-items:center;
	justify-content:center;
	color:var(--cb-muted);
	font-size:13px;
}

.cb-brand {
	margin:10px 0 2px;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:var(--cb-muted);
}

.cb-name {
	margin:0;
	font-size:15px;
	line-height:1.35;
	font-weight:600;
}

.cb-meta {
	margin:4px 0 0;
	font-size:14px;
}

.cb-colours {
	margin:4px 0 0;
	font-size:13px;
	color:var(--cb-muted);
	white-space:nowrap;
	overflow:hidden;

  text-overflow:ellipsis;
}

.cb-empty,.cb-error {
	padding:48px 0;
	text-align:center;
	color:var(--cb-muted);
}

.cb-pager {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:6px;
	margin-top:40px;
	flex-wrap:wrap;
}

.cb-pager a,.cb-pager span {
	min-width:38px;
	padding:8px 12px;
	border:1px solid var(--cb-line);
	border-radius:6px;

  text-align:center;
	color:inherit;
	text-decoration:none;
	font-size:14px;
}

.cb-pager .cb-current {
	background:var(--cb-ink);
	border-color:var(--cb-ink);
	color:#fff;
}

.cb-pager .cb-gap {
	border:0;
}

/* Card sizes */
.cb-grid.cb-size-s{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px 14px}
.cb-grid.cb-size-l{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:36px 24px}
.cb-size-s .cb-name{font-size:14px}
.cb-size-s .cb-meta,.cb-size-s .cb-colours{font-size:12px}
.cb-size-l .cb-name{font-size:17px}

/* Filter bar on mid-size screens: four per row */
@media (max-width:1100px){
  .cb-filters,.cb-filters.cb-nobrand{grid-template-columns:repeat(4,1fr)}
  .cb-filters .cb-search{grid-column:span 2}
}

@media (max-width:900px) {
.cb-filters,.cb-filters.cb-nobrand {
	grid-template-columns:1fr 1fr;
}
.cb-filters .cb-search {
	grid-column:1/-1;
}

  .cb-filters button {
	grid-column:1/-1;
}
;
}

@media (max-width:520px){
  .cb-grid,.cb-grid.cb-size-m{grid-template-columns:1fr 1fr;gap:20px 12px}
  .cb-grid.cb-size-s{grid-template-columns:repeat(3,1fr);gap:16px 8px}
  .cb-grid.cb-size-l{grid-template-columns:1fr;gap:28px}
  .cb-name{font-size:14px}
  .cb-size-s .cb-name{font-size:12px}
  .cb-size-l .cb-name{font-size:16px}
}


/* Save button (heart) on each item */
.cb-card{position:relative}
.cb-save{position:absolute;top:10px;right:10px;z-index:1;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(0,0,0,.12);cursor:pointer;transition:transform .15s}
.cb-save:hover{transform:scale(1.08)}
.cb-save:focus-visible{outline:2px solid var(--cb-accent,#b3261e);outline-offset:2px}
.cb-save svg{width:20px;height:20px;fill:none;stroke:var(--cb-ink,#1d1d1f);stroke-width:1.8;transition:fill .15s,stroke .15s}
.cb-save[aria-pressed="true"] svg{fill:var(--cb-accent,#b3261e);stroke:var(--cb-accent,#b3261e)}
.cb-size-s .cb-save{top:6px;right:6px;width:30px;height:30px}
.cb-size-s .cb-save svg{width:16px;height:16px}