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

.borderred {
    border: solid red;
}

section {
    overflow: hidden;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

:root {
    --white: #FFFFFF;
    --rose: #631e08;
    --brighter-rose : #943312;
    --black: #191717;
    --tan: #FBEED6;
    --gray: #c7c7c7;
    --transparent: #e2d6d60e;
    --true-transparent: #00000000;

    --title: clamp(3rem, 7vw, 6.0rem);
    --subtitle: clamp(2rem, 6vw, 4.85rem);
    --marquee: clamp(1rem, 2vw, 1.618rem);
    --medium: clamp(1rem, 2vw, 1.618rem);
    --body: clamp(0.875rem, 1.5vw, 1.2rem);

    --animation-speed: 0.2s;

    --bar-width: 32px;
    --bar-height: 4px;
    --hamburger-gap: 6px;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
    --side-padding: 5rem;
}

body {
    width: 100vw;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: var(--white);
}

.CTA-button {
    box-sizing: border-box;
    margin: 2rem 0;
    padding: 0.5rem 3rem;
    border: 3px solid var(--rose);
    border-radius: 2px;
    display: inline-block; /*regular inline elements dont obey top/bottom margin*/
    background-color:  var(--rose);
    color: var(--light-color);
    transition: border var(--animation-speed) ease-in-out,
                background-color var(--animation-speed) ease-in-out;
}

.CTA-button:hover {
    border: 3px solid var(--rose);
    background-color: var(--transparent);
}

/*------ Typography Classes ------*/

.sc-title {
    font-size: var(--title);
    font-family: 'Baskervville SC', serif;
    font-weight: 400;
    line-height: 0.75;
}

.sc-subtitle {
    font-size: var(--subtitle);
    font-family: 'Baskervville SC', serif;
    font-weight: 400;
    line-height: 0.75;
}

.sc-price {
    font-size: var(--marquee);
    font-family: 'Baskervville SC', serif;
}

.marquee-font {
    font-size: var(--marquee);
    font-family: 'Young Serif', serif;
}

.sc-medium {
    font-size: var(--medium);
    font-family: "Baskervville SC", serif;
}

.medium {
    font-size: var(--medium);
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    line-height: 1.5;
}

.sc-body {
    font-size: var(--body);
    font-family: 'Baskervville SC', serif;
}

.body {
    font-size: var(--body);
    font-family: 'Libre Baskerville', serif;
    line-height: 2;
}

.light {
    color: var(--white);
}

.dark {
    color: var(--black);
}

.rose {
    color: var(--rose);
}

.grey {
    color: #6c757d;
}

.line-height-2 {
    line-height: 2;
}

/*------ END Typography Classes ------*/


/*------ FlatPickr CSS ------ */

.flatpickr-calendar {
    font-family: 'Libre Baskerville', serif;
    font-weight: lighter;
    font-size: var(--body) !important;
    background-color: var(--black) !important;
}

.flatpickr-months {
    padding: 0.5rem; /*Fix mobile visibility*/
}

.flatpickr-day {
    color: var(--tan) !important;
}

.flatpickr-day.flatpickr-disabled {
    color: rgb(54, 54, 54) !important;
}

.flatpickr-day.nextMonthDay, .flatpickr-day.prevMonthDay {
    color: rgb(54, 54, 54) !important;
}

.flatpickr-day:hover {
    background-color: var(--rose) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    fill: var(--tan) !important;
}


.flatpickr-current-month {
    color: var(--tan) !important;
    padding: 0 !important;
}

.flatpickr-weekday {
    color: var(--tan) !important;
}

.date-picker {
    display: flex;
}

.calendar-button {
    position: relative;
    transform: translateX(-100%);
    color: #8c8c8c;
    border: none;
    background-color: var(--true-transparent);
}


/*------ END FlatPickr CSS ------ */


/*------ Animation classes ------*/

@keyframes slideUpAndFade{
    from {
        transform: translateY(25px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.fade.visible[data-speed="fast"] {
    animation: slideUpAndFade 0.75s forwards;
}

.fade.visible[data-speed="medium"] {
    animation: slideUpAndFade 1.25s forwards;
}

.fade.visible[data-speed="slow"] {
    animation: slideUpAndFade 1.5s forwards;
}

@keyframes marquee{
    from {transform: translateX(0%);}
    to {transform: translateX(-50%);}
}

.submit-fade-out {
    opacity: 0;
}

.submit-fade-in {
    opacity: 1 !important;
}
/*------ END Animation classes ------*/



/*------ Components ------*/

/*--- My Hamburger Menu ---*/

/*--- Hamburger Component ---*/
#mobileNav {display:none};

body:has(#hamburger-checkbox:checked) {
    overflow-y: hidden;
}

.hamburger-menu { 
    padding-right: var(--side-padding);
    box-sizing: border-box;
    pointer-events: all;

    /*display and flex*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: var(--hamburger-gap);

    /*padding and margin
    padding-right: var(--side-padding-mobile);*/

    /*position and sizing*/
    position: relative;
    width: 50%;
    z-index: 1;

    --hypotenuse: calc(var(--hamburger-height) * 1.41421356); /*used to calculate how long each bar should be*/
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-checkbox {
    /*position and sizing*/
    width: var(--bar-width);
    height: var(--bar-height);

    content: "";
    background-color: var(--tan);
    border-radius: 100px;
    transition: opacity var(--animation-speed), width var(--animation-speed),
    rotate var(--animation-speed), translate var(--animation-speed);
    transform-origin: left center;
}

.hamburger-checkbox {
    appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}

.hamburger-checkbox:checked {
    opacity: 0;
    width: 0;
}

.hamburger-menu:has(input:checked)::before {
    rotate: 45deg;
    width: var(--hypotenuse);
    translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
    rotate: -45deg;
    width: var(--hypotenuse);
    translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu:has(input:checked) + .side-menu {
    transform: translate(0, -15%);
}

.hamburger-menu:has(input:checked) + .sidemenu .navLinksMobile {
    opacity: 1;
}

/*---Off canvas menu---*/
.side-menu {
    box-sizing: border-box;

    /*display and flex*/
    display: flex;
    justify-content: center;
    align-items: flex-start;

    /*position and sizing*/
    position: relative;
    width: 100vw;
    height: 110vh;
    z-index: 0;

    padding: 30vh var(--side-padding) 5vh var(--side-padding);
    background-color: var(--black);
    transform: translate(0, -100%); 
    transition: transform var(--animation-speed);

    pointer-events: auto;
}

.side-menu__nav-links {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

/*--- END Hamburger Component ---*/

/*------ My Hamburger Menu---*/

.button {
    width: max-content;
    padding: 0.5rem 5rem;
    background-color: var(--rose);
    color: var(--white);
    border: 2px solid var(--rose);
    transition: background-color 0.2s ease-in-out,
                border 0.2s ease-in-out;
}

.button:hover {
    background-color: var(--transparent);
    border: 2px solid var(--white);
}

#devbutton {
    width: max-content;
    padding: 0.5rem 5rem;
    background-color: var(--rose);
    color: var(--white);
    border: 2px solid var(--rose);
    transition: background-color 0.2s ease-in-out,
                color 0.2s ease-in-out,
                border 0.2s ease-in-out;
}

#devbutton:hover {
    background-color: var(--transparent);
    color: var(--black);
    border: 2px solid var(--black);
}

.devbutton2 {
    margin-left: 2rem;
}

.flashButton {
    width: max-content;
    padding: 0.5rem 5rem;
    background-color: var(--rose);
    color: var(--white);
    border: 2px solid var(--rose);
    transition: background-color 0.2s ease-in-out,
                color 0.2s ease-in-out;
}

.flashButton:hover {
    background-color: var(--transparent);
    color: var(--rose);
}
/*------ END components ------*/


/*------ Utility ------*/

.border-box {
    box-sizing: border-box;
}

.section-padding {
    padding: 7rem 5rem;
}

.form-padding {
    padding: 4rem 3rem;
}

.side-padding {
    padding: 0rem 5rem;
}

.nav-padding {
    padding: 1rem 5rem;
}

.paragraph-gap {
    margin-bottom: 2rem;
}

.header-gap {
    margin-bottom:  4rem;
}

.header-top-gap {
    margin-top:  4rem;
}

.block {
    display: block;
}

.left-margin-fix {
    margin-left: 0.2rem;
}

.line-height-1 {
    line-height: 1;
}

.undo-absolute {
    position: relative !important;
}

.page-nav {
    width: 100% !important;
    background-color: var(--black);
}



/*------ end Utility ------*/

/*------ hero section ------*/
.hero {
    background-image: url(images/newbg.jpg);
    background-size: cover;
    display: flex;
    height: 95vh;
    box-sizing: border-box;
}

.desktop-nav {
    background-color: var(--true-transparent);
    position: fixed;
    z-index: 3;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    height: max-content;
    gap: 6rem;
    transition: background-color 0.5s ease-in-out;
}

.nav-index {
    justify-content: center;
}

.bg-dark {
    background-color: var(--black) !important;
}

.desktop-nav a {
    width: max-content;
}

.nav-container-form {
    width: 100%;
    height: max-content;
    background-color: var(--black);
}

.desktop-nav-form {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    animation: slideUpAndFade 0.75s forwards;
    gap: 12rem;
}

.hero__main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
}

#navbar-logo {
    width: 50%;
}

#form-logo {
    width: 10rem;
}

#home-link-logo {
    margin-top: 10rem;
    width: 50%;
    max-width: none;
    animation: slideUpAndFade 0.75s forwards;
}

@media (min-width: 2000px) {
    #home-link-logo {
        max-width: none;
    }

    html {
        font-size: 24px;
    }
}

#hero-logo {
    width: 75%;
    animation: slideUpAndFade 1.5s forwards;
    margin-bottom: 3rem;
}

.hero__paragraph {
    width: 65%;
    text-align: left;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    animation: slideUpAndFade 2s forwards;
}

.hero__main-content .button {
    animation: slideUpAndFade 3s forwards;
}

.hero__image-container {
    overflow: visible;
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 33.33%;
    height: 100%;
}

#hero-image {
    position: relative;
    z-index: 2;
    width: 100%;
    object-fit: cover;
    animation: slideUpAndFade 0.75s forwards;
}


#hero-text-overlay {
    position: absolute;
    z-index: 0;
    left: -50%;
    top: 20%;
    width: 100%;
}
/*------END hero ------*/

/*------Marquee------*/

.marquee {
    height: 5vh;
    margin: auto;
    overflow: hidden;
}

.marquee__inner-el {
    height: 100%;
    display: flex;
    align-items: center;
    width: max-content;
    overflow: hidden;
    white-space: nowrap;
    animation: marquee 90s linear infinite;
}

.marquee__inner-el span {
    display: inline-block;
    margin-right: 0.5rem;
}
/*------END Marquee------*/

/*------ Portfolio section------*/

.portfolio {
    background-color: var(--tan);
    display: flex;
    justify-content: space-between;
    height: max-content;
}   

.portfolio__text-container {
    width: 48%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.portfolio__info-block {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.info-block__column-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info-block__column-2 {
    height: 100%;
}

.socials {
    margin-top: 2rem;
}

.awards p, .awards span {
    text-align: right;
}

.awards {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.awards__items p{
    margin-top: 2rem;
}

#artist-of-the-year {
    margin-top: 0 !important;
}

.portfolio__carousel-container {
    height: 100vh;
    width: 48%;
}

.swiper-container {
    width: 100%;
    height: 100%
}

.swiper-wrapper {
    height: 100%
}

.swiper-slide {
    height: 100%;
    width: 100%;
    text-align: right;
}

.swiper-image {
    margin-right: 1px; /*line fix*/
    object-fit: cover;
    aspect-ratio: 3/4;
    height: 100%;
}

/*------END Portfolio section------*/


/*------ about section ------*/

.about {
    position: relative;
    height: max-content;
    background-color: var(--tan);
    display: flex;
    align-items: center;
    z-index: -1;
}

#about__flowers-overlay {
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    position: absolute;
    left: 25%;
    width: 45%;
}

.about__flex-container {
    width: 100%;
    display: flex;
}

.about__image-container {
    width: 45%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

#about__image {
    aspect-ratio: 1/1   ;
    width: 100%;
    object-fit: cover;
}

.about__text-container {
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.about__text-container h2 {
    text-align: right;
}

.about__text-container p {
    width: 80%;
    text-align: right;
}

/*------ END about section ------*/

/*------ testimonials section ------*/

.testimonials {
    position: relative;
    height: max-content;
    background-color: var(--black);
    z-index: -1;
}

#text-overlay {
    position: absolute;
    z-index: -2;
    right: 45%;
}

#testimonials__flowers-overlay {
    width: 50%;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#quotes {
    position: absolute;
    z-index: -1;
    right: -5%;
    top: 25%;
    transform: translate(-50%, -50%);
}

/*overflow fix*/
@media (min-width: 2700px) {
    #quotes {
        right: 5%;
    }
   
}

.testimonial__flex-container {
    width: 100%;
    display: flex;
    margin-top: 6rem;
}

.testimonial__image-container {
    width: 50%;
}

.testimonial__image {
    width: 80%;
}

.testimonial__text-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial__text-container .sc-subtitle {
    margin-top: -1.4rem;
}

.testimonial__indicator-container {
    display: flex;
    gap: 2rem;
}

.testimonial__indicator {
    width: 3rem;
    height: 4px;
    background-color: grey;
    transition: background-color 0.5s ease;
}

.selected {
    background-color: white;
}

/*------ profile section ------*/
.dev-message {
    width: 66.66%;
}

#profile-overlay {
    position: absolute;
    z-index: -1;
    height: 100%;
    transform: scaleX(-1);
    left: 40%;
}

.profile {
    position: relative;
    z-index: -1;
    height: max-content;
    background-color: var(--tan);
}

.profile__flex-container {
    display: flex;
}

.profile__bio-container {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.profile__header-alignment-fix {
    margin-left: -0.2rem;
}

.profile__bullet-points {
    display: flex;
    gap: 6rem;
}

.profile__block span {
    margin-bottom: 1rem;    
}

.profile__block p{
    line-height: 1.5;
}

.profile__image-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#evelyn-photo {
    width: 75%;
}

.profile__awards-block {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.profile__button-container {
    display: flex;
    gap: 2rem;
}

.award {
    width: 50%;
    text-align: right;
    line-height: 1.25;
}


/*------END profile section ------*/


/*------ form section ------*/

.contact {
    height: max-content;
    width: 100%;
}

.form__flex-container {
    /*background-image: url(images/form-img.webp);
    background-size: contain;*/
    display: flex;
    height: 100%;
    width: 100%; 
}

.form__image-container {
    background-color: var(--tan);
    width: 50%;
}

#form-image {
    width: 150%;
}

.form__form-container {
    gap: 2rem;
    width: 50%;
    background-color: var(--tan);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#form__flowers-overlay {
    top: 80%;
    transform: translateY(-50%);
    z-index: 0;
    position: absolute;
    left: 55%;
    width: 45%;
    opacity: 0.5;
}

.form__form-container h2 {
    position: relative;
    z-index: 3;
    margin-left: -0.5rem;
    animation: slideUpAndFade 0.5s forwards;
    margin-bottom: 2rem;
}

form {
    position: relative;
    z-index: 3;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

form input, form textarea {
    width: 100%;
    resize: vertical;
    color: var(--black);
}

.input-disabled {
    background-color: var(--gray);
}

.form-line {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: slideUpAndFade 0.5s forwards;
}

input, textarea {
    outline: none;
    border: none;
    background-color: var(--transparent);
    border-bottom: solid 2px var(--rose);
    color: var(--white);
    padding: 0.25rem;
}

select {
    padding: 0.25rem;
    outline: none;
    border: none;
    background-color: var(--transparent);
    border-bottom: solid 2px var(--rose);
    box-sizing: border-box;
    color: #6c757d; /*same as placeholder*/
}

.custom-file-upload-1, .custom-file-upload-2, .custom-file-upload-3 {
    box-sizing: border-box;
    width: max-content;
    height: max-content;
    padding: 0.35rem;
    color: #6c757d; /*same as placeholder*/ 
    border: 3px solid var(--rose);
    border-radius: 2px;
    display: inline-block; /*regular inline elements dont obey top/bottom margin*/
    background-color:  var(--transparent);
    transition: color 0.2s ease-in-out,
                background-color 0.2s ease-in-out;
}

.custom-file-upload-1:hover, .custom-file-upload-2:hover, .custom-file-upload-3:hover{
    cursor: pointer;
    color: var(--white);
    background-color: var(--rose);
}

/*hide native file input*/
input[type="file"] {
    display: none;
}

.ref-photos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.reference-photos-title {
    width: 100%;
}

.time-blocks-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Similar styles to file upload buttons */
.time-block {
    box-sizing: border-box;
    width: max-content;
    height: max-content;
    color: #6c757d; /*same as placeholder*/ 
    border: 3px solid var(--rose);
    border-radius: 2px;
    display: inline-block; /*regular inline elements dont obey top/bottom margin*/
    background-color:  var(--transparent);
    transition: color 0.2s ease-in-out,
                background-color 0.2s ease-in-out;
}

.time-block:hover {
    cursor: pointer;
    color: var(--white);
    background-color: var(--rose);
}

.time-block input:checked + span {
    color: var(--white);
    background-color: var(--rose);
}

.time-block span {
    padding: 0.20rem;
    width: max-content;
}

.time-block__input {
    display: none;
}



#warning-bubble { margin-top: -2rem;}

.submit-message {
    margin-left: 0.6rem;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    z-index: -1;
    transition: opacity 1.5s ease;
}

.dev-note {
    font-family: 'arial';
    font-weight: light;
    font-size: 0.75rem;
    color: #6c757d;
}

#submit-button {
    margin-top: 2rem;
    cursor: pointer;
    color: var(--white);
    animation: slideUpAndFade 0.65s forwards;
    border: solid var(--true-transparent) 2px;
    transition: color 0.2s ease-in-out,
                background-color 0.2s ease-in-out,
                border 0.2s ease-in-out;
}

#submit-button:hover {
    border: solid var(--rose) 2px;
    color: var(--rose);
}

/*------ END form section ------*/

/*------ footer ------*/
footer {
    padding-top: 3rem !important;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--tan);
    height: max-content;
}

#footer-logo {
    height: 5rem;
}

.footer-top {
    padding: 0.5rem 0;
    width: 100%;
    height: 75%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: var(--black);
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.copyright {
    margin: 1rem;
}

#personal-link {
    color: var(--black);
    transition: color 0.1s ease-in-out;
}

#personal-link:hover {
    color: var(--rose);
}
/*------ END footer ------*/

/*--- PORTFOLIO STLYES (VIBE CODED) ---*/

.portfolio-gallery {
    background-color: var(--tan);
}

#portfolio__flowers-overlay {
    top: 75%;
    transform: translateY(-50%);
    z-index: 0;
    position: absolute;
    left: 25%;
    width: 50%;
}

.portfolio-gallery h1 {
    animation: slideUpAndFade 1.25s forwards;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    animation: slideUpAndFade 0.75s forwards;
}

.gallery a {
    display: block;
    overflow: hidden;
    aspect-ratio: 9 / 16; /* same ratio for all items */
}

.gallery img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.3s ease;
    cursor: zoom-in;
    object-fit: cover;
}

.gallery img:hover {
    transform: scale(1.05);
}

/*--- END PORTFOLIO STLYES (VIBE CODED) ---*/


/*--- Aftercare---*/

.aftercare {
    background-color: var(--tan);
    height: max-content;
}

#aftercare__flowers-overlay {
    top: 60%;
    transform: translateY(-50%);
    z-index: 0;
    position: absolute;
    left: 60%;
    height: 90%;
    opacity: 0.25;
}

.aftercare-paragraph {
    width: 75%;
}
/*--- END Aftercare---*/



/*--- STORE styles ---*/
.store-section {
    background-color: var(--tan);
    height: max-content;
    position: relative;
}

#store-overlay {
    opacity: 35%;
    position: absolute;
    left: 55%;
    top: 5%;
}

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    height: max-content;
    border: solid 6px var(--black);
    transition: border 0.2s ease-in-out;
}

.product-card:hover {
    border: solid 6px var(--brighter-rose);
}

.product-card:hover h3 {
    color: var(--brighter-rose);
}

.product-card:hover img {
    filter: brightness(1.0);
}

.product-card img {
    aspect-ratio: 3/4;
    width: 100%;
    filter: brightness(0.8);
    transition: filter 0.2s ease-in-out
}

.product-card h3 {
    font-weight: 400;
    line-height: 2;
    transition: color 0.2s ease-in-out;
}

.product-card p {
    color: #6c757d;
}

.store__description-container {
    width: 50%;
}

.store__categories-menu {
    width: 50%;
}

.categories-menu__ul {
    display: flex;
    gap: 6rem;
}

.categories-menu__li {
    width: 100%;
    list-style: none;
    position: relative;
}

.categories-menu__li button {
  text-decoration: none; /* remove default underline */
  color: black;
  position: relative;
}

.categories-menu__li button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* adjust so it sits just below text */
  width: 0;
  height: 2px;
  background: var(--rose);
  transition: width 0.3s ease;
}

.categories-menu__li button:hover::after {
  width: 100%;
}

.categories-menu__li button.category-active::after {
    width: 100%;
}

.categories-menu__btn {
    all: unset;
    cursor: pointer;
}

.store__category-1, .store__category-2, .store__category-3 {
    display: none;
}

.active {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
/*.store__category-1.active, .store__category-2.active, .store__category-3.active {
    display: block;
}*/

/*--- END STORE styles ---*/


/*--- Product page ---*/

.product-page {
    background-color: var(--tan);
    height: max-content;
}

.product__flex-container {
    display: flex;
    width: 100%;
}

.product__image-container {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.product__image-container img {
    border: solid 4px var(--black); 
    width: 75%;
    aspect-ratio: 3/4;
}

.product__details-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product__details-container h2 {
    text-decoration: underline;
    text-decoration-color: var(--rose);
    text-underline-offset: 0.5rem;
}


/*--- END Product page ---*/


/*---- mobile ----*/
@media (max-width: 1025px) and (orientation: portrait){

    :root {
        --side-padding: 1rem;
    }

    #mobileNav {
        position: fixed;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        z-index: 999;
        pointer-events: none;
    }

    .mobileNav__options {
        display: flex;
        position: relative;
        z-index: 1;
        flex-wrap: wrap;
    }

    #mobileNav__logo-link {
        padding-left: var(--side-padding);
        padding-top: 0.5rem;
        width: 50%;
        position: relative;
        z-index: 999;
        pointer-events: auto;
    }

    #mobileNav__logo-image {
        width: 75%;
    }

    :root {
        --title: clamp(3.24rem, 7vw, 6.0rem);
        --subtitle: clamp(3.24rem, 6vw, 4.85rem);
        --marquee: clamp(1.618rem, 2vw, 1.618rem);
        --medium: clamp(1.618rem, 2vw, 1.618rem);
        --body: clamp(1.2rem, 1.5vw, 1.2rem);
    }

    .nav-container-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #desktopNav {
        display: none;
    }

    #form-logo {
        width: 85%;
    }

    .desktop-nav-form {
        gap: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .section-padding {
        padding: 3rem 1rem;
    }

    .header-gap {
        margin-bottom: 3rem;
    }

    .side-padding {
        padding: 0rem 1rem;
    }

    .hero {
        display: flex;
        flex-direction: column-reverse;
        height: 100dvh;
        padding-top: 6rem; /*offset mobile nav*/
    }

    .hero__main-content {
        box-sizing: border-box;
        position: relative;
        z-index: 3;
        width: 100%;
        gap: 0rem;
        height: 50%;
        padding: 0 1.5rem 3rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    picture {
        display: flex;
        justify-content: center;
    }

    .hero__main-content p {
        text-align: center;
    }

    #hero-logo {
        width: 100%;
    }

    #home-link-logo {
        width: 85%;
    }

    .hero__paragraph {
        width: 100%;
        margin-top: 0.75rem;
        margin-bottom: 1.0rem;
    }

    #hero-text-overlay {
        width: 75%;
        left: 5%;
        top: 0%;
    }

    .hero__image-container {
        box-sizing: border-box;
        justify-content: center;
        height: 50%;
        padding: 0 1rem 1rem 2rem;
        background-color: var(--black);
        width: 100%;
        align-items: flex-start;
    }

    #hero-image {
        z-index: 1;
        height: 90%;
        width: auto;
        margin-right: -1rem;
    }

    .marquee {
        height: max-content;
    }

    .marquee__inner-el {
        display: flex;
        align-items: center;
    }

    .portfolio {
        flex-direction: column;
        gap: 2rem;
    }

    .portfolio__text-container {
        width: 100%;
        height: auto;
        align-items: center;
    }

    #portfolio__intro {
        text-align: center;
        width: 100%;
    }

    .portfolio__carousel-container {
        height: 65vh;
        width: 100%;
    }

    .swiper-slide {
        text-align: center;
    }

    .about__flex-container {
        flex-direction: column;
        gap: 3rem;
    }

    #about__flowers-overlay {
        display: none;
    }
    
    .about__image-container {
        width: 100%;
        justify-content: center;
    }

    #about__image {
        width: 75%;
    }

    .about__text-container {
        display: flex;
        flex-direction: column;
        align-items: center;    
        width: 100%;
    }

    .about__text-container h2, .about__text-container p {
        text-align: center;
    }

    .about__text-container p {
        width: 100%;
    }

    .testimonials span {
        text-align: center;
    }

    .testimonial__flex-container {
        flex-direction: column;
        gap: 3rem;
        margin-top: 3rem;
    }

    #testimonials__flowers-overlay {
        width: 75%;
        top: 62%;
    }

    .testimonial__image-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .testimonial__text-container {
        width: 100%;    
        display: flex;
        gap: 3rem;
    }

    .testimonial__text-elements p{
        text-align: center;
    }

    .testimonial__body {
        font-size: var(--body);
    }

    .testimonial__indicator-container {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }

    #quotes {
        display: none;
    }

    .profile {
        height: max-content;
    }

    .profile h2 {
        text-align: center;
    }

    .profile p {
        width: 100%;
        text-align: center;
    }

    .profile__button-container {
        flex-direction: column;
        align-items: center;
    }

    #devbutton {
        font-size: var(--body);
        margin-bottom: 2rem;
        padding: 1rem 3rem;
    }

    .devbutton2 {
        margin: auto;
    }

    #profile-overlay {
        width: 100%;
        height: auto;
        left: 50%;
        transform: translate(-50%, -25%);
        top: 50%;
        opacity: 0.5;
    }

    .profile__flex-container {
        flex-direction: column;
        gap: 3rem;
    }

    .profile__bio-container {
        width: 100%;
    }

    .profile__bio-container span {
        width: 100%;
        text-align: center;
    }

    .profile__bullet-points {
        width: 100%;
        gap: 10%;
    }

    #evelyn-photo {
        width: 100%;
    }

    .profile__block {
        text-align: center;
        width: 45%;
    }

    .profile__block p{
        font-size: 0.85rem;
        text-align: left;
    }

    .profile__bio-container p {
        text-align: center;
    }

    .profile__image-container {
        width: 100%;
        align-items: center;
    }

    .profile__awards-block {
        align-items: center;
        gap: 1rem;
    }

    .profile__awards-block p {
        text-align: center;
    }

    .award {
        width: 100%;
    }

    .contact {
        height: max-content;
    }

    .form-hide-marquee {
        display: none;
    }

    .form__image-container {
        width: 100%;
    }

    #form-image {
        display: block;
        height: 100%;
        object-fit: fill;
    }

    .form__form-container h2 {
        z-index: 2;
    }

    #form__flowers-overlay {
        display: none;
    }

    .form__flex-container {
        flex-direction: column-reverse;
    }

    .form__form-container {
        width: 100%;
        gap: 3rem;
    }

    .dev-message-form {
        text-align: center;
    }

    .form__form-container h2 {
        text-align: center;
    }   

    .form__form-container .button {
        margin: auto;
    }

    footer {
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .footer-top {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 4rem;
    }

    #footer-logo {
        width: 50%;
        height: auto;
    }


    .portfolio-gallery {
        overflow-x: hidden;
    }

    #portfolio__flowers-overlay {
        display: none;
    }

    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .aftercare-paragraph {
        width: 100%;
    }

    #aftercare__flowers-overlay {
        display: none;
    }

    /* Flash Store Styles */

    .store__description-container {
        width: 100%;
    }

    #store-overlay {
        display: none;
    }

    .store__description-container h1 {
        text-align: center;
    }

    .store__categories-menu {
        width: 100%;
    }

    .categories-menu__ul {
        gap: 1rem;
    }

    .categories-menu__li {
        font-size: var(--body);
    }

    .categories-menu__btn {
        display: inline-block;
        width: max-content;
    }

    .product-card {
        width: 45%;
        border: solid 3px var(--black);
    }

    .product-card h3 {
        text-align: center;
        line-height: 1;
        padding: 0.25rem;
    }

    /* product page */

    .product__flex-container {
        flex-direction: column;
        gap: 2rem;
    }

    .product__image-container {
        width: 100%;
        justify-content: center;
    }

    .product__details-container {
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .flashButton {
        margin-top: 2rem;
    }

}

/*mobile landscapes*/
@media (max-width: 1365px) and (orientation: landscape){

    :root {
        --side-padding: 1rem;
    }

    .side-padding {
        padding: 0 1rem;
    }

    .section-padding {
        padding: 3rem 1rem;
    }

    .desktop-nav {
        display: none;
    }

    #mobileNav {
        position: fixed;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        z-index: 999;
        pointer-events: none;
    }

    .mobileNav__options {
        display: flex;
        position: relative;
        z-index: 1;
        flex-wrap: wrap;
    }

    #mobileNav__logo-link {
        padding-left: var(--side-padding);
        padding-top: 0.5rem;
        width: 50%;
        position: relative;
        z-index: 999;
        pointer-events: auto;
    }

    #mobileNav__logo-image {
        width: 25%;
    }
    
    .hero {
        height: 100dvh;
    }

    .hero__main-content {
        justify-content: center;
        width: 55%;
        gap: 1rem;
    }

    .hero__image-container {
        width: 45%;
        justify-content: flex-end;
    }

    #hero-image {
        width:75%;
    }

    #home-link-logo {
        width: 75%;
    }

    .hero__paragraph {
        width: 100%;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }

     #portfolio__intro {
        text-align: left;
    }

    .about, .testimonials {
        flex-direction: column;
    }

    #about__image {
        width: 100%;
    }

    .testimonial__body {
        margin-bottom: 0.75rem;
    }

    #quotes {
        width: 25%;
    }

    /* Flash Store */
    .store__description-container h1 {
        margin-top: 3rem;
    }
}


/* text size adjustments for phones on info block*/
@media (max-width: 431px) and (orientation: portrait){
    .info-block__column-1 p, .info-block__column-2 p{
        font-size: 1rem !important;
    }

    .portfolio__info-block {
        height: max-content;
    }

    .paragraph-gap {
        margin-bottom: 1.5rem;
    }
}

/* super wide screen adjustments */
@media (min-width: 3000px) {
    #hero-image {
        width: 94%;
    }

    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    }
}

/*gallery adjustments */

@media (min-width: 1700px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    }
}

/* super small phone screen mobile menu fix*/

@media (max-width: 390px) {
    :root {
        --side-padding: 1rem;
    }
    .side-menu__nav-links {
        gap:3rem
    }
}

@media (min-width: 425px) and (orientation: portrait) {

    :root {
        --bar-width: 48px;
        --bar-height: 6px;
        --hamburger-gap: 10px;
    }

    .hero {
        padding-top: 10rem;
    }

    #mobileNav__logo-image {
        width: 50%;
    }
}

@media (max-width: 916px) and (orientation: landscape) {

    .hero {
        padding-top: 10rem;
    }

    #hero-image {
        width: 65%;
    }

    .side-menu__nav-links li a {
        color: var(--true-transparent);
    }

    .hamburger-menu:has(input:checked) + nav ul li a {
        color: var(--white);
    }

    .side-menu {
        height: 120vh;
    }

    .side-menu__nav-links {
        gap: 2rem;
    }
}