/*
 * FoodX / Shaktisarvo "Featured Products" grid.
 * Rendered by the foodx/products block in templates/front-page.html.
 */

.fx-products{
  box-sizing:border-box;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding:56px 0 64px;
}
.fx-products *{ box-sizing:border-box; }
.fx-products-in{ max-width:1360px; width:calc(100% - 40px); margin:0 auto; }

/* ---------------- heading ---------------- */
.fx-products-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:26px;
}
.fx-products-eyebrow{
  margin:0 0 6px; font-size:12px; font-weight:800;
  letter-spacing:.18em; color:#E58E26;
}
.fx-products-title{
  margin:0;
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:800; font-size:34px; line-height:1.1; color:#1B4D3E;
}
.fx-products-count{ margin:0; font-size:13px; color:#98A29D; white-space:nowrap; }

/* ---------------- grid ---------------- */
.fx-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* ---------------- card ---------------- */
.fx-pc{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #EDEFEC; border-radius:16px;
  overflow:hidden; transition:border-color .18s,box-shadow .18s,transform .18s;
}
.fx-pc:hover{
  border-color:#DCE4D8;
  box-shadow:0 16px 34px -24px rgba(27,42,36,.4);
  transform:translateY(-2px);
}

/* 4:3 rather than square — a 1:1 image is the single biggest contributor to
 * card height at 4-up, and the packshots are centred enough to crop safely. */
.fx-pc-media{ position:relative; aspect-ratio:4/3; background:#F6F7F4; }
.fx-pc-imglink{ display:block; width:100%; height:100%; }
.fx-pc-media img.fx-pc-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.fx-pc-noimg{
  display:block; width:100%; height:100%;
  background:repeating-linear-gradient(135deg,#F2F4F0 0 12px,#EDEFEA 12px 24px);
}

.fx-pc-badge{
  position:absolute; top:10px; left:10px;
  background:#1B4D3E; color:#fff;
  font-size:10.5px; font-weight:800; letter-spacing:.06em;
  padding:5px 10px; border-radius:6px;
}
.fx-pc-fav{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:50%;
  border:1px solid #EDEFEC; background:rgba(255,255,255,.94);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .18s,background .18s;
}
.fx-pc-fav:hover{ border-color:#E58E26; background:#fff; }

/* Saved state — fill the heart and warm the outline. The inner <path> uses
 * stroke with fill:none by default, so paint both to make it solid. */
.fx-pc-fav.is-saved{ border-color:#E58E26; background:#fff; }
.fx-pc-fav.is-saved svg path{ fill:#E05A2B; stroke:#E05A2B; }
.fx-pc-fav svg path{ transition:fill .18s, stroke .18s; }

/* ---------------- card body ---------------- */
.fx-pc-body{ display:flex; flex-direction:column; gap:6px; padding:12px 12px 13px; flex:1; }

.fx-pc-tags{ display:flex; flex-wrap:wrap; gap:5px; }
.fx-pc-tag{
  font-size:10.5px; font-weight:600; color:#2F5E4A;
  background:#EFF6EC; border-radius:999px; padding:3px 9px;
  white-space:nowrap;
}

.fx-pc-name{ margin:1px 0 0; font-size:14.5px; font-weight:800; line-height:1.25; }
.fx-pc-name a{ color:#1B2A24; text-decoration:none; }
.fx-pc-name a:hover{ color:#1B4D3E; }

.fx-pc-sub{ margin:0; font-size:12px; color:#98A29D; line-height:1.4; }

.fx-pc-rating{ display:flex; align-items:center; gap:6px; margin:0; font-size:12px; }
.fx-stars{ display:inline-flex; letter-spacing:.5px; }
.fx-star{ color:#DFE3DD; }
.fx-star.is-on,.fx-star.is-half{ color:#E58E26; }
.fx-pc-rating-num{ font-weight:700; color:#3E4E45; }

/* Footer pinned to the bottom so cards with fewer tags still line up. */
.fx-pc-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-top:auto; padding-top:4px;
}
.fx-pc-price{ display:flex; align-items:baseline; gap:6px; margin:0; }
.fx-pc-now{ font-size:15px; font-weight:800; color:#1B4D3E; }
.fx-pc-now .woocommerce-Price-amount{ font-size:inherit; }
.fx-pc-was{ font-size:12px; color:#A9B2AC; text-decoration:line-through; }

.fx-pc-add{
  display:inline-flex; align-items:center; gap:5px;
  background:#4CBB17; color:#fff; text-decoration:none;
  font-size:12.5px; font-weight:700;
  padding:8px 14px; border-radius:999px;
  transition:background .18s; white-space:nowrap;
}
.fx-pc-add:hover,.fx-pc-add:focus-visible{ background:#3FA012; color:#fff; }
.fx-pc-add.loading{ opacity:.6; pointer-events:none; }
.fx-pc-add.is-loading{ opacity:.6; pointer-events:none; }
.fx-pc-add.is-added{ background:#1B4D3E; }
.fx-pc-add.added{ background:#1B4D3E; }

/* ======================= RESPONSIVE ======================= */
@media (max-width:1180px){
  .fx-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  .fx-products{ padding:44px 0 52px; }
  .fx-products-title{ font-size:28px; }
  .fx-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .fx-products-in{ width:calc(100% - 28px); }
  .fx-products-head{ flex-direction:column; align-items:flex-start; gap:6px; }

  /* One card per row, full width. */
  .fx-products .fx-grid{ grid-template-columns:1fr; gap:16px; }

  .fx-pc-body{ padding:12px 12px 14px; gap:7px; }
  .fx-pc-name{ font-size:14px; }
  .fx-pc-foot{ flex-direction:column; align-items:stretch; gap:8px; }
  .fx-pc-add{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .fx-pc,.fx-pc-add,.fx-pc-fav{ transition:none !important; }
  .fx-pc:hover{ transform:none; }
}