/* Remove outline due to initial h1 focus: Selector="h1" */
h1::after {
  font-size: 0.2em;
}

h1:focus {
  outline: none;
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Alternatives to MudHidden - SMALL - Better performance */
@media only screen and (max-width: 576px) {
  #hideLarge {
    display: none;
  }

  #hideSmall {
    display: block;
  }
}

/* Alternatives to MudHidden - LARGE */
@media only screen and (min-width: 577px) {
  #hideLarge {
    display: block;
  }

  #hideSmall {
    display: none;
  }
}

/* Use for product displays */
.blurred-background-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

  .blurred-background-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    z-index: 1;
    background-image: inherit;
  }

  .blurred-background-image img {
    width: 50%;
    max-height: 200px;
    border-radius: 4px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 10; /* Above the blurred background */
  }

/* image-text-overlay */
.image-text-overlay {
  position: relative;
  display: inline-block; /* or block depending on layout */
}

  .image-text-overlay img {
    display: block; /* remove default image margin */
    width: 100%; /* optional, for responsive image */
  }

  .image-text-overlay .text {
    position: absolute;
    top: 8px; /* position as needed */
    left: 0px; /* position as needed */
    background-color: rgba(0, 0, 0, 0.5); /* black background with 50% opacity */
    color: white; /* text color */
    padding: 8px; /* padding around text */
    display: flex;
    align-items: center;
  }