/* ================================================================================
DA GOODIES v6.2 — LAYOUT RULES
================================================================================
Pinegrow-friendly: select an element, then select one of these class rules.
Main controls live in css/controls.css.
================================================================================ */
.asset-snack-strip,
.dg-snack-strip {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: var(--snack-strip-margin-top);
    margin-bottom: var(--snack-strip-margin-bottom);
    overflow: hidden;
    background: rgba(255,255,255,.06);
    border-bottom: 2px solid rgba(120,211,19,var(--snack-strip-border-opacity));
}

.asset-snack-strip img,
.dg-snack-strip img {
    width: var(--snack-strip-width);
    max-width: none;
    height: auto;
}

.dg-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    align-items: center;
    gap: 0;
    min-height: clamp(var(--hero-min-height-min), var(--hero-min-height-fluid), var(--hero-min-height-max));
    padding: clamp(var(--hero-padding-top-min), var(--hero-padding-top-fluid), var(--hero-padding-top-max))
           clamp(var(--hero-padding-x-min), var(--hero-padding-x-fluid), var(--hero-padding-x-max))
           0;
}

.asset-hero-text,
.dg-hero-text {
    width: min(100%, var(--hero-text-width));
    margin-left: var(--hero-text-margin-left);
    margin-top: var(--hero-text-margin-top);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.09));
    position: relative;
    z-index: 2;
}

@media (min-width: 1100px) {
    .asset-hero-text,
    .dg-hero-text {
        padding-top: 1px;
        margin-top: -9px;
        padding-left: 0px;
        width: 596px;
        height: 365px;
        max-width: 870px;
        max-height: 455px;
        left: -13px;
        right: 178px;
        top: 3px;
    }
}

.asset-hero-snacks,
.dg-hero-snacks {
    justify-self: end;
    width: min(100%, var(--hero-snacks-width));
    margin-left: var(--hero-snacks-margin-left);
    margin-top: var(--hero-snacks-margin-top);
    filter: drop-shadow(0 16px 30px rgba(0,0,0,.16));
    position: relative;
    z-index: 1;
}

.dg-hero-sparkle {
    position: absolute;
    color: var(--dg-lime);
    font-size: 30px;
    text-shadow: 0 0 12px rgba(159,230,26,.6);
    animation: dgPulse 2.8s ease-in-out infinite;
}

.dg-hero-sparkle.s1 {
    left: 18%;
    bottom: 20%;
}

.dg-hero-sparkle.s2 {
    right: 8%;
    top: 16%;
    animation-delay: 1.2s;
}

@keyframes dgPulse {
    50% {
        transform: scale(1.15);
        opacity: .85;
    }
}

.dg-asset-panel {
    position: relative;
    margin-inline: auto;
}

.dg-panel-art {
    width: 100%;
    height: auto;
    display: block;
}

.asset-delivery-panel,
.dg-delivery-panel {
    width: min(var(--delivery-panel-width), var(--delivery-panel-max-mobile-width));
    margin-top: var(--delivery-panel-margin-top);
    margin-bottom: clamp(var(--delivery-panel-margin-bottom-min), var(--delivery-panel-margin-bottom-fluid), var(--delivery-panel-margin-bottom-max));
    z-index: 2;
}

.asset-packs-section,
.dg-packs-section {
    position: relative;
    z-index: 2;
    width: min(var(--packs-section-width), calc(100% - var(--packs-section-side-margin)));
    margin: 0 auto clamp(var(--packs-margin-bottom-min), var(--packs-margin-bottom-fluid), var(--packs-margin-bottom-max));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "quick work"
    "movie movie"
    "crew shop";
    gap: clamp(var(--packs-row-gap-min), var(--packs-row-gap-fluid), var(--packs-row-gap-max))
       clamp(var(--packs-column-gap-min), var(--packs-column-gap-fluid), var(--packs-column-gap-max));
    align-items: center;
}

.asset-pack-quick,
.pack-quick {
    grid-area: quick;
    width: var(--quick-pack-width);
    margin-left: var(--quick-pack-margin-left);
    margin-top: var(--quick-pack-margin-top);
}

.asset-pack-work,
.pack-work {
    grid-area: work;
    width: var(--work-pack-width);
    margin-left: var(--work-pack-margin-left);
    margin-top: var(--work-pack-margin-top);
}

.asset-pack-movie,
.pack-movie {
    grid-area: movie;
    width: min(var(--movie-pack-width), var(--movie-pack-percent-width));
    justify-self: center;
    margin-left: var(--movie-pack-margin-left);
    margin-top: var(--movie-pack-margin-top);
}

.asset-pack-crew,
.pack-crew {
    grid-area: crew;
    width: var(--crew-pack-width);
    margin-left: var(--crew-pack-margin-left);
    margin-top: var(--crew-pack-margin-top);
}

.asset-pack-shop,
.pack-shop {
    grid-area: shop;
    width: var(--shop-pack-width);
    margin-left: var(--shop-pack-margin-left);
    margin-top: var(--shop-pack-margin-top);
}

.asset-checkout-panel,
.dg-checkout-panel {
    width: min(var(--checkout-panel-width), calc(100% - var(--checkout-panel-side-margin)));
    aspect-ratio: 1448 / 1086;
    z-index: 3;
    margin-left: var(--checkout-panel-margin-left);
    margin-right: var(--checkout-panel-margin-right);
    margin-top: var(--checkout-panel-margin-top);
    margin-bottom: clamp(var(--checkout-margin-bottom-min), var(--checkout-margin-bottom-fluid), var(--checkout-margin-bottom-max));
}

.asset-suggest-panel,
.dg-suggest-panel {
    width: min(var(--suggest-panel-width), calc(100% - var(--suggest-panel-side-margin)));
    aspect-ratio: 1402 / 1122;
    margin-left: var(--suggest-panel-margin-left);
    margin-right: var(--suggest-panel-margin-right);
    margin-top: var(--suggest-panel-margin-top);
    margin-bottom: var(--suggest-panel-margin-bottom);
}