/**
 * ChaCha Home
 * Mobile Navigation v1.1
 *
 * Quiet Luxury Off-Canvas Navigation
 */


/* ==========================================================
   01. KADENCE OFF-CANVAS SHELL
   ========================================================== */

@media (max-width: 1024px) {
/* ==========================================================
   KADENCE NATIVE MOBILE NAVIGATION
   ChaCha custom navigation aktif olduğu için gizlenir.
   ========================================================== */

@media (max-width: 1024px) {

    #mobile-drawer #mobile-site-navigation,
    #mobile-drawer .mobile-navigation,
    #mobile-drawer .mobile-navigation-wrap {
        display: none !important;
    }

}
*/


    /*
     * Overlay.
     */
    #mobile-drawer .drawer-overlay {
        background:
            rgba(32, 26, 23, 0.38);

        backdrop-filter:
            blur(2px);

        -webkit-backdrop-filter:
            blur(2px);
    }


    /*
     * Drawer panel.
     */
    #mobile-drawer .drawer-inner {

        width:
            min(92vw, 430px);

        max-width:
            430px;

        background:
            var(--chacha-white, #FFFDFC);

        box-shadow:
            -18px 0 55px
            rgba(32, 26, 23, 0.15);
    }


    /*
     * Close button header.
     */
    #mobile-drawer .drawer-header {

        min-height:
            64px;

        padding:
            14px 20px 8px;

        border-bottom:
            1px solid
            rgba(215, 206, 196, 0.68);
    }


    #mobile-drawer .menu-toggle-close {

        width:
            44px;

        height:
            44px;

        padding:
            0;

        border:
            0;

        background:
            transparent;

        color:
            var(--chacha-espresso, #201A17);
    }


    /*
     * Scroll işlemini drawer-content üstlensin.
     */
    #mobile-drawer .drawer-content {

        padding:
            0 22px 28px;

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        scrollbar-width:
            thin;

        scrollbar-color:
            var(--chacha-border, #D7CEC4)
            transparent;
    }

}



/* ==========================================================
   02. CHACHA MOBILE NAV
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-nav {

        width:
            100%;

        color:
            var(--chacha-text-strong, #3B322D);

        font-family:
            var(--chacha-font-body, "Inter", sans-serif);
    }


    /*
     * Remove generic list styling.
     */
    .chacha-mobile-nav ul,
    .chacha-mobile-nav li {

        margin:
            0;

        padding:
            0;

        list-style:
            none;
    }

}



/* ==========================================================
   03. MOBILE NAV HEADING
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-nav-heading {

        padding:
            10px 0 24px;

        border-bottom:
            1px solid
            var(--chacha-border, #D7CEC4);
    }


    .chacha-mobile-nav-eyebrow {

        display:
            block;

        margin-bottom:
            6px;

        color:
            var(--chacha-brass-dark, #8F6F3F);

        font-family:
            var(--chacha-font-body, "Inter", sans-serif);

        font-size:
            9px;

        font-weight:
            600;

        line-height:
            1;

        letter-spacing:
            0.20em;

        text-transform:
            uppercase;
    }


    .chacha-mobile-nav-title {

        display:
            block;

        color:
            var(--chacha-espresso, #201A17);

        font-family:
            var(--chacha-font-heading, "Cormorant Garamond", serif);

        font-size:
            34px;

        font-weight:
            500;

        line-height:
            1;

        letter-spacing:
            -0.025em;
    }

}



/* ==========================================================
   04. LEVEL 1
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-menu {

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .chacha-mobile-level-1 {

        border-bottom:
            1px solid
            rgba(215, 206, 196, 0.72);
    }


    .chacha-mobile-row {

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        width:
            100%;

        min-height:
            57px;

        gap:
            12px;
    }


    .chacha-mobile-level-1-link {

        flex:
            1;

        display:
            flex !important;

        align-items:
            center;

        min-height:
            57px;

        padding:
            0 !important;

        color:
            var(--chacha-espresso, #201A17) !important;

        font-family:
            var(--chacha-font-body, "Inter", sans-serif) !important;

        font-size:
            13px !important;

        font-weight:
            600 !important;

        line-height:
            1.3;

        letter-spacing:
            0.07em !important;

        text-transform:
            uppercase !important;

        text-decoration:
            none !important;
    }


    /*
     * EN YENİLER
     */
    .chacha-mobile-level-1:first-child
    > .chacha-mobile-row
    > .chacha-mobile-level-1-link {

        color:
            var(--chacha-brass-dark, #8F6F3F) !important;
    }

}



/* ==========================================================
   05. ACCORDION TOGGLE
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-toggle {

        appearance:
            none;

        flex:
            0 0 44px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            44px;

        height:
            44px;

        min-height:
            44px;

        margin:
            0;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            50%;

        background:
            transparent !important;

        box-shadow:
            none !important;

        color:
            var(--chacha-brass-dark, #8F6F3F) !important;

        cursor:
            pointer;

        transition:
            background-color 180ms ease,
            color 180ms ease;
    }


    .chacha-mobile-toggle:hover,
    .chacha-mobile-toggle:focus-visible {

        background:
            rgba(176, 141, 87, 0.09) !important;
    }


    .chacha-mobile-toggle-icon {

        display:
            block;

        font-family:
            var(--chacha-font-body, "Inter", sans-serif);

        font-size:
            20px;

        font-weight:
            300;

        line-height:
            1;

        transition:
            transform 260ms
            cubic-bezier(.2, .7, .2, 1);
    }


    /*
     * JS aria-expanded=true yaptığında
     * "+" işaretini döndüreceğiz.
     *
     * JS aşamasında icon metnini de − yapacağız.
     */
    .chacha-mobile-toggle[aria-expanded="true"]
    .chacha-mobile-toggle-icon {

        transform:
            rotate(180deg);
    }

}



/* ==========================================================
   06. LEVEL 2 PANEL
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-level-2-panel {

        margin:
            0 -22px;

        padding:
            8px 22px 18px;

        background:
            var(--chacha-background, #F6F1EA);

        border-top:
            1px solid
            rgba(215, 206, 196, 0.55);
    }


    .chacha-mobile-level-2 {

        border-bottom:
            1px solid
            rgba(215, 206, 196, 0.50);
    }


    .chacha-mobile-level-2:last-child {

        border-bottom:
            0;
    }


    .chacha-mobile-level-2-link {

        flex:
            1;

        display:
            flex !important;

        align-items:
            center;

        min-height:
            50px;

        padding:
            0 !important;

        color:
            var(--chacha-text-strong, #3B322D) !important;

        font-family:
            var(--chacha-font-body, "Inter", sans-serif) !important;

        font-size:
            12px !important;

        font-weight:
            600 !important;

        line-height:
            1.35;

        letter-spacing:
            0.045em !important;

        text-transform:
            uppercase !important;
    }

}



/* ==========================================================
   07. LEVEL 3 PANEL
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-level-3-panel {

        margin:
            0 -22px;

        padding:
            5px 22px 20px 36px;

        background:
            rgba(255, 253, 252, 0.72);

        border-top:
            1px solid
            rgba(215, 206, 196, 0.46);
    }


    .chacha-mobile-level-3-list {

        display:
            grid;

        grid-template-columns:
            1fr;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .chacha-mobile-level-3 {

        position:
            relative;
    }


    /*
     * Küçük editorial marker.
     */
    .chacha-mobile-level-3::before {

        content:
            "";

        position:
            absolute;

        left:
            0;

        top:
            50%;

        width:
            9px;

        height:
            1px;

        background:
            var(--chacha-brass, #B08D57);

        opacity:
            0.55;
    }


    .chacha-mobile-level-3 a {

        display:
            block !important;

        padding:
            10px 0 10px 20px !important;

        color:
            var(--chacha-text-muted, #6A5F58) !important;

        font-family:
            var(--chacha-font-body, "Inter", sans-serif) !important;

        font-size:
            13px !important;

        font-weight:
            400 !important;

        line-height:
            1.35;

        letter-spacing:
            0 !important;

        text-transform:
            none !important;

        text-decoration:
            none !important;

        transition:
            color 180ms ease,
            transform 180ms ease;
    }


    .chacha-mobile-level-3 a:hover {

        color:
            var(--chacha-espresso, #201A17) !important;

        transform:
            translateX(3px);
    }

}



/* ==========================================================
   08. VIEW ALL LINKS
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-view-all {

        display:
            inline-flex !important;

        align-items:
            center;

        gap:
            9px;

        margin-top:
            12px;

        padding:
            0 0 4px !important;

        border-bottom:
            1px solid
            var(--chacha-brass, #B08D57);

        color:
            var(--chacha-espresso, #201A17) !important;

        font-family:
            var(--chacha-font-body, "Inter", sans-serif) !important;

        font-size:
            10px !important;

        font-weight:
            700 !important;

        line-height:
            1.2;

        letter-spacing:
            0.09em !important;

        text-transform:
            uppercase !important;

        text-decoration:
            none !important;
    }


    .chacha-mobile-view-all span {

        color:
            var(--chacha-brass-dark, #8F6F3F);

        font-size:
            15px;
    }


    .chacha-mobile-view-all-parent {

        margin:
            18px 0 3px;
    }

}



/* ==========================================================
   09. ACTIVE CATEGORY
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-level-1.is-open
    > .chacha-mobile-row
    > .chacha-mobile-level-1-link {

        color:
            var(--chacha-brass-dark, #8F6F3F) !important;
    }


    .chacha-mobile-level-2.is-open
    > .chacha-mobile-row
    > .chacha-mobile-level-2-link {

        color:
            var(--chacha-brass-dark, #8F6F3F) !important;
    }

}



/* ==========================================================
   10. FOOTER
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-nav-footer {

        position:
            relative;

        margin-top:
            30px;

        padding:
            24px 0 4px;

        border-top:
            1px solid
            var(--chacha-border, #D7CEC4);
    }


    .chacha-mobile-nav-footer::before {

        content:
            "";

        position:
            absolute;

        top:
            -1px;

        left:
            0;

        width:
            34px;

        height:
            1px;

        background:
            var(--chacha-brass, #B08D57);
    }


    .chacha-mobile-nav-footer span {

        display:
            block;

        max-width:
            270px;

        color:
            var(--chacha-text-muted, #6A5F58);

        font-family:
            var(--chacha-font-heading, "Cormorant Garamond", serif);

        font-size:
            17px;

        font-weight:
            500;

        font-style:
            italic;

        line-height:
            1.4;
    }

}



/* ==========================================================
   11. HIDDEN PANELS
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-submenu[hidden] {
        display:
            none !important;
    }

}



/* ==========================================================
   12. SMALL PHONES
   ========================================================== */

@media (max-width: 480px) {

    #mobile-drawer .drawer-inner {

        width:
            min(94vw, 390px);
    }


    #mobile-drawer .drawer-content {

        padding-left:
            18px;

        padding-right:
            18px;
    }


    .chacha-mobile-level-2-panel {

        margin-left:
            -18px;

        margin-right:
            -18px;

        padding-left:
            18px;

        padding-right:
            18px;
    }


    .chacha-mobile-level-3-panel {

        margin-left:
            -18px;

        margin-right:
            -18px;

        padding-left:
            30px;

        padding-right:
            18px;
    }


    .chacha-mobile-nav-title {

        font-size:
            31px;
    }

}



/* ==========================================================
   13. ACCESSIBILITY
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-nav a:focus-visible,
    .chacha-mobile-toggle:focus-visible {

        outline:
            2px solid
            var(--chacha-brass, #B08D57);

        outline-offset:
            3px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .chacha-mobile-toggle,
    .chacha-mobile-toggle-icon,
    .chacha-mobile-level-3 a {

        transition:
            none !important;
    }

}
/* ==========================================================
   14. ACCORDION REVEAL
   ========================================================== */

@media (max-width: 1024px) {

    .chacha-mobile-submenu:not([hidden]) {

        animation:
            chachaMobileAccordionIn
            220ms
            cubic-bezier(.2, .7, .2, 1)
            both;
    }


    @keyframes chachaMobileAccordionIn {

        from {
            opacity: 0;
            transform: translateY(-5px);
        }

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

    }

}


@media (prefers-reduced-motion: reduce) {

    .chacha-mobile-submenu:not([hidden]) {

        animation:
            none !important;
    }

}
/**
 * ==========================================================
 * CHACHA HOME — MOBILE / TABLET ACCOUNT HEADER ACTION
 * V1.7.1
 * ==========================================================
 */


/**
 * Desktop:
 * completely hidden.
 */

.chacha-mobile-account-item {
	display:
		none !important;
}


/**
 * ==========================================================
 * TABLET + MOBILE
 * ==========================================================
 */

@media (max-width: 1024px) {

	.chacha-mobile-account-item {
		display:
			flex !important;

		align-items:
			center;

		justify-content:
			center;

		flex:
			0
			0
			auto;
	}


	.chacha-mobile-account-button {
		position:
			relative;

		display:
			inline-flex;

		align-items:
			center;

		justify-content:
			center;

		width:
			42px;

		height:
			42px;

		margin:
			0;

		padding:
			0;

		border:
			0;

		background:
			transparent;

		color:
			var(
				--chacha-espresso,
				#201A17
			);

		text-decoration:
			none;

		box-sizing:
			border-box;

		transition:
			color
			160ms
			ease,
			background-color
			160ms
			ease;
	}


	.chacha-mobile-account-icon {
		display:
			block;

		width:
			22px;

		height:
			22px;

		fill:
			none;

		stroke:
			currentColor;

		stroke-width:
			1.55;

		stroke-linecap:
			round;

		stroke-linejoin:
			round;
	}


	/**
	 * Hover-capable tablets.
	 */

	.chacha-mobile-account-button:hover {
		color:
			var(
				--chacha-brass,
				#B08D57
			);
	}


	/**
	 * Current account section.
	 */

	.chacha-mobile-account-item.is-current
	.chacha-mobile-account-button {
		color:
			var(
				--chacha-brass,
				#B08D57
			);
	}


	/**
	 * Logged-in indicator.
	 */

	body.logged-in
	.chacha-mobile-account-button::after {
		content:
			"";

		position:
			absolute;

		top:
			8px;

		right:
			7px;

		width:
			4px;

		height:
			4px;

		border-radius:
			50%;

		background:
			var(
				--chacha-brass,
				#B08D57
			);
	}


	/**
	 * Keyboard accessibility.
	 */

	.chacha-mobile-account-button:focus-visible {
		outline:
			2px
			solid
			var(
				--chacha-brass,
				#B08D57
			);

		outline-offset:
			2px;
	}

}


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

@media (max-width: 480px) {

	.chacha-mobile-account-button {
		width:
			38px;

		height:
			40px;
	}


	.chacha-mobile-account-icon {
		width:
			21px;

		height:
			21px;
	}


	body.logged-in
	.chacha-mobile-account-button::after {
		top:
			7px;

		right:
			5px;
	}

}


/**
 * ==========================================================
 * REDUCED MOTION
 * ==========================================================
 */

@media (
	prefers-reduced-motion: reduce
) {

	.chacha-mobile-account-button {
		transition:
			none;
	}

}