/* ==========================================================================
   SECTION 2 — PRODUCT CATEGORIES
   ========================================================================== */

#products{padding-top:60px;}

.products-header{
  text-align:center;
  max-width:800px;
  margin:0 auto 56px;
}
.products-header .section-desc{max-width:100%;margin:0 auto;}

.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--grid-gap);
  margin-top:60px;
}
.product-grid--4col{
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:0;
}

.card{
  background:var(--card-dark);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  overflow:hidden;
  opacity:0;
  transform-style:preserve-3d;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.card:hover{border-color:#3a3a3a;box-shadow:0 16px 36px -10px rgba(166,61,46,0.25);}
a.card{display:block;}
h3.card-title{font-family:'Inter',sans-serif;}

.card-media{position:relative;height:150px;overflow:hidden;background:#1b1b1b;}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform .7s cubic-bezier(.16,1,.3,1);}
.card:hover .card-media img{transform:scale(1.1);}
.product-grid--4col .card-media{height:190px;}

.card-body{padding:16px 18px 18px;}
.card-title{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px;}
.card-moq{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:12px;}
.card-cta{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);border-top:1px solid var(--border);padding-top:12px;transition:color .3s ease;}
a.card:hover .card-cta{color:#fff;}
.card-arrow{display:inline-block;}
.price-row{display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary);margin-bottom:3px;text-transform:uppercase;letter-spacing:.03em;}
.price-row span:last-child{color:#fff;font-weight:600;text-transform:none;letter-spacing:0;}
.moq-line{margin-top:8px;padding-top:8px;border-top:1px solid #1f1f1f;font-size:12px;color:var(--primary);font-weight:600;}

@media(max-width:1200px){.product-grid--4col{grid-template-columns:repeat(2,1fr);}}
@media(max-width:1024px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){
  .product-grid{grid-template-columns:1fr;}
  .product-grid--4col{grid-template-columns:1fr;}
}