/* Twist Gifting: blend product pages (0.17.0, Thomas's Blend Product Pages 22.10.26). The homepage's language:
   blue spaced capitals, light headlines, square corners everywhere, outlined buttons that turn Twist blue. */

.twb-main {
	--twb-ink: #111610;
	--twb-text: #3a3a3a;
	--twb-muted: #535d60;
	--twb-line: #e4e4e4;
	--twb-blue: #e3f1fb;
	--twb-blue-label: #4dbbe6;
	--twb-blue-line: #bfe3f2;
	--twb-gutter: 56px;
	--twb-gap: 28px;
	color: var(--twb-text);
	font-size: 16px;
	line-height: 1.5;
}

.twb-main *,
.twb-main *::before,
.twb-main *::after {
	box-sizing: border-box;
}

.twb-wrap {
	width: min(1280px, calc(100% - 2 * var(--twb-gutter)));
	margin-left: auto;
	margin-right: auto;
}

.twb-main a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Top: crumbs, photo, options ---------- */
.twb-crumbs {
	padding: 22px 0 18px;
	font-size: 13px;
	color: var(--twb-muted);
}

.twb-crumbs a:hover {
	text-decoration: underline;
}

.twb-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "media buy" "more buy"; /* 0.23.2: the story block under the image, the buy column beside both */
	gap: 64px;
	align-items: start;
}
.twb-media {
	grid-area: media;
}
.twb-buy {
	grid-area: buy;
}
.twb-grid > .twb-more {
	grid-area: more;
	margin-top: -24px; /* 0.23.2: closes most of the row gap under the image */
}

.twb-media__main {
	aspect-ratio: 16 / 9; /* 0.20.0 (Twist's blend product feedback, 29 Oct 2026): the box fits the pile tile; was 1 / 1 */
	background: #fff;
	overflow: hidden;
}

.twb-media__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	transition: opacity 0.25s ease;
}

.twb-media__img.is-swapping {
	opacity: 0;
}

.twb-media__thumbs {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.twb-media__thumb {
	display: block;
	width: 84px;
	height: 84px;
	padding: 0;
	border: 1px solid var(--twb-line);
	background: #fff;
	border-radius: 0;
	cursor: pointer;
}

.twb-media__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.twb-media__thumb.is-active,
.twb-media__thumb:hover {
	border-color: var(--twb-ink);
}

.twb-kick {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--twb-blue-label);
}

.twb-main .twb-title {
	margin: 0;
	font-size: clamp(32px, 3.4vw, 48px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--twb-ink);
}

.twb-taste {
	margin: 14px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--twb-muted);
	max-width: 34em;
}

.twb-price {
	margin: 18px 0 0;
	font-size: 22px;
	font-weight: 400;
	color: var(--twb-ink);
}

.twb-price .woocommerce-Price-amount,
.twb-price span {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.twb-main .twg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.twb-price del {
	color: var(--twb-muted);
	font-size: 0.85em;
	margin-right: 6px;
}

.twb-price ins {
	text-decoration: none;
}

/* Option buttons: outlined squares, Twist blue when chosen or hovered (the site's Shop Now look). */
.twb-opts {
	margin-top: 26px;
	display: grid;
	gap: 20px;
}

.twb-opt__label {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--twb-ink);
}

.twb-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.twb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	border: 1px solid var(--twb-ink);
	background: #fff;
	color: var(--twb-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.18s, border-color 0.18s, opacity 0.18s;
}

.twb-btn:hover,
.twb-btn:focus-visible {
	background: var(--twb-blue);
}

.twb-btn.is-active {
	background: var(--twb-ink); /* 0.22.0 (Twist, 29 Oct 2026): a chosen option is black with white text; was the pale blue */
	border-color: var(--twb-ink);
	color: #fff;
	box-shadow: none;
}

.twb-btn[hidden] {
	display: none;
}

.twb-btn.is-unavailable {
	opacity: 0.35;
	cursor: not-allowed;
}

.twb-opt__note {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--twb-muted);
}

/* The product's own form: option table and the swatches hidden (the buttons above drive the selects); the
   quantity stepper and Add to basket stay. */
.twb-form {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--twb-line);
}

.twb-form table.variations,
.twb-form .swatch-container-c,
.twb-form .reset_variations,
.twb-form .woocommerce-variation-price,
.twb-form .woocommerce-variation-availability:empty {
	display: none !important;
}

.twb-form .single_variation_wrap .woocommerce-variation-description {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--twb-muted);
}

.twb-form .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.twb-form .single_add_to_cart_button,
.twb-form .quantity .qty,
.twb-form .quantity .minus,
.twb-form .quantity .plus {
	border-radius: 0 !important;
}

.twb-form .single_add_to_cart_button {
	background: var(--twb-ink);
	color: #fff;
	border: 1px solid var(--twb-ink);
	font-weight: 700;
}

.twb-form .single_add_to_cart_button:hover {
	background: #2e352d;
}

.twb-form .single_add_to_cart_button.disabled,
.twb-form .single_add_to_cart_button:disabled {
	opacity: 0.4;
}

.twb-form .wc-stripe-payment-request-wrapper,
.twb-form .wcpay-payment-request-wrapper,
.twb-form .ppcp-express-checkout {
	display: none !important;
}

/* ---------- The Bible copy: story, brew, ingredients ---------- */
.twb-info {
	margin-top: 64px;
	padding-top: 56px;
	border-top: 1px solid var(--twb-line);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}

.twb-info__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--twb-text);
}

.twb-brew {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.twb-brew li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 92px;
	text-align: center;
	font-size: 13px;
	color: var(--twb-ink);
}

.twb-brew__icon {
	display: block;
	width: 64px;
	height: 64px;
}

.twb-brew__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--twb-ink);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- You may also like: the homepage's rail ---------- */
.twb-related {
	margin-top: 72px;
	margin-bottom: 72px;
	padding-top: 56px;
	border-top: 1px solid var(--twb-line);
}

.twb-head {
	margin-bottom: 28px;
}

.twb-main .twb-h2 {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 48px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--twb-ink);
}

.twb-rail {
	list-style: none;
	margin: 0;
	padding: 0 0 6px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--twb-gap)) / 4);
	gap: var(--twb-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.twb-rail::-webkit-scrollbar {
	display: none;
}

.twb-card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border: 1px solid transparent;
	transition: border-color 0.2s;
}

.twb-card:hover,
.twb-card:focus-within {
	border-color: var(--twb-line);
}

.twb-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9; /* 0.20.0: the pile tiles' shape; was 1 / 1 */
	background: #fff;
}

.twb-card__media img {
	--zoom: 1; /* 0.20.0: the tiles are cut tight already; was 1.3 */
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain; /* 0.20.0: a blend without a pile shows its whole product photo; was cover */
	transform: scale(var(--zoom));
	transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.twb-card:hover .twb-card__media img {
	transform: scale(calc(var(--zoom) * 1.05));
}

.twb-card__body {
	flex: 1;
	padding: 14px 20px 16px;
}

.twb-main .twb-card__title {
	margin: 0;
	font-size: 21px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--twb-ink);
}

.twb-card__line {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--twb-muted);
}

.twb-card__price {
	margin: 10px 0 0;
	font-size: 15px;
	color: var(--twb-ink);
}

.twb-card__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--twb-ink);
	background: #fff;
	color: var(--twb-ink);
	font-size: 15px;
	font-weight: 700;
	transition: background-color 0.18s, border-color 0.18s;
}

.twb-card:hover .twb-card__button {
	background: var(--twb-blue);
	border-color: var(--twb-line);
}

.twb-scroller {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 26px;
}

.twb-scroller[hidden] {
	display: none;
}

.twb-scroller__btn {
	flex: none;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #cfcfcf;
	background: #fff;
	color: var(--twb-ink);
	font-size: 16px;
	border-radius: 0;
	cursor: pointer;
}

.twb-scroller__btn:hover {
	border-color: var(--twb-ink);
}

.twb-scroller__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.twb-scroller__bar {
	position: relative;
	flex: 1;
	height: 2px;
	background: var(--twb-line);
}

.twb-scroller__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 25%;
	background: var(--twb-ink);
	transition: left 0.2s ease, width 0.2s ease;
}

/* Nothing from the theme's product layout underneath (tabs, related, upsells) on these pages. */
body.twg-blend .woocommerce-tabs,
body.twg-blend .related,
body.twg-blend .upsells,
body.twg-blend .product-summary-wrap,
body.twg-blend .elementor-location-single {
	display: none !important;
}

/* ---------- Tablets ---------- */
@media (max-width: 1099px) {
	.twb-main {
		--twb-gutter: 32px;
		--twb-gap: 20px;
	}

	.twb-grid {
		gap: 36px;
	}

	.twb-info {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.twb-rail {
		grid-auto-columns: calc((100% - 2 * var(--twb-gap)) / 2.6);
	}
}

/* ---------- Phones ---------- */
@media (max-width: 759px) {
	.twb-main {
		--twb-gutter: 20px;
		--twb-gap: 14px;
	}

	.twb-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "buy" "more"; /* 0.23.2: image, buy column, then the story */
		gap: 22px;
	}
	.twb-grid > .twb-more {
		margin-top: 8px;
	}

	.twb-media__thumb {
		width: 64px;
		height: 64px;
	}

	.twb-info {
		margin-top: 44px;
		padding-top: 36px;
	}

	.twb-related {
		margin-top: 48px;
		margin-bottom: 48px;
		padding-top: 36px;
	}

	.twb-rail {
		grid-auto-columns: 72%;
	}

	.twb-card__body {
		padding: 12px 4px;
	}

	.twb-btn {
		min-height: 44px;
		padding: 0 14px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.twb-media__img,
	.twb-card__media img,
	.twb-btn {
		transition: none;
	}
}


/* ---------- 0.18.0: Thomas's layout, 26 Oct 2026 ---------- */
.twb-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 32px 40px;
	margin: 18px 0 0; /* 0.22.0: inside the folding block, which carries the divider */
	padding-top: 0;
	border-top: 0;
}

.twb-detail__col > .twb-kick,
.twb-ingredients > .twb-kick {
	margin-bottom: 10px;
}

.twb-detail__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--twb-text);
}

.twb-detail__text--small {
	margin-top: 12px;
	font-size: 14px;
}

.twb-ingredients {
	margin: 24px 0 0;
}

.twb-buy .twb-price {
	margin-top: 20px; /* 0.22.0: straight under the taste line, no divider (the story now follows the buttons) */
	padding-top: 0;
	border-top: 0;
}

.twb-brew li {
	width: 84px;
}

.twb-brew__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.twb-opt[hidden],
.twb-info {
	display: none !important;
}

@media (max-width: 720px) {
	.twb-detail {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* ---------- 0.22.0: the story, brew and ingredients after the buttons, folding once a format is chosen ---------- */
.twb-more {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--twb-line);
}
.twb-more__summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.twb-more__summary::-webkit-details-marker {
	display: none;
}
.twb-more__summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--twb-ink);
	border-bottom: 1.5px solid var(--twb-ink);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.18s;
}
.twb-more[open] > .twb-more__summary::after {
	transform: rotate(-135deg) translateY(-2px);
}
.twb-more__kick {
	margin: 0;
}
.twb-more__summary:hover .twb-more__kick,
.twb-more__summary:focus-visible .twb-more__kick {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 0.23.2: three ways to brew stack below the story (Twist, 3 Nov 2026). */
.twb-detail--stack {
	grid-template-columns: minmax(0, 1fr);
}