/* =========================================================
   BUTTER FRY CAFE
   DIGITAL MENU
   PREMIUM PRINTED CAFE STYLE
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --bf-paper: #f7efe4;
    --bf-paper-light: #fcf7f0;
    --bf-paper-warm: #f1e2cf;
    --bf-paper-deep: #ead6be;

    --bf-brown: #3a2519;
    --bf-brown-soft: #563522;
    --bf-brown-muted: #76503a;

    --bf-caramel: #d8b281;
    --bf-peach: #da9e75;

    --bf-line: rgba(58, 37, 25, .24);
    --bf-line-medium: rgba(58, 37, 25, .38);
    --bf-line-strong: rgba(58, 37, 25, .58);

    --bf-shadow-soft:
        0 14px 30px rgba(58, 37, 25, .10);

    --bf-shadow:
        0 24px 55px rgba(58, 37, 25, .14);

    --font-display:
        "Bricolage Grotesque",
        Arial,
        sans-serif;

    --font-serif:
        "Vollkorn",
        Georgia,
        serif;

    --font-body:
        "Jost",
        Arial,
        sans-serif;

    --font-script:
        "Bad Script",
        cursive;

    --bf-ease:
        cubic-bezier(.22, .61, .36, 1);

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    min-width: 320px;

    margin: 0;

    background: #e6d0b6;

    color: var(--bf-brown);

    font-family: var(--font-body);

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    overflow-x: hidden;

}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    border: 0;
}


/* =========================================================
   MENU COVER
========================================================= */

.bf-menu-cover {

    position: relative;

    width: 100%;

    min-height: 100svh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    isolation: isolate;

    background:

        radial-gradient(
            circle at 85% 12%,
            rgba(216, 178, 129, .25),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(218, 158, 117, .18),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #fcf7f0 0%,
            #f7efe4 50%,
            #efdfca 100%
        );

}


.bf-menu-cover.is-hidden {
    display: none;
}


/* =========================================================
   COVER BORDER
========================================================= */

.bf-menu-cover::before {

    content: "";

    position: absolute;

    inset: 12px;

    z-index: 2;

    pointer-events: none;

    border:
        2px solid
        var(--bf-brown);

}


.bf-menu-cover::after {

    content: "";

    position: absolute;

    inset: 19px;

    z-index: 2;

    pointer-events: none;

    border:
        1px solid
        rgba(58, 37, 25, .28);

}


/* =========================================================
   COVER BACKGROUND
========================================================= */

.bf-menu-cover__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.bf-menu-cover__grain {

    position: absolute;

    inset: 0;

    opacity: .095;

    background-image:

        repeating-radial-gradient(
            circle at 0 0,
            rgba(58, 37, 25, .09) 0,
            rgba(58, 37, 25, .09) .7px,
            transparent .7px,
            transparent 5px
        );

    background-size: 8px 8px;

}


.bf-menu-cover__glow {

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    filter: blur(120px);

}


.bf-menu-cover__glow--one {

    left: -250px;

    top: -270px;

    background:
        rgba(216, 178, 129, .30);

}


.bf-menu-cover__glow--two {

    right: -260px;

    bottom: -290px;

    background:
        rgba(218, 158, 117, .23);

}


/* =========================================================
   COVER ORNAMENT
========================================================= */

.bf-menu-cover__top,
.bf-menu-cover__bottom {

    position: absolute;

    left: 50%;

    z-index: 5;

    width:
        min(
            670px,
            calc(100% - 95px)
        );

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 15px;

}


.bf-menu-cover__top {
    top: 38px;
}


.bf-menu-cover__bottom {
    bottom: 38px;
}


.bf-menu-cover__top span,
.bf-menu-cover__bottom span {

    flex: 1;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--bf-brown)
        );

}


.bf-menu-cover__top span:last-child,
.bf-menu-cover__bottom span:last-child {

    background:

        linear-gradient(
            90deg,
            var(--bf-brown),
            transparent
        );

}


.bf-menu-cover__top i,
.bf-menu-cover__bottom i {

    width: 7px;

    height: 7px;

    background:
        var(--bf-brown);

    transform:
        rotate(45deg);

}


/* =========================================================
   COVER CONTENT
========================================================= */

.bf-menu-cover__content {

    position: relative;

    z-index: 10;

    width:
        min(
            100%,
            740px
        );

    padding:
        72px
        34px
        78px;

    text-align: center;

}


/* =========================================================
   COVER LOGO
========================================================= */

.bf-menu-cover__logo-wrap {

    position: relative;

    width:
        clamp(
            215px,
            29vw,
            315px
        );

    margin:
        0 auto
        27px;

}


.bf-menu-cover__logo-glow {

    position: absolute;

    inset: -11%;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(216, 178, 129, .32),
            rgba(218, 158, 117, .13) 46%,
            transparent 72%
        );

    filter:
        blur(24px);

    animation:
        bfLogoGlow
        5s
        ease-in-out
        infinite;

}


.bf-menu-cover__logo-frame {

    position: relative;

    z-index: 2;

    width: 100%;

    overflow: hidden;

    background: transparent;

}


.bf-menu-cover__logo {

    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;

}


/* =========================================================
   COVER TYPOGRAPHY
========================================================= */

.bf-menu-cover__eyebrow {

    width:
        min(
            100%,
            390px
        );

    margin:
        0 auto
        12px;

    display: flex;

    align-items: center;

    gap: 15px;

}


.bf-menu-cover__eyebrow span {

    flex: 1;

    height: 1px;

    background:
        var(--bf-line-strong);

}


.bf-menu-cover__eyebrow p {

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .26em;

    color:
        var(--bf-brown-muted);

    white-space: nowrap;

}


.bf-menu-cover__title {

    margin-top: 8px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            58px,
            9vw,
            94px
        );

    line-height: .91;

    font-weight: 800;

    letter-spacing: -.045em;

    color:
        var(--bf-brown);

}


.bf-menu-cover__cafe {

    margin-top: 10px;

    font-size:
        clamp(
            13px,
            2vw,
            17px
        );

    font-weight: 600;

    letter-spacing: .40em;

    color:
        var(--bf-brown-soft);

}


.bf-menu-cover__tagline {

    margin-top: 14px;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            19px,
            2.7vw,
            25px
        );

    font-style: italic;

    color:
        var(--bf-brown-muted);

}


/* =========================================================
   COVER MENU SCRIPT
========================================================= */

.bf-menu-cover__intro {

    width:
        min(
            100%,
            520px
        );

    margin:
        30px auto
        25px;

    display: flex;

    align-items: center;

    gap: 18px;

}


.bf-menu-cover__intro span {

    flex: 1;

    height: 2px;

    background:
        var(--bf-brown);

}


.bf-menu-cover__intro p {

    font-family:
        var(--font-script);

    font-size:
        clamp(
            45px,
            7vw,
            62px
        );

    line-height: 1;

    color:
        #9b5d28;

    white-space: nowrap;

}


/* =========================================================
   COVER CHOICES
========================================================= */

.bf-menu-cover__choices {

    width:
        min(
            100%,
            610px
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

}


.bf-menu-choice {

    position: relative;

    min-height: 145px;

    padding: 24px;

    cursor: pointer;

    overflow: hidden;

    text-align: left;

    color:
        var(--bf-brown);

    background:
        rgba(255, 250, 244, .58);

    border:
        1.5px solid
        var(--bf-brown);

    box-shadow:
        0 10px 24px
        rgba(58, 37, 25, .08);

    transition:
        .35s ease;

}


.bf-menu-choice::before {

    content: "";

    position: absolute;

    inset: 6px;

    border:
        1px solid
        rgba(58, 37, 25, .17);

}


.bf-menu-choice:hover {

    transform:
        translateY(-5px);

    background:
        rgba(218, 158, 117, .24);

}


.bf-menu-choice__number {

    position: absolute;

    top: 18px;

    right: 20px;

    font-family:
        var(--font-serif);

    font-size: 17px;

    font-style: italic;

    color:
        var(--bf-brown-muted);

}


.bf-menu-choice__content {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

}


.bf-menu-choice__content small {

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .18em;

    color:
        var(--bf-brown-muted);

}


.bf-menu-choice__content strong {

    margin-top: 28px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            25px,
            4vw,
            30px
        );

    font-weight: 750;

    color:
        var(--bf-brown);

}


.bf-menu-choice__arrow {

    position: absolute;

    right: 20px;

    bottom: 18px;

    font-size: 28px;

    color:
        var(--bf-brown);

}


/* =========================================================
   COVER FOOTER
========================================================= */

.bf-menu-cover__footer {

    margin-top: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .16em;

    color:
        var(--bf-brown-muted);

}


.bf-menu-cover__footer i {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        var(--bf-brown);

}


/* =========================================================
   FOOD MENU
========================================================= */

.bf-food-menu {

    position: relative;

    display: none;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 84% 12%,
            rgba(216,178,129,.20),
            transparent 32%
        ),

        radial-gradient(
            circle at 8% 90%,
            rgba(218,158,117,.13),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #fbf6ef 0%,
            #f7efe4 55%,
            #efdeca 100%
        );

}


.bf-food-menu.is-active {

    display: block;

    animation:
        bfFoodReveal
        .55s
        ease
        both;

}


/* =========================================================
   FOOD BACKGROUND
========================================================= */

.bf-food-menu__background {

    position: fixed;

    inset: 0;

    pointer-events: none;

}


.bf-food-menu__texture {

    position: absolute;

    inset: 0;

    opacity: .075;

    background-image:

        repeating-radial-gradient(
            circle at 0 0,
            rgba(58,37,25,.07) 0,
            rgba(58,37,25,.07) .7px,
            transparent .7px,
            transparent 5px
        );

}


.bf-food-menu__glow {

    position: absolute;

    width: 650px;

    height: 650px;

    right: -300px;

    top: 10%;

    border-radius: 50%;

    background:
        rgba(218,158,117,.16);

    filter:
        blur(130px);

}


.bf-food-menu__watermark {

    position: absolute;

    left: -70px;

    bottom: -120px;

    font-family:
        var(--font-display);

    font-size: 420px;

    font-weight: 800;

    color:
        rgba(58,37,25,.025);

}


/* =========================================================
   FOOD HEADER
========================================================= */

.bf-food-header {

    position: sticky;

    top: 0;

    z-index: 100;

    min-height: 132px;

    padding:
        10px
        clamp(18px, 5vw, 70px);

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    background:
        rgba(247,239,228,.97);

    border-bottom:
        2px solid
        var(--bf-brown);

    box-shadow:
        0 7px 20px
        rgba(58,37,25,.06);

    backdrop-filter:
        blur(13px);

}


/* =========================================================
   FOOD HEADER CONTROLS
========================================================= */

.bf-food-header__back,
.bf-food-header__switch {

    cursor: pointer;

    background: transparent;

    color:
        var(--bf-brown);

    font-family:
        var(--font-body);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .11em;

}


.bf-food-header__back {

    justify-self: start;

    display: flex;

    align-items: center;

    gap: 10px;

}


.bf-food-header__back span {

    font-size: 25px;

}


.bf-food-header__switch {

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 10px;

}


.bf-food-header__switch span {

    font-size: 21px;

}


/* =========================================================
   LARGE CENTRAL LOGO
========================================================= */

.bf-food-header__brand {

    position: relative;

    justify-self: center;

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        clamp(
            150px,
            15vw,
            220px
        );

    min-height: 105px;

}


.bf-food-header__logo {

    display: block;

    width: 100%;

    height: auto;

    max-height: 112px;

    object-fit: contain;

}


/* =========================================================
   FOOD MENU INTRO
========================================================= */

.bf-full-menu-intro {

    position: relative;

    padding:
        55px
        25px
        30px;

}


.bf-full-menu-intro__inner {

    width:
        min(
            100%,
            1180px
        );

    margin:
        0 auto;

    text-align: center;

}


.bf-full-menu-intro__eyebrow {

    display: block;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .24em;

    color:
        var(--bf-brown-muted);

}


.bf-full-menu-intro__title-wrap {

    width:
        min(
            100%,
            690px
        );

    margin:
        0 auto;

    display: flex;

    align-items: center;

    gap: 22px;

}


.bf-full-menu-intro__title-wrap span {

    flex: 1;

    height: 2px;

    background:
        var(--bf-brown);

}


.bf-full-menu-intro h1 {

    font-family:
        var(--font-script);

    font-size:
        clamp(
            55px,
            7vw,
            84px
        );

    line-height: 1.15;

    color:
        #9b5d28;

    white-space: nowrap;

}


.bf-full-menu-intro p {

    font-family:
        var(--font-serif);

    font-size: 19px;

    font-style: italic;

    color:
        var(--bf-brown-muted);

}


/* =========================================================
   MENU SECTION
========================================================= */

.bf-menu-section {

    position: relative;

    width:
        min(
            calc(100% - 40px),
            1260px
        );

    margin:
        36px auto;

    padding:
        clamp(
            34px,
            5vw,
            60px
        );

    background:
        rgba(252,247,240,.68);

    border:
        1.5px solid
        rgba(58,37,25,.38);

}


.bf-menu-section::before {

    content: "";

    position: absolute;

    inset: 7px;

    pointer-events: none;

    border:
        1px solid
        rgba(58,37,25,.11);

}


.bf-menu-section--accent {

    background:

        linear-gradient(
            145deg,
            rgba(216,178,129,.25),
            rgba(252,247,240,.70)
        );

}


.bf-menu-section--sweet {

    background:

        linear-gradient(
            145deg,
            rgba(218,158,117,.24),
            rgba(252,247,240,.72)
        );

}


/* =========================================================
   VISUAL SECTION GRID
========================================================= */

.bf-menu-section--visual
.bf-menu-section__inner {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(310px, .75fr);

    gap:
        clamp(
            36px,
            6vw,
            75px
        );

    align-items: center;

}


.bf-menu-section--image-left
.bf-menu-section__visual {

    order: -1;

}


/* =========================================================
   CONTENT
========================================================= */

.bf-menu-section__content {

    position: relative;

    z-index: 2;

    min-width: 0;

}


.bf-menu-section__content--wide {

    width:
        min(
            100%,
            980px
        );

    margin:
        0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.bf-menu-section__heading {

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 18px;

}


.bf-menu-section__icon {

    width: 67px;

    height: 67px;

    display: grid;

    place-items: center;

    border:
        2px solid
        var(--bf-brown);

    color:
        var(--bf-brown);

}


.bf-menu-section__icon i {

    font-size: 29px;

}


.bf-menu-section__number {

    display: block;

    margin-bottom: 4px;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: .22em;

    color:
        var(--bf-brown-muted);

}


.bf-menu-section__heading h2 {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            25px,
            4.7vw,
            45px
        );

    line-height: .95;

    font-weight: 800;

    letter-spacing: -.045em;

    color:
        var(--bf-brown);

}


.bf-menu-section__script {

    margin-top: 5px;

    font-family:
        var(--font-script);

    font-size:
        clamp(
            20px,
            2vw,
            30px
        );

    line-height: 1.2;

    color:
        #9b5d28;

}


/* =========================================================
   CATEGORY PRICE
========================================================= */

.bf-menu-section__main-price {

    min-width: 100px;

    padding:
        12px
        15px;

    text-align: center;

    background:
        var(--bf-brown);

    color:
        var(--bf-paper);
    
    /*margin-top: 10rem;*/

}


.bf-menu-section__main-price small {

    display: block;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .22em;

}


.bf-menu-section__main-price strong {

    display: block;

    margin-top: 3px;

    font-family:
        var(--font-display);

    font-size: 29px;

    font-weight: 800;

    color:
        #f2ca97;

}


/* =========================================================
   SECTION RULE
========================================================= */

.bf-menu-section__rule {

    margin:
        22px 0
        14px;

    display: flex;

    align-items: center;

    gap: 12px;

}


.bf-menu-section__rule span {

    flex: 1;

    height: 1px;

    background:
        rgba(58,37,25,.48);

}


.bf-menu-section__rule i {

    width: 7px;

    height: 7px;

    background:
        var(--bf-brown);

    transform:
        rotate(45deg);

}


/* =========================================================
   NOTE
========================================================= */

.bf-menu-section__note {

    margin-bottom: 7px;

    font-family:
        var(--font-serif);

    font-size: 15px;

    font-style: italic;

    color:
        var(--bf-brown-muted);

}


/* =========================================================
   MENU ITEMS
========================================================= */

.bf-menu-list {

    width: 100%;

}


.bf-menu-item {

    padding:
        14px 0;

    border-bottom:
        1px dotted
        rgba(58,37,25,.42);

}


.bf-menu-item:last-child {

    border-bottom:
        0;

}


.bf-menu-item__line {

    display: flex;

    align-items: baseline;

    gap: 9px;

}


.bf-menu-item__line h3 {

    flex:
        0 1 auto;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            20px,
            2vw,
            26px
        );

    line-height: 1.17;

    font-weight: 700;

    letter-spacing: -.02em;

    color:
        var(--bf-brown);

}


.bf-menu-item__line > span {

    flex: 1;

    min-width: 15px;

    border-bottom:
        2px dotted
        rgba(58,37,25,.30);

}


.bf-menu-item__line strong {

    flex:
        0 0 auto;

    font-family:
        var(--font-body);

    font-size: 18px;

    font-weight: 700;

    color:
        var(--bf-brown);

}


.bf-menu-item > p {

    margin-top: 5px;

    font-family:
        var(--font-serif);

    font-size: 15px;

    line-height: 1.48;

    color:
        var(--bf-brown-muted);

}


.bf-menu-item > p em {

    display: block;

    margin-top: 4px;

    font-family:
        var(--font-script);

    font-size: 18px;

    font-style: normal;

    color:
        #9b5d28;

}


/* =========================================================
   COMPACT LIST
========================================================= */

.bf-menu-list--compact {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 50px;

}


/* =========================================================
   IMAGE VISUAL
========================================================= */

.bf-menu-section__visual {

    position: relative;

    width: 100%;

    max-width: 440px;

    justify-self: center;

}


.bf-menu-section__visual-circle {

    position: absolute;

    width: 85%;

    aspect-ratio: 1;

    right: -8%;

    top: -8%;

    border-radius: 50%;

    border:
        1px solid
        rgba(58,37,25,.20);

}


.bf-menu-section__visual-circle::after {

    content: "";

    position: absolute;

    inset: 14px;

    border-radius: 50%;

    border:
        1px solid
        rgba(58,37,25,.10);

}


.bf-menu-section__image-wrap {

    position: relative;

    width: 100%;

    min-height: 420px;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border:
        2px solid
        var(--bf-brown);

    border-radius:
        48% 48% 8px 8px;

    background:

        linear-gradient(
            180deg,
            rgba(216,178,129,.18),
            rgba(247,239,228,.94)
        );

    box-shadow:
        var(--bf-shadow);

}


.bf-menu-section__image {

    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    max-height: 520px;

    object-fit: contain;

    object-position: center;

    transform: none;

    transition:
        opacity
        .35s
        ease;

}


.bf-menu-section:hover
.bf-menu-section__image {

    transform: none;

}


.bf-menu-section__image-wrap::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 52%,
            rgba(58,37,25,.58) 100%
        );

    pointer-events: none;

}


.bf-menu-section__image-wrap figcaption {

    position: absolute;

    z-index: 3;

    left: 25px;

    bottom: 23px;

    font-family:
        var(--font-script);

    font-size:
        clamp(
            25px,
            3vw,
            38px
        );

    line-height: 1.1;

    color:
        #fff7ec;

}


/* =========================================================
   MENU FOOTER
========================================================= */

.bf-full-menu-footer {

    width:
        min(
            calc(100% - 40px),
            1260px
        );

    margin:
        45px auto
        0;

    padding:
        40px
        25px
        48px;

    text-align: center;

    background:
        var(--bf-brown);

    color:
        var(--bf-paper);

}


.bf-full-menu-footer__ornament {

    width:
        min(
            100%,
            420px
        );

    margin:
        0 auto
        10px;

    display: flex;

    align-items: center;

    gap: 16px;

}


.bf-full-menu-footer__ornament span {

    flex: 1;

    height: 1px;

    background:
        rgba(247,239,228,.55);

}


.bf-full-menu-footer__ornament i {

    font-size: 20px;

    color:
        var(--bf-caramel);

}


.bf-full-menu-footer p {

    
    font-family:
        var(--font-display);

    font-size:
        clamp(
            40px,
            4vw,
            60px
        );

    color:
        #f2ca97;
text-transform: none;
}


.bf-full-menu-footer small {

    display: block;

    margin-top: 8px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .22em;

    color:
        rgba(247,239,228,.72);

}


/* =========================================================
   TRANSITION
========================================================= */

.bf-menu-transition {

    position: fixed;

    inset: 0;

    z-index: 999;

    display: grid;

    place-items: center;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    background:
        var(--bf-paper);

    transition:
        .4s ease;

}


.bf-menu-transition.is-active {

    visibility: visible;

    opacity: 1;

}


.bf-menu-transition__inner {


    width:
        min(
            80%,
            440px
        );

    display: flex;

    align-items: center;

    gap: 17px;

}


.bf-menu-transition__inner span {

    flex: 1;

    height: 2px;

    background:
        var(--bf-brown);

}


.bf-menu-transition__inner p {

    font-family:
        var(--font-script);

    font-size:
        clamp(
            38px,
            6vw,
            50px
        );

    color:
        #9b5d28;

    white-space: nowrap;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes bfFoodReveal {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes bfLogoGlow {

    0%,
    100% {
        transform: scale(.96);
        opacity: .62;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .bf-food-header {

        min-height: 118px;

    }


    .bf-food-header__brand {

        width:
            clamp(
                135px,
                20vw,
                180px
            );

    }


    .bf-food-header__logo {

        max-height: 98px;

    }


    .bf-menu-section--visual
    .bf-menu-section__inner {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(275px, .70fr);

        gap: 35px;

    }


    .bf-menu-section__heading h2 {

        font-size:
            clamp(
                34px,
                5vw,
                51px
            );

    }


    .bf-menu-section__icon {

        width: 58px;

        height: 58px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .bf-menu-cover {

        align-items: flex-start;

    }


    .bf-menu-cover::before {

        inset: 8px;

    }


    .bf-menu-cover::after {

        inset: 13px;

    }


    .bf-menu-cover__content {

        width: 100%;

        padding:
            65px
            25px
            68px;

    }


    .bf-menu-cover__logo-wrap {

        width:
            clamp(
                190px,
                58vw,
                235px
            );

    }


    .bf-menu-cover__title {

        font-size:
            clamp(
                49px,
                14vw,
                65px
            );

    }


    .bf-menu-cover__intro p {

        font-size: 43px;

    }


    .bf-menu-cover__choices {

        grid-template-columns: 1fr;

        max-width: 450px;

    }


    .bf-menu-choice {

        min-height: 105px;

    }


    /* FOOD HEADER */

    .bf-food-header {

        min-height: 104px;

        padding:
            7px
            14px;

    }


    .bf-food-header__back small {

        display: none;

    }


    .bf-food-header__brand {

        width:
            clamp(
                115px,
                32vw,
                155px
            );

        min-height: 84px;

    }


    .bf-food-header__logo {

        max-height: 88px;

    }


    .bf-food-header__switch {

        font-size: 10px;

    }


    /* INTRO */

    .bf-full-menu-intro {

        padding:
            40px
            18px
            15px;

    }


    .bf-full-menu-intro__eyebrow {

        font-size: 11px;

    }


    .bf-full-menu-intro__title-wrap {

        gap: 14px;

    }


    .bf-full-menu-intro h1 {

        font-size:
            clamp(
                44px,
                14vw,
                60px
            );

    }


    .bf-full-menu-intro p {

        font-size: 16px;

    }


    /* SECTIONS */

    .bf-menu-section {

        width:
            calc(100% - 24px);

        margin:
            22px auto;

        padding:
            28px
            19px;

    }


    .bf-menu-section--visual
    .bf-menu-section__inner {

        grid-template-columns: 1fr;

        gap: 28px;

    }


    .bf-menu-section--image-left
    .bf-menu-section__visual {

        order: 2;

    }


    .bf-menu-section__heading {

        grid-template-columns:
            54px
            minmax(0, 1fr);

        gap: 30px;

    }


    .bf-menu-section__icon {

        width: 54px;

        height: 54px;

    }


    .bf-menu-section__icon i {

        font-size: 24px;

    }


    .bf-menu-section__heading h2 {

        font-size:
            clamp(
                25px,
                3vw,
                30px
            );

    }


    .bf-menu-section__script {

        font-size:
            clamp(
                20px,
                7vw,
                25px
            );

    }


    .bf-menu-section__main-price {

        grid-column:
            1 / -1;

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding:
            10px
            14px;

        text-align: left;

    }


    .bf-menu-section__main-price strong {

        font-size: 24px;

    }


    .bf-menu-item {

        padding:
            13px 0;

    }


    .bf-menu-item__line h3 {

        font-size: 20px;

    }


    .bf-menu-item__line strong {

        font-size: 17px;

    }


    .bf-menu-item > p {

        font-size: 14px;

    }


    /* IMAGE */

    .bf-menu-section__visual {

        width:
            min(
                100%,
                430px
            );

    }


    .bf-menu-section__image-wrap {

        min-height: 340px;

        border-radius:
            42% 42% 7px 7px;

    }


    .bf-menu-section__image {

        width: 100%;

        height: auto;

        max-height: 420px;

        object-fit: contain;

        object-position: center;

    }


    .bf-menu-section__image-wrap figcaption {

        left: 21px;

        bottom: 19px;

        font-size: 29px;

    }


    .bf-menu-list--compact {

        grid-template-columns:
            1fr;

    }


    .bf-full-menu-footer {

        width:
            calc(100% - 24px);

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .bf-menu-cover__content {

        padding-inline: 20px;

    }


    .bf-food-header {

        min-height: 96px;

        padding-inline: 10px;

    }


    .bf-food-header__brand {

        width: 110px;

    }


    .bf-food-header__logo {

        max-height: 80px;

    }


    .bf-menu-section {

        padding-inline: 16px;

    }


    .bf-menu-section__heading {

        grid-template-columns:
            48px
            minmax(0, 1fr);

    }


    .bf-menu-section__icon {

        width: 48px;

        height: 48px;

    }


    .bf-menu-section__heading h2 {

        font-size: 28px;

    }




    .bf-menu-section__image-wrap {

        min-height: 300px;

    }


    .bf-menu-section__image {

        max-height: 370px;

    }


    .bf-menu-item__line {

        gap: 6px;

    }


    .bf-menu-item__line h3 {

        font-size: 18px;

    }


    .bf-menu-item__line strong {

        font-size: 16px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible {

    outline:
        3px solid
        var(--bf-peach);

    outline-offset: 4px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* =========================================================
   BUTTER FRY — DRINKS MENU
========================================================= */

.bf-drinks-menu {

    position: relative;

    display: none;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 84% 12%,
            rgba(216, 178, 129, .20),
            transparent 32%
        ),

        radial-gradient(
            circle at 8% 90%,
            rgba(218, 158, 117, .13),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #fbf6ef 0%,
            #f7efe4 55%,
            #efdeca 100%
        );

}


.bf-drinks-menu.is-active {

    display: block;

    animation:
        bfDrinksReveal
        .55s
        ease
        both;

}


/* =========================================================
   DRINKS HEADER
========================================================= */

.bf-drinks-header {

    position: sticky;

    top: 0;

    z-index: 100;

    min-height: 132px;

    padding:
        10px
        clamp(18px, 5vw, 70px);

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    background:
        rgba(247, 239, 228, .97);

    border-bottom:
        2px solid
        var(--bf-brown);

    box-shadow:
        0 7px 20px
        rgba(58, 37, 25, .06);

    backdrop-filter:
        blur(13px);

    -webkit-backdrop-filter:
        blur(13px);

}


/* =========================================================
   DRINKS HEADER CONTROLS
========================================================= */

.bf-drinks-header__back,
.bf-drinks-header__switch {

    cursor: pointer;

    background: transparent;

    color:
        var(--bf-brown);

    font-family:
        var(--font-body);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .11em;

}


.bf-drinks-header__back {

    justify-self: start;

    display: flex;

    align-items: center;

    gap: 10px;

}


.bf-drinks-header__back span {

    font-size: 25px;

}


.bf-drinks-header__switch {

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 10px;

}


.bf-drinks-header__switch span {

    font-size: 21px;

}


/* =========================================================
   LARGE DRINKS LOGO
========================================================= */

.bf-drinks-header__brand {

    position: relative;

    justify-self: center;

    width:
        clamp(
            150px,
            15vw,
            220px
        );

    min-height: 105px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.bf-drinks-header__logo {

    display: block;

    width: 100%;

    height: auto;

    max-height: 112px;

    object-fit: contain;

}


/* =========================================================
   COFFEE ADD-ON
========================================================= */

.bf-drinks-addon {

    width: 100%;

    margin-top: 25px;

    padding:
        17px
        19px;

    display: flex;

    align-items: center;

    gap: 15px;

    border:
        1.5px solid
        var(--bf-brown);

    background:
        rgba(216, 178, 129, .20);

}


.bf-drinks-addon__icon {

    width: 48px;

    height: 48px;

    flex:
        0 0 auto;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--bf-brown);

    color:
        var(--bf-paper);

}


.bf-drinks-addon__icon i {

    font-size: 21px;

}


.bf-drinks-addon small {

    display: block;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .18em;

    color:
        var(--bf-brown-muted);

}


.bf-drinks-addon strong {

    display: block;

    margin-top: 2px;

    font-family:
        var(--font-display);

    font-size: 22px;

    color:
        var(--bf-brown);

}


.bf-drinks-addon p {

    margin-top: 3px;

    font-family:
        var(--font-serif);

    font-size: 14px;

    color:
        var(--bf-brown-muted);

}


/* =========================================================
   SMOOTHIE FLAVOURS
========================================================= */

.bf-drinks-flavour-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        10px
        12px;

    margin:
        8px 0
        27px;

}


.bf-drinks-flavour-grid span {

    padding:
        11px
        14px;

    font-family:
        var(--font-display);

    font-size:
        17px;

    font-weight: 650;

    color:
        var(--bf-brown);

    background:
        rgba(216, 178, 129, .24);

    border:
        1px solid
        rgba(58, 37, 25, .20);

}


/* =========================================================
   REFRESHERS
========================================================= */

.bf-drinks-refreshers {

    margin-top:
        25px;

}


.bf-drinks-refreshers > h3 {

    margin-bottom:
        8px;

    font-family:
        var(--font-script);

    font-size:
        32px;

    font-weight: 400;

    color:
        #9b5d28;

}


/* =========================================================
   DRINKS ANIMATION
========================================================= */

@keyframes bfDrinksReveal {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .bf-drinks-header {

        min-height:
            118px;

    }


    .bf-drinks-header__brand {

        width:
            clamp(
                135px,
                20vw,
                180px
            );

        min-height:
            92px;

    }


    .bf-drinks-header__logo {

        max-height:
            98px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .bf-drinks-header {

        min-height:
            104px;

        padding:
            7px
            14px;

    }


    .bf-drinks-header__back small {

        display:
            none;

    }


    .bf-drinks-header__brand {

        width:
            clamp(
                115px,
                32vw,
                155px
            );

        min-height:
            84px;

    }


    .bf-drinks-header__logo {

        max-height:
            88px;

    }


    .bf-drinks-header__switch {

        font-size:
            10px;

    }


    .bf-drinks-flavour-grid {

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .bf-drinks-header {

        min-height:
            96px;

        padding-inline:
            10px;

    }


    .bf-drinks-header__brand {

        width:
            110px;

    }


    .bf-drinks-header__logo {

        max-height:
            80px;

    }

}

.bf-menu-section__icon {
    width: 67px;
    height: 67px;

    display: grid;
    place-items: center;

    border: 1.5px solid var(--bf-brown);

    background:
        rgba(216, 178, 129, .16);

    color: var(--bf-brown);

    border-radius: 50%;

    transition:
        transform .35s ease,
        background .35s ease;
}

.bf-menu-section__icon i {
    font-size: 27px;
    line-height: 1;
}

.bf-menu-section:hover
.bf-menu-section__icon {
    transform: rotate(-4deg) scale(1.05);

    background:
        rgba(218, 158, 117, .25);
}

.bf-menu-section__icon svg {
    display: block;
    width: 28px;
    height: 28px;
}

.bf-menu-section__icon svg {
    display: block;

    width: 30px;
    height: 30px;

    color: var(--bf-brown);

    stroke-linecap: round;
    stroke-linejoin: round;
}


.bf-menu-section__main-price {display: none;}

/* =========================================================
   BUTTER FRY
   PREMIUM MENU FOOTER
========================================================= */

.bf-full-menu-footer {

    position: relative;

    width:
        min(
            calc(100% - 40px),
            1260px
        );

    margin:
        50px auto
        0;

    padding:
        clamp(42px, 6vw, 70px)
        clamp(22px, 5vw, 60px);

    overflow: hidden;

    text-align: center;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(216,178,129,.20),
            transparent 42%
        ),

        linear-gradient(
            145deg,
            #3a2519 0%,
            #4a2e1f 48%,
            #3a2519 100%
        );

    color:
        var(--bf-paper);

    border-top:
        1px solid
        rgba(242,202,151,.34);

}


/* =========================================================
   INNER
========================================================= */

.bf-full-menu-footer__inner {

    position: relative;

    z-index: 2;

    width:
        min(
            100%,
            900px
        );

    margin:
        0 auto;

}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.bf-full-menu-footer__ornament {

    width:
        min(
            100%,
            520px
        );

    margin:
        0 auto
        20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

}


.bf-full-menu-footer__ornament > span {

    flex: 1;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(242,202,151,.72)
        );

}


.bf-full-menu-footer__ornament > span:last-child {

    background:

        linear-gradient(
            90deg,
            rgba(242,202,151,.72),
            transparent
        );

}


/* =========================================================
   FOOTER ICON
========================================================= */

.bf-full-menu-footer__icon {

    width: 46px;

    height: 46px;

    flex:
        0 0 auto;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(242,202,151,.55);

    background:
        rgba(242,202,151,.08);

    color:
        #f2ca97;

}


.bf-full-menu-footer__icon i {

    font-size: 19px;

    line-height: 1;

}


/* =========================================================
   EYEBROW
========================================================= */

.bf-full-menu-footer__eyebrow {

    margin: 0;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            10px,
            1.2vw,
            12px
        );

    font-weight: 700;

    letter-spacing:
        normal;

    color:
        rgba(247,239,228,.68);

}


/* =========================================================
   HEADLINE
========================================================= */

.bf-full-menu-footer__headline {

    margin:
        12px auto
        20px;

    font-family:
        var(--font-script);

    font-size:
        clamp(
            25px,
            2.6vw,
            30px
        );

    line-height:
        1.2;

    font-weight:
        400;

    color:
        #f2ca97;

}


/* =========================================================
   META / LOCATION
========================================================= */

.bf-full-menu-footer__meta {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        10px
        14px;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            10px,
            1.2vw,
            12px
        );

    font-weight:
        600;

    letter-spacing:
        .18em;

    color:
        rgba(247,239,228,.72);

}


.bf-full-menu-footer__meta i {

    width: 5px;

    height: 5px;

    flex:
        0 0 auto;

    border-radius: 50%;

    background:
        #d8b281;

}


/* =========================================================
   SUBTLE FOOTER TEXTURE
========================================================= */

.bf-full-menu-footer::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .05;

    background-image:

        repeating-radial-gradient(
            circle at 0 0,
            rgba(255,255,255,.18) 0,
            rgba(255,255,255,.18) .7px,
            transparent .7px,
            transparent 5px
        );

    background-size:
        8px 8px;

}


/* =========================================================
   INNER BORDER
========================================================= */

.bf-full-menu-footer::after {

    content: "";

    position: absolute;

    inset: 10px;

    pointer-events: none;

    border:
        1px solid
        rgba(242,202,151,.16);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .bf-full-menu-footer {

        width:
            calc(100% - 30px);

        margin-top:
            40px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .bf-full-menu-footer {

        width:
            calc(100% - 24px);

        margin-top:
            34px;

        padding:
            38px
            18px;

    }


    .bf-full-menu-footer__ornament {

        width:
            min(
                100%,
                320px
            );

        gap:
            12px;

    }


    .bf-full-menu-footer__icon {

        width:
            40px;

        height:
            40px;

    }


    .bf-full-menu-footer__headline {

        max-width:
            320px;

        margin-inline:
            auto;

    }


    .bf-full-menu-footer__meta {

        gap:
            8px
            10px;

        letter-spacing:
            .14em;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .bf-full-menu-footer {

        padding:
            32px
            15px;

    }


    .bf-full-menu-footer__headline {

        font-size:
            17px;

    }


    .bf-full-menu-footer__meta {

        font-size:
            9px;

    }

}