/* ════════════════════════════════════════════════════════════════
   Variables CSS — à surcharger au besoin
   ════════════════════════════════════════════════════════════════ */
:root {
  --ep-green:     #128C7E;
  --ep-green2:    #075E54;
  --ep-gold:      #F4A724;
  --ep-dark:      #0f172a;
  --ep-gray:      #64748b;
  --ep-light-bg:  #f8fafc;
  --ep-border:    #e2e8f0;
  --ep-radius:    .75rem;
  --ep-shadow:    0 4px 24px rgba(0,0,0,.07);
  --ep-font:      'Inter', 'Outfit', system-ui, sans-serif;
}

/* ════════════════════════ PARTIAL — Product Card ═════════════════ */

.product-card { background: #fff; border: 1px solid var(--ep-border); border-radius: var(--ep-radius);
  overflow: hidden; transition: transform .25s, box-shadow .25s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.1); }

.product-card__img { aspect-ratio: 1; overflow: hidden; background: var(--ep-light-bg); }
.product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.product-card:hover .product-card__img img { transform: scale(1.05); }

.product-card__body { padding: 1.1rem; }
.product-card__category { font-size: .72rem; color: var(--ep-green); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.product-card__name { font-size: 1rem; font-weight: 700; color: #0f172a; margin: .3rem 0 .5rem; line-height: 1.35; }
.product-card__price { font-size: 1.1rem; font-weight: 800; color: var(--ep-green); }
.product-card__price .unit { font-size: .75rem; font-weight: 500; color: #94a3b8; }

.product-card__footer { padding: .75rem 1.1rem; border-top: 1px solid var(--ep-border); display: flex; gap: .5rem; }
.btn-add-cart { flex: 1; background: var(--ep-green); color: #fff; border: none; border-radius: .5rem;
  padding: .5rem; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.btn-add-cart:hover { background: #0e7a6d; }
.btn-detail { padding: .5rem .75rem; border: 1px solid var(--ep-border); border-radius: .5rem;
  font-size: .85rem; color: #475569; text-decoration: none; transition: all .2s; }
.btn-detail:hover { background: var(--ep-light-bg); }