/* OCC AOV Boost — frontend styles */

.occ-aov-cross-sell-widget {
	margin: 2em 0;
	padding: 1.5em;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	background: #fafafa;
}

.occ-aov-widget-title {
	font-size: 1.1em;
	font-weight: 700;
	margin: 0 0 1em;
}

/* Suggestion grids.
   BOTH surfaces render inside a narrow column, not the full page width: the FBT widget
   sits in the product summary column (woocommerce_after_add_to_cart_form) and the cart
   block sits inside <div class="cart_totals"> (woocommerce_before_cart_totals), which is
   a ~40% sidebar in the classic cart. A viewport-width media query cannot see that, which
   is exactly what produced the mismatched tiles and the 2 + 1 orphan row before. Two
   fixed columns sized from the container work in any of those contexts and never orphan
   a tile when the count is 2 or 4. */
.occ-aov-cross-sell-list,
.occ-aov-cart-upsell-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25em 1em;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 440px;
}

/* A lone tile on the last row spans the grid and centers instead of hanging left. The cap
   tracks one real column — half the grid minus half the 1em column gap — so the odd tile
   is never wider than its siblings in a container narrower than the 440px cap. */
.occ-aov-cross-sell-list > .occ-aov-cross-sell-item:last-child:nth-child(odd),
.occ-aov-cart-upsell-list > .occ-aov-cart-upsell-item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	width: 100%;
	max-width: calc(50% - 0.5em);
}

.occ-aov-cross-sell-item,
.occ-aov-cart-upsell-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: center;
	list-style: none;
}

.occ-aov-product-link {
	display: block;
	text-decoration: none;
}

/* Fixed-ratio image box so every tile is the same height regardless of source image
   dimensions; contain (not cover) keeps box-shaped cigar photography uncropped. */
.occ-aov-product-thumb {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff;
	border-radius: 3px;
}

.occ-aov-cross-sell-item .occ-aov-product-image,
.occ-aov-cart-upsell-item .occ-aov-product-image,
.occ-aov-cross-sell-item img,
.occ-aov-cart-upsell-item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	object-fit: contain;
	object-position: center;
}

/* Two-line clamp keeps names, prices, and buttons on the same baseline across tiles. */
.occ-aov-product-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.82em;
	line-height: 1.3;
	min-height: 2.6em;
	margin: 0.6em 0 0.25em;
}

.occ-aov-product-price {
	display: block;
	font-weight: 700;
	font-size: 0.85em;
	line-height: 1.3;
	margin: 0 0 0.6em;
}

/* Selector specificity is deliberate (0-3-1): the tile keeps the theme's `.button` class
   for brand styling, so these overrides have to outrank both WooCommerce's
   `.woocommerce a.button` (0-2-1) and Flatsome's `.button` regardless of stylesheet
   order. Without that the theme's large padding and line-height come back and the label
   wraps onto two lines inside a ~150px tile. */
.occ-aov-cross-sell-widget .occ-aov-cross-sell-item a.occ-aov-add-to-cart,
.occ-aov-cart-upsell .occ-aov-cart-upsell-item a.occ-aov-add-to-cart {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: auto 0 0;
	padding: 0.6em 0.4em;
	font-size: 0.72em;
	line-height: 1.2;
	min-height: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Cart upsell block */
.occ-aov-cart-upsell {
	margin-bottom: 1.5em;
	padding: 1em;
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: 4px;
}

.occ-aov-cart-upsell-message {
	font-weight: 600;
	margin: 0 0 1em;
}

.occ-aov-checkout-upsell {
	margin: 0 0 1.5em;
	border: 1px solid #dcc392;
	border-radius: 4px;
	background: linear-gradient(180deg, #fff8ea 0%, #fffdf7 100%);
}

.occ-aov-checkout-upsell__content {
	display: grid;
	gap: 0.75em;
}

.occ-aov-checkout-upsell__headline {
	margin: 0;
	font-size: 1em;
	font-weight: 700;
	color: #3a2610;
}

.occ-aov-checkout-upsell__copy {
	margin: 0;
	color: #5c4528;
}

.occ-aov-checkout-upsell__actions {
	display: flex;
	align-items: center;
	gap: 0.75em;
	flex-wrap: wrap;
}

.occ-aov-checkout-upsell__button,
.occ-aov-checkout-upsell__button.components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0.75em 1.2em;
	border-color: #5f3b16;
	background: #5f3b16;
	color: #fff;
}

.occ-aov-checkout-upsell__button:hover,
.occ-aov-checkout-upsell__button:focus,
.occ-aov-checkout-upsell__button.components-button:hover,
.occ-aov-checkout-upsell__button.components-button:focus {
	border-color: #44290f;
	background: #44290f;
	color: #fff;
}

.occ-aov-checkout-upsell__button[disabled],
.occ-aov-checkout-upsell__button.loading,
.occ-aov-checkout-upsell__button.components-button[disabled] {
	opacity: 0.75;
}

.occ-aov-checkout-upsell__added {
	font-weight: 600;
	color: #2e7d32;
}

/* Qty-break tier table on PDP */
.occ-aov-qty-break-tiers {
	margin: 1em 0;
	padding: 0.75em 1em;
	background: #f0f7ff;
	border: 1px solid #b3d4f5;
	border-radius: 4px;
}

.occ-aov-qty-break-title {
	font-weight: 700;
	margin: 0 0 0.5em;
	font-size: 0.95em;
}

.occ-aov-qty-break-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.occ-aov-qty-break-item {
	font-size: 0.9em;
	padding: 0.2em 0;
	color: #1a5a8f;
}

.occ-aov-qty-break-item::before {
	content: '✓ ';
	color: #2e7d32;
}

/* Volume savings row in cart/checkout totals */
.occ-aov-volume-savings th,
.occ-aov-volume-savings td {
	color: #2e7d32;
	font-weight: 600;
}

/* Small screens: the grid is already 2 columns; just tighten the spacing and give the
   button a taller tap target. */
@media (max-width: 480px) {
	.occ-aov-cross-sell-widget {
		padding: 1em;
	}
	.occ-aov-cross-sell-list,
	.occ-aov-cart-upsell-list {
		gap: 1em 0.75em;
	}
	/* Column gap tightens here, so the lone-tile cap has to follow it. */
	.occ-aov-cross-sell-list > .occ-aov-cross-sell-item:last-child:nth-child(odd),
	.occ-aov-cart-upsell-list > .occ-aov-cart-upsell-item:last-child:nth-child(odd) {
		max-width: calc(50% - 0.375em);
	}
	.occ-aov-cross-sell-widget .occ-aov-cross-sell-item a.occ-aov-add-to-cart,
	.occ-aov-cart-upsell .occ-aov-cart-upsell-item a.occ-aov-add-to-cart {
		padding: 0.7em 0.4em;
	}
}