/* =========================================================
   SHEZMU – štítky TOP1 až TOP5 (příznaky Shoptetu)
   Soubor: /user/documents/upload/CSS/top-stitky.css
   POZOR: třídy .flag-top1 ... .flag-top5 doplním podle kódu,
   který Shoptet příznakům přidělí (viz zdrojový kód stránky).
   ========================================================= */

/* umístění: TOP štítek vpravo dole na fotce (jen příznaky na fotce, .flags-default),
   ostatní příznaky (PRO ŽENY, Tip...) zůstávají vlevo nahoře.
   V řádku pod názvem (.flags-inline, např. na titulce) zůstává štítek normálně v řadě. */
.flags-default:has(.flag-top1, .flag-top2, .flag-top3, .flag-top4, .flag-top5) {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none;
}
.flags-default:has(.flag-top1, .flag-top2, .flag-top3, .flag-top4, .flag-top5) > .flag { pointer-events: auto; }

.flags-default .flag.flag-top1,
.flags-default .flag.flag-top2,
.flags-default .flag.flag-top3,
.flags-default .flag.flag-top4,
.flags-default .flag.flag-top5 {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    z-index: 3;
}

/* v řádku pod názvem (.flags-inline: titulka, řádkový výpis, hledání) TOP štítky nezobrazujeme,
   patří jen na fotku v kategoriích */
.flags-inline .flag.flag-top1,
.flags-inline .flag.flag-top2,
.flags-inline .flag.flag-top3,
.flags-inline .flag.flag-top4,
.flags-inline .flag.flag-top5,
.flags:not(.flags-default) .flag.flag-top1,
.flags:not(.flags-default) .flag.flag-top2,
.flags:not(.flags-default) .flag.flag-top3,
.flags:not(.flags-default) .flag.flag-top4,
.flags:not(.flags-default) .flag.flag-top5 { display: none !important; }

/* šablona Step kreslí příznakům ocásek přes ::before a ::after, u TOP ho vypneme */
.flag.flag-top1::before, .flag.flag-top2::before, .flag.flag-top3::before, .flag.flag-top4::before, .flag.flag-top5::before,
.flag.flag-top1::after, .flag.flag-top2::after, .flag.flag-top3::after, .flag.flag-top4::after, .flag.flag-top5::after {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    clip-path: none !important;
    transform: none !important;
    margin: 0 !important;
}
.flag.flag-top1::after, .flag.flag-top2::after, .flag.flag-top3::after, .flag.flag-top4::after, .flag.flag-top5::after { content: none !important; }

.flag.flag-top1,
.flag.flag-top2,
.flag.flag-top3,
.flag.flag-top4,
.flag.flag-top5 {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px !important;
    border-radius: 2px !important;
    background: #1a1a1a !important;
    border: 1px solid #b8924a !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* zlatá hvězdička před textem */
.flag.flag-top1::before,
.flag.flag-top2::before,
.flag.flag-top3::before,
.flag.flag-top4::before,
.flag.flag-top5::before {
    content: '✦' !important;
    font-size: 10px;
    letter-spacing: 0;
    color: #d9b46a;
}

/* TOP 1: plné zlato, větší a s jemným leskem */
.flag.flag-top1 {
    padding: 9px 15px 9px 12px !important;
    font-size: 12px !important;
    background: linear-gradient(135deg, #8a6a2f 0%, #d9b46a 45%, #b8924a 60%, #8a6a2f 100%) !important;
    background-size: 200% 200% !important;
    border-color: #8a6a2f !important;
    color: #1a1a1a !important;
    overflow: hidden;
    animation: shezmu-top-shine 4s ease-in-out infinite;
}
.flag.flag-top1::before { color: #1a1a1a; font-size: 12px; }

/* TOP 2 a 3: zlatý text */
.flag.flag-top2,
.flag.flag-top3 { color: #d9b46a !important; }

@keyframes shezmu-top-shine {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@media (max-width: 767px) {
    .flags-default .flag.flag-top1,
    .flags-default .flag.flag-top2,
    .flags-default .flag.flag-top3,
    .flags-default .flag.flag-top4,
    .flags-default .flag.flag-top5 { right: 6px !important; bottom: 6px !important; }
    .flag.flag-top1,
    .flag.flag-top2,
    .flag.flag-top3,
    .flag.flag-top4,
    .flag.flag-top5 {
        gap: 4px;
        font-size: 7px !important;
        letter-spacing: .12em !important;
        padding: 4px 7px 4px 6px !important;
    }
    .flag.flag-top1 { font-size: 7.5px !important; padding: 5px 8px 5px 7px !important; }
    .flag.flag-top1::before,
    .flag.flag-top2::before,
    .flag.flag-top3::before,
    .flag.flag-top4::before,
    .flag.flag-top5::before { font-size: 7px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .flag.flag-top1 { animation: none; }
}

/* Pořadí v dárkových podkategoriích: TOP1 první, TOP5 poslední.
   Řadí se podle štítku, takže po změně žebříčku stačí přehodit štítky. */
body.in-darky-pro-ni .products-block > .product:has(.flag-top1),
body.in-darky-pro-nej .products-block > .product:has(.flag-top1),
body.in-darky-icandy .products-block > .product:has(.flag-top1) { order: 1; }
body.in-darky-pro-ni .products-block > .product:has(.flag-top2),
body.in-darky-pro-nej .products-block > .product:has(.flag-top2),
body.in-darky-icandy .products-block > .product:has(.flag-top2) { order: 2; }
body.in-darky-pro-ni .products-block > .product:has(.flag-top3),
body.in-darky-pro-nej .products-block > .product:has(.flag-top3),
body.in-darky-icandy .products-block > .product:has(.flag-top3) { order: 3; }
body.in-darky-pro-ni .products-block > .product:has(.flag-top4),
body.in-darky-pro-nej .products-block > .product:has(.flag-top4),
body.in-darky-icandy .products-block > .product:has(.flag-top4) { order: 4; }
body.in-darky-pro-ni .products-block > .product:has(.flag-top5),
body.in-darky-pro-nej .products-block > .product:has(.flag-top5),
body.in-darky-icandy .products-block > .product:has(.flag-top5) { order: 5; }