/* ---------------------------------------------------------------
   Tank Product Page — option tiles + product information
   Palette comes from the theme tokens (--tk-*) so nothing drifts.
   --------------------------------------------------------------- */

/* Hide the native select once tiles are drawn, but keep it in the DOM
   so WooCommerce's variation script keeps working. */
.variations_form select.tpp-native-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
}

.tpp-tiles {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px 10px;
	row-gap: 20px;
	margin: 4px 0 18px;
}

/* Outline Media Variations draws its own label swatches inside the same
   attribute row, which duplicated the size options under our tiles.
   Scoped to rows that actually contain tiles, so other attributes and
   other products keep their swatches. */
.tpp-tiles ~ .omv-swatches,
.omv-swatches:has(+ .tpp-tiles),
.omv-attr:has(> .tpp-tiles) > .omv-swatches {
	display: none !important;
}

/* ---------------------------------------------------------------
   Size notice — a standing caveat printed directly under the size
   tiles. Copy lives on WooCommerce > Tank product page; nothing here
   hard-codes the wording.
   --------------------------------------------------------------- */
.variations_form .tpp-size-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	box-sizing: border-box;
	margin: 10px 0 16px;
	padding: 12px 14px 13px 12px;
	border: 1px solid #e8c76a;
	border-radius: 10px;
	background: var(--tk-brown-600, #804201);
	color: #ffffff;
	font-family: var(--tk-font-body, inherit);
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}

.variations_form .tpp-size-notice__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--tk-brown-600, #804201);
	font-family: var(--tk-font-body, inherit);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.variations_form .tpp-size-notice__body {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.variations_form .tpp-size-notice__title {
	font-weight: 800;
	color: #ffffff;
}

.tpp-tile-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 104px;
	flex: 1 1 104px;
	max-width: 220px;
	padding-top: 10px;
}

.tpp-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 2px;
	min-height: 58px;
	box-sizing: border-box;
	overflow: visible;
	padding: 16px 10px 12px;
	border: 1px solid var(--tk-line, #e5e5e5);
	border-radius: 6px;
	background: #fff;
	color: var(--tk-brown-900, #2b1704);
	font-family: var(--tk-font-body, inherit);
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tpp-tile:hover:not(.is-unavailable) {
	border-color: var(--tk-brown-400, #b8702a);
}

.tpp-tile.is-selected {
	border: 2px solid var(--tk-brown-600, #804201);
	background: var(--tk-cream-2, #f4efe6);
	box-shadow: inset 0 0 0 1px rgba(128, 66, 1, 0.08);
}

.tpp-tile.is-unavailable {
	opacity: 0.38;
	cursor: not-allowed;
	text-decoration: line-through;
}

.tpp-tile__name {
	width: 100%;
	font-weight: 600;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.25;
	text-align: center;
	font-size: 13px;
}

.tpp-tile.has-badge .tpp-tile__name {
	margin-top: 2px;
}

.tpp-tile__badge {
	position: absolute;
	z-index: 3;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 7px;
	border-radius: 3px;
	background: var(--tk-logo-green, #acd48c);
	color: var(--tk-brown-900, #2b1704);
	font-family: var(--tk-font-body, inherit);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.tpp-tile__price {
	margin-top: 7px;
	text-align: center;
	font-family: var(--tk-font-body, inherit);
	font-size: 14px;
	font-weight: 600;
	color: var(--tk-brown-900, #2b1704);
}

/* ---------------------------------------------------------------
   Product information block (under add to cart)
   --------------------------------------------------------------- */

ul.tpp-info {
	list-style: none;
	margin: 22px 0 8px;
	padding: 18px 0 0;
	border-top: 1px solid var(--tk-line-soft, #efece7);
	display: flex;
	flex-direction: column;
	gap: 7px;
}

ul.tpp-info li {
	margin: 0;
	padding: 0;
	font-family: var(--tk-font-body, inherit);
	font-size: 15px;
	line-height: 1.5;
	color: var(--tk-ink, #2e2e2e);
}

ul.tpp-info .tpp-info__label {
	font-weight: 700;
	color: var(--tk-brown-900, #2b1704);
}

@media (max-width: 480px) {
	/* Uniform 3-up rows: a leftover tile keeps the same width instead of
	   stretching across the card. */
	.tpp-tile-item {
		flex: 0 0 calc(33.333% - 7px);
		max-width: calc(33.333% - 7px);
		min-width: 0;
	}
	.tpp-tile {
		min-height: 52px;
		padding: 14px 6px 10px;
		font-size: 14px;
	}
}

/* ---------------------------------------------------------------
   Section cards
   Every block in the buy column is wrapped in a white card so the
   product page reads as a stack of distinct sections, following the
   Prestige Drinks personalisation pattern: hairline border, 14px
   radius, numbered circle on the step headings.
   --------------------------------------------------------------- */

.single-product .summary {
	counter-reset: tpp-step;
	/* The theme pads the summary, which pushes the title band below the
	   top edge of the gallery. Drop the top padding so the two line up. */
	padding-top: 0 !important;
}

.single-product .summary > .woocommerce-product-details__short-description,
.single-product .summary .single_variation_wrap,
.single-product .summary .tpp-card {
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 18px 20px;
	border: 1px solid rgba(43, 23, 4, 0.12);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(43, 23, 4, 0.04);
}

/* -------------------------------------------------------------------------
 * "From:" prefix on variable products in product loops
 *
 * The price that follows is the cheapest buyable option, so the label reads
 * as a lead-in rather than competing with the figure. Scoped to .price so it
 * disappears if the plugin's filter is ever removed.
 * ---------------------------------------------------------------------- */
.price > .tpp-from {
	display: inline-block;
	margin-right: 0.25em;
	font-size: 0.78em;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	opacity: 0.7;
}

/* The description sits directly under the price: drop its own rule. */
.single-product .summary > .woocommerce-product-details__short-description {
	padding: 18px 20px 20px !important;
	margin: 0 0 16px !important;
	border: 1px solid rgba(43, 23, 4, 0.12) !important;
	border-radius: 14px !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(43, 23, 4, 0.04) !important;
}

.single-product .summary > .woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

/* Title, rating and price share one card. The plugin brackets the three
   summary hooks (priority 4 opens, 11 closes), so they land inside this
   wrapper instead of sitting loose on the page background. */
/* Title, rating and price ride above both grid columns. */
.single-product div.product > .tpp-pdp-head {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 20px 22px 18px !important;
	/* Pull the columns up: the grid row gap is 57.6px on its own. */
	margin: 0 0 -28px !important;
	border: 1px solid rgba(43, 23, 4, 0.12) !important;
	border-radius: 14px !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(43, 23, 4, 0.04) !important;
}

.single-product div.product > .tpp-pdp-head > .product_title {
	margin: 0 0 10px;
	line-height: 1.2;
}

.single-product div.product > .tpp-pdp-head .yith-ywar-product-rating-wrapper,
.single-product div.product > .tpp-pdp-head .woocommerce-product-rating,
.single-product div.product > .tpp-pdp-head .yith-ywar-product-rating-wrapper {
	margin: 0 0 12px;
}

.single-product div.product > .tpp-pdp-head > .price {
	margin: 0;
	line-height: 1.2;
}

.single-product div.product > .tpp-pdp-head > :last-child {
	margin-bottom: 0 !important;
}

/* The buy box is a flex child of the variation form, so give it the
   full width of the column instead of shrink-to-fit. */
.single-product .summary .single_variation_wrap {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
}

.single-product .summary .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.single-product .summary .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 1 1 auto;
	justify-content: center;
}

/* ---- Attribute rows become numbered cards ---------------------- */

.single-product .summary table.variations {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.single-product .summary table.variations tbody,
.single-product .summary table.variations tr,
.single-product .summary table.variations th.label,
.single-product .summary table.variations td.value {
	display: block;
	width: auto;
	max-width: 100%;
}

.single-product .summary table.variations tr {
	counter-increment: tpp-step;
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 18px 20px 20px;
	border: 1px solid rgba(43, 23, 4, 0.12);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(43, 23, 4, 0.04);
}

/* Outline Media Variations forces the label to 12px uppercase with
   !important, so the card heading has to out-shout it. */
.single-product .summary .variations tr > th.label {
	margin: 0 !important;
	padding: 0 0 12px !important;
	border: 0 !important;
	color: var(--tk-ink, #2e2e2e) !important;
	font-family: var(--tk-font-body, inherit) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
}

/* The theme wraps the text in a <label> that is 13px/900/uppercase —
   match it to the card heading. */
.single-product .summary .variations tr > th.label label {
	font-family: var(--tk-font-body, inherit) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: var(--tk-ink, #2e2e2e) !important;
}

.single-product .summary table.variations th.label::before {
	content: counter(tpp-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-right: 0.6rem;
	vertical-align: middle;
	transform: translateY(-2px);
	border-radius: 50%;
	background: var(--tk-cream-2, #f3ede4);
	color: var(--tk-brown-600, #804201);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
}

/* The theme pads the value cell (10px/18px) — inside a card that reads
   as dead space, so drop it and let the card padding do the work. */
.single-product .summary .variations tr > td.value {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Outline Media Variations' "Clear" link sits in the flow under every
   option row, reserving dead space even while hidden. Pin it to the
   card corner instead: it keeps its hidden/visible state, and the card
   stays tight until a choice is made. */
.single-product .summary table.variations tr {
	position: relative;
}

.single-product .summary .variations .reset_variations {
	position: absolute;
	top: 14px;
	right: 16px;
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.2;
}

.single-product .summary table.variations td.value select:not(.tpp-native-select) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.single-product .summary table.variations .tpp-tiles {
	margin: 2px 0 0;
}

/* ---- Product details card -------------------------------------- */

/* The details card follows the trust icons, which carry no bottom
   margin of their own. */
.single-product .summary .tpp-card {
	margin-top: 20px;
}

.single-product .summary .tpp-card__title {
	margin: 0 0 14px;
	padding: 0;
	color: var(--tk-ink, #2e2e2e);
	font-family: var(--tk-font-body, inherit);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.single-product .summary .tpp-card ul.tpp-info {
	margin: 0;
	padding: 0;
	border: 0;
}

@media (max-width: 700px) {
	.single-product div.product > .tpp-pdp-head {
		padding: 16px 16px 14px !important;
		/* Mobile row gap is 28px, so the desktop pull-up would close it entirely. */
		margin: 0 0 4px !important;
	}

	.single-product div.product > .tpp-pdp-head > .product_title {
		margin-bottom: 8px;
	}

	.single-product .summary > .woocommerce-product-details__short-description,
	.single-product .summary .single_variation_wrap,
	.single-product .summary .tpp-card,
	.single-product .summary table.variations tr {
		padding: 16px 16px 18px;
		border-radius: 12px;
		margin-bottom: 14px;
	}

	.single-product .summary > .woocommerce-product-details__short-description {
		padding: 16px 16px 18px !important;
	}

	.single-product .summary .variations tr > th.label,
	.single-product .summary .variations tr > th.label label {
		font-size: 18px !important;
	}

	.single-product .summary .variations tr > th.label::before {
		width: 28px;
		height: 28px;
		font-size: 14px;
	}

	.single-product .summary .tpp-card__title {
		font-size: 16px !important;
	}

	.single-product .summary .woocommerce-variation-add-to-cart {
		flex-wrap: wrap;
	}
}

/* ---------------------------------------------------------------
   Subscription option — club card + one-time card
   Replaces the frequency dropdown: the club card carries the copy,
   the benefit list and the delivery interval, the one-time card sits
   underneath as the plain alternative. Prices and the saving are
   printed from the variation data by tpp.js.
   --------------------------------------------------------------- */

.single-product .summary .tpp-subs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 2px 0 0;
}

.single-product .summary .tpp-sub {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid rgba(43, 23, 4, 0.12);
	border-radius: 8px;
	background: #f7f6f3;
	font-family: var(--tk-font-body, inherit);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.single-product .summary .tpp-sub--club {
	padding: 18px 16px 16px;
	border: 1.5px solid #e8c76a;
	border-radius: 10px;
	background: #F4EFE6;
}

.single-product .summary .tpp-sub--club:hover,
.single-product .summary .tpp-sub--oneoff:hover {
	box-shadow: 0 1px 6px rgba(43, 23, 4, 0.08);
}

.single-product .summary .tpp-sub.is-selected {
	border-color: var(--tk-brown-600, #804201);
	box-shadow: 0 0 0 2px rgba(128, 66, 1, 0.14);
}

.tpp-sub__badge {
	position: absolute;
	top: -11px;
	right: 14px;
	padding: 3px 8px;
	border-radius: 3px;
	background: #f7cd45;
	color: #2b1704;
	font-family: var(--tk-font-body, inherit);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

/* The theme styles every label inside form.cart .variations as
   13px/900/uppercase, so the card's own labels have to out-shout it. */
.single-product .summary .tpp-sub__head,
.single-product .summary .tpp-sub__every-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--tk-font-body, inherit) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.single-product .summary .tpp-sub__every-label {
	display: block;
	margin: 0 0 6px;
	color: #2b1704;
}

.single-product .summary .tpp-sub--club .tpp-sub__head {
	padding: 0 0 12px;
	border-bottom: 1px solid rgba(43, 23, 4, 0.1);
}

.single-product .summary .tpp-sub__radio {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 2px solid #2b1704;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.single-product .summary .tpp-sub__radio:checked {
	background: #2b1704;
	box-shadow: inset 0 0 0 3px #fff;
}

.single-product .summary .tpp-sub__title {
	color: #1f1a14;
	font-family: var(--tk-font-body, inherit) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.single-product .summary .tpp-sub__prices {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

.single-product .summary .tpp-sub__was {
	color: #8b8378;
	font-size: 14px;
	font-weight: 500;
	text-decoration: line-through;
}

.single-product .summary .tpp-sub__now {
	color: #1f1a14;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.single-product .summary .tpp-sub--oneoff .tpp-sub__title,
.single-product .summary .tpp-sub--oneoff .tpp-sub__now {
	font-size: 16px;
}

.single-product .summary .tpp-sub__benefits {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.single-product .summary .tpp-sub__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: #2b1704;
	font-family: var(--tk-font-body, inherit);
	font-size: 13.5px;
	line-height: 1.4;
}

.single-product .summary .tpp-sub__benefits li strong {
	font-weight: 700;
}

.tpp-sub__tick {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%232b1704' stroke-width='1.4'/%3E%3Cpath d='M6 10.4l2.7 2.5L14 7.4' fill='none' stroke='%232b1704' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

.single-product .summary .tpp-sub__learn {
	display: inline-block;
	margin-top: 12px;
	color: #2b1704;
	font-family: var(--tk-font-body, inherit);
	font-size: 13px;
	font-weight: 500;
	text-decoration: underline;
}

.single-product .summary .tpp-sub__every {
	margin-top: 12px;
}

/* A native <select> here would be picked up by WooCommerce's variation
   script (`$('.variations select')`) and its options disabled mid-change,
   so the interval control is a button and a list instead. */
.single-product .summary .tpp-sub__picker {
	position: relative;
}

.single-product .summary .tpp-sub__picker-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid rgba(43, 23, 4, 0.25);
	border-radius: 4px;
	background: #fff;
	color: #2b1704;
	font-family: var(--tk-font-body, inherit);
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.single-product .summary .tpp-sub__picker-toggle:hover {
	border-color: rgba(43, 23, 4, 0.45);
}

.tpp-sub__picker.is-static .tpp-sub__picker-toggle {
	cursor: default;
	pointer-events: none;
}

.tpp-sub__picker.is-static .tpp-sub__picker-chevron {
	display: none;
}

.tpp-sub__picker-chevron {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #2b1704;
}

.single-product .summary .tpp-sub__picker-list {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	top: 100%;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	border: 1px solid rgba(43, 23, 4, 0.2);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(43, 23, 4, 0.12);
}

.single-product .summary .tpp-sub__picker-list li {
	margin: 0;
	padding: 8px 10px;
	border-radius: 4px;
	color: #2b1704;
	font-family: var(--tk-font-body, inherit);
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
}

.single-product .summary .tpp-sub__picker-list li:hover,
.single-product .summary .tpp-sub__picker-list li.is-selected {
	background: #f4efe6;
}

.single-product .summary .tpp-sub__picker-list li.is-selected {
	font-weight: 600;
}

/* Club card + interval control when the current grind and size are not sold
   on a subscription. The card fades, the radio is disabled and the "Delivery
   Every" toggle can no longer be opened. */
.single-product .summary .tpp-sub__note {
	display: none;
	margin: 10px 0 0;
	font-family: var(--tk-font-body, inherit);
	font-size: 12.5px;
	line-height: 1.4;
	font-weight: 500;
	color: #8a5a1e;
}

.single-product .summary .tpp-sub--club.is-unavailable {
	border-color: rgba(43, 23, 4, 0.16);
	background: #f7f5f1;
	cursor: not-allowed;
}

/* Fade the card's content rather than the card itself, so the reason line
   below stays fully legible. */
.single-product .summary .tpp-sub--club.is-unavailable > *:not(.tpp-sub__note) {
	opacity: 0.5;
	filter: grayscale(0.5);
}

.single-product .summary .tpp-sub--club.is-unavailable:hover {
	box-shadow: none;
}

.single-product .summary .tpp-sub--club.is-unavailable.is-selected {
	border-color: rgba(43, 23, 4, 0.16);
	box-shadow: none;
}

.single-product .summary .tpp-sub--club.is-unavailable .tpp-sub__note {
	display: block;
}

.single-product .summary .tpp-sub--club.is-unavailable .tpp-sub__head,
.single-product .summary .tpp-sub--club.is-unavailable .tpp-sub__badge {
	cursor: not-allowed;
}

.single-product .summary .tpp-sub--club.is-unavailable .tpp-sub__picker-toggle {
	pointer-events: none;
}

.single-product .summary .tpp-sub__picker-toggle:disabled {
	border-color: rgba(43, 23, 4, 0.14);
	background: #f1efe9;
	color: #9a938a;
	cursor: not-allowed;
}

.single-product .summary .tpp-sub__picker-list li.is-unavailable {
	opacity: 0.45;
	cursor: not-allowed;
}

.single-product .summary .tpp-sub__picker-list li.is-unavailable:hover {
	background: transparent;
}

@media (max-width: 700px) {
	.single-product .summary .tpp-sub--club {
		padding: 16px 14px 14px;
	}

	.single-product .summary .tpp-sub__title {
		font-size: 16px;
	}

	.single-product .summary .tpp-sub__now {
		font-size: 16px;
	}

	.single-product .summary .tpp-sub__benefits li {
		font-size: 13px;
	}
}

/* ---------------------------------------------------------------
   Coffee facts — roast level, tasting notes, farm info
   The gallery and this block share one grid column (`.tpp-media-col`,
   opened/closed by the plugin), so the block always sits directly under
   the product photo, whatever the height of the summary column.
   --------------------------------------------------------------- */

.tpp-media-col {
	min-width: 0;
}

.woocommerce div.product .tpp-facts-block {
	margin-top: 18px;
}

.tpp-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--tk-line);
	border-radius: var(--tk-radius);
	overflow: hidden;
	background: #fff;
}

.tpp-facts__cell {
	padding: 20px 22px 22px;
	min-width: 0;
}

.tpp-facts__head {
	font-family: var(--tk-font-head);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tk-brown-900);
	margin: 0 0 12px;
	text-transform: none;
	letter-spacing: 0;
}

.tpp-roast {
	display: flex;
	gap: 4px;
	align-items: center;
	margin: 0 0 10px;
}

.tpp-roast__seg {
	flex: 1 1 0;
	height: 14px;
	border-radius: 0;
	background: var(--tk-cream-2);
	border: 1px solid #e6dccb;
}

.tpp-roast__seg.is-on {
	background: var(--tk-brown-600);
	border-color: var(--tk-brown-600);
}

.tpp-roast__scale {
	margin: 0;
	font-size: 0.9rem;
	color: var(--tk-muted);
}

.tpp-facts__notes {
	margin: 0;
	line-height: 1.55;
	color: var(--tk-ink-soft);
}

.tpp-facts__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tpp-facts__rows li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	padding: 0 0 12px;
}

.tpp-facts__rows li:last-child {
	padding-bottom: 0;
}

.tpp-facts__rows svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	stroke: var(--tk-brown-700);
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tpp-facts__label {
	color: var(--tk-ink);
	font-weight: 500;
}

.tpp-facts__value {
	color: var(--tk-ink-soft);
}

/* Top band: country of origin + flag on the left, roast level on the right.
   It spans both columns of the facts grid; the farm and tasting-notes cells
   sit in the two columns beneath it. */
.tpp-facts__cell--top {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px 20px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--tk-line);
	background: linear-gradient(180deg, #fffdf9, #fff);
}

/* Nothing to show on the left: the roast meter takes the whole band. */
.tpp-facts.no-origin .tpp-facts__cell--top {
	grid-template-columns: minmax(0, 1fr);
}

.tpp-origin {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin: 0;
}

.tpp-flag {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	display: block;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(43, 23, 4, .18);
}

.tpp-origin__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.tpp-origin__label {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tk-muted);
	font-weight: 500;
}

.tpp-origin__name {
	font-family: var(--tk-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tk-brown-900);
}

/* The roast meter sits inline in the top band, pushed to the right. */
.tpp-facts__cell--roast {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-left: 0;
	min-width: 0;
}

.tpp-facts.no-origin .tpp-facts__cell--roast {
	justify-content: flex-start;
}

.tpp-facts__cell--roast .tpp-facts__head {
	margin: 0;
	font-size: .95rem;
	white-space: nowrap;
}

.tpp-facts__cell--roast .tpp-roast {
	margin: 0;
	flex: 0 0 104px;
	width: 104px;
	gap: 3px;
}

.tpp-facts__cell--roast .tpp-roast__seg {
	height: 12px;
}

.tpp-facts__cell--roast .tpp-roast__scale {
	margin: 0;
	font-size: .82rem;
	white-space: nowrap;
}

/* Farm on the left, tasting notes on the right. */
.tpp-facts.has-farm.has-notes .tpp-facts__cell--farm {
	grid-column: 1;
	border-right: 1px solid var(--tk-line);
}

.tpp-facts.has-farm.has-notes .tpp-facts__cell--notes {
	grid-column: 2;
}

/* No notes: the farm cell runs the full width. */
.tpp-facts.no-notes .tpp-facts__cell--farm {
	grid-column: 1 / -1;
}

/* No farm info: a single column. */
.tpp-facts.no-farm {
	grid-template-columns: 1fr;
}

.tpp-facts.no-farm .tpp-facts__cell--notes {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.tpp-facts,
	.tpp-facts.has-farm,
	.tpp-facts.has-farm.has-notes {
		grid-template-columns: 1fr;
	}

	.tpp-facts__cell--top,
	.tpp-facts.no-origin .tpp-facts__cell--top {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px 18px;
	}

	.tpp-facts__cell--roast,
	.tpp-facts.no-origin .tpp-facts__cell--roast {
		justify-content: flex-start;
		width: 100%;
	}

	.tpp-facts .tpp-facts__cell--farm,
	.tpp-facts.has-farm.has-notes .tpp-facts__cell--farm,
	.tpp-facts.has-farm.has-notes .tpp-facts__cell--notes,
	.tpp-facts.no-notes .tpp-facts__cell--farm,
	.tpp-facts.no-farm .tpp-facts__cell--notes {
		grid-column: auto;
		grid-row: auto;
		border-right: 0;
	}

	.tpp-facts .tpp-facts__cell--farm,
	.tpp-facts.has-farm.has-notes .tpp-facts__cell--farm {
		border-bottom: 1px solid var(--tk-line);
	}
}

@media (max-width: 560px) {
	.tpp-facts__cell--roast {
		gap: 8px 10px;
	}

	.tpp-facts__cell--roast .tpp-roast {
		flex: 1 1 auto;
		width: auto;
	}

	.tpp-facts__cell--top {
		padding: 14px 16px;
	}
}

/* ---------------------------------------------------------------
   Subscription promo pill — sits under the "Subscribe or One Off"
   step heading, above the club and one-time cards. Built in
   tpp-0.9.7.js; the figure is the one-off price less the percentage
   set on WooCommerce > Tank product page.
   --------------------------------------------------------------- */
.tpp-promo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 12px;
	text-align: left;
}

.tpp-promo[hidden],
.tpp-promo__prices[hidden] {
	display: none !important;
}

.tpp-promo__pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--tk-logo-green, #acd48c);
	color: var(--tk-brown-900, #2b1704);
	font-family: var(--tk-font-body, inherit);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.tpp-promo__prices {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	font-family: var(--tk-font-body, inherit);
	font-size: 14px;
	line-height: 1.2;
	color: var(--tk-ink-soft, #4a4a4a);
}

.tpp-promo__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tk-brown-600, #804201);
}

.tpp-promo__was {
	color: var(--tk-ink-soft, #4a4a4a);
	font-size: 13px;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.tpp-promo__now {
	color: var(--tk-brown-800, #3f2103);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 700px) {
	.tpp-promo__pill {
		font-size: 12px;
		padding: 6px 12px;
	}

	.tpp-promo__now {
		font-size: 16px;
	}
}

/* -----------------------------------------------------------------
   "From:" price.

   The heading price is the cheapest buyable coffee, not the selected
   variation's price, so the label stays muted and the figure keeps its
   usual weight.
   ----------------------------------------------------------------- */
.tpp-from {
	color: var(--tk-muted, #6b6b6b);
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* -----------------------------------------------------------------
   Three reassurances under the rating.

   One row of three equal columns, each a pill. The theme printed the
   same three lines as `tk-trust-row` further down the summary; that
   copy is hidden below so the page carries one of them, not two.
   ----------------------------------------------------------------- */
.single-product .tk-trust-row {
	display: none !important;
}

.tpp-trust-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.tpp-trust-row__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid var(--tk-line-soft, rgba(63, 33, 3, 0.12));
	border-radius: 999px;
	background: var(--tk-cream-2, #f7f2e9);
	color: var(--tk-brown-800, #3f2103);
	font-family: var(--tk-font-body, inherit);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

.tpp-trust-row__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: var(--tk-logo-green, #acd48c);
}

.tpp-trust-row__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.tpp-trust-row__label {
	min-width: 0;
}

@media (max-width: 860px) {
	.tpp-trust-row {
		gap: 6px;
	}

	.tpp-trust-row__item {
		padding: 8px 9px;
		font-size: 12px;
	}

	.tpp-trust-row__icon {
		width: 15px;
		height: 15px;
	}
}

/* -----------------------------------------------------------------
   Grind guide.

   Every grind the product offers, as a bullet list with one line of
   plain English under "Pick a Grind".
   ----------------------------------------------------------------- */
.tpp-grind-guide {
	margin: 10px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: #F4EFE6;
	text-align: left;
}

.tpp-grind-guide__label {
	margin: 0 0 6px;
	font-family: var(--tk-font-body, inherit);
	font-size: 13px;
	font-weight: 700;
	color: var(--tk-brown-800, #3f2103);
}

.tpp-grind-guide__list {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: disc outside;
	font-family: var(--tk-font-body, inherit);
	font-size: 13px;
	line-height: 1.5;
	color: var(--tk-ink-soft, #4a4a4a);
}

.tpp-grind-guide__item {
	margin: 0 0 4px;
	padding: 0;
}

.tpp-grind-guide__item::marker {
	color: var(--tk-logo-green, #acd48c);
}

.tpp-grind-guide__name {
	color: var(--tk-brown-900, #2b1704);
	font-weight: 700;
}

/* -----------------------------------------------------------------
   First-order pill above the club card.

   Own row of its own between the "Subscribe or One Off" label and the
   "Join Tank Coffee Club" card, and the card's price is the figure it
   promises. The card head no longer wraps, so the title and price sit on
   one line again.
   ----------------------------------------------------------------- */
.single-product .summary .tpp-subs > .tpp-promo {
	margin: 0;
	padding: 0;
}

.single-product .summary .tpp-sub--club .tpp-sub__head {
	flex-wrap: nowrap;
}

/* ---- Selected options summary, above the quantity box ---- */
.tpp-summary {
	margin: 0 0 1.1rem;
	padding: .8rem 1rem;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: .75rem;
}
.tpp-summary[hidden] { display: none !important; }
.tpp-summary__list { margin: 0; display: grid; gap: .35rem; }
.tpp-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .75rem;
	margin: 0;
}
.tpp-summary__row dt {
	margin: 0;
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .6;
	white-space: nowrap;
}
.tpp-summary__row dd { margin: 0; font-weight: 600; text-align: right; }
.tpp-summary__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .45rem;
	margin: .7rem 0 0;
	padding-top: .7rem;
	border-top: 1px solid rgba(0, 0, 0, .09);
}
.tpp-summary__price[hidden], .tpp-summary__note[hidden] { display: none !important; }
.tpp-summary__amount { font-size: 1.15rem; font-weight: 700; }
.tpp-summary__note { font-size: .85rem; opacity: .75; }

/* Recurring rate under the intro price on the club card. */
.tpp-sub__then { margin: .45rem 0 0; font-size: .85rem; font-weight: 600; opacity: .82; }
.tpp-sub__then[hidden] { display: none !important; }

/* The pill carries a second line now, so let it wrap as two rows. */
.tpp-promo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.tpp-promo__sub { font-size: .85rem; opacity: .8; }

/* ---- 0.9.15: one price only (the summary), cream summary ---------- */

/* The price now lives in the order summary, so the heading band keeps
   just the title and rating. JS still writes "From: ..." into this node
   on every variation change, which is harmless while it is hidden. */
.single-product div.product > .tpp-pdp-head > .price {
	display: none !important;
}

.single-product .summary .tpp-summary {
	background: #F4EFE6;
}

/* The price WooCommerce prints above the summary duplicated the one in
   the summary box (this is the price in the top of the buy card). The
   summary is now the only place a price appears. */
.single-product form.cart .woocommerce-variation-price {
	display: none !important;
}

/* The bottom price is the only price on the page now, so it carries
   the weight the heading price used to. */
.single-product .summary .tpp-summary__amount {
	font-size: 1.6rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   "Order Summary" heading, at the top of the summary card.

   The card reads as a titled block rather than a loose stack of
   rows. The heading sits outside the aria-live wrapper below it, so
   screen readers still announce the rows and the price when a
   variation changes, without repeating the heading each time.
   --------------------------------------------------------------- */
.single-product .summary .tpp-summary__title {
	margin: 0 0 .55rem;
	padding: 0;
	font-family: var(--tk-font-body, inherit);
	font-size: .94rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: #1f1a14;
}
@media (max-width: 700px) {
	.single-product .summary .tpp-summary__title { font-size: .875rem; }
}

/* ---------------------------------------------------------------
   "Stock up and save" tier rows — breathing room (0.9.19).

   The bundle chooser was designed for the full-width slot WooCommerce
   leaves for a price. TPP now renders it inside the narrower summary
   column, where the old 15px padding and 10px gap read cramped: the
   "Most popular" / "Best value" badges hang half their height above
   their own row's top edge and were landing on the struck-out price
   of the row above. Taller rows plus a gap wide enough to swallow the
   badge overhang keeps every element clear of its neighbours.
   --------------------------------------------------------------- */
.single-product .summary .tb-stock {
	gap: 18px;
}
.single-product .summary .tb-stock__title {
	margin-bottom: 20px;
}
.single-product .summary .tb-row {
	padding: 18px 20px;
}
.single-product .summary .tb-row__body {
	gap: 5px;
}
.single-product .summary .tb-row__note {
	line-height: 1.4;
}
@media (max-width: 700px) {
	.single-product .summary .tb-stock { gap: 16px; }
	.single-product .summary .tb-stock__title { margin-bottom: 17px; }
	.single-product .summary .tb-row { padding: 16px 16px; }
	.single-product .summary .tb-row__body { gap: 4px; }
}

/* ---------------------------------------------------------------
   Gift subscription products (OMS): the "How this gift works"
   explainer is injected inside form.cart, after the attribute
   table and just above the buy box. The form is a wrapping flex
   container, so order lifts the explainer to the top of the card -
   straight under the short description, above the first chooser.
   ------------------------------------------------------------ */
.single-product form.variations_form > .oms-gift-term {
	order: -1;
	flex: 0 0 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* -----------------------------------------------------------------
   "How this gift works" card.

   OMS prints this block with an inline grey fill and a hard border,
   which fought the cream blocks around it once it moved to the top
   of the purchase column. Restyled to the house cream with the same
   rhythm as .tpp-grind-guide. Inline styles need !important.
   ----------------------------------------------------------------- */
.single-product .summary .oms-gift-term {
	background: #F4EFE6 !important;
	border: 0 !important;
	border-radius: 8px;
	padding: 14px 16px !important;
	margin: 0 0 20px !important;
}

.single-product .summary .oms-gift-term__title {
	margin: 0 0 8px;
	font-family: var(--tk-font-body, inherit);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tk-brown-800, #3f2103);
}

.single-product .summary .oms-gift-term__list {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: disc outside;
	font-family: var(--tk-font-body, inherit);
	font-size: 13px;
	line-height: 1.5;
	color: var(--tk-ink-soft, #4a4a4a);
}

.single-product .summary .oms-gift-term__list li {
	margin: 0 0 4px;
	padding: 0;
}

.single-product .summary .oms-gift-term__list li::marker {
	color: var(--tk-logo-green, #acd48c);
}

/* Also See (Contextual Related Posts) relocated under Related products */
.tpp-also-see{margin-top:3.5rem}
.tpp-also-see h2{margin-bottom:1.25rem}
.tpp-also-see .crp_related{clear:both}
.tpp-also-see .crp_related ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem 2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tpp-also-see .crp_related li{margin:0;padding:0}
.tpp-also-see .crp_related .crp_link{font-weight:600;text-decoration:none}
.tpp-also-see .crp_related .crp_link:hover{text-decoration:underline}

/* Also See: match the Related products section instead of the CRP grey box */
.tpp-also-see .crp_related{background:transparent;padding:0;margin:0}
.tpp-also-see .crp_related ul{margin:0;padding:0;list-style:none;display:grid;gap:.75rem 2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tpp-also-see .crp_related li{margin:0;padding:0}