/* Kolerlar katalogi — chrome projects.css dan keladi, bu fayl rang gridi uchun */

.colhero{padding:clamp(28px,5vw,60px) 0 clamp(18px,2.5vw,28px);}
.colhero .eyebrow{margin-top:14px;display:block;}
.colhero h1{font-size:clamp(30px,4vw,52px);margin:14px 0 14px;}
.colhero p{font-size:17px;max-width:64ch;color:var(--text);margin-bottom:26px;}

.colsearch{position:relative;max-width:520px;}
.colsearch .i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--stone);width:18px;height:18px;}
.colsearch input{width:100%;font-family:var(--f-body);font-size:15px;color:var(--ink);background:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r-pill);padding:13px 18px 13px 44px;transition:border-color .2s,box-shadow .2s;}
.colsearch input:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 4px rgba(44,62,128,.14);}

.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:clamp(14px,1.6vw,20px);
  padding-block:clamp(24px,3vw,36px) clamp(48px,6vw,80px);}
.ccol{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s;}
.ccol:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);}
.ccol__sw{height:110px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.ccol__body{padding:12px 14px 14px;}
.ccol__name{font-family:var(--f-head);font-weight:600;font-size:14.5px;color:var(--ink);}
.ccol__code{font-size:12.5px;color:var(--stone);margin-top:2px;letter-spacing:.04em;}

.col-empty{grid-column:1/-1;text-align:center;color:var(--stone);padding:48px 0;display:flex;flex-direction:column;align-items:center;gap:10px;}
.col-empty .i{width:34px;height:34px;color:var(--line);}

@media (max-width:520px){
  .colgrid{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));}
  .ccol__sw{height:86px;}
}