.image-count-1 {
    display: flex;
    justify-content: center;
    /*    width:1500px;*/
}

    .image-count-1 .visual-section-gallery {
        width: 70%;
    }



@media(max-width:1546px) {

    .image-count-2:has(.undercarriage2-img) {
        display: flex;
        justify-content: center;
    }

    .visual-section-gallery:has(.undercarriage2-img) {
        width: 70%;
    }
}

@media(max-width:1440px) {

    .image-count-1 .visual-section-gallery {
        width: 100%;
    }

    .visual-section-gallery:has(.undercarriage2-img) {
        width: 100%;
    }
}



.visual-section-gallery {
    margin-top: var(--space-4xl);
    margin-bottom: var(--space-4xl);
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.03);
    margin-top: 27px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f7f8fb;
    padding: 16px;
}

@media(max-width:1024px) {
    .visual-section-gallery {
        width: 100%;
    }
}
/* Responsive grid – cards will be uniform */
.visual-grid-dynamic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(274px, 1fr));
    /*        grid-template-columns: repeat(auto-fit, minmax(217px, 1fr));*/
    gap: var(--space-xl);
    align-items: start;
}

@media(max-width:1482px) {
    .visual-grid-dynamic {
        /*        grid-template-columns: repeat(auto-fit, minmax(221px, 1fr));*/
        grid-template-columns: 1fr;
    }
}

.visual-single {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 428px;
    border-radius: 10px;
    background: #e5e7eb;
}


@media(max-width:425px) {

    .visual-single {
        min-height: 300px;
    }

        .visual-single .body-side-img {
            padding-right: 50px;
        }
}
/* Card styling */
.visual-card {
    border-radius: var(--r-m);
    /*    overflow: hidden;*/
    /*    background: var(--color-card);*/
    /*    border: 1px solid var(--color-border);*/
    /*    box-shadow: var(--shadow-1);*/
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}




/* Fixed uniform size for ALL images (SVG + raster) */
.fixed-image-container {
    width: 100%;
    /* height: 321px; */
    max-width: 360px;
    margin: 0 auto;
    /* background: #f8f8f8; */
    /* border-radius: var(--r-m);*/
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}




.fixed-size-image {
    width: 100%;
    max-height: 133px;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: transparent;
    display: block;
    transition: transform 0.3s ease;
}


/* Optional subtle zoom on hover */
/*.visual-card:hover .fixed-size-image {
    transform: scale(1.05);
    }*/


/* Caption below image */
.visual-caption {
    padding: var(--space-s) var(--space-m);
    font-size: 13px;
    color: var(--color-muted);
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.measure-wrapper {
    position: relative;
    /*    padding: 20px;*/
    display: inline-block;
    margin: 15px;
}

@media(max-width:620px) {
    .body-img .measure-wrapper {
        margin: 68px;
    }
}

/* ----------------------------------
    MEASUREMENT LINES
    -----------------------------------*/
.m-line {
    position: absolute;
    background: var(--color-border);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Top Line */
.m-top {
    top: -27px;
    left: 0%;
    width: 100%;
    height: 1px;
}

/* Bottom Line */
.m-bottom {
    bottom: -55px;
    /* left: 10%; */
    width: 100%;
    height: 0.5px;
}

/* Left Line */
.m-left {
    left: -16px;
    /* top: 9%; */
    width: 1px;
    height: 100%;
}

/* Right Line */
.m-right {
    right: -30px;
    /* top: 10%; */
    width: 1px;
    height: 100%;
}


/* ----------------------------------
     CORNER TICKS FOR MEASUREMENT LINES 
    -----------------------------------*/
/* Horizontal lines (top/bottom) - vertical ticks at ends */
.m-top::before,
.m-top::after,
.m-bottom::before,
.m-bottom::after {
    content: '';
    position: absolute;
    width: 0.1px; /* tick thickness */
    height: 12px; /* tick length */
    background: var(--color-border);
}
/* Left tick (outward) */
.m-top::before,
.m-bottom::before {
    left: 0;
    transform: translateX(-50%);
}

.m-top::before {
    top: -0px;
}
/* extends upward from top line */
.m-bottom::before {
    bottom: -0px;
}
/* extends downward from bottom line */
/* Right tick (outward) */
.m-top::after,
.m-bottom::after {
    right: 0;
    transform: translateX(50%);
}

.m-top::after {
    top: -0px;
}

.m-bottom::after {
    bottom: -0px;
}
/* Vertical lines (left/right) - horizontal ticks at ends */
.m-left::before,
.m-left::after,
.m-right::before,
.m-right::after {
    content: '';
    position: absolute;
    width: 12px; /* tick length */
    height: 0.1px; /* tick thickness */
    background: var(--color-border);
}
/* Top tick (outward) */
.m-left::before,
.m-right::before {
    top: 0;
    transform: translateY(-50%);
}

.m-left::before {
    left: 0px;
}

.m-right::before {
    right: 0px;
}
/* Bottom tick (outward) */
.m-left::after,
.m-right::after {
    bottom: 0;
    transform: translateY(50%);
}

.m-left::after {
    left: 0px;
}

.m-right::after {
    right: 0px;
}
/* ----------------------------------
   LABEL STYLING
-----------------------------------*/
.label {
    /* background: #fff; */
    color: #111;
    font-size: 10px;
    padding: 3px 8px;
    /* border-radius: 20px; */
    /* border: 1px solid #ccc; */
    white-space: nowrap;
    font-weight: 500;
}
/* Horizontal label positioning */
.m-top .label {
    position: absolute;
    top: -26px;
}

.m-bottom .label {
    position: absolute;
    top: 8px;
}
/* Vertical (Rotated Height labels) */
.label-vertical {
    position: absolute;
    top: 50%;
    transform-origin: center;
    white-space: nowrap;
}
/* Vertical positioning */
.m-left .label {
    position: absolute;
    top: 50%;
    transform-origin: center;
    white-space: nowrap;
    left: -37px;
    transform: translate(-59%, -50%) rotate(0deg);
}



.m-right .label {
    position: absolute;
    top: 50%;
    transform-origin: center;
    white-space: nowrap;
    right: -43px;
    transform: translate(55%, -50%) rotate(0deg);
}

@media(max-width:750px) {
    .m-displayName {
        display: none;
    }

    .m-left .label {
        left: -23px;
    }
}


@media (max-width:750px) {
    .lable-caption {
        display: none;
    }

    .m-right .label {
        right: -27px;
    }
}

/* ----------------------------------
   NEW SHORTER INNER BOTTOM LINE
-----------------------------------*/
.m-bottom-upper {
    position: absolute;
    /* bottom: -18px; */
    bottom: -27px;

    left: 0%;
    width: 100%;
    height: 0.5px;
    background: var(--color-border);
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}


/*.m-bottom-upper {
    position: absolute;
    bottom: -18px;
    left: 15%;
    width: 70.5%;
    height: 1px;
    background: var(--color-border);
    display: flex;*/
/* justify-content: space-between; */
/*align-items: center;
}*/
/* The actual flex container holding the labels */
.m-bottom-upper {
    display: flex;
    justify-content: space-between; /* simplest for 3 equal-ish items */
    align-items: center;
}
    /* Override the label padding that's breaking widths */
    .m-bottom-upper .label.item {
        padding: 0;
        flex: 1;
        text-align: center;
        position: relative;
    }
    /* Ticks for the new inner bottom line (same style as others) */
    .m-bottom-upper::before,
    .m-bottom-upper::after {
        content: '';
        position: absolute;
        width: 0.1px;
        height: 12px;
        background: var(--color-border);
    }

    .m-bottom-upper::before {
        left: 0;
        transform: translateX(-50%);
        bottom: -0px; /* extends downward */
    }

    .m-bottom-upper::after {
        right: 0;
        transform: translateX(50%);
        bottom: -0px; /* extends downward */
    }
    /* Labels on the new inner line – placed via flex children */
    .m-bottom-upper .label {
        position: static;
        transform: none;
        background: transparent;
        padding: 0px 6px;
        margin-bottom: 17px;
    }

    .m-bottom-upper .label-below {
        position: absolute;
        left: 50%;
        bottom: -43px; /* Adjust this value to move it farther down if needed */
        transform: translateX(-50%);
        padding: 3px 8px;
        white-space: nowrap;
    }





.lable-bottom-upper-left {
    border-left: 1px solid var(--color-border);
    min-width: 35px;
}

.lable-bottom-upper-right {
    border-right: 1px solid var(--color-border);
    min-width: 30%;
}
/*.m-bottom-upper::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -9px;
    width: 0.5px;
    height: 10px;
    background: #111;
}*/


.label-below::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 17px;
    width: 0.1px;
    height: 10px;
    background: var(--color-border);
}

.m-bottom .label::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 21px;
    width: 0.5px;
    height: 8px;
    background: var(--color-border);
}



.m-right .label::before {
    content: '';
    position: absolute;
    left: -1%;
    transform: translateX(-50%) rotate(90deg);
    bottom: 5px;
    width: 0.5px;
    height: 10px;
    background: var(--color-border);
}

.m-left .label::before {
    content: '';
    position: absolute;
    left: 98%;
    transform: translateX(-50%) rotate(90deg);
    bottom: 4px;
    width: 0.5px;
    height: 10px;
    background: var(--color-border);
}

.m-top .label::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    width: 0.5px;
    height: 10px;
    background: var(--color-border);
}





/* ----------------------------------
 PRODUCT SECTION IMAGES CLASS STYLING 
-----------------------------------*/

/*AXLES AND TYRES */

/*.axles-tyres .fixed-image-container {*/
/*    transform: rotate(270deg);*/
/*}*/

/* =============================================
   AXLES & TYRES - Separate Background per Image
   ============================================= */

/* Make the grid horizontal scrollable with zero gap */
/*.image-count-1 .visual-grid-dynamic:has(.axles-tyres) {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 !important;
    padding: 15px 0;
    scroll-behavior: smooth;
}*/

/* Each axle card */
/*.axles-tyres {
    flex: 0 0 auto;
    width: 200px;*/ /* Adjust width if needed */
/*min-height: 380px;
    padding: 10px;
    background: transparent;
}*/

/* Fixed image container */
/*.axles-tyres .fixed-image-container {
        width: 100%;
        height: 240px;*/ /* Uniform height */
/*display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: visible;
    }*/

/* ==================== BACKGROUND IMAGE ==================== */

/* Apply chassis background to ALL middle axle images */
/*.axles-tyres .fixed-size-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: rotate(270deg);*/ /* 90deg right */
/*transform-origin: center;
        position: relative;
        z-index: 2;
    }*/

/* Add background image behind the SVG (only for middle axles) */
/*.axles-tyres:not(:first-child):not(:last-child) .fixed-image-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("https://erp.scalatrucks.com/BackAPI2/Resources/App/Axle/chassis-bg.svg");
        background-repeat: repeat-x;
        background-position: center;
        background-size: auto 85%;*/ /* Adjust size as needed */
/*z-index: 1;
        opacity: 1;
        transform: rotate(270deg);
    }*/

/* Do NOT apply background to Front and Tail-end images */
/*.axles-tyres:first-child .fixed-image-container::before,
    .axles-tyres:last-child .fixed-image-container::before {
        display: none !important;
    }*/

/* Keep front and tail images without rotation */
/*.axles-tyres:first-child .fixed-size-image,
    .axles-tyres:last-child .fixed-size-image {
        transform: rotate(0deg) !important;
    }*/

/* Optional: Smooth hover effect */
/*.axles-tyres:hover .fixed-image-container::before {
        opacity: 0.95;
    }*/



/* =============================================
   AXLES & TYRES - Fixed Max Width + Horizontal Scroll
   ============================================= */

/*.image-count-1 .visual-grid-dynamic:has(.axles-tyres) {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0 !important;
    padding: 15px 0;
    scroll-behavior: smooth;*/
/* IMPORTANT: Fixed max width + centered */
/*max-width: 1200px;*/ /* ← Change this value as needed (e.g. 1100px, 1300px) */
/*margin-left: auto;
    margin-right: auto;*/
/* Optional: nice scrollbar */
/*scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

    .image-count-1 .visual-grid-dynamic:has(.axles-tyres)::-webkit-scrollbar {
        height: 8px;
    }

    .image-count-1 .visual-grid-dynamic:has(.axles-tyres)::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }*/

/* Each individual axle card */
/*.axles-tyres {
    flex: 0 0 auto;
    width: 290px;*/ /* Adjust card width if needed */
/*min-height: 380px;
    padding: 10px;
    background: transparent;
    margin: 0;
}*/

/* Image container */
/*.axles-tyres .fixed-image-container {
        width: 100%;
        height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: visible;
    }*/

/* Background chassis image - only for middle axles */
/*.axles-tyres:not(:first-child):not(:last-child) .fixed-image-container::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url(https://erp.scalatrucks.com/BackAPI2/Resources/App/Axle/chassis-bg.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 43%;
        z-index: 1;
        opacity: 0.95;
        transform: rotate(270deg);
    }*/

/* Main axle images */
/*.axles-tyres .fixed-size-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: rotate(270deg);
        transform-origin: center center;
        position: relative;
        z-index: 2;
    }*/

/* Exceptions for Front and Tail-end */
/*.axles-tyres:first-child .fixed-image-container::before,
    .axles-tyres:last-child .fixed-image-container::before {
        display: none !important;
    }*/


/* =============================================
   AXLES & TYRES - Continuous Joined Look + Fixed Width
   ============================================= */

/*.image-count-1 .visual-grid-dynamic:has(.axles-tyres) {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 !important;*/ /* Zero gap */
/*padding: 0;*/ /* Remove padding */
/*margin: 0 auto;
    max-width: 1250px;*/ /* Adjust this to control overall width */
/*scroll-behavior: smooth;
    scrollbar-width: thin;
}*/

/* Webkit scrollbar */
/*.image-count-1 .visual-grid-dynamic:has(.axles-tyres)::-webkit-scrollbar {
        height: 8px;
    }

    .image-count-1 .visual-grid-dynamic:has(.axles-tyres)::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 10px;
    }*/

/* Each axle card - tight and joined */
/*.axles-tyres {
    flex: 0 0 auto;
    width: 280px;*/ /* Adjust this to control individual width */
/*margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;*/ /* Remove rounded corners */
/*}*/

/* Remove all internal padding/spacing */
/*.axles-tyres .visual-card,
    .axles-tyres .measure-wrapper,
    .axles-tyres .fixed-image-container {
        margin: 0;
        padding: 0;
        border-radius: 0;
    }*/

/* Fixed image container - tight fit */
/*.axles-tyres .fixed-image-container {
        width: 100%;
        height: 260px;*/ /* Uniform height for all */
/*display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;*/ /* Important for clean look */
/*}*/

/* Chassis background - only for middle images */
/*.axles-tyres:not(:first-child):not(:last-child) .fixed-image-container::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("https://erp.scalatrucks.com/BackAPI2/Resources/App/Axle/chassis-bg.svg");
        background-repeat: repeat-x;
        background-position: center;
        background-size: auto 92%;*/ /* Fine-tune this percentage */
/*z-index: 1;
    }*/

/* Main images */
/*.axles-tyres .fixed-size-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: rotate(270deg);
        transform-origin: center center;
        position: relative;
        z-index: 2;
    }*/

/* Front and Tail-end exceptions */
/*.axles-tyres:first-child .fixed-image-container::before,
    .axles-tyres:last-child .fixed-image-container::before {
        display: none !important;
    }*/



.visual-section-gallery:has(.axles-container) {
    width: 70%;
}

@media(max-width:1532px) {
    .visual-section-gallery:has(.axles-container) {
        width: 83%;
    }
}
/* SIZE & WEIGHT */
.size-weight-front-img,
.size-weight-side-img,
.size-weight-rear-img {
    display: flex;
    justify-content: center;
    align-items: center;
}


    .size-weight-front-img .m-bottom-upper,
    .size-weight-side-img .m-bottom-upper,
    .size-weight-rear-img .m-bottom-upper {
        width: 70.5%;
        left: 15%;
    }


    .size-weight-side-img .m-bottom .label::before {
        left: 52%;
    }

.ps-img-with-data {
    max-height: 300px
}
/*.m-bottom-upper .label.item.ClosedBox2:first-child {
    width: 194px;
    flex: 0 1 194px;
    border-right: 1px solid;
}
.m-bottom-upper .label.item.ClosedBox2:last-child {
    flex: 1;
    text-align: center;
}*/




.m-bottom-upper .label.item.ClosedBox3:nth-child(2)::before,
.m-bottom-upper .label.item.TandemClosedBox4:nth-child(2)::before,
.m-bottom-upper .label.item.TandemClosedBox4:nth-child(3)::before,
.m-bottom-upper .label.item.TridemClosedBox4:nth-child(2)::before,
.m-bottom-upper .label.item.TridemClosedBox4:nth-child(3)::before,
.m-bottom-upper .label.item.TridemClosedBox5:nth-child(2)::before,
.m-bottom-upper .label.item.TridemClosedBox5:nth-child(3)::before,
.m-bottom-upper .label.item.TridemClosedBox5:nth-child(4)::before,
.m-bottom-upper .label.item.QuadClosedBox5:nth-child(2)::before,
.m-bottom-upper .label.item.QuadClosedBox5:nth-child(3)::before,
.m-bottom-upper .label.item.QuadClosedBox5:nth-child(4)::before,
.m-bottom-upper .label.item.QuadClosedBox6:nth-child(2)::before,
.m-bottom-upper .label.item.QuadClosedBox6:nth-child(3)::before,
.m-bottom-upper .label.item.QuadClosedBox6:nth-child(4)::before,
.m-bottom-upper .label.item.QuadClosedBox6:nth-child(5)::before,
.m-bottom-upper .label.item.FiveClosedBox6:nth-child(2)::before,
.m-bottom-upper .label.item.FiveClosedBox6:nth-child(3)::before,
.m-bottom-upper .label.item.FiveClosedBox6:nth-child(4)::before,
.m-bottom-upper .label.item.FiveClosedBox6:nth-child(5)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    height: 12px;
    width: 0.9px;
    background: var(--color-border);
}


/*Closedbox3*/
.m-bottom-upper .label.item.ClosedBox3:first-child {
    width: 68px;
    flex: 0 1 68px;
}

.m-bottom-upper .label.item.ClosedBox3:nth-child(2) {
    width: 39px;
    flex: 0 1 39px;
}

.m-bottom-upper .label.item.ClosedBox3:last-child {
    flex: 1;
    text-align: center;
}


/*TandemClosedbox4*/
.m-bottom-upper .label.item.TandemClosedBox4:first-child {
    width: 103px;
    flex: 0 1 69px;
}

.m-bottom-upper .label.item.TandemClosedBox4:nth-child(2) {
    width: 120px;
    flex: 0 1 178px;
}

.m-bottom-upper .label.item.TandemClosedBox4:nth-child(3) {
    width: 120px;
    flex: 0 1 48px;
}




/*TridemClosedbox4*/
.m-bottom-upper .label.item.TridemClosedBox4:first-child {
    width: 255px;
    flex: 0 1 191px;
}

.m-bottom-upper .label.item.TridemClosedBox4:nth-child(2) {
    width: 120px;
    flex: 0 1 48px;
}

.m-bottom-upper .label.item.TridemClosedBox4:nth-child(3) {
    width: 120px;
    flex: 0 1 48px;
}

.m-bottom-upper .label.item.TridemClosedBox4:last-child {
    flex: 1;
    text-align: center;
}





/*TridemClosedBox5 */
.m-bottom-upper .label.item.TridemClosedBox5:first-child {
    width: 150px;
    flex: 0 1 68px;
}

.m-bottom-upper .label.item.TridemClosedBox5:nth-child(2) {
    width: 120px;
    flex: 0 1 127px;
}

.m-bottom-upper .label.item.TridemClosedBox5:nth-child(3) {
    width: 120px;
    flex: 0 1 48px;
}


.m-bottom-upper .label.item.TridemClosedBox5:nth-child(4) {
    width: 120px;
    flex: 0 1 48px;
}


/*QuadClosedBox5 */
.m-bottom-upper .label.item.QuadClosedBox5:first-child {
    width: 150px;
    flex: 0 1 143px;
}

.m-bottom-upper .label.item.QuadClosedBox5:nth-child(2) {
    width: 120px;
    flex: 0 1 48px;
}

.m-bottom-upper .label.item.QuadClosedBox5:nth-child(3) {
    width: 120px;
    flex: 0 1 48px;
}

.m-bottom-upper .label.item.QuadClosedBox5:nth-child(4) {
    width: 120px;
    flex: 0 1 48px;
}



/*QuadClosedBox6*/
.m-bottom-upper .label.item.QuadClosedBox6:first-child {
    width: 131px;
    flex: 0 1 73px;
}

.m-bottom-upper .label.item.QuadClosedBox6:nth-child(2) {
    width: 111px;
    flex: 0 1 85px;
}

.m-bottom-upper .label.item.QuadClosedBox6:nth-child(3) {
    width: 73px;
    flex: 0 1 54px;
}

.m-bottom-upper .label.item.QuadClosedBox6:nth-child(4) {
    width: 120px;
    flex: 0 1 54px;
}

.m-bottom-upper .label.item.QuadClosedBox6:nth-child(5) {
    width: 120px;
    flex: 0 1 51px;
}



/*FiveClosedBox6*/
.m-bottom-upper .label.item.FiveClosedBox6:first-child {
    width: 131px;
    flex: 0 1 103px;
}

.m-bottom-upper .label.item.FiveClosedBox6:nth-child(2) {
    width: 111px;
    flex: 0 1 48px;
}

.m-bottom-upper .label.item.FiveClosedBox6:nth-child(3) {
    width: 73px;
    flex: 0 1 48px;
}



.m-bottom-upper .label.item.FiveClosedBox6:nth-child(4) {
    width: 120px;
    flex: 0 1 48px;
}

.m-bottom-upper .label.item.FiveClosedBox6:nth-child(5) {
    width: 120px;
    flex: 0 1 48px;
}



.size-weight-front-img .m-bottom-upper,
.size-weight-rear-img .m-bottom-upper {
    width: 66%;
}







/* BODY SECTION IMAGES  */

.body-side-img .m-bottom-upper, .body-rear-img .m-bottom-upper {
    width: 100%;
    left: 0%;
}

.body-side-img .m-right,
.body-rear-img .m-right {
    right: -17px;
}


@media (min-width: 1081px) and (max-width: 1920px) and (max-width: 2691px){
    .body-side-img .m-right,
.body-rear-img .m-right {
    right: -26px;
}

.body-side-img .m-bottom-upper, .body-rear-img .m-bottom-upper {
    width: 100%;
    left: 0%;
    /* bottom: -23%; */
    
}

}

    .body-side-img .m-right .label::before,
    .body-rear-img .m-right .label::before {
        left: -1%;
    }

.body-side-img .visual-card {
    margin-right: 56px;
}


@media(max-width:425px) {
    .body-side-img .fixed-size-image {
        max-height: 77px;
    }
}

@media(max-width:375px) {
    .body-side-img .fixed-size-image {
        max-height: 60px;
    }
}



/*  TAIL LIFT SECTION IMAGES  */
.taillift-img{
    position: relative;
}
.taillift-img .fixed-size-image {
    max-height: 230px;
}

@media(max-width:450px) {

    .taillift-img .fixed-size-image {
        max-height: 124px;
    }
}

.taillift-img .m-right .label::before {
    left: -2%;
}

.taillift-img .m-top .label::before {
    bottom: -7px;
}


@media (max-width: 425px) {
    .taillift-img .visual-single {
        min-height: 370px;
    }
}



/* UNDER CARRIGE SECTION IMAGES   */

.undercarriage1-img, .undercarriage2-img{
        position: relative;

}


.undercarriage1-img .fixed-size-image, .undercarriage2-img .fixed-size-image {
    max-height: 106px;
}

@media(max-width:1726px) {
    .undercarriage1-img .fixed-size-image, .undercarriage2-img .fixed-size-image {
        /*        max-height: 64px;*/
    }
}

/*.undercarriage1-img .m-bottom-upper, 
.undercarriage2-img .m-bottom-upper {
    width: 100%;
    left: 0%;
}*/



.undercarriage2-img .m-right {
    right: -15px;
}

 .undercarriage2-img .m-top {
        width: 30%;
    }
@media (min-width: 1081px) and (max-width: 1920px) {
    .undercarriage2-img .m-right {
        right: -30px;
    }

     .undercarriage2-img .m-bottom-upper, .undercarriage1-img .m-bottom-upper {
        bottom: -33px;

    }
    
}


.undercarriage2-img .visual-card {
    margin-right: 51px;
}



@media(width >= 750px ) {
    .undercarriage2-img .m-right .label {
        right: -51px;
    }
}

@media (max-width:1546px) {
    .visual-grid-dynamic:has(.undercarriage2-img), 
    .visual-grid-dynamic:has(.body-side-img),  
    .visual-grid-dynamic:has(.taillift-img), 
    .visual-grid-dynamic:has(.joined-crane-section) 
    {
        /*        grid-template-columns: repeat(auto-fit, minmax(549px, 1fr));*/
        grid-template-columns: 1fr;
    }
}

@media(max-width:634px) {
    .visual-grid-dynamic:has(.undercarriage2-img), .visual-grid-dynamic:has(.body-side-img) {
        /*        grid-template-columns: repeat(auto-fit, minmax(261px, 1fr));*/
        grid-template-columns: 1fr;
    }
}





/* CRANE SECTION IMAGES  */


.joined-crane-section {
    /* background: #f8f9fa; */
    border-radius: 12px;
    padding: 21px 17px 19px;
    position: relative;
    min-height: 360px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.joined-images-wrapper {
    position: relative;
    width: 100%;
}

.crane-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    min-height: 360px;
    display: flex;
}

    .crane-scroll-container::-webkit-scrollbar {
        height: 8px;
    }

    .crane-scroll-container::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }


.joined-images {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    min-width: 100%;
    padding-left: 20px;
    padding-right: 40px;
}

.crane-varticaly-center {
    display: flex;
    justify-content: center;
}

.crane-part {
    height: 78px;
    width: auto;
    object-fit: contain;
    display: block;
}

    .crane-part.extension {
        height: 46px;
        margin-left: -24px;
    }

.crane-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* All measurement labels */

.measure-label {
    position: absolute;
    /* bottom: 0px; */
    top: 131px;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    width: 33px;
    left: 159px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10px;
}

.measure-unit-label {
    position: absolute;
    /* bottom: 0px; */
    top: 147px;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    width: 33px;
    left: 170px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
}

    .measure-unit-label .measure-weight {
    }

.crane-item .measure-unit-label:nth-child(2 of .measure-unit-label) {
    top: 162px;
}

.crane-item > :nth-child(3) {
    top: 146px;
}

.tip-item .measure-label {
    top: 159px;
    left: 411px;
}



.crane-item > :nth-child(2)::before {
    content: '';
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 35px;
    background: var(--color-border);
}

.crane-item > :nth-child(2)::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--color-border);
}



/* Measurement unit lables*/
.measure-unit-label::before {
    content: none !important;
}

.measure-unit-label::after {
    content: none !important;
}





/* Special styling for Tip label (150) */
.tip-item .measure-label.tip-label {
    top: -35px;
    bottom: auto;
    background: #6b7280;
    color: white;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 13px;
    transform: translateX(-50%);
    width: auto;
    white-space: nowrap;
}

    .tip-item .measure-label.tip-label::before,
    .tip-item .measure-label.tip-label::after {
        display: none;
    }


/* Responsive */
/* Make it responsive on smaller screens */
@media (max-width: 768px) {
    .crane-part {
        height: 85px;
    }

        .crane-part.extension {
            height: 57px;
            margin-left: -28px;
        }

    .joined-crane-section {
        padding: 20px 10px;
        min-height: 280px;
    }


    .measure-label {
        left: 199px;
    }

        .measure-label::before {
            height: 28px;
            top: -30px;
        }
}





/* =============== ROLLER AXLES CONTAINER =============== */
.roller-axles-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    /* position: relative; */
}

.top-left-label, .visual-card-top-left-label {
    position: absolute;
    top: 0px;
    left: 0px;
    /* background: #1f2937; */
    color: #696a6b;
    font-size: clamp(11px, 2.2vw, 13px);
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 16px;
    z-index: 10;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); */
    white-space: nowrap;
    transition: all 0.2s ease;
}

.visual-card-top-left-label 
{

}

/* Responsive adjustment for very small screens */
@media (max-width: 480px) {
    .top-left-label, .visual-card-top-left-label{
        top: 10px;
        left: 12px;
        padding: 5px 12px;
        font-size: clamp(10px, 2.5vw, 12px);
    }
    .visual-card-top-left-label
    {

    }
    .roller-values-list {
        padding: 12px 20px;
    }
}


.roller-values-list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 12px 32px;
    flex-direction: column;
}



.value-item {
    /* flex: 1; */
    text-align: center;
    font-size: clamp(11px, 2vw, 10px);
    font-weight: 600;
    /* color: #2c7a62; */
    /* background: #e9f8f1; */
    padding: 0px 12px;
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* =============== BOTTOM PART: IMAGE WITH MARKERS =============== */
.roller-image-wrapper {
    position: relative;
    width: 100%;
    padding: -6px;
    /* border: 1px solid #e9ecef; */
    display: flex;
    min-height: 282px;
}

/* Inherit measure-wrapper from your existing CSS */
.roller-axles-container .measure-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    /* position: relative; */
    justify-content: center;
}

.roller-axles-container .fixed-image-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}


.roller-axles-container .fixed-size-image {
    width: 100%;
    max-height: 250px;
    height: auto;
    display: block;
    /* border-radius: 8px; */
}


/* =============== MARKER POSITIONING =============== */
/* Base positioning - targets markers inside roller-axles-container */
.roller-axles-container .m-rollertyrelifeitem {
    position: absolute;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s ease;
}

    /* Label styling */
    .roller-axles-container .m-rollertyrelifeitem .label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* background: rgba(0, 0, 0, 0.85); */
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: clamp(11px, 1.5vw, 13px);
        font-weight: 600;
        min-width: 45px;
        text-align: center;
        /* box-shadow: 0 2px 8px rgba(0,0,0,0.2); */
        position: relative;
        /* backdrop-filter: blur(4px); */
        white-space: nowrap;
    }

/* Connector line */
/* .roller-axles-container .m-rollertyrelifeitem .label::before {
                content: '';
                position: absolute;
                top: 50%;
                right: -8px;
                transform: translateY(-50%);
                width: 8px;
                height: 2px;
                background: rgba(255,255,255,0.8);
            } */





.roller-axles-container[data-image-type="Pneumatic3.svg"], .roller-axles-container[data-image-type="Wheel2.svg"] {
    justify-content: space-between;
    /* min-height: 372px; */
}

    .roller-axles-container[data-image-type="Pneumatic3.svg"] img.fixed-size-image {
        max-height: 116px;
    }

    .roller-axles-container[data-image-type="Pneumatic3.svg"] .m-rollertyrelifeitem:nth-child(1) {
        top: 14%;
    }

    .roller-axles-container[data-image-type="Pneumatic3.svg"] .m-rollertyrelifeitem:nth-child(2) {
        top: 49%;
    }

    .roller-axles-container[data-image-type="Pneumatic3.svg"] .m-rollertyrelifeitem:nth-child(3) {
        top: 86%;
    }



.roller-axles-container[data-image-type="Pneumatic4.svg"] img.fixed-size-image {
    max-height: 166px;
}

.roller-axles-container[data-image-type="Pneumatic4.svg"] .m-rollertyrelifeitem:nth-child(1) {
    top: 11%;
}

.roller-axles-container[data-image-type="Pneumatic4.svg"] .m-rollertyrelifeitem:nth-child(2) {
    top: 37%;
}

.roller-axles-container[data-image-type="Pneumatic4.svg"] .m-rollertyrelifeitem:nth-child(3) {
    top: 64%;
}

.roller-axles-container[data-image-type="Pneumatic4.svg"] .m-rollertyrelifeitem:nth-child(4) {
    top: 89%;
}


.roller-axles-container[data-image-type="Pneumatic5.svg"] img.fixed-size-image {
    max-height: 212px;
}

.roller-axles-container[data-image-type="Pneumatic5.svg"] .m-rollertyrelifeitem:nth-child(1) {
    top: 8%;
}

.roller-axles-container[data-image-type="Pneumatic5.svg"] .m-rollertyrelifeitem:nth-child(2) {
    top: 29%;
}

.roller-axles-container[data-image-type="Pneumatic5.svg"] .m-rollertyrelifeitem:nth-child(3) {
    top: 50%;
}

.roller-axles-container[data-image-type="Pneumatic5.svg"] .m-rollertyrelifeitem:nth-child(4) {
    top: 71%;
}

.roller-axles-container[data-image-type="Pneumatic5.svg"] .m-rollertyrelifeitem:nth-child(5) {
    top: 92%;
}


.roller-axles-container[data-image-type="Pneumatic6.svg"] .m-rollertyrelifeitem {
    /* left: -40px; */
}

    .roller-axles-container[data-image-type="Pneumatic6.svg"] .m-rollertyrelifeitem:nth-child(1) {
        top: 6%;
    }

    .roller-axles-container[data-image-type="Pneumatic6.svg"] .m-rollertyrelifeitem:nth-child(2) {
        top: 24%;
    }

    .roller-axles-container[data-image-type="Pneumatic6.svg"] .m-rollertyrelifeitem:nth-child(3) {
        top: 42%;
    }

    .roller-axles-container[data-image-type="Pneumatic6.svg"] .m-rollertyrelifeitem:nth-child(4) {
        top: 59%;
    }

    .roller-axles-container[data-image-type="Pneumatic6.svg"] .m-rollertyrelifeitem:nth-child(5) {
        top: 76%;
    }

    .roller-axles-container[data-image-type="Pneumatic6.svg"] .m-rollertyrelifeitem:nth-child(6) {
        top: 93%;
    }




.roller-axles-container[data-image-type="SolidRubber"] .m-rollertyrelifeitem {
    left: -30px;
}

    .roller-axles-container[data-image-type="SolidRubber"] .m-rollertyrelifeitem:nth-child(1) {
        top: 20%;
    }

    .roller-axles-container[data-image-type="SolidRubber"] .m-rollertyrelifeitem:nth-child(2) {
        top: 50%;
    }

    .roller-axles-container[data-image-type="SolidRubber"] .m-rollertyrelifeitem:nth-child(3) {
        top: 80%;
    }

/* =============== RESPONSIVE DESIGN =============== */
@media (max-width: 768px) {
    /* Mobile-only: rotate only the dynamically rendered value labels inside the
       Roller/Axles section 90deg. The section title (.top-left-label) is a different
       class and is intentionally left untouched. */
    /* .roller-axles-container .label {
        transform: rotate(90deg);
        transform-origin: center center;
    } */

    /* .roller-axles-container .m-rollertyrelifeitem .label {
        padding: 4px 8px;
        min-width: 38px;
        font-size: 10px;
    } */

    .roller-axles-container[data-image-type="Pneumatic4"] .m-rollertyrelifeitem, .roller-axles-container[data-image-type="Pneumatic8"] .m-rollertyrelifeitem 
    {
        /* left: -25px; */
    }

    .roller-axles-container[data-image-type="Pneumatic6"] .m-rollertyrelifeitem {
        /* left: -28px; */
    }

    .value-item {
        padding: 6px 8px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .roller-axles-container .m-rollertyrelifeitem .label {
        padding: 3px 6px;
        min-width: 32px;
        font-size: 9px;
    }

    .roller-axles-container[data-image-type="Pneumatic4"] .m-rollertyrelifeitem,
    .roller-axles-container[data-image-type="Pneumatic8"] .m-rollertyrelifeitem {
        /* left: -18px; */
    }

    .roller-axles-container[data-image-type="Pneumatic6"] .m-rollertyrelifeitem {
        left: -20px;
    }

    .roller-values-list {
        /* padding: 6px 8px;
            gap: 6px; */
    }

    .value-item {
        padding: 4px 6px;
        font-size: 10px;
    }

    .roller-image-wrapper {
        padding: 12px;
    }
}

/* 2 TYRES  */
.roller-axles-container[data-image-type="Wheel2.svg"] .m-rollertyrelifeitem:nth-child(1) {
    top: 15%;
}

.roller-axles-container[data-image-type="Wheel2.svg"] .m-rollertyrelifeitem:nth-child(2) {
    top: 85%;
}


/* DRUM */
.visual-single.roller-axles {
    position: relative;
    min-height: 480px;
}

.roller-axles-container[data-image-type="Drum1.svg"] .fixed-size-image {
    max-height: 249px;
}

.roller-axles-container[data-image-type="Drum1.svg"] .m-left .top-left-label {
    left: -40px;
}

.roller-axles-container[data-image-type="Drum1.svg"] .m-right {
    right: -19px;
}

    .roller-axles-container[data-image-type="Drum1.svg"] .m-right .label {
        right: -46px;
    }




/* DRUM 2 */
.roller-axles-container[data-image-type="Drum2.svg"] .fixed-size-image {
    max-height: 250px;
}

.roller-axles-container[data-image-type="Drum2.svg"] .m-left {
    left: -16px;
    top: 0%;
    width: 1px;
    height: 46%;
}

.roller-axles-container[data-image-type="Drum2.svg"] .m-right {
    top: 0%;
    width: 1px;
    height: 46%;
}

.roller-axles-container[data-image-type="Drum2.svg"] .m-right {
    right: -19px;
}

    .roller-axles-container[data-image-type="Drum2.svg"] .m-right .label {
        right: -46px;
    }


.roller-axles-container[data-image-type="Drum2.svg"] .m-left .label, .roller-axles-container[data-image-type="Drum1.svg"] .m-left .label {
    left: -40px;
}

/* Make m-center appear TWICE on the same image */
.roller-axles-container[data-image-type="Drum2.svg"] .m-center {
    top: 20%;
}


.roller-axles-container[data-image-type="Drum2.svg"] .m-center {
    top: 20%;
}


/* Second m-center */
.roller-axles-container[data-image-type="Drum2.svg"] .fixed-image-container .m-center-second {
    bottom: 20%;
}


@media(max-width:750px) {
    .roller-axles-container[data-image-type="Drum1.svg"] .m-left .label {
        left: -18px;
    }

    .roller-axles-container[data-image-type="Drum2.svg"] .m-left .label {
        left: -17px;
    }

    .roller-axles-container[data-image-type="Drum2.svg"] .m-right .label {
        right: -19px;
    }

    .roller-axles-container[data-image-type="Drum1.svg"] .m-right .label {
        right: -19px;
    }
}



.roller-axles .m-center, .roller-axles .m-center-second {
    background: none;
}




body {
    overflow-x: hidden;
}

* {
    /* outline: 1px solid red; */
    /* box-sizing: border-box;
    font-family: var(--font-sans);
    margin:0;
    padding:0; */
}



.visual-grid-dynamic:has(.roller-axles) {
    /* background: #e5e7eb;
    gap: 0;
 */
}

.visual-section-gallery:has(.roller-axles) {
    width: 62%;
}


@media(max-width:1100px) {
    .visual-section-gallery:has(.roller-axles) {
        width: 100%;
    }
}


/* ATTACHMENT IMAGE SECTION */

.attachment-img{
        display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    margin-right: 40px;
}



.WorkingRange-img .measure-wrapper {
    margin: 48px;
}

@media(max-width:430px) {
    .attachment-img .fixed-size-image {
        max-height: 108px;
    }

    .craneattachments-img .fixed-size-image {
        max-height: 68px;
    }

    .visual-single craneattachments-im {
        padding: 0 50px 0 0;
    }

    .WorkingRange-img .measure-wrapper {
        margin:0 17px 0 0 ;
    }
}



/* WORKING RANGE */

.WorkingRange-img .fixed-image-container {
    height: 480px;
    max-width: 700px;
    overflow: visible;
}



/* =====================================================================
   LATTICE BOOM
   ---------------------------------------------------------------------
   Self-contained component for the lattice boom diagram. Shares nothing
   with the crane UI (.crane-part / .crane-item / .joined-images) - those
   rules are tuned for different artwork and must not be reused here.

   Structure:
     .lattice-wrapper            fixed aspect box, matches base SVG 469:1739
       .lattice-base             base SVG, fills the wrapper
       .lattice-overlay          positioned over the boom area of the base
         .lattice-extension-track
           .lattice-extension    one per segment, carries --i (its index)
             .lattice-extension-image
             .lattice-measure    that segment's ImgFieldVal

   Razor supplies the sizing on .lattice-wrapper:
     --lat-seg-len      segment length, % of boom track
     --lat-step         distance between segment starts, % of boom track
     --lat-scale        uniform shrink applied only when overlap maxes out
     --lat-label-scale  unitless label scale (shrinks as count grows)
     --lat-count        number of extension segments

   Overlay geometry below is derived from the base SVG viewBox: the boom
   member sits at x 260-369 of 469 wide and runs the full height. Adjust
   these four values alone to re-align the overlay to the artwork.
   ===================================================================== */

/* The wrapper is a narrow column (the base art is 469:1739), so labels sit
   outside it. This padding reserves the room they need on both sides. */
.lattice-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 12px;
}

/* The fixed container. Its size depends only on the viewport - never on the
   number of extension segments - and it is wide enough that labels sit
   inside it, not in the section's padding. */
.lattice-wrapper {
    /* Boom area within the base artwork, as % of .lattice-figure.
       These four are the only values to touch when re-aligning the overlay. */
    /* The extension container: spans the two fixed connection points on the
       base artwork. Measured from Lattice-without-jip.svg (viewBox 469 x 1739)
       with getBBox, so the extension lines up with the drawn boom exactly:
         boom chord   x 261.2 .. 369.3  -> left 55.69%, width 23.06%
         head frame   ends y 162.1      -> top  9.32%   (top connection)
         base frame   starts y 1583.2   -> bottom 91.04% (bottom connection)
       --lat-boom-bleed extends the container a hair into both frames so the
       joints have no hairline seam. These are the only values to touch to
       re-align the overlay against the artwork. */
    --lat-boom-left: 55.69%;
    --lat-boom-width: 23.06%;
    --lat-boom-bleed: 0.35%;
    --lat-boom-top: calc(9.32% - var(--lat-boom-bleed));
    --lat-boom-height: calc(81.72% + (2 * var(--lat-boom-bleed)));
    --lat-boom-angle: 0deg;

    /* Fixed size - identical at every segment count. --lat-img-w derives from
       --lat-h0 at the artwork's own 469:1739 ratio, so .lattice-figure is
       exactly the SVG's aspect and the drawing fills it with NO letterboxing.
       That is what makes every % coordinate below land on the artwork.
       (The SVG has no preserveAspectRatio attribute, so it defaults to
       xMidYMid meet and would letterbox inside any differently-shaped box -
       object-fit cannot override that. Keep this box at the true aspect.) */
    --lat-h0: clamp(280px, 42vh, 420px);
    --lat-img-w: calc(var(--lat-h0) * 469 / 1739);
    --lat-gutter: 54px; /* label room, reserved inside the container */
    position: relative;
    height: var(--lat-h0);
    width: calc(var(--lat-img-w) + 2 * var(--lat-gutter));
    margin: 0 auto;
    flex-shrink: 0;
}

/* The base artwork at its true aspect, centred in the wider container.
   Never stretched, sliced or scaled - the crane is always pixel-correct. */
.lattice-figure {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--lat-img-w);
}

.lattice-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Sits directly over the boom member of the base image. */
.lattice-overlay {
    position: absolute;
    left: var(--lat-boom-left);
    width: var(--lat-boom-width);
    top: var(--lat-boom-top);
    height: var(--lat-boom-height);
    transform: rotate(var(--lat-boom-angle));
    transform-origin: 50% 100%;
    pointer-events: none;
}

/* Plain positioning context. Deliberately carries NO transform: a scale here
   would also scale the labels inside it. */
.lattice-extension-track {
    position: absolute;
    inset: 0;
}

/* Segments build DOWNWARD from the fixed top attachment point; --i is the
   segment index, so segment 0 is pinned to the top connection and each one
   starts exactly where the previous ends.
   Only the height is set - aspect-ratio derives the width, so the artwork is
   never stretched. Centred on the boom axis so it stays aligned at any width. */
.lattice-extension {
    position: absolute;
    /* Each segment owns its own 1/N slice of the track: step == length, so
       segment i+1 begins exactly where segment i ends - never overlapping,
       never leaving a gap. Width is --lat-seg-w of the boom chord, computed in
       the view from the same 1/N share, so the aspect ratio stays exact:
       100% while the track can still grow, shrinking uniformly beyond that. */
    width: var(--lat-seg-w, 100%);
    height: var(--lat-seg-len);
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--i) * var(--lat-step));
    pointer-events: auto;
}

.lattice-extension-image {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* Labels ride alongside their own segment, offset perpendicular to the
   boom. Everything is relative, so they track the segments at any count. */
.lattice-measure {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.45em;
    /* Deliberately constant: labels stay attached to their segment but are
       NOT affected by segment scaling, so a label at n=30 reads exactly as
       clearly as one at n=1. No scaled ancestor, so this is the painted size. */
    font-size: 11px;
    line-height: 1.2;
    font-weight: 500;
    color: #111;
    white-space: nowrap;
    pointer-events: none;
}

/* At high counts, alternate sides to double the vertical room available
   to each label rather than letting them collide. */
.lattice-dense .lattice-extension:nth-child(even) .lattice-measure {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 0.45em;
}

.lattice-base-measures {
    position: absolute;
    left: 4%;
    bottom: 3%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lattice-measure-base {
    position: static;
    transform: none;
    margin-left: 0;
    font-size: 11px;
}

@media (max-width: 768px) {
    .lattice-wrapper {
        --lat-h0: clamp(230px, 34vh, 320px);
        --lat-gutter: 40px;
    }

    .lattice-measure {
        font-size: 9px;
    }

    .lattice-measure-base {
        font-size: 9px;
    }
}