/**
 * WooCommerce product cards — shop loops, Product Collection, All Products, editor.
 * Tokens: Appearance → Carbon Based → Product grids.
 */

:root {
	--cbs-product-card-logo-max: 86%;
	--cbs-cart-thumb-size: 56px;
	--cbs-cart-thumb-radius: 5px;
	/*
	 * Product grid column breakpoints (shop + blocks) — keep cbs-shop.css in sync.
	 * 1 col ≤480px · 2 cols 481–781px · block/shop column class above 781px.
	 * Not WooCommerce blocks’ default 600px.
	 */
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template,
.wp-block-woocommerce-product-collection ul.wc-block-product-template.is-flex-container,
.wp-block-woocommerce-all-products ul.wc-block-grid__products,
.wp-block-woocommerce-all-products ul.wc-block-grid__products.is-flex-container,
.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template,
.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.is-flex-container,
.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products,
.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.is-flex-container {
	display: grid;
	flex-direction: unset;
	flex-wrap: unset;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

/* Beat Woo product-template @media (min-width: 600px) flex % widths on list items. */
.wp-block-woocommerce-product-collection ul.wc-block-product-template.is-flex-container.is-flex-container > li,
.wp-block-woocommerce-all-products ul.wc-block-grid__products.is-flex-container.is-flex-container > li,
.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.is-flex-container.is-flex-container > li,
.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.is-flex-container.is-flex-container > li {
	width: 100%;
	max-width: none;
	flex: none;
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-1,
.wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-1,
.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-1,
.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-2,
.wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-2,
.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-2,
.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-3,
.wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-3,
.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-3,
.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-4,
.wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-4,
.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-4,
.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-5,
.wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-5,
.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-5,
.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-6,
.wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-6,
.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-6,
.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.wp-block-woocommerce-product-collection li.wc-block-product,
.wp-block-woocommerce-all-products li.wc-block-grid__product,
.editor-styles-wrapper .wp-block-woocommerce-product-collection li.wc-block-product,
.editor-styles-wrapper .wp-block-woocommerce-all-products li.wc-block-grid__product {
	margin: 0 !important;
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template,
.wp-block-woocommerce-all-products ul.wc-block-grid__products,
.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template,
.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products,
.cbs-shop-wrap ul.products {
	gap: var(--cbs-home-products-gap, 28px);
}

.wp-block-woocommerce-product-collection li.wc-block-product,
.wp-block-woocommerce-all-products li.wc-block-grid__product,
.editor-styles-wrapper .wp-block-woocommerce-product-collection li.wc-block-product,
.editor-styles-wrapper .wp-block-woocommerce-all-products li.wc-block-grid__product,
.cbs-shop-wrap ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--cbs-home-products-card-bg, #ffffff);
	border: 1px solid var(--cbs-home-products-card-border, #ececec);
	border-radius: var(--cbs-home-products-card-radius, 12px);
	box-shadow: var(--cbs-home-products-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.03));
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

/* Classic shop: image/title/price live inside the product link — grow it so price can pin. */
.cbs-shop-wrap ul.products li.product > a.woocommerce-LoopProduct-link,
.cbs-shop-wrap ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	text-decoration: none;
}

.wp-block-woocommerce-product-collection li.wc-block-product:hover,
.wp-block-woocommerce-all-products li.wc-block-grid__product:hover,
.editor-styles-wrapper .wp-block-woocommerce-product-collection li.wc-block-product:hover,
.editor-styles-wrapper .wp-block-woocommerce-all-products li.wc-block-grid__product:hover,
.cbs-shop-wrap ul.products li.product:hover {
	box-shadow: var(--cbs-home-products-card-shadow-hover, 0 10px 24px rgba(0, 0, 0, 0.08));
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image,
.wp-block-woocommerce-all-products .wc-block-grid__product-image,
.editor-styles-wrapper .wp-block-woocommerce-product-collection .wc-block-components-product-image,
.editor-styles-wrapper .wp-block-woocommerce-all-products .wc-block-grid__product-image,
.cbs-shop-wrap ul.products li.product a img {
	margin: 0;
	background: var(--cbs-home-products-image-bg, #f5f7fb);
}

/* Avoid fallback image bg peeking at rounded corners when a card composite is present. */
.wp-block-woocommerce-product-collection .wc-block-components-product-image:has(.cbs-product-card-image-wrap),
.wp-block-woocommerce-all-products .wc-block-grid__product-image:has(.cbs-product-card-image-wrap),
.editor-styles-wrapper .wp-block-woocommerce-product-collection .wc-block-components-product-image:has(.cbs-product-card-image-wrap),
.editor-styles-wrapper .wp-block-woocommerce-all-products .wc-block-grid__product-image:has(.cbs-product-card-image-wrap),
.cbs-shop-wrap ul.products li.product a:has(.cbs-product-card-image-wrap) {
	background: transparent;
}

.wp-block-woocommerce-product-collection .cbs-product-card-image-wrap,
.wp-block-woocommerce-all-products .cbs-product-card-image-wrap,
.editor-styles-wrapper .wp-block-woocommerce-product-collection .cbs-product-card-image-wrap,
.editor-styles-wrapper .wp-block-woocommerce-all-products .cbs-product-card-image-wrap,
.cbs-shop-wrap ul.products li.product .cbs-product-card-image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--cbs-home-products-image-height, 220px);
	background-color: var(--cbs-home-products-image-bg, #f5f7fb);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cbs-product-card-image-wrap.has-card-bg img {
	width: auto !important;
	max-width: var(--cbs-product-card-logo-max, 86%) !important;
	max-height: var(--cbs-product-card-logo-max, 86%) !important;
	height: auto !important;
	object-fit: contain !important;
	background: transparent !important;
}

/* Block grids: match classic shop — logo stays thumbnail-sized; beat block width:100% / object-fit:cover. */
.wp-block-woocommerce-product-collection .wc-block-components-product-image .cbs-product-card-image-wrap.has-card-bg img,
.wp-block-woocommerce-all-products .wc-block-grid__product-image .cbs-product-card-image-wrap.has-card-bg img,
.editor-styles-wrapper .wp-block-woocommerce-product-collection .wc-block-components-product-image .cbs-product-card-image-wrap.has-card-bg img,
.editor-styles-wrapper .wp-block-woocommerce-all-products .wc-block-grid__product-image .cbs-product-card-image-wrap.has-card-bg img {
	width: auto !important;
	height: auto !important;
	max-width: min(var(--cbs-product-card-logo-max, 86%), 150px) !important;
	max-height: min(var(--cbs-product-card-logo-max, 86%), 150px) !important;
	object-fit: contain !important;
	/* Woo editor-only empty-alt border (product-image.css, all-products.css, cart.css). */
	border: none !important;
	box-shadow: none;
}

/* Editor fallback when a product image block renders before composites are injected. */
.editor-styles-wrapper .wc-block-components-product-image.cbs-editor-card-pending:not(:has(.cbs-product-card-image-wrap)) {
	background-color: var(--cbs-home-products-image-bg, #f5f7fb);
	background-size: cover;
	background-position: center;
}

.editor-styles-wrapper .wc-block-components-product-image.cbs-editor-card-pending:not(:has(.cbs-product-card-image-wrap)) img {
	visibility: hidden;
}

.editor-styles-wrapper .wc-block-components-product-image:not(:has(.cbs-product-card-image-wrap)) img {
	width: auto !important;
	height: auto !important;
	max-width: min(var(--cbs-product-card-logo-max, 86%), 150px) !important;
	max-height: min(var(--cbs-product-card-logo-max, 86%), 150px) !important;
	object-fit: contain !important;
	margin-left: auto;
	margin-right: auto;
}

.editor-styles-wrapper .wp-block-woocommerce-product-collection .cbs-product-card-image-wrap,
.editor-styles-wrapper .wp-block-woocommerce-all-products .cbs-product-card-image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--cbs-home-products-image-height, 220px);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.editor-styles-wrapper .wp-block-woocommerce-product-collection .wc-block-components-product-image:has(.cbs-product-card-image-wrap),
.editor-styles-wrapper .wp-block-woocommerce-all-products .wc-block-grid__product-image:has(.cbs-product-card-image-wrap) {
	background: transparent;
}

.cbs-product-card-image-wrap--compact img {
	position: static !important;
	transform: none !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	max-width: var(--cbs-product-card-logo-max, 86%) !important;
	max-height: var(--cbs-product-card-logo-max, 86%) !important;
	object-fit: contain !important;
	object-position: center center !important;
}

/* Beat WooCommerce widget rules (ul.product_list_widget li img { float; width: 32px }). */
.woocommerce ul.product_list_widget li .cbs-product-card-image-wrap--compact,
.woocommerce ul.cart_list li .cbs-product-card-image-wrap--compact,
.woocommerce.widget_shopping_cart li .cbs-product-card-image-wrap--compact {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.woocommerce ul.product_list_widget li .cbs-product-card-image-wrap--compact img,
.woocommerce ul.cart_list li .cbs-product-card-image-wrap--compact img,
.woocommerce.widget_shopping_cart li .cbs-product-card-image-wrap--compact img {
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* Full-bleed product photos only — skip card logo + background composites. */
.wp-block-woocommerce-product-collection .wc-block-components-product-image:not(:has(.cbs-product-card-image-wrap)) img,
.wp-block-woocommerce-all-products .wc-block-grid__product-image:not(:has(.cbs-product-card-image-wrap)) img,
.editor-styles-wrapper .wp-block-woocommerce-product-collection .wc-block-components-product-image:not(:has(.cbs-product-card-image-wrap)) img,
.editor-styles-wrapper .wp-block-woocommerce-all-products .wc-block-grid__product-image:not(:has(.cbs-product-card-image-wrap)) img,
.cbs-shop-wrap ul.products li.product a > img {
	display: block;
	width: 100%;
	height: var(--cbs-home-products-image-height, 220px);
	object-fit: cover;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-name,
.wp-block-woocommerce-product-collection .wp-block-post-title,
.wp-block-woocommerce-all-products .wc-block-grid__product-title,
.editor-styles-wrapper .wp-block-woocommerce-product-collection .wc-block-components-product-name,
.editor-styles-wrapper .wp-block-woocommerce-product-collection .wp-block-post-title,
.editor-styles-wrapper .wp-block-woocommerce-all-products .wc-block-grid__product-title,
.cbs-shop-wrap ul.products li.product .woocommerce-loop-product__title,
.cbs-shop-wrap ul.products li.product h2 {
	display: grid;
	box-sizing: border-box;
	max-width: 100%;
	min-height: var(--cbs-home-products-title-min-height, 0px);
	margin: 18px 18px 8px !important;
	padding: 0 !important;
	font-size: var(--cbs-home-products-title-font-size, 22px) !important;
	font-weight: var(--cbs-home-products-title-font-weight, 700) !important;
	line-height: 1.3 !important;
	text-align: var(--cbs-home-products-title-align, left) !important;
	align-content: var(--cbs-home-products-title-align-content, start);
}

/*
 * Equal-height grid cells + flex cards: pin price/button to the card foot
 * so multi-line titles do not stagger CTAs (no title min-height required).
 */
.wp-block-woocommerce-product-collection .wc-block-components-product-price,
.wp-block-woocommerce-all-products .wc-block-grid__product-price,
.editor-styles-wrapper .wp-block-woocommerce-product-collection .wc-block-components-product-price,
.editor-styles-wrapper .wp-block-woocommerce-all-products .wc-block-grid__product-price,
.cbs-shop-wrap ul.products li.product .price {
	margin: auto 18px 16px;
	font-size: var(--cbs-home-products-price-font-size, 23px);
	font-weight: 600;
	color: #2f2f2f;
	text-align: var(--cbs-home-products-price-align, left);
}

.wp-block-woocommerce-product-collection .wc-block-components-product-price,
.wp-block-woocommerce-all-products .wc-block-grid__product-price,
.editor-styles-wrapper .wp-block-woocommerce-product-collection .wc-block-components-product-price,
.editor-styles-wrapper .wp-block-woocommerce-all-products .wc-block-grid__product-price {
	justify-content: var(--cbs-home-products-price-justify, flex-start);
}

.cbs-shop-wrap ul.products li.product .button {
	margin: 0 18px 18px;
	width: calc(100% - 36px);
}

/* Tablet: 2 columns (481–781px) — overrides WooCommerce blocks’ 600px default. */
@media (max-width: 781px) {
	.wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-3,
	.wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-4,
	.wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-5,
	.wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-6,
	.wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-3,
	.wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-4,
	.wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-5,
	.wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-6,
	.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-3,
	.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-4,
	.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-5,
	.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template.columns-6,
	.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-3,
	.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-4,
	.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-5,
	.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products.columns-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-woocommerce-product-collection .wc-block-components-product-image:not(:has(.cbs-product-card-image-wrap)) img,
	.wp-block-woocommerce-all-products .wc-block-grid__product-image:not(:has(.cbs-product-card-image-wrap)) img,
	.editor-styles-wrapper .wp-block-woocommerce-product-collection .wc-block-components-product-image:not(:has(.cbs-product-card-image-wrap)) img,
	.editor-styles-wrapper .wp-block-woocommerce-all-products .wc-block-grid__product-image:not(:has(.cbs-product-card-image-wrap)) img,
	.cbs-shop-wrap ul.products li.product a > img {
		height: var(--cbs-home-products-image-height-mobile, 190px);
	}

	.wp-block-woocommerce-product-collection .cbs-product-card-image-wrap,
	.wp-block-woocommerce-all-products .cbs-product-card-image-wrap,
	.editor-styles-wrapper .wp-block-woocommerce-product-collection .cbs-product-card-image-wrap,
	.editor-styles-wrapper .wp-block-woocommerce-all-products .cbs-product-card-image-wrap,
	.cbs-shop-wrap ul.products li.product .cbs-product-card-image-wrap {
		height: var(--cbs-home-products-image-height-mobile, 190px);
	}
}

/* Mobile: 1 column (≤480px). */
@media (max-width: 480px) {
	.wp-block-woocommerce-product-collection ul.wc-block-product-template[class*="columns-"],
	.wp-block-woocommerce-all-products ul.wc-block-grid__products[class*="columns-"],
	.editor-styles-wrapper .wp-block-woocommerce-product-collection ul.wc-block-product-template[class*="columns-"],
	.editor-styles-wrapper .wp-block-woocommerce-all-products ul.wc-block-grid__products[class*="columns-"] {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

/* Cart / mini-cart — compact card composites (logo on per-product background). */
.cbs-product-card-image-wrap--compact {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	isolation: isolate;
	transform: translateZ(0);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.woocommerce-cart-form .cbs-product-card-image-wrap--compact,
.woocommerce ul.product_list_widget li .cbs-product-card-image-wrap--compact,
.woocommerce.widget_shopping_cart li .cbs-product-card-image-wrap--compact {
	width: var(--cbs-cart-thumb-size, 56px);
	height: var(--cbs-cart-thumb-size, 56px);
	border-radius: var(--cbs-cart-thumb-radius, 5px);
}

/* Menu Side Cart plugin panel — match plugin thumb CSS variables when present. */
.woocommerce-js #cbsmsc-side-cart .cbs-product-card-image-wrap--compact {
	width: var(--cbsmsc-thumb-size, var(--cbs-cart-thumb-size, 56px));
	height: var(--cbsmsc-thumb-size, var(--cbs-cart-thumb-size, 56px));
	border-radius: var(--cbsmsc-thumb-radius, var(--cbs-cart-thumb-radius, 5px));
}