/* Use the four photo regions of the supplied reference as a shared sprite. */
.activewear-fabrics .section-desc { max-width: 1000px; }
.activewear-fabric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.activewear-fabric-card {
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(25, 35, 45, .05);
}
.activewear-fabric-photo {
  aspect-ratio: 300 / 180;
  border-radius: 6px;
  background-image: url('../images/activewear-fabrics/fabric-reference.png');
  background-repeat: no-repeat;
  background-size: 501.666667% 369.444444%;
  background-position: var(--fabric-x) 39.175258%;
}
.activewear-fabric-photo--nylon { --fabric-x: 3.319502%; }
.activewear-fabric-photo--polyester { --fabric-x: 35.684647%; }
.activewear-fabric-photo--brushed { --fabric-x: 68.049793%; }
.activewear-fabric-photo--seamless { --fabric-x: 99.585062%; }
.activewear-fabric-body { padding: 18px 8px 12px; }
.activewear-fabric-body h3 {
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--primary);
  text-align: center;
  margin-bottom: 14px;
}
.activewear-fabric-body p {
  font-size: .9rem;
  color: var(--text-light);
  line-height: 1.75;
  text-align: center;
  margin-bottom: 14px;
}
.activewear-fabric-details {
  border-top: 1px dashed var(--border);
  margin-top: 20px;
  padding-top: 18px;
  font-size: .875rem;
  line-height: 1.75;
}
.activewear-fabric-details ul { list-style: disc; padding-left: 20px; margin-top: 6px; color: var(--text-light); }
.activewear-fabric-body .activewear-fabric-moq { text-align: left; margin: 0; }
@media (max-width: 1050px) {
  .activewear-fabric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .activewear-fabric-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}