/*
 * Ketabbin 3.2.2 — deterministic mobile commerce header.
 * Loaded last to neutralize legacy RTL grid-column declarations.
 */

@media (max-width: 700px) {
	.kb-commerce-head {
		position: relative !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 76px !important;
		grid-template-areas: "search brand" !important;
		width: var(--shell) !important;
		height: 72px !important;
		margin-inline: auto !important;
		column-gap: 8px !important;
		align-items: center !important;
		overflow: visible !important;
		direction: ltr !important;
	}

	/* Explicit placement fixes RTL.css assigning columns 2 and 3. */
	.kb-commerce-head .kb-brand {
		position: static !important;
		grid-area: brand !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		width: 76px !important;
		min-width: 0 !important;
		justify-self: end !important;
		transform: none !important;
	}

	.kb-commerce-head .kb-default-logo,
	.kb-commerce-head .custom-logo-link,
	.kb-commerce-head .custom-logo,
	.kb-commerce-head .kb-default-logo img {
		width: 76px !important;
		max-width: 76px !important;
		height: 44px !important;
		object-fit: contain !important;
	}

	.kb-commerce-search {
		position: relative !important;
		grid-area: search !important;
		grid-column: 1 !important;
		grid-row: 1 !important;
		display: grid !important;
		grid-template-columns: 42px minmax(0, 1fr) !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		height: 46px !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center !important;
		justify-self: stretch !important;
		overflow: hidden !important;
		border-radius: 14px !important;
		box-shadow: none !important;
		direction: rtl !important;
	}

	.kb-commerce-search::after { display: none !important; }

	.kb-commerce-search > span {
		display: grid !important;
		width: 42px !important;
		height: 44px !important;
		place-items: center !important;
	}

	.kb-commerce-search .kb-fantasy-icon {
		width: 22px !important;
		height: 22px !important;
	}

	.kb-commerce-search input {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 8px 0 12px !important;
		overflow: hidden !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		font-size: 10.5px !important;
		line-height: 44px !important;
		text-align: right !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		direction: rtl !important;
	}

	.kb-commerce-search > button { display: none !important; }

	.kb-commerce-search:focus-within {
		outline: none !important;
		box-shadow: none !important;
	}

	/* The existing real buttons are visually moved into the category row. */
	.kb-commerce-actions {
		position: absolute !important;
		z-index: 45 !important;
		top: calc(100% + 4px) !important;
		left: 0 !important;
		right: auto !important;
		display: flex !important;
		width: auto !important;
		max-width: none !important;
		height: 42px !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 6px !important;
		direction: ltr !important;
		transform: none !important;
	}

	.kb-commerce-actions > * { display: none !important; }

	.kb-commerce-actions .kb-menu-toggle,
	.kb-commerce-actions .kb-account-link,
	.kb-commerce-actions .kb-cart-link {
		position: relative !important;
		display: grid !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 12px !important;
		box-shadow: 0 5px 13px rgba(0, 0, 0, .14);
		color: inherit !important;
		place-items: center !important;
		transform: none !important;
	}

	.kb-commerce-actions .kb-menu-toggle { order: 1 !important; }
	.kb-commerce-actions .kb-account-link { order: 2 !important; }
	.kb-commerce-actions .kb-cart-link { order: 3 !important; }

	.kb-commerce-actions .kb-account-link > span { display: none !important; }

	.kb-commerce-actions .kb-fantasy-icon {
		display: block !important;
		width: 21px !important;
		height: 21px !important;
		stroke: currentColor !important;
		stroke-width: 1.7 !important;
		opacity: 1 !important;
		filter: none !important;
	}

	.kb-commerce-actions .kb-cart-link > span {
		position: absolute !important;
		top: -6px !important;
		right: -5px !important;
		left: auto !important;
		display: grid !important;
		width: 18px !important;
		min-width: 18px !important;
		height: 18px !important;
		padding: 0 !important;
		border: 2px solid !important;
		border-radius: 50% !important;
		font-size: 9px !important;
		font-weight: 900 !important;
		line-height: 1 !important;
		place-items: center !important;
	}

	.kb-commerce-actions .kb-menu-toggle:active,
	.kb-commerce-actions .kb-account-link:active,
	.kb-commerce-actions .kb-cart-link:active {
		transform: scale(.94) !important;
	}

	.kb-commerce-nav-wrap {
		background: color-mix(in srgb, var(--surface) 98%, transparent) !important;
	}

	.kb-commerce-nav {
		position: relative !important;
		display: flex !important;
		height: 52px !important;
		align-items: center !important;
		justify-content: flex-start !important;
	}

	.kb-category-toggle {
		display: flex !important;
		height: 40px !important;
		margin: 0 0 0 auto !important;
		padding: 0 12px !important;
		align-items: center !important;
		gap: 8px !important;
		border-radius: 12px !important;
		font-size: 10px !important;
		box-shadow: 0 5px 13px rgba(0, 0, 0, .09);
	}

	.kb-category-toggle span { font-size: 10px !important; }
	.kb-category-toggle .kb-fantasy-icon { width: 20px !important; height: 20px !important; }

	/* Dark mode colors: warm gold, readable cream and deep emerald. */
	html[data-theme="dark"] .kb-commerce-search {
		border: 1px solid rgba(218, 174, 83, .58) !important;
		background: linear-gradient(135deg, #0c3031, #08242a) !important;
	}

	html[data-theme="dark"] .kb-commerce-search > span { color: #efc66d !important; }
	html[data-theme="dark"] .kb-commerce-search input { color: #f7efde !important; }
	html[data-theme="dark"] .kb-commerce-search input::placeholder { color: #9fb6b1 !important; opacity: .9 !important; }
	html[data-theme="dark"] .kb-commerce-search:focus-within { border-color: #efc66d !important; background: #0b2c30 !important; }

	html[data-theme="dark"] .kb-commerce-actions .kb-menu-toggle {
		border: 1px solid rgba(218, 174, 83, .55) !important;
		background: linear-gradient(145deg, #143d36, #0a292b) !important;
		color: #f5ecd8 !important;
	}

	html[data-theme="dark"] .kb-commerce-actions .kb-account-link {
		border: 1px solid rgba(218, 174, 83, .55) !important;
		background: linear-gradient(145deg, #173443, #0a2630) !important;
		color: #f2d994 !important;
	}

	html[data-theme="dark"] .kb-commerce-actions .kb-cart-link {
		border: 1px solid #f0cf83 !important;
		background: linear-gradient(145deg, #f0c96d, #c88b2b) !important;
		color: #09252a !important;
	}

	html[data-theme="dark"] .kb-commerce-actions .kb-cart-link > span {
		border-color: #08272b !important;
		background: #2f9877 !important;
		color: #fff8e8 !important;
	}

	html[data-theme="dark"] .kb-category-toggle {
		border: 1px solid rgba(218, 174, 83, .58) !important;
		background: linear-gradient(145deg, #0d3331, #09262b) !important;
		color: #f7efde !important;
	}

	html[data-theme="dark"] .kb-category-toggle .kb-fantasy-icon { color: #efc66d !important; }

	/* Light mode colors: clean warm-gray surfaces with logo palette accents. */
	html[data-theme="light"] .kb-commerce-search {
		border: 1px solid #c8a457 !important;
		background: #f5f5f1 !important;
	}

	html[data-theme="light"] .kb-commerce-search > span { color: #1f745f !important; }
	html[data-theme="light"] .kb-commerce-search input { color: #102b35 !important; }
	html[data-theme="light"] .kb-commerce-search input::placeholder { color: #71807f !important; opacity: 1 !important; }
	html[data-theme="light"] .kb-commerce-search:focus-within { border-color: #2f8e70 !important; background: #fffef9 !important; }

	html[data-theme="light"] .kb-commerce-actions .kb-menu-toggle,
	html[data-theme="light"] .kb-commerce-actions .kb-account-link {
		border: 1px solid #c4a153 !important;
		background: #fffdf7 !important;
		color: #12323d !important;
	}

	html[data-theme="light"] .kb-commerce-actions .kb-cart-link {
		border: 1px solid #c48b28 !important;
		background: linear-gradient(145deg, #f1cb71, #d99b34) !important;
		color: #0b2932 !important;
	}

	html[data-theme="light"] .kb-commerce-actions .kb-cart-link > span {
		border-color: #fffdf7 !important;
		background: #26775f !important;
		color: #fff !important;
	}

	html[data-theme="light"] .kb-category-toggle {
		border: 1px solid #c6a353 !important;
		background: #fffdf7 !important;
		color: #12323d !important;
	}

	html[data-theme="light"] .kb-category-toggle .kb-fantasy-icon { color: #26775f !important; }
}

@media (max-width: 390px) {
	.kb-commerce-head {
		grid-template-columns: minmax(0, 1fr) 68px !important;
		column-gap: 6px !important;
	}

	.kb-commerce-head .kb-brand,
	.kb-commerce-head .kb-default-logo,
	.kb-commerce-head .custom-logo-link,
	.kb-commerce-head .custom-logo,
	.kb-commerce-head .kb-default-logo img {
		width: 68px !important;
		max-width: 68px !important;
	}

	.kb-commerce-search { grid-template-columns: 38px minmax(0, 1fr) !important; }
	.kb-commerce-search > span { width: 38px !important; }
	.kb-commerce-search input { padding-inline: 6px 8px !important; font-size: 9.5px !important; }

	.kb-commerce-actions { gap: 5px !important; }
	.kb-commerce-actions .kb-menu-toggle,
	.kb-commerce-actions .kb-account-link,
	.kb-commerce-actions .kb-cart-link {
		width: 36px !important;
		min-width: 36px !important;
		max-width: 36px !important;
		height: 38px !important;
		min-height: 38px !important;
	}

	.kb-category-toggle { padding-inline: 9px !important; }
}