/* =========================================================
   DS Market – moderní štítky v detailu produktu
   soubor: /user/documents/flags-detail.css
   Přestyluje Shoptet štítky (.flag) v .p-detail-info.
   Dietní štítky = světlé „pilulky“ s ikonou,
   marketingové (Novinka, Akce, Tip…) = malý plný odznak.
   ========================================================= */

.p-detail-info .flags.flags-default {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 12px !important;
  align-items: center;
  float: none !important;     /* Shoptet je floatuje vedle hvězdiček – dáme je na vlastní řádek */
  width: 100%;
}

/* --- základ: dietní pilulka --- */
.p-detail-info .flags .flag {
  --flag-c: #1f8f3a;          /* barva ikony */
  --flag-bg: #eff8f1;         /* pozadí pilulky */
  --flag-bd: #cfe7d5;         /* okraj */
  --flag-tx: #1c3d26;         /* text */
  --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");

  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px 0 5px !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important; /* Shoptet dává max-width: 126px */
  overflow: visible !important;
  background: var(--flag-bg) !important;   /* přebije inline barvu ze Shoptetu */
  border: 1px solid var(--flag-bd);
  border-radius: 999px;
  color: var(--flag-tx) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  order: 1;
}

/* kroužek s ikonou */
.p-detail-info .flags .flag::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    var(--flag-c);
  -webkit-mask: none;
  mask: none;
  box-shadow: inset 0 0 0 0 transparent;
  /* ikona se kreslí přes ::after */
}
.p-detail-info .flags .flag::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: 5px;           /* (24 - 14) / 2 */
  background: #fff;
  -webkit-mask: var(--flag-icon) center / contain no-repeat;
  mask: var(--flag-icon) center / contain no-repeat;
}
.p-detail-info .flags .flag { position: relative; }

/* ---------- ikony podle typu štítku ---------- */

/* Bez lepku – klas přeškrtnutý */
.p-detail-info .flags .flag-bez-lepku {
  --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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='M12 9c-2.2 0-3.5-1.6-3.5-3.8C10.7 5.2 12 6.8 12 9zM12 9c2.2 0 3.5-1.6 3.5-3.8C13.3 5.2 12 6.8 12 9z'/%3E%3Cpath d='M12 14c-2.2 0-3.5-1.6-3.5-3.8 2.2 0 3.5 1.6 3.5 3.8zM12 14c2.2 0 3.5-1.6 3.5-3.8-2.2 0-3.5 1.6-3.5 3.8z'/%3E%3Cpath d='M3.5 3.5l17 17'/%3E%3C/svg%3E");
}
/* Bez pšenice – zrno přeškrtnuté */
.p-detail-info .flags .flag-bez-psenice {
  --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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='12' rx='4.5' ry='7.5'/%3E%3Cpath d='M12 6v12'/%3E%3Cpath d='M3.5 3.5l17 17'/%3E%3C/svg%3E");
}
/* Bez laktózy – mléko přeškrtnuté */
.p-detail-info .flags .flag-bez-laktozy {
  --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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h6M9.5 2.5v3L7 9.5V21h10V9.5l-2.5-4v-3'/%3E%3Cpath d='M7 13h10'/%3E%3Cpath d='M3.5 3.5l17 17'/%3E%3C/svg%3E");
}
/* Bez konzervantů – baňka přeškrtnutá */
.p-detail-info .flags .flag-bez-konzervantu {
  --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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L5 19a1.5 1.5 0 0 0 1.3 2h11.4A1.5 1.5 0 0 0 19 19l-5-10V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3Cpath d='M3.5 3.5l17 17'/%3E%3C/svg%3E");
}
/* Vegan – list */
.p-detail-info .flags .flag-vegan,
.p-detail-info .flags .flag-veganske {
  --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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-13 15-14-1 10-6 15-14 15'/%3E%3Cpath d='M5 19l7-7'/%3E%3C/svg%3E");
}
/* BIO – klíček, tmavší zelená */
.p-detail-info .flags .flag-bio {
  --flag-c: #2f6b1f;
  --flag-bg: #f1f7e9;
  --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' 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");
}
/* PKU – štít s fajfkou, tyrkysová */
.p-detail-info .flags .flag-pku,
.p-detail-info .flags .flag-vhodne-pro-pku {
  --flag-c: #0f8a7a;
  --flag-bg: #ebf7f5;
  --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.2' 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");
}

/* ---------- marketingové štítky: malý plný odznak, vždy první ---------- */
.p-detail-info .flags .flag-new,
.p-detail-info .flags .flag-action,
.p-detail-info .flags .flag-tip,
.p-detail-info .flags .flag-discount {
  order: 0;
  height: 26px;
  padding: 0 11px !important;
  border: 0;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.p-detail-info .flags .flag-new::before,  .p-detail-info .flags .flag-new::after,
.p-detail-info .flags .flag-action::before, .p-detail-info .flags .flag-action::after,
.p-detail-info .flags .flag-tip::before,  .p-detail-info .flags .flag-tip::after,
.p-detail-info .flags .flag-discount::before, .p-detail-info .flags .flag-discount::after {
  display: none;
}
.p-detail-info .flags .flag-new      { background: #1f8f3a !important; }
.p-detail-info .flags .flag-tip      { background: #e0a100 !important; }
.p-detail-info .flags .flag-action,
.p-detail-info .flags .flag-discount { background: #d93025 !important; }

/* ---------- mobil ---------- */
@media (max-width: 767px) {
  .p-detail-info .flags.flags-default { gap: 6px; }
  .p-detail-info .flags .flag {
    height: 30px;
    font-size: 13px;
    padding: 0 11px 0 4px !important;
    gap: 6px;
  }
  .p-detail-info .flags .flag::before { flex-basis: 22px; width: 22px; height: 22px; }
  .p-detail-info .flags .flag::after  { width: 12px; height: 12px; margin-left: 5px; }
}