/* Shared desktop reference canvas for the storefront compositions. */
/* Product category packs follow the Figma source bounds on desktop. Keep the
   mobile thumbnail dimensions from product.html untouched. */
@media (min-width: 1024px) {
    .product-reference-page img[src*="packat1.png"],
    .product-reference-page img[src*="packat2.png"],
    .product-reference-page img[src*="packat3.png"] {
        position: absolute !important;
        right: auto !important;
        bottom: auto !important;
        max-width: none !important;
        object-fit: cover !important;
        transform-origin: center center !important;
    }

    /* Figma nodes 191:8015 and 191:8132: 198x186 source images at 16deg. */
    .product-reference-page img[src*="packat1.png"] {

        left: 68.8px !important;
        top: -61.5px !important;
        width: 198px !important;
        height: 186px !important;
        transform: rotate(-11deg) !important;

    }

    .product-reference-page img[src*="packat2.png"] {
      left: 68.8px !important;
        top: -61.5px !important;
        width: 198px !important;
        height: 186px !important;
        transform: rotate(-11deg) !important;
    }
    }

    /* Figma node 191:7899: converted from its 333.91x311.23px rotated box. */
    .product-reference-page img[src*="packat3.png"] {

        left: 44.8px !important;
    top: -92.5px !important;
    width: 259px !important;
    /* height: 186px !important; */
    transform: rotate(-11deg) !important;

}

@media (min-width: 768px) and (max-width: 1919px) {
    /* Keep the desktop navigation on the same 1920px reference artboard as
       the page content. Tablet and mobile headers remain independent. */
    .desktop-reference-canvas-page > #nav > .desktop-site-header,
    .desktop-reference-header-page > #nav > .desktop-site-header {
        overflow: hidden;
    }

    .desktop-reference-canvas-page > #nav > .desktop-site-header > div:first-child,
    .desktop-reference-header-page > #nav > .desktop-site-header > div:first-child {
        width: 1920px;
        max-width: none;
        zoom: clamp(.4, calc(100vw / 1920px), 1);
    }

    /* Keep the desktop SVG composition on its 1920px source dimensions before
       the page canvas is reduced. This prevents a second viewport-based resize. */
    .blueberry-reference-page .camp-outline--desktop {
        width: 1920px !important;
        max-width: none !important;
        flex: 0 0 1920px !important;
    }

    .blueberry-reference-page .camp-outline--desktop > .taste-heading-svg {
        width: 1726px !important;
        height: 141px !important;
        max-width: none !important;
        flex: 0 0 1726px !important;
    }

    .desktop-reference-canvas {
        width: 1920px;
        max-width: none;
        zoom: clamp(.4, calc(100vw / 1920px), 1);
    }

    /* Pages without a single content wrapper keep their existing DOM. Scale
       only top-level content boxes; the desktop navigation is handled above. */
    .desktop-reference-canvas-page > main,
    .desktop-reference-canvas-page > section,
    .desktop-reference-canvas-page > footer,
    .desktop-reference-canvas-page > div:not(.desktop-reference-canvas) {
        width: 1920px;
        max-width: none;
        zoom: clamp(.4, calc(100vw / 1920px), 1);
    }

    /* Strawberry branch alignment for the sub-1920 desktop canvas. */
    @media (min-width: 1000px) {
        .blueberry-reference-page #berryJourneySource[src*="totfarangi/blubery1.png"] {
            --tw-translate-x: -35% !important;
            --tw-translate-y: 90% !important;
        }
    }

    /* Home page's desktop Figma rules use viewport units. Convert the
       composition back to its 1920px source values before the wrapper zooms,
       so text and images are scaled exactly once. */
    .freshfruit-home-page .taste-figma-title {
        width: 1728px !important;
        height: 275px !important;
        margin-bottom: 70.548px !important;
    }

    .freshfruit-home-page .taste-figma-title > svg {
        width: 1726px !important;
        height: 141px !important;
        max-width: none !important;
        flex: 0 0 1726px !important;
    }

    .freshfruit-home-page .taste-rows {
        width: 1920px !important;
        height: 3135.453px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .freshfruit-home-page .taste-row--shake > div:nth-child(2) {
        left: 96px !important;
        width: 706px !important;
        height: 804.167px !important;
    }

    .freshfruit-home-page .taste-row--snack > div:first-child {
        left: 826px !important;
        top: 876.452px !important;
        width: 997.967px !important;
        height: 825.244px !important;
    }

    .freshfruit-home-page .taste-row--milk > div:first-child {
        left: 96px !important;
        top: 1773.452px !important;
        width: 998px !important;
        height: 724.774px !important;
    }

    .freshfruit-home-page .taste-row--shake > div:last-child {
        left: 834px !important;
        top: 298.892px !important;
        width: 535px !important;
    }

    .freshfruit-home-page .taste-row--snack > div:last-child {
        left: 145px !important;
        top: 1219.414px !important;
        width: 647px !important;
    }

    .freshfruit-home-page .taste-row--milk > div:last-child {
        left: 1126px !important;
        top: 2070.095px !important;
        width: 535px !important;
    }

    .freshfruit-home-page .taste-row h2 {
        font-size: 64px !important;
    }

    .freshfruit-home-page .taste-row p {
        margin-top: 8px !important;
        font-size: 24px !important;
    }

    .freshfruit-home-page .taste-row--shake p,
    .freshfruit-home-page .taste-row--milk p {
        width: 515.985px !important;
    }

    .freshfruit-home-page .taste-row--snack p {
        width: 622.063px !important;
        margin-left: 25.3px !important;
    }

    .freshfruit-home-page .taste-figma-title > h1,
    .freshfruit-home-page .taste-smarter-title {
        font-size: 170px !important;
    }

    .freshfruit-home-page .desktop-reference-canvas > section > div.relative.w-full.mx-auto.max-w-\[1920px\] > div.relative.z-10 {
        max-width: 640px !important;
    }

    .freshfruit-home-page .desktop-reference-canvas > section > div.relative.w-full.mx-auto.max-w-\[1920px\] > div.relative.z-10 span {
        font-size: 96px !important;
    }

    .freshfruit-home-page .desktop-reference-canvas > section > div.relative.w-full.mx-auto.max-w-\[1920px\] > div.relative.z-10 > p {
        font-size: 18px !important;
    }

    /* The blueberry pages contain legacy 1201-1700px overrides that move
       individual journey elements. Restore the 1920px source composition;
       the parent canvas handles the single proportional reduction. */
    @media (min-width: 1201px) {
        .blueberry-reference-page #berryJourneyScene .berry-journey__desktop-pear {
            display: block !important;
        }

        .blueberry-reference-page #berryJourneyScene .berry-journey__desktop-content > .relative.shrink-0 {
            /* Keep sib1 visible at 1500px, then return smoothly to the 1920px
               reference offset as the viewport approaches the reference width. */
            transform: translateX(clamp(0px, calc(81vw - 1215px), 340px)) !important;
        }

        .blueberry-reference-page #berryJourneyScene .berry-journey__desktop-card {
            transform: none !important;
        }

        .blueberry-reference-page #berryJourneyScene .berry-journey__desktop-card .berry-journey__card-scene {
            width: 730px !important;
            height: 784px !important;
            aspect-ratio: auto !important;
        }

        .blueberry-reference-page #berryJourneyScene .berry-journey__desktop-card > .berry-journey__progress--desktop {
            top: 50% !important;
            height: 576px !important;
            transform: translateY(-50%) !important;
        }

        .blueberry-reference-page #berryJourneyScene .goddess-figma-stage__heading {
            top: -11% !important;
        }

        .blueberry-reference-page #berryJourneyScene .goddess-figma-stage__background {
            top: 0 !important;
        }

        .blueberry-reference-page #berryJourneyScene .goddess-figma-stage__art {
            bottom: 28% !important;
        }

        .blueberry-reference-page #berryJourneyScene .goddess-figma-stage__fortune-card {
            left: 25% !important;
            top: 28% !important;
            width: auto !important;
            transform: none !important;
        }
    }
}