@import url('base.css');

.catalogue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.fabric-card{background:rgba(30,41,59,.6);border:1px solid rgba(148,163,184,.1);border-radius:16px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column}.fabric-card:hover{border-color:rgba(102,126,234,.3);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.card-img-wrapper{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:rgba(15,23,42,.8);cursor:zoom-in}
.card-img{width:100%;height:auto;display:block;transition:transform .4s}.fabric-card:hover .card-img{transform:scale(1.03)}
.card-body{padding:24px;flex:1;display:flex;flex-direction:column;gap:14px}
.fabric-name{font-size:17px;font-weight:700;color:#f1f5f9;line-height:1.3}.fabric-name:hover{color:#a5b4fc}
.meta-row{display:flex;flex-wrap:wrap;gap:8px}
.meta-tag{padding:5px 12px;border-radius:8px;font-size:12px;font-weight:500;background:rgba(148,163,184,.08);color:#94a3b8;border:1px solid rgba(148,163,184,.1)}.meta-tag.type-tag{background:rgba(102,126,234,.1);color:#a5b4fc;border-color:rgba(102,126,234,.2)}
.details-block{display:flex;flex-direction:column;gap:6px}
.detail-row{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0;border-bottom:1px solid rgba(148,163,184,.06);font-size:13px}.detail-row:last-child{border-bottom:none}
.detail-label{font-weight:500;color:#94a3b8;flex-shrink:0;margin-right:12px}.detail-value{color:#e2e8f0;text-align:right}
.detail-value.composition{font-size:12px;line-height:1.4}
.card-footer{display:flex;gap:10px;padding:16px 24px;border-top:1px solid rgba(148,163,184,.08)}
.card-footer-btn{flex:1;text-align:center;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:600;transition:all .2s;border:none;cursor:pointer}.card-footer-btn.primary{background:rgba(102,126,234,.15);color:#a5b4fc}.card-footer-btn.primary:hover{background:rgba(102,126,234,.3)}.card-footer-btn.secondary{background:rgba(148,163,184,.08);color:#94a3b8}.card-footer-btn.secondary:hover{background:rgba(148,163,184,.15)}
.controls-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.filter-input{min-width:240px}.filter-select{cursor:pointer;min-width:140px}
.showing-text{font-size:14px;color:#94a3b8;font-weight:500}