/* =========================================================
   HEADER - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    :root {
        --cs-section-padding: 90px;
    }

    .cs-container {
        width: min(calc(100% - 40px), var(--cs-container));
    }


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

    .cs-header .cs-header-inner {
        width: calc(100% - 40px) !important;
        max-width: 1240px !important;

        min-height: 78px;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 18px;
    }


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

    .cs-header .cs-header-brand {
        order: 1 !important;

        width: auto !important;
        max-width: none !important;

        flex: 0 0 auto !important;
    }

    .cs-header .cs-logo {
        width: auto !important;
        max-width: 125px !important;
    }

    .cs-header .cs-logo img {
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: 125px !important;
        max-height: 78px !important;

        object-fit: contain;
    }


    /* =====================================================
       ACTIONS
       HU / RO
       ===================================================== */

    .cs-header .cs-header-actions {
        order: 2 !important;

        width: auto !important;
        max-width: none !important;

        flex: 0 0 auto !important;

        margin-left: auto !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 14px;
    }

    .cs-header .cs-language {
        order: 1 !important;

        width: auto !important;
        max-width: none !important;

        flex: 0 0 auto !important;

        font-size: 11px;

        white-space: nowrap;
    }

    .cs-header .cs-language p {
        margin: 0 !important;
    }


    /* desktop order button hidden */

    .cs-header .cs-header-order {
        display: none !important;
    }


    /* =====================================================
       NAVIGATION / HAMBURGER
       ===================================================== */

    .cs-header .cs-header-navigation {
        position: relative !important;

        order: 3 !important;

        width: auto !important;
        max-width: none !important;

        flex: 0 0 auto !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        margin: 0 !important;
    }

    .cs-header .cs-nav {
        position: relative !important;

        width: auto !important;
        max-width: none !important;
    }


    /* =====================================================
       HAMBURGER BUTTON
       ===================================================== */

    .cs-header .cs-nav .elementor-menu-toggle {
        display: flex !important;

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

        width: 44px;
        height: 44px;

        padding: 0 !important;

        background: transparent !important;

        border: 1px solid rgba(38, 39, 36, 0.16);
        border-radius: 12px;

        color: var(--cs-dark) !important;

        font-size: 22px;

        box-shadow: none !important;

        transition:
            background 0.25s ease,
            border-color 0.25s ease,
            color 0.25s ease;
    }

    .cs-header .cs-nav .elementor-menu-toggle:hover,
    .cs-header .cs-nav .elementor-menu-toggle.elementor-active {
        background: var(--cs-primary) !important;

        border-color: var(--cs-primary) !important;

        color: var(--cs-white) !important;
    }


    /* =====================================================
       DROPDOWN PANEL
       ===================================================== */

    .cs-header .cs-nav .elementor-nav-menu--dropdown {
        position: absolute !important;

        top: calc(100% + 12px) !important;
        right: 0 !important;
        left: auto !important;

        width: min(340px, calc(100vw - 40px)) !important;
        min-width: min(340px, calc(100vw - 40px)) !important;
        max-width: min(340px, calc(100vw - 40px)) !important;

        margin: 0 !important;

        padding: 12px !important;

        background: var(--cs-background) !important;

        border: 1px solid rgba(38, 39, 36, 0.10);
        border-radius: 16px;

        box-shadow:
            0 18px 45px rgba(38, 39, 36, 0.16);

        overflow: hidden;

        z-index: 9999 !important;
    }


    /* =====================================================
       DROPDOWN LIST
       ===================================================== */

    .cs-header
    .cs-nav
    .elementor-nav-menu--dropdown
    .elementor-nav-menu {
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 2px !important;
    }

    .cs-header
    .cs-nav
    .elementor-nav-menu--dropdown
    .elementor-nav-menu
    > li {
        width: 100% !important;

        display: block !important;
    }


    /* =====================================================
       DROPDOWN LINKS
       ===================================================== */

    .cs-header
    .cs-nav
    .elementor-nav-menu--dropdown
    .elementor-nav-menu
    > li
    > a.elementor-item {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        padding: 13px 14px !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 9px;

        color: var(--cs-dark) !important;

        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;

        white-space: normal !important;

        transition:
            background 0.2s ease,
            color 0.2s ease;
    }


    /* hover */

    .cs-header
    .cs-nav
    .elementor-nav-menu--dropdown
    .elementor-nav-menu
    > li
    > a.elementor-item:hover {
        background: rgba(52, 78, 65, 0.07) !important;

        color: var(--cs-primary) !important;
    }


    /* active */

    .cs-header
    .cs-nav
    .elementor-nav-menu--dropdown
    .elementor-nav-menu
    > li
    > a.elementor-item.elementor-item-active {
        background: rgba(52, 78, 65, 0.09) !important;

        color: var(--cs-primary) !important;
    }


    /* remove desktop underline */

    .cs-header
    .cs-nav
    .elementor-nav-menu--dropdown
    a.elementor-item::before,

    .cs-header
    .cs-nav
    .elementor-nav-menu--dropdown
    a.elementor-item::after {
        display: none !important;

        content: none !important;
    }
}



/* =========================================================
   HEADER - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --cs-section-padding: 72px;
    }

    .cs-container {
        width: min(calc(100% - 30px), var(--cs-container));
    }


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

    .cs-header .cs-header-inner {
        width: calc(100% - 30px) !important;

        min-height: 72px;

        gap: 10px;
    }


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

    .cs-header .cs-logo {
        max-width: 100px !important;
    }

    .cs-header .cs-logo img {
        width: auto !important;
        height: auto !important;

        max-width: 100px !important;
        max-height: 64px !important;
    }


    /* =====================================================
       LANGUAGE
       ===================================================== */

    .cs-header .cs-header-actions {
        margin-left: auto !important;

        gap: 8px;
    }

    .cs-header .cs-language {
        font-size: 10px;

        letter-spacing: 0.04em;
    }


    /* =====================================================
       HAMBURGER
       ===================================================== */

    .cs-header .cs-nav .elementor-menu-toggle {
        width: 40px;
        height: 40px;

        border-radius: 10px;

        font-size: 20px;
    }


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

    .cs-header .cs-nav .elementor-nav-menu--dropdown {
        top: calc(100% + 10px) !important;

        right: 0 !important;
        left: auto !important;

        width: calc(100vw - 30px) !important;
        min-width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;

        padding: 10px !important;

        border-radius: 14px;
    }


    .cs-header
    .cs-nav
    .elementor-nav-menu--dropdown
    .elementor-nav-menu
    > li
    > a.elementor-item {
        padding: 13px 12px !important;

        font-size: 13px !important;
    }
}

/* =========================================================
   FOOTER - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-footer-inner {
        padding-top: 65px;
    }

    .cs-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .cs-footer-brand {
        grid-column: 1 / -1;
        max-width: 520px;
    }

}


/* =========================================================
   FOOTER - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-footer-inner {
        padding-top: 55px;
        padding-bottom: 24px;
    }

    .cs-footer-top {
        grid-template-columns: 1fr;
        gap: 42px;

        padding-bottom: 45px;
    }

    .cs-footer-brand {
        grid-column: auto;
    }

    .cs-footer-logo {
        max-width: 120px;
    }

    .cs-footer-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;
    }

}

/* =========================================================
   HOME HERO - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-home-hero,
    .cs-home-hero .cs-home-hero-inner {
        min-height: 680px;
    }

    .cs-home-hero .cs-home-hero-content {
        max-width: 680px;
    }

    .cs-home-hero .cs-home-hero-title .elementor-heading-title {
        font-size: clamp(48px, 7vw, 70px);
    }

    .cs-home-hero .cs-home-hero-text {
        max-width: 600px;

        font-size: 17px;
    }

}


/* =========================================================
   HOME HERO - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-home-hero,
    .cs-home-hero .cs-home-hero-inner {
        min-height: 650px;
    }

    .cs-home-hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(38, 39, 36, 0.82) 0%,
                rgba(38, 39, 36, 0.72) 60%,
                rgba(38, 39, 36, 0.68) 100%
            );
    }

    .cs-home-hero .cs-home-hero-content {
        max-width: 100%;
    }

    .cs-home-hero .cs-home-hero-kicker {
        margin-bottom: 18px;

        font-size: 11px;
    }

    .cs-home-hero .cs-home-hero-title .elementor-heading-title {
        font-size: clamp(42px, 13vw, 58px);
        line-height: 1.02;
    }

    .cs-home-hero .cs-home-hero-text {
        margin-top: 24px;

        font-size: 16px;
        line-height: 1.65;
    }

    .cs-home-hero .cs-home-hero-actions {
        width: 100%;

        flex-direction: column;

        margin-top: 30px;
    }

    .cs-home-hero .cs-btn {
        width: 100%;
    }

    .cs-home-hero .cs-btn .elementor-button {
        width: 100%;
    }

}

/* =========================================================
   WHY US - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-why .cs-why-inner {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .cs-why .cs-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-why .cs-why-card:last-child {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   WHY US - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-why .cs-why-inner {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .cs-why .cs-section-heading {
        margin-bottom: 36px;
    }

    .cs-why .cs-section-title .elementor-heading-title {
        font-size: 38px;
    }

    .cs-why .cs-section-intro {
        font-size: 16px;
    }

    .cs-why .cs-why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cs-why .cs-why-card,
    .cs-why .cs-why-card:last-child {
        grid-column: auto;

        min-height: auto;

        padding: 28px;
    }

    .cs-why .cs-why-number {
        margin-bottom: 42px;
    }

    .cs-why .cs-why-title {
        margin-top: 0;
    }

}

/* =========================================================
   AGAPE - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-agape .cs-agape-inner {
        width: min(calc(100% - 40px), 1240px);

        flex-direction: column;
        align-items: stretch;

        gap: 48px;

        padding-top: 90px;
        padding-bottom: 90px;
    }

    .cs-agape .cs-agape-inner > .cs-agape-media,
    .cs-agape .cs-agape-inner > .cs-agape-content {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .cs-agape .cs-agape-media {
        aspect-ratio: 4 / 3;
    }

}


/* =========================================================
   AGAPE - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-agape .cs-agape-inner {
        width: calc(100% - 30px);

        gap: 36px;

        padding-top: 72px;
        padding-bottom: 72px;
    }

    .cs-agape .cs-agape-media {
        aspect-ratio: 1 / 1;
        border-radius: var(--cs-radius-md);
    }

    .cs-agape .cs-agape-title .elementor-heading-title {
        font-size: 40px;
    }

    .cs-agape .cs-agape-text {
        font-size: 16px;
    }

    .cs-agape .cs-agape-highlight {
        font-size: 17px;
    }

    .cs-agape .cs-btn-dark {
        width: 100%;
    }

    .cs-agape .cs-btn-dark .elementor-button {
        width: 100%;
    }
}

/* =========================================================
   FEATURED FOODS - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-featured .cs-featured-inner {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .cs-featured .cs-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

}


/* =========================================================
   FEATURED FOODS - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-featured .cs-featured-inner {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .cs-featured .cs-section-heading {
        margin-bottom: 36px;
    }

    .cs-featured .cs-section-title .elementor-heading-title {
        font-size: 38px;
    }

    .cs-featured .cs-section-intro {
        font-size: 16px;
    }

    .cs-featured .cs-featured-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cs-featured .cs-food-media {
        aspect-ratio: 4 / 3;
    }

    .cs-featured .cs-food-content {
        padding: 24px;
    }

    .cs-featured .cs-food-title .elementor-heading-title {
        font-size: 25px;
    }

    .cs-featured .cs-featured-footer {
        margin-top: 34px;
    }

    .cs-featured .cs-btn-primary-dark {
        width: 100%;
    }

    .cs-featured .cs-btn-primary-dark .elementor-button {
        width: 100%;
    }

}

/* =========================================================
   LOCATION - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-location .cs-location-inner {
        width: min(calc(100% - 40px), 1240px);

        grid-template-columns: 1fr;

        gap: 52px;

        padding-top: 90px;
        padding-bottom: 90px;
    }

    .cs-location
    .cs-location-inner
    > .cs-location-content,

    .cs-location
    .cs-location-inner
    > .cs-location-map {
        width: 100%;
        max-width: 100%;
    }

    .cs-location .cs-location-content {
        max-width: 720px;
    }

    .cs-location .cs-location-map,
    .cs-location .cs-location-map iframe,
    .cs-location .cs-map-placeholder {
        min-height: 480px;
    }

}


/* =========================================================
   LOCATION - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-location .cs-location-inner {
        width: calc(100% - 30px);

        gap: 38px;

        padding-top: 72px;
        padding-bottom: 72px;
    }

    .cs-location
    .cs-location-title
    .elementor-heading-title {
        max-width: 100%;

        font-size: 40px;
    }

    .cs-location .cs-location-intro {
        max-width: 100%;

        font-size: 16px;
    }

    .cs-location .cs-location-item {
        grid-template-columns: 1fr;

        gap: 8px;

        padding: 18px 0;
    }

    .cs-location .cs-btn-location {
        width: 100%;
    }

    .cs-location
    .cs-btn-location
    .elementor-button {
        width: 100%;
    }

    .cs-location .cs-location-map,
    .cs-location .cs-location-map iframe,
    .cs-location .cs-map-placeholder {
        min-height: 380px;

        border-radius: var(--cs-radius-md);
    }

}

/* =========================================================
   ABOUT - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-about-hero > .cs-about-hero-inner {
        flex-direction: column;

        gap: 48px;

        padding: 90px 0;
    }

    .cs-about-hero
    > .cs-about-hero-inner
    > .cs-about-hero-copy,

    .cs-about-hero
    > .cs-about-hero-inner
    > .cs-about-hero-media {
        width: 100%;
        max-width: 100%;

        flex: 0 0 100%;
    }

    .cs-about-hero .cs-about-hero-media {
        aspect-ratio: 4 / 3;
    }


    .cs-about-story > .cs-about-story-inner {
        grid-template-columns: 1fr;

        gap: 48px;

        padding: 90px 0;
    }

}


/* =========================================================
   ABOUT - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-about-hero > .cs-about-hero-inner {
        width: calc(100% - 30px);

        gap: 36px;

        padding: 72px 0;
    }

    .cs-about-hero
    .cs-about-hero-title
    .elementor-heading-title {
        font-size: 42px;
    }

    .cs-about-hero .cs-about-hero-text {
        font-size: 16px;
    }

    .cs-about-hero .cs-about-hero-media {
        aspect-ratio: 1 / 1;

        border-radius: var(--cs-radius-md);
    }


    .cs-about-story > .cs-about-story-inner {
        width: calc(100% - 30px);

        gap: 36px;

        padding: 72px 0;
    }

    .cs-about-story
    .cs-about-story-title
    .elementor-heading-title {
        font-size: 40px;
    }

    .cs-about-story .cs-about-story-text {
        font-size: 16px;
    }

    .cs-about-story .cs-about-story-highlight {
        font-size: 21px;
    }

}

/* =========================================================
   ABOUT VALUES / SERVICES - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-about-values > .cs-about-values-inner,
    .cs-about-services > .cs-about-services-inner {
        padding: 90px 0;
    }

    .cs-about-values .cs-about-values-grid {
        height: 290px;
    }

    .cs-about-values .cs-about-value-card {
        width: min(36vw, 300px);
        min-height: 210px;
        padding: 24px 24px 22px;
    }

    .cs-about-values .cs-about-value-card.is-left {
        transform: translate(calc(-50% - 230px), -50%) scale(0.9);
    }

    .cs-about-values .cs-about-value-card.is-right {
        transform: translate(calc(-50% + 230px), -50%) scale(0.9);
    }

    .cs-about-services .cs-about-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-about-services .cs-about-service-card:last-child {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   ABOUT VALUES / SERVICES - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-about-values > .cs-about-values-inner,
    .cs-about-services > .cs-about-services-inner {
        width: calc(100% - 30px);
        padding: 72px 0;
    }

    .cs-about-values .cs-about-values-heading,
    .cs-about-services .cs-about-services-heading {
        margin-bottom: 36px;
    }

    .cs-about-values
    .cs-about-values-title
    .elementor-heading-title,

    .cs-about-services
    .cs-about-services-title
    .elementor-heading-title {
        font-size: 38px;
    }

    /* mobilon ne carousel legyen, hanem sima lista */
    .cs-about-values .cs-about-values-grid {
        position: static;
        height: auto;

        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cs-about-values .cs-about-value-card,
    .cs-about-values .cs-about-value-card.is-active,
    .cs-about-values .cs-about-value-card.is-left,
    .cs-about-values .cs-about-value-card.is-right {
        position: relative;
        top: auto;
        left: auto;

        width: 100%;
        min-height: auto;

        opacity: 1;
        filter: none;

        transform: none;

        padding: 24px;

        box-shadow: 0 10px 24px rgba(38, 39, 36, 0.06);
    }

    .cs-about-values
    .cs-about-value-title
    .elementor-heading-title {
        font-size: 24px;
    }

    .cs-about-values .cs-about-value-text {
        margin-top: 10px;
        font-size: 15px;
    }

    .cs-about-services .cs-about-services-grid {
        grid-template-columns: 1fr;
    }

    .cs-about-services .cs-about-service-card:last-child {
        grid-column: auto;
    }

    .cs-about-services .cs-about-service-media {
        aspect-ratio: 4 / 3;
    }

}

/* =========================================================
   ABOUT TEAM - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-about-team > .cs-about-team-inner {
        flex-direction: column;

        gap: 48px;

        padding: 90px 0;
    }

    .cs-about-team
    > .cs-about-team-inner
    > .cs-about-team-media,

    .cs-about-team
    > .cs-about-team-inner
    > .cs-about-team-content {
        width: 100%;
        max-width: 100%;

        flex: 0 0 100%;
    }

    .cs-about-team .cs-about-team-media {
        min-height: 500px;
    }

}


/* =========================================================
   ABOUT TEAM - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-about-team > .cs-about-team-inner {
        width: calc(100% - 30px);

        gap: 36px;

        padding: 72px 0;
    }

    .cs-about-team .cs-about-team-media {
        min-height: 0;

        aspect-ratio: 1 / 1;

        border-radius: var(--cs-radius-md);
    }

    .cs-about-team
    .cs-about-team-title
    .elementor-heading-title {
        font-size: 40px;
    }

    .cs-about-team .cs-about-team-text {
        font-size: 16px;
    }

    .cs-about-team .cs-about-team-signature {
        font-size: 17px;
    }

}

/* =========================================================
   ABOUT CTA - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-about-cta > .cs-about-cta-inner {
        gap: 40px;

        padding: 72px 0;
    }

    .cs-about-cta
    .cs-about-cta-copy
    .cs-about-cta-title
    .elementor-heading-title {
        font-size: clamp(38px, 5vw, 52px);
    }

}


/* =========================================================
   ABOUT CTA - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-about-cta > .cs-about-cta-inner {
        width: calc(100% - 30px);

        flex-direction: column;
        align-items: flex-start;

        gap: 32px;

        padding: 64px 0;
    }

    .cs-about-cta
    > .cs-about-cta-inner
    > .cs-about-cta-copy,

    .cs-about-cta
    > .cs-about-cta-inner
    > .cs-about-cta-actions {
        width: 100%;
        max-width: 100%;

        flex: 0 0 100%;
    }

    .cs-about-cta
    .cs-about-cta-copy
    .cs-about-cta-title
    .elementor-heading-title {
        max-width: 100%;

        font-size: 40px;
    }

    .cs-about-cta
    > .cs-about-cta-inner
    > .cs-about-cta-actions {
        flex-direction: column;

        gap: 10px;
    }

    .cs-about-cta .cs-btn {
        width: 100%;
    }

    .cs-about-cta
    .cs-btn
    .elementor-button {
        width: 100%;
    }

}

/* =========================================================
   MENU INFO - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-menu-info > .cs-menu-info-inner {
        flex-wrap: wrap;

        margin-top: -46px;
    }

    .cs-menu-info
    > .cs-menu-info-inner
    > .cs-menu-info-item {
        --width: 100%;
        --flex-basis: 100%;

        width: 100%;

        flex: 0 0 100%;

        padding: 24px 28px;
    }

    .cs-menu-info
    > .cs-menu-info-inner
    > .cs-menu-info-item:not(:last-child)::after {
        top: auto;
        left: 28px;
        right: 28px;
        bottom: 0;

        width: auto;
        height: 1px;
    }

}


/* =========================================================
   MENU INFO - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-menu-info > .cs-menu-info-inner {
        width: calc(100% - 30px);

        margin-top: -30px;

        border-radius: 18px;
    }

    .cs-menu-info
    > .cs-menu-info-inner
    > .cs-menu-info-item {
        gap: 16px;

        padding: 22px;
    }

    .cs-menu-info
    .cs-menu-info-icon
    .elementor-icon {
        width: 48px;
        height: 48px;

        font-size: 18px;
    }

    .cs-menu-info
    .cs-menu-info-copy
    .cs-menu-info-phone
    .elementor-heading-title {
        font-size: 22px;
    }

    .cs-menu-info .cs-menu-info-label {
        font-size: 13px;
    }

    .cs-menu-info .cs-menu-info-text {
        font-size: 13px;
    }

}

/* =========================================================
   MENU CATEGORY NAVIGATION - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-menu-categories > .cs-menu-categories-inner {
        width: calc(100% - 30px);

        flex-wrap: nowrap;

        gap: 8px;

        padding: 6px 0 22px;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .cs-menu-categories > .cs-menu-categories-inner::-webkit-scrollbar {
        display: none;
    }

    .cs-menu-categories .cs-menu-category-link {
        flex: 0 0 auto;
    }

    .cs-menu-categories
    .cs-menu-category-link
    .elementor-button {
        min-height: 40px;

        padding: 0 16px;

        font-size: 12px;
    }

}

/* =========================================================
   MENU PANELS - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-menu-content .cs-menu-panel-header {
        grid-template-columns: minmax(0, 1fr) 260px;

        gap: 30px;
    }

    .cs-menu-content .cs-menu-items-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MENU PANELS - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-menu-content > .cs-menu-content-inner {
        width: calc(100% - 30px);

        padding-bottom: 72px;
    }

    .cs-menu-content .cs-menu-panel {
        padding: 22px;

        border-radius: 22px;
    }

    .cs-menu-content .cs-menu-panel-header {
        grid-template-columns: 1fr;

        gap: 24px;

        margin-bottom: 26px;
    }

    .cs-menu-content .cs-menu-panel-media {
        min-height: 180px;
    }

    .cs-menu-content .cs-menu-items-grid {
        grid-template-columns: 1fr;
    }

    .cs-menu-content .cs-menu-food {
        padding: 20px;
    }

}

@media (max-width: 1024px) {

    .cs-menu-content .cs-menu-panel-compact,
    .cs-menu-content
    .cs-menu-panel-compact
    .cs-menu-panel-content {
        min-height: auto;
    }

}

@media (max-width: 767px) {

    .cs-menu-content
    .cs-menu-panel-compact
    .cs-menu-food-list {
        margin-top: 30px;
    }

    .cs-menu-content
    .cs-menu-panel-compact
    .cs-menu-food-row {
        padding: 18px 0;
    }

}

/* =========================================================
   MENU TEASER - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cs-menu-content .cs-menu-teaser-content {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .cs-menu-panel-salads,
    .cs-menu-panel-salads .cs-menu-panel-content {
        min-height: auto;
    }

}


/* =========================================================
   MENU TEASER - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cs-menu-content .cs-menu-teaser-content {
        margin-top: 30px;
    }

    .cs-menu-content .cs-menu-teaser-main {
        padding: 20px 0;
    }

    .cs-menu-content
    .cs-menu-teaser-title
    .elementor-heading-title {
        font-size: 21px;
    }

    .cs-menu-content .cs-menu-teaser-text {
        font-size: 14px;
    }

    .cs-menu-content .cs-menu-teaser-note {
        padding: 20px;
    }

}

@media (max-width: 1024px) {

    .cs-menu-panel-weekly,
    .cs-menu-panel-weekly .cs-menu-panel-content {
        min-height: auto;
    }

    .cs-menu-panel-weekly .cs-menu-teaser-content {
        grid-template-columns: 1fr;

        gap: 20px;
    }

}

@media (max-width: 767px) {

    .cs-menu-panel-weekly .cs-menu-teaser-content {
        margin-top: 30px;
    }

    .cs-menu-content
    .cs-menu-weekly-title
    .elementor-heading-title {
        font-size: 26px;
    }

    .cs-menu-weekly-text {
        font-size: 14px;
    }

}

@media (max-width: 1024px) {

    .cs-menu-panel-coffee,
    .cs-menu-panel-coffee .cs-menu-panel-content {
        min-height: auto;
    }

    .cs-menu-panel-coffee .cs-menu-teaser-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}

@media (max-width: 767px) {

    .cs-menu-panel-coffee .cs-menu-teaser-content {
        margin-top: 30px;
    }

    .cs-menu-content
    .cs-menu-coffee-title
    .elementor-heading-title {
        font-size: 26px;
    }

    .cs-menu-coffee-text,
    .cs-menu-coffee-info-text {
        font-size: 14px;
    }

}

@media (max-width: 1024px) {

    .cs-menu-panel-catering,
    .cs-menu-panel-catering .cs-menu-panel-content {
        min-height: auto;
    }

    .cs-menu-panel-catering .cs-menu-teaser-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}

@media (max-width: 767px) {

    .cs-menu-panel-catering .cs-menu-teaser-content {
        margin-top: 30px;
    }

    .cs-menu-content
    .cs-menu-catering-title
    .elementor-heading-title {
        font-size: 27px;
    }

    .cs-menu-catering-main {
        padding: 22px 0;
    }

    .cs-menu-catering-cta {
        padding: 22px;
    }

    .cs-menu-catering-button,
    .cs-menu-catering-button .elementor-button {
        width: 100%;
    }

}

@media (max-width: 1024px) {

    .cs-garden-about > .cs-garden-about-inner {
        gap: 42px;
    }

    .cs-garden-about .cs-garden-about-media {
        min-height: 480px;
    }

}

@media (max-width: 767px) {

    .cs-garden-about {
        padding: 72px 0;
    }

    .cs-garden-about > .cs-garden-about-inner {
        width: calc(100% - 30px);

        flex-direction: column;

        gap: 34px;
    }

    .cs-garden-about .cs-garden-about-media,
    .cs-garden-about .cs-garden-about-content {
        width: 100%;
        flex: none;
    }

    .cs-garden-about .cs-garden-about-media {
        min-height: 360px;

        border-radius: 22px;
    }

    .cs-garden-about
    .cs-garden-about-title
    .elementor-heading-title {
        font-size: 40px;
    }

    .cs-garden-about .cs-garden-about-lead {
        font-size: 16px;
    }

}

@media (max-width: 1024px) {

    .cs-garden-process .cs-garden-process-grid {
        gap: 18px;
    }

    .cs-garden-process .cs-garden-process-card {
        padding: 28px;
        min-height: 340px;
    }

}


@media (max-width: 767px) {

    .cs-garden-process {
        padding: 72px 0;
    }

    .cs-garden-process > .cs-garden-process-inner {
        width: calc(100% - 30px);
    }

    .cs-garden-process
    .cs-garden-process-title
    .elementor-heading-title {
        font-size: 40px;
    }

    .cs-garden-process .cs-garden-process-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 38px;
    }

    .cs-garden-process .cs-garden-process-card {
        min-height: auto;

        padding: 26px;
    }

    .cs-garden-process .cs-garden-process-icon {
        margin-top: 26px;
    }

    .cs-garden-process
    .cs-garden-process-card-title
    .elementor-heading-title {
        margin-top: 24px;
    }

}

@media (max-width: 1024px) {

    .cs-garden-produce .cs-garden-produce-grid {
        gap: 18px;
    }

    .cs-garden-produce .cs-garden-produce-card {
        min-height: 380px;
    }

}

@media (max-width: 767px) {

    .cs-garden-produce {
        padding: 72px 0;
    }

    .cs-garden-produce > .cs-garden-produce-inner {
        width: calc(100% - 30px);
    }

    .cs-garden-produce
    .cs-garden-produce-title
    .elementor-heading-title {
        font-size: 40px;
    }

    .cs-garden-produce .cs-garden-produce-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 38px;
    }

    .cs-garden-produce .cs-garden-produce-card {
        min-height: 360px;
    }

    .cs-garden-produce .cs-garden-produce-card-content {
        padding: 26px;
    }

}

@media (max-width: 1024px) {

    .cs-garden-gallery .cs-garden-gallery-grid {
        grid-template-rows:
            220px
            220px
            260px;

        gap: 16px;
    }

}

@media (max-width: 767px) {

    .cs-garden-gallery {
        padding: 72px 0;
    }

    .cs-garden-gallery > .cs-garden-gallery-inner {
        width: calc(100% - 30px);
    }

    .cs-garden-gallery
    .cs-garden-gallery-title
    .elementor-heading-title {
        font-size: 40px;
    }

    .cs-garden-gallery .cs-garden-gallery-grid {
        display: grid;

        grid-template-columns: 1fr;
        grid-template-rows: none;

        gap: 14px;

        margin-top: 38px;
    }

    .cs-garden-gallery .cs-garden-gallery-item-large,
    .cs-garden-gallery .cs-garden-gallery-item-small-1,
    .cs-garden-gallery .cs-garden-gallery-item-small-2,
    .cs-garden-gallery .cs-garden-gallery-item-small-3,
    .cs-garden-gallery .cs-garden-gallery-item-wide {
        grid-column: auto;
        grid-row: auto;

        min-height: 280px;
    }

    .cs-garden-gallery .cs-garden-gallery-item-large {
        min-height: 380px;
    }

}

@media (max-width: 767px) {

    .cs-garden-cta {
        padding-bottom: 72px;
    }

    .cs-garden-cta > .cs-garden-cta-inner {
        width: calc(100% - 30px);

        min-height: auto;

        padding: 48px 24px;

        border-radius: 24px;
    }

    .cs-garden-cta
    .cs-garden-cta-title
    .elementor-heading-title {
        font-size: 40px;
    }

    .cs-garden-cta .cs-garden-cta-text {
        font-size: 14px;
    }

    .cs-garden-cta .cs-garden-cta-actions {
        width: 100%;

        flex-direction: column;

        margin-top: 28px;
    }

    .cs-garden-cta .cs-garden-cta-button,
    .cs-garden-cta
    .cs-garden-cta-button
    .elementor-button {
        width: 100%;
    }

}

@media (max-width: 1024px) {

    .cs-contact-info > .cs-contact-info-inner {
        gap: 42px;
    }

    .cs-contact-info .cs-contact-info-intro {
        flex-basis: calc(38% - 21px);
    }

}

@media (max-width: 767px) {

    .cs-contact-info {
        padding: 72px 0;
    }

    .cs-contact-info > .cs-contact-info-inner {
        width: calc(100% - 30px);

        flex-direction: column;

        gap: 36px;
    }

    .cs-contact-info .cs-contact-info-intro,
    .cs-contact-info .cs-contact-info-cards {
        width: 100%;
        flex: none;
    }

    .cs-contact-info
    .cs-contact-info-title
    .elementor-heading-title {
        font-size: 40px;
    }

    .cs-contact-info .cs-contact-info-card {
        padding: 22px;
    }

    .cs-contact-info
    .cs-contact-info-card-value
    .elementor-heading-title {
        font-size: 19px;
    }

    .cs-contact-info
    .cs-contact-info-card-icon
    .elementor-icon {
        width: 48px;
        height: 48px;

        font-size: 18px;
    }

}

@media (max-width: 1024px) {

    .cs-contact-location > .cs-contact-location-inner {
        gap: 36px;
    }

    .cs-contact-location .cs-contact-location-map {
        flex-basis: calc(58% - 18px);
    }

}

@media (max-width: 767px) {

    .cs-contact-location {
        padding-bottom: 72px;
    }

    .cs-contact-location > .cs-contact-location-inner {
        width: calc(100% - 30px);

        flex-direction: column;

        gap: 36px;
    }

    .cs-contact-location .cs-contact-location-map,
    .cs-contact-location .cs-contact-location-content {
        width: 100%;
        flex: none;
    }

    .cs-contact-location .cs-contact-location-map {
        min-height: 380px;

        border-radius: 22px;
    }

    .cs-contact-location
    .cs-contact-map-widget
    iframe {
        height: 380px;
    }

    .cs-contact-location
    .cs-contact-location-title
    .elementor-heading-title {
        font-size: 40px;
    }

}

@media (max-width: 1024px) {

    .cs-contact-form > .cs-contact-form-inner {
        gap: 42px;
    }

    .cs-contact-form .cs-contact-form-card {
        padding: 32px;
    }

}


@media (max-width: 767px) {

    .cs-contact-form {
        padding: 72px 0;
    }

    .cs-contact-form > .cs-contact-form-inner {
        width: calc(100% - 30px);

        flex-direction: column;

        gap: 38px;
    }

    .cs-contact-form .cs-contact-form-intro,
    .cs-contact-form .cs-contact-form-card {
        width: 100%;
        flex: none;
    }

    .cs-contact-form
    .cs-contact-form-title
    .elementor-heading-title {
        font-size: 40px;
    }

    .cs-contact-form .cs-contact-form-card {
        padding: 24px;

        border-radius: 22px;
    }

    .cs-contact-form .cs-contact-form-note {
        width: 100%;
        max-width: none;
    }

}

@media (max-width: 767px) {

    .cs-contact-bottom {
        padding-bottom: 72px;
    }

    .cs-contact-bottom > .cs-contact-bottom-inner {
        width: calc(100% - 30px);

        grid-template-columns: 1fr;
    }

    .cs-contact-bottom
    .cs-contact-bottom-item:not(:last-child)::after {
        top: auto;
        right: 24px;
        bottom: 0;
        left: 24px;

        width: auto;
        height: 1px;
    }

    .cs-contact-bottom .cs-contact-bottom-item {
        padding: 26px;
    }

}

@media (max-width: 767px) {

    .cs-footer-bottom {
        grid-template-columns: 1fr;

        justify-items: center;

        gap: 16px;

        text-align: center;
    }

    .cs-footer-copyright,
    .cs-footer-credit,
    .cs-footer-social {
        justify-self: center;
    }

}

@media (max-width: 767px) {

    .cs-footer-bottom {
        grid-template-columns: 1fr;

        justify-items: center;

        gap: 14px;

        text-align: center;
    }

    .cs-footer-copyright,
    .cs-footer-credit,
    .cs-footer-social {
        justify-self: center;
    }

    .cs-footer-credit {
        white-space: normal;
    }

}

/* =========================================================
   GLOBAL KICKERS - TABLET / MOBILE
   ========================================================= */

@media (max-width: 1024px) {

    [class*="-kicker"],
    [class*="-kicker"] p,
    [class*="-kicker"] .elementor-heading-title {
        font-size: 14px !important;
    }
}

@media (max-width: 1024px) {

    .cs-agape-story > .cs-agape-story-inner {
        width: calc(100% - 40px);

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

        gap: 48px;

        padding: 90px 0;
    }

    .cs-agape-story-media {
        top: 110px;

        min-height: 520px;
    }

    .cs-agape-story-video video {
        height: 520px;
    }

    .cs-agape-story-title .elementor-heading-title {
        font-size: 42px;
    }
}

@media (max-width: 767px) {

    .cs-agape-story > .cs-agape-story-inner {
        width: calc(100% - 30px);

        grid-template-columns: 1fr;

        gap: 40px;

        padding: 72px 0;
    }

    .cs-agape-story-content {
        order: 1;
    }

    .cs-agape-story-media {
        order: 2;

        position: relative;

        top: auto;

        min-height: 420px;

        border-radius: 22px;
    }

    .cs-agape-story-video video {
        height: 420px;

        border-radius: 22px;
    }

    .cs-agape-story-title .elementor-heading-title {
        font-size: 38px;
    }

    .cs-agape-story-intro {
        margin-top: 22px;

        font-size: 15px;
    }

    .cs-agape-story-sections {
        margin-top: 32px;
    }

    .cs-agape-story-block {
        padding: 24px 0;
    }

    .cs-agape-story-block-title .elementor-heading-title {
        font-size: 19px;
    }

    .cs-agape-story-block-text {
        font-size: 14px;
        line-height: 1.75;
    }
}