/* KEI Mobile App Experience – native-app layer for phones & tablets (≤1040px). Desktop untouched. */

:root {
	--kma-navy: #0F1A33;
	--kma-navy-2: #1d2a4d;
	--kma-gold: #D2A66F;
	--kma-gold-ink: #9C7134;
	--kma-cream: #F1EFE3;
	--kma-paper: #FBF9F2;
	--kma-ink: #171715;
	--kma-muted: #6F6F67;
	--kma-line: rgba(23, 23, 21, .08);
	--kma-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--kma-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--kma-ui: "Space Grotesk", var(--kma-sans);
	--kma-tab-h: 62px;
	--kma-safe-b: env(safe-area-inset-bottom, 0px);
	--kma-safe-t: env(safe-area-inset-top, 0px);
	--kma-ease: cubic-bezier(.2, .8, .2, 1);
}

/* App chrome is hidden on desktop. */
.kma-tabbar, .kma-sheet, .kma-scrim, .kma-buybar { display: none; }

@media (max-width: 1040px) {

	/* ---------------------------------------------------------------
	 * Global touch polish
	 * ------------------------------------------------------------- */
	html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
	body.kma { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
	body.kma .body_wrap { overflow-x: clip; }
	body.kma a, body.kma button, body.kma [role="button"], body.kma input, body.kma label, body.kma select { touch-action: manipulation; }
	body.kma img { -webkit-user-drag: none; }

	/* iOS zooms into inputs smaller than 16px – keep forms steady. */
	body.kma input[type="text"], body.kma input[type="email"], body.kma input[type="search"], body.kma input[type="tel"],
	body.kma input[type="password"], body.kma input[type="number"], body.kma input[type="url"], body.kma select, body.kma textarea { font-size: 16px !important; }

	/* Tactile press feedback, like native buttons. */
	body.kma .button, body.kma button, body.kma .btn, body.kma .elementor-button, body.kma .sc_button,
	body.kma .kma-tab, body.kma .kma-q, body.kma .kma-list a, body.kma .woocommerce ul.products li.product a {
		transition: transform .14s var(--kma-ease), opacity .14s, background-color .2s;
	}
	body.kma .button:active, body.kma button:active, body.kma .btn:active, body.kma .elementor-button:active, body.kma .sc_button:active { transform: scale(.97); }
	body.kma .woocommerce ul.products li.product a:active { transform: scale(.985); opacity: .9; }

	/* Room for the tab bar. */
	body.kma-has-tabs { padding-bottom: calc(var(--kma-tab-h) + var(--kma-safe-b)) !important; }
	body.kma-has-tabs .trx_addons_scroll_to_top { display: none !important; }
	body.kma-has-tabs #kToasts { bottom: calc(var(--kma-tab-h) + var(--kma-safe-b) + 12px) !important; }

	/* ---------------------------------------------------------------
	 * Header – compact app bar that tucks away on scroll
	 * ------------------------------------------------------------- */
	body.kma header.top_panel { transition: transform .32s var(--kma-ease), box-shadow .3s; z-index: 1000; }
	html.kma-hdr-hide body.kma header.top_panel { transform: translateY(calc(-100% - 4px)); }
	html.kma-scrolled body.kma .kei .site-header { box-shadow: 0 1px 0 var(--kma-line), 0 8px 24px rgba(15, 26, 51, .06); }
	body.kma .kei .site-header { background: rgba(251, 249, 242, .9) !important; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
	body.kma .kei .site-header .wrap { height: 60px; gap: 6px; padding-left: 16px; padding-right: 10px; }
	body.kma .kei .brand img { height: 36px; width: auto; }
	body.kma .kei .icon-btn { width: 42px; height: 42px; border-radius: 12px; }
	body.kma .kei .icon-btn:active { background: rgba(15, 26, 51, .06); }
	/* The tab bar's "Menu" replaces the hamburger. */
	body.kma-has-tabs .kei .site-header .menu-toggle { display: none !important; }
	body.kma .kei .announce { font-size: 12px; }
	body.kma .kei .announce .wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	html.kma-standalone body.kma .kei .announce { display: none; }

	/* ---------------------------------------------------------------
	 * Bottom tab bar
	 * ------------------------------------------------------------- */
	.kma-tabbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
		display: flex; align-items: stretch;
		height: calc(var(--kma-tab-h) + var(--kma-safe-b)); padding: 0 6px var(--kma-safe-b);
		background: rgba(251, 249, 242, .86);
		-webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
		border-top: .5px solid rgba(15, 26, 51, .12);
		transition: transform .3s var(--kma-ease);
		view-transition-name: kma-tabbar;
	}
	html.kma-typing .kma-tabbar, html.kma-sheet-open .kma-tabbar { transform: translateY(110%); }
	.kma-tab {
		flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		padding: 6px 2px 4px; border: 0; background: transparent; cursor: pointer;
		color: #7b7a72 !important; text-decoration: none !important; font: inherit;
	}
	.kma-tab-ic { position: relative; display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color .25s var(--kma-ease); }
	.kma-tab .kma-i { width: 23px; height: 23px; }
	.kma-tab-l { font-family: var(--kma-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
	.kma-tab.is-active { color: var(--kma-navy) !important; }
	.kma-tab.is-active .kma-tab-ic { background: rgba(210, 166, 111, .24); }
	.kma-tab.is-active .kma-i { stroke-width: 2; }
	.kma-tab:active .kma-tab-ic { transform: scale(.9); }
	.kma-ava-s { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--kma-navy); color: #fff; font: 700 12px/1 var(--kma-ui); }
	.kma-tab.is-active .kma-ava-s { box-shadow: 0 0 0 2px var(--kma-gold); }

	/* ---------------------------------------------------------------
	 * Icons
	 * ------------------------------------------------------------- */
	.kma-i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

	/* ---------------------------------------------------------------
	 * Menu sheet
	 * ------------------------------------------------------------- */
	.kma-scrim { display: block; position: fixed; inset: 0; z-index: 9995; background: rgba(8, 12, 24, .42); opacity: 0; transition: opacity .3s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
	.kma-scrim[hidden] { display: none; }
	html.kma-sheet-open .kma-scrim { opacity: 1; }

	.kma-sheet {
		display: flex; flex-direction: column;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9996;
		max-height: calc(100dvh - var(--kma-safe-t) - 28px); height: calc(100dvh - var(--kma-safe-t) - 28px);
		background: #F5F3EB; border-radius: 22px 22px 0 0;
		box-shadow: 0 -10px 40px rgba(8, 12, 24, .22);
		transform: translateY(105%); visibility: hidden;
		transition: transform .38s var(--kma-ease), visibility 0s .38s;
		outline: none; overscroll-behavior: contain;
		font-family: var(--kma-sans); color: var(--kma-ink);
	}
	html.kma-sheet-open .kma-sheet { transform: translateY(0); visibility: visible; transition: transform .38s var(--kma-ease), visibility 0s; }
	.kma-sheet.is-dragging { transition: none !important; }
	@media (min-width: 700px) {
		.kma-sheet { left: 50%; right: auto; width: 620px; margin-left: -310px; height: min(86dvh, 860px); }
	}
	.kma-sheet-grab { display: flex; justify-content: center; padding: 8px 0 2px; cursor: grab; touch-action: none; }
	.kma-sheet-grab span { width: 38px; height: 5px; border-radius: 5px; background: rgba(15, 26, 51, .2); }
	.kma-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 16px 10px 20px; touch-action: none; }
	.kma-sheet-head h2 { margin: 0 !important; letter-spacing: 0 !important; text-transform: none !important; font-family: var(--kma-serif); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--kma-ink); }
	.kma-round { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 26, 51, .08); color: var(--kma-ink); cursor: pointer; }
	.kma-round .kma-i { width: 18px; height: 18px; stroke-width: 2.2; }
	.kma-sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 16px calc(24px + var(--kma-safe-b)); }

	/* Profile card */
	.kma-profile {
		display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; text-decoration: none !important;
		background: linear-gradient(135deg, var(--kma-navy) 0%, #23345f 100%); color: #fff !important;
		box-shadow: 0 10px 26px rgba(15, 26, 51, .22);
	}
	.kma-profile img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--kma-gold); object-fit: cover; }
	.kma-profile > span:not(.kma-profile-ic):not(.kma-profile-btns) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
	.kma-profile strong { font-family: var(--kma-ui); font-size: 17px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.kma-profile small { font-size: 13px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.kma-profile > .kma-i { color: var(--kma-gold); }
	.kma-profile-guest { flex-wrap: wrap; }
	.kma-profile-guest small { white-space: normal; }
	.kma-profile-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(210, 166, 111, .2); color: var(--kma-gold); }
	.kma-profile-btns { display: flex; gap: 10px; width: 100%; }
	.kma-profile-btns .kma-btn { flex: 1; }

	.kma-btn {
		display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
		border-radius: 999px; border: 0; font-family: var(--kma-ui); font-weight: 600; font-size: 15px; letter-spacing: .01em;
		text-decoration: none !important; cursor: pointer; white-space: nowrap;
	}
	.kma-btn-gold { background: var(--kma-gold); color: #fff !important; }
	.kma-btn-ghost { background: rgba(255, 255, 255, .1); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
	.kma-btn-navy { background: var(--kma-navy); color: #fff !important; }

	/* Quick actions */
	.kma-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 6px; }
	.kma-q {
		position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 4px 12px;
		border: 0; border-radius: 16px; background: #fff; color: var(--kma-navy) !important; text-decoration: none !important;
		font: 600 12px/1.1 var(--kma-ui); cursor: pointer; box-shadow: 0 1px 2px rgba(15, 26, 51, .05);
	}
	.kma-q .kma-i { width: 24px; height: 24px; color: var(--kma-gold-ink); }
	.kma-q:active { transform: scale(.95); background: #faf7ee; }
	.kma-q-badge { position: absolute; top: 8px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--kma-gold); color: #fff; font: 800 10.5px/18px var(--kma-ui); text-align: center; }

	/* Grouped lists */
	.kma-sec { margin: 24px 6px 9px !important; padding: 0 !important; font: 700 12px/1 var(--kma-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--kma-gold-ink); }
	.kma-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 26, 51, .05); }
	.kma-list li { margin: 0 !important; padding: 0 !important; list-style: none !important; line-height: 1.25; }
	.kma-list li::before, .kma-list li::marker { content: none !important; }
	.kma-list li + li a, .kma-list li + li .kma-acc-btn { border-top: .5px solid var(--kma-line); }
	.kma-list a, .kma-acc-btn {
		display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 10px 14px; margin: 0;
		color: var(--kma-ink) !important; text-decoration: none !important; background: transparent; border: 0; text-align: left; font: inherit; line-height: 1.25 !important; cursor: pointer; box-sizing: border-box;
	}
	.kma-list a:active, .kma-acc-btn:active { background: #f4f1e7; }
	.kma-list a.is-current .kma-li-t { color: var(--kma-gold-ink); font-weight: 700; }
	.kma-list a.is-danger { color: #b3261e !important; }
	.kma-list a.is-danger .kma-li-ic { background: rgba(179, 38, 30, .09); color: #b3261e; }
	.kma-li-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(210, 166, 111, .16); color: var(--kma-gold-ink); flex-shrink: 0; }
	.kma-li-ic svg { width: 19px !important; height: 19px !important; fill: none; stroke: currentColor; stroke-width: 1.8; }
	.kma-li-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 600 15.5px/1.25 var(--kma-sans); }
	.kma-li-t small { font-size: 12.5px; font-weight: 400; color: var(--kma-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.kma-list .kma-i { width: 17px; height: 17px; color: #b9b6aa; stroke-width: 2; }
	.kma-acc-btn[aria-expanded="true"] > .kma-i { transform: rotate(90deg); }
	.kma-acc-btn > .kma-i { transition: transform .25s var(--kma-ease); }
	.kma-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--kma-ease); background: #fbfaf5; }
	.kma-sub > ul { overflow: hidden; list-style: none; margin: 0; padding: 0; }
	.kma-sub.is-open { grid-template-rows: 1fr; }
	.kma-sub a { padding-left: 62px; min-height: 50px; border-top: .5px solid var(--kma-line); }
	.kma-sub .kma-li-t { font-size: 14.5px; }

	.kma-portal { margin-top: 12px; }
	.kma-portal a {
		display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 16px;
		background: var(--kma-navy); color: #fff !important; text-decoration: none !important; font: 600 15px/1 var(--kma-ui); letter-spacing: .04em;
	}
	.kma-portal a .kma-i { color: var(--kma-gold); width: 18px; height: 18px; }

	/* Contact */
	.kma-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.kma-contact-row a {
		display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; text-decoration: none !important;
		color: var(--kma-ink) !important; box-shadow: 0 1px 2px rgba(15, 26, 51, .05); min-width: 0;
	}
	.kma-contact-row a > span:last-child { display: flex; flex-direction: column; min-width: 0; }
	.kma-contact-row b { font: 700 14px/1.2 var(--kma-ui); }
	.kma-contact-row small { font-size: 12px; color: var(--kma-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.kma-social { display: flex; justify-content: center; gap: 12px; margin: 16px 0 4px; }
	.kma-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--kma-navy) !important; box-shadow: 0 1px 2px rgba(15, 26, 51, .06); }
	.kma-social svg { width: 18px; height: 18px; }

	.kma-install {
		display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 18px; padding: 14px; border: 1.5px dashed rgba(156, 113, 52, .45);
		border-radius: 16px; background: rgba(210, 166, 111, .08); color: var(--kma-ink); text-align: left; cursor: pointer; font: inherit;
	}
	.kma-install[hidden] { display: none; }
	.kma-install > span:last-child { display: flex; flex-direction: column; gap: 2px; }
	.kma-install strong { font: 700 15px/1.2 var(--kma-ui); }
	.kma-install small { font-size: 12.5px; color: var(--kma-muted); }
	.kma-fine { margin: 22px 0 0; text-align: center; font-size: 12px; color: #a3a196; }

	/* ---------------------------------------------------------------
	 * Sticky buy bar on book pages
	 * ------------------------------------------------------------- */
	.kma-buybar {
		display: flex; align-items: center; gap: 12px;
		position: fixed; z-index: 9980; left: 10px; right: 10px;
		bottom: calc(var(--kma-safe-b) + 10px);
		padding: 8px 8px 8px 10px; border-radius: 18px; background: rgba(255, 255, 255, .94);
		-webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
		box-shadow: 0 10px 30px rgba(15, 26, 51, .18), 0 0 0 .5px rgba(15, 26, 51, .08);
		transform: translateY(160%); transition: transform .35s var(--kma-ease);
	}
	body.kma-has-tabs .kma-buybar { bottom: calc(var(--kma-tab-h) + var(--kma-safe-b) + 10px); }
	.kma-buybar.is-on { transform: none; }
	html.kma-typing .kma-buybar, html.kma-sheet-open .kma-buybar { transform: translateY(260%); }
	.kma-buybar img { width: 36px; height: 52px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
	.kma-buybar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
	.kma-buybar-t strong { font: 600 14px/1.2 var(--kma-ui); color: var(--kma-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.kma-buybar-p { font-size: 14px; font-weight: 700; color: var(--kma-navy); }
	.kma-buybar-p del { opacity: .5; font-weight: 400; }
	.kma-buybar-p ins { text-decoration: none; }
	.kma-buybar .kma-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }

	/* ---------------------------------------------------------------
	 * Smooth page-to-page transitions (Chrome / Edge / Safari 18+)
	 * ------------------------------------------------------------- */
	@view-transition { navigation: auto; }
	body.kma header.top_panel { view-transition-name: kma-header; }
	::view-transition-old(root) { animation: kma-vt-out .18s ease both; }
	::view-transition-new(root) { animation: kma-vt-in .26s var(--kma-ease) both; }
	@keyframes kma-vt-out { to { opacity: 0; } }
	@keyframes kma-vt-in { from { opacity: 0; transform: translateY(10px); } }
}

/* ---------------------------------------------------------------
 * Footer – compact, app-style (phones)
 * ------------------------------------------------------------- */
@media (max-width: 640px) {
	body.kma .kei .site-footer .ft-news { padding: 22px 18px; border-radius: 20px; }
	body.kma .kei .site-footer .ft-news h3 { font-size: 26px; line-height: 1.15; }
	body.kma .kei .ft-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
	body.kma .kei .ft-brand { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 22px; }
	body.kma .kei .ft-brand p { max-width: 300px; font-size: 14px; }
	body.kma .kei .ft-brand .f-social { justify-content: center; }
	body.kma .kei .ft-brand .f-social a { width: 46px; height: 46px; }

	body.kma .kei .ft-col { border-top: .5px solid rgba(255, 255, 255, .12); }
	body.kma .kei .ft-col h4 {
		display: flex; align-items: center; justify-content: space-between; margin: 0 !important; padding: 18px 2px;
		cursor: pointer; user-select: none; -webkit-user-select: none;
	}
	body.kma .kei .ft-col h4::after {
		content: ""; width: 9px; height: 9px; margin-right: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
		transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--kma-ease); opacity: .8;
	}
	body.kma .kei .ft-col.kma-open h4::after { transform: rotate(-135deg) translateY(-1px); }
	html.kma-js body.kma .kei .ft-col .f-links { display: block; margin: 0 !important; max-height: 0; overflow: hidden; transition: max-height .32s var(--kma-ease); }
	html.kma-js body.kma .kei .ft-col.kma-open .f-links { max-height: 420px; padding-bottom: 12px !important; }
	body.kma .kei .ft-col .f-links a { display: block; padding: 9px 2px; font-size: 15.5px; }

	body.kma .kei .ft-contact { border-top: .5px solid rgba(255, 255, 255, .12); padding-top: 18px; display: grid; grid-template-columns: 1fr; gap: 8px; }
	body.kma .kei .ft-contact h4 { grid-column: 1 / -1; margin: 0 0 4px !important; }
	body.kma .kei .ft-contact .ft-item { margin: 0 !important; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .05); align-items: flex-start; min-width: 0; }
	body.kma .kei .ft-contact .ft-item b { font-size: 14.5px; overflow-wrap: anywhere; }
	body.kma .kei .ft-contact a.ft-item:active { background: rgba(255, 255, 255, .1); }

	body.kma .kei .ft-bottom { text-align: center; }
	body.kma .kei .ft-bottom .wrap { flex-direction: column; align-items: center; gap: 12px; }
	body.kma .kei .ft-bottom nav { justify-content: center; flex-wrap: wrap; }
	body.kma .kei .ft-pay { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 1040px) and (prefers-reduced-motion: reduce) {
	body.kma header.top_panel, .kma-tabbar, .kma-sheet, .kma-buybar { transition: none !important; }
	::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}