/* =================================================================
   CARDS — product cards, partner cards, stat tiles, entity cards
   ================================================================= */

/* ---------------------------------------------------------------
   PRODUCT CARD
   --------------------------------------------------------------- */
.product-grid{ display:flex; flex-wrap:wrap; gap: 1.25rem; }
.product-card{
  flex: 1 1 calc(33.333% - 0.84rem);
  min-width: 270px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display:flex; flex-direction:column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}
.product-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.product-card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:0.6rem; margin-bottom: 0.6rem; }
.product-card__title{ font-family: var(--f-display); font-weight:700; font-size:1.02rem; color: var(--ink); line-height:1.35; }
.product-card__sku{
  font-size:0.68rem; font-weight:600; color: var(--muted-soft);
  background: var(--bg-alt); padding: 0.2rem 0.5rem; border-radius: 6px;
  white-space:nowrap; flex-shrink:0;
}
.product-card__desc{ font-size:0.88rem; color: var(--muted); line-height:1.6; flex: 1 1 auto; margin-bottom: 1.1rem; }

.product-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:0.6rem; padding-top:1rem; border-top: 1px solid var(--border); }
.product-card__cta{
  font-family: var(--f-display); font-weight:700; font-size:0.84rem; color: var(--accent-dark);
  display:flex; align-items:center; gap:0.35rem;
}
.product-card__cta svg{ width:14px; height:14px; transition: transform 0.3s ease; }
.product-card:hover .product-card__cta svg{ transform: translateX(3px); }
.product-card__mfg-badge{
  display:flex; align-items:center; gap:0.3rem;
  font-size:0.66rem; font-weight:700; letter-spacing:0.02em;
  color: var(--success); background: var(--success-light);
  padding: 0.25rem 0.55rem; border-radius: 6px;
  white-space:nowrap;
}
.product-card__mfg-badge svg{ width:11px; height:11px; flex-shrink:0; }

@media (max-width: 900px){ .product-card{ flex-basis: calc(50% - 0.6rem); } }
@media (max-width: 560px){ .product-card{ flex-basis: 100%; } }

/* ---------------------------------------------------------------
   PARTNER / BRAND CARD
   --------------------------------------------------------------- */
.partner-grid{ display:flex; flex-wrap:wrap; gap: 1.25rem; }
.partner-card{
  flex: 1 1 calc(33.333% - 0.84rem);
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  text-align:center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}
.partner-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.partner-card__mark{
  font-family: var(--f-display); font-weight:800; font-size:1.4rem;
  color: var(--ink); margin-bottom: 0.9rem; letter-spacing: -0.01em;
}
.partner-card p{ font-size:0.9rem; color: var(--muted); margin-bottom:1.1rem; line-height:1.6; }
.partner-card__seal{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.72rem; font-weight:700; letter-spacing:0.03em;
  color: var(--success); background: var(--success-light);
  padding: 0.4rem 0.8rem; border-radius: var(--radius-pill);
}
.partner-card__seal svg{ width:13px; height:13px; flex-shrink:0; }

@media (max-width: 900px){ .partner-card{ flex-basis: calc(50% - 0.6rem); } }
@media (max-width: 560px){ .partner-card{ flex-basis: 100%; } }

/* ---------------------------------------------------------------
   CATEGORY / INDEX CARD (catalog index on homepage)
   --------------------------------------------------------------- */
.index-grid{ display:flex; flex-wrap:wrap; gap: 1.25rem; }
.index-card{
  flex: 1 1 calc(25% - 0.94rem);
  min-width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}
.index-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.index-card:hover .index-card__icon{ box-shadow: var(--shadow-icon-hover); transform: scale(1.05); }
.index-card__icon{
  width: 46px; height:46px; border-radius: var(--radius-sm);
  background: var(--grad-amber); color: #fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-icon);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.index-card__icon svg{ width:22px; height:22px; }
.index-card h3{ font-size:1.02rem; margin-bottom:0.4rem; }
.index-card__count{ font-size:0.84rem; color: var(--muted); margin-bottom: 1rem; }
.index-card__link{
  display:inline-flex; align-items:center; gap:0.35rem;
  font-family: var(--f-display); font-weight:700; font-size:0.84rem; color: var(--accent-dark);
}
.index-card__link svg{ width:13px; height:13px; transition: transform 0.3s ease; }
.index-card:hover .index-card__link svg{ transform: translateX(3px); }

@media (max-width: 1024px){ .index-card{ flex-basis: calc(33.333% - 0.84rem); } }
@media (max-width: 700px){ .index-card{ flex-basis: calc(50% - 0.6rem); } }
@media (max-width: 460px){ .index-card{ flex-basis: 100%; } }

/* ---------------------------------------------------------------
   ENTITY CARD (group ecosystem — Associates, Enhancers, Packers & Movers)
   --------------------------------------------------------------- */
.entity-grid{ display:flex; flex-wrap:wrap; gap: 1.25rem; }
.entity-card{
  position: relative;
  flex: 1 1 calc(33.333% - 0.84rem);
  min-width: 260px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  overflow: hidden;
  transition: transform 0.3s var(--ease), background 0.3s ease, border-color 0.3s ease;
}
.entity-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--grad-amber);
  opacity: 0.85;
}
.entity-card:hover{ transform: translateY(-4px); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); }
.entity-card__index{
  display:inline-flex; align-items:center;
  font-family: var(--f-display); font-weight:800; font-size:0.72rem;
  color:#fff; background: var(--grad-amber);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  margin-bottom:0.9rem; letter-spacing:0.04em;
  box-shadow: 0 4px 12px rgba(234,88,12,0.3);
}
.entity-card h3{ color:#fff; font-size:1.08rem; margin-bottom:0.6rem; }
.entity-card p{ color: var(--on-navy-muted); font-size:0.9rem; margin:0; line-height:1.6; }

@media (max-width: 900px){ .entity-card{ flex-basis: calc(50% - 0.6rem); } }
@media (max-width: 560px){ .entity-card{ flex-basis: 100%; } }

/* ---------------------------------------------------------------
   STAT TILE (generic, light section variant)
   --------------------------------------------------------------- */
.stat-strip{ display:flex; flex-wrap:wrap; gap: 1.25rem; }
.stat-tile{
  flex: 1 1 calc(25% - 0.94rem);
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align:center;
}
.stat-tile__num{ font-family: var(--f-display); font-weight:800; font-size: clamp(1.8rem, 3vw, 2.3rem); color: var(--ink); line-height:1; }
.stat-tile__num .suffix{ color: var(--accent); }
.stat-tile__label{ font-size:0.85rem; color: var(--muted); margin-top:0.5rem; }

@media (max-width: 760px){ .stat-tile{ flex-basis: calc(50% - 0.6rem); } }