/*
 * Ketabbin 4.71 — unified responsive header, logo-gold palette and layout safety.
 * This file is intentionally the final public stylesheet in the cascade.
 */

:root,
html[data-theme="light"] {
	--kb-logo-gold: #fba90b;
	--kb-logo-gold-hover: #d98c00;
	--kb-logo-gold-soft: #f5c660;
	--kb-brand-orange: var(--kb-logo-gold);
	--kb-brand-orange-hover: var(--kb-logo-gold-hover);
	--kb-brand-orange-soft: var(--kb-logo-gold-soft);
	--kb-redesign-orange: var(--kb-logo-gold);
	--kb-redesign-orange-hover: var(--kb-logo-gold-hover);
	--kb-ref-orange: var(--kb-logo-gold);
	--kb-ref-orange-hover: var(--kb-logo-gold-hover);
	--kb-magic-gold: var(--kb-logo-gold);
	--kb-magic-gold-deep: var(--kb-logo-gold-hover);
	--kb-magic-amber: var(--kb-logo-gold);
	--commerce-offer: var(--kb-logo-gold);
	--commerce-offer-deep: var(--kb-logo-gold-hover);
	--amber: var(--kb-logo-gold);
	--amber-soft: var(--kb-logo-gold-soft);
	--kb-action-color: var(--kb-logo-gold);
	--kb-action-hover: var(--kb-logo-gold-hover);
	--kb-gold-rgb: 251, 169, 11;
}

html[data-theme="dark"] {
	--kb-logo-gold: #fba90b;
	--kb-logo-gold-hover: #f5c660;
	--kb-logo-gold-soft: #f5c660;
	--kb-brand-orange: var(--kb-logo-gold);
	--kb-brand-orange-hover: var(--kb-logo-gold-hover);
	--kb-brand-orange-soft: var(--kb-logo-gold-soft);
	--kb-redesign-orange: var(--kb-logo-gold);
	--kb-redesign-orange-hover: var(--kb-logo-gold-hover);
	--kb-ref-orange: var(--kb-logo-gold);
	--kb-ref-orange-hover: var(--kb-logo-gold-hover);
	--kb-magic-gold: var(--kb-logo-gold);
	--kb-magic-gold-deep: var(--kb-logo-gold-hover);
	--kb-magic-amber: var(--kb-logo-gold);
	--commerce-offer: var(--kb-logo-gold);
	--commerce-offer-deep: var(--kb-logo-gold-hover);
	--amber: var(--kb-logo-gold);
	--amber-soft: var(--kb-logo-gold-soft);
	--kb-action-color: var(--kb-logo-gold);
	--kb-action-hover: var(--kb-logo-gold-hover);
	--kb-gold-rgb: 251, 169, 11;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	max-inline-size: 100%;
	overflow-x: clip;
}

:is(main, section, article, aside, form, nav, .kb-shell, .kb-main, .woocommerce, .products, .product) {
	min-inline-size: 0;
}

:is(img, svg, video, canvas, iframe) {
	max-inline-size: 100%;
}

:is(h1, h2, h3, h4, p, li, a, button, label, small, strong) {
	overflow-wrap: break-word;
}

/* Every public gold action follows the actual yellow sampled from the logo. */
:is(
	.kb-button,
	.kb-category-toggle,
	.kb-reference-hero__button,
	.kb-store-card .button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce #respond input#submit,
	.single_add_to_cart_button,
	.kb-mobile-store-nav .is-current,
	.kb-mobile-store-nav [aria-current="page"]
) {
	--kb-local-accent: var(--kb-logo-gold);
}

:is(.kb-button, .kb-category-toggle, .kb-reference-hero__button, .single_add_to_cart_button),
.woocommerce :is(a.button, button.button, input.button, #respond input#submit) {
	border-color: color-mix(in srgb, var(--kb-logo-gold) 78%, var(--text)) !important;
	background-color: var(--kb-logo-gold) !important;
	color: #071a2d !important;
}

:is(.kb-button, .kb-category-toggle, .kb-reference-hero__button, .single_add_to_cart_button):is(:hover, :focus-visible),
.woocommerce :is(a.button, button.button, input.button, #respond input#submit):is(:hover, :focus-visible) {
	background-color: var(--kb-logo-gold-hover) !important;
}

.kb-header-count,
.onsale,
.kb-sale-badge,
.kb-store-card__sale {
	background-color: var(--kb-logo-gold) !important;
	color: #071a2d !important;
}

/* Fixed header geometry: one source of truth for every page. */
:root {
	--kb-command-primary-height: 76px;
	--kb-command-secondary-height: 48px;
	--commerce-header-height: 124px;
}

.kb-commerce-header[data-kb-command-header] {
	inset-block-start: var(--kb-admin-bar-offset, 0px) !important;
	inline-size: 100% !important;
	block-size: var(--commerce-header-height) !important;
}

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

@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(205px, .8fr) minmax(420px, 2fr) minmax(150px, .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;
		justify-self: end !important;
		direction: rtl !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search {
		grid-area: search !important;
		justify-self: stretch !important;
		direction: rtl !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-primary-actions {
		grid-area: actions !important;
		justify-self: start !important;
		justify-content: flex-start !important;
		direction: rtl !important;
	}
}

/* Tablet keeps the search visible without allowing either header row to wrap. */
@media (min-width: 701px) and (max-width: 900px) {
	:root {
		--kb-command-primary-height: 106px;
		--kb-command-secondary-height: 48px;
		--commerce-header-height: 154px;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-shortcuts,
	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu > ul {
		flex-wrap: nowrap !important;
		white-space: nowrap !important;
	}
}

/*
 * Phone header: account on the physical left, original logo centred, search on
 * the physical right. The search field is an overlay opened by its icon, never
 * a permanent extra row.
 */
@media (max-width: 700px) {
	:root {
		--kb-command-primary-height: 70px;
		--kb-command-secondary-height: 54px;
		--commerce-header-height: 124px;
	}

	body {
		padding-block-end: calc(88px + env(safe-area-inset-bottom)) !important;
		scroll-padding-block-start: calc(var(--commerce-header-height) + var(--kb-admin-bar-offset, 0px) + 12px) !important;
		scroll-padding-block-end: calc(88px + env(safe-area-inset-bottom)) !important;
	}

	body.admin-bar {
		--kb-admin-bar-offset: 46px;
	}

	.kb-main,
	.home .kb-main,
	.woocommerce .kb-main,
	.woocommerce-page .kb-main {
		padding-block-start: calc(var(--commerce-header-height) + 10px) !important;
		padding-block-end: 18px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-commerce-head.kb-command-primary {
		position: relative !important;
		display: grid !important;
		grid-template-areas: "account brand search" !important;
		grid-template-columns: 54px minmax(96px, 1fr) 54px !important;
		grid-template-rows: var(--kb-command-primary-height) !important;
		inline-size: min(100%, var(--shell, 100%)) !important;
		block-size: var(--kb-command-primary-height) !important;
		padding: 0 8px !important;
		column-gap: 8px !important;
		align-items: center !important;
		direction: ltr !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-brand {
		grid-area: brand !important;
		justify-self: center !important;
		align-self: center !important;
		position: static !important;
		transform: none !important;
		direction: rtl !important;
	}

	.kb-commerce-header[data-kb-command-header] :is(.kb-brand, .kb-motion-logo, .kb-default-logo, .custom-logo-link) {
		inline-size: 104px !important;
		min-inline-size: 104px !important;
		max-inline-size: 104px !important;
		block-size: 56px !important;
		max-block-size: 56px !important;
	}

	.kb-commerce-header[data-kb-command-header] :is(.custom-logo, .kb-default-logo img) {
		inline-size: 104px !important;
		max-inline-size: 104px !important;
		block-size: 56px !important;
		max-block-size: 56px !important;
		object-fit: contain !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-primary-actions {
		display: contents !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-account {
		grid-area: account !important;
		justify-self: start !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search-launch {
		grid-area: search !important;
		display: grid !important;
		justify-self: end !important;
	}

	.kb-commerce-header[data-kb-command-header] :is(.kb-command-account, .kb-command-search-launch > button) {
		display: grid !important;
		inline-size: 44px !important;
		min-inline-size: 44px !important;
		max-inline-size: 44px !important;
		block-size: 44px !important;
		min-block-size: 44px !important;
		padding: 0 !important;
		border: 1px solid color-mix(in srgb, var(--kb-logo-gold) 42%, var(--line)) !important;
		border-radius: 13px !important;
		background: var(--surface) !important;
		color: var(--text) !important;
		box-shadow: 0 7px 18px rgba(7, 26, 45, .07) !important;
		place-items: center !important;
	}

	.kb-commerce-header[data-kb-command-header] :is(.kb-command-account, .kb-command-search-launch > button) svg {
		inline-size: 22px !important;
		block-size: 22px !important;
	}

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

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

	.kb-commerce-header[data-kb-command-header] .kb-command-search.is-open {
		position: absolute !important;
		z-index: 1300 !important;
		inset: calc(100% + 8px) 8px auto !important;
		display: grid !important;
		grid-template-areas: "icon field close" !important;
		grid-template-columns: 40px minmax(0, 1fr) 40px !important;
		inline-size: calc(100% - 16px) !important;
		max-inline-size: none !important;
		block-size: 54px !important;
		margin: 0 !important;
		padding: 0 5px !important;
		border: 1px solid color-mix(in srgb, var(--kb-logo-gold) 55%, var(--line)) !important;
		border-radius: 14px !important;
		background: var(--surface) !important;
		box-shadow: 0 18px 42px rgba(7, 26, 45, .2) !important;
		transform: none !important;
		direction: rtl !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search.is-open .kb-command-search__close {
		display: grid !important;
		place-items: center !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search.is-open .kb-command-search__submit {
		position: absolute !important;
		inline-size: 1px !important;
		block-size: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-commerce-nav-wrap,
	.kb-commerce-header[data-kb-command-header] .kb-command-shortcuts {
		block-size: var(--kb-command-secondary-height) !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-shortcuts {
		display: flex !important;
		inline-size: 100% !important;
		padding: 6px 10px !important;
		gap: 8px !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scrollbar-width: none !important;
		direction: rtl !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-shortcuts::-webkit-scrollbar,
	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu::-webkit-scrollbar {
		display: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-category-toggle {
		order: 0 !important;
		flex: 0 0 auto !important;
		inline-size: auto !important;
		min-inline-size: 122px !important;
		max-inline-size: none !important;
		block-size: 42px !important;
		padding-inline: 12px !important;
		font-size: 12px !important;
		white-space: nowrap !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu {
		order: 1 !important;
		display: block !important;
		flex: 0 0 auto !important;
		min-inline-size: max-content !important;
		overflow: visible !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu > ul {
		display: flex !important;
		inline-size: max-content !important;
		min-inline-size: max-content !important;
		block-size: 42px !important;
		margin: 0 !important;
		padding: 0 !important;
		gap: 7px !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		list-style: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu a {
		display: inline-flex !important;
		block-size: 40px !important;
		padding-inline: 13px !important;
		align-items: center !important;
		border: 1px solid var(--line) !important;
		border-radius: 11px !important;
		background: var(--surface) !important;
		font-size: 11px !important;
		white-space: nowrap !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-secondary-theme {
		order: 2 !important;
		flex: 0 0 42px !important;
	}

	/* No fixed element may cover the last row of cards or page content. */
	.kb-mobile-store-nav {
		block-size: calc(70px + env(safe-area-inset-bottom)) !important;
		padding-block-end: env(safe-area-inset-bottom) !important;
	}

	.kb-support-launcher,
	.kb-support-widget__launcher {
		inset-block-end: calc(82px + env(safe-area-inset-bottom)) !important;
	}

	/* Page sections and cards remain independent blocks instead of intersecting. */
	.kb-main > :is(.kb-shell, section, article),
	.kb-account,
	.kb-saved-page,
	.kb-page-hero,
	.kb-story-rail--featured,
	.kb-reference-hero,
	.woocommerce div.product {
		position: relative;
		isolation: isolate;
		max-inline-size: 100% !important;
	}

	.kb-story-rail--featured {
		margin-block-start: 0 !important;
		margin-block-end: 14px !important;
	}

	/* Two useful columns on phones, without text or actions escaping the card. */
	.woocommerce ul.products,
	.kb-products-grid,
	.kb-store-grid,
	.kb-product-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
		inline-size: 100% !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card, .kb-product-card) {
		inline-size: auto !important;
		min-inline-size: 0 !important;
		max-inline-size: 100% !important;
		margin: 0 !important;
		padding: 8px !important;
		overflow: hidden !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) :is(.woocommerce-loop-product__link, .kb-store-card__image) {
		inline-size: 100% !important;
		min-inline-size: 0 !important;
		aspect-ratio: 1 / 1.18 !important;
		overflow: hidden !important;
	}

	.woocommerce ul.products > li.product a img,
	.kb-store-card__image img {
		inline-size: 100% !important;
		block-size: 100% !important;
		max-block-size: none !important;
		padding: 7px !important;
		object-fit: contain !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) :is(.woocommerce-loop-product__title, h2, h3) {
		display: -webkit-box !important;
		min-block-size: 3.6em !important;
		max-block-size: 3.6em !important;
		margin-block: 9px 5px !important;
		overflow: hidden !important;
		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 2 !important;
		font-size: clamp(12px, 3.25vw, 15px) !important;
		line-height: 1.8 !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) .price {
		min-block-size: 2.4em !important;
		font-size: clamp(11px, 3vw, 14px) !important;
		line-height: 1.6 !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) :is(.button, .kb-card-action) {
		inline-size: 100% !important;
		min-inline-size: 0 !important;
		min-block-size: 44px !important;
		padding: 7px 5px !important;
		font-size: clamp(10.5px, 2.85vw, 13px) !important;
		line-height: 1.35 !important;
		white-space: normal !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions {
		grid-template-columns: minmax(0, 1fr) 38px !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: 5px !important;
		font-size: clamp(9.5px, 2.65vw, 12px) !important;
	}

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

	body.single-product .woocommerce div.product {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 16px !important;
		inline-size: calc(100% - 20px) !important;
		margin: 12px auto 24px !important;
	}

	body.single-product :is(.woocommerce-product-gallery, .summary, .woocommerce-tabs, .ketabbin-ketaseo-product) {
		inline-size: 100% !important;
		min-inline-size: 0 !important;
		max-inline-size: 100% !important;
		margin-inline: 0 !important;
	}
}

@media (max-width: 390px) {
	.kb-commerce-header[data-kb-command-header] .kb-commerce-head.kb-command-primary {
		grid-template-columns: 48px minmax(92px, 1fr) 48px !important;
		padding-inline: 5px !important;
	}

	.kb-commerce-header[data-kb-command-header] :is(.kb-brand, .kb-motion-logo, .kb-default-logo, .custom-logo-link),
	.kb-commerce-header[data-kb-command-header] :is(.custom-logo, .kb-default-logo img) {
		inline-size: 96px !important;
		min-inline-size: 96px !important;
		max-inline-size: 96px !important;
	}

	.woocommerce ul.products,
	.kb-products-grid,
	.kb-store-grid,
	.kb-product-row {
		gap: 7px !important;
	}

	:is(.woocommerce ul.products > li.product, .kb-store-card, .kb-product-card) {
		padding: 6px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kb-commerce-header *,
	.woocommerce ul.products > li.product,
	.kb-store-card {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}