/* Ketabbin 4.69 — header order, story visibility, library-button and palette correction. */

:root,
html[data-theme="light"] {
	--kb-brand-orange: #c89c49;
	--kb-brand-orange-hover: #ad7f2f;
	--kb-brand-orange-soft: #e4c57f;
	--kb-redesign-orange: #c89c49;
	--kb-redesign-orange-hover: #ad7f2f;
	--kb-redesign-paper: #f1e8da;
	--kb-redesign-surface: #fffaf1;
	--kb-redesign-soft: #eee2d1;
	--kb-redesign-line: #dfcfb8;
	--kb-ref-orange: #c89c49;
	--kb-ref-orange-hover: #ad7f2f;
	--kb-ref-paper: #f1e8da;
	--kb-ref-cream: #f7eddf;
	--kb-ref-card: #fffaf1;
	--kb-ref-line: #dfcfb8;
	--kb-ref-muted: #69717b;
	--kb-magic-gold: #c89c49;
	--kb-magic-gold-deep: #946923;
	--kb-magic-amber: #c89c49;
	--commerce-offer: #c89c49;
	--commerce-offer-deep: #946923;
	--paper: #f1e8da;
	--surface: #fffaf1;
	--surface-2: #eee2d1;
	--commerce-card: #fffaf1;
	--commerce-warm: #f6ecdd;
	--text: #0b1c31;
	--muted: #69717b;
	--line: rgba(83, 58, 27, .16);
	--line-strong: rgba(148, 105, 35, .42);
	--kb-book-stage: #efe3d3;
	--shadow: 0 20px 58px rgba(55, 36, 14, .11);
	--shadow-soft: 0 9px 26px rgba(55, 36, 14, .075);
	color-scheme: light;
}

html[data-theme="dark"] {
	--kb-brand-orange: #cfaa5c;
	--kb-brand-orange-hover: #e0be72;
	--kb-brand-orange-soft: #ead08f;
	--kb-redesign-orange: #cfaa5c;
	--kb-redesign-orange-hover: #e0be72;
	--kb-redesign-paper: #06101b;
	--kb-redesign-surface: #0c1b2a;
	--kb-redesign-soft: #12263a;
	--kb-redesign-line: rgba(207, 170, 92, .24);
	--kb-ref-orange: #cfaa5c;
	--kb-ref-orange-hover: #e0be72;
	--kb-ref-paper: #06101b;
	--kb-ref-cream: #102235;
	--kb-ref-card: #0c1b2a;
	--kb-ref-line: rgba(207, 170, 92, .24);
	--kb-ref-muted: #aeb8c2;
	--kb-magic-gold: #cfaa5c;
	--kb-magic-gold-deep: #e0be72;
	--kb-magic-amber: #cfaa5c;
	--commerce-offer: #cfaa5c;
	--commerce-offer-deep: #e0be72;
	--paper: #06101b;
	--surface: #0c1b2a;
	--surface-2: #12263a;
	--commerce-card: #0c1b2a;
	--commerce-warm: #102235;
	--text: #f4ecdc;
	--muted: #aeb8c2;
	--line: rgba(207, 170, 92, .2);
	--line-strong: rgba(224, 190, 114, .5);
	--kb-book-stage: #e9dece;
	--shadow: 0 24px 70px rgba(0, 0, 0, .4);
	--shadow-soft: 0 10px 32px rgba(0, 0, 0, .27);
	color-scheme: dark;
}

/* A fixed two-row header needs an equally real content offset. */
:root {
	--kb-command-primary-height: 76px;
	--kb-command-secondary-height: 48px;
	--commerce-header-height: 124px;
}

.kb-main {
	padding-block-start: calc(var(--commerce-header-height) + 16px) !important;
}

.home .kb-main {
	padding-block-start: calc(var(--commerce-header-height) + 16px) !important;
}

/* Desktop: physical left = account actions, centre = search, right = logo. */
@media (min-width: 901px) {
	.kb-commerce-header[data-kb-command-header] .kb-commerce-head.kb-command-primary {
		display: grid !important;
		grid-template-areas: "actions search brand" !important;
		grid-template-columns: minmax(210px, .8fr) minmax(420px, 2fr) minmax(145px, .7fr) !important;
		grid-template-rows: var(--kb-command-primary-height) !important;
		column-gap: clamp(16px, 2vw, 34px) !important;
		direction: ltr !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-brand {
		grid-area: brand !important;
		grid-column: auto !important;
		grid-row: auto !important;
		justify-self: end !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search {
		position: relative !important;
		z-index: 2 !important;
		inset: auto !important;
		grid-area: search !important;
		display: grid !important;
		inline-size: 100% !important;
		max-inline-size: 820px !important;
		block-size: 46px !important;
		margin: 0 auto !important;
		box-shadow: 0 6px 18px rgba(23, 34, 48, .055) !important;
		transform: none !important;
	}

	html.js .kb-commerce-header[data-kb-command-header] .kb-command-search:not(.is-open),
	.kb-commerce-header[data-kb-command-header] .kb-command-search[hidden] {
		display: grid !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search__close {
		display: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-primary-actions {
		grid-area: actions !important;
		grid-column: auto !important;
		grid-row: auto !important;
		display: flex !important;
		justify-self: start !important;
		justify-content: flex-start !important;
		gap: 13px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search-launch {
		display: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-account,
	.kb-commerce-header[data-kb-command-header] .kb-command-primary-icon {
		position: relative !important;
		display: grid !important;
		inline-size: 50px !important;
		min-inline-size: 50px !important;
		block-size: 54px !important;
		padding: 0 0 17px !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		place-items: center !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-account {
		inline-size: 70px !important;
		min-inline-size: 70px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-account__label,
	.kb-commerce-header[data-kb-command-header] .kb-wishlist-link::after,
	.kb-commerce-header[data-kb-command-header] .kb-cart-link::after {
		color: var(--text) !important;
	}
}

/* Second row: category on the right, site topics beside it, theme at far left. */
.kb-commerce-header[data-kb-command-header] .kb-commerce-nav-wrap {
	block-size: var(--kb-command-secondary-height) !important;
	background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
}

.kb-commerce-header[data-kb-command-header] .kb-command-shortcuts {
	display: grid !important;
	grid-template-areas: "category menu theme" !important;
	grid-template-columns: max-content minmax(0, 1fr) 44px !important;
	block-size: var(--kb-command-secondary-height) !important;
	gap: 12px !important;
	direction: rtl !important;
}

.kb-commerce-header[data-kb-command-header] .kb-command-secondary-category {
	grid-area: category !important;
	display: inline-flex !important;
	inline-size: auto !important;
	min-inline-size: 142px !important;
	block-size: 38px !important;
	padding-inline: 14px !important;
	border: 1px solid color-mix(in srgb, var(--kb-brand-orange) 62%, var(--line)) !important;
	border-radius: 10px !important;
	background: color-mix(in srgb, var(--kb-brand-orange) 12%, var(--surface)) !important;
	color: var(--text) !important;
}

.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu {
	grid-area: menu !important;
	min-inline-size: 0;
}

.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu > ul {
	inline-size: max-content !important;
	min-inline-size: 100% !important;
	justify-content: flex-start !important;
	gap: clamp(18px, 2.7vw, 42px) !important;
}

.kb-commerce-header[data-kb-command-header] .kb-command-secondary-theme {
	grid-area: theme !important;
	justify-self: end !important;
	display: inline-flex !important;
	inline-size: 42px !important;
	block-size: 38px !important;
}

/* Keep the compact one-button theme affordance at the far left. */
.kb-commerce-header[data-kb-command-header] .kb-command-secondary-theme > button {
	inline-size: 40px !important;
	min-inline-size: 40px !important;
	block-size: 36px !important;
	padding: 9px !important;
}

.kb-commerce-header[data-kb-command-header] .kb-command-secondary-theme > button[data-kb-theme="light"] {
	display: none !important;
}

html[data-theme="dark"] .kb-commerce-header[data-kb-command-header] .kb-command-secondary-theme > button[data-kb-theme="dark"] {
	display: none !important;
}

html[data-theme="dark"] .kb-commerce-header[data-kb-command-header] .kb-command-secondary-theme > button[data-kb-theme="light"] {
	display: grid !important;
}

/* Full story card, no longer hidden underneath the fixed header. */
.kb-story-rail--featured {
	z-index: 4 !important;
	min-block-size: 118px !important;
	margin-block: 0 18px !important;
	padding: 18px 22px !important;
	border-color: color-mix(in srgb, var(--kb-brand-orange) 50%, var(--line)) !important;
	background:
		radial-gradient(circle at 12% 45%, color-mix(in srgb, var(--kb-brand-orange) 12%, transparent), transparent 20rem),
		var(--surface) !important;
	box-shadow: var(--shadow-soft) !important;
	overflow: hidden !important;
}

.kb-story-rail--featured .kb-story-list {
	min-block-size: 84px;
	align-items: center;
}

.kb-story-rail--featured .kb-story {
	display: block !important;
	min-inline-size: 74px !important;
	block-size: auto !important;
	padding: 2px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.kb-story-rail--featured .kb-story > span,
.kb-story-rail--featured .kb-story--placeholder > i {
	display: grid !important;
	inline-size: 68px !important;
	block-size: 68px !important;
}

/* Library button: the large logical cell is always the button, reactions stay compact. */
:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions {
	direction: rtl !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 44px !important;
	inline-size: 100% !important;
	min-inline-size: 0 !important;
	gap: 8px !important;
	align-items: stretch !important;
}

:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions > .kbc-library-button {
	grid-column: 1 !important;
	grid-row: 1 !important;
	display: inline-flex !important;
	inline-size: 100% !important;
	min-inline-size: 0 !important;
	max-inline-size: 100% !important;
	block-size: 46px !important;
	min-block-size: 46px !important;
	max-block-size: 46px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	overflow: hidden !important;
	border: 1px solid var(--line) !important;
	border-radius: 11px !important;
	background: var(--surface) !important;
	box-shadow: none !important;
	color: var(--text) !important;
	font-size: clamp(10.5px, .78vw, 12.5px) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-align: center !important;
	white-space: nowrap !important;
	writing-mode: horizontal-tb !important;
	transform: none !important;
}

:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions > .kbc-library-button > span {
	display: inline !important;
	flex: 0 0 auto !important;
	font-size: 16px !important;
	line-height: 1 !important;
}

:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions > .kbc-reactions {
	grid-column: 2 !important;
	grid-row: 1 !important;
	display: grid !important;
	inline-size: 44px !important;
	min-inline-size: 44px !important;
	block-size: 46px !important;
	place-items: center !important;
}

.kb-store-card .kb-store-card__body > .kbc-library-button,
body.single-product .kb-product-core-actions .kbc-library-button {
	display: inline-flex !important;
	inline-size: 100% !important;
	min-inline-size: 0 !important;
	max-inline-size: 100% !important;
	min-block-size: 46px !important;
	padding: 0 12px !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	overflow: hidden !important;
	border-radius: 11px !important;
	white-space: nowrap !important;
	writing-mode: horizontal-tb !important;
}

/* Banner polish: reset inherited circle borders and keep contrast intentional. */
.kb-reference-hero::before {
	inset: 0 !important;
	inline-size: auto !important;
	block-size: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.kb-reference-hero::after {
	inset: auto -8% -38% auto !important;
	inline-size: 48% !important;
	block-size: 78% !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 244, 219, .42) !important;
	filter: blur(42px) !important;
}

html[data-theme="light"] .kb-reference-hero {
	background:
		radial-gradient(circle at 76% 24%, rgba(200, 156, 73, .18), transparent 24rem),
		linear-gradient(125deg, #f8efe1 0%, #ecddc8 54%, #e3cfb3 100%) !important;
}

html[data-theme="dark"] .kb-reference-hero {
	background:
		radial-gradient(circle at 72% 28%, rgba(207, 170, 92, .16), transparent 24rem),
		linear-gradient(132deg, #07121f 0%, #0d2336 54%, #091928 100%) !important;
}

html[data-theme="dark"] .kb-reference-hero::after {
	background: rgba(207, 170, 92, .11) !important;
}

/* Dark mode: remove leftover white shorthand backgrounds and restore readable text. */
html[data-theme="dark"] body {
	background:
		radial-gradient(circle at 10% 22%, rgba(207, 170, 92, .07), transparent 30rem),
		radial-gradient(circle at 88% 68%, rgba(33, 69, 102, .28), transparent 34rem),
		var(--paper) !important;
}

html[data-theme="dark"] :is(
	.kb-commerce-header,
	.kb-commerce-nav-wrap,
	.kb-category-mega,
	.kb-story-rail,
	.kb-reference-category-rail,
	.kb-reference-offers,
	.kb-reference-daily,
	.kb-reference-service-strip,
	.kb-product-section,
	.kb-category-showcase,
	.woocommerce ul.products > li.product,
	.wc-block-grid__product,
	.wc-block-product,
	.kb-store-card,
	.woocommerce div.product,
	.woocommerce-tabs,
	.woocommerce-tabs .panel,
	.ketabbin-ketaseo-product,
	.ketabbin-ketaseo-product__section
) {
	color: var(--text) !important;
	background: var(--surface) !important;
	border-color: var(--line) !important;
}

html[data-theme="dark"] :is(
	.kb-reference-daily h2,
	.kb-reference-daily p,
	.kb-reference-daily a,
	.kb-reference-offers h2,
	.kb-reference-category-rail a,
	.kb-reference-service-strip strong,
	.kb-reference-service-strip small,
	.woocommerce ul.products > li.product h2,
	.woocommerce ul.products > li.product .price,
	.kb-store-card h3,
	.kb-store-card .price
) {
	color: var(--text) !important;
	-webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] :is(.kb-reference-daily p, .kb-reference-service-strip small) {
	color: var(--muted) !important;
}

html[data-theme="dark"] :is(
	.kb-reference-daily,
	.kb-reference-offers,
	.kb-reference-category-rail,
	.kb-reference-service-strip,
	.woocommerce ul.products > li.product,
	.kb-store-card
)::before,
html[data-theme="dark"] :is(
	.kb-reference-daily,
	.kb-reference-offers,
	.kb-reference-category-rail,
	.kb-reference-service-strip,
	.woocommerce ul.products > li.product,
	.kb-store-card
)::after {
	border-color: var(--line) !important;
}

html[data-theme="dark"] .kb-reference-daily__copy {
	position: relative;
	z-index: 2;
}

/* Product image stages intentionally stay parchment in both modes. */
html[data-theme="dark"] :is(
	.woocommerce ul.products > li.product .woocommerce-loop-product__link,
	.kb-store-card__image,
	body.single-product .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery__image > a
) {
	background: var(--kb-book-stage) !important;
}

@media (max-width: 900px) {
	:root {
		--kb-command-primary-height: 108px;
		--kb-command-secondary-height: 46px;
		--commerce-header-height: 154px;
	}

	.kb-commerce-header[data-kb-command-header] .kb-commerce-head.kb-command-primary {
		display: grid !important;
		grid-template-areas:
			"actions brand"
			"search search" !important;
		grid-template-columns: minmax(0, 1fr) 112px !important;
		grid-template-rows: 58px 50px !important;
		padding-inline: 10px !important;
		column-gap: 8px !important;
		direction: ltr !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-brand {
		grid-area: brand !important;
		grid-column: auto !important;
		grid-row: auto !important;
		justify-self: end !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-primary-actions {
		grid-area: actions !important;
		display: flex !important;
		justify-self: start !important;
		gap: 5px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search-launch {
		display: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-account,
	.kb-commerce-header[data-kb-command-header] .kb-command-primary-icon {
		display: grid !important;
		inline-size: 40px !important;
		min-inline-size: 40px !important;
		block-size: 40px !important;
		padding: 0 !important;
		border: 1px solid var(--line) !important;
		border-radius: 10px !important;
		background: var(--surface) !important;
		place-items: center !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-account__label,
	.kb-commerce-header[data-kb-command-header] .kb-wishlist-link::after,
	.kb-commerce-header[data-kb-command-header] .kb-cart-link::after {
		display: none !important;
		content: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search,
	html.js .kb-commerce-header[data-kb-command-header] .kb-command-search:not(.is-open),
	.kb-commerce-header[data-kb-command-header] .kb-command-search[hidden] {
		position: relative !important;
		inset: auto !important;
		grid-area: search !important;
		display: grid !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		block-size: 43px !important;
		margin: 0 !important;
		padding: 0 4px !important;
		border-radius: 11px !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search__submit,
	.kb-commerce-header[data-kb-command-header] .kb-command-search__close {
		display: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-commerce-nav-wrap {
		display: block !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-shortcuts {
		display: grid !important;
		grid-template-columns: max-content minmax(0, 1fr) 42px !important;
		inline-size: calc(100% - 16px) !important;
		gap: 6px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-secondary-category {
		min-inline-size: 105px !important;
		block-size: 36px !important;
		padding-inline: 8px !important;
		font-size: 10px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu {
		display: block !important;
		overflow-x: auto !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu > ul {
		display: flex !important;
		min-inline-size: max-content !important;
		gap: 18px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu a {
		block-size: 42px !important;
		font-size: 10px !important;
	}

	.kb-story-rail--featured {
		min-block-size: 116px !important;
		margin-inline: 8px !important;
		padding: 13px 11px !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions {
		grid-template-columns: minmax(0, 1fr) 40px !important;
		gap: 5px !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions > .kbc-library-button {
		block-size: 44px !important;
		min-block-size: 44px !important;
		max-block-size: 44px !important;
		padding-inline: 6px !important;
		gap: 3px !important;
		font-size: 10.5px !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions > .kbc-reactions {
		inline-size: 40px !important;
		min-inline-size: 40px !important;
		block-size: 44px !important;
	}
}

@media (max-width: 390px) {
	.kb-commerce-header[data-kb-command-header] .kb-command-account,
	.kb-commerce-header[data-kb-command-header] .kb-command-primary-icon {
		inline-size: 36px !important;
		min-inline-size: 36px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-secondary-category {
		min-inline-size: 92px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-secondary-category b {
		font-size: 9px !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions {
		grid-template-columns: minmax(0, 1fr) 36px !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions > .kbc-library-button {
		padding-inline: 4px !important;
		font-size: 9.5px !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions > .kbc-library-button > span {
		font-size: 13px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kb-commerce-header[data-kb-command-header] *,
	.kb-story-rail--featured * {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}