/* ==========================================================================
   MMX / CARD
   ========================================================================== */

:host {
  --mmx-card__size: var(--mmx-spacing-m);
  --mmx-card__gap: calc(var(--mmx-card__size) / 2);
}

.mmx-card {
  align-content: start;
  color: var(--mmx-color-body-copy);
  display: grid;
  grid-template-areas:
    'header'
    'main'
    'footer';
  grid-template-columns: 100%;
  grid-template-rows: 0 1fr 0;
  position: relative;
  text-decoration: none;
  height: 100%;
}

.mmx-card__flag {
  align-items: flex-start;
  display: flex;
  gap: var(--mmx-card__gap);
  margin: var(--mmx-card__gap);
  text-align: left;
  z-index: 1;
  grid-area: main;
  place-self: start left;
}

.mmx-card__header {
  grid-area: header;
}

.mmx-card__main {
  display: grid;
  grid-template-rows: 0 auto;
  grid-area: main;
  gap: var(--mmx-card__gap);
}

.mmx-card__footer {
  grid-area: footer;
}

.mmx-card ::slotted(mmx-message) {
  --mmx-message__margin-bottom: 0;
}

.mmx-product-card__image-wrapper {
  /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0.05%, rgb(0 0 0 / 10%) 140.28%); */
  border-radius: 0 0 8px 8px;
}

.mmx-product-card__image {
  aspect-ratio: var(--mmx-card__aspect-ratio, 1 / 1);
  height: auto;
  object-fit: var(--mmx-card__object-fit, contain);
  object-position: center;
  width: 100%;
  mix-blend-mode: darken;
}

/* ==========================================================================
   MMX / PRODUCT CARD
   ========================================================================== */

.mmx-product-card__button-detail {
  max-height: fit-content;
  align-self: flex-end;
  border-style: solid;
  text-decoration: none;
}
.out-of-stock {
  background-color: #515d27 !important;
  border-color: #515d27 !important;
  cursor: default !important;
}
.out-of-stock:hover {
  background-color: #515d27 !important;
  border-color: #515d27 !important;
  color: white !important;
}
.mmx-product-card button {
  margin-top: unset;
}

.mmx-product-card__prices span {
  display: inline-block;
}

.mmx-product-card__additional-price {
  margin-left: 0.5em;
  text-decoration: line-through;
}

.mmx-product-card__detail--empty {
  display: none;
}

.mmx-product-card__button-detail {
  border-radius: 30px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mmx-product-card__name-detail {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   MMX / STAR RATING
   ========================================================================== */
.tgreviews-average {
  display: flex;
  align-items: center;
  gap: 1em;
}

.tgreviews-average__star,
.tgreviews-average__star-overlay {
  position: relative;
  color: #dddddd;
}

.tgreviews-average__star {
  font-size: 1.25rem;
  display: inline-block;
  position: relative;
}

.tgreviews-average__star-overlay {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--green-400);
  overflow: hidden;
  bottom: 0;
  display: inline-block;
  text-align: left;
  white-space: nowrap;
}

/* ==========================================================================
   MMX / ICONS
   ========================================================================== */

@font-face {
  font-display: block;
  font-family: 'ReadyTheme Icons';
  font-style: normal;
  font-weight: normal;
  src: url('themes/00000001/shadows/ui/css/ReadyThemeIcons.woff') format('woff');
}
[class^='u-icon-'],
[class*=' u-icon-'],
[data-icon]::before {
  font-family: 'ReadyTheme Icons', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  text-transform: none;
}
[data-icon]::before {
  content: attr(data-icon);
}

[class^='u-icon-']::before,
[class*=' u-icon-']::before,
[data-icon]::before {
  background-color: rgba(0, 0, 0, 0);
}

.u-icon-star-empty:before {
  content: 'F';
}

.u-icon-star-full:before {
  content: 'G';
}

.u-icon-star-half:before {
  content: '\e939';
}