/* ------------------------------------------------------------------
 * Cards + slider (shared by all locations)
 * ---------------------------------------------------------------- */

.oc-upsells__title {
	font-weight: 700;
	margin: 0 0 8px;
}

.oc-upsells-track {
	display: flex;
	gap: 12px;
}

.oc-upsells__slider .oc-upsells-track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-block-end: 6px;
}

.oc-upsells__slider .oc-upsells-card {
	scroll-snap-align: start;
	flex: 0 0 132px;
}

.oc-upsells-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	padding: 10px;
	background: #fff;
	text-align: center;
	min-width: 0;
	transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.oc-upsells-card__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.oc-upsells-card__img img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

.oc-upsells-card__title {
	font-size: 13px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Buy row: compact add button at the inline-end (left in RTL), price beside it.
   Wraps to two centered lines when the card is narrow (long unit prices). */
.oc-upsells-card__buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	row-gap: 6px;
	gap: 8px;
	margin-block-start: auto;
}

.oc-upsells-card__buy > * {
	margin-inline: auto;
}

[dir="ltr"] .oc-upsells-card__buy {
	flex-direction: row;
}

.oc-upsells-card__price {
	font-size: 13px;
	font-weight: 700;
	min-width: 0;
	/* Themes sometimes force break-all; keep prices breaking at spaces only. */
	word-break: keep-all;
	overflow-wrap: normal;
	white-space: normal;
}

.oc-upsells-card__price del {
	opacity: 0.55;
	font-weight: 400;
	font-size: 11px;
}

.oc-upsells-card__add {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 0;
	border-radius: 999px;
	background: var(--oc-upsells-cta-bg, var(--color-primary, #1d1d1d));
	color: var(--oc-upsells-cta-color, #fff);
	font-size: 12px;
	line-height: 1;
	padding: 7px 10px;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.15s ease;
}

.oc-upsells-card__add:hover {
	filter: brightness(1.12);
}

.oc-upsells-card__add.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.oc-upsells-card__add-icon {
	font-weight: 700;
	font-size: 14px;
}

/* Added effect: green flash + badge, then the card leaves the list */
.oc-upsells-card__added-badge {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #1faa59;
	color: #fff;
	font-size: 14px;
	line-height: 26px;
	text-align: center;
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}

.oc-upsells-card.is-added {
	border-color: #1faa59;
	box-shadow: 0 0 0 1px #1faa59 inset;
}

.oc-upsells-card.is-added .oc-upsells-card__added-badge {
	opacity: 1;
	transform: scale(1);
}

.oc-upsells-card.is-added .oc-upsells-card__add {
	visibility: hidden;
}

.oc-upsells-card.is-leaving {
	opacity: 0;
	transform: scale(0.85);
}

/* WooCommerce core injects a "view cart" link after ajax add buttons — never
   show it inside upsell components. */
.oc-upsells-card .added_to_cart,
.oc-upsells-modal .added_to_cart {
	display: none !important;
}

.oc-upsells--minicart {
	padding: 10px 12px;
	border-block-start: 1px solid #eee;
}

/* When rendered inside the mini-cart <ul>, neutralize any theme li styling
   (grids, bullets, borders) so the slider always renders as a plain block. */
li.oc-upsells-mini-li {
	display: block !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	grid-template-columns: none !important;
	float: none !important;
	width: 100% !important;
}

li.oc-upsells-mini-li::before,
li.oc-upsells-mini-li::after {
	content: none !important;
	display: none !important;
}

/* "Above the subtotal" position: pin the slider to the BOTTOM of the items
   area (--pin variant only). Standard themes: the <ul> gains min-height when
   its parent is sized; themes that wrap the list in a stretched scrollable
   form (e.g. "meat") flex through the form. Graceful degradation: without
   :has() support the slider simply stays right after the last item. */
ul.woocommerce-mini-cart:has(> li.oc-upsells-mini-li--pin) {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

form.woocommerce-cart-form:has(li.oc-upsells-mini-li--pin) {
	display: flex;
	flex-direction: column;
}

form.woocommerce-cart-form:has(li.oc-upsells-mini-li--pin) > ul.woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
}

/* margin auto pushes it down when the list is short; sticky keeps it glued
   right above the summary when the list is long and scrollable. */
li.oc-upsells-mini-li--pin {
	margin-block-start: auto !important;
	position: sticky !important;
	inset-block-end: 0 !important;
	background: #fff !important;
	z-index: 2;
}

/* The whole head row (title + glyph) toggles the section */
.oc-upsells__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

.oc-upsells__head .oc-upsells__title {
	margin: 0;
}

.oc-upsells__toggle {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	color: inherit;
	padding: 4px 8px;
}

.oc-upsells__toggle:hover,
.oc-upsells__toggle:focus,
.oc-upsells__toggle:active {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
	color: inherit;
}

.oc-upsells.is-collapsed .oc-upsells__slider {
	display: none;
}

/* ------------------------------------------------------------------
 * Modals (offers popup + quick product popup)
 * ---------------------------------------------------------------- */

/* Above everything — including theme floating carts/panels — so the overlay
   also dims them, exactly like the site's own popups. */
.oc-upsells-modal {
	position: fixed;
	inset: 0;
	z-index: 2147482000;
	display: none;
}

.oc-upsells-modal.is-open {
	display: block;
}

.oc-upsells-modal--product {
	z-index: 2147482001;
}

.oc-upsells-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.oc-upsells-modal__box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 14px;
	padding: 22px;
	/* room for the close chip above the content */
	padding-block-start: 50px;
	/* Dynamic width — grows with content, capped to the viewport */
	width: -moz-fit-content;
	width: fit-content;
	min-width: min(340px, calc(100vw - 32px));
	max-width: min(780px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Close chip — explicit geometry so theme button resets can't shrink it */
.oc-upsells-modal__close {
	position: absolute !important;
	inset-inline-end: 12px;
	inset-block-start: 12px;
	width: 30px !important;
	height: 30px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	background: #f2f2f2 !important;
	border: 0 !important;
	border-radius: 50% !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer;
	color: #444 !important;
	z-index: 2;
}

.oc-upsells-modal__close:hover {
	background: #e4e4e4 !important;
}

.oc-upsells-modal__msg {
	margin: 0;
	padding: 10px 14px;
	padding-inline-end: 34px;
	background: #edf9f1;
	border: 1px solid #bfe8cd;
	border-radius: 10px;
	color: #14713c;
	font-size: 14px;
}

.oc-upsells-msg-check {
	display: inline-block;
	font-weight: 700;
}

.oc-upsells-modal__title {
	margin: 0;
	padding-inline-end: 30px;
	font-size: 18px;
}

.oc-upsells-modal__body .oc-upsells-track {
	flex-wrap: wrap;
	justify-content: center;
}

.oc-upsells-modal__body .oc-upsells-card {
	flex: 0 0 150px;
}

.oc-upsells-modal__footer {
	text-align: center;
}

.oc-upsells-modal__skip {
	display: inline-block;
	border: 0;
	border-radius: var(--oc-upsells-cta-radius, var(--radius, 8px));
	background: var(--oc-upsells-cta-bg, var(--color-primary, #1d1d1d));
	color: var(--oc-upsells-cta-color, #fff);
	font-size: 15px;
	font-weight: 600;
	padding: 11px 26px;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.oc-upsells-modal__skip:hover {
	filter: brightness(1.12);
}

/* Quick product modal (variations) — split "quick view" layout: details on
   the start side, a large image on the end side; stacked on mobile. */
.oc-upsells-modal--product .oc-upsells-modal__box {
	max-width: min(960px, calc(100vw - 32px));
	padding: 26px;
	padding-block-start: 52px;
}

.oc-upsells-product {
	min-width: min(320px, calc(100vw - 84px));
	display: flex;
	/* Details are first in the DOM; reversing puts the image on the inline-start
	   side (right in RTL, left in LTR) — the classic quick-view arrangement. */
	flex-direction: row-reverse;
	align-items: stretch;
	gap: 28px;
	text-align: start;
}

.oc-upsells-product__details {
	flex: 1 1 46%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-block: 6px;
}

.oc-upsells-product__media {
	flex: 1 1 54%;
	min-width: 0;
	border-radius: 12px;
	overflow: hidden;
}

.oc-upsells-product__media img {
	width: 100% !important;
	height: 100% !important;
	min-height: 300px;
	max-height: 520px;
	max-width: none !important;
	object-fit: cover;
	display: block;
	border-radius: 12px;
	margin: 0;
}

.oc-upsells-product__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
}

.oc-upsells-product__price {
	font-weight: 700;
	font-size: 18px;
}

.oc-upsells-product__form form.cart {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

.oc-upsells-product__form table.variations {
	margin: 0;
	width: auto;
}

.oc-upsells-product__form .variations select {
	min-width: 220px;
	max-width: 100%;
}

/* Quantity + CTA share one row, like native quick views */
.oc-upsells-product__form .woocommerce-variation-add-to-cart {
	display: flex !important;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.oc-upsells-product__form .single_add_to_cart_button {
	border: 0;
	border-radius: var(--oc-upsells-cta-radius, var(--radius, 8px));
	background: var(--oc-upsells-cta-bg, var(--color-primary, #1d1d1d));
	color: var(--oc-upsells-cta-color, #fff);
	padding: 12px 34px;
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
}

/* Until a variation is chosen WooCommerce marks the button disabled — dim it
   (the themed background is applied inline, so opacity is what grays it). */
.oc-upsells-product__form .single_add_to_cart_button.disabled,
.oc-upsells-product__form .single_add_to_cart_button.wc-variation-selection-needed,
.oc-upsells-product__form .single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Fix only the GEOMETRY of third-party quantity widgets (unit/weight plugins,
   theme spinners) inside the quick product modal — they rely on product-page
   CSS and collapse into overlapping fragments elsewhere. The visual style
   (pill border, colors, fonts) stays the theme's own. */
.oc-upsells-product__form .quantity,
.oc-upsells-product__form .quantity-wraper,
.oc-upsells-product__form .quantity-wraper .input,
.oc-upsells-product__form .qty-input,
.oc-upsells-product__form [class*="quantity-input"] {
	position: static !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
}

/* The theme's pill keeps its border/radius; give it sane inner spacing. */
.oc-upsells-product__form .quantity-wraper {
	padding: 6px 16px !important;
}

.oc-upsells-product__form .quantity input,
.oc-upsells-product__form .quantity span,
.oc-upsells-product__form .quantity-wraper input,
.oc-upsells-product__form .quantity-wraper span {
	position: static !important;
	float: none !important;
	transform: none !important;
}

.oc-upsells-product__form input.qty,
.oc-upsells-product__form input.ocwsu-qty {
	width: 56px !important;
	height: auto !important;
	text-align: center !important;
	margin: 0 !important;
}

.oc-upsells-product__form .quantity-btn,
.oc-upsells-product__form .ocwsu-quantity-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 28px;
	min-height: 28px;
	cursor: pointer;
	font-size: 18px;
	user-select: none;
}

.oc-upsells-product__form .quantity .unit,
.oc-upsells-product__form .quantity-wraper .unit {
	font-size: 13px;
	color: #666;
}

/* Some weight plugins absolutely-position the unit label with a high
   specificity rule — pin it back into the row. */
.oc-upsells-product__form .quantity-wraper .quantity .unit,
.oc-upsells-product__form .qty-input .quantity .unit,
.oc-upsells-product__form .quantity .unit {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	margin: 0 !important;
}

.oc-upsells-loading {
	width: 34px;
	height: 34px;
	margin: 30px auto;
	border: 3px solid #ddd;
	border-top-color: var(--color-primary, #1d1d1d);
	border-radius: 50%;
	animation: oc-upsells-spin 0.7s linear infinite;
}

@keyframes oc-upsells-spin {
	to { transform: rotate(360deg); }
}

body.oc-upsells-modal-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * Mobile: popups open as a bottom sheet
 * ---------------------------------------------------------------- */

@media (max-width: 768px) {
	.oc-upsells-modal__box {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		transform: none;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		border-radius: 18px 18px 0 0;
		max-height: 86vh;
		padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
		animation: oc-upsells-sheet-up 0.28s ease;
	}

	.oc-upsells-modal__body .oc-upsells-track {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-block-end: 6px;
	}

	.oc-upsells-modal__body .oc-upsells-card {
		flex: 0 0 138px;
		scroll-snap-align: start;
	}

	/* Quick product view stacks: image banner on top, details below */
	.oc-upsells-product {
		flex-direction: column;
		gap: 14px;
	}

	.oc-upsells-product__media {
		order: -1;
	}

	.oc-upsells-product__media img {
		min-height: 0;
		height: 210px !important;
	}

	.oc-upsells-product__details {
		padding-block: 0;
	}

	.oc-upsells-product__title {
		font-size: 19px;
	}

	.oc-upsells-product__form .variations select {
		width: 100%;
		min-width: 0;
	}

	.oc-upsells-product__form .woocommerce-variation-add-to-cart {
		justify-content: center;
	}

	.oc-upsells-product__form .single_add_to_cart_button {
		flex: 1 1 auto;
		text-align: center;
	}
}

@keyframes oc-upsells-sheet-up {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}