.card-item,
.card-item .refuel-card__content {
  display: flex;
  flex-direction: column;
}

{% if module.general_settings.add_hover_animation %}
  @media only screen and (min-width: 1024px) {
    /* 
      .card-item {
        transition: transform 0.2s ease-out;
      }
     Only apply hover if the card_colour is NOT transparent.
       Note: Adjust 'rgba(0,0,0,0)' if your theme uses a different 'none' value.
    */
    {% if card.card_colour.color and card.card_colour.color != 'transparent' %}
      .card-item:focus,
      .card-item:hover,
      .card-item:active {
          background: var(--Red-200, #FBB9B5);
          /* Optional: Add a shadow only on hover if colored */
      }
    {% endif %}
  </div>
{% endif %}

a.card-item {
  text-decoration: none;
}

.refuel-card__image {
  flex: 1;
  overflow: hidden;
}

{% scope_css %}
  /* --- RED ACCENT LOGIC --- */
  .accent--red svg, .accent--red i { fill: #ff5a4d !important; color: #ff5a4d !important; }
  .divider--red { background-color: #ff5a4d !important; height: 2px; width: 100%; border: none; }
  /* Filter for Red icons */
  .accent--red img { 
    filter: brightness(0) saturate(100%) invert(46%) sepia(61%) saturate(2855%) hue-rotate(338deg) brightness(101%) contrast(101%) !important; 
  }

  /* --- BLUE ACCENT LOGIC --- */
  .accent--blue svg, .accent--blue i { fill: #007bff !important; color: #007bff !important; }
  .divider--blue { background-color: #007bff !important; height: 2px; width: 100%; border: none; }
  /* Filter for Blue icons (Standard Corporate Blue) */
  .accent--blue img { 
    filter: invert(31%) sepia(94%) saturate(2135%) hue-rotate(198deg) brightness(98%) contrast(105%) !important; 
  }

  /* --- SPACING & RESET --- */
  .refuel-card__content  {
    margin: 0;
  }
{% end_scope_css %}