.custom-tiered-pricing-wrap {
	--tp-columns: 3;
	--tp-gap: 16px;
	--tp-card-bg: #15151f;
	--tp-card-border: #2a2a38;
	--tp-selected-bg: #2a1a40;
	--tp-selected-border: #a21caf;
	--tp-badge-bg: #ec4899;
	--tp-badge-text: #ffffff;
	--tp-savings-color: #4ade80;
	--tp-price-color: #ffffff;
	--tp-label-color: #e5e5e5;
	--tp-radius: 12px;
	--tp-price-size: 22px;
	--tp-price-weight: 700;
	--tp-label-size: 15px;
	--tp-label-weight: 600;
	--tp-per-unit-size: 13px;
	--tp-card-opacity: 1;
	--tp-text-align: center;
	--tp-card-align-items: center;

	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

.custom-tiered-pricing-wrap *,
.custom-tiered-pricing-wrap *::before,
.custom-tiered-pricing-wrap *::after {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

.tp-urgency-banner {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: #b91c1c;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
}

.tier-select {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.75em 1em;
	font-size: max(var(--tp-label-size), 16px);
	font-weight: var(--tp-label-weight);
	color: var(--tp-label-color);
	background: var(--tp-card-bg);
	border: 2px solid var(--tp-card-border);
	border-radius: var(--tp-radius);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e5e5e5'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23e5e5e5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 1em;
	padding-right: 2.5em;
	touch-action: manipulation;
}

.tier-select:focus {
	outline: none;
	border-color: var(--tp-selected-border);
}

.tp-grid {
	display: grid;
	grid-template-columns: repeat(var(--tp-columns), minmax(0, 1fr));
	gap: var(--tp-gap);
	width: 100%;
}

@media (max-width: 720px) {
	.tp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: min(var(--tp-gap), 10px);
	}

	.tier-card {
		padding: 0.85em 0.6em;
	}

	.tier-qty {
		font-size: calc(var(--tp-label-size) * 0.8);
	}

	.tier-total-price {
		font-size: calc(var(--tp-price-size) * 0.75);
	}

	.tier-unit-price {
		font-size: calc(var(--tp-per-unit-size) * 0.85);
	}

	.tier-savings {
		font-size: 0.7rem;
	}

	.tier-badge {
		font-size: 0.62rem;
		padding: 0.2em 0.6em;
	}
}

@media (max-width: 400px) {
	.tp-grid {
		gap: min(var(--tp-gap), 6px);
	}

	.tier-card {
		padding: 0.65em 0.4em;
	}

	.tier-qty {
		font-size: calc(var(--tp-label-size) * 0.7);
	}

	.tier-total-price {
		font-size: calc(var(--tp-price-size) * 0.65);
	}

	.tier-unit-price {
		font-size: calc(var(--tp-per-unit-size) * 0.75);
	}
}

/* Below ~340px (small older phones, or split-screen/webview), even 2
   columns gets too tight to tap reliably — stack into a single column
   at full size instead of shrinking text further. */
@media (max-width: 340px) {
	.tp-grid {
		grid-template-columns: 1fr;
	}

	.tier-card {
		padding: 0.9em 0.75em;
	}

	.tier-qty {
		font-size: var(--tp-label-size);
	}

	.tier-total-price {
		font-size: var(--tp-price-size);
	}

	.tier-unit-price {
		font-size: var(--tp-per-unit-size);
	}
}

.tier-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: var(--tp-card-align-items, center);
	justify-content: center;
	gap: 0.35em;
	text-align: var(--tp-text-align, center);
	padding: 1.25em 1em;
	/* Fallback for browsers without color-mix() support: solid background,
	   fully opaque, exactly like before this setting existed. */
	background: var(--tp-card-bg);
	background: color-mix(in srgb, var(--tp-card-bg) calc(var(--tp-card-opacity, 1) * 100%), transparent);
	border: 2px solid var(--tp-card-border);
	border-radius: var(--tp-radius);
	cursor: pointer;
	box-sizing: border-box;
	min-height: 44px;
	touch-action: manipulation;
	overflow-wrap: anywhere;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

/* Only lift on hover for devices that actually support hover (mouse/
   trackpad) — on touchscreens this rule otherwise "sticks" the transform
   after a tap since there's no real mouse-out event to reverse it. */
@media (hover: hover) and (pointer: fine) {
	.tier-card:hover {
		transform: translateY(-2px);
	}
}

.tier-card.is-selected {
	background: var(--tp-selected-bg);
	background: color-mix(in srgb, var(--tp-selected-bg) calc(var(--tp-card-opacity, 1) * 100%), transparent);
	border-color: var(--tp-selected-border);
}

.tier-badge {
	position: absolute;
	top: -0.65em;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.25em 0.8em;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
	background: var(--tp-badge-bg);
	color: var(--tp-badge-text);
}

.tier-qty {
	font-size: var(--tp-label-size);
	font-weight: var(--tp-label-weight);
	color: var(--tp-label-color);
}

.tier-total-price {
	font-size: var(--tp-price-size);
	font-weight: var(--tp-price-weight);
	color: var(--tp-price-color);
}

.tier-unit-price {
	font-size: var(--tp-per-unit-size);
	color: var(--tp-label-color);
	opacity: 0.75;
}

.tier-savings {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--tp-savings-color);
}

/* Shadow presets — chosen via the Gutenberg design panel, not per-card overrides */
.tp-shadow-none .tier-card {
	box-shadow: none;
}
.tp-shadow-soft .tier-card {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.tp-shadow-medium .tier-card {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.tp-shadow-strong .tier-card {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Custom quantity mode: open number input + live-calculated price */
.tier-custom-qty {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	padding: 16px;
	background: var(--tp-card-bg);
	border: 1px solid var(--tp-card-border);
	border-radius: var(--tp-radius);
}

.tier-custom-qty-main {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 220px;
	min-width: 200px;
}

.tier-custom-qty-breaks-panel {
	flex: 0 1 220px;
	margin: 2px 0 0;
	border-left: 1px solid var(--tp-card-border);
	padding-left: 16px;
}

.tier-custom-qty-breaks-heading {
	margin: 0 0 4px;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--tp-label-color);
	opacity: 0.8;
}

.tier-custom-qty-breaks {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--tp-label-color);
	opacity: 0.65;
}

.tier-custom-qty-breaks li {
	white-space: nowrap;
}

.tier-custom-qty-breaks-note {
	display: block;
	margin-top: 6px;
	font-size: 0.7rem;
	line-height: 1.4;
	color: var(--tp-label-color);
	opacity: 0.55;
	white-space: normal;
}

@media (max-width: 480px) {
	.tier-custom-qty-breaks-panel {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid var(--tp-card-border);
		padding-top: 8px;
	}

	.tier-custom-qty {
		gap: 14px;
		padding: 14px;
	}

	.tier-custom-qty-main {
		flex-basis: 100%;
		min-width: 0;
	}

	.tier-custom-qty-input {
		width: 100%;
	}

	.tier-custom-qty-summary {
		flex-wrap: wrap;
	}

	.tier-custom-qty-total {
		font-size: calc(var(--tp-price-size) * 0.9);
	}
}

.tier-custom-qty-label {
	font-size: var(--tp-label-size);
	font-weight: var(--tp-label-weight);
	color: var(--tp-label-color);
}

.tier-custom-qty-input {
	width: 120px;
	max-width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	font-size: max(1rem, 16px);
	border-radius: calc(var(--tp-radius) / 2);
	border: 1px solid var(--tp-card-border);
	background: transparent;
	color: var(--tp-label-color);
	touch-action: manipulation;
}

.tier-custom-qty-moq-note {
	font-size: var(--tp-per-unit-size);
	color: var(--tp-label-color);
	opacity: 0.75;
}

.tier-custom-qty-summary {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.tier-custom-qty-total {
	font-size: var(--tp-price-size);
	font-weight: var(--tp-price-weight);
	color: var(--tp-price-color);
}

.tier-custom-qty-unit {
	font-size: var(--tp-per-unit-size);
	color: var(--tp-label-color);
	opacity: 0.75;
}

.tier-custom-qty-error {
	font-size: 0.85rem;
	font-weight: 600;
	color: #f87171;
}

/* Shared Add to Cart button/status styles, used by the Tiered Pricing
   widget's own AJAX endpoint response handling and by the separate Quick
   Add to Cart block. Includes fallback values since the Quick Add block
   isn't nested inside .custom-tiered-pricing-wrap and so doesn't have that
   element's inline custom properties (--tp-badge-bg etc.) in scope. */
.tp-standalone-atc-button {
	padding: 0.7em 1.4em;
	font-size: var(--tp-label-size, 15px);
	font-weight: 700;
	color: var(--tp-badge-text, #ffffff);
	background: var(--tp-badge-bg, #ec4899);
	border: none;
	border-radius: var(--tp-radius, 12px);
	cursor: pointer;
	min-height: 44px;
	touch-action: manipulation;
	transition: opacity 0.15s ease, transform 0.1s ease;
}

.tp-standalone-atc-button:hover {
	opacity: 0.9;
}

.tp-standalone-atc-button:active {
	transform: scale(0.98);
}

.tp-standalone-atc-button:disabled {
	opacity: 0.6;
	cursor: default;
}

.tp-standalone-atc-status {
	font-size: 0.9rem;
	font-weight: 600;
}

.tp-standalone-atc-status.tp-atc-success {
	color: var(--tp-savings-color, #4ade80);
}

.tp-standalone-atc-status.tp-atc-error {
	color: #f87171;
}

/* Quick Add to Cart block — a standalone button for a specific product,
   meant to be placed anywhere with no surrounding WooCommerce cart form
   (e.g. a homepage lineup of several products). Colors/radius come from
   the block's own editor settings via these custom properties, set inline
   per block instance so each one can be themed independently. */
.tp-quick-add-block {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tp-quick-add-block .tp-quick-add-button {
	background: var(--tp-qa-bg, #ec4899);
	color: var(--tp-qa-text, #ffffff);
	border-radius: var(--tp-qa-radius, 12px);
}