/* =========================================================
   BIRCH & BUTTER BAKEHOUSE
   Rustic dessert bakehouse theme

   Materials:
   - Burlap / linen background
   - Dark wood navbar + footer
   - Vanilla paper cards
   - Raspberry / strawberry accents
   - Plum secondary accents
   - Buttercream highlights
   ========================================================= */


/* =========================================================
   COLOR PALETTE
   ========================================================= */

:root {
    /* Wood / chocolate */
    --walnut: #5a3932;
    --walnut-dark: #35211e;
    --chocolate: #65423b;
    --chocolate-dark: #432d29;

    /* Dessert / berry colors */
    --raspberry: #a94f6b;
    --raspberry-dark: #843b54;
    --raspberry-soft: #c77c90;

    --strawberry: #d88f9d;
    --strawberry-light: #edbec4;

    --plum: #76506d;
    --plum-dark: #59384f;

    /* Vanilla / frosting */
    --cream: #fff8ed;
    --vanilla: #fbf3df;
    --paper: #f9eddd;

    /* Butter */
    --butter: #e4c375;
    --buttercream: #f3dfa8;

    /* Text */
    --ink: #463332;
    --muted: #846e6d;

    /* Burlap base */
    --burlap-base: #e8d5cf;

    /* Shadows */
    --shadow:
        0 16px 34px rgba(72, 46, 43, .16);
}


/* =========================================================
   BASE
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    color: var(--ink);

    font-family:
        "Lora",
        Georgia,
        serif;

    background-color: var(--burlap-base);

    background-image:
        linear-gradient(
            rgba(255, 247, 242, .18),
            rgba(255, 247, 242, .18)
        ),
        url("../img/textures/burlap.png");

    background-repeat: repeat;

    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
.brand-wordmark,
.display-font {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-weight: 700;
    letter-spacing: .01em;
}

a {
    color: var(--raspberry);
}

a:hover {
    color: var(--plum);
}


/* =========================================================
   WOOD NAVBAR
   ========================================================= */

.site-navbar {
    background-color: var(--walnut-dark);

    background-image:
        linear-gradient(
            rgba(38, 21, 19, .18),
            rgba(38, 21, 19, .18)
        ),
        url("../img/textures/wood.png");

    border-bottom:
        1px solid rgba(216, 143, 157, .55);

    box-shadow:
        0 7px 18px rgba(40, 24, 21, .24);
}


/* =========================================================
   NAVBAR BRAND
   Logo + Birch & Butter text
   ========================================================= */

.brand-lockup {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 0 !important;
    margin-right: 2rem;

    text-decoration: none;
}


/* =========================================================
   OVAL LOGO
   ========================================================= */

.logo-plaque {
    /*
       Large horizontal oval.
       Width/height control the oval itself.
    */
    width: 170px;
    height: 95px;

    flex-shrink: 0;

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

    /*
       IMPORTANT:
       Padding gives the logo breathing room so
       nothing touches or gets clipped by the oval.
    */
    padding: 12px 20px;

    background-color: var(--vanilla);

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .18),
            rgba(255, 255, 255, .18)
        ),
        url("../img/textures/paper.png");

    border-radius: 50%;

    border:
        2px solid var(--buttercream);

    box-shadow:
        0 4px 10px rgba(40, 22, 20, .35),
        inset 0 0 0 3px rgba(169, 79, 107, .12);

    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.brand-lockup:hover .logo-plaque {
    transform: scale(1.025);

    box-shadow:
        0 5px 13px rgba(40, 22, 20, .4),
        inset 0 0 0 3px rgba(169, 79, 107, .16);
}


/*
   This is what prevents the logo from being cut off.

   "contain" tells the browser:
   Show the ENTIRE image inside the available space.
*/

.navbar-logo {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;

    /*
       Do NOT use object-fit: cover here.
       Cover crops the logo.
    */
}


/* =========================================================
   BRAND TEXT BESIDE LOGO
   ========================================================= */

.brand-text {
    display: flex;
    flex-direction: column;

    justify-content: center;

    line-height: 1;

    min-width: 0;
}


.brand-wordmark {
    display: block;

    color: var(--cream);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.55rem;
    font-weight: 700;

    letter-spacing: .045em;

    text-transform: uppercase;

    white-space: nowrap;
}


.brand-sub {
    display: block;

    margin-top: .4rem;

    color: var(--strawberry-light);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: .64rem;
    font-weight: 600;

    line-height: 1;

    letter-spacing: .28em;

    text-transform: uppercase;
}


.brand-lockup:hover {
    text-decoration: none;
}


.brand-lockup:hover .brand-wordmark {
    color: var(--cream);
}


.brand-lockup:hover .brand-sub {
    color: var(--strawberry-light);
}


/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

.site-navbar .nav-link {
    color:
        rgba(255, 248, 237, .9) !important;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: .75rem;
    font-weight: 600;

    letter-spacing: .13em;

    text-transform: uppercase;

    padding:
        .75rem .9rem !important;
}


.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
    color:
        var(--strawberry-light) !important;
}


.site-navbar .navbar-toggler {
    border-color:
        rgba(255, 248, 237, .45);
}


.site-navbar .navbar-toggler-icon {
    filter:
        sepia(1)
        brightness(2);
}


.cart-pill {
    border:
        1px solid
        rgba(216, 143, 157, .7);

    padding:
        .48rem .75rem !important;

    border-radius: 999px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    min-height: 76vh;

    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(52, 31, 28, .80),
            rgba(64, 35, 42, .26)
        ),
        url("../img/hero.jpg")
        center 46% / cover
        no-repeat;

    border-bottom:
        8px solid rgba(90, 57, 50, .72);
}


.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .03),
            rgba(86, 37, 53, .18)
        );

    pointer-events: none;
}


.hero-content {
    position: relative;

    z-index: 1;

    max-width: 760px;

    padding:
        9rem 0 6rem;
}


.eyebrow {
    font-family:
        "Montserrat",
        sans-serif;

    color: var(--strawberry-light);

    letter-spacing: .24em;

    text-transform: uppercase;

    font-weight: 700;

    font-size: .72rem;
}


.hero h1 {
    color: var(--cream);

    font-size:
        clamp(
            3.7rem,
            8vw,
            7.2rem
        );

    line-height: .78;

    text-shadow:
        0 4px 22px rgba(0, 0, 0, .28);

    margin:
        .6rem 0 1.2rem;
}


.hero h1 small {
    display: block;

    margin-top: 1rem;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: .16em;

    letter-spacing: .35em;

    text-transform: uppercase;

    color: var(--buttercream);
}


.hero p {
    color:
        rgba(255, 248, 237, .94);

    max-width: 610px;

    font-size: 1.1rem;
}


/* =========================================================
   THEMED BUTTONS
   ========================================================= */

.btn-bakehouse {
    --btn-bg: var(--raspberry);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .55rem;

    color: var(--cream);
    background: var(--btn-bg);

    /* Stronger outer border */
    border: 2px solid var(--buttercream);

    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: .75rem;

    letter-spacing: .12em;
    text-transform: uppercase;

    padding: .9rem 1.35rem;

    text-decoration: none;
    position: relative;

    /* Inner ticket-style border + outer shadow */
    box-shadow:
        inset 0 0 0 3px var(--btn-bg),
        inset 0 0 0 4px rgba(255, 248, 237, .55),
        0 7px 15px rgba(72, 46, 43, .18);

    clip-path:
        polygon(
            0 8px,
            8px 8px,
            8px 0,
            calc(100% - 8px) 0,
            calc(100% - 8px) 8px,
            100% 8px,
            100% calc(100% - 8px),
            calc(100% - 8px) calc(100% - 8px),
            calc(100% - 8px) 100%,
            8px 100%,
            8px calc(100% - 8px),
            0 calc(100% - 8px)
        );

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

.btn-bakehouse:hover {
    color: #fff;

    transform: translateY(-2px);

    filter: brightness(1.06);

    box-shadow:
        inset 0 0 0 3px var(--btn-bg),
        inset 0 0 0 4px rgba(255, 248, 237, .75),
        0 9px 18px rgba(72, 46, 43, .24);
}


.btn-bakehouse.alt {
    --btn-bg:
        var(--plum);
}


.btn-bakehouse.paper {
    --btn-bg:
        var(--buttercream);

    color:
        var(--chocolate-dark);

    border-color:
        var(--strawberry);
}


.btn-bakehouse.strawberry {
    --btn-bg:
        #bd6879;
}


/* =========================================================
   PAPER SURFACES
   ========================================================= */

.paper-card,
.paper-panel {
    background-color:
        var(--paper);

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .25),
            rgba(255, 255, 255, .25)
        ),
        url("../img/textures/paper.png");

    border:
        1px solid rgba(169, 79, 107, .16);

    box-shadow:
        var(--shadow);

    position: relative;
}


.paper-card {
    padding: 1rem;

    height: 100%;

    transition: .22s ease;
}


.paper-card:hover {
    transform:
        translateY(-4px)
        rotate(-.15deg);

    box-shadow:
        0 20px 38px rgba(72, 46, 43, .20);
}


.paper-card .card-photo {
    width: 100%;

    aspect-ratio:
        4 / 3;

    object-fit: cover;

    border:
        1px solid rgba(86, 54, 51, .14);
}


.paper-panel {
    padding:
        clamp(
            1.35rem,
            3vw,
            2.4rem
        );
}


.paper-panel::before,
.paper-card::before {
    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid rgba(169, 79, 107, .10);

    pointer-events: none;
}


/* =========================================================
   INK STAMPS
   ========================================================= */

.stamp-link {
    display: inline-block;

    color:
        var(--raspberry);

    border:
        2px solid currentColor;

    padding:
        .36rem .62rem .32rem;

    text-decoration: none;

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 800;

    font-size: .67rem;

    letter-spacing: .13em;

    text-transform: uppercase;

    transform:
        rotate(-2deg);

    opacity: .9;

    box-shadow:
        inset 0 0 0 2px
        rgba(169, 79, 107, .08);

    position: relative;
}


.stamp-link::after {
    content: "";

    position: absolute;

    inset: 3px;

    border:
        1px dotted currentColor;

    opacity: .45;
}


.stamp-link:hover {
    color:
        var(--plum);

    transform:
        rotate(1deg)
        scale(1.03);
}


.stamp-round {
    border-radius: 50%;

    width: 88px;
    height: 88px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.stamp-link.plum {
    color:
        var(--plum);
}


.stamp-link.strawberry {
    color:
        #b96779;
}


/* /* =========================================================
   RARE WAX SEAL
   ========================================================= */

/* =========================================================
   WAX SEAL SVG
   ========================================================= */

.wax-seal-svg {
    width: 80px;
    height: 80px;

    flex: 0 0 80px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transform: rotate(-7deg);

    filter:
        drop-shadow(
            0 4px 4px
            rgba(67, 45, 41, .28)
        );

    transition: transform .2s ease;
}

.wax-seal-svg svg {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: 100%;
    max-height: 100%;

    overflow: visible;
}

.wax-seal-svg:hover {
    transform:
        rotate(-4deg)
        scale(1.04);
}

@media (max-width: 575.98px) {
    .wax-seal-svg {
        width: 45px;
        height: 45px;

        flex-basis: 45px;
    }
}

/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section-pad {
    padding:
        5.5rem 0;
}


.section-title {
    font-size:
        clamp(
            2.4rem,
            5vw,
            4rem
        );

    margin-bottom: .5rem;

    color:
        var(--chocolate-dark);
}


.section-kicker {
    color:
        var(--raspberry);

    font-family:
        "Montserrat",
        sans-serif;

    letter-spacing: .17em;

    text-transform: uppercase;

    font-size: .72rem;

    font-weight: 700;
}


.ruled-divider {
    width: 82px;

    height: 7px;

    margin:
        1rem 0 1.7rem;

    background:
        linear-gradient(
            to bottom,
            transparent 0 2px,
            var(--raspberry) 2px 4px,
            transparent 4px 5px,
            var(--strawberry-light) 5px 6px,
            transparent 6px
        );
}


/* =========================================================
   HOME CARDS
   ========================================================= */

.explore-card h3 {
    font-size: 2rem;

    margin-top: 1rem;

    margin-bottom: .35rem;

    color:
        var(--chocolate-dark);
}


.explore-card p {
    color:
        var(--muted);
}


/* =========================================================
   INNER PAGE HERO
   ========================================================= */

.page-hero {
    padding:
        10rem 0 4.2rem;

    background:
        linear-gradient(
            rgba(59, 34, 32, .64),
            rgba(76, 38, 51, .60)
        ),
        url("../img/hero.jpg")
        center 43% / cover
        no-repeat;

    color:
        var(--cream);

    border-bottom:
        8px solid rgba(90, 57, 50, .68);
}


.page-hero h1 {
    font-size:
        clamp(
            3rem,
            7vw,
            5.4rem
        );

    margin: 0;

    color:
        var(--cream);
}


.page-hero p {
    color:
        rgba(255, 248, 237, .89);

    max-width: 650px;
}


/* =========================================================
   FORMS
   ========================================================= */

.form-label {
    font-family:
        "Montserrat",
        sans-serif;

    font-size: .72rem;

    letter-spacing: .1em;

    text-transform: uppercase;

    font-weight: 700;

    color:
        var(--chocolate);
}


.form-control,
.form-select {
    background:
        rgba(255, 250, 244, .82);

    border:
        1px solid #c9a8aa;

    border-radius: 0;

    color:
        var(--ink);

    padding:
        .8rem .9rem;
}


.form-control:focus,
.form-select:focus {
    border-color:
        var(--raspberry);

    box-shadow:
        0 0 0 .2rem
        rgba(169, 79, 107, .14);

    background:
        #fffaf5;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.product-card .price {
    color:
        var(--raspberry);

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 800;

    letter-spacing: .04em;
}


.product-card .product-meta {
    color:
        var(--muted);

    font-size:
        .92rem;
}


/* =========================================================
   CART
   ========================================================= */

.cart-line {
    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 1rem;

    padding:
        1rem 0;

    border-bottom:
        1px dashed rgba(169, 79, 107, .24);
}


.cart-line small {
    color:
        var(--muted);
}


.qty-controls {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        .35rem;
}


.qty-btn {
    width: 30px;
    height: 30px;

    border:
        1px solid #bc8a96;

    background:
        var(--vanilla);

    color:
        var(--raspberry-dark);

    font-weight: 700;

    transition:
        .15s ease;
}


.qty-btn:hover {
    background:
        var(--raspberry);

    color: #fff;

    border-color:
        var(--raspberry);
}


.cart-empty {
    color:
        var(--muted);

    font-style: italic;

    padding:
        1rem 0;
}


.total-row {
    display: flex;

    justify-content:
        space-between;

    font-size:
        1.25rem;

    padding-top:
        1rem;

    font-weight:
        700;

    color:
        var(--raspberry-dark);
}


/* =========================================================
   TOAST MESSAGE
   ========================================================= */

.toast-note {
    position: fixed;

    right: 1.2rem;
    bottom: 1.2rem;

    z-index: 1080;

    background:
        var(--raspberry);

    color:
        var(--cream);

    padding:
        .8rem 1rem;

    box-shadow:
        var(--shadow);

    transform:
        translateY(140%);

    transition:
        .25s ease;
}


.toast-note.show {
    transform:
        translateY(0);
}


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

.site-footer {
    color:
        rgba(255, 248, 237, .84);

    background-color:
        var(--walnut-dark);

    background-image:
        linear-gradient(
            rgba(40, 22, 20, .30),
            rgba(40, 22, 20, .30)
        ),
        url("../img/textures/wood.png");

    border-top:
        1px solid rgba(216, 143, 157, .50);

    padding:
        3rem 0 1.2rem;
}


.site-footer a {
    color:
        var(--strawberry-light);

    text-decoration: none;
}


.site-footer a:hover {
    color:
        var(--buttercream);
}


.footer-brand {
    color:
        var(--cream);

    font-size:
        1.8rem;
}


.attribution {
    font-size:
        .72rem;

    opacity: .68;
}


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

@media (max-width: 991.98px) {

    .site-navbar {
        background-color:
            var(--walnut-dark);
    }


    .brand-lockup {
        gap: 13px;

        margin-right: 0;
    }


    .logo-plaque {
        width: 135px;
        height: 78px;

        padding:
            10px 16px;
    }


    .brand-wordmark {
        font-size:
            1.25rem;
    }


    .brand-sub {
        font-size:
            .55rem;

        letter-spacing:
            .22em;
    }


    .site-navbar .navbar-collapse {
        border-top:
            1px solid
            rgba(255, 248, 237, .18);

        margin-top:
            .75rem;

        padding-top:
            .5rem;

        padding-bottom:
            .75rem;
    }


    .cart-pill {
        display:
            inline-block;
    }


    .hero {
        min-height:
            68vh;
    }

}


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

@media (max-width: 575.98px) {

    .brand-lockup {
        gap: 9px;

        margin-right: 0;
    }


    .logo-plaque {
        width: 95px;
        height: 58px;

        padding:
            7px 11px;
    }


    .brand-wordmark {
        font-size:
            .96rem;

        letter-spacing:
            .02em;
    }


    .brand-sub {
        margin-top:
            .25rem;

        font-size:
            .44rem;

        letter-spacing:
            .15em;
    }


    .hero-content {
        padding-top:
            9rem;
    }


    .section-pad {
        padding:
            4rem 0;
    }


    

}