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

.product-hero{

    margin-top:80px;

    background:#faf8f5;

    padding:90px 60px;

}

.product-wrapper{

    max-width:1350px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:start;

}

.product-image{ 
 
    text-align:center;
    margin-top:200px;

}

.product-image img{

    width:100%;

    max-width:560px;

    display:block;

    margin:auto;

}

.product-content{

    max-width:600px;

}

.product-label{

    font-size:14px;

    letter-spacing:3px;

    color:#999;

    margin-bottom:18px;

}

.product-content h1{

    font-size:60px;

    font-weight:500;

    line-height:1.15;

    color:#222;

    margin-bottom:32px;

}

.product-content hr{

    border:none;

    border-top:1px solid #ececec;

    margin:45px 0;

}
/* ==========================================
   SECTION TITLES
========================================== */

.product-content h2{

    font-size:30px;

    font-weight:500;

    color:#222;

    margin-bottom:24px;

}

.ingredients-grid{

    display:grid;

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

    gap:16px;

}

.ingredients-grid div{

    padding:16px;

    border:1px solid #ececec;

    border-radius:12px;

    text-align:center;

    color:#555;

    background:white;

}
/* ==========================================
   DIETARY
========================================== */

.diet-grid{

    display:grid;

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

    gap:20px;

}

.diet-card{

    border:1px solid #ececec;

    border-radius:14px;

    padding:24px;

    text-align:center;

    background:#fff;

}

.diet-card span{

    font-size:34px;

    display:block;

    margin-bottom:14px;

}

.diet-card p{

    color:#666;

    line-height:1.7;

}
/* ==========================================
   SIZE CARDS
========================================== */

.product-sizes{

    display:grid;

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

    gap:22px;

}

.size-card{

    border:1px solid #ececec;

    border-radius:16px;

    padding:28px 20px;

    text-align:center;

    transition:.3s;

}

.size-card:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 24px rgba(0,0,0,.06);

}

.size-card strong{

    display:block;

    font-size:22px;

    color:#222;

    margin-bottom:12px;

}

.size-card span{

    display:block;

    color:#888;

    margin-bottom:16px;

}

.size-card p{

    margin-bottom:8px;

    color:#555;

}

.size-card small{

    color:#999;

}
/* ==========================================
   BUTTON
========================================== */

.back-home{

    margin-top:40px;

}

.back-home a{

    text-decoration:none;

    color:#777;

}

.back-home a:hover{

    color:#222;

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

@media (max-width:768px){

.product-hero{

    padding:60px 24px;

}

.product-wrapper{

    grid-template-columns:58% 42%;

}
.product-image img{

    max-width:780px;

}

.product-content{

    max-width:100%;

}

.product-content h1{

    font-size:42px;

}

.product-description{

    font-size:17px;

}

.ingredients-grid{

    grid-template-columns:1fr;

}

.diet-grid{

    grid-template-columns:1fr;

}

.product-sizes{

    grid-template-columns:1fr;

}

}
/* ==========================
   ALLERGEN NOTICE
========================== */

.allergen-card{

    border:1px solid #ececec;

    border-radius:16px;

    padding:28px;

    background:#fff;

}

.allergen-card p{

    font-size:17px;

    color:#666;

    line-height:1.8;

    margin-bottom:16px;

}

.allergen-card p:last-child{

    margin-bottom:0;

}
/* ==========================
   ALLERGEN NOTICE
========================== */

.allergen-notice{

    border:1px solid #e8e8e8;

    border-radius:18px;

    background:#fff;

    padding:38px 40px;

    text-align:center;

    margin-bottom:50px;

}

.allergen-icon{

    font-size:42px;

    color:#c89d3c;

    line-height:1;

    margin-bottom:18px;

}

.allergen-notice p{

    margin:10px auto;

    font-size:18px;

    line-height:1.8;

    color:#555;

    max-width:560px;

}

.allergen-notice p:last-child{

    margin-bottom:0;

}
/* ==========================
   PRODUCT NAVIGATION
========================== */

.product-navigation{

    display:grid;

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

    align-items:center;

    gap:20px;

    margin-top:50px;

    padding-top:30px;

    border-top:1px solid #ececec;

}

.product-navigation a{

    text-decoration:none;

    color:#444;

    font-size:16px;

    transition:.25s;

}
.product-navigation .all-flavors{

    justify-self:center;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#222;

    color:#fff;

    padding:12px 26px;

    border-radius:999px;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

}
.product-navigation .all-flavors:hover{

    background:#444;

    color:#fff;

}

.product-navigation a:hover{

    color:#000;

}

.product-navigation a:first-of-type{

    justify-self:start;

}

.product-navigation a:last-of-type{

    justify-self:end;

}

.product-navigation span{

    display:block;

}