.prod-nutrition-detail {
    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    padding-bottom: 5rem;
}


.prod-nutrition-detail-breadcrumb {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: .5rem;

    color: #85869E;

    font-size: .75rem;
}


.prod-nutrition-detail-breadcrumb a {
    color: #85869E;

    text-decoration: none;
}


/* =========================
   FIRST SECTION
   ========================= */

.prod-recipe-main {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 1.25rem;

    margin:
        1.25rem 0;
}


.prod-recipe-left,
.prod-recipe-right {
    display: flex;

    min-width: 0;

    flex-direction: column;

    align-items: flex-start;

    gap: 1.25rem;
}


.prod-recipe-main-image {
    width: 100%;

    aspect-ratio: 1.35 / 1;

    overflow: hidden;

    border-radius: .75rem;

    background: #EBEFFF;
}


.prod-recipe-main-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.prod-recipe-kbju {
    display: flex;

    width: 100%;

    padding: .75rem;

    box-sizing: border-box;

    flex-direction: column;

    align-items: flex-start;

    gap: .75rem;

    border-radius: .75rem;

    background: #fff;
}


.prod-recipe-kbju > h2 {
    margin: 0;

    color: #0A0C3C;

    font-size: .875rem;
}


.prod-recipe-progress-list {
    display: flex;

    width: 100%;

    align-items: flex-start;

    gap: 1.25rem;
}


.prod-recipe-progress-col {
    display: flex;

    min-width: 0;

    flex: 1;

    flex-direction: column;

    align-items: center;

    gap: .5rem;
}


.prod-recipe-progress-col p {
    margin: 0;

    color: #9D9EB1;

    font-size: .75rem;

    font-weight: 500;
}


.prod-recipe-progress {
    width: 100%;
    height: .5rem;

    overflow: hidden;

    border-radius: 2rem;

    background: #F3F1FF;
}


.prod-recipe-progress span {
    display: block;

    height: 100%;

    border-radius: 2rem;

    background: #7E6CFF;
}


.prod-recipe-progress-col strong {
    color: #0A0C3C;

    font-size: .875rem;
}


/* =========================
   RIGHT INFO
   ========================= */

.prod-recipe-title-row {
    display: flex;

    width: 100%;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;
}


.prod-recipe-title-row h1 {
    margin: 0;

    color: #0A0C3C;

    font-size: 1rem;

    font-weight: 700;
}


.prod-recipe-favorite {
    display: inline-flex;

    flex: 0 0 auto;

    padding: .75rem 1rem;

    align-items: center;

    justify-content: center;

    gap: .625rem;

    border: 0;

    border-radius: .75rem;

    background: #EBEFFF;

    color: #0A0C3C;

    font: inherit;

    font-size: .875rem;

    font-weight: 600;

    text-decoration: none;
}


.prod-recipe-favorite:disabled {
    opacity: 1;

    cursor: default;
}


.prod-recipe-favorite svg {
    width: 1.25rem;
    height: 1.25rem;

    fill: none;

    stroke: #0A0C3C;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.prod-recipe-description {
    color: #85869E;

    font-size: .875rem;

    line-height: 1.5;
}


.prod-recipe-description p:first-child {
    margin-top: 0;
}


.prod-recipe-description p:last-child {
    margin-bottom: 0;
}


.prod-recipe-tags {
    display: flex;

    width: 100%;

    flex-wrap: wrap;

    gap: .5rem;
}


.prod-recipe-tags span {
    display: inline-flex;

    padding: .5rem 1rem;

    justify-content: center;

    align-items: center;

    border-radius: 2.5rem;

    background: #EBEFFF;

    color: #0A0C3C;

    font-size: .875rem;

    font-weight: 500;
}


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

.prod-recipe-ingredients {
    display: flex;

    width: 100%;

    padding: .75rem;

    box-sizing: border-box;

    flex-direction: column;

    gap: .5rem;

    border-radius: .75rem;

    background: #fff;
}


.prod-recipe-section-title h2 {
    margin: 0;

    color: #0A0C3C;

    font-size: 1rem;
}


.prod-recipe-ingredient-list {
    width: 100%;
}


.prod-recipe-ingredient {
    display: flex;

    width: 100%;

    padding:
        .5rem 0;

    box-sizing: border-box;

    align-items: flex-end;

    justify-content: space-between;

    gap: .35rem;

    color: #9D9EB1;

    font-size: .75rem;

    font-weight: 500;
}


.prod-recipe-ingredient-name {
    flex: 0 1 auto;
}


.prod-recipe-ingredient-dots {
    min-width: .5rem;

    flex: 1;

    border-bottom:
        2px dotted
        #D6D7E0;

    transform:
        translateY(-.2rem);
}


.prod-recipe-ingredient strong {
    flex: 0 0 auto;

    color: #0A0C3C;

    font-size: .75rem;

    font-weight: 600;
}


/* =========================
   METHOD
   ========================= */

.prod-recipe-method {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 1.25rem;

    margin-bottom: 1.25rem;
}


.prod-recipe-method > h2 {
    margin: 0;

    color: #0A0C3C;

    font-size: 1rem;
}


.prod-recipe-method-card {
    display: flex;

    width: 100%;

    padding: .75rem;

    box-sizing: border-box;

    flex-direction: column;

    gap: .5rem;

    border-radius: 1rem;

    background: #fff;
}


.prod-recipe-step {
    display: flex;

    padding: 1.25rem;

    box-sizing: border-box;

    flex-direction: column;

    align-items: flex-start;

    gap: .75rem;

    border-radius: .75rem;
}


.prod-recipe-step:nth-child(even) {
    background: #F8F9FE;
}


.prod-recipe-step h3 {
    margin: 0;

    color: #0A0C3C;

    font-size: .875rem;
}


.prod-recipe-step p {
    margin: 0;

    color: #9D9EB1;

    font-size: .75rem;

    font-weight: 500;

    line-height: 1.5;
}


/* =========================
   RELATED / NutritionMain
   ========================= */

.prod-recipe-related {
    display: flex;

    flex-direction: column;

    gap: 1.25rem;
}


.prod-recipe-related-title {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;
}


.prod-recipe-related-title h2 {
    margin: 0;

    color: #0A0C3C;

    font-size: 1rem;
}


.prod-recipe-related-title a {
    color: #7E6CFF;

    font-size: .75rem;

    font-weight: 600;

    text-decoration: none;
}


.prod-recipe-related-filters {
    display: flex;

    align-items: center;

    gap: .5rem;

    overflow-x: auto;

    scrollbar-width: none;
}


.prod-recipe-related-filters::-webkit-scrollbar {
    display: none;
}


.prod-recipe-related-filters button {
    display: inline-flex;

    flex: 0 0 auto;

    padding: .5rem 1rem;

    justify-content: center;

    border: 0;

    border-radius: 2.5rem;

    background: #EBEFFF;

    color: #0A0C3C;

    font: inherit;

    font-size: .75rem;

    font-weight: 500;

    cursor: pointer;
}


.prod-recipe-related-filters button.active {
    background: #7E6CFF;

    color: #fff;
}


.prod-recipe-related-list {
    display: flex;

    gap: 1.25rem;

    overflow-x: auto;

    cursor: grab;

    scrollbar-width: none;
}


.prod-recipe-related-list::-webkit-scrollbar {
    display: none;
}


.prod-recipe-related-list.dragging {
    cursor: grabbing;

    user-select: none;
}


.prod-recipe-related-card {
    display: flex;

    width:
        calc(
            (100% - 6.25rem)
            / 6
        );

    min-width:
        calc(
            (100% - 6.25rem)
            / 6
        );

    flex-direction: column;

    gap: 1.25rem;

    color: #0A0C3C;

    text-decoration: none;
}


.prod-recipe-related-card[hidden] {
    display: none;
}


.prod-recipe-related-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: .75rem;

    background: #EBEFFF;
}


.prod-recipe-related-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.prod-recipe-related-image > span {
    position: absolute;

    z-index: 2;

    top: .5rem;
    left: .5rem;

    display: inline-flex;

    padding: .25rem .5rem;

    border-radius: .25rem;

    background: #fff;

    color: #0A0C3C;

    font-size: .625rem;

    font-weight: 600;
}


.prod-recipe-related-footer h3 {
    margin:
        0 0 .5rem;

    color: #0A0C3C;

    font-size: .875rem;

    line-height: 1.35;
}


.prod-recipe-related-footer > div {
    display: flex;

    align-items: flex-start;

    gap: .5rem;

    flex-wrap: wrap;
}


.prod-recipe-related-footer span {
    display: inline-flex;

    padding: .25rem .75rem;

    align-items: center;

    border-radius: 2.5rem;

    background: #FFF8EC;

    color: #FFB53D;

    font-size: .75rem;

    font-weight: 500;
}


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

@media (max-width: 640.98px) {

    .prod-nutrition-detail-breadcrumb {
        margin:
            0 .75rem;
    }


    .prod-recipe-main {
        grid-template-columns: 1fr;

        margin:
            0 .75rem;
    }


    .prod-recipe-main-image {
        aspect-ratio:
            183 / 130;
    }


    .prod-recipe-progress-list {
        gap: .5rem;
    }


    .prod-recipe-title-row {
        align-items: flex-start;

        flex-direction: column;
    }


    .prod-recipe-favorite {
        width: 100%;

        box-sizing: border-box;
    }


    .prod-recipe-method {
        margin:
            0 .75rem
            1.25rem;
    }


    .prod-recipe-related-title,
    .prod-recipe-related-filters {
        margin:
            0 .75rem;
    }


    .prod-recipe-related-list {
        padding:
            0 .75rem;
    }


    .prod-recipe-related-card {
        width:
            calc(
                100%
                / 1.8
            );

        min-width:
            calc(
                100%
                / 1.8
            );
    }

}