/* =========================================================
   DS Market – štítky ve výpisu produktů (karty v kategoriích)
   soubor: /user/documents/flags-list.css
   Malý odznak na obrázku, sladěný se štítky v detailu
   (flags-detail.css). Nejvýš 2 odznaky na kartu.
   ========================================================= */

.products .product .image .flags.flags-default {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  top: 8px !important;
  left: 8px !important;
  pointer-events: none;
}

.products .product .image .flags .flag {
  --flag-c: #1f8f3a;
  --flag-bd: #cfe7d5;
  --flag-tx: #1c3d26;
  --flag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");

  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  height: 24px;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 9px 0 3px !important;
  background: rgba(255, 255, 255, .94) !important;  /* přebije inline barvu ze Shoptetu */
  border: 1px solid var(--flag-bd);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  color: var(--flag-tx) !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: visible !important;
}

/* kroužek s ikonou */
.products .product .image .flags .flag::before {
  content: "";
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--flag-c);
}
.products .product .image .flags .flag::after {
  content: "";
  position: absolute;
  left: 7px;                 /* 3px padding + 1px border + (17-11)/2 */
  width: 11px;
  height: 11px;
  background: #fff;
  -webkit-mask: var(--flag-icon) center / contain no-repeat;
  mask: var(--flag-icon) center / contain no-repeat;
}

/* nejvýš 2 odznaky */
.products .product .image .flags .flag:nth-of-type(n+3) { display: none !important; }

/* PKU – štít s fajfkou, tyrkysová */
.products .product .image .flags .flag-pku,
.products .product .image .flags .flag-vhodne-pro-pku {
  --flag-c: #0f8a7a;
  --flag-bd: #c6e8e2;
  --flag-tx: #10403a;
  --flag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.2-4.4'/%3E%3C/svg%3E");
}

/* BIO – klíček, tmavší zelená */
.products .product .image .flags .flag-bio {
  --flag-c: #2f6b1f;
  --flag-bd: #d5e6c2;
  --flag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 12C12 7.5 9 5 4 5c0 4.5 3 7 8 7zM12 14c0-4 2.5-6.5 8-6.5 0 4-2.5 6.5-8 6.5z'/%3E%3C/svg%3E");
}

/* Novinka / Akce / Tip / Sleva – malý plný odznak bez ikony */
.products .product .image .flags .flag-new,
.products .product .image .flags .flag-action,
.products .product .image .flags .flag-tip,
.products .product .image .flags .flag-discount {
  height: 22px;
  padding: 0 9px !important;
  border: 0;
  color: #fff !important;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.products .product .image .flags .flag-new::before,      .products .product .image .flags .flag-new::after,
.products .product .image .flags .flag-action::before,   .products .product .image .flags .flag-action::after,
.products .product .image .flags .flag-tip::before,      .products .product .image .flags .flag-tip::after,
.products .product .image .flags .flag-discount::before, .products .product .image .flags .flag-discount::after {
  display: none;
}
.products .product .image .flags .flag-new      { background: #1f8f3a !important; }
.products .product .image .flags .flag-tip      { background: #e0a100 !important; }
.products .product .image .flags .flag-action,
.products .product .image .flags .flag-discount { background: #d93025 !important; }