/* :root{
    --navbar_height: var(--navbar_height);
} */





/*
====================================== CALL BUTTON SECTION ======================================
*/



#call_order_popup_toggle{
    position: fixed;
    bottom: 1rem;
    right: 1rem;

    display: flex;   /* or: display: flex; */
    width: auto;
    height: auto;
    background-color: red;
    flex-flow: column;
    z-index: 9001;
}


/* ----------------- */



#call_order_popup_toggle {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    background: rgba(0,0,0,0.06);
    background: transparent;
    /* backdrop-filter: blur(6px); */
    padding: 0.75rem;
    /* border-radius: 16px; */
    /* border: 1px solid rgba(0,0,0,0.12); */

    /* box-shadow: 0 6px 20px rgba(0,0,0,0.25); */

    z-index: 9001;
}

/* .call_order_popup_toggle {
    pointer-events: none !important; /* call_order_popup_toggle ignores all mouse events * / 
}

.call_order_popup_toggle > * {
    pointer-events: auto !important; /* children regain normal click behavior * / 
} */

#call_order_popup_toggle button {
    width: calc(4vh + 2.5vw);
    height: auto;
    aspect-ratio: 1;

    background: var(--mt-orange-accent);
    color: var(--mt-cream);

    border: color-mix(in srgb, var(--mt-charcoal) 70%, transparent);
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75vh;

    gap: 0.25rem;

    font-size: 0.85rem;
    font-weight: 600;

    box-shadow: 7px 10px 20px rgba(0,0,0,0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


#call_order_popup_toggle button:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 22px rgba(0,0,0,0.35);
    background: var(--mt-green-accent);
    border-color: var(--mt-cream);
    border-width: 3px;
    border-style: solid;
}


.fab_icon {
    display: flex;
    align-items: center;
    justify-content: center;

    
}

.fab_icon svg {
    width: 4.5vh;
    height: 4.5vh;
}


#call_button {
    background: var(--mt-green-primary);
}




@media(orientation:portrait){
    #call_order_popup_toggle {
        bottom: 0.5vw;
        right: 0.5vw;
        /*
        position: fixed;

        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        background: rgba(0,0,0,0.06);
        background: transparent;
        /* backdrop-filter: blur(6px); *####/
        padding: 0.75rem;
        /* border-radius: 16px; *####/
        /* border: 1px solid rgba(0,0,0,0.12); *####/

        /* box-shadow: 0 6px 20px rgba(0,0,0,0.25); *####/

        z-index: 9001;
        */
    }

    #call_order_popup_toggle button {
        width: 17.5vw;
        border: color-mix(in srgb, var(--mt-charcoal) 60%, transparent);
        border-width: 2px;
        border-style: solid;
        box-shadow: 7px 10px 10px rgba(0,0,0,0.8);
        /*
        height: auto;
        aspect-ratio: 1;

        background: var(--mt-orange-accent);
        color: var(--mt-cream);

        border-radius: 50%;
        cursor: pointer;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.75vh;

        gap: 0.25rem;

        font-size: 0.85rem;
        font-weight: 600;

        transition: transform 0.2s ease, box-shadow 0.2s ease;
        */
    }
}




/*
====================================== HOME SECTION ======================================
*/



/*

*/
#home {
    width: 100vw;
    height: 80vh;
    /* background-color: cyan; */
    
    display: flex;
}

#home_left_side{
    height:100%;
    width: 55%;
    /* background-color: pink; */
}
    





/*  --------------------------------  */


/* 

*/

#home_right_side{
    height:100%;
    min-width:fit-content;
    width: 45%;
    /* background-color: lime; */
    position: relative;
}





#home_image_container { 
    width: 57%;
    height: auto;
    aspect-ratio: 1;
    left: 50%;
    top:45%;
    transform: translate(-50%, -50%);
    position: absolute;

}

@keyframes floatUpDown {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(2.5%); }   /* down */
    50%  { transform: translateY(0%); }  /* up past origin */
    75%  { transform: translateY(-2.5%); }  /* up past origin */
    100% { transform: translateY(0); }     /* settle back */
}

#home_image_container > img {
    width: 100%;
    height: auto;
    animation: floatUpDown 6s linear infinite;
    
}




@media(orientation: portrait){
    #home_image_container > img {
        width: 100%;
        height: auto;
        /* animation: floatUpDown_mobile 4s cubic-bezier(.68, -0.6, .32, 1.6) infinite; */
        animation: floatUpDown 4s linear infinite;

    }
}


@keyframes floatUpDown_mobile {
    /* ????? */
}





/*
====================================== NAVBAR SECTION ======================================
*/



.navbar_style {
    position: sticky;
    top: 0;
    width: 100vw;
    height: var(--navbar_height);
    min-height: fit-content;

    background: rgb(255, 255, 255);
    padding: 1.5vh 6vw;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    z-index: 9000;
}


.navbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    flex: 1;
    height: var(--navbar_height);
    min-height: fit-content;
    padding-bottom: calc(var(--navbar_height) /8);
    
    
    position: relative;
    left:50%;
    transform: translateX(-50%);
}

.navbar a {
    position: relative;
    overflow: hidden;

    min-width: 8vw;

    padding: 0.25vh 1.5vw;

    font-family: "angelone";
    font-size: calc(0.8rem + 0.5vh + 0.5vw);
    font-weight: 600;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.45);
    letter-spacing: 0.05rem;

    background: transparent;
    border: none;
    border-bottom: 2px solid var(--mt-orange-accent);
    border-top: 2px solid rgba(214, 90, 42, 0.04);

    cursor: pointer;
    text-align: center;

    transition:
        transform 0.25s ease,
        margin 0.25s ease;
}


.navbar a:hover {
    transform: scale(1.18);
    margin: 0 1vw;
    padding-bottom:.25vh;
}


.navbar a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 0%;

    background:
        linear-gradient(
            to right,
            rgba(214, 90, 42, 0) 0%,
            rgba(214, 90, 42, 0.15) 50%,
            rgba(214, 90, 42, 0) 100%
        ),
        linear-gradient(
            to top,
            rgba(214, 90, 42, 0.2) 0%,
            rgba(214, 90, 42, 0) 90%
        );

    background-blend-mode: multiply;

    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* pointer-events: none; */
    z-index: -1;
}

.navbar a:hover::after {
    height: 100%;
}


.logo a {
    font-family: "angelone";
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--mt-charcoal);
    text-decoration: none;
}







@media(orientation:portrait){
    .navbar_style {
        padding: 1.5vh 4vw;
        /*
         position: sticky;
        top: 0;
        width: 100vw;
        height: var(--navbar_height);
        min-height: fit-content;

        background: rgb(255, 255, 255);

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        z-index: 9000;
        */
    }

    .navbar {
        justify-content: space-between;
        /*
         display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2vw;
        flex: 1;
        height: var(--navbar_height);
        min-height: fit-content;
        padding-bottom: calc(var(--navbar_height) /8);
        */
    }

    .navbar a {
        font-size: calc(1rem + 0.5vh + 0.5vw);
        /*
         position: relative;
        overflow: hidden;

        min-width: 8vw;

        padding: 0.25vh 1.5vw;

        font-family: "angelone";
        font-weight: 600;

        background: transparent;
        border: none;
        border-bottom: 2px solid var(--mt-orange-accent);
        border-top: 2px solid rgba(214, 90, 42, 0.04);

        cursor: pointer;
        text-align: center;

        transition:
            transform 0.25s ease,
            margin 0.25s ease;
        */
    }
}





/*
====================================== HOME SECTION ======================================
*/

/* ===== HERO SECTION (DARK GREEN VERSION) ===== */

#home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 4rem 6rem; */

  /* background-color: antiquewhite; */
  background-color: var(--mt-cream);
  width: 100vw;
    height: 80vh;
}

   

#home_left_side {
    height:100%;
    width: 55%;
    /* max-width: 50%; */
    background: var(--mt-green-primary);
    
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    /*
    padding: 4rem 6rem; */

    padding-left: calc(3vh + 4vw);
}

#home_left_side > * {
    /* display: flex; */
    justify-content: left;
    /* flex-direction: column; */
    text-align: left;

}

/* H1: white for max contrast */
#home_left_side h1 {
  font-size: calc(0.75rem + 0.25vh + 2vw);
  line-height: 1.3;
  margin-bottom: 1vh;
  /* color: var(--mt-cream); */
  color: var(--mt-orange-primary);
  font-family: "angelone";
  font-style: normal;
  font-weight: 300;
}
#home_left_side h1:nth-child(1){
    margin-bottom:7vh;
}
#home_left_side h1 em {
    /* scale: 1.5; */
    font-size: calc(0.75rem + 0.25vh + 6.25vw);
    /* font-size: calc(4rem + 3vw); */
    font-style: normal;
    font-weight: 1000;
    white-space: nowrap;
}

/* Subheader: match the sign lettering color */
#home_left_side h3 {
  /* font-size: 1.2rem; */
  font-size: calc(0.2rem + 0.1vh + 1vw);
  line-height: 1.45;
  /* margin-bottom: 2rem; */
  color: var(--mt-orange-primary);
  font-family: var(--default-font);
  margin-bottom: 5vh;

}

/* CTA Button: sharp corners, modern, pops on dark green */
#home_left_side .c2a_button_base {
  background: var(--mt-orange-accent);
  color: var(--mt-cream);
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 4px; /* sharper */
  /* font-size: 1.1rem; */
  font-size: calc(0.2rem + 0.2vh + 1.25vw);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;


  
  max-width: fit-content;
  text-align: center;
  height: fit-content;
}

#home_left_side .c2a_button_base:hover {
  background: var(--mt-orange-accent);
  box-shadow: inset 0 -6px 14px rgba(255, 251, 247, 0.25);
  transform: translateY(-2px);
}

#home_right_side {
  /* max-width: 45%; */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* #home_image_container {
  width: 100%;
  max-width: 480px;
} */

#home_image_container img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25));
}


@media(orientation:portrait){
    #home_left_side{
        width: 65%;
        /* 
        height:100%;
        */
        padding-left: calc(2vw); 
    } 
    #home_left_side {
        
        display: flex;
        justify-content: flex-start;
        padding-top: calc(12vw + 4vh)
        /* 
        background: var(--mt-green-primary);
        
        flex-direction: column;
        align-items: left;

        */
    }
    

    #home_left_side h1 {
        font-size: calc(1rem + 0.25vh + 2vw);
        line-height: 1.55;
        /*
        margin-bottom: 1vh;
        /* color: var(--mt-cream); * /
        color: var(--mt-orange-primary);
        font-family: "angelone";
        font-style: normal;
        font-weight: 300;
        */
    }
    #home_left_side h1:nth-child(1){
        margin-bottom:calc(3vw + 1vh);
    }
    #home_left_side h1 em {
        font-size: calc(1.8rem + 0.25vh + 6.25vw);
    /* 
    font-style: normal;
    font-weight: 1000;
    white-space: nowrap;
    */
    }

    #home_right_side{
        width: 35%;
        /*
         height:100%;
        min-width:fit-content;
        /* background-color: lime; * /
        position: relative;
        */
    } 
    #home_image_container { 
        width: 85%;
        padding: 0;
        /*
        height: auto;
        aspect-ratio: 1;
        left: 50%;
        top:45%;
        transform: translate(-50%, -50%);
        position: absolute;

        */
    } 

    #home_left_side h3 {
        font-size: calc(0.5rem + 0.1vh + 1vw);
        padding-right: 3vw;
    /* 
    line-height: 1.45;
    color: var(--mt-orange-primary);
    font-family: var(--default-font);
    margin-bottom: 5vh;
    */

    }
    #home_left_side > .c2a_button_base {
        font-size: calc(0.8rem + 0.2vh + 1.25vw);
        align-self: center;
    /*
     background: var(--mt-orange-accent);
    color: var(--mt-cream);
    padding: 0.9rem 2rem;
    border: none;
    border-radius: 4px; 
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;


    
    max-width: fit-content;
    text-align: center;
    height: fit-content;
    */
    } 
}





 





/*  --------------------------------  */


/* 

*/

#home_right_side{
    height:100%;
    min-width:fit-content;
    width: 45%;
    /* background-color: lime; */
    position: relative;
}





#home_image_container { 
    width: 57%;
    height: auto;
    aspect-ratio: 1;
    left: 50%;
    top:45%;
    transform: translate(-50%, -50%);
    position: absolute;

}

@keyframes floatUpDown {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(2.5%); }   /* down */
    50%  { transform: translateY(0%); }  /* up past origin */
    75%  { transform: translateY(-2.5%); }  /* up past origin */
    100% { transform: translateY(0); }     /* settle back */
}

#home_image_container > img {
    width: 100%;
    height: auto;
    animation: floatUpDown 6s linear infinite;
    
}




@keyframes floatUpDown_mobile {
    /* ????? */
}



@media (orientation:portrait) {
    

    #home_image_container { 
        width: 90%;
        /* 
        height: auto;
        aspect-ratio: 1;
        left: 50%;
        top:45%;
        transform: translate(-50%, -50%);
        position: absolute;

        */
    } 
}

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

#menu {
    width:100vw;
    min-height: 100vh;
    height: fit-content;
}









#menu_section_selector {
    width: 100%;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* background-color: red; */

    padding: 0vh 2vw 1vh;
    padding-top: calc(8vh + 1vw);
    
}

#menu_section_selector > button {
    position: relative; /* required for the pseudo-element */
    overflow: hidden;   /* hides the gradient as it animates upward */


    min-width:8vw;
    min-height:6vh;

    margin: 0 0.4vw;

    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--mt-orange-accent);
    border-top: 2px solid rgba(214, 90, 42, 0.04);

     cursor: pointer;


     font-size: calc(.8rem + 0.5vh + 0.5vw);
     font-weight: 600;
     /* color: rgba(0, 0, 0, 0.6); */
    font-family: "angelone";

    
}

#menu_section_selector > button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 0%;

    background:
        /* horizontal fade (softens left/right edges) */
        linear-gradient(
            to right,
            rgba(214, 90, 42, 0) 0%,
            rgba(214, 90, 42, 0.15) 50%,
            rgba(214, 90, 42, 0) 100%
        ),
        /* vertical fade (bottom → top) */
        linear-gradient(
            to top,
            rgba(214, 90, 42, 0.2) 0%,
            rgba(214, 90, 42, 0) 90%
        );

    background-blend-mode: multiply;

    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* pointer-events: none; */
    z-index: -1;

}

#menu_section_selector > button:hover::after {
    height: 100%; /* grows upward */
}











.menu_header_container {
    /* background-color: orange; */
    padding: 2vh 0 4vh;
}

.menu_header_container > h1 {
    text-align: center;
    font-family: "angelone";
    font-size: calc(1.25rem + 1vh + 2.2vw);
    text-shadow: 0 2px 2px rgba(0,0,0,0.55);
}
.menu_header_container > p {
    width: 100%;
    text-align: center;
    font-size: calc(0.5rem + 0.5vh + 0.5vw);
    font-weight: 600;

    letter-spacing: 0.015em;
    color: rgba(0,0,0,0.95);
    /* text-shadow: 0 2px 4px rgba(0,0,0,0.35); */
}
















#menu_item_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap:2%;
    align-items: center;
    padding: 0 10%;
}

.menu_item {
    max-width:30%;
    width: fit-content;
    margin-bottom: 2vh;
    padding: 2vh 1vw; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}




.menu_item_image_container {
    width:65%;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: 3vh;
    object-fit: contain;
    overflow: hidden;
    display:none;
}

.menu_item_image_container > img {
    width: 100%;
    height: auto;
    object-fit: contain;
}



.menu_item_info_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
}
.menu_item_info_container > *{
    margin-bottom: 2vh;
}
.menu_item_name {
    width: 100%;
    text-align: center;
    font-size: calc(.4rem + .3vh + 1.5vw);
	font-weight: 800;
	margin-bottom: 5px;
	font-family: var(--default-font);
}
.menu_item_description {
    width: 100%;
    font-size: calc(0.5rem + 0.5vh + 0.5vw);
    text-align: center;
    margin-bottom:calc(2vh + .02vw);

    letter-spacing: 0.025rem;
    word-spacing: 0.07rem;

    line-height: 1.65rem;
    line-height: calc(0.65rem + 1vh + 0.5vw);
    min-height: calc(1.4rem * 4.5);
    min-width: 30ch;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;

}
/* .add_to_order_btn {
    
    
    
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    padding: 0.5vh 1vw;
    
    font-size: 1rem
} */


/* .add_to_order_btn,
.add_to_order_btn > p {
    font-size: 1rem;
} */



.add_to_order_btn {

    width: fit-content;

    background: var(--mt-orange-accent);
    color: var(--mt-cream);

    border: none;
    border-radius: 1px;
    font-size: calc(0.6rem + 0.25vh + 0.25vw);
    font-weight: 600;
    white-space: normal;
    line-height: 1.15;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.9vh 3vw 1.25vh;

    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    justify-self: flex-end
}

.add_to_order_btn > span {
    font-size: calc(0.85rem + 1.1vh + 0.7vw);
}

.add_to_order_btn:hover {
    background: var(--mt-orange-accent);
    box-shadow: inset 0 -6px 14px rgba(255, 251, 247, 0.25);
    transform: translateY(-2px);
}

.menu_item_price {
    font-weight: 700;
}



@media(orientation:portrait){
    .menu_header_container > h1 {
        font-size: calc(2rem + 1vh + 2.2vw);
        /* 
        text-align: center;
        font-family: "angelone";
        text-shadow: 0 2px 2px rgba(0,0,0,0.55);
         */
    }

    /* --------- Dynamic menu --------- */
    #menu_item_container {
        justify-content: center;
        gap:8%;
        padding: 0 1vw;
        /* 
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        */
    }
    .menu_item {
        max-width:46%;
        margin-bottom: 6vh;
        /* border-width: 1px;
        border: solid rgba(0,0,0,1); */
        /* 
        width: fit-content;
        padding: 2vh 1vw; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
         */
    }
    .menu_item_image_container {
        width:95%;
        margin-bottom: 1vh;
    /*  
        height: auto;
        aspect-ratio: 1;
        object-fit: contain;
        overflow: hidden;
        */
    } 
    .menu_item_name {
        font-size: calc(1rem + .3vh + 1.5vw);
        white-space: nowrap;
        /*
         width: 100%;
        text-align: center;
        font-weight: 800;
        margin-bottom: 5px;
        font-family: var(--default-font);
        */
    }
    .menu_item_description {
        font-size: calc(0.5rem + 0.5vh + 0.5vw);
        font-weight: 600;
        min-width: 18ch;
        -webkit-line-clamp: 5;
        min-height: calc(1.4rem * 5);
        margin-bottom:0.1vh;
        /*
        width: 100%;
        text-align: center;

        letter-spacing: 0.025rem;
        word-spacing: 0.07rem;

        line-height: 1.65rem;
        line-height: calc(0.65rem + 1vh + 0.5vw);
        display: -webkit-box;
        
        -webkit-box-orient: vertical;
        overflow: hidden;
        */

    }
    #menu_section_selector > button {
        border-bottom: 3px solid var(--mt-orange-accent);
        border-top: 2px solid color-mix(in srgb, var(--mt-orange-accent) 25%, transparent);
        margin: 0 2vw;
        min-width:35vw;
        min-height:7vh;
        /* 
        position: relative;
        overflow: hidden;




        background-color: transparent;
        border: none;

        cursor: pointer;


        font-size: calc(.8rem + 0.5vh + 0.5vw);
        font-weight: 600;
        font-family: "angelone";
        */
    }
}



/*
====================================== CART MANAGEMENT SECTION ======================================
*/


/* .cart_modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;




    position: fixed;
    background-color: yellow;
    width: 80vw;
    height: 80vh;

    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
} */

.cart_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 60vw;
    max-width: 700px;
    height: auto;
    max-height: 80vh;

    background: var(--mt-cream);
    border: 2px solid var(--mt-orange-primary);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);

    display: flex;
    flex-direction: column;

    padding: 2rem;
    overflow-y: auto;
    z-index: 999;
}



/* #cart_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 60vw;
    max-width: 700px;
    height: auto;
    max-height: 80vh;

    background: var(--mt-cream);
    border: 2px solid var(--mt-orange-primary);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);

    display: flex;
    flex-direction: column;

    padding: 2rem;
    overflow-y: auto;
    z-index: 999;
} */




#cart_item_header {
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
}

#cart_item_header h1 {
    font-family: var(--font-amatic);
    font-size: 3rem;
    color: var(--mt-charcoal);
}





.cart_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    background: rgba(0,0,0,0.04);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
}





.cart_item_name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mt-charcoal);
    flex: 1;
}

.cart_item_price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mt-orange-primary);
    margin: 0 1rem;
}






.remove_from_order_btn {
    background: var(--mt-orange-primary);
    color: var(--mt-cream);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.15s ease;
}

.remove_from_order_btn:hover {
    background: var(--mt-orange-deep);
    transform: translateY(-2px);
}




#cart_item_footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    margin-top: auto;
    padding-top: 1rem;
    border-top: 2px solid rgba(0,0,0,0.1);
}

#cart_item_footer .total {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mt-charcoal);
}

#cart_item_footer button {
    background: var(--mt-green-primary);
    color: var(--mt-cream);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.15s ease;
}

#cart_item_footer button:hover {
    background: var(--mt-green-accent);
    transform: translateY(-2px);
}




/*
====================================== PAYMENTS SECTION ======================================
*/









#card_number_element,
#card_expiry_element,
#card_cvc_element {
    /* width: 100%;
    padding: 14px;
    border: 1px solid #bbb;
    border-radius: 8px;
    margin-bottom: 14px;

    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);

    display: flex;
    align-items: center; */





    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 12px;
}   


.payment_modal {
     /* position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%); 

    width: 80vw;
    max-width: 700px;
    height: 80vh;

    background: #ffffff;
    border: 2px solid #d65a2a;
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 2rem;
    overflow-y: auto;

    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    z-index: 999; */












    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;




    position: fixed;
    /* background-color: forestgreen; */
    width: 80vw;
    height: 80vh;

    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
}











/*
====================================== GOOGLE_INFO SECTION ======================================
*/



#google_info{
    width:100%;
    min-height:calc(100vh - var(--navbar_height));
    display: flex;
    flex-direction: row;
    background-color: var(--mt-cream);


    overflow: hidden;
}

#directions,
#reviews{
    padding-top: calc(var(--navbar_height) + 1vh);
}


@media(orientation:portrait){
    #google_info{
        flex-direction: column;
        min-height:calc(100vh - var(--navbar_height));
        height: fit-content;
    }
}




/* ---------- DIRECTIONS SECTION ---------- */




#directions{
    min-width:fit-content;
    width:35%;
    height:100%;
    background-color: var(--mt-cream);
    position: relative;

    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.3);

    z-index: 200;
    
}



#directions > div:nth-child(1) {
    width: 100%;
    height: 99%;
    
    /* aspect-ratio: 1; */
    
    /* max-height: 75%; */
    /* max-width: 80vw; */
    
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);

    /* background-color:red; */
}








#map_iframe_container {
    position:relative;
    height:90%;
    width:90%;
    left:50%;
    /* margin-top: 50%; */
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* overflow:hidden; */
    /* background-color: orange; */
}

#map_directions_button {
    background-color: var(--mt-orange-accent);

    font-family: "angelone";
    font-size: calc(0.8rem + 0.5vh + 0.5vw);
    font-weight: 1000;
    color: white;
    
    position:absolute;
    top:0%;
    width:100%;
    height:11%;
    box-shadow: -5px 6px 10px rgba(0,0,0,0.2);

    border-radius: 2px;
    border: none;

    text-shadow: 1px 1px 2px rgba(255,255,255,1);
    letter-spacing: 0.085em;
    word-spacing: 0.25em;;


}


#map_directions_button:hover {
    background: var(--mt-orange-accent);
    box-shadow: inset 0 -6px 14px rgba(255, 251, 247, 0.25),
                -8px 8px 15px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

#directions iframe {
    position:absolute;
    top:15%;
    left:0;
    width:100%;
    /* height:80%; */
    height:auto;
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, var(--mt-orange-primary) 10%, transparent);
    border-radius: 2px;
    box-shadow: -5px 6px 10px rgba(0,0,0,0.2);
}




#directions > div:nth-child(2) {
    visibility: hidden;
}





@media(orientation:portrait){
    #directions{
        width:100%;
        min-height:calc(100vw + var(--navbar_height));
        /* 

        min-width:fit-content;
        height:100%;
        background-color: var(--mt-cream);
        position: relative;

        box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.3);

        z-index: 200;
         */
    }
}





/*
-------------------------------------- overall_review_container SECTION --------------------------------------
*/


#reviews {
    width:65%;
    height: 100%;
    background-color: var(--mt-green-primary);

    position: relative;
    right: 0;

    z-index: 2;

}





#overall_review_container {
    height: 45%;
    width: auto;
    aspect-ratio: 1;
    background-color: var(--mt-charcoal);

    border-radius: 50%;
    border: 0.5vh solid var(--mt-orange-primary);

    position: relative;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    margin-top: 4vh;
    
    /* --- SHADOW CONTROLS --- */
    --inner-shadow-size: 8vh;   /* distance from edge inward */
    --inner-shadow-strength: 37%;

    --outer-shadow-size: 5px;   /* distance outward */
    --outer-shadow-strength: 45%;

    box-shadow:
        /* INNER RADIAL SHADOW */
        inset 0 0 var(--inner-shadow-size)
            color-mix(in srgb, var(--mt-orange-primary) var(--inner-shadow-strength), transparent),

        /* OUTER RADIAL SHADOW / GLOW */
        0 0 var(--outer-shadow-size)
            /* rgba(255, 255, 255, var(--outer-shadow-strength)); */
            color-mix(in srgb, var(--mt-orange-primary) var(--outer-shadow-strength), transparent);
    
            
    z-index:10;
}


#reviews_rating_total {
    visibility: inherit;
    margin-top: 7vh;
    /* font-size: 8.5rem; */
    font-size: calc(4.5rem + 3vh + 2vw);
    color:var(--mt-orange-accent);
    line-height: 1;

    text-shadow: 1px 1px 2px rgb(254, 214, 0);
    letter-spacing: 0.085em;
    
}


 

#star_container_all_reviews{
    min-height: 10px;
    min-width: 30%;
    height: 5.5vh;

    margin-top: 3vh;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
}

/* STAR WITH HARD OUTLINE */
#star_container_all_reviews .star{
    height: 100%;
    aspect-ratio: 1;
    position: relative;
}

/* FILL LAYER */
#star_container_all_reviews .star::before{
    content: "";
    position: absolute;
    inset: 0;

    background-color: black;

    mask-image: url("/img/star-shape.png");
    -webkit-mask-image: url("/img/star-shape.png");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

/* STROKE LAYER */
#star_container_all_reviews .star::after{
    content: "";
    position: absolute;
    inset: 2px; /* stroke thickness */

    background-color: gold; /* stroke color */

    mask-image: url("/img/star-shape.png");
    -webkit-mask-image: url("/img/star-shape.png");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    /* invert mask so only the border shows */
    mask-composite: exclude;
    -webkit-mask-composite: xor;

    z-index: 1;
}

/* scaling */
#star_container_all_reviews .star:nth-child(2),
#star_container_all_reviews .star:nth-child(4){
    transform: scale(1.3);
    z-index: 2;
}

#star_container_all_reviews .star:nth-child(3){
    transform: scale(1.7);
    z-index:3;
}


/* scaling */
#star_container_all_reviews .star:nth-child(2),
#star_container_all_reviews .star:nth-child(4){
    transform: scale(1.3);
}

#star_container_all_reviews .star:nth-child(3){
    transform: scale(1.7);
}




#review_count_display {
    font-size: 1rem;
    font-weight: 600;
    position: relative;
    margin-top: auto;
    margin-bottom: 12%;
    color: var(--mt-orange-accent);
    /* justify-self: last baseline; */
}







@media(orientation:portrait){
    #reviews {
        width:100%;
        height: calc(100vh + var(--navbar_height));
        /* 
        background-color: var(--mt-green-primary);

        position: relative;
        right: 0;

        z-index: 2;
        */
    }

    #overall_review_container {
        height: calc(15vh + 40vw);;
        /*
        width: auto;
        aspect-ratio: 1;
        background-color: var(--mt-charcoal);

        border-radius: 50%;
        border: 0.5vh solid var(--mt-orange-primary);

        position: relative;
        left: 50%;
        transform: translate(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        margin-top: 4vh;
        
        /* --- SHADOW CONTROLS --- * /
        --inner-shadow-size: 8vh;   /* distance from edge inward * /
        --inner-shadow-strength: 37%;

        --outer-shadow-size: 5px;   /* distance outward * /
        --outer-shadow-strength: 45%;

        box-shadow:
            /* INNER RADIAL SHADOW * /
            inset 0 0 var(--inner-shadow-size)
                color-mix(in srgb, var(--mt-orange-primary) var(--inner-shadow-strength), transparent),

            /* OUTER RADIAL SHADOW / GLOW * /
            0 0 var(--outer-shadow-size)
                /* rgba(255, 255, 255, var(--outer-shadow-strength)); * /
                color-mix(in srgb, var(--mt-orange-primary) var(--outer-shadow-strength), transparent);
        
                
        z-index:10;
        */
    }

    #reviews_rating_total {
        font-size: calc(3.5rem + 4vw + 4vh);
        margin-top: calc(4vw + 3vh);
    /*
     visibility: inherit;
    color:var(--mt-orange-accent);
    line-height: 1;

    text-shadow: 1px 1px 2px rgb(254, 214, 0);
    letter-spacing: 0.085em;
    
    */
} 

    #star_container_all_reviews{
        height: calc(1.75vh + 4vw);
        /*
         min-height: 10px;
        min-width: 30%;

        margin-top: 3vh;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.3rem;
        */
    }
}











/*
-------------------------------------- REVIEW CAROUSEL SECTION --------------------------------------
*/






/* --------------------------------------
   REVIEW CAROUSEL — MATCHED TO TOP HALF
-------------------------------------- */

#individual_review_carousel_container {
    position: relative;
    height: 55%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: var(--mt-green-primary);
    z-index: 1;

    overflow:hidden;
}

/* REVIEW CARD */
.review_widget,
.review_widget_template {
    width: 60%;
    height: 70%;
    background-color: var(--mt-cream);
    border: 3px solid var(--mt-orange-primary);
    border-radius: 2px;

    padding: 1vh 2vw;

    position: absolute;
    top: 12%;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* gap: 1.2rem; */

    /* SHADOWS — MATCH OVERALL REVIEW CIRCLE */
    /* --inner-shadow-size: 18px;
    --inner-shadow-strength: 90%; */
    /* --outer-shadow-size: 22px; */
    --outer-shadow-strength: 40%;

    box-shadow:
        /* inset 0 0 var(--inner-shadow-size)
            color-mix(in srgb, var(--mt-orange-primary) var(--inner-shadow-strength), transparent), */
        0 5px 10px var(--outer-shadow-size)
            color-mix(in srgb, var(--mt-orange-primary) var(--outer-shadow-strength), transparent);
    
    box-shadow: 1px 6px 20px
                    color-mix(in srgb, var(--mt-orange-primary) var(--outer-shadow-strength), transparent);
}

.animated_review_widget_start_position {
    transform: translateX(100vw);
}


.shrink_review_out{
    animation-name: shrink_review_out;
    animation-duration: .4s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes shrink_review_out {
    0%   { transform: scale(1); }
    100% { transform: scale(0); }     /* settle back */
}

.slide_review_in{
    animation-name: slide_review_in;
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes slide_review_in {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(0vw); }     /* settle back */
}

/* STAR CONTAINER — MATCH TOP HALF */
.star_container_review_widget {
    display: flex;
    gap: 0.3rem;
    height: 2.5vh;
    min-height: 2vh;
    align-items: center;
    margin-bottom: 1.5vh;
}

/* INDIVIDUAL STAR */
.star_container_review_widget .star {
    height: 100%;
    aspect-ratio: 1;
    position: relative;
}

/* FILL */
.star_container_review_widget .star::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: black;

    mask-image: url("/img/star-shape.png");
    -webkit-mask-image: url("/img/star-shape.png");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

/* STROKE */
.star_container_review_widget .star::after {
    content: "";
    position: absolute;
    inset: 2px;
    background-color: gold;

    mask-image: url("/img/star-shape.png");
    -webkit-mask-image: url("/img/star-shape.png");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    mask-composite: exclude;
    -webkit-mask-composite: xor;
}



/* COMMENT TEXT */


.comment_container > p{
    
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 600;
    
    line-height: calc(1.5rem + 0.8vh + 0.5vw);


    width: 100%;
    font-size: calc(1rem + 0.45vh + 0.4vw);
    text-align: left;
    /* margin-bottom:calc(2vh + .02vw); */

    letter-spacing: 0.025rem;
    word-spacing: 0.07rem;

    max-width: 70ch;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    




}


/* USER INFO ROW */
.user_account_info_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    margin-bottom: 1vh
}

/* USER IMAGE */
.reviewer_image_container {
    height: 7vh;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--mt-orange-primary);
    background-color: var(--mt-green-primary);
}

.reviewer_image_container > img{
width: 100%;
height: 100%;

}

/* NAME + TIMESTAMP */
.reviewer_name_info_container p {
    margin: 0;
    color: black;
    font-weight: 600;
}

.review_timestamp p {
    color: black;
    font-size: 0.8rem;
    opacity: 0.8;
}




@media(orientation:portrait){
    .review_widget,
    .review_widget_template {
        width: 94%;
        /* 
        height: 70%;
        background-color: var(--mt-cream);
        border: 3px solid var(--mt-orange-primary);
        border-radius: 2px;

        padding: 2vh 2vw;

        position: relative;
        top: 12%;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1.2rem;

        /* SHADOWS — MATCH OVERALL REVIEW CIRCLE *@@@@/
        /* --inner-shadow-size: 18px;
        --inner-shadow-strength: 90%; *@@@@/
        /* --outer-shadow-size: 22px; *@@@@/
        --outer-shadow-strength: 40%;

        box-shadow:
            /* inset 0 0 var(--inner-shadow-size)
                color-mix(in srgb, var(--mt-orange-primary) var(--inner-shadow-strength), transparent), *@@@@/
            0 5px 10px var(--outer-shadow-size)
                color-mix(in srgb, var(--mt-orange-primary) var(--outer-shadow-strength), transparent);
        
        box-shadow: 1px 6px 20px
                        color-mix(in srgb, var(--mt-orange-primary) var(--outer-shadow-strength), transparent);
        */
    }
    .star_container_review_widget {
        height: 2.25vh;
        /* 
        display: flex;
        gap: 0.3rem;
        align-items: center;
        */
    }
    .comment_container > p{
        font-size: calc(1rem + .5vw + .3vh);
        
        /*
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-weight: 600;
        color: black;
        */
    } 
}




/*
-------------------------------------- FOOTER SECTION --------------------------------------
*/

#site_footer {
    width: 100%;
    background-color: var(--mt-charcoal);
    padding: 0.6rem 1.2rem;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    color: var(--mt-cream);
    font-family: "angelone";
    font-size: 0.75rem;   /* MUCH smaller */
    opacity: 0.85;        /* subtle */
    border-top: 1px solid rgba(255,255,255,0.08);
}



 .footer_content {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
}

.footer_content p {
    margin: 0;
    white-space: nowrap;
}



.footer_dev_buttons {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-right: 5vw;
}

.footer_dev_buttons button {
    padding: 0.25rem 0.6rem;
    background: rgba(255,255,255,0.12);
    color: var(--mt-cream);

    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;

    font-size: 0.65rem;   /* small */
    font-weight: 500;
    cursor: pointer;

    transition: background 0.2s ease, transform 0.15s ease;
}

.footer_dev_buttons button:hover {
    background: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}



footer p {
    font-size: calc(0.45vh + 0.8vw);
}



@media(orientation:portrait){
    .footer_content {
        flex-direction: column;
        align-items: flex-start;
        color: #7d5220;
        margin: 0;
        /* 
        display: flex;
        gap: 0.75rem;
        */
    }
    footer p {
        line-height: 0.5;
    }
    footer p:nth-child(1){
        font-size: calc(1.5rem + 0.25vh + 0.25vw);
    }
    footer p:nth-child(2){
        font-size: calc(0.75rem + 0.15vh + 0.25vw);
        padding-left: 7vw;
    }
}