.cart-count span { color:#fff !important; }

.hero-message {display:none!important;}

@media only screen and (min-width: 600px) {
    
/* Move name, price and add cart button below the card on medium+ screens */
/* === Featured Item Layout === */
.featured-item {
  display: flex;
  flex-direction: column;      /* stack image, text, button vertically */
  justify-content: space-between; /* pushes button to bottom */
  height: 100%;                /* ensures all cards have same height */
  min-height: 420px;           /* adjust based on your design */
}

/* Text container layout */
.featured-item-text {
  order: 2;                    /* sits after the image */
  position: static !important;
  margin-top: 10px !important; /* space below image */
  text-align: center;           /* optional alignment */
  width: 100%;
  flex-grow: 1;                 /* fill available space */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* space between title/price and button */
}

/* Make featured-item the positioning reference */
.featured-item {
  position: relative !important;
  min-height: 825px !important;
}

/* Remove or override the absolute positioning on featured-item-text */
.featured-item-text {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* Target the anchor tag that wraps the button and position it absolutely */
.featured-item-text > a[onclick*="AddToBasket"] {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
}

/* Ensure the button itself doesn't have conflicting positioning */
.featured-item-text > a[onclick*="AddToBasket"] .btn {
  position: static !important;
}

/* min-hiehgt small screens */
}