/*
 * Ketabbin product-card surface repair v35.
 * Structural containment applies to every WooCommerce rendering route,
 * including Ketabbin's query-string product preview. No commerce behaviour.
 */

.woocommerce div.product > :is(.related, .upsells) {
	box-sizing: border-box;
	grid-column: 1 / -1 !important;
	inline-size: 100% !important;
	min-inline-size: 0;
	max-inline-size: 100%;
	clear: both;
}

.woocommerce div.product > :is(.related, .upsells) > ul.products,
.woocommerce :is(.related, .upsells) > ul.products {
	box-sizing: border-box;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	inline-size: 100% !important;
	min-inline-size: 0;
	max-inline-size: 100%;
	gap: 16px !important;
}

.woocommerce :is(.related, .upsells) ul.products > li.product,
.woocommerce ul.products > li.product {
	box-sizing: border-box;
	min-inline-size: 0;
	max-inline-size: 100%;
	overflow: hidden;
}

.woocommerce ul.products > li.product :is(.kb-server-cart-form, .kb-card-purchase-action) {
	box-sizing: border-box;
	inline-size: 100% !important;
	min-inline-size: 0 !important;
	max-inline-size: 100% !important;
}

.woocommerce ul.products > li.product .kb-server-cart-form {
	display: block !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}

.woocommerce ul.products > li.product .kb-card-purchase-action {
	display: inline-flex !important;
	min-block-size: 44px !important;
	max-block-size: 50px !important;
	padding: 8px 10px !important;
	align-items: center !important;
	justify-content: center !important;
	flex-flow: row nowrap !important;
	gap: 7px !important;
	border-radius: 11px !important;
	font-size: clamp(11px, .45vw + 9px, 14px) !important;
	line-height: 1.35 !important;
	text-align: center !important;
	white-space: nowrap !important;
	overflow: hidden !important;
}

.woocommerce ul.products > li.product .kb-card-purchase-action svg {
	inline-size: 22px !important;
	block-size: 22px !important;
	min-inline-size: 22px !important;
	max-inline-size: 22px !important;
	flex: 0 0 22px !important;
}

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

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

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

@media (max-width: 620px) {
	.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;
	}

	.woocommerce ul.products > li.product .kb-card-purchase-action {
		padding-inline: 7px !important;
		font-size: 12px !important;
	}
}

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