/* ==========================================================================
   FBT DESIGN SYSTEM — 3. UTILITIES / SMALL FIXES
   ==========================================================================
   Small, targeted patches that don't belong inside a component definition.
   Ported from WPCode CSS snippet #334 "FBT — Homepage herstructurering:
   compact & kleur (Fase 3)". That snippet's `.fbt-page`-scoped rules are
   confirmed dead (`.fbt-page` markup appears nowhere in any published page
   or post). Its bare, unscoped redefinitions of .fbt-badge/.fbt-card/
   .fbt-card__title/.fbt-btn/.fbt-btn--outline/.fbt-grid are ALSO
   confirmed to have no live effect — Generation 1/2's own later rules in
   design-system.css already override every property they declare
   (verified property-by-property against production). The one exception
   is .fbt-hero: design-system.css's own rule never sets border-radius,
   horizontal padding or margin-bottom, so WPCode's values for exactly
   those three properties were still quietly in effect on production —
   ported below as a precise delta. Everything else from that redefinition
   block (plus .fbt-badge--top/.fbt-card__image/.fbt-card__store/
   .fbt-section-gray/.fbt-empty-state/.fbt-card__price/
   .fbt-card__price-label, all confirmed unused) was dropped. See the
   Fase 3 report.
   ========================================================================== */

/* Fix: product-card button alignment on the homepage. "Vanaf X / €Y"
   prices wrap to 2 lines while plain prices are 1 line, which produced
   uneven card-footer heights and buttons sitting at different heights.
   The price block now has a fixed minimum height (bottom-aligned) so
   every footer is the same height. */
.fbt-card-product__price {
  font-size: 20px;
  line-height: 1.3;
  min-height: 28px;
  display: flex;
  align-items: flex-end;
}
.fbt-card-product__footer {
  align-items: center;
  min-height: 44px;
}

/* Fix: the arrow icon inside the round icon-button was invisible because
   the generic `a { color: var(--fbt-color-text) }` link-color rule was
   overriding it. */
.fbt-btn-icon { color: #fff !important; }
.fbt-btn-icon svg { color: #fff; display: block; }

.fbt-card-product__media a { display: block; width: 100%; height: 100%; }
.fbt-card-product__media a img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 480px) {
  .fbt-card-product__price { font-size: 18px; }
  .fbt-card-product__footer { min-height: 40px; }
}

/* Fix: .fbt-hero rounded panel + spacing, ported from WPCode #334 — see
   the file header above for the full rationale. Non-overlapping delta only
   (border-radius / horizontal padding / margin-bottom); padding-block and
   background stay owned by design-system.css. */
.fbt-hero {
  border-radius: 20px;
  padding-left: 40px;
  padding-right: 40px;
  margin-bottom: 32px;
}