/** Shopify CDN: Minification failed

Line 191:0 Unexpected "}"

**/
.all-cocktails .grid > a {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: start;
    align-items: start;
    text-decoration: none;
    color: inherit;
    font-size: 2.8rem;
    line-height: 1.2;
    padding: 0;
    font-family: var(--font-heading-family);
    border: 0rem solid rgb(var(--forest-yellow-light));
    height: auto;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s linear;
}
.all-cocktails .grid > a > * {
    position: relative;
    z-index: 1;
}
.all-cocktails .grid > a:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(255, 253, 234, 0.00) 56.61%, #FFFDEA 79.77%);
    z-index: 2;
}
.all-cocktails select {
    padding: 1.6rem 3.2rem;
    background-color: rgb(var(--forest-yellow));
    color: rgb(var(--charcoal));
    border-radius: 0.8rem;
    border: 0;
    font-family: var(--font-heading-family);
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0.216rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml,<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.333 10.188.673.438h17.32l-8.66 9.75Z" fill="%23384948"/></svg>');
    background-repeat: no-repeat;
    background-position: 95% center
}
all-cocktails .no-results {
    margin-top: 3.2rem;
    margin-bottom: 3.2rem;
    max-height: 100svh;
    max-height: fit-content;
    transition: max-height 0.35s ease, margin 0.35s ease;
}
all-cocktails .no-results>* {
    transform: translateY(0);
    transition: transform 0.3s ease, opacity 0.5s ease;
    opacity: 1;
}
all-cocktails .no-results.no-show {
    margin-top: 0;
    margin-bottom: 0;
    max-height: 0;
    overflow: hidden;
    content-visibility: visible;
    will-change: max-height;
    display: block;
}
all-cocktails .no-results.no-show>* {
    transform: translateY(-1rem);
    transition: transform 0.3s ease, opacity 0.2s ease;
    opacity: 0;
}
all-cocktails .no-results p {
    margin: 0 auto 1.6rem;
}
.all-cocktails .grid > a.forest:after {
    background: linear-gradient(180deg, rgba(245, 106, 7, 0.00) 60%, #F56A07 100%);
}
.all-cocktails .grid > a.mountain:after {
    background: linear-gradient(180deg, rgba(254, 110, 103, 0.00) 60%, #FE6E67 100%);
}
.all-cocktails .grid > a.marine:after {
    background: linear-gradient(180deg, rgba(37, 132, 165, 0.00) 60%, #2584A5 100%);
}
.all-cocktails .grid > a.forest .cocktail-name,
.all-cocktails .grid > a.mountain .cocktail-name,
.all-cocktails .grid > a.marine .cocktail-name {
    color: rgb(var(--cream));
}
.all-cocktails .grid {
    z-index: 1;
    gap: 2.4rem;
    --grid-desktop-vertical-spacing: 2.4rem;
    --grid-desktop-horizontal-spacing: 2.4rem;
    --grid-mobile-vertical-spacing: 2.4rem;
    --grid-mobile-horizontal-spacing: 2.4rem;
}
.all-cocktails .grid .cocktail-name,
.all-cocktails .grid .spritz-name {
    z-index: 3;
}
.all-cocktails .grid .spritz-name {
    position: absolute;
    bottom: 1.6rem;
    left: 1.6rem;
    right: 1.6rem;
}
.all-cocktails .signature-spritz.grid {
    z-index: 1;
    gap: 1.6rem;
    --grid-desktop-vertical-spacing: 2.4rem;
    --grid-desktop-horizontal-spacing: 2.4rem;
    --grid-mobile-vertical-spacing: 1.6rem;
    --grid-mobile-horizontal-spacing: 1.6rem;
}
@media screen and (min-width: 750px) {
    .all-cocktails .signature-spritz.grid,
    .all-cocktails .grid {
        gap: 2.4rem;
    }
    .all-cocktails .grid .cocktail-name,
    .all-cocktails .grid .spritz-name {
        font-size: 2.4rem;
    }
}
@media screen and (min-width: 990px) {
    .all-cocktails .grid .spritz-name {
        bottom: 3.2rem;
        left: 3.2rem;
        right: 3.2rem;
    }
    .all-cocktails .grid .cocktail-name,
    .all-cocktails .grid .spritz-name {
        font-size: 2.8rem;
    }
}
.all-cocktails .grid > a.spritz {
    border: 0.2rem solid rgb(var(--forest-yellow-light));
}
.all-cocktails .grid .cocktail-name,
.all-cocktails .grid > a.spritz {
    padding: 1.6rem;
}
.all-cocktails .grid > a.spritz:hover {
    border-color: rgb(var(--forest-yellow));
}
.all-cocktails .grid img {
    max-width: 100%;
    width: 100%;
    height: auto;
}
.all-cocktails h2 {
    text-align: center;
}
.all-cocktails .grid .cocktail-name {
    position: absolute;
    bottom: 0;
    padding: 1.6rem;
    left: 0;
    right: 0;
}
.all-cocktails .caption-with-letter-spacing {
    text-align: center;
    margin-bottom: 1.6rem;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.5rem;
    letter-spacing: 0.224rem;
}
.signature-spritz-container {
    padding-top: 6.4rem;
    padding-bottom: 6.4rem;
}
.all-cocktails .grid > a.spritz {
    padding: 0;
}
@media screen and (min-width: 750px) {
    .all-cocktails .grid .cocktail-name,
        padding: clamp(1.6rem, 2.5vw, 3.2rem);
    }
}

all-cocktails .scroll-target {
    position: absolute;
    top: calc(-1.7 * var(--header-height));
    display: block;
    visibility: hidden;
    pointer-events: none;
    height: 0.1rem;
    width: 0.1rem;
}
all-cocktails .cocktail-recipes {
    position: relative;
}


.all-cocktails .grid.filtering > a {
    opacity: 0;
}


.cocktail-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto;
    width: 100%;
}
.cocktail-image img {
    display: block;
    width: auto;
    height: auto;
    max-width: auto;
    max-height: 40rem;
    margin: 0 auto;
}
.cocktail.cocktail-recipe h2,
.cocktail.cocktail-recipe .caption-with-letter-spacing {
    text-align: center;
}
.cocktail.cocktail-recipe .cocktail-product .grid__item {
    max-width: 40rem;
    margin: 0 auto;
}
.cocktail.cocktail-recipe .product-bottom {
    padding: 1.6rem;
    background: rgb(var(--forest-yellow));
}
.product-bottom-container {
    padding: 1.6rem;
    background: rgb(var(--cream));
}
.cocktail.cocktail-recipe .make-it,
.cocktail.cocktail-recipe .cocktail-description {
    max-width: 90rem;
    margin: 3.2rem auto;
}
.cocktail.cocktail-recipe .make-it {
    display: flex;
    flex-direction: column;
}
.cocktail.cocktail-recipe .make-it>div {
    width: 100%;
    flex-grow: 1;
    flex-shrink: 0;
}
.cocktail.cocktail-recipe .make-it .cocktail-method {
    padding-top: 3.2rem;
    border-top: 2px solid rgb(var(--forest-yellow));
}
.cocktail.cocktail-recipe h3.caption-with-letter-spacing {
    text-align: left;
    margin: 0 0 1.2rem;
}
@media screen and (min-width: 750px) {
    .cocktail-image img {
        max-height: 64rem;
        width: auto;
    }
    .cocktail.cocktail-recipe .product-bottom {
        padding: 3.2rem;
    }
    .product-bottom-container {
        padding: 2.8rem 1.6rem 4.8rem;
    }
    .cocktail.cocktail-recipe .make-it,
    .cocktail.cocktail-recipe .cocktail-description {
        margin: 6.4rem auto;
    }
    .cocktail.cocktail-recipe .make-it {
        flex-direction: row;
    }
    .cocktail.cocktail-recipe .make-it>div {
        width: 50%;
    }
    .cocktail.cocktail-recipe .make-it .cocktail-ingredients {
        padding-right: 3.2rem;
    }
    .cocktail.cocktail-recipe .make-it .cocktail-method {
        padding-left: 3.2rem;
        padding-top: 0;
        border-left: 2px solid rgb(var(--forest-yellow));
        border-top: none;
    }
}