/* Fabrico store cards — compact design (22 Sep 2026; v3: more breathing room + refined buttons).
   Loaded by libraries/Storecards.php on the Stores page and city pages, after
   style.css, so these rules override the original (taller) card rules there.
   Bump Storecards::CARD_CSS_VERSION after editing this file. */

.fab-store-row { margin-top: 2px; }
.fab-store-col { display: flex; padding: 11px; }

.fab-store-card {
  display: flex; flex-direction: column; width: 100%;
  font-family: Poppins, sans-serif;
  background: #fff;
  border: 1px solid #e3ede8;
  border-radius: 10px;
  padding: 22px 22px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fab-store-card:hover {
  border-color: #33cc99;
  box-shadow: 0 8px 24px rgba(51, 204, 153, .16);
  transform: translateY(-2px);
}

.fab-store-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fab-store-card__name {
  margin: 0; font-size: 15.5px; line-height: 1.45; font-weight: 600;
  color: #0f5c3f; letter-spacing: normal;
}
.fab-store-card__chip {
  flex: none; margin-top: 1px;
  font-size: 10.5px; font-weight: 600; line-height: 18px; letter-spacing: .3px;
  color: #b3261e; background: #fde7e9;
  border-radius: 999px; padding: 0 8px; white-space: nowrap;
}
.fab-store-card.is-soon .fab-store-card__name { color: #4a6a5c; }

/* address: up to 3 lines, then an ellipsis — the full text is in the title
   tooltip and behind "Get Directions", so rows keep an even height */
.fab-store-card__addr {
  margin: 10px 0 0; font-size: 13px; line-height: 1.6; font-weight: 400; color: #5f6b66;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* "N km away" line on Locate-now results (the store code line is no longer printed) */
.fab-store-card__code { margin: 10px 0 0; font-size: 12px; line-height: 1.4; font-weight: 500; color: #33a57c; }

.fab-store-card__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: auto; padding-top: 18px;
}
.fab-store-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-align: center;
  min-height: 42px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px;
  background: #33cc99; color: #fff !important; text-decoration: none;
  font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600;
  line-height: 1.2; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.fab-store-btn .mdi { font-size: 16px; line-height: 1; }
.fab-store-btn:hover { transform: translateY(-1px); }
.fab-store-btn:active { transform: translateY(0); }
.fab-store-btn:focus-visible { outline: 2px solid #33cc99; outline-offset: 2px; }

/* quiet, outlined "look it up" actions — icon in the brand mint, text in dark green */
.fab-store-btn--ghost { background: #fff; color: #0f5c3f !important; border-color: #d9e7df; box-shadow: 0 1px 2px rgba(16, 44, 33, .04); }
.fab-store-btn--ghost .mdi { color: #33cc99; }
.fab-store-btn--ghost:hover { background: #f2faf6; border-color: #33cc99; box-shadow: 0 4px 12px rgba(51, 204, 153, .16); }

/* filled "reach us" actions — soft gradient + glow, like the site's own CTAs */
.fab-store-btn:not(.fab-store-btn--ghost):not(.fab-store-btn--wa) {
  background: linear-gradient(180deg, #3bd6a2, #2cc492); box-shadow: 0 2px 8px rgba(51, 204, 153, .32);
}
.fab-store-btn:not(.fab-store-btn--ghost):not(.fab-store-btn--wa):hover { background: linear-gradient(180deg, #34cf9b, #26b586); box-shadow: 0 6px 16px rgba(51, 204, 153, .36); }
.fab-store-btn--wa { background: linear-gradient(180deg, #2ed673, #22c25c); box-shadow: 0 2px 8px rgba(37, 211, 102, .3); }
.fab-store-btn--wa:hover { background: linear-gradient(180deg, #27cc6a, #1db554); box-shadow: 0 6px 16px rgba(37, 211, 102, .34); }

/* pager + "more" row: keep the tighter rhythm */
.fab-store-pager { padding-top: 6px; }
.fab-store-more .fab-store-btn { padding: 9px 20px; }

/* the "no store here yet" card keeps its centred, wide layout */
.fab-store-card--empty { text-align: center; align-items: center; padding: 22px 20px 20px; }
.fab-store-card--empty .fab-store-card__name { color: rgba(0, 0, 0, .87); font-size: 19px; }
.fab-store-card--empty .fab-store-card__addr { max-width: 620px; display: block; -webkit-line-clamp: unset; }
.fab-store-card--empty .fab-store-card__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 820px; }

@media (max-width: 960px) {
  .fab-store-btn { font-size: 11.5px; padding: 8px 6px; }
}
@media (max-width: 600px) {
  .fab-store-col { padding: 7px 4px; }
  .fab-store-card { padding: 18px 16px 16px; border-radius: 8px; }
  .fab-store-card:hover { transform: none; }
  .fab-store-card__name { font-size: 14.5px; }
  .fab-store-card__actions { gap: 8px; padding-top: 14px; }
  .fab-store-btn { font-size: 11.5px; min-height: 40px; padding: 7px 4px; }
  .fab-store-card--empty .fab-store-card__actions { grid-template-columns: 1fr 1fr; }
}