/* =========================================================
   Responsive recipe diagram

   Desktop: labels sit on both sides of a centred image.
   Mobile: labels form one column and the full-size image is
   shifted right, so its ingredient layers are intentionally
   cropped by the section.
========================================================= */

#checkout-diagram {
    --diagram-orange: #ed4324;
    --diagram-navy: #07154a;
    --diagram-line-gap: 25px;
    --diagram-line-bend-min: 55px;
    --diagram-line-bend-max: 120px;

}

#checkout-diagram .recipe-diagram-section {
    position: relative;
    width: 100%;
    max-width: 1308px;
    height: clamp(720px, 70.1vw, 917px);
    min-height: 720px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: transparent;
}

#checkout-diagram .recipe-diagram-intro {
    display: none;
}


/* Centre image and image-relative anchors */

#checkout-diagram .recipe-diagram-image-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(390px, 36.32%, 475px);
    aspect-ratio: 1236 / 2560;
    transform: translate(-50%, -50%);
    z-index: 2;
}

#checkout-diagram .recipe-diagram-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

#checkout-diagram .diagram-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

/* =========================================================
   DESKTOP / TABLET LINE ENDPOINTS

   Adjust left to move an endpoint horizontally.
   Adjust top to move an endpoint vertically.
   Percentages are relative to the diagram image.
========================================================= */

#checkout-diagram .anchor-protein {
    top: 11.8%;
    left: 11.9%;
}

#checkout-diagram .anchor-base {
    top: 21.1%;
    left: 77.4%;
}

#checkout-diagram .anchor-fibre {
    top: 31.9%;
    left: 14%;
}

#checkout-diagram .anchor-volume {
    top: 45.8%;
    left: 80.5%;
}

#checkout-diagram .anchor-flavour {
    top: 57.5%;
    left: 15.9%;
}

#checkout-diagram .anchor-balance {
    top: 66.8%;
    left: 80.1%;
}


/* SVG connector layer */

#checkout-diagram .recipe-diagram-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}

#checkout-diagram .diagram-line {
    fill: none;
    stroke: var(--diagram-orange);
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}


/* Labels */

#checkout-diagram .diagram-label {
    position: absolute;
    width: clamp(210px, 20%, 260px);
    z-index: 5;
}

#checkout-diagram .diagram-label h2,
#checkout-diagram .diagram-label h3 {
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    font-family: 'Rubik', sans-serif;
    letter-spacing: -0.03px;
}

#checkout-diagram .diagram-label h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--diagram-orange);
    font-size: clamp(18px, 1.9vw, 25px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

#checkout-diagram .diagram-label h3 {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--diagram-navy);
    font-size: clamp(16px, 1.75vw, 23px);
    font-weight: 400;
    line-height: 1.3;
}

#checkout-diagram .diagram-label-left {
    left: clamp(0px, 2.3%, 30px);
    text-align: right;
}

#checkout-diagram .diagram-label-right {
    right: clamp(0px, 2.3%, 30px);
    text-align: left;
}

#checkout-diagram .diagram-protein {
    top: 0;
}

#checkout-diagram .diagram-fibre {
    top: 27%;
}

#checkout-diagram .diagram-flavour {
    top: 63.5%;
}

#checkout-diagram .diagram-base {
    top: 13%;
}

#checkout-diagram .diagram-volume {
    top: 42%;
}

#checkout-diagram .diagram-balance {
    top: 74%;
}


/* =========================================================
   Compact desktop / tablet landscape
   Preserve the two-sided layout while smoothly reducing the
   image, text, gaps and line bends.
========================================================= */

@media (max-width: 1180px) and (min-width: 768px) {
    #checkout-diagram {
        --diagram-line-gap: 18px;
        --diagram-line-bend-min: 32px;
        --diagram-line-bend-max: 78px;
    }

    #checkout-diagram .recipe-diagram-section {
        height: clamp(650px, 70vw, 826px);
        min-height: 650px;
    }

    #checkout-diagram .recipe-diagram-image-wrap {
        width: clamp(350px, 38vw, 430px);
    }

    #checkout-diagram .diagram-label {
        width: clamp(170px, 21vw, 225px);
    }

    #checkout-diagram .diagram-label h2 {
        margin-bottom: 7px;
        font-size: clamp(17px, 2.05vw, 22px);
    }

    #checkout-diagram .diagram-label h3 {
        font-size: clamp(15px, 1.85vw, 20px);
    }
}


/* =========================================================
   Mobile / portrait tablet
========================================================= */

@media (max-width: 767px) {
    #checkout-diagram {
        --mobile-image-width: clamp(430px, 136vw, 475px);
        --mobile-image-left: clamp(145px, 43vw, 300px);
        --mobile-label-left: clamp(6px, 2.3vw, 18px);
        --mobile-label-width: clamp(122px, 37.7vw, 190px);
        --diagram-line-gap: 15px;
        --diagram-line-bend-min: 8px;
        --diagram-line-bend-max: 34px;

    }

    #checkout-diagram .recipe-diagram-section {
        width: 100%;
        max-width: none;
        height: clamp(1000px, 315vw, 1102px);
        min-height: 0;
    }

    #checkout-diagram .recipe-diagram-intro {
        position: absolute;
        top: clamp(26px, 9.5vw, 38px);
        left: clamp(24px, 12vw, 54px);
        display: flex;
        flex-direction: column;
        z-index: 5;
        color: var(--diagram-navy);
        font-family: 'Rubik', sans-serif;
        font-size: clamp(18px, 5.8vw, 22px);
        line-height: 1.2;
        white-space: nowrap;
    }

    #checkout-diagram .recipe-diagram-intro strong {
        font-weight: 700;
    }

    #checkout-diagram .recipe-diagram-intro span {
        font-weight: 400;
    }

    #checkout-diagram .recipe-diagram-image-wrap {
        top: clamp(78px, 24vw, 92px);
        left: var(--mobile-image-left);
        width: var(--mobile-image-width);
        transform: none;
    }

    #checkout-diagram .diagram-label,
    #checkout-diagram .diagram-label-left,
    #checkout-diagram .diagram-label-right {
        left: var(--mobile-label-left);
        right: auto;
        width: var(--mobile-label-width);
        text-align: right;
    }

    #checkout-diagram .diagram-label h2 {
        margin-bottom: 6px;
        font-size: clamp(16px, 5.25vw, 20px);
        line-height: 1.15;
    }

    #checkout-diagram .diagram-label h3 {
        font-size: clamp(14px, 4.55vw, 17px);
        line-height: 1.3;
    }

    #checkout-diagram .diagram-protein {
        top: 12.4%;
    }

    #checkout-diagram .diagram-base {
        top: 24.4%;
    }

    #checkout-diagram .diagram-fibre {
        top: 36%;
    }

    #checkout-diagram .diagram-volume {
        top: 49.8%;
    }

    #checkout-diagram .diagram-flavour {
        top: 61.4%;
    }

    #checkout-diagram .diagram-balance {
        top: 73%;
    }

    /* =====================================================
       MOBILE LINE ENDPOINTS

       These class rules override the desktop positions.
       Adjust left for horizontal and top for vertical.
    ===================================================== */

    #checkout-diagram .anchor-protein {
        top: 9.2%;
        left: 15.5%;
    }

    #checkout-diagram .anchor-base {
        top: 21.2%;
        left: 20%;
    }

    #checkout-diagram .anchor-fibre {
        top: 32.9%;
        left: 14%;
    }

    #checkout-diagram .anchor-volume {
        top: 48.2%;
        left: 5%;
    }

    #checkout-diagram .anchor-flavour {
        top: 60%;
        left: 17.5%;
    }

    #checkout-diagram .anchor-balance {
        top: 70.8%;
        left: 17%;
    }

    #checkout-diagram .diagram-line {
        stroke-width: 1.5;
    }
}


@media (max-width: 340px) {
    #checkout-diagram {
        --mobile-image-left: 138px;
        --mobile-label-left: 4px;
        --mobile-label-width: 116px;
    }

    #checkout-diagram .recipe-diagram-intro {
        left: 20px;
    }
}


/* Add class="show-diagram-anchors" to #checkout-diagram while tuning. */
#checkout-diagram.show-diagram-anchors .diagram-anchor {
    width: 10px;
    height: 10px;
    opacity: 1;
    background: red;
    border-radius: 50%;
}