/*
 * Ketabbin storefront redesign v36.
 * Final, route-independent presentation layer for the header, homepage and
 * every supported product-card surface. Commerce behaviour is unchanged.
 */

:root {
	--kb-redesign-ink: #041428;
	--kb-redesign-orange: #fbaa0e;
	--kb-redesign-orange-hover: #ee9d00;
	--kb-redesign-paper: #fffdf9;
	--kb-redesign-surface: #ffffff;
	--kb-redesign-soft: #faf7f1;
	--kb-redesign-line: #e7e1d8;
	--kb-redesign-muted: #647080;
	--kb-redesign-radius: 16px;
	--kb-redesign-control: 46px;
}

/* Header: physical order is intentional — logo right, search middle, actions left. */
.kb-commerce-header[data-kb-command-header] {
	background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
	box-shadow: 0 5px 24px rgba(4, 20, 40, .055) !important;
	-webkit-backdrop-filter: blur(18px) saturate(135%);
	backdrop-filter: blur(18px) saturate(135%);
}

.kb-commerce-header[data-kb-command-header] .kb-command-primary-actions {
	display: flex !important;
	min-inline-size: 0;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
	direction: rtl;
}

.kb-commerce-header[data-kb-command-header] .kb-command-primary-icon {
	position: relative;
	display: grid;
	inline-size: 44px;
	min-inline-size: 44px;
	block-size: 44px;
	padding: 0 !important;
	border: 1px solid var(--line) !important;
	border-radius: 13px !important;
	background: var(--surface) !important;
	box-shadow: 0 7px 20px rgba(4, 20, 40, .05) !important;
	color: var(--text) !important;
	place-items: center;
}

.kb-commerce-header[data-kb-command-header] .kb-command-primary-icon:hover {
	border-color: color-mix(in srgb, var(--kb-redesign-orange) 48%, var(--line)) !important;
	color: var(--kb-redesign-orange) !important;
}

.kb-commerce-header[data-kb-command-header] .kb-command-primary-icon svg {
	display: block !important;
	inline-size: 21px !important;
	block-size: 21px !important;
	fill: none !important;
	stroke: currentColor !important;
}

.kb-commerce-header[data-kb-command-header] .kb-command-primary-icon > .kb-header-count {
	position: absolute !important;
	inset-block-start: -5px !important;
	inset-inline-start: -5px !important;
	display: grid !important;
	inline-size: 19px !important;
	min-inline-size: 19px !important;
	block-size: 19px !important;
	min-block-size: 19px !important;
	padding: 0 !important;
	border: 2px solid var(--surface) !important;
	border-radius: 50% !important;
	background: var(--kb-redesign-orange) !important;
	box-shadow: none !important;
	color: var(--kb-redesign-ink) !important;
	font: 850 8px/1 Arial, sans-serif !important;
	font-style: normal !important;
	place-items: center !important;
}

@media (min-width: 701px) {
	:root {
		--kb-command-primary-height: 78px;
		--kb-command-secondary-height: 48px;
		--commerce-header-height: 126px;
	}

	.kb-commerce-header[data-kb-command-header] .kb-commerce-head.kb-command-primary {
		display: grid !important;
		grid-template-columns: minmax(190px, auto) minmax(320px, 720px) 150px !important;
		grid-template-areas: none !important;
		column-gap: clamp(16px, 2.6vw, 38px) !important;
		direction: ltr !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-brand {
		grid-column: 3 !important;
		grid-row: 1 !important;
		justify-self: end !important;
		direction: rtl !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search {
		position: relative !important;
		z-index: 10 !important;
		inset: auto !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		display: grid !important;
		grid-template-columns: 42px minmax(0, 1fr) auto !important;
		grid-template-areas: "icon field submit" !important;
		inline-size: 100% !important;
		max-inline-size: 720px !important;
		block-size: 48px !important;
		margin: 0 !important;
		padding: 0 5px !important;
		border: 1px solid var(--kb-redesign-line) !important;
		border-radius: 14px !important;
		background: var(--surface) !important;
		box-shadow: 0 8px 24px rgba(4, 20, 40, .055) !important;
		transform: none !important;
		animation: none !important;
		direction: rtl !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,
	.kb-commerce-header[data-kb-command-header] .kb-command-search-launch {
		display: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-primary-actions {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
		direction: rtl !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-account {
		position: static !important;
		grid-area: auto !important;
		max-inline-size: 170px !important;
		justify-self: auto !important;
	}

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

	.kb-commerce-header[data-kb-command-header] .kb-command-shortcuts {
		justify-content: flex-start !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-catalog-tools {
		inline-size: 100%;
		justify-content: flex-start !important;
	}
}

/* Homepage stories remain the first content surface below the header. */
.kb-story-rail {
	display: grid !important;
	grid-template-columns: 150px minmax(0, 1fr) !important;
	margin-block-start: 16px !important;
	padding: 12px 14px !important;
	align-items: center !important;
	gap: 12px !important;
	border: 1px solid var(--kb-redesign-line) !important;
	border-radius: var(--kb-redesign-radius) !important;
	background: var(--surface) !important;
	box-shadow: 0 10px 28px rgba(4, 20, 40, .045) !important;
}

.kb-story-rail__title h2,
.kb-story-rail__title small {
	display: block;
	margin: 0;
}

.kb-story-rail__title h2 {
	color: var(--text);
	font-size: 14px;
	line-height: 1.5;
}

.kb-story-rail__title small {
	margin-block-start: 2px;
	color: var(--kb-redesign-orange);
	font-size: 10px;
	font-weight: 700;
}

.kb-story-list {
	display: flex !important;
	min-inline-size: 0;
	padding-block: 2px;
	gap: 13px !important;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: thin;
}

.kb-story {
	flex: 0 0 72px;
}

.kb-story > span {
	box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--kb-redesign-orange) !important;
}

/* Quiet the former fantasy layer and create the editorial homepage hierarchy. */
.kb-home-flight-scene {
	display: none !important;
}

.kb-commerce-hero-grid,
.kb-quick-links,
.kb-offer-section,
.kb-category-showcase,
.kb-product-section,
.kb-service-strip,
.kb-promo-mosaic,
.kb-epub-commerce,
.kb-magazine-preview {
	border-color: var(--kb-redesign-line) !important;
	border-radius: var(--kb-redesign-radius) !important;
}

.kb-commerce-hero-grid {
	margin-block-start: 14px !important;
	gap: 14px !important;
}

.kb-hero-slider,
.kb-daily-pick {
	border: 1px solid var(--kb-redesign-line) !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	box-shadow: 0 14px 38px rgba(4, 20, 40, .065) !important;
}

.kb-hero-slide__shade {
	background: linear-gradient(90deg, rgba(4, 20, 40, .12), rgba(4, 20, 40, .72)) !important;
}

.kb-quick-links {
	margin-block-start: 14px !important;
	padding: 8px !important;
	background: var(--surface) !important;
}

.kb-quick-links > a {
	border-radius: 12px !important;
}

.kb-offer-section,
.kb-category-showcase,
.kb-product-section,
.kb-service-strip,
.kb-magazine-preview {
	background: var(--surface) !important;
	box-shadow: 0 12px 34px rgba(4, 20, 40, .04) !important;
}

/* One card contract for classic loops, related products, blocks and custom rails. */
:is(
	.woocommerce ul.products > li.product,
	.wc-block-grid__product,
	.wc-block-product,
	.kb-store-card
) {
	box-sizing: border-box !important;
	display: flex !important;
	min-inline-size: 0 !important;
	max-inline-size: 100% !important;
	padding: 11px !important;
	flex-direction: column !important;
	border: 1px solid var(--kb-redesign-line) !important;
	border-radius: var(--kb-redesign-radius) !important;
	background: var(--surface) !important;
	box-shadow: 0 9px 24px rgba(4, 20, 40, .045) !important;
	overflow: hidden !important;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

:is(
	.woocommerce ul.products > li.product,
	.wc-block-grid__product,
	.wc-block-product,
	.kb-store-card
):hover {
	border-color: color-mix(in srgb, var(--kb-redesign-orange) 42%, var(--kb-redesign-line)) !important;
	box-shadow: 0 15px 34px rgba(4, 20, 40, .085) !important;
	transform: translateY(-2px) !important;
}

.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 16px !important;
}

.woocommerce ul.products > li.product > a.woocommerce-loop-product__link {
	display: flex !important;
	min-inline-size: 0;
	flex: 1 1 auto;
	flex-direction: column;
}

:is(
	.woocommerce ul.products > li.product a img,
	.wc-block-grid__product-image img,
	.wc-block-components-product-image img,
	.kb-store-card__image img
) {
	box-sizing: border-box !important;
	display: block !important;
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	block-size: auto !important;
	aspect-ratio: 4 / 5 !important;
	margin: 0 0 12px !important;
	padding: 8px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--kb-redesign-soft) !important;
	box-shadow: none !important;
	object-fit: contain !important;
}

.kb-store-card__image {
	display: block !important;
	inline-size: 100% !important;
	block-size: auto !important;
	padding: 0 !important;
}

:is(
	.woocommerce ul.products > li.product .woocommerce-loop-product__title,
	.wc-block-grid__product-title,
	.wc-block-components-product-name,
	.kb-store-card h3
) {
	display: -webkit-box !important;
	min-block-size: 3.5em !important;
	max-block-size: 3.5em !important;
	margin: 4px 0 6px !important;
	overflow: hidden !important;
	color: var(--text) !important;
	font-size: clamp(13px, .28vw + 11.5px, 15px) !important;
	font-weight: 800 !important;
	line-height: 1.75 !important;
	text-align: right !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

:is(
	.woocommerce ul.products > li.product .price,
	.wc-block-grid__product-price,
	.wc-block-components-product-price,
	.kb-store-card__price
) {
	display: flex !important;
	min-inline-size: 0;
	min-block-size: 34px !important;
	margin: 8px 0 !important;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 3px 7px;
	color: var(--kb-redesign-orange) !important;
	font-size: clamp(12px, .22vw + 11px, 14px) !important;
	font-weight: 850 !important;
	direction: rtl;
}

:is(
	.woocommerce ul.products > li.product .price,
	.wc-block-grid__product-price,
	.wc-block-components-product-price,
	.kb-store-card__price
) del {
	color: var(--kb-redesign-muted) !important;
	font-size: .82em !important;
	font-weight: 500 !important;
	opacity: .72 !important;
}

:is(
	.woocommerce ul.products > li.product .kb-server-cart-form,
	.wc-block-grid__product .kb-server-cart-form,
	.wc-block-product .kb-server-cart-form,
	.kb-store-card .kb-server-cart-form
) {
	display: block !important;
	inline-size: 100% !important;
	min-inline-size: 0 !important;
	max-inline-size: 100% !important;
	block-size: auto !important;
	margin: auto 0 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

:is(
	.woocommerce ul.products > li.product .kb-card-purchase-action,
	.woocommerce ul.products > li.product .button,
	.wc-block-grid__product .wp-block-button__link,
	.wc-block-components-product-button__button,
	.kb-store-card .kb-card-purchase-action,
	.kb-store-card__buy
) {
	box-sizing: border-box !important;
	display: inline-flex !important;
	inline-size: 100% !important;
	min-inline-size: 0 !important;
	max-inline-size: 100% !important;
	block-size: var(--kb-redesign-control) !important;
	min-block-size: var(--kb-redesign-control) !important;
	max-block-size: var(--kb-redesign-control) !important;
	margin: 0 !important;
	padding: 8px 10px !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	flex-flow: row nowrap !important;
	gap: 7px !important;
	border: 1px solid var(--kb-redesign-orange) !important;
	border-radius: 12px !important;
	background: var(--kb-redesign-orange) !important;
	box-shadow: 0 8px 18px rgba(251, 170, 14, .18) !important;
	color: var(--kb-redesign-ink) !important;
	-webkit-text-fill-color: var(--kb-redesign-ink) !important;
	font-size: clamp(11.5px, .28vw + 10.5px, 14px) !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	overflow: hidden !important;
}

:is(
	.woocommerce ul.products > li.product .kb-card-purchase-action,
	.woocommerce ul.products > li.product .button,
	.wc-block-grid__product .wp-block-button__link,
	.wc-block-components-product-button__button,
	.kb-store-card .kb-card-purchase-action,
	.kb-store-card__buy
):hover {
	border-color: var(--kb-redesign-orange-hover) !important;
	background: var(--kb-redesign-orange-hover) !important;
	transform: none !important;
}

:is(
	.woocommerce ul.products > li.product .kb-card-purchase-action,
	.woocommerce ul.products > li.product .button,
	.kb-store-card .kb-card-purchase-action,
	.kb-store-card__buy
) :is(span, b) {
	min-inline-size: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

:is(
	.woocommerce ul.products > li.product .kb-card-purchase-action,
	.woocommerce ul.products > li.product .button,
	.kb-store-card .kb-card-purchase-action,
	.kb-store-card__buy
) svg {
	display: block !important;
	inline-size: 20px !important;
	min-inline-size: 20px !important;
	max-inline-size: 20px !important;
	block-size: 20px !important;
	min-block-size: 20px !important;
	max-block-size: 20px !important;
	flex: 0 0 20px !important;
	fill: none !important;
	stroke: currentColor !important;
}

:is(.woocommerce ul.products > li.product, .kb-store-card) .kb-loop-core-actions,
.kb-store-card .kb-store-card__body > .kbc-library-button {
	min-inline-size: 0 !important;
	max-inline-size: 100% !important;
}

.woocommerce ul.products > li.product .kb-loop-core-actions {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 46px !important;
	inline-size: 100% !important;
	margin-block-start: 8px !important;
	gap: 8px !important;
}

.woocommerce ul.products > li.product .kb-loop-core-actions > * {
	min-inline-size: 0 !important;
	max-inline-size: 100% !important;
}

.kb-store-card__details {
	display: none !important;
}

@media (max-width: 1100px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 700px) {
	:root {
		--kb-redesign-control: 46px;
	}

	.kb-commerce-header[data-kb-command-header] .kb-commerce-head.kb-command-primary {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 88px !important;
		grid-template-areas: none !important;
		padding-inline: 12px !important;
		direction: ltr !important;
	}

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

	.kb-commerce-header[data-kb-command-header] .kb-command-primary-actions {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
	}

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

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

	.kb-commerce-header[data-kb-command-header] .kb-command-account {
		position: static !important;
		grid-area: auto !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-command-search {
		position: absolute !important;
		inset-block-start: calc(100% + 7px) !important;
		inset-inline-start: 8px !important;
		inset-inline-end: 8px !important;
		inline-size: auto !important;
		transform: none !important;
	}

	.kb-story-rail {
		grid-template-columns: 1fr !important;
		margin-block-start: 10px !important;
		padding: 10px !important;
		gap: 8px !important;
	}

	.kb-story-rail__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kb-story-rail__title h2 {
		font-size: 13px;
	}

	.kb-story-list {
		gap: 11px !important;
	}

	.kb-commerce-hero-grid {
		grid-template-columns: 1fr !important;
	}

	.woocommerce ul.products,
	.woocommerce div.product > :is(.related, .upsells) > ul.products,
	.woocommerce :is(.related, .upsells) > ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 9px !important;
	}

	:is(
		.woocommerce ul.products > li.product,
		.wc-block-grid__product,
		.wc-block-product,
		.kb-store-card
	) {
		padding: 8px !important;
		border-radius: 14px !important;
	}

	:is(
		.woocommerce ul.products > li.product a img,
		.wc-block-grid__product-image img,
		.wc-block-components-product-image img,
		.kb-store-card__image img
	) {
		margin-block-end: 8px !important;
		padding: 5px !important;
		border-radius: 10px !important;
	}

	:is(
		.woocommerce ul.products > li.product .woocommerce-loop-product__title,
		.wc-block-grid__product-title,
		.wc-block-components-product-name,
		.kb-store-card h3
	) {
		min-block-size: 3.4em !important;
		max-block-size: 3.4em !important;
		font-size: 12.5px !important;
		line-height: 1.7 !important;
	}

	:is(
		.woocommerce ul.products > li.product .kb-card-purchase-action,
		.woocommerce ul.products > li.product .button,
		.kb-store-card .kb-card-purchase-action,
		.kb-store-card__buy
	) {
		padding-inline: 7px !important;
		font-size: 12px !important;
	}

	:is(
		.woocommerce ul.products > li.product .kb-card-purchase-action,
		.woocommerce ul.products > li.product .button,
		.kb-store-card .kb-card-purchase-action,
		.kb-store-card__buy
	) svg {
		inline-size: 18px !important;
		min-inline-size: 18px !important;
		max-inline-size: 18px !important;
		block-size: 18px !important;
		min-block-size: 18px !important;
		max-block-size: 18px !important;
		flex-basis: 18px !important;
	}
}

@media (max-width: 350px) {
	.woocommerce ul.products,
	.woocommerce div.product > :is(.related, .upsells) > ul.products,
	.woocommerce :is(.related, .upsells) > ul.products {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.woocommerce ul.products > li.product, .wc-block-grid__product, .wc-block-product, .kb-store-card) {
		transition: none !important;
	}
}