/**
 * WapuOS — Ventas al mayoreo · composición storefront.
 * WTDS conserva ProductCard, media y QuantityStepper. Este archivo sólo
 * pinta la tabla de precios propia del dominio y su reflow contextual.
 */

.wapu-b2b-front-table {
	--wapu-b2b-border: var(--wtds-separator-soft, rgba(17, 24, 39, .09));
	--wapu-b2b-border-soft: var(--wtds-fill-4, rgba(17, 24, 39, .07));
	--wapu-b2b-muted: var(--wtds-ink-3, rgba(60, 60, 67, .64));
	--wapu-b2b-ok: var(--wtds-success, #148c43);
	--wapu-b2b-warn: var(--wtds-warning, #b94716);
	color: var(--ds-ink, #111827);
	container-name: wapu-b2b-pricing;
	container-type: inline-size;
	font-family: var(--ds-font-text, inherit);
	margin-block-end: .75rem;
}

.wapu-b2b-product-active .wapu-single__price {
	display: none !important;
}

.wapu-b2b-front-table__head {
	align-items: center;
	display: flex;
	gap: .625rem;
	justify-content: space-between;
	padding-block-end: .75rem;
}

.wapu-b2b-front-table__title {
	display: flex;
	flex-direction: column;
	gap: .1875rem;
	min-width: 0;
}

.wapu-b2b-front-table__title span {
	color: var(--wapu-b2b-muted);
	display: block;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.2;
}

.wapu-b2b-front-table__title strong {
	color: var(--ds-ink, #111827);
	font-family: var(--ds-font-display, inherit);
	font-size: clamp(.9375rem, .9rem + .2cqi, 1rem);
	font-weight: 700;
	line-height: 1.2;
}

.wapu-b2b-front-table__pack {
	align-items: center;
	background: var(--wtds-fill-3, rgba(17, 24, 39, .04));
	border: var(--wtds-border-thin, 1px) solid var(--wapu-b2b-border);
	border-radius: var(--wtds-r-pill, 999rem);
	color: var(--wtds-ink-2, rgba(17, 24, 39, .68));
	display: inline-flex;
	font-size: .75rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	min-height: 1.75rem;
	padding-inline: .625rem;
	white-space: nowrap;
}

.wapu-b2b-front-table__tiers {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	position: relative;
}

.wapu-b2b-tier {
	align-items: center;
	background: var(--wtds-surface-subtle, rgba(250, 250, 251, .92));
	border: var(--wtds-border-thin, 1px) solid var(--wapu-b2b-border);
	border-radius: var(--wtds-r-md, .5rem);
	display: grid;
	gap: .875rem;
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: 3.875rem;
	overflow: hidden;
	padding: .8125rem .9375rem .8125rem 1rem;
	position: relative;
	transition: background-color .28s ease, border-color .28s ease, color .28s ease, opacity .22s ease, transform .28s cubic-bezier(.2, .78, .24, 1);
}

.wapu-b2b-tier[role="button"] {
	cursor: pointer;
}

.wapu-b2b-tier[role="button"]:focus-visible {
	box-shadow: 0 0 0 .1875rem var(--wtds-focus-ring, rgba(20, 140, 67, .18));
	outline: .125rem solid var(--wtds-focus, rgba(20, 140, 67, .7));
	outline-offset: .125rem;
}

@media (hover: hover) {
	.wapu-b2b-tier[role="button"]:hover {
		background: var(--wtds-surface, #fff);
		border-color: var(--wtds-separator, rgba(17, 24, 39, .14));
	}
}

.wapu-b2b-tier.is-base {
	border-color: var(--wapu-b2b-border-soft);
}

.wapu-b2b-tier.is-current {
	background: linear-gradient(90deg, var(--wtds-success-soft, rgba(20, 140, 67, .115)), var(--wtds-surface, rgba(255, 255, 255, .98)));
	border-color: var(--wtds-success-border, rgba(20, 140, 67, .58));
}

.wapu-b2b-tier.is-switching::after {
	animation: wapu-b2b-tier-sweep .52s cubic-bezier(.22, .72, .2, 1) both;
	background: linear-gradient(90deg, transparent, var(--wtds-success-soft, rgba(20, 140, 67, .14)), transparent);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(-115%);
}

.wapu-b2b-tier > * {
	position: relative;
	z-index: 1;
}

.wapu-b2b-tier.is-switching--down > * {
	animation: wapu-b2b-content-enter-down .38s cubic-bezier(.2, .78, .24, 1) both;
}

.wapu-b2b-tier.is-switching--up > * {
	animation: wapu-b2b-content-enter-up .38s cubic-bezier(.2, .78, .24, 1) both;
}

.wapu-b2b-tier.is-leaving--down > * {
	animation: wapu-b2b-content-leave-down .26s cubic-bezier(.4, 0, .2, 1) both;
}

.wapu-b2b-tier.is-leaving--up > * {
	animation: wapu-b2b-content-leave-up .26s cubic-bezier(.4, 0, .2, 1) both;
}

.wapu-b2b-tier__qty,
.wapu-b2b-tier__price {
	align-items: baseline;
	display: inline-flex;
	gap: .25rem;
	min-width: 0;
}

.wapu-b2b-tier__price span,
.wapu-b2b-tier__note,
.wapu-b2b-card-min {
	font-size: .75rem;
}

.wapu-b2b-tier__price span,
.wapu-b2b-tier__note {
	color: var(--wapu-b2b-muted);
	font-weight: 600;
	line-height: 1.15;
}

.wapu-b2b-tier__qty strong,
.wapu-b2b-tier__price strong {
	color: var(--ds-ink, #111827);
	font-family: var(--ds-font-display, inherit);
	font-weight: 700;
	line-height: 1.1;
}

.wapu-b2b-tier__qty strong {
	font-size: .9375rem;
}

.wapu-b2b-tier__price strong {
	font-size: clamp(.90625rem, .88rem + .16cqi, .96875rem);
	white-space: nowrap;
}

.wapu-b2b-tier.is-current .wapu-b2b-tier__qty strong,
.wapu-b2b-tier__note--saving {
	color: var(--wapu-b2b-ok);
}

.wapu-b2b-tier__main,
.wapu-b2b-tier__side {
	display: flex;
	flex-direction: column;
	gap: .3125rem;
	min-width: 0;
}

.wapu-b2b-tier__side {
	align-items: flex-end;
	justify-content: center;
	min-width: 9.25rem;
	text-align: end;
}

.wapu-b2b-tier__note {
	font-weight: 700;
	max-width: 11.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wapu-b2b-tier.is-stock-limited {
	color: var(--wtds-ink-disabled, rgba(17, 24, 39, .42));
	cursor: not-allowed;
	opacity: .72;
}

.wapu-b2b-tier.is-stock-limited .wapu-b2b-tier__qty strong,
.wapu-b2b-tier.is-stock-limited .wapu-b2b-tier__price strong,
.wapu-b2b-tier.is-stock-limited .wapu-b2b-tier__price span {
	color: var(--wtds-ink-disabled, rgba(17, 24, 39, .42));
}

.wapu-b2b-tier__note--stock {
	color: var(--wapu-b2b-warn);
	max-width: none;
}

/* El stepper dinámico consume la familia WTDS .wapu-quantity*. B2B sólo
 * resuelve su encaje dentro del selector de cantidad del producto. */
.wapu-single__qty-select-wrap:has(.wapu-b2b-qty-stepper) {
	padding: 0;
}

.wapu-single__qty-select-wrap:has(.wapu-b2b-qty-stepper) .wapu-single__qty-chevron {
	display: none;
}

.wapu-b2b-qty-stepper {
	width: 100%;
}

.wapu-b2b-card-min {
	color: var(--wtds-ink-3, rgba(17, 24, 39, .55));
	display: block;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	margin-block: 0 .25rem;
	text-transform: uppercase;
}

@container wapu-b2b-pricing (max-width: 40rem) {
	.wapu-b2b-front-table__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.wapu-b2b-tier {
		grid-template-columns: minmax(0, 1fr);
		padding: .75rem;
	}

	.wapu-b2b-tier__side {
		align-items: flex-start;
		grid-column: 1;
		min-width: 0;
		text-align: start;
	}

	.wapu-b2b-tier__note {
		max-width: 100%;
	}
}

@media (pointer: coarse) {
	.wapu-b2b-tier[role="button"] {
		min-height: max(3.875rem, var(--wtds-touch-target, 2.75rem));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wapu-b2b-tier,
	.wapu-b2b-tier.is-switching,
	.wapu-b2b-tier.is-switching::after,
	.wapu-b2b-tier > * {
		animation: none !important;
		transition: none !important;
	}
}

@keyframes wapu-b2b-tier-sweep {
	0% { opacity: 0; transform: translateX(-115%); }
	24% { opacity: 1; }
	100% { opacity: 0; transform: translateX(115%); }
}

@keyframes wapu-b2b-content-enter-down {
	0% { opacity: .58; transform: translateY(-.625rem); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes wapu-b2b-content-enter-up {
	0% { opacity: .58; transform: translateY(.625rem); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes wapu-b2b-content-leave-down {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: .7; transform: translateY(.5rem); }
}

@keyframes wapu-b2b-content-leave-up {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: .7; transform: translateY(-.5rem); }
}