/* === Root & Base ===================================================== */
/* === Sticky footer layout ========================================== */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh; /* use viewport height incl. mobile UI */
}

/* The wrapper + main area should expand to fill remaining space */
.products-wrapper {
    flex: 1 0 auto; /* take available vertical space */
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 1 auto; /* grow to push footer down when content is short */
    display: block; /* keep normal flow for your sections */
}

/* Footer naturally sits after main; this guarantees it pins at bottom on short pages */
.site-footer {
    margin-top: auto; /* push footer to the bottom */
}

:root {
    --mobile-scale: 1;
}

html {
    font-size: 16px;
}

@media (max-width: 36em) {
    html {
        font-size: calc(16px * var(--mobile-scale));
    }
}

html {
    font-size: 16px; /* desktop base (1rem = 16px) */
}

@font-face {
    font-family: "Eastman Condensed";
    src: url("/assets/fonts/Eastman-Condensed-Extrabold-trial.otf") format("otf"),
    url("/assets/fonts/Eastman-Condensed-Extrabold-trial.otf") format("otf");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Keep your existing resets */
*, *::before, *::after {
    box-sizing: border-box;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.7;
    background: #fffaf5;
    background-color: #fffdf9;
    margin: 0;
    padding: 0;
    color: #5b3e26;
    padding-top: 5.625rem; /* was 90px */
    overflow-x: hidden;
}

/* === Navbar Base & Transition === */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #753e1e;
    padding: 0.938rem 1.875rem;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

/* Hide on mobile when scrolling */
.navbar.scroll-hide {
    transform: translateY(-100%);
}

@media (max-width: 768px) {
    .navbar-mobile {
        display: block;
    }
}

/* Hide .navbar-mobile on desktop, show only on mobile */
.navbar-mobile {
    display: none;
}


/* === Navbar =========================================================== */
.navbar .container {
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.938rem 1.875rem; /* 15px 30px */
}

.navbar a {
    color: #fff;
    text-decoration: none;
    margin: 0 0.625rem; /* 0 10px */
}

.navbar .logo {
    margin-left: 8vw;
    font-size: 0.2vw;
    padding: 0.5rem 0;
}

.navbar .logo img {
    display: block;
    width: 4rem; /* 64px */
    height: 4rem; /* 64px */
    border-radius: 50%;
    background: #fff;
    padding: 0.563rem; /* 9px */
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.2);
}

.navbar .nav-links {
    display: flex;
    gap: 1.125rem; /* 18px */
    list-style: none;
    margin-right: 10vw;
    padding: 0;
}

.navbar .nav-links a {
    position: relative;
    font-size: 1rem;
    font-weight: 400;
    padding: 0.5rem 0; /* 8px 0 */
    transition: color 0.2s;
}

.navbar .nav-links a:hover {
    color: #f0c37d;
}

.navbar .nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -0.25rem; /* -4px */
    left: 0;
    right: 0;
    height: 0.1875rem; /* 3px */
    background: #f0c37d;
    border-radius: 0.125rem; /* 2px */
}

/* === Hero ============================================================ */
.hero {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 6vw;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100vw;
    height: 100vw;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(17, 17, 17, 0.4);
    z-index: 1;
}

.hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 50rem; /* 800px */
    padding: 0 1rem;
    margin-bottom: 5vw;
}

.hero-text h1 {
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding-left: 0;
}

.hero-text p {
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding-left: 0;
}

/* Homepage: keep hero text left-aligned even on mobile */
.home-hero .hero-text,
.home-hero .hero-text h1,
.home-hero .hero-text p {
    text-align: center;
}

/* Slight right offset for hero box */
.home-hero .hero-text {
    transform: translateX(4%);
}

@media (max-width: 48em) {
    .home-hero .hero-text {
        transform: translateX(2%);
    }

    .hero-text h1 {
        font-size: 2.6rem;
    }
}

@media (max-width: 36em) {
    .home-hero .hero-text {
        transform: translateX(0);
    }

    .hero-text h1 {
        font-size: 2.2rem;
    }
}

/* === Sections & Typography =========================================== */
.section-container {
    padding: 3.75rem 1.875rem; /* 60px 30px */
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
}

/* Ensure inner content never touches decorative edges */
.story-wrapper .section-container,
.story-wrapper1 .section-container,
.products-wrapper .section-container {
    padding-left: clamp(1rem, 6vw, 3rem);
    padding-right: clamp(1rem, 6vw, 3rem);
}

.section-title {
    font-size: 2.25rem;
    margin-left: 0;
    color: #753e1e;
    line-height: 4rem;
    text-align: center;
}

.section-container p.story-intro {
    padding: 4vw 3vw;
    font-size: 1.5rem;
    line-height: 1.4rem;
    font-weight: 600;
    color: #753e1e;
}

.section-container p.story {
    padding: 0 3vw;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 300;
    color: #753e1e;
}

.see-more {
    display: flex;
    justify-content: flex-end;
    margin-top: 2vw;
    font-size: 1.4rem;
    color: #4a3b2c;
}

.button {
    color: #4a3b2c;
    padding-right: 4vw;
    cursor: pointer;
    transition: background 0.3s ease;
    text-decoration: none;
}

.button-apply {
    background: #753e1e;
    color: #fff;
    padding: 1vw 1vw;
    border: none;
    border-radius: 0.5rem; /* 8px */
    font-weight: 500;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}

.button-apply:hover {
    background: #5a2f15;
    color: #f0c37d;
}

/* === Story & Products Backgrounds ==================================== */
.story-wrapper {
    width: 100%;
    background-image: url('/static/hero_media/home_background1.svg');
    background-size: cover;
    /*background-position: center;*/
    background-repeat: no-repeat;
}

.story-wrapper1 {
    width: 100%;
    background-image: url('/static/hero_media/home_background1_golqm.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.products-wrapper {
    width: 100%;
    background-image: url('/static/hero_media/home_background2.png');
    background-size: contain;
    background-position: center;
    background-repeat: repeat-y;
    background-color: #fffaf5;
}

/* === Footer ========================================================== */
.site-footer {
    background-image: url('/static/hero_media/footer.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #F4E8D9;
    color: #fff;
    padding: 2.5rem 1.875rem; /* 40px 30px */
    font-size: 0.9rem;
}

.site-footer h4 {
    font-size: 1.2rem;
}

.site-footer ul,
.site-footer p {
    font-size: 1rem;
    line-height: 2rem;
}

.site-footer p.socials {
    font-size: 2.3rem;
}

.site-footer p.copyright {
    display: flex;
    justify-content: center;
    text-align: center;
    font-weight: 350;
    line-height: 1.6rem;
}

.site-footer .footer-cols {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 10vw;
}

.footer-cols h4 {
    margin-bottom: 0.625rem; /* 10px */
    margin-left: 2vw;
    font-weight: bold;
}

.footer-cols a {
    color: #fff;
    text-decoration: none;
}

.site-footer .logo {
    display: flex;
    justify-content: space-around;
}

.site-footer .logo img {
    display: block;
    width: 5.312rem; /* 85px */
    height: 5.312rem; /* 85px */
    border-radius: 50%;
    background: #fff;
    padding: 0.75rem; /* 12px */
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.2);
}

/* === Timeline ======================================================== */
.timeline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem; /* 40px */
    margin-top: 1.25rem; /* 20px */
}

@media (max-width: 48em) {
    .timeline {
        gap: 1rem;
        padding: 0 1rem;
    }

    .timeline .event {
        max-width: none;
    }

    .timeline .year {
        font-size: 1.1rem;
    }
}

.timeline .event {
    text-align: center;
    max-width: 7.5rem; /* 120px */
}

.timeline .year {
    font-weight: bold;
    font-size: 1.3rem;
    color: #753e1e;
}

/* === Reviews ========================================================= */
.review-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.875rem; /* 30px */
    padding-top: 5vw;
}

/* Ensure long words do not overflow on tiny devices */
.intro-story, .text, .location-card, .review, .filter-block, .stat, .stat-block, .contact-info {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.review {
    background: #fff;
    border: 0.0625rem solid #d7a86e; /* 1px */
    padding: 1.25rem; /* 20px */
    width: 20rem; /* 320px */
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
}

/* === Filters Form =================================================== */
.filters-form {
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    gap: 1.5rem;
    margin: 2rem 0; /* top/bottom: 2rem, remove bottom:40px */
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem; /* 60px */
    justify-content: center;
}

.filter-block {
    line-height: 0.75rem;
    background: #fff8f1;
    padding: 1.25rem; /* 20px */
    border-radius: 0.625rem; /*10px*/
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
    min-width: 11.25rem; /*180px*/
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 1rem;
}

.filter-block h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #5a2f15;
    font-weight: 600;
}

.filter-block label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: #3e2a1d;
}

.filter-block select {
    width: 100%;
    padding: 0.4rem;
    border-radius: 0.375rem; /*6px*/
    border: 0.0625rem solid #ccc; /*1px*/
    background: #fff;
    font-size: 0.95rem;
}

.filter-block .button {
    display: inline-block;
    margin-top: 1rem;
    color: #753e1e;
    font-size: 0.9rem;
    text-decoration: underline;
}

.filter-block .button:hover {
    color: #5a2f15;
}

/* === Product Grid =================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.875rem; /*30px*/
}

.product-card {
    background: #fff;
    padding: 1.25rem; /*20px*/
    border-radius: 0.625rem; /*10px*/
    text-align: center;
    box-shadow: 0 0.125rem 0.3125rem rgba(243, 155, 80, 0.65);
}

/* Invisible placeholders for grid balancing */
.product-card.placeholder {
    visibility: hidden;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
}

.product-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
}

.product-card p {
    font-size: 1rem;
    font-weight: 400;
}

.product-card p.ingredients {
    font-size: 0.85rem;
    font-weight: 300;
    color: #d7a86e;
}

/* === Locations ====================================================== */
.location-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem; /*20px*/
    margin-bottom: 2.5rem; /*40px*/
}

.location-card {
    background: #fff8f1;
    padding: 1.25rem; /*20px*/
    border-radius: 0.625rem; /*10px*/
    width: 15.625rem; /*250px*/
    box-shadow: 0 0.5rem rgba(0, 0, 0, 0.05);
}

.location-card p {
    margin-bottom: 0.625rem; /*10px*/
}

/* === Franchise & Stats ============================================== */
.franchise-header {
    text-align: center;
    margin-bottom: 2.5rem; /*40px*/
}

.franchise-header h2 {
    font-size: 3rem;
    /*padding: 5vw 0 0 5vw;*/
}

.franchise-header p.title {
    font-size: 2rem;
    font-weight: 700;
    text-align: left;
}

.franchise-header p {
    font-size: 1.4rem;
    text-align: left;
}

.why-us {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem; /*40px*/
    margin-bottom: 2.5rem; /*40px*/
    padding: 4vw 10vw;
}

.franchise-page h2, .franchise-page h3 {
    font-size: 3rem;
    padding-left: 0;
    /*text-align: center;*/
}

.franchise-page h2 {
    padding-bottom: 10vw;
}

.franchise-page h3 {
    padding-top: 5vw;
}

.stat {
    text-align: center;
    width: 15.625rem; /*250px*/
    font-size: 1.2rem;
}

.stat p {
    font-size: 1rem;
    line-height: 1.2rem;
}

.stat p.title {
    font-size: 1.4rem;
    line-height: 1.4rem;
}

.success-stories {
    display: flex;
    justify-content: center;
    gap: 1.25rem; /*20px*/
    margin-bottom: 2.5rem; /*40px*/
}

.story-video {
    width: 15.625rem; /*250px*/
    height: 8.75rem; /*140px*/
    background: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: 0.625rem; /*10px*/
}

.steps {
    display: flex;
    justify-content: center;
    gap: 1.875rem; /*30px*/
    margin-bottom: 1.875rem; /*30px*/
}

.step {
    text-align: center;
}

.step strong {
    background: #753e1e;
    color: #fff;
    font-size: 1.5rem;
    padding: 0.625rem 0.9375rem; /*10px 15px*/
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 0.625rem; /*10px*/
}

.step h2 {
    font-size: 2rem;
    font-weight: 400;
}

.step p {
    font-size: 1.2rem;
    line-height: 1.4rem;
}

/* === Intro & Partners =============================================== */
.intro-story {
    max-width: 43.75rem; /*700px*/
    margin: 0 auto 2.5rem; /*40px*/
    text-align: center;
    font-size: 1.1rem;
}

.intro-story h1 {
    text-align: center;
    line-height: 2rem;
}

.intro-story p {
    font-size: 1.5rem;
    text-align: left;
    padding-bottom: 1vw;
}

.stats-strip {
    display: flex;
    justify-content: center;
    gap: 2.5rem; /*40px*/
    padding: 1.875rem 0; /*30px*/
    margin: 2.5rem 0; /*40px*/
    font-size: 1.2rem;
}

.stats-strip div {
    text-align: center;
    color: #753e1e;
}

.stats-strip strong {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.3125rem; /*5px*/
}

/* === Map Wrapper & Toggle =========================================== */
.custom-map-wrapper {
    text-align: center;
    margin-top: 1.875rem; /*30px*/
}

.map-toggle {
    cursor: pointer;
    background: #753e1e;
    color: #fff;
    padding: 0.75rem 1.25rem; /*12px 20px*/
    border-radius: 0.5rem; /*8px*/
    display: inline-block;
    transition: background 0.3s;
}

.map-toggle:hover {
    background: #5a2f15;
}

.custom-map {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    margin-top: 1.25rem; /*20px*/
}

.custom-map.open {
    max-height: 50rem; /*800px*/
    opacity: 1;
}

/* === History & Location Pages ======================================= */
.history-page h2,
.locations-page .section-title {
    padding-left: 0;
    font-size: 3.5rem;
    text-align: center;
}

/* === Main Layout & Sidebar ========================================== */
.layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.sidebar {
    width: 15.625rem; /*250px*/
    /*background-color: #fff7ef;*/
    padding: 1.25rem; /*20px*/
    font-family: 'Montserrat', sans-serif;
}

.main-content {
    flex-grow: 1;
}

.sidebar h4,
.sidebar h2 {
    color: #6d320c;
    font-weight: bold;
    margin-bottom: 0.625rem; /*10px*/
    text-transform: uppercase;
}

.sidebar label {
    display: block;
    margin-bottom: 0.5rem; /*8px*/
    font-size: 0.9375rem; /*15px*/
    color: #4b2e1f;
}

.sidebar input[type="checkbox"],
.sidebar input[type="radio"] {
    accent-color: #a75515;
    margin-right: 0.5rem; /*8px*/
}

.sidebar a.button {
    background-color: #6d320c;
    color: #fff;
    border: none;
    padding: 0.5rem 0.9375rem; /*8px 15px*/
    border-radius: 0.25rem; /*4px*/
    display: inline-block;
    margin-top: 0.9375rem; /*15px*/
    font-weight: bold;
    transition: background 0.3s;
}

.sidebar a.button:hover {
    background-color: #8b4513;
}

/* === Buttons & Extras =============================================== */
.button2 {
    background: #753e1e;
    color: #fff;
    padding: 0.6rem 3.5rem;
    border: none;
    border-radius: 1.125rem; /*18px*/
    font-size: 1.8rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
    text-decoration: none;
}

.button2:hover {
    background: #5a2f15;
    color: #f0c37d;
}

.center-button {
    display: flex;
    justify-content: center;
    padding-bottom: 2vw;
}

.text p {
    font-size: 1.2rem;
    font-weight: 400;
    padding-left: 2vw;
}

.text h2 {
    font-size: 1.4rem;
    font-weight: 750;
    padding: 3vw 2vw 0 2vw;
}

.text li {
    font-size: 1.2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
    padding: 4rem 1rem;
    align-items: start;
}

.stat-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 20rem; /*320px*/
    /* height: 25vw; */
    margin: 0 auto;
    padding-top: 8vw;
}

.counter {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 5rem;
}

.stat-title {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0.8rem;
    line-height: 1.5rem;
    text-transform: uppercase;
}

.stat-description {
    font-size: 1.2rem;
    line-height: 1.6;
}

/* === Map & Contact ================================================== */
#map {
    height: 25rem; /*400px*/
    width: 100%;
    max-width: 56.25rem; /*900px*/
    margin: 2rem auto;
    border-radius: 0.75rem; /*12px*/
    z-index: 1;
}

.contact-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.custom-map-wrapper {
    flex: 1 1 60%;
    min-width: 20rem; /*320px*/
}

.contact-map {
    height: 25rem; /*400px*/
    width: 100%;
    border-radius: 0.625rem; /*10px*/
    /*box-shadow: 0 0.5rem rgba(0, 0, 0, 0.15);*/
}

.contact-info {
    flex: 1 1 35%;
    font-size: 1.1rem;
    color: #5a2f0a;
    line-height: 1.6;
}

.contact-info a {
    color: #753e1e;
    text-decoration: none;
}

/* === Responsive Breakpoints ========================================= */
@media (max-width: 75em) {
    /*1200px*/
    /* large screens tweaks if needed */
}

@media (max-width: 62.5em) {
    /*1000px*/
    /* tablet tweaks */
    .section-container {
        padding-left: clamp(1rem, 5vw, 2rem);
        padding-right: clamp(1rem, 5vw, 2rem);
    }

    /* 3 columns on medium screens */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* font tuning */
    .section-title {
        font-size: 2rem;
    }

    .hero-text h1 {
        font-size: 2.2rem;
    }

    .hero-text p {
        font-size: 1.25rem;
    }
}

@media (max-width: 48em) {
    /*768px*/
    .filters {
        flex-direction: column;
        align-items: center;
    }

    .contact-flex {
        flex-direction: column;
    }

    .contact-map {
        height: 18.75rem; /*300px*/
        margin: 2rem 1rem; /* keep away from decorative edge */
        width: calc(100% - 2rem);
    }

    .location-grid {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .location-card {
        width: 90vw;
        min-width: 0;
        max-width: 28rem;
        min-height: 12.5rem;
        margin: 0 auto 1rem auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Why-us text sizing on mobile while keeping 3 columns */
    .why-us .stat p {
        font-size: 1.1rem;
    }

    .why-us .stat p.title {
        font-size: 1.3rem;
    }

    /* Steps alignment fix */
    .steps {
        align-items: start;
    }

    .step p {
        line-height: 1.3rem;
    }

    /* 2 columns on tablets */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* font tuning */
    .section-title {
        font-size: 1.8rem;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-text p {
        font-size: 1.1rem;
    }
}

@media (max-width: 36em) {
    /*576px*/
    .navbar .container {
        flex-direction: column;
        padding: 1rem;
    }

    .navbar .nav-links {
        flex-direction: column;
        gap: 1rem;
        margin: 1rem 0;
    }

    .hero-text h1 {
        font-size: 2rem;
        padding-left: 0;
    }

    .hero-text p {
        font-size: 1.25rem;
        padding-left: 0;
    }

    .section-container {
        padding: 2rem 1rem;
    }

    .location-card {
        width: 98vw;
        max-width: 100%;
        min-height: 12.5rem;
        margin: 0 auto 1rem auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* 1 column on phones */
    .product-grid {
        grid-template-columns: 1fr;
    }

    /* font tuning */
    .section-title {
        font-size: 1.6rem;
    }

    .hero-text h1 {
        font-size: 1.8rem;
    }

    .hero-text p {
        font-size: 1rem;
    }
}

/*LATEST Media Handler*/

/* ---------------------------------------------------
   Tablet tweaks (max-width: 48em / 768px)
   --------------------------------------------------- */
@media (max-width: 48em) {
    /* 1. make "Виж всички" / "Научи още" smaller & consistent */
    .see-more {
        font-size: 1.2rem; /* ← tweak: down from 1.4rem */
    }

    /* 2. product grid padding to avoid overlap */
    .product-grid {
        padding: 1rem; /* ← tweak: adds breathing room */
    }

    .product-card {
        width: calc(50% - 1rem); /* ← tweak: two cards per row */
        margin-bottom: 1rem; /* ← tweak: vertical gutter */
    }

    /* 3. map side padding so it never hits the edges */
    #map {
        margin: 2rem 1rem; /* ← tweak: horizontal inset */
        width: calc(100% - 2rem); /* ← tweak: account for margin */
    }

    .contact-map {
        margin: 2rem 1rem;
        width: calc(100% - 2rem);
    }
}

/* ---------------------------------------------------
   Phone tweaks (max-width: 36em / 576px)
   --------------------------------------------------- */
@media (max-width: 36em) {
    .see-more {
        font-size: 1rem; /* ← tweak: even smaller for phones */
    }

    .product-grid {
        padding: 0.5rem; /* ← tweak: tighter on tiny screens */
    }

    .product-card {
        width: 100%; /* ← tweak: single-column layout */
        margin-bottom: 1rem;
    }

    #map {
        margin: 2rem 0.5rem; /* ← tweak: less side inset */
        width: calc(100% - 1rem);
        /* optionally shrink height too:
        height: 15rem;            /* ← tweak: make map shorter */
    }

    .contact-map {
        margin: 2rem 0.5rem;
        width: calc(100% - 1rem);
    }
}

/* === Hamburger Icon === */
.hamburger {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 40px;
    min-height: 40px;
    cursor: pointer;
    z-index: 1100;
}

.hamburger span,
.hamburger svg {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    /* background: #fff; */
    /* margin: 0.4rem 0; */
    border-radius: 6px;
    transition: 0.4s;
}

/* === Off-canvas Menu & Overlay === */
.offcanvas-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 70vw;
    max-width: 300px;
    transform: translateX(-100%);
    display: flex;
    flex-direction: column;
    background: #753e1e;
    padding: 2rem 1.5rem;
    transition: transform 0.3s ease;
    z-index: 1200;
}

.offcanvas-menu.open {
    transform: translateX(0);
}

.menu-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1199;
}

.menu-overlay.open {
    display: block;
}

/* === Nav-link Styling (still used inside offcanvas) === */
.offcanvas-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    margin: 1rem 0;
}


/* === Decorative bread & crumbs ===================================== */
.story,
.locations-summary,
.franchise-cta {
    position: relative; /* allow absolute children */
}

/* Prevent decor from hijacking clicks (map/popups etc.) */
.decor img {
    pointer-events: none;
    user-select: none;
    display: block;
    max-width: none;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .15));
}

/* --- Our Story (baguette + big crumbs on the right) --- */
.decor-story .decor-baguette {
    position: absolute;
    right: clamp(-70px, -6vw, -120px);
    top: clamp(-10px, -1vw, 20px);
    width: clamp(260px, 32vw, 520px);
    transform: rotate(6deg);
    z-index: 2;
}

.decor-story .decor-crumbs-large {
    position: absolute;
    right: clamp(30px, 10vw, 160px);
    top: clamp(-40px, -3vw, 0px);
    width: clamp(220px, 28vw, 460px);
    opacity: .95;
    z-index: 1;
}

/*!* --- Locations (small crumbs on the left) --- *!*/
/*.decor-locations .decor-crumbs-left {*/
/*    position: absolute;*/
/*    left: clamp(-40px, -6vw, -80px);*/
/*    top: clamp(-30px, -3vw, 10px);*/
/*    width: clamp(160px, 22vw, 360px);*/
/*    opacity: .85;*/
/*    z-index: 0;*/
/*}*/

/* --- Franchise CTA (crumbs on the right/bottom) --- */
.decor-franchise .decor-crumbs-right {
    position: absolute;
    right: clamp(-30px, -4vw, -60px);
    bottom: clamp(-20px, -2vw, 0px);
    width: clamp(180px, 24vw, 380px);
    opacity: .9;
    z-index: 0;
}

/* --- Keep content above decor if they overlap --- */
.story > *, .locations-summary > *, .franchise-cta > * {
    position: relative;
    z-index: 5;
}

/* --- Responsive: tone down or hide on small screens --- */
@media (max-width: 992px) {
    .decor-story .decor-baguette {
        width: min(48vw, 420px);
        right: -6vw;
    }

    .decor-story .decor-crumbs-large {
        width: min(40vw, 380px);
        right: 6vw;
    }

    .decor-locations .decor-crumbs-left {
        width: min(34vw, 300px);
    }

    .decor-franchise .decor-crumbs-right {
        width: min(36vw, 320px);
    }
}

@media (max-width: 768px) {
    /* hide big decor to keep text readable on phones */
    .decor img {
        display: none;
    }
}


/* ============================================================
   ★ VISUAL TWEAK PACK v1 — match reference mock more closely
   (all rules below override earlier ones safely)
   ============================================================ */

/* ★ HERO: slightly shorter on desktop; cleaner vertical offset */
.home-hero.hero {
    height: 72vh; /* was 80vh */
    padding-top: 4.5vw; /* was 6vw */
}

@media (max-width: 48em) {
    .home-hero.hero {
        height: 60vh;
        padding-top: 6vw;
    }
}

/* ★ Section titles: a touch stronger like the mock */
.section-title {
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* ★ Product cards: framed thumb + softer text rhythm */
.product-card {
    padding-top: 1.5rem;
}

.product-card .thumb { /* NEW */
    width: 100%;
    max-width: 210px;
    height: 150px;
    margin: 0 auto 0.85rem auto;
    background: #fff8ec;
    border: 1px solid #f0d6ad;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
    0 6px 14px rgba(243, 155, 80, 0.20);
    display: grid;
    place-items: center;
}

.product-card .thumb img { /* NEW */
    max-height: 120px;
    width: auto;
    object-fit: contain;
    transform: translateY(2px);
}

.product-card h3 {
    margin: 0.35rem 0 0.25rem;
    font-size: 1.15rem;
}

.product-card p {
    margin: 0.15rem 0;
}

.product-card p.ingredients {
    margin-top: 0.25rem;
}

/* ★ Story/crumbs positions – lighter & farther from text */
.decor-story .decor-baguette { /* same selectors, softer scale/offsets */
    right: clamp(-40px, -4vw, -90px);
    top: clamp(-8px, -0.5vw, 16px);
    width: clamp(220px, 27vw, 480px);
    transform: rotate(4deg);
}

.decor-story .decor-crumbs-large {
    right: clamp(24px, 8vw, 140px);
    top: clamp(-34px, -2.5vw, -2px);
    width: clamp(200px, 24vw, 420px);
    opacity: .88;
}

/* ★ Locations crumbs a touch smaller so map stays readable */
.decor-locations .decor-crumbs-left {
    width: clamp(140px, 18vw, 320px);
    opacity: .82;
}

/* ★ Franchise crumbs slightly lower to match mock */
.decor-franchise .decor-crumbs-right {
    bottom: clamp(-28px, -2.8vw, -4px);
}

/* ★ Map frame like the mock (soft border + shadow) */
#map {
    border: 1px solid #f3d9b1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    border-radius: 12px;
}

/* ★ Reviews: card look + consistent star icons */
.review {
    border-radius: 12px;
    border: 1px solid #f0d6ad;
    box-shadow: 0 6px 14px rgba(243, 155, 80, 0.18);
    font-weight: 600;
}

.review .fa-star {
    margin: 0 1px;
    font-size: 0.95rem;
    color: #d7a86e;
}


/* ============================================================
   ★ BAGUETTE + CRUMBS — match reference scale & placement
   ============================================================ */

/* Put decor under section content but with nice depth */
.decor-story img {
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
}

/* ★ Big baguette on the right (sliced bread look & rotation) */
.decor-story .decor-baguette {
    position: absolute;
    right: clamp(-180px, -12vw, -240px); /* push into the margin like the mock */
    top: clamp(-20px, -1.2vw, 24px);
    width: clamp(520px, 44vw, 880px); /* BIG like the mock */
    transform: rotate(6deg);
    z-index: 3; /* above crumbs */
    opacity: .98;
}

/* ★ Large crumb field behind the baguette */
.decor-story .decor-crumbs-large {
    position: absolute;
    right: clamp(120px, 16vw, 260px); /* sits “under” the baguette */
    top: clamp(-48px, -3.2vw, -6px);
    width: clamp(420px, 34vw, 680px);
    z-index: 2; /* below baguette */
    opacity: .92;
}

/* ★ NEW: small splash over the title (center) */
.decor-story .decor-crumbs-splash {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    top: -22px; /* just above the heading */
    width: clamp(300px, 28vw, 560px);
    z-index: 4; /* above crumbs, below text (see next rule) */
    opacity: .95;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .08));
}

/* Keep content always above decor so text stays readable */
.story > * {
    position: relative;
    z-index: 5;
}

/* Responsive tuning: hide big art on small screens to keep layout clean */
@media (max-width: 992px) {
    .decor-story .decor-baguette {
        width: min(70vw, 560px);
        right: -10vw;
        top: -6px;
    }

    .decor-story .decor-crumbs-large {
        width: min(54vw, 480px);
        right: 12vw;
        top: -20px;
    }

    .decor-story .decor-crumbs-splash {
        width: min(44vw, 420px);
        top: -14px;
    }
}

@media (max-width: 768px) {
    .decor-story .decor-baguette,
    .decor-story .decor-crumbs-large {
        display: none;
    }

    /* big art off on phones */
    .decor-story .decor-crumbs-splash {
        width: 62vw;
        top: -10px;
        opacity: .9;
    }
}

/*!* === OUR STORY — final, consolidated rules ========================= *!*/

/*!* Layout: title & copy on the left, art on the right *!*/
/*.story {*/
/*    position: relative;*/
/*}*/

/*.story-two-col {*/
/*    display: grid;*/
/*    grid-template-columns: minmax(0, 52ch) 1fr; !* left column locked to readable width *!*/
/*    gap: clamp(1.25rem, 3.5vw, 3rem);*/
/*    align-items: start;*/
/*}*/

/*.story-copy {*/
/*    max-width: 52ch;*/
/*}*/

/*.story .section-title {*/
/*    text-align: left;*/
/*    margin: 0 0 .25rem 0;*/
/*    font-weight: 800;*/
/*}*/

/*!* Keep paragraphs tight under the title *!*/
/*.section-container p.story-intro,*/
/*.section-container p.story {*/
/*    padding: 0; !* ← removes the big horizontal padding *!*/
/*    margin: .5rem 0 1rem 0; !* pleasant rhythm like the mock *!*/
/*}*/

/*!* Base for all “decor-story” images *!*/
/*.decor-story {*/
/*    position: relative;*/
/*}*/

/*.decor-story img {*/
/*    position: absolute;*/
/*    max-width: none;*/
/*    pointer-events: none;*/
/*    user-select: none;*/
/*    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));*/
/*}*/

/*!* 1) Crumb splash over the title (sits behind text) *!*/
/*.decor-story .decor-crumbs-splash {*/
/*    left: clamp(1rem, 6vw, 3rem); !* aligns with section’s inner padding *!*/
/*    top: -8px;*/
/*    width: clamp(320px, 30vw, 560px);*/
/*    transform: rotate(-4deg);*/
/*    z-index: 1; !* under the text *!*/
/*    opacity: .95;*/
/*}*/

/* 2) TOP-RIGHT baguette cluster (Bread.png) */
.decor-story .decor-baguette {
    right: clamp(7%, 9vw, 160px);
    top: clamp(18px, 2.2vw, 36px);
    width: clamp(280px, 26vw, 420px);
    transform: rotate(-8deg);
    z-index: 3; /* above crumbs & sliced loaf */
    opacity: .98;
}

/* 3) BOTTOM-RIGHT sliced loaf (Bread2.png) */
.decor-story .decor-crumbs-large {
    right: clamp(-12px, -2vw, -24px); /* hangs slightly into the decorative edge */
    top: clamp(210px, 24vw, 320px); /* vertically around the middle like the mock */
    width: clamp(300px, 28vw, 520px);
    transform: rotate(8deg);
    z-index: 2; /* below the top baguette, above the splash */
    opacity: .98;
}

/*!* Make sure story content is always above background splash *!*/
/*.story > * {*/
/*    position: relative;*/
/*    z-index: 5;*/
/*}*/

/*!* Tablet: scale slightly down, maintain composition *!*/
/*@media (max-width: 1100px) {*/
/*    .decor-story .decor-baguette {*/
/*        right: clamp(60px, 7vw, 120px);*/
/*        width: clamp(260px, 26vw, 400px);*/
/*    }*/

/*    .decor-story .decor-crumbs-large {*/
/*        right: clamp(-8px, -1.5vw, -20px);*/
/*        top: clamp(180px, 22vw, 280px);*/
/*        width: clamp(280px, 30vw, 480px);*/
/*    }*/
/*}*/

/*!* Phone: keep only the subtle splash so text stays readable *!*/
/*@media (max-width: 768px) {*/
/*    .decor-story .decor-baguette,*/
/*    .decor-story .decor-crumbs-large {*/
/*        display: none;*/
/*    }*/

/*    .decor-story .decor-crumbs-splash {*/
/*        width: 60vw;*/
/*        top: -8px;*/
/*        opacity: .85;*/
/*    }*/
/*}*/


/* === STORY — final layout & spacing (matches reference) =============== */
.story {
    position: relative;
    padding-block: clamp(64px, 8vw, 120px); /* more vertical space */
}

.story-two-col {
    display: grid;
    grid-template-columns: minmax(0, 52ch) 1fr; /* fixed text column, free art column */
    gap: clamp(28px, 5vw, 56px);
    align-items: start;
}

.story-copy {
    max-width: 52ch;
}


.story .section-title {
    text-align: left;
    margin: 0 0 .5rem 0;
    font-weight: 800;
    font-size: clamp(40px, 3.4vw, 56px);
    line-height: 1.1;
    letter-spacing: .02em;
}

.story .story-intro {
    margin: .25rem 0 1rem 0;
    font-weight: 700; /* small bold line under title */
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.5;
    color: #5b3e26;
}

.story .story {
    margin: 0;
    font-weight: 300;
    font-size: clamp(16px, 1.1vw, 20px);
    line-height: 1.8; /* easier reading, more air */
    color: #5b3e26;
}

.timeline {
    margin-top: clamp(28px, 6vw, 56px); /* pushes line away from copy */
}

/* Keep all text safely above decor */
.story .section-title,
.story .story-intro,
.story .story {
    position: relative;
    z-index: 5;
}

/* === STORY decor — fixed, non-overlapping placement =================== */
.decor img {
    pointer-events: none;
    user-select: none;
    max-width: none;
}

.decor-story .decor-baguette {
    position: absolute;
    z-index: 2; /* above bottom loaf */
    right: clamp(80px, 9vw, 160px);
    top: clamp(8px, 1.8vw, 28px);
    width: clamp(320px, 28vw, 520px);
    transform: translateX(50%) rotate(-10deg);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
    opacity: .98;
}

.decor-story .decor-crumbs-large { /* Bread2.png (sliced loaf) */
    position: absolute;
    z-index: 1; /* under top baguette, above bg */
    right: clamp(8px, 4vw, 64px);
    bottom: clamp(120px, 12vw, 180px); /* sits above the timeline */
    width: clamp(340px, 25vw, 560px);
    transform: translateX(35%) rotate(7deg);
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .14));
    opacity: .98;
}

/* === Responsiveness ==================================================== */
@media (max-width: 1100px) {
    .decor-story .decor-baguette {
        right: clamp(40px, 6vw, 96px);
        width: clamp(260px, 26vw, 420px);
        display: none;
    }

    .decor-story .decor-crumbs-large {
        right: clamp(0px, 2vw, 32px);
        bottom: clamp(90px, 10vw, 140px);
        width: clamp(280px, 30vw, 480px);
        display: none;
    }
}

@media (max-width: 768px) {
    /* hide big art on phones; keep layout clean */
    .decor-story .decor-baguette,
    .decor-story .decor-crumbs-large {
        display: none;
    }

    .timeline {
        margin-top: 24px;
    }
}


/* === Popular products — spacing + title like the mock =============== */
.popular-products {
    position: relative;
    /* extra headroom so crumbs never collide with the title/cards */
    padding-top: clamp(72px, 8vw, 120px);
    padding-bottom: clamp(28px, 4.5vw, 56px);
}

/* Left-aligned two-line title, same feel as the mock */
.popular-products .section-title {
    text-align: left;
    margin: 0 0 clamp(12px, 1.4vw, 18px) 0;
    font-size: clamp(40px, 3.2vw, 56px);
    line-height: 1.1;
    letter-spacing: .02em;
    font-weight: 800;
}

/* Push grid away from the title a bit (like the mock) */
.popular-products .product-grid {
    margin-top: clamp(8px, 1.2vw, 16px);
}

/* Keep actual content above the background image */
.popular-products > * {
    position: relative;
    z-index: 2;
}

/* === Popular products — crumbs splash image ========================= */
.decor-popular img {
    pointer-events: none;
    user-select: none;
    display: block;
    max-width: none;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .08));
}

/* Popular Products — crumbs sizing locked to the section width */
.decor-popular .crumbs-top {
    position: absolute;
    left: 40%;
    transform: translateX(65%) rotate(-6deg) translateY(-15%);
    /* scale by section width, not viewport */
    width: clamp(520px, 68%, 920px);
    /* extra safety so it never hugs the cards/edges */
    max-width: calc(57% - 8rem);
    top: clamp(-90px, -6vw, -14px); /* floats above the title */
    opacity: .95;
    z-index: 1; /* stays behind title/cards */
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .08));
}

@media (max-width: 992px) {
    .decor-popular .crumbs-top {
        display: none;
    }
}

@media (max-width: 768px) {
    .decor-popular .crumbs-top {
        width: 86%;
        top: -18px;
        opacity: .9;
    }
}


/* Slightly tighter vertical rhythm inside cards */
.popular-products .product-card {
    padding-top: 1.1rem;
}

.popular-products .product-card h3 {
    margin-top: .3rem;
}


/* === LOCATIONS (Обекти) — spacing + title + bread art ================= */

/* give the section headroom so the bread never touches title/map */
.locations-summary {
    position: relative;
    padding-top: clamp(84px, 9vw, 140px);
    padding-bottom: clamp(28px, 4vw, 52px);
}

/* keep all real content above the decorative image */
.locations-summary > * {
    position: relative;
    z-index: 2;
}

/* left-aligned, two-line-ish strength like the mock */
.locations-summary .section-title {
    text-align: left;
    margin: 0 0 clamp(90px, 1.4vw, 18px);
    font-size: clamp(40px, 3.2vw, 56px);
    line-height: 1.1;
    letter-spacing: .02em;
    font-weight: 800;
}

/* the Bread.png composition centered above the section */
.decor-locations .decor-bread-top {
    position: absolute;
    left: 50%;
    transform: translateX(65%) translateY(-15%) rotate(0deg); /* subtle skew like the design */
    top: clamp(-45px, -5.5vw, -12px); /* floats above title */
    width: clamp(520px, 64%, 920px); /* scales with section width */
    max-width: calc(50% - 11rem); /* never hit edge decorations */
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
    opacity: .98;
    pointer-events: none;
    user-select: none;
    z-index: 1; /* behind title/map */
}

/* Map already styled; just a tiny nudge of space below the title */
.locations-summary #map {
    margin-top: clamp(10px, 1.2vw, 18px);
}

/* tone down/hide big decor on phones so the map stays readable */
@media (max-width: 768px) {
    .decor-locations .decor-bread-top {
        width: 86%;
        top: -18px;
        opacity: .9;
    }
}


.franchise-cta {
    position: relative;
    padding-block: clamp(56px, 7.5vw, 110px);
}

.franchise-cta > * {
    position: relative; /* keep text above decor */
    z-index: 2;
}

/* Big, left-aligned, bold two-line title */
.franchise-cta .section-title {
    text-align: left;
    margin: 0 0 clamp(10px, 1.4vw, 18px);
    font-size: clamp(40px, 3.2vw, 56px);
    line-height: 1.08;
    letter-spacing: .02em;
    font-weight: 800;
    color: #753e1e;
}

/* Bold lead line under the title */
.franchise-cta .partner-title {
    margin: 0 0 .5rem 0;
    max-width: 46ch;
    font-size: clamp(16px, 1.1vw, 20px);
    line-height: 1.5;
    font-weight: 700;
    color: #5b3e26;
}

/* Regular paragraph copy */
.franchise-cta .partner-text {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.7;
    font-weight: 400;
    color: #5b3e26;
}

/* Right-aligned CTA, a touch of breathing room */
.franchise-cta .see-more {
    margin-top: clamp(16px, 2vw, 24px);
    justify-content: flex-end;
}

/* Decorative sliced bread (Bread2.png) top-right like the mock */
.decor-franchise .decor-bread-sliced {
    position: absolute;
    right: clamp(40px, 8vw, 140px);
    top: clamp(-12px, -1.2vw, 18px);
    width: clamp(220px, 26vw, 440px);
    transform: rotate(0deg) translate(30%, -15%);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
    opacity: .98;
    z-index: 1; /* behind text */
    pointer-events: none;
    user-select: none;
}

/* Responsiveness: tame/disable the decor on small screens */
@media (max-width: 992px) {
    .decor-franchise .decor-bread-sliced {
        right: clamp(20px, 6vw, 80px);
        width: clamp(200px, 32vw, 360px);
    }
}

@media (max-width: 768px) {
    .decor-franchise .decor-bread-sliced {
        display: none;
    }
}


/* === REVIEWS — match mock ========================================= */
.reviews {
    position: relative;
    padding-top: clamp(56px, 7vw, 96px);
    padding-bottom: clamp(28px, 4.5vw, 56px);
}

.reviews > * {
    position: relative;
    z-index: 2;
}

/* Title: left, bold, two-line feel */
.reviews .section-title {
    text-align: left;
    margin: 0 0 clamp(16px, 2vw, 24px);
    font-size: clamp(40px, 3.2vw, 56px);
    line-height: 1.08;
    letter-spacing: .02em;
    font-weight: 800;
    color: #753e1e;
}

/* Cards row spacing */
.review-grid {
    display: flex;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 28px);
}

/* Card look */
.review {
    background: #fff;
    border: 1px solid #f0d6ad;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(243, 155, 80, 0.18);
    width: clamp(220px, 24vw, 320px);
    padding: 0.9rem 1rem 1.1rem;
    text-align: center;
    font-weight: 600;
    font-style: italic;
}

/* Stars */
.review .fa-star {
    margin: 0 1px;
    font-size: 0.95rem;
    color: #d7a86e;
}

/* CTA right-aligned */
.reviews .see-more {
    margin-top: clamp(16px, 2vw, 24px);
    justify-content: flex-end;
}

/* Crumbs bottom-left */
.decor-reviews .crumbs-bottom-left {
    position: absolute;
    left: clamp(-40px, -6vw, -80px);
    bottom: clamp(-32px, -3vw, -8px);
    width: clamp(260px, 34vw, 520px);
    opacity: .92;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .08));
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* Mobile: keep it clean */
@media (max-width: 768px) {
    .review-grid {
        justify-content: center;
    }

    .decor-reviews .crumbs-bottom-left {
        display: none;
    }
}

/* Reviews — layout + title like the mock */
.reviews {
    position: relative;
    padding-top: clamp(56px, 7vw, 96px);
    padding-bottom: clamp(24px, 4vw, 48px);
}

/* Keep real content above the decorative image */
.reviews > * {
    margin-bottom: 5%;
    position: relative;
    z-index: 2;
    padding-bottom: 2%;
}

.reviews .section-title {
    text-align: left;
    margin: 0 0 clamp(16px, 1.6vw, 24px);
    font-size: clamp(40px, 3.2vw, 56px);
    line-height: 1.1;
    letter-spacing: .02em;
    font-weight: 800;
    color: #753e1e;
}

/* Crumbs pinned to bottom-left of the reviews section */
.decor-reviews .crumbs-bottom-left {
    position: absolute;
    left: clamp(8px, 2vw, 28px);
    bottom: clamp(8px, 2vw, 28px);
    width: clamp(240px, 30vw, 520px);
    opacity: .95;
    z-index: 1; /* behind cards & text */
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .08));
    transform: rotate(0deg) translate(-20%, 65%);;
}

/* Tame on smaller screens so it stays subtle in the corner */
@media (max-width: 992px) {
    .decor-reviews .crumbs-bottom-left {
        width: clamp(220px, 34vw, 380px);
    }
}

@media (max-width: 768px) {
    .decor-reviews .crumbs-bottom-left {
        width: 52vw;
        left: 6px;
        bottom: 6px;
        opacity: .9;
    }
}

/* =======================
   HISTORY — HERO (split)
   ======================= */
.history-hero {
    position: relative;
    padding-top: clamp(28px, 3vw, 36px);
}

.history-hero .section-title {
    text-align: left;
    margin-bottom: clamp(12px, 1.6vw, 18px);
    padding-bottom: 5vw;
}

.history-hero-grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: clamp(18px, 3.5vw, 44px);
    align-items: start;
}

.hero-media .img-knead {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid #f0d6ad;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    background: #fff8ec;
}

/* copy side matches the mock’s rhythm */
.history-hero .hero-copy {
    text-align: left;
    max-width: 58ch;
}

.history-hero .hero-copy h1 {
    font-size: clamp(18px, 1.25vw, 22px);
    line-height: 1.55;
    margin: 0 0 .35rem 0;
    font-weight: 700;
}

.history-hero .hero-copy p {
    font-size: clamp(16px, 1.1vw, 19px);
    line-height: 1.8;
    margin: .25rem 0 .6rem;
    font-weight: 400;
}

.history-hero .hero-copy .lead-strong {
    margin-top: .6rem;
    font-weight: 800;
}

/* top-right decorative bread (bread.png) */
.bread-decor {
    position: absolute;
    right: clamp(-32px, -3vw, -60px);
    top: clamp(46px, -1.5vw, 8px);
    width: clamp(180px, 22vw, 340px);
    transform: rotate(-8deg);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
    opacity: .98;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* tighten the timeline under the hero like the mock */
.history-page .timeline {
    margin-top: clamp(16px, 3vw, 28px);
}

/* =============================
   HISTORY — MISSION & VISION
   (text left, stacked images right)
   ============================= */
.mission-vision {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(22px, 4vw, 56px);
    align-items: start;
    padding-block: clamp(24px, 4vw, 40px);
}

.mission-vision .mv-copy h3 {
    margin: .25rem 0 .35rem;
    font-weight: 800;
    font-size: clamp(18px, 1.25vw, 22px);
}

.mission-vision .mv-copy p {
    margin: .15rem 0 .6rem;
    line-height: 1.8;
    font-size: clamp(15px, 1.05vw, 18px);
    color: #5b3e26;
}

.mission-vision .mv-cta {
    margin-top: .8rem;
    font-size: clamp(16px, 1.15vw, 20px);
    /*font-weight: 800;*/
    font-family: "Eastman Condensed", sans-serif;
}

/* image stack */
.mission-vision .mv-media {
    padding-top: 4vw;
    position: relative;
    min-height: 480px;
}

.mission-vision .mv-main {
    position: relative;
    width: 78%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid #f0d6ad;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
    transform: translateX(14%);
    background: #fff8ec;
}

.mission-vision .mv-small {
    position: absolute;
    bottom: -6%;
    right: 2%;
    width: 54%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid #f0d6ad;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .14);
    transform: rotate(3deg);
    background: #fff;
}

/* =============== Responsive =============== */
@media (max-width: 992px) {
    .history-hero-grid {
        grid-template-columns: 1fr;
    }

    .bread-decor {
        width: 42vw;
        right: -16px;
        top: -8px;
        opacity: .9;
        display: none;
    }

    .mission-vision {
        grid-template-columns: 1fr;
    }

    .mission-vision .mv-media {
        min-height: 380px;
        margin-top: .5rem;
    }

    .mission-vision .mv-main {
        width: 86%;
        transform: translateX(7%);
    }

    .mission-vision .mv-small {
        width: 58%;
        right: 6%;
        bottom: -8%;
    }
}

@media (max-width: 768px) {
    .history-hero .hero-copy h1 {
        font-size: 1rem;
    }

    .history-hero .hero-copy p {
        font-size: 0.98rem;
    }

    .bread-decor {
        display: none;
    }

    /* keep small screens clean like the mock */
}

/* Hide History page's new images on mobile (<768px) */
@media (max-width: 768px) {

    /* by class (safest, matches your template) */
    .history-hero .img-knead,
    .history-hero .bread-decor,
    .mission-vision .mv-main,
    .mission-vision .mv-small {
        display: none !important;
    }

    /* also hide the wrappers so they don't keep height */
    .history-hero .hero-media,
    .mission-vision .mv-media {
        display: none !important;
        min-height: 0 !important;
    }

    /* optional: filename fallback in case classes change */
    img[src*="knead.png"],
    img[src*="bread.png"],
    img[src*="baked_goods.webp"],
    img[src*="baked_goods2.png"],
    img[src*="baked_goods.png"] { /* if you ever use this name */
        display: none !important;
    }
}


/* =========================================================
   FRANCHISE — CLEAN, EXACT PLACEMENT (matches your mock)
   ========================================================= */

/* Scope all headings on this page */
.franchise-page .section-title {
    text-align: left;
    margin: 0 0 .5rem 0;
    font-weight: 800;
    font-size: clamp(44px, 4.8vw, 72px);
    line-height: 1.06;
}

/* ---------------- HERO ---------------- */
.section-container.franchise-hero {
    position: relative;
    max-width: 1200px;
    padding: clamp(28px, 3.5vw, 48px) 1.875rem clamp(10px, 1.5vw, 20px);
}

.fr-hero-copy {
    position: relative;
    max-width: 680px; /* comfortable line length */
    z-index: 5; /* above crumbs */
}

.fr-hero-copy .title {
    margin: clamp(22px, 2.6vw, 34px) 0 .6rem 0;
    font-weight: 800;
    font-size: clamp(18px, 1.3vw, 22px);
    line-height: 1.55;
}

.fr-hero-copy p {
    margin: .15rem 0;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.75;
}

/* bread — high right */
.fr-hero-bread {
    position: absolute;
    right: clamp(28px, 6vw, 120px);
    top: clamp(4px, .9vw, 18px);
    width: clamp(260px, 24vw, 440px);
    transform: rotate(10deg);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
    pointer-events: none;
    z-index: 3;
}

/* bagel — aligned with the “Искаш да …” line */
.fr-hero-bagel {
    position: absolute;
    right: clamp(220px, 22vw, 360px);
    top: clamp(86px, 7.2vw, 140px);
    width: clamp(88px, 9vw, 150px);
    transform: rotate(-8deg);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .10));
    pointer-events: none;
    z-index: 2;
}

/* crumbs — faint, under the body copy */
.fr-hero-crumbs {
    position: absolute;
    left: clamp(160px, 28vw, 420px);
    top: clamp(220px, 18vw, 340px);
    width: clamp(520px, 46vw, 880px);
    opacity: .22;
    transform: rotate(-6deg);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .06));
    pointer-events: none;
    z-index: 1;
}

/* ---------------- WHY-US ---------------- */
.franchise-band {
    position: relative;
    /*padding: clamp(28px, 5vw, 56px) 0;*/
    overflow: hidden;
}

.franchise-band.has-crumbs::before {
    content: "";
    position: absolute;
    inset: 0;
    /*background-image: url('/static/hero_media/crumbs.png');*/
    background-repeat: repeat;
    background-size: 540px auto;
    opacity: .12;
    pointer-events: none;
}

.fr-why .why-us {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 12.5rem;
    margin-bottom: 0.5rem;
    padding: 2vw 10vw;
}

.stat {
    text-align: center;
    font-size: 1.1rem;
}

.stat p {
    line-height: 1.25rem;
}

.stat p.title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3rem;
}

.center-button {
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 2vw;
}

.button2 {
    background: #753e1e;
    color: #fff;
    padding: .6rem 3.5rem;
    border-radius: 18px;
    font-size: 1.4rem;
    text-decoration: none;
}

.button2:hover {
    background: #5a2f15;
    color: #f0c37d;
}

/* ---------------- REQUIREMENTS ---------------- */
.fr-req .fr-req-grid {
    display: grid;
    grid-template-columns:1.2fr .8fr;
    gap: clamp(22px, 4vw, 56px);
    align-items: start;
}

.fr-req-title {
    position: relative;
    display: inline-block;
}

.fr-req-title-crumbs {
    position: absolute;
    right: clamp(-6px, -1vw, -14px);
    top: clamp(-18px, -1.6vw, -6px);
    width: clamp(320px, 28vw, 560px);
    opacity: .22;
    transform: rotate(-6deg);
    pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .06));
}

.fr-req-copy p, .fr-req-copy li {
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.75;
}

.fr-req-sub {
    margin: .9rem 0 .3rem;
    font-weight: 800;
    font-size: clamp(16px, 1.1vw, 20px);
}

/* Collage with the two new images */
.fr-req-media {
    margin-top: 8vw;
    position: relative;
    min-height: 440px;
}

.rq-photo-main {
    position: absolute;
    right: 6%;
    top: 4%;
    width: clamp(280px, 54%, 420px);
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid #f0d6ad;
    background: #fff;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
}

.rq-photo-small {
    position: absolute;
    right: -2%;
    bottom: -6%;
    width: clamp(200px, 40%, 320px);
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid #f0d6ad;
    background: #fff;
    transform: rotate(3deg);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .14);
}

/* ---------------- HOW-TO ---------------- */
.fr-steps .section-title {
    margin-bottom: .6rem;
}

.steps {
    display: flex;
    justify-content: space-evenly;
    gap: 2rem;
    margin-bottom: 1.875rem;

}

.step {
    text-align: center;
    width: 350px;
}

.step strong {
    background: #753e1e;
    color: #fff;
    font-size: 1rem;
    padding: 1.25rem 1.865rem;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: .625rem;
}

.step h2 {
    font-size: 2rem;
    font-weight: 400;
}

.step p {
    font-size: 1.2rem;
    line-height: 1.4rem;
}

.fr-steps-title-wrap {
    position: relative;
    display: inline-block;
}

.fr-steps-title-crumbs {
    position: absolute;
    left: 100%;
    top: -8px;
    transform: translateX(6%) rotate(-6deg);
    width: clamp(260px, 22vw, 520px);
    opacity: .22;
    pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .06));
}

/* SUCCESS STORIES — exact composition */
.fr-stories {
    position: relative;
    /* headroom so bread never hits the title */
    padding-top: clamp(84px, 10vw, 160px);
    padding-bottom: clamp(28px, 4.5vw, 56px);
}

/* Title stays left, but no positioning so bread anchors to the section */
.fr-stories-title {
    position: static; /* was relative — important */
    display: block; /* stretch to section width */
    margin-bottom: clamp(14px, 1.8vw, 22px);
}

/* Use ONLY bread.png, centered-ish above & to the right, like the mock */
.fr-stories-bread {
    position: absolute;
    left: 50%;
    top: clamp(-36px, -4vw, -10px);
    transform: translateX(40%) translateY(40%) rotate(12deg);
    width: clamp(240px, 28vw, 460px);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
    opacity: .98;
    pointer-events: none;
    z-index: 1; /* behind real content */
}

/* Keep your placeholders; align & space like the design */
.success-stories {
    position: relative;
    z-index: 2; /* above bread image */
    display: flex;
    justify-content: flex-start;
    gap: clamp(16px, 3vw, 28px);
}

/* same placeholders, just responsive sizing */
.story-video {
    width: clamp(240px, 28vw, 360px);
    height: clamp(140px, 16vw, 210px);
    background: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}

/* Mobile: keep it clean */
@media (max-width: 768px) {
    .fr-stories-bread {
        display: none !important;
    }

    .success-stories {
        justify-content: center;
    }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
    .fr-hero-bread {
        right: clamp(16px, 5vw, 80px);
        width: clamp(240px, 26vw, 380px);
    }

    .fr-hero-bagel {
        right: clamp(160px, 20vw, 280px);
        top: clamp(78px, 7vw, 120px);
    }

    .fr-hero-crumbs {
        left: clamp(120px, 26vw, 340px);
        top: clamp(200px, 18vw, 300px);
    }

    .fr-req .fr-req-grid {
        grid-template-columns:1fr;
    }

    .fr-req-media {
        min-height: 360px;
        margin-top: .75rem;
    }
}

@media (max-width: 768px) {
    .franchise-hero .section-title {
        text-align: center;
    }

    .fr-hero-bread, .fr-hero-bagel, .fr-hero-crumbs,
    .fr-req-title-crumbs, .fr-steps-title-crumbs, .fr-stories-bread {
        display: none !important;
    }

    .fr-hero-copy {
        max-width: none;
    }

    .fr-hero-copy .title, .fr-hero-copy p {
        text-align: center;
    }

    .fr-why .why-us {
        padding: 0 4vw;
        gap: 1rem;
    }

    .success-stories {
        justify-content: center;
    }
}


/* ===========================
   HERO — exact composition
   =========================== */

/* Section container: tighten top spacing a bit like the mock */
.section-container.franchise-hero {
    position: relative;
    max-width: 1200px;
    padding: clamp(24px, 3.2vw, 42px) 1.875rem clamp(8px, 1.4vw, 18px);
}

/* Title area (left), bread sits above/right */
.fr-hero-header {
    position: relative;
    z-index: 3;
    padding-top: 5vw;
    margin: 2vw 0;
}

.fr-hero-title {
    text-align: left;
    margin: 0 0 clamp(18px, 2.6vw, 34px);
    font-weight: 800;
    font-size: clamp(44px, 4.8vw, 72px);
    line-height: 1.06;
}

/* bread.png — FIRST SECTION ONLY — big, top-right */
.fr-hero-bread {
    position: absolute;
    right: clamp(24px, 0vw, 120px);
    top: clamp(-6px, 6.6vw, 50px);
    width: clamp(280px, 25vw, 460px);
    transform: rotate(10deg);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
    pointer-events: none;
    z-index: 2;
}

/* Row with bagel photo (left) and copy (right) */
.fr-hero-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 340px) 1fr; /* left fixed, right fluid */
    gap: clamp(18px, 4vw, 56px);
    align-items: start;
    z-index: 3; /* above crumbs */
}

/* bagel photo — on the LEFT, slight rotation, framed card look */
.fr-hero-media {
    position: relative;
}

.fr-hero-bagel-photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #f0d6ad;
    background: #fff;
    /*transform: rotate(-3.5deg);*/
    box-shadow: 0 16px 36px rgba(0, 0, 0, .14);
}

/* “Искаш да…” styled as a subtitle/title */
.fr-hero-text .fr-hero-subtitle {
    margin: .2rem 0 .6rem 0;
    font-weight: 800;
    font-size: clamp(22px, 2.2vw, 34px);
    line-height: 1.35;
    letter-spacing: .01em;
}

.fr-hero-text p {
    margin: .15rem 0;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.75;
    color: #5b3e26;
}

/* faint crumbs — behind/right of the row */
.fr-hero-crumbs {
    position: absolute;
    right: clamp(80px, 18vw, 360px);
    top: clamp(120px, 10vw, 220px);
    width: clamp(420px, 40vw, 820px);
    opacity: .22;
    transform: rotate(-6deg);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .06));
    pointer-events: none;
    z-index: 1;
}

/* ===========================
   “ЗАЩО …” — crumbs to the right
   =========================== */
.fr-why-title-wrap {
    position: relative;
    display: inline-block;
    padding-top: 5vw;
    padding: 2vw 0;
}

.fr-why-title-crumbs {
    position: absolute;
    left: 100%;
    top: 8px;
    transform: translateX(80%) translateY(50%);
    width: clamp(350px, 30vw, 520px);
    opacity: .65;
    pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .06));
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px) {
    .fr-hero-title {
        text-align: center;
    }

    .fr-hero-row {
        grid-template-columns: 1fr;
    }

    .fr-hero-text .fr-hero-subtitle,
    .fr-hero-text p {
        text-align: center;
    }

    /* keep phones clean */
    .fr-hero-bread,
    .fr-hero-crumbs,
    .fr-why-title-crumbs {
        display: none !important;
    }

    .fr-hero-media {
        max-width: 360px;
        margin: 0 auto;
    }
}

/* =========================
   FRANCHISE — TITLE SIZING
   (2× smaller + top padding)
   ========================= */
.franchise-page .section-title {
    font-size: clamp(28px, 3vw, 40px); /* was up to 72px */
    line-height: 1.08;
    font-weight: 800;
    padding-top: clamp(12px, 1.5vw, 24px);
    margin: 2vw 0;
    padding:2vw 0;
}

/* Specific nudge for the main hero title so it tracks the mock */
.fr-hero-title {
    font-size: clamp(32px, 4vw, 48px); /* visually ~½ of your previous */
    margin-bottom: clamp(14px, 1.8vw, 22px);
}

/* “Искаш да…” block rhythm like the mock */
.fr-hero-text .fr-hero-subtitle {
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.35;
    margin: 1rem 0 .6rem;
}

.fr-hero-text p {
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.75;
}


/* FR — Requirements: bread.png to the right of the title */
.fr-req {
    position: relative;
}

.fr-req-title {
    position: relative;
}

.fr-req-title .section-title {
    position: relative;
    z-index: 2;
}

/* keep text above */

.fr-req-bread {
    position: absolute;
    left: 50%;
    top: clamp(-24px, -2.6vw, -6px); /* floats slightly above the title */
    transform: translateX(155%) rotate(12deg);
    width: clamp(260px, 30vw, 520px); /* scales nicely with the container */
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
    opacity: .98;
    pointer-events: none;
    z-index: 1; /* behind the text */
}

/* If it ever overlaps the content below on narrow laptops,
   give the title a bit of extra breathing room */
@media (min-width: 769px) {
    .fr-req-title {
        padding-bottom: clamp(6px, 1.2vw, 14px);
    }
}

/* Mobile: keep the section clean */
@media (max-width: 768px) {
    .fr-req-bread {
        display: none !important;
    }
}

/* “Как да станеш наш партньор?” — sand band background */
.fr-steps.bg-bakery {
    /* reuse the same background as your other band */
    background-image: url('/static/hero_media/home_background1.svg');
    background-repeat: no-repeat;
    background-size: cover; /* fill the width like in the mock */
    background-position: center; /* keep pattern centered */
}

/* kill the crumbs overlay that .has-crumbs normally injects */
.fr-steps.bg-bakery.has-crumbs::before {
    content: none !important;
    background: none !important;
}

/* a touch more vertical breathing room on this band */
.fr-steps.bg-bakery .section-container {
    padding-top: clamp(28px, 5vw, 64px);
    padding-bottom: clamp(28px, 5vw, 64px);
}

/* Icons above each stat title */
.fr-why .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fr-why .stat-icon {
    width: clamp(36px, 3.2vw, 56px);
    height: auto;
    margin-bottom: .5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .06));
    pointer-events: none;
    user-select: none;
}

/* Optional: make titles a touch stronger like the mock */
.fr-why .stat .title {
    font-weight: 800;
    letter-spacing: .02em;
}

/* === PRODUCTS: solid background on mobile (no image) === */
@media (max-width: 768px) {
    .products-wrapper {
        background-image: none !important;
        background-color: #fffaf5 !important; /* change if you prefer another */
    }
}

@media (max-width: 768px) {
    .decor img {
        display: none;
    }
}

.custom {
    margin-left: 14vw;
    text-align: left;
}

/*Final mobile tweaks*/

@media (max-width: 980px) {
    .footer-cols h4 {
        text-align: center;
    }

    .site-footer p.socials {
        text-align: center;
    }

    .site-footer .footer-cols {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 0 0;
    }

    .counter {
        font-size: 1.8rem;
    }

    .stat-title {
        font-size: 1rem;
    }

    .franchise-cta .partner-title {
        margin: 1.5rem 0 1.5rem 0;
        /*font-size: 0.8rem;*/
    }

    /*.franchise-cta .partner-text {*/
    /*    font-size: 0.6rem;*/
    /*}*/
    .product-card h3 {
        font-size: 1.6rem !important;
    }

    .product-card p {
        font-size: 1.4rem !important;
    }

    .story-two-col {
        display: flex;
        justify-content: center;
    }

    .story-copy {
        align-content: center;
        /*max-width: auto;*/
    }

    .timeline .event {
        text-align: center;
        max-width: 6rem;
        padding-bottom: 2rem;
    }

    .story .section-title {
        text-align: center;

    }

    .decor-locations .decor-bread-top {
        display: none;
    }

    .decor-franchise .decor-bread-sliced {
        display: none;
    }

    .decor-reviews .crumbs-bottom-left {
        display: none;
    }

    .products-wrapper {
        background-image: none;
        background-color: #fffaf5;
    }

    .fr-hero-bread {
        display: none;
    }

    .fr-why-title-crumbs {
        display: none;
    }

    .fr-stories-bread {
        display: none;
    }

    /*.franchise-page .section-title {*/
    /*    align-content: center;*/
    /*    text-align: center;*/
    /*}*/
    .fr-why-title-wrap {
        display: block;
    }

    .fr-req-bread {
        display: none;
    }

    .fr-req-title {
        display: block;
    }

    .fr-req-media {
        display: none;
    }

    .custom {
        margin-left: 0;
        text-align: center
    }

    /*    WHY US SECTION    */
    /* Make each WHY-US row 2 columns */
    .fr-why .why-us {
        display: grid; /* keep grid explicit */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(16px, 4vw, 32px); /* was 12.5rem → much tighter on mobile */
        padding: 6vw 4vw; /* less side padding on smaller screens */
        margin-bottom: 1rem; /* a touch more breathing room */
    }

    /* Allow the stat cards to shrink inside the grid (override any fixed widths) */
    .fr-why .stat {
        width: auto !important;
        max-width: 100%;
    }

    /* Tame icon + text sizes a bit so two columns feel comfy */
    .fr-why .stat-icon {
        width: clamp(32px, 4.5vw, 48px);
        height: auto;
    }

    .fr-why .stat .title {
        font-size: clamp(1rem, 2.6vw, 1.2rem);
        line-height: 1.25;
    }

    .fr-why .stat p {
        font-size: clamp(0.92rem, 2.2vw, 1rem);
        line-height: 1.45;
    }

    .center-button {
        padding-bottom: 6vw;
    }

    /* ================================
   MOBILE NAV REPLACEMENT ≤1100px
   ================================ */
    .navbar-desktop {
        display: none !important;
    }

    .navbar-mobile {
        display: block !important;
    }

    /* Minor sizing tweaks */
    .navbar {
        height: 7rem;
        padding: 0.75rem 1rem;
    }

    /* Comfortable drawer size */
    .offcanvas-menu {
        width: 78vw;
        max-width: 340px;
        padding-top: 10vw;
    }

}

/* Prevent background scroll when menu is open */
.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* (Optional) nicer focus states for links in the drawer */
.offcanvas-menu a:focus {
    outline: 2px solid #f0c37d;
    outline-offset: 2px;
}

/* (Optional) if you add a close “X” button inside the drawer */
.offcanvas-close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
    margin-left: auto;
    cursor: pointer;
}

.offcanvas-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.offcanvas-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offcanvas-menu li {
    margin: 1rem 0;
}

/* === Hamburger button: remove default white box === */
.hamburger {
    background: transparent !important; /* no buttonface bg */
    border: 0 !important; /* no UA border */
    box-shadow: none !important;
    padding: 5px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0; /* no rounded box */
    color: #0b5df3; /* icon color (nav bar color shows behind) */
}

/* Keep a visible keyboard focus ring */
.hamburger:focus-visible {
    outline: 2px solid #f0c37d;
    outline-offset: 2px;
}

/* SVG: no fills, inherit color, don't steal clicks */
.hamburger svg, .hamburger svg * {
    pointer-events: none;
    background: transparent !important;
    /*fill: none !important;*/
    stroke: #fff8f1; /* uses .hamburger color */
    stroke-width: 3.5;
    stroke-linecap: round;
    border-radius: 0 !important;
}

.franchise-page h3 {
    font-size: 1.6rem;
}


/*!* === Phone master scale ============================================= *!*/
/*@media (max-width: 36em) {*/
/*    !* ≤ 576px *!*/
/*    :root {*/
/*        --mobile-scale: 0.90;*/
/*    }*/

/*    !* ← tweak this value to taste *!*/
/*    html {*/
/*        font-size: calc(16px * var(--mobile-scale));*/
/*    }*/
/*}*/

/*!* === Phone scaling — EVERYTHING driven by --mobile-scale ================= *!*/
/*@media (max-width: 36rem) {*/
/*    !* ≤576px *!*/
/*    !* 1) One knob: change this number to resize ALL mobile text *!*/
/*    :root {*/
/*        --mobile-scale: 0.92;*/
/*    }*/

/*    !* ← try 0.85–1.10 to taste *!*/
/*    !* 2) rem/ em already scale via the html font-size rule you added.*/
/*          For anything defined in px/clamp earlier, we multiply by the same var. *!*/
/*    !* --- HERO --- *!*/
/*    .hero-text h1 {*/
/*        font-size: calc(2.0rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    .hero-text p {*/
/*        font-size: calc(1.1rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    !* --- SECTION TITLES --- *!*/
/*    .section-title {*/
/*        font-size: calc(1.6rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    !* --- PRODUCT CARDS --- *!*/
/*    .product-card h3 {*/
/*        font-size: calc(1.0rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    .product-card p {*/
/*        font-size: calc(0.9rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    !* --- BUTTONS --- *!*/
/*    .button2 {*/
/*        font-size: calc(1.4rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    !* --- FRANCHISE BITS --- *!*/
/*    .franchise-page h3 {*/
/*        font-size: calc(1.4rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    .fr-hero-text .fr-hero-subtitle {*/
/*        font-size: calc(1.25rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    .fr-req-sub {*/
/*        font-size: calc(1.1rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    .fr-req-copy p, .fr-req-copy li {*/
/*        font-size: calc(1.0rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    !* --- NAV/FOOTER --- *!*/
/*    .navbar .nav-links a {*/
/*        font-size: calc(1rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    .site-footer h4 {*/
/*        font-size: calc(1.1rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    .site-footer ul,*/
/*    .site-footer p {*/
/*        font-size: calc(0.95rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    !* --- FILTERS (optional) --- *!*/
/*    .filter-block h4 {*/
/*        font-size: calc(1.0rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    .filter-block label,*/
/*    .filter-block select {*/
/*        font-size: calc(0.95rem * var(--mobile-scale)) !important;*/
/*    }*/

/*    !* --- generic catch for big content wrappers (won't double-scale rem children) --- *!*/
/*    .section-container,*/
/*    .story, .reviews, .locations-summary, .franchise-cta {*/
/*        font-size: calc(1rem * var(--mobile-scale));*/
/*    }*/
/*}*/

/* ===== Mobile type scale: one source of truth ===== */
:root {
    --mobile-scale: 1;
}

html {
    font-size: 16px;
}

/* desktop base */

@media (max-width: 36em) {
    /* ≤ 576px */
    :root {
        --mobile-scale: 0.92;
    }

    /* ← your single knob */
    html {
        font-size: calc(16px * var(--mobile-scale));
    }
}

/* All rem-based sizes now scale automatically. Do NOT multiply them again. */

/* Only allow aggressive wrapping where long URLs happen */
.location-card, .review, .filter-block, .contact-info {
    overflow-wrap: anywhere;
}

/* Keep normal words intact in content/stats */
.intro-story, .text, .stat, .stat *, .stat-block {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
}

/* HEADER: always visible, never auto-hide */
.navbar {
    position: fixed; /* stay pinned */
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000; /* above everything */
    transform: none !important;
}

/* Neutralize any old "scroll-hide" behaviour */
.navbar.scroll-hide {
    transform: none !important;
}

/* Drawer & overlay layering + tint */
.offcanvas-menu {
    z-index: 2200;
}

/* above overlay */
.menu-overlay {
    z-index: 2190;
}

/* below drawer, above page */
.menu-overlay.open {
    display: block;
    background: rgba(0, 0, 0, .35); /* dim the page when open */
}

/* Make sure taps on the SVG still hit the button */
/* make the hamburger icon clickable again */
.hamburger svg,
.hamburger svg * {
    pointer-events: auto !important; /* was: none */
}

/* Drawer must NOT catch clicks while hidden */
.offcanvas-menu {
    pointer-events: none; /* <— key line */
    transform: translateX(-110%); /* a bit farther off just in case */
}

.offcanvas-menu.open {
    pointer-events: auto; /* re-enable when visible */
    transform: translateX(0);
    text-align: center;
}

/* Ensure the navbar is truly fixed and above content */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1500; /* above page content */
    height: 100px;
}

/* Make the hamburger always clickable and “tap-friendly” */
.hamburger {
    position: relative;
    z-index: 2001; /* above drawer/overlay */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* hint mobile to treat taps as clicks */
    background: transparent;
    border: 0;
}

/* Route the click to the BUTTON, not the SVG */
.hamburger svg,
.hamburger svg * {
    pointer-events: none !important;
}

/* ===== Products layout: desktop → sidebar; mobile → search+filters on top ===== */

/* Optional: declare navbar heights for sticky offsets */
:root {
    --nav-h-desktop: 5.625rem; /* 90px, you already use this */
    --nav-h-mobile: 7rem; /* matches your mobile navbar height */
}

/* Make the 2-column layout explicit on wide screens */
@media (min-width: 981px) {
    .layout.products-layout,
    .layout { /* keep your existing class working */
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 2rem;
    }

    .filters-card {
        position: sticky;
        top: var(--nav-h-desktop);
    }
}

/* MOBILE: single column, filters card on top and sticky under the navbar */
@media (max-width: 980px) {
    .layout.products-layout,
    .layout {
        display: block; /* one column */
    }

    .filters-card {
        position: static;
        top: var(--nav-h-mobile);
        z-index: 5;
        background: #fff;
        border: 1px solid #f0d6ad;
        border-radius: 12px;
        box-shadow: 0 8px 18px rgba(243, 155, 80, 0.12);
        margin: 0 0 1rem 0;
        padding: 0.75rem 0.75rem 0.5rem;
    }

    /* Search input full-width */
    .filters-card .search-input {
        width: 100%;
        display: block;
        margin: 0 0 .5rem 0;
    }

    /* Collapsible header becomes a clear button-like summary */
    .filters-collapsible > summary.filters-summary {
        list-style: none; /* hide triangle in some browsers */
        cursor: pointer;
        user-select: none;
        font-weight: 800;
        color: #5a2f15;
        padding: .6rem .75rem;
        border-radius: 10px;
        border: 1px solid #f0d6ad;
        background: #fff8f1;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
        text-align: center;
    }

    /* Remove default marker caret */
    .filters-collapsible > summary::-webkit-details-marker {
        display: none;
    }

    /* Panel body */
    .filters-collapsible[open] .filters-groups {
        margin-top: .6rem;
        padding: .25rem .25rem .5rem;
        border-top: 1px dashed #f0d6ad;
    }

    /* Make the two filter blocks sit side-by-side when there’s room */
    .filters-groups {
        display: block;
        gap: .75rem;
        grid-template-columns: 1fr 1fr;
    }

    /* Tighter typography on tiny screens */
    .filters-groups h4 {
        margin: 0 0 .25rem;
        font-size: 1rem;
        margin-bottom: 1.5rem;
        margin-top: 1rem;
        text-align: center;
    }

    .filters-groups label {
        font-size: .95rem;
    }

    /* Product grid already collapses via your existing breakpoints,
       but add a little side padding so cards don't hug edges */
    .product-grid {
        padding: .5rem;
    }
}

/* Small polish for the search input in the filters card */
.filters-card .search-input {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: .5rem .65rem;
    background: #fff;
    font: inherit;
    outline: none;
}

.filters-card .search-input:focus {
    border-color: #d7a86e;
    box-shadow: 0 0 0 3px rgba(215, 168, 110, .2);
}


/* ===== PRODUCTS — center filters & cards on mobile ===== */
@media (max-width: 980px) {
    /* Center the filters card itself */
    .filters-card {
        max-width: 640px;
        margin: 0 auto 1rem; /* center under navbar */
    }

    /* Center the grid items */
    .product-grid {
        justify-items: center; /* grid children centered horizontally */
        padding: .5rem; /* already have, keeps edges comfy */
    }

    /* Make each card a nice centered column with a max width */
    .product-card {
        width: 100%;
        max-width: 360px; /* tweak between 320–400px if you like */
        margin: 0 auto 1rem; /* center the card block */
        text-align: center; /* center headings & text inside */
    }

    /* Center the product image inside the card */
    .product-card img {
        display: block;
        margin: .5rem auto .75rem; /* center horizontally */
        max-width: 80%; /* a bit of white space around it */
        height: auto;
        object-fit: contain;
    }

    /* On single-column mobile we don't need grid placeholders */
    .product-card.placeholder {
        display: none !important;
    }

    .steps {
        display: block;

    }

    .products-wrapper .section-container {
        display: block;
    }
}

/* ===== Leaflet — mobile interaction + bigger controls ===== */
@media (max-width: 980px) {
    /* Let Leaflet capture all touch gestures (drag, pinch, etc.) */
    #map,
    .contact-map,
    .leaflet-container {
        touch-action: none; /* let Leaflet handle gestures */
    }

    /* Make the +/− buttons finger-friendly */
    .leaflet-touch .leaflet-bar a {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 20px;
    }

    /* Keep controls above any decorative layers */
    .leaflet-control-container {
        z-index: 1000;
    }

    /* Make sure nothing decorative steals taps above the map */
    .decor img {
        pointer-events: none;
    }
}


/* Leaflet controls: comfortable size/placement on phones only */
@media (max-width: 768px) {
    #map {
        position: relative;
        z-index: 3;
    }

    /* ensure it sits above neighbors */
    .leaflet-top.leaflet-right .leaflet-control-zoom {
        margin: 10px 10px 0 0;
        transform-origin: top right;
        transform: scale(1.1);
    }
}

/* ★ NEW: universal arrow styling for "see more" buttons */
.button-arrow svg {
    width: 1em;
    height: 1em;
    margin-left: .35em;
    vertical-align: -0.1em;
}

/* badge next to filters */
.count-badge {
    display: inline-block;
    min-width: 1.4em;
    padding: .08rem .45rem;
    margin-left: .35rem;
    border-radius: 999px;
    background: #f5e6d6;
    color: #753e1e;
    font-size: .85em;
    font-weight: 700;
    line-height: 1.3;
}

/* === Legal pages (text-only) === */
.legal-page {
    max-width: 880px;
    margin: 40px auto;
    background: #ffffff;
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
    line-height: 1.7;
    font-size: 16px;
}

.legal-page h1 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 18px;
    text-transform: none;
    letter-spacing: 0;
}

.legal-page h2 {
    font-size: 20px;
    margin: 22px 0 10px;
}

.legal-page ul {
    padding-left: 1.2rem;
}

.legal-page li {
    margin: 6px 0;
}

.legal-page .legal-note {
    font-size: 13px;
    color: #666;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .legal-page {
        margin: 20px 12px;
        padding: 20px;
    }

    .legal-page h1 {
        font-size: 26px;
    }
}


/*TEST*/

.location-card {
    position: relative;
    padding-bottom: 2.5rem; /* so content doesn't overlap the button */
    /* or use min-height if cards don't have equal height */
}


.button {
    color: #4a3b2c;
    padding-right: 4vw;
    cursor: pointer;
    transition: background 0.3s ease;
    text-decoration: none;
}

/* =========================
   CONTACT FORM (scoped)
   ========================= */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.contact-form {
    margin: 1rem 10rem 0 10rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(117, 62, 30, 0.18);
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.contact-form .field label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: #5a2f0a;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(117, 62, 30, 0.25);
    background: #fff;
    font: inherit;
    color: #5b3e26;
    outline: none;
}

.contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #d7a86e;
    box-shadow: 0 0 0 3px rgba(215, 168, 110, 0.25);
}

/* ✅ real button styling (don’t use .button here) */
.contact-submit {
    background: #753e1e;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.4rem;
    font-weight: 800;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.25s ease, transform 0.15s ease;
}

.contact-submit:hover {
    background: #5a2f15;
    transform: translateY(-1px);
}

/* =========================
   CONTACT PAGE – responsive fixes
   Put this AFTER your current contact CSS
   ========================= */

/* Make the form behave nicely by default (all screens) */
.contact-form {
    width: 100%;
    max-width: 560px; /* prevents super wide form on desktop */
    margin: 1rem auto 0; /* center it instead of hard side margins */
    padding-top: 1rem;
    border-top: 1px solid rgba(117, 62, 30, 0.18);
}

/* Optional: a little breathing room inside the form */
.contact-form form {
    width: 100%;
}

/* Keep labels readable */
.contact-form .field label {
    line-height: 1.25;
}

/* Mobile / tablet */
@media (max-width: 768px) {
    /* If your contact-flex is a row on desktop, stack it on mobile */
    .contact-flex {
        flex-direction: column;
        gap: 1.4rem;
    }

    .custom-map-wrapper,
    .contact-info {
        width: 100%;
    }

    /* IMPORTANT: remove the big side margins on mobile */
    .contact-form {
        max-width: 100%;
        margin: 0; /* no horizontal squeezing */
        padding: 1rem 0 0 0; /* keep it clean */
    }

    /* Make inputs comfortable on mobile */
    .contact-form input,
    .contact-form textarea {
        font-size: 16px; /* avoids iOS zoom + feels better */
        padding: 0.85rem 0.95rem;
        border-radius: 14px;
    }

    /* Make the submit button full width on mobile */
    .contact-submit {
        align-self: stretch;
        width: 100%;
        text-align: center;
        padding: 0.9rem 1.2rem;
    }
}

/* Keep your original “10rem side margin” ONLY for large screens */
@media (min-width: 992px) {
    .contact-form {
        margin: 1rem 10rem 0 0;
        max-width: none; /* allow your desktop spacing to do the job */
    }
}