/*
 * Ketabbin 3.1 — Balanced Fantasy
 * One final low-cost layer loaded after RTL. No perpetual DOM or canvas engine.
 */

:root {
	--kb-balanced-gold: #e8b75b;
	--kb-balanced-green: #2e8c70;
	--kb-balanced-night: #061a22;
	--kb-library-image: url('../images/enchanted-library-bg-v10.webp');
	--kb-wand-cursor: url('../images/kb-wand-cursor-v10.png');
	--kb-safe-bottom: env(safe-area-inset-bottom);
}

html { background: var(--paper); }

body {
	position: relative;
	isolation: isolate;
	background: transparent !important;
}

body::before {
	content: "" !important;
	position: fixed !important;
	z-index: -1 !important;
	inset: 0 !important;
	background:
		linear-gradient(rgba(229, 231, 226, .88), rgba(229, 231, 226, .94)),
		var(--kb-library-image) center / cover no-repeat !important;
	opacity: 1 !important;
	pointer-events: none;
}

html[data-theme="dark"] body::before {
	background:
		linear-gradient(rgba(3, 16, 20, .64), rgba(3, 16, 20, .82)),
		var(--kb-library-image) center / cover no-repeat !important;
}

body::after { display: none !important; }

@media (pointer: fine) {
	body,
	a,
	button,
	[role="button"],
	label,
	select,
	.kb-store-card,
	.kb-story { cursor: var(--kb-wand-cursor) 5 5, auto !important; }

	input,
	textarea,
	[contenteditable="true"] { cursor: text !important; }
}

/* Fixed elements: deterministic and independent from animated ancestors. */
.kb-commerce-header.kb-header {
	position: fixed !important;
	z-index: 9000 !important;
	top: var(--kb-admin-bar-offset, 0px) !important;
	right: 0 !important;
	left: 0 !important;
	width: 100% !important;
	transform: translate3d(0, 0, 0) !important;
	backface-visibility: hidden;
	background: color-mix(in srgb, var(--surface) 97%, transparent) !important;
	box-shadow: 0 5px 18px rgba(2, 24, 21, .1) !important;
	backdrop-filter: none !important;
}

.kb-commerce-header.kb-header::before { display: none !important; }

.kb-commerce-header.kb-header::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--kb-balanced-gold) 20%, var(--kb-balanced-green) 50%, var(--kb-balanced-gold) 80%, transparent);
	opacity: .62;
}

.kb-main {
	position: relative;
	z-index: 1;
	padding-top: var(--commerce-header-height) !important;
}

/* Header remains fantasy through static craftsmanship, not constant repainting. */
.kb-commerce-notice {
	background: linear-gradient(100deg, #041923, #0b382e 55%, #041923) !important;
}

.kb-commerce-notice::after { animation: none !important; }

.kb-commerce-head .kb-brand::before {
	content: "✦";
	position: absolute;
	top: 4px;
	right: -2px;
	color: var(--kb-balanced-gold);
	font: 9px Georgia, serif;
	text-shadow: 0 0 8px rgba(232, 183, 91, .62);
}

.kb-commerce-head .kb-brand::after {
	content: "" !important;
	position: absolute !important;
	right: 14% !important;
	bottom: 1px !important;
	left: 14% !important;
	height: 1px !important;
	background: linear-gradient(90deg, transparent, var(--kb-balanced-gold), transparent) !important;
	animation: none !important;
}

.kb-commerce-head .kb-brand img { animation: none !important; }

.kb-commerce-search {
	border: 1px solid color-mix(in srgb, var(--kb-balanced-gold) 28%, var(--line)) !important;
	background: color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
	box-shadow: none !important;
	animation: none !important;
}

.kb-commerce-search:focus-within {
	border-color: color-mix(in srgb, var(--kb-balanced-green) 45%, var(--line)) !important;
	box-shadow: none !important;
}

.kb-commerce-actions,
.kb-commerce-actions > * { transform: none !important; animation: none !important; }

/* Slider controls are always horizontal, isolated and never overlap vertically. */
.kb-hero-slider__controls {
	position: absolute !important;
	z-index: 30 !important;
	right: auto !important;
	bottom: 18px !important;
	left: 18px !important;
	display: grid !important;
	grid-template-columns: repeat(2, 42px) !important;
	grid-auto-flow: column !important;
	width: 92px !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: center !important;
	gap: 8px !important;
	direction: ltr !important;
	transform: none !important;
}

.kb-hero-slider__controls button {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	display: grid !important;
	width: 42px !important;
	min-width: 42px !important;
	height: 42px !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(232, 183, 91, .55) !important;
	border-radius: 50% !important;
	background: rgba(4, 22, 27, .86) !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18) !important;
	color: #f4ead5 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	transform: none !important;
	animation: none !important;
	place-items: center !important;
}

.kb-hero-slider__controls button:hover {
	border-color: var(--kb-balanced-gold) !important;
	background: var(--kb-balanced-green) !important;
	transform: translateY(-2px) !important;
}

.kb-hero-slider__dots {
	position: absolute !important;
	z-index: 30 !important;
	right: 24px !important;
	bottom: 29px !important;
	left: auto !important;
	display: flex !important;
	width: auto !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: center !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 7px !important;
	direction: ltr !important;
	transform: none !important;
}

.kb-hero-slider__dots button {
	position: relative !important;
	display: block !important;
	width: 8px !important;
	min-width: 8px !important;
	height: 8px !important;
	min-height: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	transform: none !important;
	animation: none !important;
}

.kb-hero-slider__dots button.is-active {
	width: 22px !important;
	border-radius: 99px !important;
	background: var(--kb-balanced-gold) !important;
}

.kb-hero-slide__copy .kb-button {
	display: inline-flex !important;
	width: auto !important;
	max-width: 100% !important;
	align-self: flex-start !important;
}

.kb-hero-slider::after { animation-duration: 16s !important; opacity: .42 !important; }
.kb-hero-slider__track::before { display: none !important; }

/* Fantasy surfaces with inexpensive hover-only motion. */
.kb-button,
.kb-card-action,
.kb-store-card__buy,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: linear-gradient(135deg, #edc66f, #bd8127) !important;
	box-shadow: 0 7px 17px rgba(86, 55, 10, .14) !important;
	transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
	animation: none !important;
}

.kb-button:hover,
.kb-card-action:hover,
.kb-store-card__buy:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	filter: brightness(1.05);
	transform: translateY(-2px) !important;
	box-shadow: 0 11px 24px rgba(86, 55, 10, .2) !important;
}

.kb-store-card,
.woocommerce ul.products li.product,
.kb-article-card,
.kb-category-grid > a,
.kb-quick-links > a,
.kb-member-card,
.kb-dashboard-card {
	border-color: color-mix(in srgb, var(--kb-balanced-gold) 24%, var(--line)) !important;
	background: color-mix(in srgb, var(--commerce-card, var(--surface)) 97%, transparent) !important;
	box-shadow: 0 7px 20px rgba(2, 27, 23, .065) !important;
	backdrop-filter: none !important;
	transform: none !important;
	animation: none !important;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
	contain: paint;
}

.kb-store-card:hover,
.woocommerce ul.products li.product:hover,
.kb-article-card:hover,
.kb-category-grid > a:hover,
.kb-quick-links > a:hover,
.kb-member-card:hover,
.kb-dashboard-card:hover {
	border-color: color-mix(in srgb, var(--kb-balanced-gold) 62%, var(--line)) !important;
	box-shadow: 0 13px 28px rgba(2, 27, 23, .12), 0 0 18px rgba(232, 183, 91, .06) !important;
	transform: translateY(-3px) !important;
}

.kb-store-card:hover img,
.woocommerce ul.products li.product:hover img { transform: translateY(-3px) !important; }

.kb-story,
.kb-story > span::before,
.kb-story > span::after,
.kb-epub-commerce__books a,
.kb-commerce-search,
.kb-living-svg,
.kb-card-familiar,
.kb-section-rune,
.kb-progress i,
.kb-order-track i,
.kb-member-order__track i { animation: none !important; }

.kb-story:hover > span::after { animation: kb-balanced-ring .75s ease-out 1 !important; }

.kb-service-strip,
.kb-community-commerce,
.kb-daily-pick,
.kb-story-rail,
.kb-quick-links {
	backdrop-filter: none !important;
	background: color-mix(in srgb, var(--surface) 97%, transparent) !important;
}

/* One-shot click and cart animations; no canvas and no persistent particle loop. */
.kb-quick-spark {
	position: fixed;
	z-index: 10020;
	display: block;
	width: 5px;
	height: 5px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: var(--kb-balanced-gold);
	box-shadow: 0 0 7px var(--kb-balanced-gold);
	pointer-events: none;
	animation: kb-quick-spark .55s cubic-bezier(.16, .7, .2, 1) var(--kb-spark-delay, 0ms) forwards;
}

.kb-quick-spark:nth-child(even) { background: #55ba98; box-shadow: 0 0 7px #55ba98; }

.kb-balanced-flying-book {
	position: fixed;
	z-index: 10030;
	margin: 0;
	border: 1px solid rgba(239, 200, 121, .7);
	border-radius: 5px;
	object-fit: cover;
	box-shadow: -7px 10px 20px rgba(0, 0, 0, .25), 0 0 15px rgba(232, 183, 91, .22);
	pointer-events: none;
}

.kb-cart-link.is-kb-balanced-catch { animation: kb-balanced-catch .5s ease-out 1 !important; }

/* Mobile bottom navigation: always pinned to the viewport. */
@media (max-width: 700px) {
	body { padding-bottom: calc(72px + var(--kb-safe-bottom, 0px)) !important; }

	.kb-mobile-store-nav {
		position: fixed !important;
		z-index: 9999 !important;
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		width: 100% !important;
		height: calc(64px + var(--kb-safe-bottom, 0px)) !important;
		margin: 0 !important;
		padding: 0 4px !important;
		padding-bottom: var(--kb-safe-bottom, 0px) !important;
		border-top: 1px solid color-mix(in srgb, var(--kb-balanced-gold) 30%, var(--line)) !important;
		background: var(--surface) !important;
		box-shadow: 0 -6px 20px rgba(2, 23, 20, .12) !important;
		backdrop-filter: none !important;
		transform: translate3d(0, 0, 0) !important;
		backface-visibility: hidden;
		contain: layout paint;
	}

	.kb-mobile-store-nav a {
		position: relative !important;
		display: flex !important;
		min-width: 0 !important;
		height: 64px !important;
		margin: 0 !important;
		padding: 7px 2px 5px !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 2px !important;
		flex-direction: column !important;
		transform: none !important;
		animation: none !important;
	}

	.kb-mobile-store-nav a:active { color: var(--kb-balanced-gold) !important; }
	.kb-mobile-store-nav svg { animation: none !important; transform: none !important; }

	.kb-hero-slider__controls {
		bottom: 14px !important;
		left: 14px !important;
		grid-template-columns: repeat(2, 38px) !important;
		width: 84px !important;
		height: 38px !important;
	}

	.kb-hero-slider__controls button {
		width: 38px !important;
		min-width: 38px !important;
		height: 38px !important;
		min-height: 38px !important;
	}

	.kb-hero-slider__dots { right: 16px !important; bottom: 25px !important; gap: 6px !important; }
	.kb-hero-slider__dots button { width: 7px !important; min-width: 7px !important; height: 7px !important; min-height: 7px !important; }
	.kb-hero-slider__dots button.is-active { width: 17px !important; }

	.kb-store-card:hover,
	.woocommerce ul.products li.product:hover,
	.kb-article-card:hover,
	.kb-category-grid > a:hover,
	.kb-quick-links > a:hover,
	.kb-member-card:hover,
	.kb-dashboard-card:hover { transform: none !important; }
}

@keyframes kb-balanced-ring {
	0% { transform: rotate(0) scale(.92); opacity: .25; }
	60% { opacity: .85; }
	100% { transform: rotate(120deg) scale(1.1); opacity: .18; }
}

@keyframes kb-quick-spark {
	0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
	100% { opacity: 0; transform: translate3d(var(--kb-spark-x), var(--kb-spark-y), 0) scale(.2); }
}

@keyframes kb-balanced-catch {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	42% { transform: translate3d(0, -3px, 0) scale(1.12) rotate(-4deg); box-shadow: 0 0 19px rgba(232, 183, 91, .34); }
}

@media (prefers-reduced-motion: reduce) {
	.kb-hero-slider::after,
	.kb-story:hover > span::after,
	.kb-quick-spark,
	.kb-balanced-flying-book,
	.kb-cart-link.is-kb-balanced-catch { display: none !important; animation: none !important; }

	*, *::before, *::after { scroll-behavior: auto !important; }
}