/* Fonsi Upsell Accesorios — frontend styles.
 * RC16: full clean rewrite of the TSA card CSS. Single source of truth.
 * Contexts: product (accordion + label rows), cart & checkout (card grid).
 * ------------------------------------------------------------------ */

/* ---- Wrapper + design tokens (set/overridden inline per settings) ---- */
.tsa-upsell {
	--tsa-primary: #ff6600;
	--tsa-secondary: #f97316;
	--tsa-button: #ff6600;
	--tsa-hover: #e65c00;
	--tsa-text: #1f2937;
	--tsa-border: #ececf1;
	--tsa-radius: 14px;
	--tsa-btn-radius: 999px;
	--tsa-gap: 12px;
	--tsa-pad: 14px;
	--tsa-block-margin: 18px;
	--tsa-card-min-h: 0px;
	--tsa-border-w: 1px;
	--tsa-shadow: 0 1px 2px rgba(0,0,0,.06);
	--tsa-max-width: none;
	--tsa-cols-desktop: 1;
	--tsa-cols-tablet: 1;
	--tsa-cols-mobile: 1;
	--tsa-muted: #6b7280;
	/* Image size vars are NOT declared here on purpose: declaring them on
	   .tsa-upsell would beat the saved values that css_vars_from_settings()
	   emits, so they live only as var() fallbacks at the usage sites. */

	margin: var(--tsa-block-margin) 0;
	max-width: var(--tsa-max-width);
	color: var(--tsa-text);
	font-size: 15px;
	line-height: 1.45;
	box-sizing: border-box;
}
.tsa-upsell *,
.tsa-upsell *::before,
.tsa-upsell *::after { box-sizing: border-box; }

/* ================================================================
   ACCORDION (product context). Body visibility is driven by the
   [hidden] attribute from JS, so no display rules are needed here.
   ================================================================ */
.tsa-accordion-header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	background: #fff;
	border: var(--tsa-border-w) solid var(--tsa-border);
	border-left: 4px solid var(--tsa-primary);
	border-radius: var(--tsa-radius);
	cursor: pointer;
	text-align: left;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.tsa-accordion-header:hover { box-shadow: var(--tsa-shadow); }
.tsa-accordion-titles { display: flex; flex-direction: column; gap: 2px; }
.tsa-title { font-weight: 700; font-size: 15px; }
.tsa-subtitle { font-size: 13px; color: var(--tsa-muted); }

.tsa-accordion-chevron {
	width: 12px; height: 12px;
	border-right: 2px solid var(--tsa-primary);
	border-bottom: 2px solid var(--tsa-primary);
	transform: rotate(45deg);
	transition: transform .25s ease;
	flex: 0 0 auto;
}
.tsa-upsell.is-open .tsa-accordion-chevron { transform: rotate(-135deg); }

.tsa-upsell.is-highlighted .tsa-accordion-header {
	box-shadow: 0 0 0 3px rgba(255,102,0,.15);
	animation: tsa-pulse 2s ease-in-out 1;
}
@keyframes tsa-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255,102,0,.35); }
	70% { box-shadow: 0 0 0 10px rgba(255,102,0,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,102,0,0); }
}

.tsa-accordion-body { margin-top: 10px; }
.tsa-hint { margin: 10px 2px 0; font-size: 12px; color: var(--tsa-muted); }

/* Accessory list grid (product context uses configurable columns). */
.tsa-accessory-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--tsa-gap);
	grid-template-columns: repeat(var(--tsa-cols-mobile), minmax(0, 1fr));
}
@media (min-width: 600px) {
	.tsa-accessory-list { grid-template-columns: repeat(var(--tsa-cols-tablet), minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.tsa-accessory-list { grid-template-columns: repeat(var(--tsa-cols-desktop), minmax(0, 1fr)); }
}
/* Cart & checkout are always a single column list. */
.tsa-context-cart .tsa-accessory-list,
.tsa-context-checkout .tsa-accessory-list { grid-template-columns: 1fr; }

/* ================================================================
   ACCESSORY CARD (shared base for all contexts)
   ================================================================ */
.tsa-accessory {
	position: relative;
	list-style: none;
	margin: 0;
	background: #fff;
	border: var(--tsa-border-w) solid var(--tsa-border);
	border-radius: var(--tsa-radius);
}

/* Shared inner pieces. */
.tsa-accessory-image { flex: 0 0 auto; width: 56px; height: 56px; overflow: hidden; border-radius: calc(var(--tsa-radius) - 4px); }
.tsa-accessory-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.tsa-accessory-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tsa-accessory-name { font-weight: 600; color: var(--tsa-text); overflow-wrap: anywhere; }
.tsa-accessory-custom { font-size: 12px; color: var(--tsa-muted); }
.tsa-accessory-prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* Price emphasis (high specificity so Woodmart cannot shrink it). */
.tsa-upsell .tsa-price-special,
.tsa-upsell .tsa-price-special .woocommerce-Price-amount,
.tsa-upsell .tsa-price-special bdi {
	color: var(--tsa-primary) !important;
	font-weight: 800 !important;
	font-size: 1.18em !important;
	line-height: 1.2 !important;
}
.tsa-upsell .tsa-price-regular,
.tsa-upsell .tsa-price-regular .woocommerce-Price-amount,
.tsa-upsell .tsa-price-regular bdi {
	color: #8a8f98 !important;
	text-decoration: line-through !important;
	font-weight: 400 !important;
	font-size: .92em !important;
}
.tsa-upsell .tsa-accessory-saving,
.tsa-upsell .tsa-accessory-saving .woocommerce-Price-amount,
.tsa-upsell .tsa-accessory-saving bdi {
	color: #16a34a !important;
	font-weight: 700 !important;
	font-size: .9em !important;
}

/* ================================================================
   BUTTONS (base appearance + theme hardening)
   .tsa-accessory-cta  = product (a visual span; label is clickable)
   .tsa-add-checkout    = cart/checkout (real button, may carry .button)
   ================================================================ */
.tsa-accessory-cta,
.tsa-add-checkout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tsa-button);
	color: #fff;
	border: none;
	border-radius: var(--tsa-btn-radius);
	padding: 11px 18px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}
.tsa-accessory-cta { pointer-events: none; }
.tsa-add-checkout:hover { background: var(--tsa-hover); }
.tsa-add-checkout:active { transform: scale(.97); }
.tsa-add-checkout.is-added { background: #16a34a; }

/* Beat Woodmart/XStore .button styles on our button. */
.tsa-upsell button.tsa-add-checkout,
.woocommerce .tsa-upsell button.tsa-add-checkout,
.woocommerce .tsa-upsell .button.tsa-add-checkout {
	background: var(--tsa-button) !important;
	color: #fff !important;
	border: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	min-height: 0 !important;
	box-shadow: none !important;
}
.tsa-upsell button.tsa-add-checkout:hover,
.woocommerce .tsa-upsell button.tsa-add-checkout:hover { background: var(--tsa-hover) !important; }

/* Beat Woodmart button styling on the accordion header (product). */
.tsa-upsell button.tsa-accordion-header,
.woocommerce .tsa-upsell button.tsa-accordion-header {
	background: #fff !important;
	color: var(--tsa-text) !important;
	border: var(--tsa-border-w) solid var(--tsa-border) !important;
	border-left: 4px solid var(--tsa-primary) !important;
	border-radius: var(--tsa-radius) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	min-height: 0 !important;
	height: auto !important;
	text-align: left !important;
	font-weight: 700 !important;
}
.tsa-style-premium button.tsa-accordion-header,
.woocommerce .tsa-style-premium button.tsa-accordion-header {
	background: linear-gradient(180deg, #fff, #fcfcfd) !important;
}

/* ================================================================
   PRODUCT CONTEXT card layout ([checkbox] image info cta in a label)
   ================================================================ */
.tsa-accessory-label {
	display: flex;
	align-items: center;
	gap: var(--tsa-gap);
	padding: var(--tsa-pad);
	cursor: pointer;
}
.tsa-accessory-check { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--tsa-primary); }
.tsa-context-product .tsa-accessory-info { flex: 1 1 auto; }
.tsa-context-product .tsa-accessory-cta { flex: 0 0 auto; }
@media (min-width: 769px) {
	.tsa-context-product .tsa-accessory-cta { margin-left: auto; }
}

/* Keep the product block full width even inside a flex form.cart. */
.woocommerce div.product form.cart .tsa-upsell.tsa-context-product,
.woocommerce .tsa-upsell.tsa-context-product,
.tsa-upsell.tsa-context-product {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	float: none !important;
	clear: both !important;
	box-sizing: border-box;
}

/* ================================================================
   CART & CHECKOUT container
   ================================================================ */
.tsa-context-cart,
.tsa-context-checkout {
	border: var(--tsa-border-w) solid var(--tsa-border);
	border-radius: var(--tsa-radius);
	padding: 16px;
	background: #fff;
	box-shadow: var(--tsa-shadow);
	max-width: 100%;
	box-sizing: border-box;
}
.tsa-upsell.tsa-context-cart { margin: 18px 0 28px; }
.tsa-checkout-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; }

/* Checkout desktop: keep it full width inside its review column. */
.woocommerce-checkout .tsa-upsell.tsa-context-checkout,
#order_review .tsa-upsell.tsa-context-checkout,
.woocommerce-checkout-review-order .tsa-upsell.tsa-context-checkout {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
}

/* ================================================================
   CART & CHECKOUT CARD LAYOUT — SEPARATE per context.
   Checkout keeps its grid (works well). Cart has its own flex rules
   with .woocommerce-cart high specificity to beat Woodmart.
   Card markup: [.tsa-accessory-image] [.tsa-accessory-info] [.tsa-add-checkout]
   ================================================================ */

/* -------------------- CHECKOUT DESKTOP ONLY (>=769px) -------------------- */
@media (min-width: 769px) {
	.tsa-upsell.tsa-context-checkout .tsa-accessory {
		display: grid;
		grid-template-columns: var(--tsa-image-desktop, 72px) minmax(0, 1fr) auto;
		align-items: center;
		gap: 16px;
		padding: 12px 14px;
	}
	.tsa-upsell.tsa-context-checkout .tsa-accessory-image {
		grid-column: 1; margin: 0; width: var(--tsa-image-desktop, 72px); height: var(--tsa-image-desktop, 72px);
	}
	.tsa-upsell.tsa-context-checkout .tsa-accessory-info {
		grid-column: 2; display: flex; flex-direction: column;
		align-items: flex-start; text-align: left; gap: 4px; min-width: 0;
	}
	.tsa-upsell.tsa-context-checkout .tsa-accessory-prices { justify-content: flex-start; }
	.tsa-upsell.tsa-context-checkout .tsa-add-checkout,
	.tsa-upsell.tsa-context-checkout .button.tsa-add-checkout {
		grid-column: 3; justify-self: end;
		width: auto !important; min-width: 170px !important; max-width: 240px !important;
		margin: 0 !important; height: auto !important; min-height: 0 !important;
		padding: 12px 18px !important; white-space: nowrap !important;
		position: static !important; transform: none !important; right: auto !important;
	}
}

/* -------------------- CHECKOUT MOBILE ONLY (<=768px) -------------------- */
@media (max-width: 768px) {
	.tsa-upsell.tsa-context-checkout .tsa-accessory {
		display: flex !important; flex-direction: column !important;
		align-items: center !important; text-align: center !important;
		gap: 8px !important; padding: 12px !important;
		width: 100% !important; max-width: 100% !important; overflow: hidden !important;
	}
	.tsa-upsell.tsa-context-checkout .tsa-accessory-image {
		margin: 0 auto !important; float: none !important; width: var(--tsa-image-mobile, 80px) !important; height: var(--tsa-image-mobile, 80px) !important;
	}
	.tsa-upsell.tsa-context-checkout .tsa-accessory-info {
		width: 100% !important; min-width: 0 !important;
		align-items: center !important; text-align: center !important; gap: 2px !important;
	}
	.tsa-upsell.tsa-context-checkout .tsa-accessory-prices { justify-content: center !important; }
	.tsa-upsell.tsa-context-checkout .tsa-add-checkout,
	.tsa-upsell.tsa-context-checkout .button.tsa-add-checkout {
		display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important;
		margin: 8px 0 0 0 !important; height: auto !important; min-height: 0 !important;
		padding: 11px 16px !important; border-radius: var(--tsa-btn-radius) !important;
		white-space: normal !important; position: static !important; transform: none !important;
		right: auto !important; left: auto !important; float: none !important;
	}
}

/* -------------------- CART DESKTOP ONLY (>=769px) -------------------- */
@media (min-width: 769px) {
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory,
	.tsa-upsell.tsa-context-cart .tsa-accessory {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 18px !important;
		min-height: 96px !important;
		padding: 16px 20px !important;
	}
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory-image,
	.tsa-upsell.tsa-context-cart .tsa-accessory-image {
		flex: 0 0 var(--tsa-image-desktop, 72px) !important;
		width: var(--tsa-image-desktop, 72px) !important;
		max-width: var(--tsa-image-desktop, 72px) !important;
		height: var(--tsa-image-desktop, 72px) !important;
		margin: 0 !important;
	}
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory-info,
	.tsa-upsell.tsa-context-cart .tsa-accessory-info {
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		text-align: left !important;
		gap: 4px !important;
		min-width: 0 !important;
	}
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory-name,
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory-prices,
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory-saving,
	.tsa-upsell.tsa-context-cart .tsa-accessory-name,
	.tsa-upsell.tsa-context-cart .tsa-accessory-prices,
	.tsa-upsell.tsa-context-cart .tsa-accessory-saving {
		text-align: left !important;
		margin: 0 !important;
	}
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory-prices,
	.tsa-upsell.tsa-context-cart .tsa-accessory-prices { justify-content: flex-start !important; }
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-add-checkout,
	.woocommerce-cart .tsa-upsell.tsa-context-cart .button.tsa-add-checkout,
	.tsa-upsell.tsa-context-cart .tsa-add-checkout,
	.tsa-upsell.tsa-context-cart .button.tsa-add-checkout {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 180px !important;
		max-width: 240px !important;
		margin: 0 0 0 auto !important;
		align-self: center !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 12px 18px !important;
		white-space: nowrap !important;
		position: static !important;
		transform: none !important;
		right: auto !important;
	}
}

/* -------------------- CART MOBILE ONLY (<=768px) -------------------- */
@media (max-width: 768px) {
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory,
	.tsa-upsell.tsa-context-cart .tsa-accessory {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 6px !important;
		min-height: 0 !important;
		padding: 16px !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory-image,
	.tsa-upsell.tsa-context-cart .tsa-accessory-image {
		margin: 0 auto 4px auto !important;
		float: none !important;
		width: var(--tsa-image-mobile, 80px) !important;
		height: var(--tsa-image-mobile, 80px) !important;
		flex: 0 0 auto !important;
	}
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory-info,
	.tsa-upsell.tsa-context-cart .tsa-accessory-info {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 4px !important;
		width: 100% !important;
		min-width: 0 !important;
	}
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory-prices,
	.tsa-upsell.tsa-context-cart .tsa-accessory-prices { justify-content: center !important; }
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-add-checkout,
	.woocommerce-cart .tsa-upsell.tsa-context-cart .button.tsa-add-checkout,
	.tsa-upsell.tsa-context-cart .tsa-add-checkout,
	.tsa-upsell.tsa-context-cart .button.tsa-add-checkout {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 10px 0 0 0 !important;
		align-self: stretch !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 11px 16px !important;
		border-radius: var(--tsa-btn-radius) !important;
		white-space: normal !important;
		position: static !important;
		transform: none !important;
		right: auto !important;
		left: auto !important;
		float: none !important;
	}
}

/* -------------------- CART/CHECKOUT TABLET image size (769–1024px) -------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.tsa-upsell.tsa-context-checkout .tsa-accessory {
		grid-template-columns: var(--tsa-image-tablet, 72px) minmax(0, 1fr) auto;
	}
	.tsa-upsell.tsa-context-checkout .tsa-accessory-image {
		width: var(--tsa-image-tablet, 72px); height: var(--tsa-image-tablet, 72px);
	}
	.woocommerce-cart .tsa-upsell.tsa-context-cart .tsa-accessory-image,
	.tsa-upsell.tsa-context-cart .tsa-accessory-image {
		flex: 0 0 var(--tsa-image-tablet, 72px) !important;
		width: var(--tsa-image-tablet, 72px) !important;
		max-width: var(--tsa-image-tablet, 72px) !important;
		height: var(--tsa-image-tablet, 72px) !important;
	}
}

/* ================================================================
   CARD STYLES (visual variants set on the wrapper)
   ================================================================ */
.tsa-style-minimal .tsa-accessory { background: transparent; border-color: transparent; }
.tsa-style-minimal .tsa-accordion-header { box-shadow: none; }
.tsa-style-premium .tsa-accessory { box-shadow: var(--tsa-shadow); }
.tsa-style-premium .tsa-accessory.has-discount { background: linear-gradient(180deg, #fff, #fff8f2); }
.tsa-style-compact .tsa-accessory-label { padding: 8px 10px; gap: 8px; }
.tsa-style-compact .tsa-accessory-image,
.tsa-style-compact .tsa-accessory-image img { width: 40px; height: 40px; }
.tsa-style-compact .tsa-title { font-size: 14px; }

/* ================================================================
   PRODUCT MOBILE — restored known-good layout. Fully scoped to
   .tsa-context-product so it never affects cart or checkout.
   ================================================================ */
@media (max-width: 1024px) {
	body.single-product .tsa-upsell.tsa-context-product,
	.single-product div.product .tsa-upsell.tsa-context-product {
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		float: none !important;
		clear: both !important;
		box-sizing: border-box;
	}
	/* Premium accordion header on mobile (never a flat centered bar). */
	body.single-product .tsa-upsell.tsa-context-product button.tsa-accordion-header.tsa-accordion-header,
	.single-product .tsa-upsell.tsa-context-product button.tsa-accordion-header.tsa-accordion-header {
		display: flex !important;
		width: 100% !important;
		align-items: center !important;
		justify-content: space-between !important;
		text-align: left !important;
		gap: 12px !important;
		background: #fff !important;
		color: var(--tsa-text) !important;
		border: var(--tsa-border-w) solid var(--tsa-border) !important;
		border-left: 4px solid var(--tsa-primary) !important;
		border-radius: var(--tsa-radius) !important;
		box-shadow: var(--tsa-shadow) !important;
		padding: 14px 16px !important;
		min-height: 0 !important;
		height: auto !important;
		text-transform: none !important;
		letter-spacing: normal !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
	}
	body.single-product .tsa-style-premium.tsa-context-product button.tsa-accordion-header.tsa-accordion-header,
	.single-product .tsa-style-premium.tsa-context-product button.tsa-accordion-header.tsa-accordion-header {
		background: linear-gradient(180deg, #fff, #fcfcfd) !important;
	}
	body.single-product .tsa-upsell.tsa-context-product .tsa-accordion-titles,
	.single-product .tsa-upsell.tsa-context-product .tsa-accordion-titles {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		text-align: left !important;
	}
	/* Premium cards on mobile (product context only). */
	body.single-product .tsa-upsell.tsa-context-product li.tsa-accessory.tsa-accessory,
	.single-product .tsa-upsell.tsa-context-product li.tsa-accessory.tsa-accessory {
		display: block !important;
		width: 100% !important;
		background: #fff !important;
		border: var(--tsa-border-w) solid var(--tsa-border) !important;
		border-radius: var(--tsa-radius) !important;
		box-shadow: var(--tsa-shadow) !important;
		margin: 0 !important;
		box-sizing: border-box;
	}
}

/* Product label wraps and the CTA drops to its own full-width line. */
@media (max-width: 768px) {
	.tsa-context-product .tsa-accessory-label {
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 10px !important;
	}
	.tsa-context-product .tsa-accessory-info { flex: 1 1 60% !important; min-width: 0 !important; }
	.tsa-context-product .tsa-accessory-cta {
		flex: 1 1 100% !important;
		width: 100% !important;
		margin: 8px 0 0 0 !important;
		text-align: center !important;
		white-space: normal !important;
		box-sizing: border-box;
	}
}

/* ================================================================
   ACCESSORY NAME LINK (product, cart, checkout). Keeps the configured
   color; underline only on hover/focus; accessible focus ring.
   ================================================================ */
.tsa-upsell .tsa-accessory-link {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.tsa-upsell .tsa-accessory-link:hover,
.tsa-upsell .tsa-accessory-link:focus-visible {
	text-decoration: underline;
}
.tsa-upsell .tsa-accessory-link:focus-visible {
	outline: 2px solid var(--tsa-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ================================================================
   PRODUCT accordion image size (independent from cart/checkout).
   Applies only inside .tsa-context-product; never affects cart/checkout.
   ================================================================ */
.tsa-context-product .tsa-accessory-image {
	width: var(--tsa-product-image-desktop, 64px);
	height: var(--tsa-product-image-desktop, 64px);
	min-width: var(--tsa-product-image-desktop, 64px);
	max-width: var(--tsa-product-image-desktop, 64px);
	flex: 0 0 var(--tsa-product-image-desktop, 64px);
}
.tsa-context-product .tsa-accessory-image img {
	width: var(--tsa-product-image-desktop, 64px);
	height: var(--tsa-product-image-desktop, 64px);
}
@media (min-width: 769px) and (max-width: 1024px) {
	.tsa-context-product .tsa-accessory-image {
		width: var(--tsa-product-image-tablet, 64px);
		height: var(--tsa-product-image-tablet, 64px);
		min-width: var(--tsa-product-image-tablet, 64px);
		max-width: var(--tsa-product-image-tablet, 64px);
		flex: 0 0 var(--tsa-product-image-tablet, 64px);
	}
	.tsa-context-product .tsa-accessory-image img {
		width: var(--tsa-product-image-tablet, 64px);
		height: var(--tsa-product-image-tablet, 64px);
	}
}
@media (max-width: 768px) {
	.tsa-context-product .tsa-accessory-image {
		width: var(--tsa-product-image-mobile, 72px);
		height: var(--tsa-product-image-mobile, 72px);
		min-width: var(--tsa-product-image-mobile, 72px);
		max-width: var(--tsa-product-image-mobile, 72px);
		flex: 0 0 var(--tsa-product-image-mobile, 72px);
	}
	.tsa-context-product .tsa-accessory-image img {
		width: var(--tsa-product-image-mobile, 72px);
		height: var(--tsa-product-image-mobile, 72px);
	}
}

/* ================================================================
   TSA cart rows (.tsa-cart-item): hide the theme's short description /
   commercial preview and the theme's native (often wrong) saving badge.
   Real structured variations (dl.variation, .variation-*) are NEVER hidden.
   NOTE: extend the list below with the exact Woodmart classes reported by
   Diagnóstico → "Exportar HTML + CSS del bloque" if any preview survives.
   ================================================================ */
.tsa-cart-item .product-short-description,
.tsa-cart-item .cart-info .product-short-description,
.tsa-cart-item .woocommerce-product-details__short-description,
.tsa-cart-item .short-description,
.tsa-cart-item .product-excerpt,
.tsa-cart-item .wd-product-cats,
.tsa-cart-item .wd-product-brands,
.tsa-cart-item .wd-entities-title + .wd-product-cats,
.tsa-cart-item .wd-cart-product-info .description,
.tsa-cart-item .wd-product-desc,
.tsa-cart-item .cart-item-desc,
.tsa-cart-item .product-meta-description {
	display: none !important;
}
/* Native sale/saving badges inside TSA rows only (never normal products). */
.tsa-price-overridden .wd-product-savings,
.tsa-price-overridden .wd-save-amount,
.tsa-price-overridden .wd-badge-save,
.tsa-price-overridden .product-labels,
.tsa-price-overridden .wd-badge.onsale,
.tsa-price-overridden .onsale {
	display: none !important;
}
/* ---- WooCommerce Cart BLOCKS rows (KukirinSpain) ----
   The row gets .tsa-cart-item via the cartItemClass filter (assets/js/blocks.js).
   Hide the truncated commercial description and the native sale badge (which is
   computed against the inflated regular price) ONLY on TSA rows. Product name,
   real variation data and quantity are never hidden. */
.wc-block-cart-items__row.tsa-cart-item .wc-block-components-product-metadata-description,
tr.wc-block-cart-items__row.tsa-cart-item .wc-block-components-product-metadata-description,
tr.wc-block-cart-items__row.tsa-cart-item .wc-block-components-product-metadata-description > p,
.wc-block-cart-items__row.tsa-cart-item .wc-block-components-product-metadata__description,
.tsa-cart-item .wc-block-components-product-metadata-description,
.tsa-cart-item .wc-block-components-product-metadata-description > p {
	display: none !important;
}
.wc-block-cart-items__row.tsa-cart-item .wc-block-components-sale-badge,
tr.wc-block-cart-items__row.tsa-cart-item .wc-block-components-sale-badge,
tr.wc-block-cart-items__row.tsa-cart-item .wc-block-components-product-badge.wc-block-components-sale-badge,
.tsa-cart-item .wc-block-components-product-badge.wc-block-components-sale-badge,
.tsa-cart-item .wc-block-components-sale-badge {
	display: none !important;
}

/* The plugin's own real saving on the cart line. */
.tsa-cart-saving {
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
}
/* Force the configured saving colour: the classic cart would otherwise inherit
   the orange of the subtotal. Applies ONLY to the TSA saving label, never to the
   price itself. */
.tsa-cart-saving,
.tsa-cart-saving .woocommerce-Price-amount,
.tsa-cart-saving bdi {
	color: var(--tsa-saving-color, #16a34a) !important;
	font-weight: 700;
}

/* RC24.4: the TSA saving lives INSIDE the product zone (never in the subtotal
   cell) and is styled with a minimal, non-invasive rule. No display/flex/width/
   align-items overrides on the native Blocks price containers — those caused the
   "two columns" effect and shifted the subtotal. The subtotal column is untouched. */
.wc-block-cart-items__row.tsa-cart-item .tsa-blocks-cart-saving {
	display: block !important;
	margin: 4px 0 6px !important;
	color: var(--tsa-saving-color, #16a34a) !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	white-space: nowrap;
}
.wc-block-cart-items__row.tsa-cart-item .tsa-blocks-cart-saving * {
	color: inherit !important;
}

/* RC24.6: Cart Blocks MOBILE only. Blocks renders a different price node on narrow
   viewports, built from WooCommerce's regular price (the inflated PVPR). On TSA rows
   we hide the EXACT node detected in JS (class applied to that node, never a generic
   selector) and render our own block from Store API data. Strictly scoped: TSA rows,
   ≤768px. Normal products and the desktop layout (RC24.4) are untouched. */
@media (max-width: 768px) {
	tr.wc-block-cart-items__row.tsa-cart-item .tsa-mobile-native-price-hidden,
	tr.tsa-cart-item .tsa-mobile-native-price-hidden {
		display: none !important;
	}
	/* Our mobile block carries its own saving line: never show both. */
	tr.wc-block-cart-items__row.tsa-cart-item .tsa-blocks-cart-saving {
		display: none !important;
	}
	tr.wc-block-cart-items__row.tsa-cart-item .tsa-blocks-mobile-prices {
		display: block;
		margin: 2px 0 6px;
	}
	tr.wc-block-cart-items__row.tsa-cart-item .tsa-blocks-mobile-price-row {
		display: block;
		line-height: 1.35;
	}
	tr.wc-block-cart-items__row.tsa-cart-item .tsa-blocks-mobile-base-price {
		text-decoration: line-through;
		color: #8a8a8a;
		font-size: 13px;
		margin-right: 8px;
	}
	tr.wc-block-cart-items__row.tsa-cart-item .tsa-blocks-mobile-special-price {
		text-decoration: none;
		background: none;
		color: var(--tsa-primary, #ff6600);
		font-weight: 700;
		font-size: 14px;
	}
	tr.wc-block-cart-items__row.tsa-cart-item .tsa-blocks-mobile-saving {
		display: block;
		margin-top: 3px;
		color: var(--tsa-saving-color, #16a34a) !important;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.3;
	}
}
/* Safety net: our mobile structure never shows on desktop (RC24.4 unchanged). */
@media (min-width: 769px) {
	.tsa-blocks-mobile-prices {
		display: none !important;
	}
}

/* RC24.7: CHECKOUT MOBILE only — the saving was rendering glued to the price
   ("9,99 €Ahorras 4,96 €") because it is appended to the subtotal HTML. Give it its
   own line. Desktop checkout is untouched: this rule only exists below 768px. */
@media (max-width: 768px) {
	.tsa-checkout-saving {
		display: block;
		width: 100%;
		margin-top: 4px;
		color: var(--tsa-saving-color, #16a34a) !important;
		line-height: 1.3;
		font-weight: 700;
	}
	.tsa-checkout-saving .woocommerce-Price-amount,
	.tsa-checkout-saving bdi {
		color: inherit !important;
	}
}

/* RC25: CLASSIC cart/checkout saving (Smartic, Woodmart, any classic theme).
   The saving is appended after the price node, but inline themes rendered it glued
   to the amount ("9,99 €Poupa 7,00 €"). Force it onto its own line. Scoped to TSA
   rows on classic cart/checkout pages and driven by CLASSES only, so it works in
   ES/PT/FR without depending on the label text ("Ahorras"/"Poupa"/"Économisez"). */
body.woocommerce-cart .tsa-cart-item .tsa-classic-saving,
body.woocommerce-checkout .tsa-cart-item .tsa-classic-saving,
body.woocommerce-cart .tsa-classic-saving,
body.woocommerce-checkout .tsa-classic-saving {
	display: block;
	width: 100%;
	clear: both;
	margin-top: 4px;
	color: var(--tsa-saving-color, #16a34a) !important;
	font-weight: 600;
	line-height: 1.3;
	white-space: normal;
}
/* The amount inside our span must inherit the saving colour, never the price one. */
body.woocommerce-cart .tsa-classic-saving .woocommerce-Price-amount,
body.woocommerce-checkout .tsa-classic-saving .woocommerce-Price-amount,
body.woocommerce-cart .tsa-classic-saving bdi,
body.woocommerce-checkout .tsa-classic-saving bdi,
.tsa-classic-saving .tsa-classic-saving-amount,
.tsa-classic-saving .tsa-classic-saving-amount * {
	color: inherit !important;
	font-weight: inherit;
}

/* RC25: some themes (Smartic) collapse or clip custom blocks inside the product
   summary on mobile. Keep the product upsell visible without altering its design.
   Scoped to the single-product page and to our own block only. */
body.single-product .tsa-upsell.tsa-context-product {
	visibility: visible !important;
	opacity: 1 !important;
	max-height: none !important;
	overflow: visible !important;
	transform: none !important;
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */
.tsa-accordion-header:focus-visible,
.tsa-accessory-check:focus-visible,
.tsa-add-checkout:focus-visible,
.tsa-accessory-label:focus-within {
	outline: 3px solid var(--tsa-primary);
	outline-offset: 2px;
}
.tsa-sr-only {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
	.tsa-upsell *,
	.tsa-upsell *::before,
	.tsa-upsell *::after { transition: none !important; animation: none !important; }
}