/*
 * Shared product-detail packshot treatment.
 * The 25 L final assets are mapped centrally; this file controls only their
 * presentation so every product hero keeps the same visual scale.
 */
:root {
    --product-packshot-max-height: min(72svh, 650px);
    --product-packshot-max-width: min(100%, 600px);
    --product-hero-media-width: 46%;
    --product-hero-media-height: min(80svh, 790px);
    --product-packshot-mobile-width: min(86vw, 430px);
}

/* Shared flagship renderer: center the complete pack and let the page's olive
 * hero treatment show through the transparent outer canvas. */
.iic-product .iic-packshot {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: min(78svh, 700px) !important;
    margin: 0 !important;
    padding: clamp(12px, 2vw, 28px) 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

.iic-product .iic-packshot img {
    display: block !important;
    width: min(100%, 540px) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(74svh, 660px) !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    filter: drop-shadow(0 30px 26px rgba(35, 64, 31, .2)) !important;
}

/* Five-litre packs use a different source silhouette, but retain the same
 * centered visual prominence instead of appearing as a small thumbnail. */
.iic-product .iic-packshot img[src*="5l" i],
.iic-product .iic-packshot img[alt*="5 Litre" i],
.iic-product .iic-packshot img[alt*="5 Liter" i] {
    width: min(100%, 510px) !important;
    max-height: min(70svh, 620px) !important;
}

@media (min-width: 1121px) {
    body.everklin-transformed .product-page .product-hero-grid,
    .product-page .product-hero-grid {
        grid-template-columns: minmax(0, 1.16fr) minmax(440px, .98fr) !important;
        grid-template-areas: "copy gallery";
        gap: clamp(32px, 4.2vw, 72px) !important;
        align-items: center !important;
        min-height: clamp(590px, calc(100svh - 118px), 790px);
    }
}

body.everklin-transformed .product-page .product-hero-copy,
.product-page .product-hero-copy {
    grid-area: copy;
    align-self: center;
}

body.everklin-transformed .product-page .product-gallery,
.product-page .product-gallery {
    grid-area: gallery;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--product-hero-media-height);
}

/* Remove the inherited poster/card treatment and every decorative stage layer. */
body.everklin-transformed .product-page .product-image-stage,
.product-page .product-image-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: var(--product-hero-media-height);
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.everklin-transformed .product-page .product-image-stage::before,
body.everklin-transformed .product-page .product-image-stage::after,
.product-page .product-image-stage::before,
.product-page .product-image-stage::after {
    content: none !important;
    display: none !important;
}

body.everklin-transformed .product-page .product-image-stage img,
.product-page .product-image-stage img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: var(--product-packshot-max-width) !important;
    max-height: var(--product-packshot-max-height) !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    filter: drop-shadow(0 26px 24px rgba(15, 59, 46, .16)) !important;
}

body.everklin-transformed .product-page .product-image-stage:hover img,
.product-page .product-image-stage:hover img {
    transform: scale(1.015) !important;
}

/* A shared editorial stage lets opaque source canvases read as part of the
 * hero, while transparent cans, bags and bottles retain their original art. */
body.everklin-transformed .product-page .product-hero,
.product-page .product-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 100%, rgba(164, 190, 92, .16), transparent 32rem),
        radial-gradient(circle at 94% 8%, rgba(214, 229, 167, .42), transparent 27rem),
        #ffffff !important;
}

body.everklin-transformed .product-page .product-hero::before,
.product-page .product-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .11;
    background-image:
        linear-gradient(rgba(49, 80, 43, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49, 80, 43, .09) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(90deg, transparent 0%, black 48%, black 100%);
}

body.everklin-transformed .product-page .product-hero-grid,
.product-page .product-hero-grid {
    position: relative;
    z-index: 1;
    padding-block: clamp(34px, 5vw, 72px) !important;
}

body.everklin-transformed .product-page .product-gallery,
.product-page .product-gallery {
    position: relative;
    padding: clamp(12px, 1.8vw, 24px) !important;
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.everklin-transformed .product-page .product-gallery::before,
.product-page .product-gallery::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 11%, rgba(230, 241, 193, .8), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, .02), rgba(194, 215, 130, .18));
}

body.everklin-transformed .product-page .product-image-stage,
.product-page .product-image-stage {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: transparent !important;
}

body.everklin-transformed .product-page .product-image-stage img,
.product-page .product-image-stage img {
    position: relative;
    z-index: 1;
}

/* The single generated hero asset makes legacy hero controls redundant.
 * Pack quantity remains visible once on the approved can label. */
body.everklin-transformed .product-page .product-thumbnails,
.product-page .product-thumbnails,
body.everklin-transformed .product-page .product-gallery > .packaging-selector,
.product-page .product-gallery > .packaging-selector {
    display: none !important;
}

@media (max-width: 1120px) {
    body.everklin-transformed .product-page .product-hero,
    .product-page .product-hero {
        background:
            radial-gradient(circle at 84% 9%, rgba(190, 211, 117, .3), transparent 20rem),
            #ffffff !important;
    }

    body.everklin-transformed .product-page .product-hero-grid,
    .product-page .product-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "copy" "gallery";
        gap: 28px !important;
        align-items: start !important;
    }

    body.everklin-transformed .product-page .product-gallery,
    .product-page .product-gallery {
        min-height: min(64svh, 600px);
        max-width: min(100%, 620px);
        margin-inline: auto;
    }

    body.everklin-transformed .product-page .product-image-stage,
    .product-page .product-image-stage {
        height: min(64svh, 600px);
    }

    body.everklin-transformed .product-page .product-image-stage img,
    .product-page .product-image-stage img {
        max-width: min(70vw, 440px) !important;
        max-height: min(60svh, 560px) !important;
    }
}

@media (max-width: 600px) {
    :root {
        --product-packshot-mobile-width: min(86vw, 430px);
    }

    body.everklin-transformed .product-page .product-hero-grid,
    .product-page .product-hero-grid {
        gap: 24px !important;
    }

    body.everklin-transformed .product-page .product-gallery,
    .product-page .product-gallery {
        min-height: min(66svh, 520px);
    }

    body.everklin-transformed .product-page .product-image-stage,
    .product-page .product-image-stage {
        height: min(66svh, 520px);
    }

    body.everklin-transformed .product-page .product-image-stage img,
    .product-page .product-image-stage img {
        max-width: var(--product-packshot-mobile-width) !important;
        max-height: min(62svh, 500px) !important;
    }

    .iic-product .iic-packshot {
        min-height: min(68svh, 540px) !important;
        padding-block: 14px !important;
    }

    .iic-product .iic-packshot img,
    .iic-product .iic-packshot img[src*="5l" i],
    .iic-product .iic-packshot img[alt*="5 Litre" i],
    .iic-product .iic-packshot img[alt*="5 Liter" i] {
        width: min(94vw, 430px) !important;
        max-height: min(64svh, 510px) !important;
    }
}