/* ---------------------------------------------------------------
   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;
}

.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;
}

.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);
}

/* 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. */
.single-product .summary > .tpp-card--heading {
	padding: 20px 20px 18px !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 > .tpp-card--heading > .product_title {
	margin: 0 0 10px;
	line-height: 1.2;
}

.single-product .summary > .tpp-card--heading .yith-ywar-product-rating-wrapper,
.single-product .summary > .tpp-card--heading .woocommerce-product-rating {
	margin: 0 0 12px;
}

.single-product .summary > .tpp-card--heading > .price {
	margin: 0;
	line-height: 1.2;
}

.single-product .summary > .tpp-card--heading > :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: 17px !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: 17px !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: 26px;
	height: 26px;
	margin-right: 0.55rem;
	vertical-align: middle;
	transform: translateY(-2px);
	border-radius: 50%;
	background: var(--tk-cream-2, #f3ede4);
	color: var(--tk-brown-600, #804201);
	font-size: 13px;
	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 .summary > .tpp-card--heading {
		padding: 16px 16px 14px !important;
	}

	.single-product .summary > .tpp-card--heading > .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,
	.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: #fdf8ec;
}

.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;
	}
}