.storm-body {
    padding: 0;
}

#storm-banner {

    --storm-min-widget-gap: 5px;
	--storm-max-widget-gap: 10px;

    --storm-freeform-container-flex-direction: row;
	
	--storm-freeform-container-align-items: center;

	--storm-max-font-size-override: 26pt;
    --storm-min-letter-spacing-override: 0.7pt;
	--storm-max-letter-spacing-override: 0.7pt;

    line-height: normal;

    .storm-keywords {
        --storm-color-override: var(--storm-neutral);
        background-color: var(--storm-primary);
        --storm-freeform-container-justify-content: space-between;
        --storm-min-freeform-container-padding-x: 50px;
        --storm-max-freeform-container-padding-x: 600px;
    }

    .storm-narrative {
        --storm-freeform-container-justify-content: center;
    }

}

#storm-product-preview, #storm-origins-preview {

    /* DISPATCHER OVERRIDES */

    &#storm-product-preview {
        --storm-min-widget-margin-x: 5px;
        --storm-max-widget-margin-x: 100px;
    }

    &#storm-origins-preview {
        --storm-min-widget-margin-x: 0px;
        --storm-max-widget-margin-x: 0px;
    }
    
    --storm-min-widget-gap: 10px;
    --storm-max-widget-gap: 40px;

	--storm-min-scrollable-border: 0px;
	--storm-max-scrollable-border: 40px;

    --storm-freeform-container-flex-direction: row;
	--storm-freeform-container-justify-content: start;
	--storm-freeform-container-align-items: center;

    --storm-min-button-border-radius: 20px;
    --storm-max-button-border-radius: 20px;
    --storm-min-button-padding-x: 32px;
    --storm-max-button-padding-x: 32px;
    --storm-min-button-padding-y: 10px;
    --storm-max-button-padding-y: 15px;
    --storm-button-cursor: pointer;

    --storm-card-container-gap: 30px;
	--storm-min-card-container-padding: 10px;
	--storm-max-card-container-padding: 10px;

    --storm-min-card-width: 290px;
    --storm-max-card-width: 380px;
    --storm-min-card-border-radius: 15px;
    --storm-max-card-border-radius: 15px;
    --storm-min-card-padding-x: 15px;
    --storm-max-card-padding-x: 15px;
    --storm-min-card-padding-y: 30px;
    --storm-max-card-padding-y: 30px;
    --storm-card-gap: 10px;

}

#storm-info-preview {

    --storm-min-widget-margin-x: 5px;
    --storm-max-widget-margin-x: 200px;
    --storm-min-widget-margin-y: 50px;
    --storm-max-widget-margin-y: 400px;
    margin-top: 0;

    --storm-freeform-container-flex-direction: row;

    --storm-min-button-border-radius: 10px;
    --storm-max-button-border-radius: 20px;
    --storm-min-button-padding-x: 60px;
    --storm-max-button-padding-x: 120px;
    --storm-min-button-padding-y: 5px;
    --storm-max-button-padding-y: 10px;
    --storm-button-cursor: pointer;

    --storm-info-picture-width: --continuous(
		var(--storm-min-growth-breakpoint),
		300px,
		var(--storm-max-container-growth-breakpoint),
		700px
    );
    --storm-info-picture-height: --continuous(
		var(--storm-min-growth-breakpoint),
		120px,
		var(--storm-max-container-growth-breakpoint),
		260px
    );

    header {

        --storm-freeform-container-justify-content: center;
        --storm-freeform-container-align-items: center;

        --storm-max-font-size-override: 42pt;
        --storm-min-letter-spacing-override: 0.5pt;
        --storm-max-letter-spacing-override: 1.5pt;

        background-color: var(--storm-secondary);
        border-radius: 10px 10px 0 0;

    }

    figure {

        --storm-freeform-container-justify-content: center;
        border-radius: 0 0 10px 10px;
        background-color: var(--storm-secondary);
        opacity: 0.5;
        height: var(--storm-info-picture-height);

    }

    picture {

        margin-top: 10px;
        width: var(--storm-info-picture-width);
        height: var(--storm-info-picture-height);

    }

    .storm-info-overlay {
        position: absolute;
        z-index: 2;
        top: --continuous(
            var(--storm-min-growth-breakpoint),
            165px,
            var(--storm-max-container-growth-breakpoint),
            365px
        );
        left: 50%;
        transform: translate(-50%, -50%);

        &.storm-overlay-1, &.storm-overlay-3 {

            --storm-color-override: var(--storm-primary);
            --storm-min-font-size-override: 30pt;
            --storm-max-font-size-override: 70pt;
            --storm-min-letter-spacing-override: 1pt;
            --storm-max-letter-spacing-override: 4pt;

            &.storm-overlay-1 {
                --storm-info-side-gap-1: --continuous(
                    var(--storm-min-growth-breakpoint),
                    95px,
                    var(--storm-max-container-growth-breakpoint),
                    230px
                );
                left: calc(50% - var(--storm-info-side-gap-1));
            }

            &.storm-overlay-3 {
                --storm-info-side-gap-2: --continuous(
                    var(--storm-min-growth-breakpoint),
                    100px,
                    var(--storm-max-container-growth-breakpoint),
                    242px
                );
                left: calc(50% + var(--storm-info-side-gap-2));
            }

        }

        &.storm-overlay-2 {
            --storm-color-override: var(--storm-neutral);
            --storm-min-font-size-override: 40pt;
            --storm-max-font-size-override: 100pt;
            --storm-min-letter-spacing-override: 1pt;
            --storm-max-letter-spacing-override: 4pt;
        }
    }

    .storm-button {
        text-wrap: nowrap;
        top: 0;
        translate: 0 80%;
    }

}

#storm-product-preview .storm-custom {

    margin-top: --apply(2, 5px, 10px, card);

}

#storm-origins-preview {

    background-color: #1a1919;

    header {

        background: linear-gradient(to top, #1a1919 50%, var(--storm-neutral) 50%);

        --storm-freeform-container-justify-content: center;
        --storm-freeform-container-align-items: center;
        height: 100px;

        .storm-custom {
            height: 100px;
            border-radius: 35px 35px 35px 35px;
            width: min(768px, 100%);
            background: linear-gradient(to bottom, #1a1919 50%, #1a1919 50%);
            --storm-min-font-size-override: 25pt;
            --storm-max-font-size-override: 46pt;
            --storm-color-override: var(--storm-primary);
        }

    }

    article {

        --storm-freeform-container-flex-direction: --apply(var(--storm-breakpoint-tablet-landscape), column, row, media);
        --storm-freeform-container-align-items: stretch;
        --storm-min-freeform-container-gap: 20px;
        --storm-max-freeform-container-gap: 40px;
        --storm-min-freeform-container-padding-x: 10px;
        --storm-max-freeform-container-padding-x: 100px;
        --storm-min-freeform-container-padding-y: 50px;
        --storm-max-freeform-container-padding-y: 200px;
        padding-top: 0;

        img {
            width: min(100%, 450px);
        }

        >* {

            width: --apply(var(--storm-breakpoint-tablet-landscape), 100%, 50%, media);

        }

        .storm-custom {

            --storm-freeform-container-flex-direction: column;
            --storm-min-freeform-container-padding-x: 0px;
            --storm-max-freeform-container-padding-x: 0px;
            --storm-min-freeform-container-padding-y: 0px;
            --storm-max-freeform-container-padding-y: 0px;
            --storm-min-freeform-container-gap: 15px;
            --storm-max-freeform-container-gap: 30px;

            .storm-freeform-container {

                --storm-freeform-container-flex-direction: column;
                --storm-min-freeform-container-padding-x: 0px;
                --storm-max-freeform-container-padding-x: 0px;
                --storm-min-freeform-container-padding-y: 0px;
                --storm-max-freeform-container-padding-y: 0px;
                --storm-min-freeform-container-gap: 10px;
                --storm-max-freeform-container-gap: 30px;

                >p {
                    --storm-min-font-size-override: 12pt;
                    --storm-max-font-size-override: 17pt;
                    --storm-min-line-height-override: 1.25;
                    --storm-max-line-height-override: 1.5;
                }

            }

            >h3 {
                --storm-min-font-size-override: 28pt;
                --storm-max-font-size-override: 38pt;
                line-height: 1;
            }

            >div.storm-custom-smartphone {

                justify-content: --apply(var(--storm-breakpoint-tablet-portrait), center, start, media);
                padding-top: 15px;

                >a {
                    --storm-min-font-size-override: 20pt;
                    --storm-max-font-size-override: 30pt;
                    --storm-min-letter-spacing-override: 0.5px;
                    --storm-max-letter-spacing-override: 1px;
                    --storm-min-button-padding-x: 50px;
                    --storm-max-button-padding-x: 80px;
                    --storm-min-button-padding-y: 10px;
                    --storm-max-button-padding-y: 10px;
                    line-height: normal;
                    width: fit-content;
                }
            }

        }

    }

}

/* CLEANUP */

button[name="add_to_cart"] {

    span.fa {
        display: none !important;
    }

}