/*
    site.css - zajednicke ispravke i responzivnost
    Ucitava se POSLEDNJI na svim stranicama, posle ostalih css fajlova.
*/

/* ---------- Osnova ---------- */

:root
{
    color-scheme: light;
}

html
{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}

body
{
    background-color: #fff;
    color: #343434;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

img
{
    max-width: 100%;
    height: auto;
}

/* slike koje su namerno pozicionirane apsolutno ili po visini ne smeju da se skupe */
.ibImageLeft .infoblockImage img,
.ibImageRight .infoblockImage img,
.ibImageLeft2 .infoblockImage img,
.ibImageRight2 .infoblockImage img,
.ibBackImage .infoblockImage img,
.ibFaq .infoblockImage img,
.picture
{
    max-width: none;
}

a,
.menuItem div,
.infoblockButton div,
.button,
.pageImageButton,
.proizvodButton,
.respButton
{
    transition: color .2s, background-color .2s, border-color .2s, opacity .2s;
}

a:focus-visible,
button:focus-visible
{
    outline: 2px solid #0090c3;
    outline-offset: 2px;
}

.koseLinijeNaslov
{
    box-sizing: border-box;
}

/* ---------- Header ---------- */

#logo img,
#respLogo img
{
    display: block;
}

#hfLogo img
{
    display: block;
    max-height: 48px;
    width: auto;
}

#hfLogo
{
    padding-top: 6px;
}

#menuIcon
{
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Dugmad ---------- */

.button,
.pageImageButton,
.proizvodButton,
.respButton,
.infoblockButton div
{
    line-height: 1.4;
}

.button:hover
{
    background-color: #e70;
    color: #fff;
}

.proizvodButton:hover,
.respButton:hover,
.pageImageButton:hover
{
    opacity: .85;
}

/* ---------- Top proizvodi ---------- */

.topProductItem
{
    border-radius: 12px;
    box-sizing: border-box;
}

.topProductImage img
{
    display: block;
}

.arrowLeft,
.arrowRight
{
    cursor: pointer;
    z-index: 120;
}

/* ---------- Footer ---------- */

#footerUslovi a + a
{
    margin-left: 32px;
}

/* ---------- Tablet (do 1280px) ---------- */

@media only screen and (max-width: 1280px)
{
    .proizvodWrapper
    {
        margin-left: 2%;
        margin-right: 2%;
    }
}

/* ---------- Tablet (do 1024px) ---------- */

@media only screen and (max-width: 1024px)
{
    .containerSponsor
    {
        padding: 20px 2%;
    }

    .firstCard
    {
        margin-left: 0;
    }

    .button
    {
        padding: 10px 32px;
    }
}

/* ---------- Mali tablet (do 800px) ---------- */

@media only screen and (max-width: 800px)
{
    #header
    {
        width: 100%;
        padding: 0;
        min-height: 72px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    }

    #headerContent
    {
        width: 96%;
        padding-left: 2%;
        padding-right: 2%;
    }

    #hfLogo
    {
        margin-right: 72px;
    }

    #menuIcon
    {
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
    }

    #menuResp
    {
        box-shadow: -4px 0 16px rgba(0, 0, 0, .15);
    }

    .menuRespItem
    {
        font-size: 18px;
        padding: 14px 16px;
    }

    .subMenu
    {
        padding: 8px 16px;
        font-size: 16px;
    }

    .containerSponsor
    {
        flex-direction: column;
        gap: 24px;
        padding: 32px 4%;
    }

    .containerSponsor img
    {
        width: 100%;
        max-width: 480px;
    }

    .firstCard img,
    .card img
    {
        max-width: 220px;
    }

    .cardWithButton img
    {
        margin-bottom: 24px;
    }
}

/* ---------- Telefon (do 640px) ---------- */

@media only screen and (max-width: 640px)
{
    h1
    {
        font-size: 26px;
        padding-top: 32px;
    }

    /* justify na uskom ekranu pravi velike rupe izmedju reci */
    .infoblockDesc [style*="justify"],
    .listText [style*="justify"],
    .ibFlexImageLeft,
    .ibFlexImageRight,
    .ibFlexImageRightMain
    {
        text-align: left !important;
    }

    .infoblockDesc,
    .text
    {
        font-size: 16px;
        line-height: 1.6;
    }

    .infoblockTitle
    {
        word-break: normal;
        overflow-wrap: break-word;
    }

    .infoblockButton
    {
        display: block;
        text-align: center;
        padding-top: 24px;
    }

    .infoblockButton div
    {
        padding: 10px 40px;
    }

    /* top proizvodi u dve kolone umesto jedne velike */
    #topProduct
    {
        padding: 24px 4%;
    }

    .topProductContainer,
    .topProductContainer.centering
    {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        transform: none !important;
        margin-left: 0 !important;
    }

    .topProductItem
    {
        width: 48%;
        margin: 0 0 4% 0;
        padding: 12px 8px 16px 8px;
    }

    .topProductTitle
    {
        font-size: 16px;
        margin-top: 8px;
    }

    .topProductLink
    {
        font-size: 14px;
    }

    .colorButtons
    {
        min-height: 52px;
    }

    .button_text_one_line,
    .button_text_two_lines
    {
        text-align: center;
        margin-left: 0;
        width: 100%;
        padding: 0 12px;
    }

    #footerTop
    {
        padding: 32px 0 24px 0;
    }

    #footerUslovi a
    {
        display: inline-block;
        padding: 4px 0;
    }

    #footerUslovi a + a
    {
        margin-left: 16px;
    }

    #footerLogo img
    {
        max-width: 160px;
    }
}

/* ---------- Mali telefon (do 380px) ---------- */

@media only screen and (max-width: 380px)
{
    #respLogo img
    {
        max-height: 52px;
    }

    .topProductTitle
    {
        font-size: 14px;
    }

    .infoblockButton div,
    .proizvodButton,
    .respButton
    {
        padding-left: 28px;
        padding-right: 28px;
    }
}

/* =====================================================================
   Stranice proizvoda (hero + kartice sa ikonicama)
   ===================================================================== */


.infoblockDesc .container .card img
{
    max-width: 100%;
    height: auto;
}




@media only screen and (max-width: 640px)
{

    .infoblockDesc .container .card h3
    {
        font-size: 17px;
        padding-bottom: 8px;
    }

    .infoblockDesc .container .card p,
    .infoblockDesc .container .card .text
    {
        font-size: 15px;
        line-height: 1.5;
    }

    .grid-3
    {
        gap: 40px !important;
    }

    .respProizvodOnlyCardImage
    {
        text-align: center;
    }

    .respProizvodOnlyCardImage img
    {
        width: auto;
        max-width: 300px;
        max-height: 340px;
    }

    .ibDozaFlex .infoblockText,
    .ibDozaFlex.ibDozaFlex2 .infoblockText
    {
        width: 100%;
        margin-bottom: 32px;
    }

    .ibDozaFlex .infoblockDesc img
    {
        max-width: 220px;
    }


    /* ako za blok nije uneta mobilna slika, prikazi desktop sliku */
    .infoblockImage:not(:has(.infoblockImageRespPicture)) .infoblockImagePicture
    {
        display: block;
    }
}

/* =====================================================================
   Siroki ekrani (1800px i vise) - sadrzaj se siri umesto da ostane 1280px
   ===================================================================== */

:root
{
    --wrap: 1280px;
}

@media only screen and (min-width: 1800px)
{
    :root
    {
        --wrap: 1560px;
    }
}

@media only screen and (min-width: 2400px)
{
    :root
    {
        --wrap: 1840px;
    }
}

@media only screen and (min-width: 1800px)
{
    #headerContent,
    #menuContent,
    #subMenuContent,
    #footerContent,
    #footerBottomContent,
    #topProduct,
    .infoblock,
    .fullWidthTrue .infoblockText,
    .productItem,
    .listItems,
    .pageImageOverlay,
    .ibBackImage .infoblockText,
    .ibFaq .infoblockTitle,
    .ibFaq .infoblockDesc,
    .ibFaq .infoblockButton
    {
        max-width: var(--wrap);
    }

    .infoblock.fullWidthTrue
    {
        max-width: 100%;
    }

    .infoblock.halfWidth
    {
        max-width: calc(var(--wrap) * 0.85);
    }

    .ibDozaFlex
    {
        max-width: none;
        margin-left: calc((100vw - var(--wrap)) / 2);
    }

    .ibDozaFlex.ibDozaFlex2
    {
        margin-left: 0;
        margin-right: calc((100vw - var(--wrap)) / 2);
    }





    /* tipografija */
    #logo
    {
        max-width: 300px;
    }

    #hfLogo img
    {
        max-height: 56px;
    }

    .menuItem
    {
        font-size: 20px;
        height: 46px;
    }

    #subMenuContent
    {
        font-size: 17px;
    }


    .blue2Title .infoblockTitle,
    .blueTitle .infoblockTitle,
    .whiteTitle .infoblockTitle,
    .forteColor .infoblockTitle,
    .dailyColor .infoblockTitle,
    .dropsColor .infoblockTitle
    {
        font-size: 34px;
    }

    .infoblockDesc,
    .text,
    .plainText .infoblockDesc,
    .smallerDesc .infoblockDesc p
    {
        font-size: 19px;
    }

    .infoblockDesc h3,
    h3
    {
        font-size: 23px;
    }


    .topProductTitle
    {
        font-size: 26px;
    }

    #footerContent,
    #footerBottomContent
    {
        font-size: 18px;
    }

    .footerTitle
    {
        font-size: 20px;
    }
}

@media only screen and (min-width: 2400px)
{
    .infoblockDesc,
    .text,
    .plainText .infoblockDesc,
    .smallerDesc .infoblockDesc p
    {
        font-size: 21px;
    }

    .blue2Title .infoblockTitle,
    .blueTitle .infoblockTitle,
    .whiteTitle .infoblockTitle
    {
        font-size: 40px;
    }




}

/* =====================================================================
   HERO PROIZVODA (stranica /proizvod/N/...)
   ---------------------------------------------------------------------
   >= 1101px : tekst levo | proizvod sa pilulama desno
   641-1100  : tekst gore (centriran) | proizvod sa pilulama ispod
   <= 640    : mobilni prikaz sa slikama iz baze (resp.css)

   Sve velicine se racunaju iz nekoliko promenljivih:
     --hero-h   visina hero dela (raste sa sirinom ekrana)
     --aspect   odnos sirina/visina slike proizvoda
     --k        faktor velicine (siroke slike manje, uske vise) da svi
                proizvodi deluju podjednako veliki
     --pills    broj pilula
   Pilule se racunaju iz visine slike, pa nikad ne vire iznad/ispod nje.
   ===================================================================== */

.proizvodWrapper:has(.proizvodContainer)
{
    --logo-wf: 2.7;
    --text-col: 40%;
}

.proizvodWrapper:has(.proizvodContainer.probiotic) { --logo-wf: 2.88; }
.proizvodWrapper:has(.proizvodContainer.forte)     { --logo-wf: 2.39; }
.proizvodWrapper:has(.proizvodContainer.immuno)    { --logo-wf: 2.70; --text-col: 36%; }
.proizvodWrapper:has(.proizvodContainer.baby)      { --logo-wf: 2.60; }
.proizvodWrapper:has(.proizvodContainer.kids)      { --logo-wf: 4.34; --text-col: 32%; }

.proizvodContainer
{
    --aspect: 1.18;
    --k: 1;
    --pills: 3;
    --pill-ratio: 0.78;
}

.proizvodContainer.immuno { --aspect: 1.77; --k: 0.82; }
.proizvodContainer.drops  { --aspect: 0.64; --k: 1.08; }
.proizvodContainer.daily  { --aspect: 0.98; --k: 1; }
/* Baby: gornjih 26% slike je leptir - pilule se centriraju na kutiju */
.proizvodContainer.baby   { --aspect: 0.69; --k: 1.06; --pill-ratio: 0.64; --pill-shift: 0.132; }
.proizvodContainer.kids   { --aspect: 2.25; --k: 0.74; --pills: 4; --pill-ratio: 0.86; }

@media only screen and (min-width: 641px)
{
    #proizvodImage
    {
        margin: clamp(24px, 3.5vw, 96px) 0 clamp(32px, 4vw, 110px) 0;
    }

    .proizvodWrapper:has(.proizvodContainer)
    {
        --hero-h: clamp(290px, 20vw + 110px, 580px);
        --pill-max: clamp(46px, 2.6vw + 34px, 96px);
        --logo-h: clamp(80px, 4.4vw + 26px, 160px);

        display: grid !important;
        grid-template-columns: var(--text-col) minmax(0, 1fr);
        align-items: center;
        width: 96%;
        max-width: var(--wrap);
        margin: 0 auto !important;
        padding: 0;
    }

    /* na ovim sirinama hero crta proizvod i pilule uzivo, slike za mobilni se ne koriste */
    .proizvodWrapper:has(.proizvodContainer) .repProizvodImage,
    .proizvodWrapper:has(.proizvodContainer) .respProizvodOnlyCardImage,
    .proizvodWrapper:has(.proizvodContainer) .respButton
    {
        display: none !important;
    }

    .proizvodWrapper:has(.proizvodContainer) .proizvodImage
    {
        display: block !important;
        width: auto !important;
        container-type: inline-size;
    }

    .proizvodWrapper:has(.proizvodContainer) .prozivodContent
    {
        width: auto !important;
        margin: 0 !important;
        padding-right: clamp(24px, 3vw, 64px);
        box-sizing: border-box;
        text-align: left;
        text-align-last: auto;
    }

    .proizvodWrapper:has(.proizvodContainer) .proizvodTitle
    {
        display: block;
        width: min(100%, calc(var(--logo-h) * var(--logo-wf))) !important;
        height: auto;
        padding-bottom: 0;
        margin-bottom: clamp(10px, 1vw, 22px);
    }

    .proizvodWrapper:has(.proizvodContainer) .proizvodSubtitle
    {
        width: auto !important;
        max-width: 100%;
        font-size: clamp(22px, 1.1vw + 13px, 44px);
        line-height: 1.3;
        text-align: inherit;
    }

    .proizvodWrapper:has(.proizvodContainer) .proizvodButton
    {
        display: inline-block !important;
        font-size: clamp(15px, 0.5vw + 9px, 22px);
        padding: 0.8em 3.4em;
        margin-top: clamp(20px, 2vw, 40px);
    }

    /* ---------- vizuelni deo: pilule + proizvod ---------- */

    .proizvodContainer
    {
        /* desna ivica pilula; levo od nje je prostor u koji se pilula otvara */
        --R: clamp(280px, 46cqw, 560px);
        --overlap: calc(var(--pill-max) * 0.85);
        --pic-w: min(calc(100cqw - var(--R) + var(--overlap)), calc(var(--hero-h) * var(--k) * var(--aspect)));
        --pic-h: calc(var(--pic-w) / var(--aspect));
        --pill: max(32px, min(var(--pill-max), calc((var(--pic-h) * var(--pill-ratio) - (var(--pills) - 1) * 6px) / var(--pills) - 10px)));
        /* vidljivi deo trake posle ikonice */
        --pill-w: calc(var(--pill) + 10px + 26px + var(--overlap));
    }

    .proizvodContainer.kids
    {
        --R: clamp(260px, 30cqw, 420px);
    }

    .proizvodContainer .iconContainer
    {
        position: relative;
        box-sizing: border-box;
        height: var(--hero-h);
        padding: calc(2 * var(--pic-h) * var(--pill-shift, 0)) calc(100cqw - var(--R)) 0 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .proizvodContainer .icons
    {
        width: var(--pill-w);
        height: var(--pill);
        align-self: flex-end;
        margin: 0 0 6px 0;
        transition: width 0.6s ease;
    }

    .proizvodContainer .icons:last-of-type
    {
        margin-bottom: 0;
    }

    .proizvodContainer .icon
    {
        flex: 0 0 auto;
        width: var(--pill);
        height: var(--pill);
    }

    .proizvodContainer .iconText
    {
        width: auto;
        flex: 1 1 auto;
        padding-left: 14px;
        padding-right: calc(var(--overlap) + 12px);
        font-size: clamp(13px, 0.3vw + 9.5px, 19px);
        line-height: 1.3;
    }

    .proizvodContainer .iconCover1:hover { width: 100%; }
    .proizvodContainer .iconCover2:hover { width: 94%; }
    .proizvodContainer .iconCover3:hover { width: 88%; }
    .proizvodContainer .iconCover4:hover { width: 82%; }

    .proizvodContainer .picture
    {
        position: absolute;
        top: 50%;
        left: calc(var(--R) - var(--overlap));
        transform: translateY(-50%);
        width: var(--pic-w);
        height: auto;
        max-width: none;
        max-height: none;
    }

    .proizvodContainer.kids .iconCover3 .iconText
    {
        color: #13707a;
    }
}

/* tablet: tekst iznad, proizvod ispod - oba centrirana */
@media only screen and (min-width: 641px) and (max-width: 1100px)
{
    .proizvodWrapper:has(.proizvodContainer)
    {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
        --hero-h: clamp(270px, 24vw + 60px, 330px);
    }

    .proizvodWrapper:has(.proizvodContainer) .prozivodContent
    {
        padding-right: 0;
        text-align: center;
    }

    .proizvodWrapper:has(.proizvodContainer) .proizvodTitle
    {
        margin-left: auto;
        margin-right: auto;
    }

    .proizvodWrapper:has(.proizvodContainer) .proizvodSubtitle
    {
        max-width: 620px;
        margin: 0 auto;
    }

    .proizvodWrapper:has(.proizvodContainer) .proizvodImage
    {
        width: 100% !important;
        max-width: 780px;
        margin: 0 auto;
    }

    /* kompozicija (pilule + proizvod) horizontalno centrirana */
    .proizvodContainer .iconContainer
    {
        transform: translateX(calc(50cqw - (2 * var(--R) - var(--pill-w) - var(--overlap) + var(--pic-w)) / 2));
    }
}

/* =====================================================================
   BLOKOVI SADRZAJA NA STRANICAMA PROIZVODA
   ===================================================================== */

/* ---------- kartice sa ikonicama (.container > .card) ---------- */

.infoblockDesc .container .card img
{
    display: block;
    margin: 0 auto;
    width: clamp(96px, 6vw + 50px, 190px);
    max-width: 100%;
    height: auto;
}

.infoblockDesc .container .card
{
    width: auto !important;
    margin: 0 !important;
    text-align: center;
}

.infoblockDesc .container .card .text
{
    width: auto;
    max-width: 100%;
    margin-top: clamp(12px, 1.2vw, 24px);
}

/* 3 i 4 kartice: jedan red od 900px */
@media only screen and (min-width: 900px)
{
    .infoblockDesc .container:not(.grid-3):has(> .card)
    {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, clamp(220px, 17vw + 40px, 440px));
        justify-content: center;
        align-items: start;
        gap: clamp(24px, 3vw, 64px);
    }

    .grid-3
    {
        grid-template-columns: repeat(3, minmax(0, clamp(260px, 18vw + 60px, 460px))) !important;
        gap: clamp(32px, 3vw, 64px) !important;
    }
}

/* tablet: 4 kartice u 2x2, 3 kartice u jednom redu */
@media only screen and (min-width: 481px) and (max-width: 899px)
{
    .infoblockDesc .container:not(.grid-3):has(> .card)
    {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: center;
        align-items: start;
        gap: 40px 24px;
    }

    .infoblockDesc .container:not(.grid-3):has(> .card):has(> .card:nth-child(3):last-child)
    {
        grid-template-columns: minmax(0, 1fr);
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }

    .grid-3
    {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 40px 24px !important;
    }
}

/* telefon: 4 kartice 2x2, 3 kartice i duzi tekstovi jedna kolona */
@media only screen and (max-width: 480px)
{
    .infoblockDesc .container:not(.grid-3):has(> .card)
    {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px !important;
    }

    .infoblockDesc .container:not(.grid-3):has(> .card):has(> .card:nth-child(3):last-child)
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .infoblockDesc .container .card img
    {
        width: 104px;
    }
}

/* ---------- tekst + slika jedno pored drugog ---------- */

@media only screen and (max-width: 1100px)
{
    /* poravnanje na obe strane u uzim kolonama pravi rupe izmedju reci */
    .ibFlexImageRight,
    .ibFlexImageLeft,
    .ibFlexImageRightMain,
    .ibFlexImageRight .infoblockText,
    .ibFlexImageLeft .infoblockText,
    .infoblockDesc [style*="justify"]
    {
        text-align: left !important;
    }

}

@media only screen and (min-width: 641px) and (max-width: 1100px)
{
    .ibDozaFlex
    {
        margin-top: 32px;
        margin-bottom: 48px;
    }

    .ibDozaFlex .infoblockText,
    .ibDozaFlex.ibDozaFlex2 .infoblockText
    {
        width: 42%;
        margin-bottom: 0;
    }

    .ibDozaFlex .infoblockImage
    {
        width: 58%;
    }
}

/* ispod 900px blokovi idu jedan ispod drugog i tekst dobija punu sirinu */
@media only screen and (min-width: 641px) and (max-width: 900px)
{
    .ibFlexImageRight,
    .ibFlexImageLeft
    {
        flex-direction: column !important;
        align-items: center;
        gap: 24px;
    }

    .ibFlexImageRight .infoblockText,
    .ibFlexImageLeft .infoblockText
    {
        width: 100% !important;
        max-width: 720px;
        margin-top: 24px;
    }

    .ibFlexImageRight .infoblockImage,
    .ibFlexImageLeft .infoblockImage
    {
        order: 3;
        width: clamp(180px, 30vw, 260px) !important;
    }

    /* blokovi sa pravim tekstom: tekst gore, dekorativna slika ispod
       (blokovi gde je "tekst" samo slika, npr. leptir + trake, ostaju u redu) */
    .ibDozaFlex:not(:has(.infoblockDesc > img:only-child)),
    .ibDozaFlex.ibDozaFlex2:not(:has(.infoblockDesc > img:only-child))
    {
        flex-direction: column-reverse;
        align-items: center;
        margin: 32px auto 40px auto;
        gap: 24px;
    }

    .ibDozaFlex:not(:has(.infoblockDesc > img:only-child)) .infoblockText
    {
        width: 92%;
        max-width: 680px;
        margin: 0 auto;
    }

    .ibDozaFlex:not(:has(.infoblockDesc > img:only-child)) .infoblockImage
    {
        width: 80%;
        max-width: 560px;
    }
}

/* siroki ekrani: dekorativne trake ne smeju da progutaju stranu */
@media only screen and (min-width: 1800px)
{
    .ibDozaFlex .infoblockImage
    {
        width: 62%;
    }

    .ibDozaFlex .infoblockText,
    .ibDozaFlex.ibDozaFlex2 .infoblockText
    {
        width: 32%;
    }
}

/* naslovna, "Sta su probiotici?": tekst je imao 30% sirine + 300px uvlacenja */
@media only screen and (min-width: 1281px)
{
    .ibFlexImageRightMain
    {
        justify-content: center;
        align-items: center;
        gap: 4%;
    }

    .ibFlexImageRightMain .infoblockText
    {
        width: 46% !important;
        padding-left: 0 !important;
        margin-top: 0;
    }

    .ibFlexImageRightMain .infoblockImage
    {
        width: 36%;
        text-align: center;
    }

    .ibFlexImageRightMain .infoblockImage img
    {
        width: 80%;
    }
}

/* naslovna, "Zasto je dobro izabrati...": kartice u mrezi umesto fiksnih 300px */
@media only screen and (min-width: 641px) and (max-width: 1100px)
{
    .cardResp .container .cardRow1,
    .cardResp .container .cardRow2
    {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px 24px;
        justify-items: center;
    }

    .cardResp .container .cardRow2
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 66%;
        margin: 40px auto 0 auto;
    }

    .cardResp .container .cardDesc .text
    {
        width: auto;
        max-width: 300px;
    }
}

/* naslovna, "Sta su probiotici?" ispod 1281px: lista dobija punu (citljivu) sirinu */
@media only screen and (max-width: 1280px)
{
    .ibFlexImageRightMain .infoblockText
    {
        width: min(100%, 760px) !important;
    }
}

@media only screen and (max-width: 640px)
{
    .cardResp .container .cardDesc .text
    {
        width: auto;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =====================================================================
   Tirkizna traka sa naslovom (.paddingGap) + infografika koja je prekriva
   (.minusMargin) - npr. "3 + 1 + 1 FORMULA" i "Kada se preporucuje"
   Kartica prekriva donji deo trake za --band-ov, a izmedju poslednjeg
   teksta u traci i kartice ostaje uvek ~36px tirkizne.
   ===================================================================== */

.paddingGap
{
    --band-ov: clamp(40px, 7.5vw, 150px);
    padding-bottom: calc(var(--band-ov) + 36px) !important;
}

.paddingGap .infoblockText
{
    padding-bottom: 0 !important;
}

.paddingGap .infoblockTitle
{
    margin-bottom: 0;
}

.paddingGap:not(.noDesc) .infoblockTitle
{
    margin-bottom: 16px;
}

.paddingGap .infoblockDesc > :last-child
{
    margin-bottom: 0;
}

.paddingGap + .minusMargin,
.minusMargin
{
    margin-top: calc(-1 * clamp(40px, 7.5vw, 150px)) !important;
    padding-top: 0 !important;
    position: relative;
}

.minusMargin .infoblockImage
{
    margin-top: 0 !important;
}

.minusMargin .infoblockImage img
{
    vertical-align: top;
}

@media only screen and (max-width: 1100px)
{
    .minusMargin
    {
        width: 92% !important;
        max-width: 900px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .paddingGap .infoblockText
    {
        padding-top: 40px !important;
    }
}

/* 3 kartice u jednom redu tek kada ima mesta za citljiv tekst */
@media only screen and (min-width: 700px) and (max-width: 899px)
{
    .infoblockDesc .container:not(.grid-3):has(> .card):has(> .card:nth-child(3):last-child)
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: none;
    }
}

/* =====================================================================
   Vertikalni ritam izmedju sekcija (stranice proizvoda)
   ===================================================================== */

.infoblock.plainText,
.infoblock.halfWidth
{
    padding-top: clamp(36px, 4vw, 80px);
    padding-bottom: clamp(36px, 4vw, 80px);
}

/* blok sa naslovom + blok sa karticama bez naslova su jedna celina */
.infoblock.plainText:has(+ .infoblock.noTitle)
{
    padding-bottom: clamp(8px, 1vw, 16px);
}

.infoblock.noTitle
{
    padding-top: clamp(8px, 1vw, 16px);
}

/* razmak izmedju sadrzaja i tirkizne trake / sledeceg naslova */
.infoblock + .infoblock.paddingGap,
.infoblock.fullWidthTrue.blue2Background
{
    margin-top: clamp(40px, 4.5vw, 96px);
}

@media only screen and (max-width: 640px)
{
    .infoblock.plainText,
    .infoblock.halfWidth
    {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .infoblock.plainText:has(+ .infoblock.noTitle)
    {
        padding-bottom: 8px;
    }

    .infoblock.noTitle
    {
        padding-top: 8px;
    }
}

/* dekorativni blokovi (slika + trake) su imali 50 + 100 + 100px margina */
.infoblock.ibDozaFlex
{
    margin-top: clamp(8px, 1.5vw, 32px);
    margin-bottom: clamp(8px, 1.5vw, 32px);
}

.infoblock.ibDozaFlex .infoblockText
{
    margin-bottom: 0;
}

.ibFlexImageRight
{
    margin-bottom: 0;
}

@media only screen and (min-width: 641px)
{
    #proizvodImage
    {
        margin-bottom: clamp(16px, 2vw, 48px);
    }
}

/* ako je pre trake obican tekstualni blok, on vec ima svoj donji razmak */
.infoblock.plainText + .infoblock.paddingGap
{
    margin-top: clamp(12px, 1vw, 24px);
}

/* =====================================================================
   Telefon (do 640px): kartice jedna ispod druge, umerene velicine slika
   ===================================================================== */
@media only screen and (max-width: 640px)
{
    .infoblockDesc .container:has(> .card),
    .infoblockDesc .container:not(.grid-3):has(> .card),
    .infoblockDesc .container:not(.grid-3):has(> .card):has(> .card:nth-child(3):last-child),
    .grid-3
    {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
        gap: 36px !important;
    }

    .infoblockDesc .container .card img
    {
        width: 104px;
    }

    /* slika sa pilulama ispod proizvoda (iz baze) */
    .repProizvodImage
    {
        text-align: center;
    }

    .repProizvodImage .respImage2
    {
        width: 100%;
        max-width: 340px;
        height: auto;
        margin: 0 auto;
    }

    /* okrugle znacke ("5 milijardi", "1 milijarda") */
    .ibFlexImageRight .infoblockImage
    {
        width: 100% !important;
        max-width: 230px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* liste u sadrzaju: tackice unutar kolone teksta (globalni reset je brisao uvlacenje) */
.infoblock:not(.list4Columns) .infoblockDesc ul:not([style]):not([class]) > li,
.infoblock:not(.list4Columns) .infoblockDesc ol:not([style]):not([class]) > li
{
    margin-left: 1.3em;
    padding-left: 0.2em;
}

/* uspravne (mobilne) verzije infografika ne smeju da se razvuku preko celog ekrana */
.minusMargin .infoblockImageRespPicture
{
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 640px)
{
    .minusMargin:has(.infoblockImageRespPicture)
    {
        width: 100% !important;
    }
}

@media only screen and (max-width: 640px)
{
    /* graficki prikaz ("5 milijardi korisnih bakterija") u tekstu bloka */
    .ibProductImageRight .infoblockImage2
    {
        max-width: 240px;
        margin: 24px auto 0 auto;
    }

    /* "Sastav dnevne doze": kolona je imala zaostalu desnu marginu od 30px */
    .ibDozaFlex .infoblockText,
    .ibDozaFlex.ibDozaFlex2 .infoblockText
    {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}