/* =========================================================
        ASKMIMII — INGREDIENTS PAGE
        PAGE-SPECIFIC CSS

        Navbar + Footer are NOT included here.

        DESIGN SYSTEM SOURCE:
        Existing AskMimii homepage CSS
========================================================= */


/* =========================================================
        1. INGREDIENTS HERO
========================================================= */

.ingredients-hero{

    min-height:100vh;

    padding-top:100px;

    padding-inline:4.5%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--clr-white);

}


.ingredients-hero-container{

    width:100%;

    max-width:1400px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


/* =========================================================
        HERO — TEXT SIDE
========================================================= */

.ingredients-hero-content{

    flex:1;

    max-width:650px;

}


.ingredients-hero-content
.ingredient-section-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

    font-family:var(--ff-paragraph);

    letter-spacing:3px;

    font-size:1rem;

    font-weight:600;

    margin-bottom:28px;

}


/* =========================================================
        HERO HEADING

        Based on your existing:
        .ingredient-title
========================================================= */

.ingredients-hero-content
.ingredient-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:25px;

}


.ingredients-hero-content
.ingredient-title span{

    color:var(--clr-primary-light);

}


/* =========================================================
        HERO DESCRIPTION
========================================================= */

.ingredients-hero-content
.ingredient-description{

    font-family:var(--ff-paragraph);

    color:var(--clr-text);

    line-height:1.9;

    font-size:1.05rem;

    max-width:500px;

    margin-bottom:35px;

}


/* =========================================================
        HERO BUTTON GROUP

        Based on your existing .action-group
========================================================= */

.ingredients-hero-content
.action-group{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:20px;

}


/* =========================================================
        PRIMARY BUTTON

        Based directly on .action
        + .action-primary
========================================================= */

.ingredients-hero-content
.action{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:58px;

    padding:0 34px;

    border-radius:999px;

    font-family:var(--ff-paragraph);

    font-size:.98rem;

    font-weight:500;

    text-decoration:none;

    transition:.35s ease;

}


.ingredients-hero-content
.action-primary{

    background:var(--clr-primary-light);

    color:var(--clr-white);

}


.ingredients-hero-content
.action-primary:hover{

    transform:translateY(-4px);

    background:var(--clr-primary-hover-light);

}


/* =========================================================
        SECONDARY BUTTON

        Based directly on your .btn-secondary
========================================================= */

.ingredients-hero-content
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:58px;

    padding:0 24px;

    border-radius:999px;

    border:1px solid var(--clr-primary-light);

    background:transparent;

    color:var(--clr-primary);

    text-decoration:none;

    font-family:var(--ff-paragraph);

    font-size:.98rem;

    font-weight:500;

    transition:.35s ease;

}


.ingredients-hero-content
.btn-secondary:hover{

    background:var(--clr-primary-light);

    color:var(--clr-white);

    transform:translateY(-4px);

}


/* =========================================================
        HERO ARROWS
========================================================= */

.ingredients-hero-content
.action span,
.ingredients-hero-content
.btn-secondary span{

    display:inline-block;

    transition:.35s ease;

}


.ingredients-hero-content
.action:hover span,
.ingredients-hero-content
.btn-secondary:hover span{

    transform:translateX(4px);

}


/* =========================================================
        HERO IMAGE SIDE

        Based on your existing .hero-image
========================================================= */

.ingredients-hero
.hero-image{

    flex:1;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:30px;

}


.ingredients-hero
.hero-image img{

    width:550px;

    max-width:100%;

    position:relative;

    z-index:2;

    display:block;

    object-position:center top;

    transition:.45s ease;

}


/* Slight interaction only.
   No new decorative background. */

.ingredients-hero
.hero-image:hover img{

    transform:scale(1.02);

}


/* =========================================================
        2. CATEGORY SECTION
========================================================= */

.ingredient-categories{

    padding:50px 50px 20px;

    background:var(--clr-white);

}


/* =========================================================
        CATEGORY HEADING
========================================================= */

.ingredient-categories
.features-heading{

    max-width:750px;

    margin:20px auto 40px;

    text-align:center;

}


.ingredient-categories
.section-tag{

    display: inline-block;

    border-radius: 999px;

        padding: 10px 18px;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    font-weight:600;

    letter-spacing:3px;

        background: var(--clr-hover-soft);

    text-transform:uppercase;

    color:var(--clr-primary);

    margin-bottom:18px;

}


/* =========================================================
        CATEGORY GRID

        Reference has exactly 6 cards.
        Desktop = 6 across.
========================================================= */

.ingredient-category-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:50px;

    max-width:1300px;

    margin:auto;

}


/* =========================================================
        CATEGORY CARD

        Uses the same visual language as
        your existing .feature-card
========================================================= */

.ingredient-category-card{

    background:#fff;

    border-radius:26px;

    padding:28px 30px;

    text-align:left;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

    transition:.35s ease;

    overflow:hidden;

    position:relative;

    cursor:pointer;

    display:flex;

    flex-direction:column;

      position: relative;
    overflow: hidden;
    cursor: pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

         border: 2px solid rgba(0,0,0,.06);

}


.ingredient-category-card:hover{

    
    transform: translateY(-10px);

    border-color: rgba(214,170,210,.45);

    box-shadow:
        0 18px 45px rgba(223,184,216,.22);


}

.ingredient-category-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #f7d7ec,
        #e8d5ff
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}


.ingredient-category-card:hover::before{

    
    transform:scaleX(1);
}

/* =========================================================
        CATEGORY IMAGE / ICON
========================================================= */

.ingredient-category-card
.feature-image{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:18px;

}


.ingredient-category-card
.feature-image img{

    width:100%;

    max-width:500px;

    object-fit:contain;

    display:block;

    transition:.45s ease;

}


.ingredient-category-card:hover
.feature-image img{

    transform:scale(1.06);

}


/* =========================================================
        CATEGORY TITLE

        Keep close to existing feature-card
        typography but scaled for six cards.
========================================================= */

.ingredient-category-card
h3{

    font-size:1.45rem;

    font-family: var(--ff-paragraph);

    line-height:1.4;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:14px;

}


/* =========================================================
        CATEGORY DESCRIPTION
========================================================= */

.ingredient-category-card
p{

    font-family:var(--ff-paragraph);

    font-size:1rem;

    line-height:1.8;

    color:var(--clr-text);

    margin-bottom:25px;

}


/* =========================================================
        CATEGORY LINK

        Existing .feature-btn language
========================================================= */

.ingredient-category-card
.feature-btn{

    display:inline-flex;

    align-items:center;

    justify-content:flex-start;

    gap:7px;

    width:max-content;

    height:auto;

    padding:0;

    border-radius:0;

    background:transparent;

    color:var(--clr-primary);

    font-family:var(--ff-paragraph);

    font-size:1.09rem;

    font-weight:500;

    text-decoration:none;

    transition:.35s ease;

    margin-top:auto;

}


.ingredient-category-card
.feature-btn:hover{

    background:transparent;

    color:var(--clr-primary-hover-light);

    transform:none;

}


.ingredient-category-card
.feature-btn span{

    display:inline-block;

    transition:.35s ease;

}


.ingredient-category-card:hover
.feature-btn span{

    transform:translateX(5px);

}


/* =========================================================
        3. KNOWLEDGE STRIP
========================================================= */

.ingredient-knowledge{

    padding:20px 3% 50px;

    background:var(--clr-white);

}


.ingredient-knowledge-shell{

    max-width:1220px;

    margin:0 auto;

}


/* 

    /* =============================================
            KNOWLEDGE
    ============================================= */

    .ingredient-knowledge{

        padding:10px 16px 60px;

    }


    .ingredient-knowledge-container{

        padding:28px 22px;

        border-radius:24px;

    }


    .ingredient-knowledge-item
    .knowledge-illustration{

        width:48px;

        height:48px;

    }


    .ingredient-knowledge-item
    .knowledge-illustration img{

        width:48px;

        height:48px;

    }



/* =========================================================
        SECTION 3
        POPULAR INGREDIENTS
========================================================= */

.popular-ingredients-section{

    padding:100px 4% 140px;

    background:var(--clr-white);

}


.popular-ingredients-container{

    width:100%;

    max-width:1300px;

    margin:0 auto;

}


/* =========================================================
        SECTION HEADING
========================================================= */

.popular-ingredients-heading{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

}


.popular-ingredients-label{

    display: inline-block;

    border-radius: 999px;

        padding: 10px 18px;

    font-family:var(--ff-paragraph);

    font-size:.99rem;

    font-weight:600;

    letter-spacing:3px;

        background: var(--clr-hover-soft);

    text-transform:uppercase;

    color:var(--clr-primary);

    margin-bottom:18px
}

/* 
.popular-ingredients-line{

    width:45px;

    height:1px;

    background:var(--clr-primary);

    opacity:.7;

    margin-bottom: 18px;

} */


/* =========================================================
        POPULAR INGREDIENTS — HORIZONTAL ROW
========================================================= */

.popular-ingredients-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:50px;

}


/* =========================================================
        INGREDIENT CARD
========================================================= */

.popular-ingredient-card{

   position:relative;

    background:var(--clr-white);

    border-radius:30px;

    padding:34px 25px;

    box-shadow:0 18px 45px rgba(0,0,0,.05);

    transition:.35s ease;

    border:2px solid transparent;

        border: 2px solid rgba(0, 0, 0, .06);

}


.popular-ingredient-card:hover{

    transform:translateY(-8px);

    border-color:rgba(214,170,210,.4);

    box-shadow:0 24px 55px rgba(223,184,216,.18);

}


/* =========================================================
        INGREDIENT IMAGE
========================================================= */

.popular-ingredient-image{

    width:100%;

    height:250px;

    overflow:hidden;

    border-radius:18px;

}


.popular-ingredient-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:.45s ease;

}


.popular-ingredient-card:hover
.popular-ingredient-image img{

    transform:scale(1.04);

}


/* =========================================================
        INGREDIENT CONTENT
========================================================= */

.popular-ingredient-content{

    padding:12px 4px 0;

}


.popular-ingredient-content h3{

    margin-bottom:6px;

    color:var(--clr-heading);

    font-family:var(--ff-paragraph);

    font-size:1.2rem;

    font-weight:600;

    line-height:1.4;

    margin-bottom: 16px;

}


.popular-ingredient-content p{

    margin-bottom:8px;

    max-width:230px;

    color:var(--clr-text);

    font-family:var(--ff-paragraph);

    font-size:1.03rem;

    line-height:1.65;

    margin-bottom: 30px;

}


/* =========================================================
        LEARN MORE
========================================================= */

.popular-ingredient-link{

    display:inline-flex;

    align-items:center;

    gap:5px;

    text-decoration:none;

    color:var(--clr-primary);

    font-family:var(--ff-heading);

    font-size:20px;

    font-weight:500;

    transition:.3s ease;

}


.popular-ingredient-link span{

    display:inline-block;

    transition:.3s ease;

}


.popular-ingredient-link:hover{

    color:var(--clr-primary-hover-light);

}


.popular-ingredient-link:hover span{

    transform:translateX(5px);

}



/* =========================================================
        SECTION 4
        NEED HELP CHOOSING
========================================================= */

.ingredient-help-section{

    padding:0 4% 70px;

    background:var(--clr-white);

}


.ingredient-help-container{

        max-width: 1300px;
    margin: 10px;
    padding: 3rem 3rem;
    background: linear-gradient(135deg, #fff8fc, #ffffff, #fff6fb);
    border: 1px solid var(--clr-input-border);
    border-radius: 32px;
    transition: .35s ease;
    box-shadow: 0 12px 35px rgba(236, 177, 201, .12);
    display: grid;
   
    align-items: center;
    gap: 3rem;

}


/* =========================================================
        HELP SECTION LABEL
========================================================= */

.ingredient-help-label{

    font-family:var(--ff-paragraph);

    font-size:.75rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--clr-primary);

    margin-bottom:5px;

}


/* =========================================================
        HELP CONTENT — HORIZONTAL
========================================================= */

.ingredient-help-content{

    min-height:205px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}


/* =========================================================
        HELP TEXT
========================================================= */

.ingredient-help-text{

    flex:1;

    max-width:550px;

    position:relative;

    z-index:3;

}


.ingredient-help-text h2{

    margin-bottom:12px;

    color:var(--clr-heading);

    font-size:clamp(2rem,3vw,2.8rem);

    line-height:1.15;

    font-weight:500;

}


.ingredient-help-text p{

    max-width:430px;

    margin-bottom:20px;

    color:var(--clr-text);

    font-family:var(--ff-paragraph);

    font-size:1rem;

    line-height:1.8;

}


/* =========================================================
        HELP BUTTON
========================================================= */

.ingredient-help-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:50px;

    padding:0 25px;

    border-radius:999px;

    background:var(--clr-primary-light);

    color:var(--clr-white);

    font-family:var(--ff-paragraph);

    font-size:.99rem;

    font-weight:500;

    text-decoration:none;

    transition:.35s ease;

    

}


.ingredient-help-button:hover{

    background:var(--clr-primary-hover-light);

    transform:translateY(-4px);

}


.ingredient-help-button span{

    transition:.3s ease;

}


.ingredient-help-button:hover span{

    transform:translateX(5px);

}


/* =========================================================
        MIMII
========================================================= */

.ingredient-help-mimii{

    width:380px;

    height:230px;

    flex-shrink:0;

    position:relative;

    align-self:flex-end;

}


.ingredient-help-mimii img{

    position:absolute;

    width:330px;

   max-width: 100%;

    right:50px;

    bottom:-45px;

    display:block;

    object-fit:contain;

    object-position:center bottom;

    z-index:2;

}


/* =========================================================
        SPEECH BUBBLE
========================================================= */

.ingredient-help-bubble{

    position:absolute;

    right:0;

    top:25px;

    z-index:5;

    width:125px;

    padding:14px 16px;

    background:var(--clr-white);

    border-radius:20px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.06);

    color:var(--clr-primary-hover-light);

    font-family:var(--ff-paragraph);

    font-size:.98rem;

    line-height:1.55;

    text-align:center;

}


.ingredient-help-bubble::after{

    content:"";

    position:absolute;

    left:25px;

    bottom:-8px;

    width:16px;

    height:16px;

    background:var(--clr-white);

    transform:rotate(45deg);

}



/* =========================================================
        TABLET / iPAD
        1024px
========================================================= */

@media(max-width:1024px){

    /* =============================================
            POPULAR INGREDIENTS
    ============================================= */

    
.ingredients-hero{

  
    min-height: auto;

    padding-top:100px;

    padding-bottom: 50px;

    max-width: 1300px;

    padding-inline:4.5%;

    display:flex;

    background:var(--clr-white);

}

    .popular-ingredients-section{

        padding:30px 40px 45px;

    }


    .popular-ingredients-grid{

        grid-template-columns:
            repeat(4,1fr);

        gap:14px;

    }


    .popular-ingredient-image{

        height:85px;

    }


    .popular-ingredient-content h3{

        font-size:.95rem;

    }


    .popular-ingredient-content p{

        font-size:.75rem;

    }


    /* =============================================
            HELP SECTION
    ============================================= */

    .ingredient-help-section{

        padding:0 40px 70px;

    }


    .ingredient-help-container{

        padding:22px 30px 0;

        min-height:220px;

    }


    .ingredient-help-content{

        min-height:190px;

        gap:20px;

    }


    .ingredient-help-text{

        max-width:450px;

    }


    .ingredient-help-text h2{

        font-size:2rem;

    }


    .ingredient-help-text p{

        font-size:.95rem;

    }


    .ingredient-help-mimii{

        width:300px;

        height:215px;

    }


    .ingredient-help-mimii img{

        width:280px;

        height:240px;

        right:1px;

        bottom: 40px;

    }

}

/* =========================================================
        INGREDIENT CATEGORY SECTION — RESPONSIVE
========================================================= */


/* =========================================================
        IPAD / TABLET
========================================================= */

@media (max-width:1024px){

    .ingredient-categories{
        padding:70px 35px 30px;
    }

    .ingredient-categories .features-heading{
        max-width:680px;
        margin:15px auto 35px;
    }

    .ingredient-categories .section-tag{
        font-size:.9rem;
        letter-spacing:2.5px;
        padding:9px 16px;
    }

    .ingredient-category-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
        max-width:900px;
    }

    .ingredient-category-card{
        padding:26px 26px;
        border-radius:24px;
    }

    .ingredient-category-card .feature-image{
        margin-bottom:16px;
    }

    .ingredient-category-card .feature-image img{
        max-width:380px;
    }

    .ingredient-category-card h3{
        font-size:1.35rem;
    }

    .ingredient-category-card p{
        font-size:.96rem;
        line-height:1.75;
    }

    .ingredient-category-card .feature-btn{
        font-size:1rem;
    }
}


/* =========================================================
        SMALL TABLET
========================================================= */

@media (max-width:820px){

    .ingredient-categories{
        padding:65px 28px 25px;
    }

    .ingredient-category-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

    .ingredient-category-card{
        padding:24px;
    }

    .ingredient-category-card .feature-image img{
        max-width:320px;
    }

    .ingredient-category-card h3{
        font-size:1.28rem;
    }

    .ingredient-category-card p{
        font-size:.92rem;
    }
}


/* =========================================================
        MOBILE
========================================================= */

@media (max-width:768px){

    .ingredient-categories{
        padding:60px 20px 25px;
    }

    .ingredient-categories .features-heading{
        max-width:100%;
        margin:10px auto 30px;
    }

    .ingredient-categories .section-tag{
        font-size:.78rem;
        letter-spacing:2px;
        padding:8px 14px;
        margin-bottom:14px;
    }

    .ingredient-category-grid{
        grid-template-columns:1fr;
        gap:22px;
        max-width:520px;
    }

    .ingredient-category-card{
        padding:24px 22px;
        border-radius:22px;
    }

    .ingredient-category-card .feature-image{
        margin-bottom:14px;
    }

    .ingredient-category-card .feature-image img{
        width:100%;
        max-width:300px;
        margin:auto;
    }

    .ingredient-category-card h3{
        font-size:1.3rem;
        line-height:1.35;
        margin-bottom:12px;
    }

    .ingredient-category-card p{
        font-size:.93rem;
        line-height:1.7;
        margin-bottom:22px;
    }

    .ingredient-category-card .feature-btn{
        font-size:.98rem;
    }
}


/* =========================================================
        SMALL MOBILE
========================================================= */

@media (max-width:480px){

    .ingredient-categories{
        padding:50px 16px 20px;
    }

    .ingredient-categories .features-heading{
        margin-bottom:26px;
    }

    .ingredient-categories .section-tag{
        font-size:.72rem;
        letter-spacing:1.7px;
        padding:7px 12px;
    }

    .ingredient-category-grid{
        gap:18px;
    }

    .ingredient-category-card{
        padding:20px 18px;
        border-radius:20px;
    }

    .ingredient-category-card .feature-image{
        margin-bottom:12px;
    }

    .ingredient-category-card .feature-image img{
        max-width:240px;
    }

    .ingredient-category-card h3{
        font-size:1.2rem;
        margin-bottom:10px;
    }

    .ingredient-category-card p{
        font-size:.88rem;
        line-height:1.65;
        margin-bottom:18px;
    }

    .ingredient-category-card .feature-btn{
        font-size:.92rem;
    }
}

/* =========================================================
        MOBILE
        768px
========================================================= */

@media(max-width:768px){

    /* =============================================
            POPULAR INGREDIENTS
    ============================================= */

    .ingredients-hero-container{

                flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .popular-ingredients-section{

        padding:30px 20px 50px;

    }




    .popular-ingredients-heading{

        margin-bottom:25px;

    }


    .popular-ingredients-label{

        font-size:.72rem;

        letter-spacing:1.8px;

    }


    .popular-ingredients-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:25px 18px;

    }


    .popular-ingredient-image{

        height:110px;

    }


    .popular-ingredient-content h3{

        font-size:1rem;

    }


    .popular-ingredient-content p{

        font-size:.82rem;

        line-height:1.65;

    }


    .popular-ingredient-link{

        font-size:.78rem;

    }


    /* =============================================
            HELP SECTION
    ============================================= */

    .ingredient-help-section{

        padding:0 20px 70px;

    }


    .ingredient-help-container{

        min-height:320px;

        padding:25px 25px 0;

        border-radius:28px;

    }


    .ingredient-help-content{

        min-height:275px;

        gap:10px;

    }


    .ingredient-help-text{

        max-width:55%;

    }


    .ingredient-help-text h2{

        font-size:1.7rem;

    }


    .ingredient-help-text p{

        font-size:.85rem;

        line-height:1.7;

    }


    .ingredient-help-button{

        height:46px;

        padding:0 18px;

        font-size:.8rem;

    }


    .ingredient-help-mimii{

        width:180px;

        height:250px;

    }


    .ingredient-help-mimii img{

        width:210px;

        height:240px;

        right:-20px;

        bottom:-15px;

    }


    .ingredient-help-bubble{

        width:100px;

        right:-5px;

        top:15px;

        font-size:.7rem;

    }

}



/* =========================================================
        SMALL MOBILE
        480px
========================================================= */

@media(max-width:480px){

    /* =============================================
            POPULAR INGREDIENTS
    ============================================= */

    .popular-ingredients-section{

        padding:25px 16px 45px;

    }


    .popular-ingredients-label{

        font-size:.68rem;

        letter-spacing:1.5px;

    }


    .popular-ingredients-line{

        width:30px;

    }


    .popular-ingredients-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:22px 14px;

    }


    .popular-ingredient-image{

        height:90px;

        border-radius:15px;

    }


    .popular-ingredient-content{

        padding-top:10px;

    }


    .popular-ingredient-content h3{

        font-size:.92rem;

    }


    .popular-ingredient-content p{

        font-size:.76rem;

    }


    .popular-ingredient-link{

        font-size:.72rem;

    }


    /* =============================================
            HELP SECTION
    ============================================= */

    .ingredient-help-section{

        padding:0 16px 60px;

    }


    .ingredient-help-container{

        min-height:300px;

        padding:22px 20px 0;

        border-radius:24px;

    }


    .ingredient-help-content{

        min-height:255px;

    }


    .ingredient-help-text{

        max-width:58%;

    }


    .ingredient-help-text h2{

        font-size:1.4rem;

    }


    .ingredient-help-text p{

        font-size:.78rem;

    }


    .ingredient-help-button{

        height:42px;

        padding:0 14px;

        font-size:.7rem;

    }


    .ingredient-help-mimii{

        width:135px;

        height:210px;

    }


    .ingredient-help-mimii img{

        width:175px;

        height:205px;

        right:-25px;

        bottom:30px;

    }


    .ingredient-help-bubble{

        width:82px;

        padding:10px;

        font-size:.64rem;

        top:-70px;

    }

}