/* ==========================================================
   ŽIJ PADEL! – PILL ŠTÍTKY (ZDARMA + SLEVA)
   Mobil:   kategorie – pilulky pod sebou, na střed, kotva dole
            detail – pilulky pod sebou, vpravo dole
   Desktop: kategorie – výchozí pozice šablony, pill vzhled
            detail – pilulky pod sebou, vpravo dole (10px)
   ========================================================== */

/* ===== MOBIL (do 767 px) ===== */
@media (max-width: 767px) {

  /* Kontejner štítků – pod sebou, na střed, kotva dole (výpis kategorie) */
  .flags.flags-extra {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    position: absolute !important;
    top: auto !important;
    bottom: 6px !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Doprava zdarma – limetkový pill (první) */
  .flags.flags-extra .flag.flag-freeshipping {
    display: inline-flex !important;
    width: auto !important;
    max-width: fit-content !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 5px !important;
    background: #c8f542 !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #1a2e5a !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: none !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    order: 1 !important;
  }

  /* Sleva – modrý gradient pill (druhý) */
  .flags.flags-extra .flag.flag-discount {
    display: inline-flex !important;
    width: auto !important;
    max-width: fit-content !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 5px !important;
    background: linear-gradient(180deg, #15336E 0%, #0C2147 45%, #081A38 100%) !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #fff !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: none !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    order: 2 !important;
  }

  /* Vnitřní span s procentem */
  .flags.flags-extra .flag.flag-discount .price-save {
    background: none !important;
    color: #BFE055 !important;
    font-weight: 700 !important;
    padding: 0 !important;
  }

  /* --- Detail produktu (mobil): štítky vpravo dole --- */
  .p-detail-inner .p-image {
    position: relative !important;
  }
  #wrap .flags.flags-extra,
  .p-detail .flags.flags-extra,
  .p-detail-inner .flags.flags-extra,
  .p-image-wrapper .flags.flags-extra {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    width: auto !important;
    max-width: none !important;
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    bottom: 8px !important;
    right: 8px !important;
    z-index: 55 !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* --- Detail produktu (mobil): pill styly pilulek --- */
  .p-detail .flags .flag.flag-freeshipping,
  .p-image-wrapper .flags .flag.flag-freeshipping {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    height: auto !important;
    max-width: fit-content !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: #c8f542 !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #1a2e5a !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: none !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  /* Ikona dodávky – malá, v řádku s textem */
  .p-detail .flags .flag.flag-freeshipping .icon-van,
  .p-image-wrapper .flags .flag.flag-freeshipping .icon-van {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
  .p-detail .flags .flag.flag-freeshipping .icon-van::before,
  .p-image-wrapper .flags .flag.flag-freeshipping .icon-van::before {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* Sleva – modrý gradient pill (detail) */
  .p-detail .flags .flag.flag-discount,
  .p-image-wrapper .flags .flag.flag-discount {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    height: auto !important;
    max-width: fit-content !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: linear-gradient(180deg, #15336E 0%, #0C2147 45%, #081A38 100%) !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #fff !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: none !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }
  .p-detail .flags .flag.flag-discount .price-save,
  .p-image-wrapper .flags .flag.flag-discount .price-save {
    background: none !important;
    color: #BFE055 !important;
    font-weight: 700 !important;
    padding: 0 !important;
  }

}

/* ===== DESKTOP (od 768 px) – pozice beze změny ===== */
@media (min-width: 768px) {

  /* --- Doprava zdarma – limetkový pill, sloupec: dodávka nahoře, text dole --- */
  .flags .flag.flag-freeshipping {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    width: auto !important;
    height: auto !important;
    max-width: fit-content !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: #c8f542 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #1a2e5a !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: none !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  /* Ikona dodávky – nahoře, malá */
  .flags .flag.flag-freeshipping .icon-van {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
    order: 1 !important;
  }
  .flags .flag.flag-freeshipping .icon-van svg,
  .flags .flag.flag-freeshipping .icon-van img {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    display: block !important;
  }
  .flags .flag.flag-freeshipping .icon-van::before {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* Text ZDARMA – dole */
  .flags .flag.flag-freeshipping .flag-text {
    order: 2 !important;
    line-height: 1.1 !important;
  }

  /* --- Sleva – modrý gradient pill --- */
  .flags .flag.flag-discount {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    height: auto !important;
    max-width: fit-content !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: linear-gradient(180deg, #15336E 0%, #0C2147 45%, #081A38 100%) !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #fff !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: none !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  /* Vnitřní span s procentem */
  .flags .flag.flag-discount .price-save {
    background: none !important;
    color: #BFE055 !important;
    font-weight: 700 !important;
    padding: 0 !important;
  }

  /* --- Detail produktu (desktop): pilulky pod sebou, vpravo dole --- */
  .p-detail .flags.flags-extra,
  .p-detail-inner .flags.flags-extra,
  .p-image-wrapper .flags.flags-extra {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    max-width: none !important;
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    bottom: 25px !important;
    right: 14px !important;
    z-index: 55 !important;
    margin: 0 !important;
  }

  /* ZDARMA – řádek: dodávka vlevo, text vpravo */
  .p-detail .flags .flag.flag-freeshipping,
  .p-image-wrapper .flags .flag.flag-freeshipping {
    flex-direction: row !important;
    gap: 6px !important;
    padding: 5px 14px !important;
  }
  .p-detail .flags .flag.flag-freeshipping .icon-van,
  .p-image-wrapper .flags .flag.flag-freeshipping .icon-van {
    order: 1 !important;
  }
  .p-detail .flags .flag.flag-freeshipping .flag-text,
  .p-image-wrapper .flags .flag.flag-freeshipping .flag-text {
    order: 2 !important;
  }

  /* Sleva – větší padding, ať ladí se ZDARMA */
  .p-detail .flags .flag.flag-discount,
  .p-image-wrapper .flags .flag.flag-discount {
    padding: 5px 14px !important;
  }

}