/*
 * Ketabbin layout and product route repair 4.3.
 * This file is intentionally last in the public cascade.
 */

/* Use the available viewport instead of shrinking into a fixed desktop box. */
:root {
	--kb-shell: calc(100% - clamp(24px, 3.2vw, 64px));
	--shell: var(--kb-shell);
	--kb-card-cover: #f7f0e5;
	--kb-card-line: color-mix(in srgb, var(--kb-line, #d9dce1) 78%, transparent);
}

html {
	overflow-x: clip !important;
}

body {
	min-inline-size: 320px;
	overflow-x: clip !important;
}

.kb-shell,
.kb-commerce-head,
.kb-commerce-nav,
.kb-category-mega {
	inline-size: var(--kb-shell) !important;
	width: var(--kb-shell) !important;
	max-inline-size: none !important;
	max-width: none !important;
	margin-inline: auto !important;
}

.kb-main,
.kb-main--product,
.kb-woocommerce-content,
.kb-woocommerce-content > .woocommerce,
.home .kb-main {
	max-inline-size: none !important;
	max-width: none !important;
}

.kb-main {
	inline-size: 100% !important;
	min-block-size: 0 !important;
	padding-block-start: 0 !important;
	overflow-x: clip !important;
}

.kb-main > .kb-breadcrumbs {
	inline-size: var(--kb-shell) !important;
	max-inline-size: none !important;
	margin-inline: auto !important;
}

/* Header: one brand, one search field, one action group. */
.kb-commerce-header[data-kb-command-header] {
	position: relative !important;
	z-index: 1000 !important;
	inline-size: 100% !important;
	transform: none !important;
}

.kb-commerce-header[data-kb-command-header] .kb-commerce-head {
	display: grid !important;
	grid-template-columns: minmax(150px, 190px) minmax(360px, 1fr) minmax(210px, 300px) !important;
	/* Physical order: account/cart on the left, search in the middle, brand on the right. */
	grid-template-areas: "actions search brand" !important;
	align-items: center !important;
	gap: clamp(14px, 2vw, 32px) !important;
	min-block-size: 82px !important;
	padding-block: 8px !important;
}

.kb-commerce-header[data-kb-command-header] .kb-market-brand {
	grid-area: brand !important;
	display: grid !important;
	place-items: center end !important;
	min-inline-size: 0 !important;
}

.kb-commerce-header[data-kb-command-header] .kb-commerce-search {
	grid-area: search !important;
	inline-size: 100% !important;
	max-inline-size: none !important;
	margin: 0 !important;
}

.kb-commerce-header[data-kb-command-header] .kb-command-primary-actions {
	grid-area: actions !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	min-inline-size: 0 !important;
}

.kb-commerce-header[data-kb-command-header] .kb-command-primary-actions svg,
.kb-commerce-header[data-kb-command-header] .kb-category-toggle svg,
.kb-commerce-header[data-kb-command-header] .kb-command-quick-theme svg {
	inline-size: 22px !important;
	block-size: 22px !important;
	max-inline-size: 22px !important;
	max-block-size: 22px !important;
}

.kb-commerce-header[data-kb-command-header] .kb-commerce-nav-wrap {
	position: relative !important;
	inset: auto !important;
	transform: none !important;
}

.kb-commerce-header[data-kb-command-header] .kb-commerce-nav {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	min-block-size: 54px !important;
	overflow: visible !important;
}

.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu {
	flex: 1 1 auto !important;
	min-inline-size: 0 !important;
	overflow-x: auto !important;
	overscroll-behavior-inline: contain !important;
	scrollbar-width: none !important;
}

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

.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu > ul {
	display: flex !important;
	align-items: center !important;
	gap: clamp(18px, 2.2vw, 38px) !important;
	inline-size: max-content !important;
	margin: 0 !important;
	padding: 0 !important;
}

.kb-commerce-header[data-kb-command-header] .kb-category-toggle,
.kb-commerce-header[data-kb-command-header] .kb-command-quick-theme {
	flex: 0 0 auto !important;
}

/* The fallback brand has exactly one visual source in every color mode. */
.kb-market-logo .kb-default-logo__image {
	display: block !important;
	inline-size: auto !important;
	block-size: 64px !important;
	max-inline-size: 165px !important;
	max-block-size: 64px !important;
	object-fit: contain !important;
}

.kb-market-logo,
.kb-market-logo .kb-default-logo,
.kb-market-logo .custom-logo-link {
	display: grid !important;
	place-items: center !important;
	inline-size: auto !important;
	max-inline-size: 180px !important;
	block-size: 68px !important;
	max-block-size: 68px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.kb-market-logo .custom-logo {
	display: block !important;
	inline-size: auto !important;
	block-size: 64px !important;
	max-inline-size: 165px !important;
	max-block-size: 64px !important;
	object-fit: contain !important;
}

.kb-market-logo .kb-default-logo > img:not(:first-child),
.kb-commerce-nav :is(.custom-logo-link, .kb-default-logo, .kb-motion-logo),
.kb-commerce-nav img.custom-logo {
	display: none !important;
}

/* SVGs are icons, never full-size content illustrations. */
.kb-fantasy-icon {
	display: inline-block !important;
	inline-size: 24px !important;
	block-size: 24px !important;
	min-inline-size: 24px !important;
	max-inline-size: 24px !important;
	min-block-size: 24px !important;
	max-block-size: 24px !important;
	flex: 0 0 24px !important;
	overflow: visible !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.65 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

.kb-fantasy-icon :is(path, circle, rect, line, polyline, polygon) {
	vector-effect: non-scaling-stroke;
}

/* Product rails and shop cards keep a deliberate, predictable rhythm. */
.kb-product-section,
.kb-category-showcase,
.kb-epub-commerce,
.kb-store-promo-grid,
.kb-archive,
.kb-shop-layout,
.woocommerce-products-header,
.woocommerce .site-main,
.woocommerce-page .site-main {
	inline-size: var(--kb-shell) !important;
	max-inline-size: none !important;
	margin-inline: auto !important;
}

.kb-product-section,
.kb-category-showcase,
.kb-epub-commerce {
	margin-block: clamp(18px, 2.3vw, 38px) !important;
}

.kb-product-rail-wrap {
	position: relative !important;
	inline-size: 100% !important;
	min-inline-size: 0 !important;
	overflow: hidden !important;
}

.kb-product-rail {
	display: flex !important;
	align-items: stretch !important;
	gap: 12px !important;
	inline-size: 100% !important;
	padding: 10px 4px 16px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: inline proximity !important;
	overscroll-behavior-inline: contain !important;
}

.kb-product-rail > .kb-store-card {
	flex: 0 0 clamp(218px, 17.5vw, 282px) !important;
	scroll-snap-align: start !important;
}

.kb-store-card,
.kb-product-card,
.woocommerce ul.products > li.product {
	display: flex !important;
	flex-direction: column !important;
	min-inline-size: 0 !important;
	min-block-size: 100% !important;
	border: 1px solid var(--kb-card-line) !important;
	border-radius: 14px !important;
	background: var(--kb-surface, #fff) !important;
	overflow: hidden !important;
	box-shadow: none !important;
}

.kb-store-card__image,
.kb-product-card__image,
.woocommerce ul.products > li.product .woocommerce-loop-product__link {
	display: grid !important;
	place-items: center !important;
	inline-size: 100% !important;
	aspect-ratio: 4 / 5 !important;
	min-block-size: 0 !important;
	padding: clamp(10px, 1.2vw, 18px) !important;
	background: var(--kb-card-cover) !important;
	overflow: hidden !important;
}

.kb-store-card__image img,
.kb-product-card__image img,
.woocommerce ul.products > li.product img,
.woocommerce ul.products img.woocommerce-placeholder {
	display: block !important;
	inline-size: 100% !important;
	block-size: 100% !important;
	max-inline-size: 100% !important;
	max-block-size: 100% !important;
	margin: 0 auto !important;
	object-fit: contain !important;
	object-position: center !important;
	transform: none !important;
}

.woocommerce ul.products img.woocommerce-placeholder {
	padding: 18% !important;
	opacity: .42 !important;
	background: color-mix(in srgb, var(--kb-card-cover) 84%, var(--kb-surface, #fff)) !important;
}

.kb-store-card__body,
.kb-product-card__body,
.woocommerce ul.products > li.product .kb-card-body {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 12px !important;
}

.kb-store-card h3,
.kb-product-card h3,
.woocommerce ul.products > li.product .woocommerce-loop-product__title {
	display: -webkit-box !important;
	min-block-size: calc(1.75em * 2) !important;
	margin: 0 !important;
	overflow: hidden !important;
	font-size: clamp(14px, 1vw, 17px) !important;
	line-height: 1.75 !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
}

.kb-store-card__price,
.woocommerce ul.products > li.product .price {
	margin-block-start: auto !important;
	min-block-size: 34px !important;
}

.kb-store-card__buy,
.kb-store-card__details,
.kb-card-purchase-action,
.woocommerce ul.products > li.product .button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	inline-size: 100% !important;
	min-inline-size: 0 !important;
	max-inline-size: 100% !important;
	min-block-size: 46px !important;
	block-size: auto !important;
	padding: 10px 12px !important;
	white-space: normal !important;
	text-align: center !important;
	line-height: 1.45 !important;
}

.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 14px !important;
	inline-size: 100% !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;
}

.woocommerce ul.products > li.product {
	float: none !important;
	inline-size: auto !important;
	width: auto !important;
	margin: 0 !important;
}

/* Product endpoint: restore a dense, readable marketplace composition. */
body.kb-product-route .kb-main--product,
body.single-product .kb-main--product {
	inline-size: var(--kb-shell) !important;
	width: var(--kb-shell) !important;
	margin-inline: auto !important;
	padding: clamp(18px, 2vw, 34px) 0 64px !important;
}

body.kb-product-route .kb-woocommerce-content,
body.kb-product-route .kb-woocommerce-content > .woocommerce,
body.single-product .kb-woocommerce-content,
body.single-product .kb-woocommerce-content > .woocommerce {
	inline-size: 100% !important;
	width: 100% !important;
}

body.kb-product-route .woocommerce div.product,
body.single-product .woocommerce div.product {
	inline-size: 100% !important;
	width: 100% !important;
	max-inline-size: none !important;
	max-width: none !important;
	display: grid !important;
	grid-template-columns: minmax(360px, .82fr) minmax(460px, 1.18fr) !important;
	grid-template-areas:
		"gallery summary"
		"tabs tabs"
		"related related" !important;
	gap: clamp(24px, 3vw, 52px) !important;
	align-items: start !important;
	padding: clamp(18px, 2.2vw, 38px) !important;
	border: 1px solid var(--kb-line) !important;
	border-radius: 18px !important;
	background: var(--kb-surface) !important;
	box-shadow: 0 8px 30px rgba(20, 27, 34, .06) !important;
}

body.kb-product-route .woocommerce div.product > .images,
body.single-product .woocommerce div.product > .images {
	grid-area: gallery !important;
	float: none !important;
	inline-size: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	position: sticky !important;
	top: 184px !important;
	min-inline-size: 0 !important;
}

body.kb-product-route .woocommerce div.product > .summary,
body.single-product .woocommerce div.product > .summary {
	grid-area: summary !important;
	float: none !important;
	inline-size: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	min-inline-size: 0 !important;
}

body.kb-product-route .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery__wrapper {
	border-radius: 16px !important;
	background: #f7f0e5 !important;
	overflow: hidden !important;
}

body.kb-product-route .woocommerce-product-gallery ol.flex-control-thumbs,
body.single-product .woocommerce-product-gallery ol.flex-control-thumbs {
	display: flex !important;
	gap: 8px !important;
	padding: 10px 0 0 !important;
	overflow-x: auto !important;
}

body.kb-product-route .woocommerce-product-gallery ol.flex-control-thumbs li,
body.single-product .woocommerce-product-gallery ol.flex-control-thumbs li {
	flex: 0 0 76px !important;
	inline-size: 76px !important;
	margin: 0 !important;
}

body.kb-product-route .woocommerce-product-gallery__image,
body.kb-product-route .woocommerce-product-gallery__image > a,
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image > a {
	display: grid !important;
	place-items: center !important;
	min-block-size: clamp(420px, 48vw, 680px) !important;
	background: #f7f0e5 !important;
}

body.kb-product-route .woocommerce-product-gallery__image img,
body.single-product .woocommerce-product-gallery__image img {
	display: block !important;
	inline-size: auto !important;
	width: auto !important;
	block-size: auto !important;
	height: auto !important;
	max-inline-size: 92% !important;
	max-width: 92% !important;
	max-block-size: 650px !important;
	object-fit: contain !important;
	margin: auto !important;
}

body.kb-product-route .woocommerce-tabs,
body.single-product .woocommerce-tabs {
	grid-area: tabs !important;
	inline-size: 100% !important;
	max-inline-size: none !important;
	margin-top: 8px !important;
}

body.kb-product-route .woocommerce-tabs ul.tabs,
body.single-product .woocommerce-tabs ul.tabs {
	display: flex !important;
	gap: 6px !important;
	inline-size: 100% !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	overflow-x: auto !important;
}

body.kb-product-route .woocommerce-tabs ul.tabs li,
body.single-product .woocommerce-tabs ul.tabs li {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

body.kb-product-route :is(.related.products, .upsells.products),
body.single-product :is(.related.products, .upsells.products) {
	grid-column: 1 / -1 !important;
	inline-size: 100% !important;
}

body.kb-product-route .summary .product_title,
body.single-product .summary .product_title {
	font-size: clamp(28px, 2.3vw, 44px) !important;
	line-height: 1.55 !important;
	margin-block: 6px 18px !important;
}

body.kb-product-route :is(.kb-product-assurances, .kb-product-core-actions),
body.single-product :is(.kb-product-assurances, .kb-product-core-actions) {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 10px !important;
}

body.kb-product-route :is(.kb-product-assurances, .kb-product-fulfillment, .kb-purchase-box) svg,
body.single-product :is(.kb-product-assurances, .kb-product-fulfillment, .kb-purchase-box) svg,
body.kb-product-route .woocommerce div.product svg,
body.single-product .woocommerce div.product svg {
	inline-size: 24px !important;
	block-size: 24px !important;
	min-inline-size: 24px !important;
	max-inline-size: 24px !important;
	min-block-size: 24px !important;
	max-block-size: 24px !important;
}

body.kb-product-route .woocommerce-tabs .panel,
body.single-product .woocommerce-tabs .panel,
body.kb-product-route .ketabbin-ketaseo-product,
body.single-product .ketabbin-ketaseo-product {
	max-inline-size: none !important;
	font-size: clamp(16px, 1.15vw, 19px) !important;
	line-height: 2.05 !important;
}

/* Support must remain a widget, never a page-sized illustration. */
.kb-support-widget-v1 {
	inset-inline-start: max(12px, env(safe-area-inset-left)) !important;
	inset-block-end: max(14px, env(safe-area-inset-bottom)) !important;
	inline-size: auto !important;
	max-inline-size: calc(100vw - 24px) !important;
}

.kb-support-widget-v1__launcher {
	display: flex !important;
	inline-size: auto !important;
	min-inline-size: 196px !important;
	max-inline-size: min(320px, calc(100vw - 24px)) !important;
	min-block-size: 58px !important;
	block-size: auto !important;
	padding: 8px 10px !important;
	overflow: hidden !important;
}

.kb-support-widget-v1__launcher-icon {
	display: grid !important;
	flex: 0 0 44px !important;
	inline-size: 44px !important;
	block-size: 44px !important;
	place-items: center !important;
}

.kb-support-widget-v1 :is(.kb-support-widget-v1__launcher-icon, .kb-support-widget-v1__header, .kb-support-widget-v1__phone, .kb-support-widget-v1__quick) svg {
	inline-size: 24px !important;
	block-size: 24px !important;
	max-inline-size: 24px !important;
	max-block-size: 24px !important;
}

.kb-support-widget-v1__panel {
	inset-inline-start: 0 !important;
	inset-block-end: calc(100% + 10px) !important;
	inline-size: min(390px, calc(100vw - 24px)) !important;
	max-inline-size: calc(100vw - 24px) !important;
	max-block-size: min(720px, calc(100vh - 110px)) !important;
	overflow: auto !important;
}

.kb-support-widget-v1__panel[hidden] {
	display: none !important;
}

@media (max-width: 1100px) {
	:root {
		--kb-shell: calc(100% - 28px);
	}

	body.kb-product-route .woocommerce div.product,
	body.single-product .woocommerce div.product {
		grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr) !important;
		gap: 24px !important;
	}

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

@media (max-width: 782px) {
	:root {
		--kb-shell: calc(100% - 16px);
	}

	.kb-market-logo .kb-default-logo__image {
		block-size: 58px !important;
		max-inline-size: 126px !important;
		max-block-size: 58px !important;
	}

	.kb-market-promo {
		display: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-commerce-head {
		position: relative !important;
		display: grid !important;
		grid-template-columns: 48px minmax(84px, 1fr) 48px !important;
		grid-template-areas: "actions brand search-toggle" !important;
		gap: 8px !important;
		min-block-size: 76px !important;
		padding: 6px 4px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-market-brand {
		grid-area: brand !important;
		place-items: center !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-market-logo,
	.kb-commerce-header[data-kb-command-header] .kb-market-logo :is(.kb-default-logo, .custom-logo-link) {
		block-size: 62px !important;
		max-inline-size: 130px !important;
	}

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

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

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

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

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

	.kb-commerce-header[data-kb-command-header] .kb-commerce-search.is-open {
		position: absolute !important;
		z-index: 12 !important;
		inset: 6px 4px !important;
		display: flex !important;
		inline-size: calc(100% - 8px) !important;
		min-block-size: 62px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-commerce-nav {
		gap: 8px !important;
		min-block-size: 58px !important;
		padding-block: 4px !important;
		overflow-x: auto !important;
		scrollbar-width: none !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu {
		overflow: visible !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu > ul {
		gap: 8px !important;
	}

	.kb-commerce-header[data-kb-command-header] .kb-reference-primary-menu a,
	.kb-commerce-header[data-kb-command-header] .kb-category-toggle {
		min-block-size: 46px !important;
		padding-inline: 12px !important;
		border: 1px solid var(--kb-card-line) !important;
		border-radius: 12px !important;
		background: var(--kb-surface, #fff) !important;
		white-space: nowrap !important;
	}

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

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

	.kb-product-rail > .kb-store-card {
		flex-basis: min(76vw, 270px) !important;
	}

	body.kb-product-route .kb-main--product,
	body.single-product .kb-main--product {
		padding-block: 10px 104px !important;
	}

	body.kb-product-route .woocommerce div.product,
	body.single-product .woocommerce div.product {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-areas: "gallery" "summary" "tabs" "related" !important;
		gap: 18px !important;
		padding: 10px !important;
		border-radius: 14px !important;
	}

	body.kb-product-route .woocommerce div.product > .images,
	body.single-product .woocommerce div.product > .images {
		position: relative !important;
		top: auto !important;
	}

	body.kb-product-route .woocommerce-product-gallery__image,
	body.kb-product-route .woocommerce-product-gallery__image > a,
	body.single-product .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery__image > a {
		min-block-size: 360px !important;
	}

	body.kb-product-route .woocommerce-product-gallery__image img,
	body.single-product .woocommerce-product-gallery__image img {
		max-block-size: 480px !important;
	}

	body.kb-product-route :is(.kb-product-assurances, .kb-product-core-actions),
	body.single-product :is(.kb-product-assurances, .kb-product-core-actions) {
		grid-template-columns: 1fr !important;
	}

	body.kb-product-route .summary .product_title,
	body.single-product .summary .product_title {
		font-size: clamp(25px, 7vw, 34px) !important;
	}

	.kb-support-widget-v1 {
		inset-inline-start: 10px !important;
		inset-block-end: calc(84px + env(safe-area-inset-bottom)) !important;
	}

	.kb-support-widget-v1__launcher {
		min-inline-size: 54px !important;
		inline-size: 54px !important;
		block-size: 54px !important;
		padding: 5px !important;
		border-radius: 50% !important;
	}

	.kb-support-widget-v1__launcher-copy {
		display: none !important;
	}
}

@media (max-width: 480px) {
	:root {
		--kb-shell: calc(100% - 10px);
	}

	body.kb-product-route .woocommerce-product-gallery__image,
	body.kb-product-route .woocommerce-product-gallery__image > a,
	body.single-product .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery__image > a {
		min-block-size: 300px !important;
	}

	.kb-store-card h3,
	.kb-product-card h3,
	.woocommerce ul.products > li.product .woocommerce-loop-product__title {
		font-size: 13px !important;
	}

	.kb-store-card__body,
	.kb-product-card__body {
		padding: 9px !important;
	}
}
