/*
 * Ketabbin 3.2.4 — dark palette unification and cross-page bug fixes.
 * Loaded after every visual layer.
 */

html,
body {
	max-width: 100%;
}

body { overflow-x: clip; }

.kb-mobile-theme-controls { display: none; }

/* Dark mode: replace all coral/pink UI accents with the Ketabbin gold family. */
html[data-theme="dark"] {
	--commerce-danger: #f2b632;
	--danger: #f2b632;
}

html[data-theme="dark"] :is(.kb-discount-badge, .kb-format-badge, .woocommerce span.onsale) {
	border: 1px solid #f5d680 !important;
	background: linear-gradient(135deg, #f4cc65, #d99a32) !important;
	box-shadow: 0 5px 14px rgba(217, 154, 50, .24) !important;
	color: #071d29 !important;
}

html[data-theme="dark"] :is(.kb-wishlist-button:hover, .kb-wishlist-button.is-saved) {
	border-color: #e8b75b !important;
	background: rgba(242, 182, 50, .12) !important;
	color: #f4c85d !important;
}

html[data-theme="dark"] .kb-member-icon-action b {
	border-color: #0a2024 !important;
	background: #f2b632 !important;
	color: #071d29 !important;
}

html[data-theme="dark"] .kb-auth-message.is-error {
	border: 1px solid rgba(242, 182, 50, .42) !important;
	background: rgba(242, 182, 50, .09) !important;
	color: #f4c85d !important;
}

html[data-theme="dark"] .kb-toast.is-error { border-color: #f2b632 !important; }

@media (max-width: 980px) {
	.kb-commerce-nav .kb-nav {
		max-height: calc(100dvh - var(--commerce-header-height) - 14px) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}

	.kb-mobile-theme-controls {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 7px;
		margin-top: 9px;
		padding-top: 9px;
		border-top: 1px solid var(--line);
	}

	.kb-mobile-theme-controls > span {
		grid-column: 1 / -1;
		color: var(--muted);
		font-size: 9px;
		font-weight: 750;
	}

	.kb-mobile-theme-controls button {
		display: flex;
		min-height: 42px;
		padding: 7px 10px;
		align-items: center;
		justify-content: center;
		gap: 7px;
		border: 1px solid var(--line);
		border-radius: 10px;
		background: var(--surface-2);
		color: var(--text);
	}

	.kb-mobile-theme-controls button.is-active {
		border-color: #e8b75b;
		background: linear-gradient(135deg, #edc66f, #bd8127);
		color: #071d29;
	}

	.kb-mobile-theme-controls svg { width: 19px; height: 19px; }
	.kb-mobile-theme-controls b { font-size: 9px; }
}

@media (max-width: 700px) {
	/* Live search results must escape the form; the input itself handles text clipping. */
	.kb-commerce-search { overflow: visible !important; }

	.kb-search-results {
		right: 0 !important;
		left: 0 !important;
		width: 100% !important;
		max-height: min(58dvh, 430px) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		border: 1px solid color-mix(in srgb, #e8b75b 38%, var(--line)) !important;
		background: var(--surface) !important;
		box-shadow: 0 18px 42px rgba(0, 0, 0, .28) !important;
	}

	.kb-story-list,
	.kb-quick-links,
	.kb-product-rail,
	.kb-shop-category-chips {
		scrollbar-width: none !important;
		-ms-overflow-style: none;
	}

	.kb-story-list::-webkit-scrollbar,
	.kb-quick-links::-webkit-scrollbar,
	.kb-product-rail::-webkit-scrollbar,
	.kb-shop-category-chips::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.kb-category-mega {
		max-height: calc(100dvh - var(--commerce-header-height) - 12px) !important;
		overscroll-behavior: contain;
	}

	.kb-commerce-hero-grid .kb-hero-slide__copy {
		padding-bottom: 108px !important;
	}

	.kb-commerce-hero-grid .kb-button--hero {
		min-height: 46px !important;
		max-width: calc(100% - 22px) !important;
		padding-inline: 18px !important;
		white-space: normal !important;
		text-align: center !important;
	}

	.kb-mobile-store-nav a {
		font-size: 9px !important;
		line-height: 1.25 !important;
	}

	.kb-mobile-store-nav a span {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	html { scroll-padding-top: calc(var(--commerce-header-height) + 12px); }
	body { scroll-padding-bottom: calc(76px + var(--kb-safe-bottom, 0px)); }
}

@supports not (overflow: clip) {
	body { overflow-x: hidden; }
}