/* =========================================================
        ASKMIMII
        INGREDIENT CATEGORY PAGE
        HYDRATION & BARRIER
========================================================= */


/* =========================================================
        PAGE
========================================================= */

.ingredient-category-page{

    width:100%;

    background:var(--clr-white);

}


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

.category-hero{

    width:100%;

    padding:
        150px
        4.5%
        70px;

    background:
        linear-gradient(
            180deg,
            #fffdfc 0%,
            #fff8fb 100%
        );

}



/* =========================================================
        HERO INNER
========================================================= */

.category-hero-inner{

    width:100%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1.5fr
        1.1fr;

    align-items:center;

    gap:70px;

}


/* =========================================================
        HERO COPY
========================================================= */

.category-hero-copy{

    width:100%;

    max-width:650px;

}


/* =========================================================
        CATEGORY TAG
========================================================= */

.category-tag{

    display:inline-block;

    padding:10px 18px;

    margin-bottom:28px;

    border-radius:999px;

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

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

}


/* =========================================================
        HERO TITLE
========================================================= */

.category-title{

    margin-bottom:25px;

    color:var(--clr-heading);

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

    line-height:1.15;

    font-weight:500;

}
/* 
.category-title span{

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

} */


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

.category-description{

    max-width:500px;

    margin-bottom:35px;

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/* =========================================================
        BENEFITS
========================================================= */

.category-benefits{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:52px;

}

.category-benefit{

    display:flex;

    align-items:center;

    gap:20px;

}

.category-benefit-icon{

    width:38px;

    height:38px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--clr-primary);

    font-size:.95rem;

}

.category-benefit-text{

    display:flex;

    flex-direction:column;

    gap:2px;

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

}

.category-benefit-text strong{

    color:var(--clr-heading);

    font-size:1rem;

    font-weight:600;

}

.category-benefit-text span{

    color:var(--clr-text);

    font-size:.99rem;

    line-height:1.4;

}


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

.category-hero-visual{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}


/*
   IMPORTANT:
   NO COLORED IMAGE BACKGROUND.
*/

.category-hero-image{

    width:100%;

    max-width:450px;

    height:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    background:transparent;

    box-shadow:none;

    border-radius:0;

    overflow:visible;

}

.category-hero-image img{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

    background:transparent;

    transition:
        transform .45s ease;

}

.category-hero-image:hover img{

    transform:
        translateY(-5px)
        scale(1.02);

}


/* =========================================================
        INGREDIENT SECTION
========================================================= */

.category-ingredients{

    width:100%;

    padding:
        50px
        4.5%
        80px;

    background:var(--clr-white);

}

.category-section-shell{

    width:100%;

    max-width:1400px;

    margin:auto;

}


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

.category-section-heading{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:25px;

    margin-bottom:45px;

}


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

.category-section-label{

    display:flex;

    align-items:center;

    gap:18px;

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

    font-size:.9rem;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--clr-primary);

}

.category-section-label::after{

    content:"";

    width:100px;

    height:1px;

    background:#eadfe8;

}


/* =========================================================
        INGREDIENT COUNT
========================================================= */

.category-count{

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

    font-size:.9rem;

    font-weight:500;

    color:var(--clr-text);

}


/* =========================================================
        INGREDIENT GRID

        DESKTOP = 3 LARGE CARDS
========================================================= */

.category-ingredient-grid{

    display:grid;

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

    gap:35px;

}


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

.category-ingredient-card{

    position:relative;

    overflow:hidden;

    min-height:340px;

    padding:30px;

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:34px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.06);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    cursor:pointer;

}


/* =========================================================
        CARD HOVER
        MATCHING HOMEPAGE FEATURE CARDS
========================================================= */

.category-ingredient-card:hover{

    transform:
        translateY(-12px);

    box-shadow:
        10px 48px 95px rgba(0,0,0,.09);

}


/* =========================================================
        SAVE BUTTON
========================================================= */

.ingredient-save{

    position:absolute;

    top:28px;

    right:28px;

    z-index:5;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:1px solid #eadfe8;

    border-radius:50%;

    background:var(--clr-white);

    color:var(--clr-primary);

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

    font-size:1.1rem;

    cursor:pointer;

    transition:.35s ease;

}

.ingredient-save:hover{

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

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

    color:var(--clr-white);

    transform:scale(1.08);

}


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

        NO BACKGROUND
        NO COLORED BOX
========================================================= */

.ingredient-card-image{

    width:100%;

   max-width: 300px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    background:transparent;

    overflow:visible;

    border-radius:0;

}


/* =========================================================
        IMAGE ITSELF
========================================================= */

.ingredient-card-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

    object-position:center;

    background:transparent;

    transition:
        transform .45s ease;

}


/* =========================================================
        IMAGE HOVER
========================================================= */

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

    transform:scale(1.05);

}


/* =========================================================
        CARD CONTENT
========================================================= */

.ingredient-card-content{

    flex:1;

    display:flex;

    flex-direction:column;

    padding:
        0
        5px
        5px;

}


/* =========================================================
        CARD TITLE
========================================================= */

.ingredient-card-title{

    margin-bottom:16px;

    color:var(--clr-heading);

    font-size:2rem;

    line-height:1.2;

    font-weight:500;

}

.ingredient-card-title span{

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

    font-size:1rem;

    font-weight:500;

}


/* =========================================================
        CARD DESCRIPTION
========================================================= */

.ingredient-card-description{

    max-width:400px;

    margin-bottom:28px;

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

    font-size:1rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

.ingredient-learn-more{

    width:max-content;

    min-width:160px;

    height:50px;

    margin-top:auto;

    padding:
        0
        24px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:999px;

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

    color:var(--clr-white);

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

    font-size:.95rem;

    font-weight:500;

    transition:.35s ease;

}

.ingredient-learn-more span{

    transition:.3s ease;

}

.ingredient-learn-more:hover{

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

    transform:translateY(-3px);

}

.ingredient-learn-more:hover span{

    transform:translateX(5px);

}


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

.mimii-tip-section{

    width:100%;

    padding:
        100px
        4.5%
        100px;

    background:var(--clr-white);

}

.mimii-tip-card{

    width:100%;

    max-width:1400px;

    min-height:175px;

    margin:auto;

    padding:
        28px
        40px;

    display:grid;

    grid-template-columns:
        .80fr
        1.5fr
        1fr;

    align-items:center;

    gap:30px;

    border-radius:34px;

      background:linear-gradient(
        135deg,
        #fff8fc,
        #ffffff,
        #fff6fb
    );

    box-shadow:0 12px 35px rgba(236,177,201,.12);

      transition:.35s ease;
}

.mimii-tip-card:hover{

     transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(236,177,201,.18);
    
}
/* =========================================================
        MIMII CHARACTER
========================================================= */

.mimii-tip-character{



    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

  
    background:transparent;

}

.mimii-tip-character img{

    width:100%;

    max-width: 400px;

    object-fit:contain;

}


/* =========================================================
        TIP CONTENT
========================================================= */

.mimii-tip-content{

    padding-right:30px;

    border-right:1px solid #eadfe8;

}

.mimii-tip-title{

    display:inline-block;

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

    font-size:1.7rem;

    font-weight:500;

    color:#cf679d;

    margin-bottom:16px;
}

.mimii-tip-title span{

    color:#cf679d;

}

.mimii-tip-text{

    
    font-size:1.02rem;

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

    line-height:1.9;

    color:#666;

    max-width:560px;

    margin-bottom:22px;
}


/* =========================================================
        TIP BENEFITS
========================================================= */

.mimii-tip-benefits{

    display:flex;

    flex-direction:column;

    gap:11px;

}

.mimii-tip-benefit{

    display:flex;

    align-items:center;

    gap:9px;

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

    font-size:.85rem;

    line-height:1.5;

    color:var(--clr-text);

}

.mimii-tip-benefit-icon{

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

    font-weight:600;

}


/* =========================================================
        TIP DECORATION
========================================================= */

.mimii-tip-decoration{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:transparent;

}

.mimii-tip-decoration img{

    width:100%;

    height:100%;

    object-fit:contain;

}


/* =========================================================
        ANALYSIS CTA
========================================================= */

.category-analysis-section{

    width:100%;

    padding:
        0
        4.5%
        80px;

    background:var(--clr-white);

}

.category-analysis-card{

    width:100%;

    max-width:1400px;

    min-height:230px;

    margin:auto;

    padding:
        30px
        45px;

    display:grid;

    grid-template-columns:
        240px
        1fr
        auto;

    align-items:center;

    gap:40px;

    overflow:hidden;

    border-radius:34px;

    
      background:linear-gradient(
        135deg,
        #fff8fc,
        #ffffff,
        #fff6fb
    );

}


/* =========================================================
        ANALYSIS CHARACTER
========================================================= */

.analysis-character{

    height:220px;

    display:flex;

    align-items:flex-end;

    justify-content:center;

}

.analysis-character img{

    height:100%;

    max-width:240px;

    object-fit:contain;

    object-position:bottom center;

}


/* =========================================================
        ANALYSIS COPY
========================================================= */

.analysis-copy{

    width:100%;

}

.analysis-eyebrow{

    margin-bottom:10px;

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

    font-size:.95rem;

    font-weight:600;

    letter-spacing:2.5px;

    text-transform:uppercase;

    color:var(--clr-primary);

    margin-bottom: 20px;

}

.analysis-title{

    margin-bottom:12px;

    color:var(--clr-heading);

    font-size:
        clamp(
            1.8rem,
            2.5vw,
            2.5rem
        );

    line-height:1.2;

    font-weight:500;

    margin-bottom: 20px;

}

.analysis-title span{

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

}

.analysis-description{

    max-width:550px;

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

    font-size:1.03rem;

    line-height:1.8;

    color:var(--clr-text);

}


/* =========================================================
        ANALYSIS ACTION
========================================================= */

.analysis-action{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.analysis-button{

    min-width:210px;

    height:58px;

    padding:
        0
        28px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:999px;

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

    color:var(--clr-white);

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

    font-size:.98rem;

    font-weight:500;

    transition:.35s ease;

}

.analysis-button span{

    transition:.3s ease;

}

.analysis-button:hover{

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

    transform:translateY(-4px);

}

.analysis-button:hover span{

    transform:translateX(5px);

}

.analysis-small-text{

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

    font-size:.75rem;

    color:var(--clr-text);

}


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

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

    /* HERO */

    .category-hero{

        padding:
            30px
            40px
            65px;

    }

    .category-hero-inner{

        grid-template-columns:
            1fr
            1fr;

        gap:40px;

    }

    .category-title{

        font-size:3.1rem;

    }

    .category-description{

        font-size:1rem;

    }

    .category-hero-image{

        max-width:550px;

    }


    /* INGREDIENTS */

    .category-ingredients{

        padding:
            50px
            40px
            70px;

    }

    .category-ingredient-grid{

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

        gap:28px;

    }

    .category-ingredient-card{

        min-height:520px;

        padding:28px;

    }

    .ingredient-card-image{

        height:270px;

    }

    .ingredient-card-title{

        font-size:1.8rem;

    }


    /* TIP */

    .mimii-tip-section{

        padding:
            0
            40px
            60px;

    }

    .mimii-tip-card{

        grid-template-columns:
            90px
            1.5fr
            1fr;

        padding:
            28px;

    }

    .mimii-tip-decoration{

        display:none;

    }


    /* CTA */

    .category-analysis-section{

        padding:
            0
            40px
            70px;

    }

    .category-analysis-card{

        grid-template-columns:
            180px
            1fr
            auto;

        padding:
            30px;

        gap:25px;

    }

    .analysis-character{

        height:190px;

    }

    .analysis-character img{

        max-width:190px;

    }

    .analysis-button{

        min-width:180px;

    }

}


/* =========================================================
        TABLET PORTRAIT
========================================================= */

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

    .category-hero-inner{

        grid-template-columns:1fr;

    }

    .category-hero-copy{

        max-width:700px;

    }

    .category-hero-visual{

        max-width:700px;

        margin:auto;

    }

    .category-hero-image img{

        max-width:350px;

    }

    .category-analysis-card{

        grid-template-columns:
            160px
            1fr;

    }

    .analysis-action{

        grid-column:2;

        align-items:flex-start;

    }

}


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

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

    /* HERO */

    .category-hero{

        padding:
            20px
            20px
            65px;

    }

    .category-breadcrumbs{

        margin-bottom:25px;

        font-size:.72rem;

        flex-wrap:wrap;

    }

    .category-hero-inner{

        display:flex;

        flex-direction:column;

        gap:35px;

    }

    .category-hero-copy{

        max-width:100%;

        text-align:center;

    }

    .category-tag{

        margin-bottom:20px;

        font-size:.72rem;

    }

    .category-title{

        font-size:2.3rem;

    }

    .category-description{

        max-width:100%;

        margin:
            0
            auto
            28px;

        font-size:.95rem;

        line-height:1.8;

    }


    /* BENEFITS */

    .category-benefits{

        justify-content:center;

        gap:15px;

    }

    .category-benefit{

        min-width:125px;

    }


    /* HERO IMAGE */

    .category-hero-image{

        max-width:500px;

    }


    /* INGREDIENTS */

    .category-ingredients{

        padding:
            70px
            20px;

    }

    .category-section-heading{

        align-items:flex-start;

        flex-direction:column;

        gap:10px;

        margin-bottom:40px;

    }

    .category-section-label{

        font-size:.72rem;

        letter-spacing:2px;

    }

    .category-section-label::after{

        width:70px;

    }

    .category-ingredient-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .category-ingredient-card{

        min-height:500px;

        padding:28px;

        border-radius:30px;

    }

    .ingredient-card-image{

        height:260px;

        margin-bottom:25px;

    }

    .ingredient-card-title{

        font-size:1.7rem;

    }

    .ingredient-card-description{

        font-size:.9rem;

        min-height:auto;

    }

    .ingredient-learn-more{

        height:52px;

    }


    /* TIP */

    .mimii-tip-section{

        padding:
            0
            20px
            60px;

    }

    .mimii-tip-card{

        grid-template-columns:1fr;

        padding:
            30px
            24px;

        gap:20px;

        text-align:center;

        border-radius:30px;

    }

    .mimii-tip-character{

        margin:auto;

    }

    .mimii-tip-content{

        padding-right:0;

        border-right:none;

    }

    .mimii-tip-title{

        font-size:1rem;

    }

    .mimii-tip-text{

        max-width:100%;

        font-size:.87rem;

    }

    .mimii-tip-benefits{

        align-items:flex-start;

        width:max-content;

        max-width:100%;

        margin:auto;

    }


    /* CTA */

    .category-analysis-section{

        padding:
            0
            20px
            65px;

    }

    .category-analysis-card{

        grid-template-columns:1fr;

        padding:
            30px
            24px
            0;

        gap:18px;

        text-align:center;

        border-radius:30px;

    }

    .analysis-copy{

        order:1;

    }

    .analysis-action{

        order:2;

        grid-column:auto;

        align-items:center;

    }

    .analysis-character{

        order:3;

        height:190px;

    }

    .analysis-character img{

        max-width:190px;

    }

    .analysis-title{

        font-size:1.75rem;

    }

    .analysis-description{

        font-size:.87rem;

    }

    .analysis-button{

        width:100%;

        max-width:280px;

    }

}


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

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

    .category-hero{

        padding:
            18px
            16px
            55px;

    }

    .category-title{

        font-size:2rem;

    }

    .category-description{

        font-size:.9rem;

    }

    .category-benefits{

        display:grid;

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

        gap:15px;

        text-align:left;

    }

    .category-benefit{

        min-width:0;

    }


    /* INGREDIENTS */

    .category-ingredients{

        padding:
            60px
            16px;

    }

    .category-ingredient-card{

        min-height:480px;

        padding:25px;

        border-radius:28px;

    }

    .ingredient-card-image{

        height:230px;

    }

    .ingredient-card-title{

        font-size:1.55rem;

    }

    .ingredient-card-description{

        font-size:.88rem;

    }


    /* TIP */

    .mimii-tip-section{

        padding:
            0
            16px
            55px;

    }

    .mimii-tip-card{

        padding:
            27px
            20px;

        border-radius:26px;

    }


    /* CTA */

    .category-analysis-section{

        padding:
            0
            16px
            60px;

    }

    .category-analysis-card{

        padding:
            28px
            18px
            0;

        border-radius:27px;

    }

    .analysis-title{

        font-size:1.55rem;

    }

}


/* =========================================================
        ACCESSIBILITY
========================================================= */

.category-ingredient-card:focus-within{

    outline:
        2px solid
        var(--clr-primary-light);

    outline-offset:4px;

}

a:focus-visible,
button:focus-visible{

    outline:
        2px solid
        var(--clr-primary-light);

    outline-offset:4px;

}


/* =========================================================
        REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}