/**
 * UX Products / shop loop — style "q8kart" (.box-q8kart)
 * Brand tokens match header / top bar (header-desktop-q8kart.css).
 */
:root {
	--q8-brand-grad: linear-gradient(90deg, #2e1a6d, #4a338d 45.83%, #7759ce);
	--q8-brand-solid: #2e1a6d;
	--q8kart-card-bg: #fff;
	--q8kart-card-radius: 10px;
	--q8kart-card-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
	--q8kart-price-ink: #000000;
	--q8kart-price-del: #d32f2f;
	--q8kart-btn-color: #fff;
	--q8kart-label-green: #82b46c;
	--q8kart-card-pad-x: 0.5rem;
	--q8kart-card-pad-y: 0.45rem;
}

.product-small.box.box-q8kart {
	background: var(--q8kart-card-bg);
	border-radius: var(--q8kart-card-radius);
	box-shadow: var(--q8kart-card-shadow);
	overflow: hidden;
	padding-bottom: 0;
}

.product-small.box.box-q8kart .col-inner {
	padding: 0;
}

.product-small.box.box-q8kart .box-image {
	border-radius: var(--q8kart-card-radius) var(--q8kart-card-radius) 0 0;
	overflow: hidden;
}

/* Wishlist (top-right): always visible on the card */
.product-small.box.box-q8kart .box-image .image-tools.top.right.show-on-hover {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
}

/* Quick view bar: hidden until the product image is hovered (Flatsome .show-on-hover) */
.product-small.box.box-q8kart .box-image .image-tools.grid-tools.show-on-hover {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.product-small.box.box-q8kart .box-image:hover .image-tools.grid-tools.show-on-hover,
.product-small.box.box-q8kart .box-image:focus-within .image-tools.grid-tools.show-on-hover,
.product-small.box.box-q8kart.has-hover:hover .image-tools.grid-tools.show-on-hover {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.product-small.box.box-q8kart .box-image .image-tools.top.right .button {
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(46, 26, 109, 0.22);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(46, 26, 109, 0.1);
	color: var(--q8-brand-solid) !important;
}

.product-small.box.box-q8kart .box-image .image-tools.top.right .button:hover {
	background: #fff;
	border-color: rgba(46, 26, 109, 0.38);
	color: #4a338d !important;
}

.product-small.box.box-q8kart .box-text {
	text-align: center;
	padding: var(--q8kart-card-pad-y) var(--q8kart-card-pad-x) 0.4rem;
}

.product-small.box.box-q8kart .box-text > * {
	margin-top: 0;
	margin-bottom: 0;
}

.product-small.box.box-q8kart .box-text .title-wrapper {
	margin: 0 0 0.2rem;
	padding: 0;
}

.product-small.box.box-q8kart .box-text .price-wrapper {
	margin: 0;
	padding: 0;
}

.product-small.box.box-q8kart .box-text .category,
.product-small.box.box-q8kart .box-text .star-rating {
	margin-bottom: 0.2rem !important;
}

.product-small.box.box-q8kart .product-title {
	font-weight: 800;
	line-height: 1.3;
	margin: 0 !important;
	padding: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.92rem;
	-webkit-font-smoothing: antialiased;
}

.product-small.box.box-q8kart .product-title a,
.product-small.box.box-q8kart .woocommerce-loop-product__title {
	font-weight: 800;
	color: var(--q8kart-price-ink, #000);
}

.product-small.box.box-q8kart .price-wrapper .price {
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.2rem 0.35rem;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 800;
}

.product-small.box.box-q8kart .price-wrapper .woocommerce-Price-amount.amount {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--q8kart-price-ink);
}

/* Strikethrough / “was” price — WC uses <del>, sometimes <s>; force red over Flatsome/WC */
.product-small.box.box-q8kart .price-wrapper del,
.product-small.box.box-q8kart .price-wrapper del *,
.product-small.box.box-q8kart .price-wrapper s,
.product-small.box.box-q8kart .price-wrapper s *,
.product-small.box.box-q8kart .box-text .price del,
.product-small.box.box-q8kart .box-text .price del *,
.product-small.box.box-q8kart .price del .woocommerce-Price-amount.amount,
.product-small.box.box-q8kart .price-wrapper del .woocommerce-Price-amount.amount {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--q8kart-price-del) !important;
	-webkit-text-fill-color: var(--q8kart-price-del) !important;
}

.product-small.box.box-q8kart .price-wrapper ins .woocommerce-Price-amount.amount {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--q8kart-price-ink) !important;
	-webkit-text-fill-color: var(--q8kart-price-ink) !important;
}

/* On-sale / discount bubble near price */
.product-small.box.box-q8kart .badge-inner.onsale,
.product-small.box.box-q8kart .callout.badge .badge-inner {
	background-color: var(--q8-brand-solid);
	background-image: var(--q8-brand-grad);
	color: #fff;
	font-weight: 700;
	border-radius: 4px;
	padding: 0.15em 0.45em;
}

/* “Best seller” / top callout style when using Flatsome bubbles */
.product-small.box.box-q8kart .badge.callout .badge-inner.callout-new-bg,
.product-small.box.box-q8kart .badge-top .badge-inner {
	background: var(--q8kart-label-green);
	color: #fff;
}

.product-small.box.box-q8kart .box-image a.add_to_cart_button,
.product-small.box.box-q8kart .box-image .add-to-cart-grid {
	display: none !important;
}

/* Add to cart — compact, not oversized */
.product-small.box.box-q8kart .box-text .add-to-cart-button {
	margin: 0.35rem 0 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

/* ATC + Flatsome “primary / outline” loop buttons — flat brand fill (no gradient) */
.product-small.box.box-q8kart .box-text a.add_to_cart_button,
.product-small.box.box-q8kart .box-text a.add_to_cart_button.button,
.product-small.box.box-q8kart .box-text a.add_to_cart_button.primary,
.product-small.box.box-q8kart .box-text .single_add_to_cart_button,
.product-small.box.box-q8kart .box-text .single_add_to_cart_button.button,
.product-small.box.box-q8kart .box-text .button.product_type_simple,
.product-small.box.box-q8kart .box-text .button.product_type_variable,
.product-small.box.box-q8kart .box-text .button.product_type_external,
.product-small.box.box-q8kart .overlay-tools a.add_to_cart_button,
.product-small.box.box-q8kart .overlay-tools a.add_to_cart_button.button,
.product-small.box.box-q8kart .overlay-tools .button.product_type_simple,
.product-small.box.box-q8kart .overlay-tools .button.product_type_variable,
.product-small.box.box-q8kart .overlay-tools .button.product_type_external {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box;
	margin: 0 !important;
	text-align: center;
	background-color: var(--q8-brand-solid) !important;
	background-image: none !important;
	color: var(--q8kart-btn-color) !important;
	border: 1px solid var(--q8-brand-solid) !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 0.8125rem !important;
	line-height: 1.25 !important;
	padding: 0.42rem 0.65rem !important;
	min-height: 0 !important;
	box-shadow: none !important;
}

.product-small.box.box-q8kart .box-text a.add_to_cart_button:hover,
.product-small.box.box-q8kart .box-text a.add_to_cart_button:focus,
.product-small.box.box-q8kart .box-text .single_add_to_cart_button:hover,
.product-small.box.box-q8kart .box-text .single_add_to_cart_button:focus,
.product-small.box.box-q8kart .box-text .button.product_type_simple:hover,
.product-small.box.box-q8kart .box-text .button.product_type_variable:hover,
.product-small.box.box-q8kart .overlay-tools a.add_to_cart_button:hover,
.product-small.box.box-q8kart .overlay-tools a.add_to_cart_button:focus,
.product-small.box.box-q8kart .overlay-tools .button.product_type_simple:hover,
.product-small.box.box-q8kart .overlay-tools .button.product_type_variable:hover {
	filter: brightness(1.08);
	color: var(--q8kart-btn-color) !important;
	border-color: #4a338d !important;
}

.product-small.box.box-q8kart .box-text a.add_to_cart_button.loading,
.product-small.box.box-q8kart .box-text a.add_to_cart_button.added {
	opacity: 0.92;
}

/* WooCommerce appends “View cart” after AJAX add-to-cart; keep header/cart UI, hide only on Q8 Kart tiles. */
.product-small.box.box-q8kart a.added_to_cart.wc-forward,
.product-small.box.box-q8kart a.added_to_cart,
.product-small.box.box-q8kart a.added_to_cart_button {
	display: none !important;
}

/**
 * Equal-height Q8 Kart tiles in product rows:
 * stretch each column, flex the card body, pin price + ATC to the bottom row.
 * Skips masonry / packery, list layout, Flickity sliders, and isotope filters.
 * Scoped to Woo / product grids (shop uses `.products.row`; related & UX may differ).
 */
.woocommerce .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small,
.woocommerce-page .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small,
.products.row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small,
.products .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small,
.related .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small,
.upsells-wrapper .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small,
.ux-relay .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	height: auto;
	min-height: 0;
}

.woocommerce .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner,
.woocommerce-page .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner,
.products.row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner,
.products .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner,
.related .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner,
.upsells-wrapper .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner,
.ux-relay .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}

.woocommerce .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart,
.woocommerce-page .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart,
.products.row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart,
.products .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart,
.related .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart,
.upsells-wrapper .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart,
.ux-relay .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

.woocommerce .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-image,
.woocommerce-page .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-image,
.products.row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-image,
.products .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-image,
.related .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-image,
.upsells-wrapper .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-image,
.ux-relay .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-image {
	flex: 0 0 auto;
}

.woocommerce .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-text,
.woocommerce-page .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-text,
.products.row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-text,
.products .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-text,
.related .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-text,
.upsells-wrapper .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-text,
.ux-relay .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .box-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

/* Match 2-line title clamp so one-line titles don’t sit higher than neighbors */
.woocommerce .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .title-wrapper,
.woocommerce-page .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .title-wrapper,
.products.row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .title-wrapper,
.products .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .title-wrapper,
.related .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .title-wrapper,
.upsells-wrapper .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .title-wrapper,
.ux-relay .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .title-wrapper {
	flex: 0 0 auto;
	min-height: calc(1.3em * 2 + 0.15rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.woocommerce .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .price-wrapper,
.woocommerce-page .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .price-wrapper,
.products.row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .price-wrapper,
.products .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .price-wrapper,
.related .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .price-wrapper,
.upsells-wrapper .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .price-wrapper,
.ux-relay .row:not(.has-packery):not(.row-grid):not(.row-slider):not(.row-isotope):not(.has-box-vertical) > .col.product-small > .col-inner .product-small.box.box-q8kart .price-wrapper {
	flex: 0 0 auto;
	margin-top: auto;
	width: 100%;
}