.flag.flag-freeshipping {
  background-color: #f6e0bb !important;
  color: #ffffff !important;
}



<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">

<style>
  #bicroma-benefits{margin:22px auto 26px;max-width:1200px;padding:0 10px;}
  #bicroma-benefits .wrap{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:20px 26px;
    align-items:start;
  }

  #bicroma-benefits .item{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
    min-width:0;

    opacity:0;
    transform:translateY(10px);
    transition:opacity .55s ease, transform .55s ease;
    will-change:opacity, transform;
  }
  #bicroma-benefits .item.is-in{opacity:1;transform:translateY(0);}

  /* větší ikonky na desktopu */
  #bicroma-benefits .icon{
    width:72px;height:72px;flex:0 0 72px;
    display:grid;place-items:center;
  }
  #bicroma-benefits .icon img{width:72px;height:72px;object-fit:contain;display:block;}

  #bicroma-benefits .ttl{
    margin:0;
    font-family:"Playfair Display", serif;
    font-weight:700;
    font-size:20px;
    line-height:1.15;
    color:#1f1f1f;
  }
  #bicroma-benefits .desc{
    margin:0;
    font-family:"Montserrat", sans-serif;
    font-weight:400;
    font-size:13.5px;
    line-height:1.55;
    color:#4a4a4a;
  }

  /* desktop vs mobile text */
  #bicroma-benefits .desc--m{display:none;}

  @media (max-width: 900px){
    #bicroma-benefits .wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}
    #bicroma-benefits .icon, #bicroma-benefits .icon img{width:64px;height:64px;}
  }

  @media (max-width: 640px){
    #bicroma-benefits{margin:16px auto 18px;}
    #bicroma-benefits .wrap{gap:16px 16px;}

    #bicroma-benefits .desc--d{display:none;}
    #bicroma-benefits .desc--m{display:block;}

    #bicroma-benefits .ttl{font-size:18px;}
    #bicroma-benefits .desc{font-size:13px;line-height:1.45;}

    #bicroma-benefits .icon, #bicroma-benefits .icon img{width:56px;height:56px;}
  }

  @media (prefers-reduced-motion: reduce){
    #bicroma-benefits .item{opacity:1;transform:none;transition:none;}
  }
</style>

<section id="bicroma-benefits">
  <div class="wrap">

    <div class="item">
      <div class="icon"><img src="https://www.bicroma.cz/user/documents/upload/99.png" alt="100% Made in Italy" loading="lazy"></div>
      <p class="ttl">100% Made in Italy</p>
      <p class="desc desc--d">100% italská kvalita. Receptury vznikají v našich italských laboratořích a procházejí přísným testováním u prestižních institucí.</p>
      <p class="desc desc--m">100% italská kvalita</p>
    </div>

    <div class="item">
      <div class="icon"><img src="https://www.bicroma.cz/user/documents/upload/98.png" alt="Přírodní kosmetika" loading="lazy"></div>
      <p class="ttl">Přírodní kosmetika</p>
      <p class="desc desc--d">Přírodní, organické i high-tech ingredience. Formulace s důrazem na účinnost, udržitelnost a péči o pleť do hloubky.</p>
      <p class="desc desc--m">Přírodní, organické i high-tech ingredience</p>
    </div>

    <div class="item">
      <div class="icon"><img src="https://www.bicroma.cz/user/documents/upload/97.png" alt="Soli z Mrtvého moře" loading="lazy"></div>
      <p class="ttl">Soli z Mrtvého moře</p>
      <p class="desc desc--d">Síla Mrtvého moře, zabalena v Itálii. Minerální bahno a slaná voda z Jordánska pro léčebné a kosmetické účinky.</p>
      <p class="desc desc--m">Síla Mrtvého moře, zabalena v Itálii</p>
    </div>

    <div class="item">
      <div class="icon"><img src="https://www.bicroma.cz/user/documents/upload/96.png" alt="Doprava zdarma" loading="lazy"></div>
      <p class="ttl">Doprava zdarma</p>
      <p class="desc desc--d">Doprava zdarma u objednávek nad 999 Kč. Rychlé doručení na více než 3 000 míst. Nejširší síť Zásilkovny v ČR a na Slovensku.</p>
      <p class="desc desc--m">Doprava zdarma u objednávek nad 999 Kč</p>
    </div>

  </div>
</section>

<script>
(function(){
  // 1) Přesun POD TOP BANNERY (carousel › top banner › ikonky)
  function findTopBanners(){
    // různé varianty Samby / úprav
    var sel = [
      '.next-to-carousel-banners',
      '.banners-row',
      '.banners--top',
      '.top-banners',
      '.homepage-banners',
      '.banners',
      '.banners-wrapper'
    ].join(', ');
    var nodes = document.querySelectorAll(sel);
    return nodes.length ? nodes[nodes.length - 1] : null; // poslední výskyt = typicky top banner blok
  }

  function findCarouselFallback(){
    return document.querySelector('.wide-carousel')
      || (function(){var c=document.querySelector('#carousel.carousel.slide');return c?c.parentElement:null;})()
      || (function(){var c2=document.querySelector('.carousel.slide');return c2?c2.parentElement:null;})()
      || null;
  }

  function moveBenefits(){
    var strip = document.getElementById('bicroma-benefits');
    if(!strip) return false;

    var anchor = findTopBanners() || findCarouselFallback();
    if(anchor && anchor.parentNode){
      anchor.insertAdjacentElement('afterend', strip);
      return true;
    }
    return false;
  }

  // 2) Jemná animace při zobrazení (1×)
  function animateBenefits(){
    var root = document.getElementById('bicroma-benefits');
    if(!root) return;

    var items = root.querySelectorAll('.item');
    if(!items.length) return;

    if(!('IntersectionObserver' in window)){
      items.forEach(function(el){ el.classList.add('is-in'); });
      return;
    }

    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(entry){
        if(entry.isIntersecting){
          var idx = Array.prototype.indexOf.call(items, entry.target);
          entry.target.style.transitionDelay = (idx * 70) + 'ms';
          entry.target.classList.add('is-in');
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.2 });

    items.forEach(function(el){ io.observe(el); });
  }

  function start(){
    // nejdřív zkus přesun
    if(moveBenefits()){
      // pak animace (po přesunu)
      animateBenefits();
      return;
    }

    // když se top banner načítá později, opakujeme + pozorujeme DOM
    var tries = 0;
    var iv = setInterval(function(){
      if(moveBenefits() || ++tries > 60){
        clearInterval(iv);
        animateBenefits();
      }
    }, 120);

    var mo = new MutationObserver(function(){
      if(moveBenefits()){
        mo.disconnect();
        animateBenefits();
      }
    });
    mo.observe(document.documentElement, { childList:true, subtree:true });

    window.addEventListener('load', function(){
      moveBenefits();
      animateBenefits();
    });
  }

  if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
  else start();
})();
</script>