/* Product loop badges */
.product-miniature .thumbnail-container {
  position: relative;
}

.product-miniature .thumbnail-container .product-flags,
.product-miniature .thumbnail-container .js-product-flags {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 72px);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.product-miniature .thumbnail-container .product-flag.pack {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  max-width: 100%;
  padding: 5px 9px 5px 7px;
  border: 1px solid rgba(237, 16, 16, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #181820;
  box-shadow: 0 8px 22px rgba(17, 17, 24, .12), 0 1px 0 rgba(255, 255, 255, .9) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.product-miniature .thumbnail-container .product-flag.pack::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background-color: #ed1010;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.6 5.4h8.8v5.8H2.6V5.4Z' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M2.6 5.4 7 2.8l4.4 2.6M7 2.8v8.4' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  box-shadow: 0 5px 12px rgba(237, 16, 16, .28);
}

.product-miniature:hover .thumbnail-container .product-flag.pack {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(17, 17, 24, .16), 0 1px 0 rgba(255, 255, 255, .95) inset;
}

@media (max-width: 575.98px) {
  .product-miniature .thumbnail-container .product-flags,
  .product-miniature .thumbnail-container .js-product-flags {
    top: 8px;
    left: 8px;
    max-width: calc(100% - 56px);
  }

  .product-miniature .thumbnail-container .product-flag.pack {
    min-height: 24px;
    padding: 5px 8px 5px 6px;
    font-size: 9px;
  }
}