.tgbt-wrap {
	--tg-accent: #C93A4A;
	--tg-accent-hover: #B33140;
	--tg-accent-soft: #FFF0F3;
	--tg-card-bg: #FFFFFF;
	--tg-card-hover: #DDFFE7;
	--tg-card-border: #F1D6DB;
	--tg-selected-card-bg: #DDFFE7;
	--tg-selected-border: #24C56D;
	--tg-accent-border: #FFD3DA;
	--tg-surface: #FFFFFF;
	--tg-surface-2: #F6F7FA;
	--tg-border: #DFE3EC;
	--tg-border-strong: #CBD2E0;
	--tg-text: #17213F;
	--tg-text-soft: #2C3658;
	--tg-muted: #8A92A6;
	--tg-success: #027A48;
	--tg-radius: 16px;
	--tg-radius-sm: 10px;
	--tg-radius-xs: 8px;
	--tg-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 22px rgba(16, 24, 40, 0.04);
	--tg-ring: 0 0 0 4px var(--tg-accent-soft);
	--tg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
	width: 100%;
	max-width: 100%;
	margin: 0 0 20px;
	clear: both;
	color: var(--tg-text);
	font-family: var(--tg-font);
}

.tgbt-wrap *,
.tgbt-wrap *::before,
.tgbt-wrap *::after {
	box-sizing: border-box;
}

.single-product form.cart.tgbt-cart-form {
	--tg-border: #DFE3EC;
	--tg-text: #17213F;
	--tg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
	margin-top: 14px;
	padding: 0 0 2px;
	font-family: var(--tg-font);
}

/* Locked 3-column grid — every card sits on the same row, always. Uniform
   1fr columns keep the cards identically sized on every product page. If a
   merchant configures more than 3 tiers the extras wrap to a second row,
   still equal-width. The compact card interior below is sized so 3 cards fit
   inside a typical ~500px WooCommerce product summary column without the
   label ever spilling out. */
.tgbt-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	align-items: stretch;
	margin-top: 0;
	padding-top: 0;
}

/* Horizontal "quick quantity selection" card — image row on the left, qty
   label on the right, pill badge floating above the top edge. Compact
   ~10% shorter than the previous chip layout; images sit directly on the
   card body (no tinted container), so the visual weight goes to the images
   themselves and the selected-state green fill fills the whole card. */
.tgbt-tier-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 62px;
	padding: 6px 10px;
	color: var(--tg-text);
	font-family: var(--tg-font);
	text-align: left;
	cursor: pointer;
	background: var(--tg-card-bg);
	border: 1.5px solid var(--tg-card-border);
	border-radius: 12px;
	box-shadow: none;
	transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
	appearance: none;
}

.tgbt-tier-card:hover {
	background: var(--tg-card-hover);
	border-color: var(--tg-card-border);
}

.tgbt-tier-card:focus-visible {
	outline: none;
	box-shadow: var(--tg-ring);
}

.tgbt-tier-card.is-selected {
	background: var(--tg-selected-card-bg);
	border-color: var(--tg-selected-border);
	box-shadow: none;
}

/* Badge — pill floating above the top edge of the card. Two semantic
   variants: green for savings, orange for "get one free". Base colour uses
   the merchant's accent so a card without either explicit variant still
   inherits the brand. */
.tgbt-tier-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 22px;
	padding: 3px 12px;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--tg-accent);
	border-radius: 999px;
	transform: translateX(-50%);
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.10);
}

.tgbt-tier-badge-save {
	background: #24C56D;
}

.tgbt-tier-badge-free {
	background: #F5A623;
}

/* Radio + price + savings still live in the DOM (accessible name, live JS
   price update) but are visually removed in the quick-selection layout. */
.tgbt-tier-radio,
.tgbt-tier-total,
.tgbt-tier-savings {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.tgbt-tier-label {
	flex: 1;
	min-width: 0;
	display: block;
	margin: 0;
	color: var(--tgbt-c-tier-label, #17213F);
	font-size: var(--tgbt-card-label-size, 13px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	/* Never let the label wrap or spill outside the card — narrow cards on a
	   theme with a tight product-summary column would otherwise push the text
	   past the right edge and behind the border. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Multi-image row — one thumbnail per unit in the tier ("3 Packs" renders
   three, "5 Packs" five). Images sit directly on the card body (no chip).
   Sized as small as still legible so three cards + 5-image stack + "5 Packs"
   label all fit in a ~155px-wide card (three cards across a 500px summary
   column). Tight 1px gap keeps the whole stack reading as one row. */
.tgbt-tier-images {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1px;
	flex-shrink: 0;
}

.tgbt-tier-image {
	display: block;
}

.tgbt-tier-image-copy {
	width: 18px;
	height: 18px;
	border-radius: 3px;
	object-fit: cover;
	background: transparent;
	flex: 0 0 auto;
}

.tgbt-tier-image-stack-1 .tgbt-tier-image-copy {
	width: 22px;
	height: 22px;
}

.tgbt-tier-image-stack-2 .tgbt-tier-image-copy,
.tgbt-tier-image-stack-3 .tgbt-tier-image-copy {
	width: 16px;
	height: 16px;
}

.tgbt-tier-image-stack-4 .tgbt-tier-image-copy,
.tgbt-tier-image-stack-5 .tgbt-tier-image-copy {
	width: 12px;
	height: 12px;
}

.tgbt-tier-images-placeholder {
	/* No chip — placeholder inherits the row layout above. */
}

.tgbt-tier-image-placeholder {
	position: relative;
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: 84px;
	height: 118px;
	margin-top: 4px;
	border-radius: 22px 22px 16px 16px;
	background: linear-gradient(180deg, #FFFFFF 0%, var(--tg-surface-2) 100%);
	border: 1px solid var(--tg-border);
	box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
}

.tgbt-tier-image-placeholder::before {
	position: absolute;
	top: -14px;
	left: 50%;
	width: 48px;
	height: 18px;
	content: "";
	background: var(--tg-accent);
	border-radius: 10px 10px 4px 4px;
	transform: translateX(-50%);
}

.tgbt-tier-image-placeholder span {
	width: 58px;
	height: 32px;
	margin-bottom: 28px;
	background: var(--tg-accent);
	border-radius: 6px;
	opacity: 0.88;
}

.tgbt-wrap.tgbt-no-images .tgbt-cards {
	gap: 16px;
}

/* No-images mode — the horizontal card just centres its label. Price and
   savings are still visually hidden via the base rules, matching the
   quick-selection look. */
.tgbt-wrap.tgbt-no-images .tgbt-tier-card {
	justify-content: center;
	min-height: 60px;
	padding: 14px 20px;
}

.tgbt-wrap.tgbt-no-images .tgbt-tier-label {
	text-align: center;
	font-size: 15px;
	letter-spacing: 0.02em;
}

.single-product form.cart.tgbt-cart-form .quantity.tgbt-quantity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	height: 58px;
	min-width: 176px;
	margin: 6px 0 0;
	padding: 0 18px;
	background: #FFFFFF;
	border: 1.5px solid var(--tg-border);
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(16, 24, 40, 0.04);
	order: 1;
}

.single-product form.cart.tgbt-cart-form .quantity.tgbt-quantity .qty {
	width: 66px !important;
	height: 54px;
	min-height: 54px;
	padding: 0 !important;
	color: var(--tg-text);
	font-family: var(--tg-font);
	font-size: 17px;
	font-weight: 850;
	text-align: center;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	appearance: textfield;
}

.single-product form.cart.tgbt-cart-form .quantity.tgbt-quantity .qty::-webkit-outer-spin-button,
.single-product form.cart.tgbt-cart-form .quantity.tgbt-quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

.single-product form.cart.tgbt-cart-form .single_add_to_cart_button,
.single-product form.cart.tgbt-cart-form button.single_add_to_cart_button {
	min-height: 58px;
	margin: 6px 0 0 !important;
	padding: 0 34px !important;
	color: #FFFFFF !important;
	font-family: var(--tg-font);
	font-size: 16px;
	font-weight: 850;
	line-height: 1;
	background: var(--tg-accent) !important;
	border: 1px solid var(--tg-accent) !important;
	border-radius: 999px !important;
	box-shadow: 0 12px 26px rgba(30, 42, 90, 0.18);
	order: 2;
}

.single-product form.cart.tgbt-cart-form .single_add_to_cart_button:hover,
.single-product form.cart.tgbt-cart-form button.single_add_to_cart_button:hover {
	background: var(--tg-accent-hover) !important;
	border-color: var(--tg-accent-hover) !important;
}

/* ------------------------------------------------------------------------ */
/* Variable products: full-width rows inside the flexed cart form.           */
/* The form becomes display:flex, and a <table> as a flex item shrink-wraps  */
/* to its content — which visually narrows the whole summary column. Forcing */
/* flex-basis:100% on the table and variation wrap restores the theme's      */
/* natural full-width layout.                                                */
/* ------------------------------------------------------------------------ */

.single-product form.cart.tgbt-cart-form table.variations {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
}

.single-product form.cart.tgbt-cart-form .single_variation_wrap {
	flex: 0 0 100%;
	width: 100%;
}

.single-product form.cart .tgbt-wrap {
	flex: 0 0 100%;
	min-width: 0;
}

.single-product form.cart.tgbt-cart-form .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
}

/* ------------------------------------------------------------------------ */
/* First-paint mirrors.                                                      */
/* frontend.js adds .tgbt-cart-form / .tgbt-quantity after DOM ready. These  */
/* :has() rules apply the exact same styling from the very first frame, so   */
/* the layout never visibly jumps on load. Kept as separate rules (not       */
/* comma-joined with the class selectors) so browsers without :has() drop    */
/* only these and fall back to the JS-class behavior.                        */
/* ------------------------------------------------------------------------ */

.single-product form.cart:has([data-tgbt]) {
	--tg-border: #DFE3EC;
	--tg-text: #17213F;
	--tg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
	margin-top: 14px;
	padding: 0 0 2px;
	font-family: var(--tg-font);
}

.single-product form.cart:has([data-tgbt]) table.variations {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
}

.single-product form.cart:has([data-tgbt]) .single_variation_wrap {
	flex: 0 0 100%;
	width: 100%;
}

.single-product form.cart:has([data-tgbt]) .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
}

.single-product form.cart:has([data-tgbt]) .quantity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	height: 58px;
	min-width: 176px;
	margin: 6px 0 0;
	padding: 0 18px;
	background: #FFFFFF;
	border: 1.5px solid var(--tg-border);
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(16, 24, 40, 0.04);
	order: 1;
}

.single-product form.cart:has([data-tgbt]) .quantity .qty {
	width: 66px !important;
	height: 54px;
	min-height: 54px;
	padding: 0 !important;
	color: var(--tg-text);
	font-family: var(--tg-font);
	font-size: 17px;
	font-weight: 850;
	text-align: center;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	appearance: textfield;
}

.single-product form.cart:has([data-tgbt]) .quantity .qty::-webkit-outer-spin-button,
.single-product form.cart:has([data-tgbt]) .quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

.single-product form.cart:has([data-tgbt]) .single_add_to_cart_button,
.single-product form.cart:has([data-tgbt]) button.single_add_to_cart_button {
	min-height: 58px;
	margin: 6px 0 0 !important;
	padding: 0 34px !important;
	color: #FFFFFF !important;
	font-family: var(--tg-font);
	font-size: 16px;
	font-weight: 850;
	line-height: 1;
	background: var(--tg-accent) !important;
	border: 1px solid var(--tg-accent) !important;
	border-radius: 999px !important;
	box-shadow: 0 12px 26px rgba(30, 42, 90, 0.18);
	order: 2;
}

.single-product form.cart:has([data-tgbt]) .single_add_to_cart_button:hover,
.single-product form.cart:has([data-tgbt]) button.single_add_to_cart_button:hover {
	background: var(--tg-accent-hover) !important;
	border-color: var(--tg-accent-hover) !important;
}

@media (max-width: 640px) {
	.tgbt-card-count-3 .tgbt-cards,
	.tgbt-cards {
		grid-template-columns: 1fr;
	}

	/* Stay horizontal on mobile — one card per row full-width, same chip +
	   label side-by-side layout as desktop, just wider. Keeps the tall
	   min-height off entirely so the card hugs its content. */
	.tgbt-tier-card {
		min-height: 72px;
	}

	.single-product form.cart.tgbt-cart-form .quantity.tgbt-quantity,
	.single-product form.cart.tgbt-cart-form .single_add_to_cart_button,
	.single-product form.cart.tgbt-cart-form button.single_add_to_cart_button {
		width: 100%;
	}

	.single-product form.cart:has([data-tgbt]) .quantity,
	.single-product form.cart:has([data-tgbt]) .single_add_to_cart_button,
	.single-product form.cart:has([data-tgbt]) button.single_add_to_cart_button {
		width: 100%;
	}
}

/* ------------------------------------------------------------------------ */
/* Adjustable dimensions — admin "Discount box & image size" section.        */
/* Only active when the wrap carries .tgbt-custom-dims (dim_enabled = yes),  */
/* so the stock layout is untouched until the merchant opts in. Sizes come   */
/* from inline --tgbt-* custom properties; fallbacks match the stock look.   */
/* ------------------------------------------------------------------------ */

.tgbt-wrap.tgbt-custom-dims .tgbt-cards {
	display: grid !important;
	/* Equal columns that fill the row: every box is the same width and the
	   columns line up perfectly on every wrap, so a lone box on the last row
	   sits flush-left under the first box (no drift), with one uniform gap. */
	grid-template-columns: repeat(var(--tgbt-cols, 3), minmax(0, 1fr)) !important;
	justify-content: stretch !important;
	justify-items: stretch !important;
	align-items: stretch !important;
	gap: 16px !important;
}

.tgbt-wrap.tgbt-custom-dims .tgbt-cards .tgbt-tier-card {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	justify-self: stretch !important;
	min-height: var(--tgbt-card-h, 210px) !important;
	padding: var(--tgbt-card-pad, 26px) !important;
	border-radius: var(--tgbt-card-radius, 16px) !important;
}

/* With "No images" there is nothing to fill the tall min-height, which left a
   big empty area under the price. Let those boxes hug their content instead —
   the Height slider becomes irrelevant and the Padding slider controls how
   compact they are. Grid stretch still keeps a row of boxes equal height. */
.tgbt-wrap.tgbt-custom-dims.tgbt-no-images .tgbt-cards .tgbt-tier-card {
	min-height: 0 !important;
}

/* Mobile: same equal-fill columns (default 2-up) + identical gap, so the grid
   stays aligned and evenly spaced exactly like the desktop view. */
@media (max-width: 640px) {
	.tgbt-wrap.tgbt-custom-dims .tgbt-cards {
		grid-template-columns: repeat(var(--tgbt-cols-mobile, 2), minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}

.tgbt-wrap.tgbt-custom-dims .tgbt-tier-image-wrap {
	min-height: auto !important;
	padding: var(--tgbt-img-pad, 6px) !important;
}

.tgbt-wrap.tgbt-custom-dims .tgbt-tier-image,
.tgbt-wrap.tgbt-custom-dims .tgbt-tier-image-stack .tgbt-tier-image-copy {
	max-width: var(--tgbt-img-w, 150px) !important;
	max-height: var(--tgbt-img-h, 130px) !important;
}

/* ------------------------------------------------------------------------ */
/* Theme compatibility.                                                      */
/* Some themes/page builders (e.g. Blocksy + Elementor) lay out the          */
/* .woocommerce-variation-add-to-cart area as a flex/grid row. Without this, */
/* the discount cards get squeezed into the same row as the quantity + Add   */
/* to cart button. These rules force the cards onto their own full-width row  */
/* at the top of that area, whatever layout the theme uses.                  */
/* ------------------------------------------------------------------------ */

.tgbt-wrap[data-tgbt] {
	/* Belt-and-braces to force the wrap onto its own row regardless of the
	   parent container's layout: flex row, flex column, grid, block, inline-
	   block — all should honour at least one of these declarations. Without
	   this, Elementor's WC Add-to-cart widget (and many block themes) put
	   the qty box + Add-to-cart button + our cards into a single flex row
	   and squish everything onto one visual line. */
	display: block !important;
	flex: 1 1 100% !important;
	flex-basis: 100% !important;
	min-width: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	grid-column: 1 / -1 !important; /* grid parents: span every column       */
	float: none !important;
	clear: both !important;
	box-sizing: border-box !important;
}

/* Let common flex parents wrap so a full-width child pushes siblings onto
   their own row. Only touches classes that are actually flex; harmless
   otherwise. */
form.cart .woocommerce-variation-add-to-cart,
form.cart .single_variation_wrap,
form.cart,
.summary.entry-summary,
.summary,
.product .summary,
.elementor-widget-woocommerce-product-add-to-cart form.cart {
	flex-wrap: wrap !important;
}

/* Keep the quantity control and the Add to cart button together on one row
   (the row below the cards) — the flex-wrap that lets the cards take their own
   line must not also drop the button onto a separate line. The button grows to
   fill the rest of the row so it always sits beside the quantity. */
form.cart .woocommerce-variation-add-to-cart > .quantity,
form.cart .woocommerce-variation-add-to-cart > .e-atc-qty-button-holder {
	flex: 0 0 auto !important;
}

form.cart .woocommerce-variation-add-to-cart > .single_add_to_cart_button,
form.cart .woocommerce-variation-add-to-cart > button.single_add_to_cart_button {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	white-space: nowrap;
}

/* ------------------------------------------------------------------------ */
/* Per-variation groups (product-mode variable products).                    */
/* Each variation renders its own labelled tier-box group so the shopper     */
/* sees pricing for every strength up front. Groups stack vertically with    */
/* breathing room and a clear heading.                                       */
/* ------------------------------------------------------------------------ */

.tgbt-variation-groups {
	display: flex !important;
	flex-direction: column !important;
	gap: 22px !important;
	width: 100% !important;
	flex: 1 1 100% !important;
	grid-column: 1 / -1 !important;
	order: -1 !important;
	margin: 0 0 18px !important;
}

.tgbt-variation-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	width: 100% !important;
	transition: opacity 0.2s ease;
}

.tgbt-variation-group-heading {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	color: var(--tgbt-c-tier-label, #17213F) !important;
	letter-spacing: 0.01em;
}

/* When a variation is selected, only its group renders — every other group
   is fully hidden so the shopper sees exactly one set of boxes at a time. */
.tgbt-variation-group.tgbt-variation-hidden {
	display: none !important;
}

.tgbt-variation-group.tgbt-variation-active {
	opacity: 1;
}

/* Per-variation wraps sit inside .tgbt-variation-group, so undo the outer
   full-width push (that lives on the group instead) and let the wrap render
   at its natural block width inside the group. */
.tgbt-variation-group .tgbt-wrap.tgbt-wrap-per-variation {
	order: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

@media (max-width: 640px) {
	.tgbt-variation-groups {
		gap: 18px !important;
	}
	.tgbt-variation-group-heading {
		font-size: 15px !important;
	}
}