/* =========================================================
   USP pruh na homepage (.benefitBanner.position--benefitHomepage)
   4 v řadě když je místo, jinak 2×2. Na mobilu ikona nad textem.   v3
   Soubor: /user/documents/yanabel/benefit-homepage.css?v=3

   CO DĚLÁ MOTIV SÁM (ověřeno měřením na živém webu 24. 7. 2026):
     ≤575px : .benefitBanner má display:block → položky nejsou
              flex-itemy, jdou pod sebe přes celou šířku
     576–991: display:flex + wrap, 2 na řádek (nativně OK)
     ≥992px : položky flex 1 1 33% → 4. USP se zalomí na druhý řádek

   PROČ v1 (nasazená) rozbíjela mobil:
     v1/v2 nastavovaly položkám max-width:50%, ale banner je na
     mobilu display:BLOCK → z toho nevznikly 2 sloupce, jen 4 řádky
     zúžené na polovinu a přiražené doleva. Bez display:flex to
     opravit nejde – proto ten !important flex níž.

   PROČ CONTAINER QUERIES místo media queries:
     homepage má vlevo sloupec s kategoriemi, takže obsah je do
     ~1300px viewportu široký jen ~677px. Na 677px se 4 v řadě
     nevejdou (text se láme po slabikách: "Expedi/ce do/24 hodin").
     Container query se řídí šířkou samotného pruhu, ne okna, takže
     funguje správně, ať Shoptet pruh vykreslí kamkoli.
     Prohlížeč bez podpory @container dostane základní 4 v řadě.

   Cíleno jen na position--benefitHomepage → detail produktu
   (position--benefitProduct) zůstává nedotčený.
   ========================================================= */

.benefitBanner.position--benefitHomepage{
  container-type: inline-size;
}

/* --- Základ: 4 v řadě --- */
.benefitBanner.position--benefitHomepage .benefitBanner__item{
  flex: 0 0 25% !important;
  max-width: 25% !important;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;                 /* mezera ikona ↔ text */
  padding: 10px 14px;
  margin-bottom: 0 !important;
}
/* velikost ikony řídí __picture (motiv má flex:0 0 75px), ne __img */
.benefitBanner.position--benefitHomepage .benefitBanner__picture{
  flex: 0 0 auto !important;
  max-width: none !important;
  margin-right: 0 !important; /* mezeru řeší gap na __item */
}
.benefitBanner.position--benefitHomepage .benefitBanner__img{
  width: 60px !important;
  height: 60px !important;
}

/* --- Mobil: motiv dává banneru display:block → vrátit flex --- */
@media (max-width: 575px){
  .benefitBanner.position--benefitHomepage{
    display: flex !important;
    flex-wrap: wrap !important;
  }
}

/* --- Pruh užší než 900px: 2×2 --- */
@container (max-width: 900px){
  .benefitBanner.position--benefitHomepage .benefitBanner__item{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 10px !important;
  }
}

/* --- Pruh užší než 430px (mobil): ikona nad textem, kompaktně ---
   Ikona 40px + text 12px je zvolené schválně: při 12px se i nejdelší
   popisek ("Jednoduchá manipulace") vejde na jeden řádek, takže jsou
   všechny 4 dlaždice stejně vysoké (78px) a pruh měří 163px místo 242px.
   Při 13px se dva popisky zalomí a mřížka je rozházená.            */
@container (max-width: 430px){
  .benefitBanner.position--benefitHomepage .benefitBanner__item{
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 8px 4px;
    margin-bottom: 4px !important;
  }
  .benefitBanner.position--benefitHomepage .benefitBanner__content{
    padding-right: 0;
  }
  .benefitBanner.position--benefitHomepage .benefitBanner__data{
    font-size: 12px;
    line-height: 1.3;
  }
  .benefitBanner.position--benefitHomepage .benefitBanner__img{
    width: 40px !important;
    height: 40px !important;
  }
}