/**
 * Owner revision 2.0 (2026-10-19): "Actualizaciones pagina web 2.0".
 * Loaded after tlm-vibrant.css and tlm-owner.css, before the dark layer.
 *   Home: hero info row, FAQ clearance for the volcano edge, review titles
 *   Chocolate Tour: hero subtitle, bigger "What Guests Do" label
 *   Our Story: softer Mission background + chip, scrolling "Where it all began"
 *   Shop: photo hero, icon benefits band, behind the scenes
 *   Everywhere: WhatsApp buttons in WhatsApp green, compact footer
 */

/* ------------------------------------------------------------------
 * Home hero: tour times and prices in the open, not in a bubble
 * ------------------------------------------------------------------ */
.vb-hero__info {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.9rem 0;
	margin: 0 0 1.9rem;
	padding: 1rem 0.5rem;
	border-radius: 18px;
	background: rgba(27, 36, 64, 0.84);
	list-style: none;
}

.vb-hero__info li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0 clamp(1.1rem, 2.4vw, 2rem);
	border-left: 3px solid var(--vb-sun, #FFC94D);
}

.vb-hero__info li:first-child { padding-left: clamp(1.1rem, 2.4vw, 2rem); }

.vb-hero__info-label {
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vb-sun, #FFC94D);
}

.vb-hero__info strong {
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-size: clamp(1.5rem, 3.1vw, 2.4rem);
	font-weight: 700;
	line-height: 1.08;
	color: #fff;
	text-shadow: 0 3px 22px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
	.vb-anim .vb-hero__info { opacity: 0; transform: translateY(18px); animation: vb-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards; }
}

@media (max-width: 700px) {
	.vb-hero__info { margin-bottom: 1.4rem; }
	.vb-hero__info li { padding: 0 1rem; }
	.vb-hero__info strong { font-size: 1.35rem; }
}

@media (max-height: 760px) and (min-width: 701px) {
	.vb-hero__info { margin-bottom: 1.1rem; }
}

/* ------------------------------------------------------------------
 * Plan your visit: the next band's volcano edge must never cover the text
 * ------------------------------------------------------------------ */
.tlm-plan-visit { padding-bottom: calc(var(--tlm-section-py, 5rem) + 150px); }
@media (max-width: 700px) { .tlm-plan-visit { padding-bottom: calc(var(--tlm-section-py, 3.5rem) + 64px); } }

.tlm-plan-visit__facts .tlm-faq-reserve { margin-top: 1.6rem; }

/* ------------------------------------------------------------------
 * Reviews: title above each quote
 * ------------------------------------------------------------------ */
.tlm-tour-reviews__title {
	margin: 0 0 0.6rem;
	font-family: var(--tlm-font-display);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vb-night, #1B2440);
}

.vb-quote__title {
	margin: 0 0 0.6rem;
	font-family: var(--tlm-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vb-sun, #FFC94D);
}

html[data-tlm-mode="dark"] .tlm-tour-reviews__title { color: #fff; }

/* ------------------------------------------------------------------
 * Chocolate Tour hero
 * ------------------------------------------------------------------ */
.vb-hero__sub {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin: -0.25rem 0 1.1rem;
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-size: clamp(1.35rem, 2.6vw, 2.1rem);
	font-weight: 600;
	line-height: 1.15;
	color: var(--vb-sun, #FFC94D);
	text-shadow: 0 3px 22px rgba(0, 0, 0, 0.35);
}

.vb-hero__sub span { display: block; }

.tlm-xp-guests .tlm-journal__kicker {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	letter-spacing: 0.1em;
}

/* ------------------------------------------------------------------
 * Our Story
 * ------------------------------------------------------------------ */
/* Our Mission: a soft sunrise cream instead of the strong yellow. */
.tls-mission {
	background: linear-gradient(175deg, #FFF3D6 0%, #FFE7B8 55%, #FBD9A0 100%);
	color: var(--vb-night, #1B2440);
}

.tls-mission .tls-chip { margin: 0 0 1rem; }

html[data-tlm-mode="dark"] .tls-mission { background: linear-gradient(170deg, #3A1F4F 0%, var(--vb-plum) 100%); color: #fff; }

/* Where it all began: one scrolling row at one height; each photo keeps its own proportions. */
.tls-early__strip {
	--tls-early-h: clamp(300px, 36vw, 500px);
	gap: clamp(14px, 1.8vw, 26px);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
	padding-bottom: 1.1rem;
}

.tls-early__item {
	flex: none;
	height: var(--tls-early-h);
	scroll-snap-align: center;
}

.tls-early__item img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
}

@media (max-width: 700px) {
	.tls-early__strip { --tls-early-h: clamp(260px, 72vw, 380px); }
}

/* ------------------------------------------------------------------
 * Shop hero: one photograph, wide text
 * ------------------------------------------------------------------ */
body .tlsh-hero.tlsh-hero--photo {
	display: flex;
	align-items: center;
	min-height: clamp(560px, 86vh, 820px);
	background: var(--vb-night, #1B2440) !important;
	padding-top: calc(var(--tlm-v3-header-h, 72px) + clamp(2rem, 5vw, 3.5rem));
	padding-bottom: calc(var(--tlo-edge, 110px) + 1.5rem);
}

.tlsh-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.tlsh-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.tlsh-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(20, 16, 46, 0.9) 0%, rgba(20, 16, 46, 0.72) 42%, rgba(20, 16, 46, 0.18) 78%, rgba(20, 16, 46, 0) 100%),
		linear-gradient(0deg, rgba(20, 16, 46, 0.4) 0%, transparent 35%);
}

body .tlsh-hero--photo .tlsh-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
}

.tlsh-hero--photo .tlsh-hero__text { max-width: min(46rem, 100%); }

.tlsh-hero--photo h1 {
	max-width: 16ch;
	margin-bottom: 0.4rem;
	font-size: clamp(2.5rem, 5.2vw, 4.6rem);
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

.tlsh-hero__sub {
	margin: 0 0 1.4rem;
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-size: clamp(1.5rem, 2.8vw, 2.3rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--vb-sun, #FFC94D);
}

.tlsh-hero--photo .tlsh-hero__lede {
	margin-bottom: 1rem;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	color: #fff;
}

.tlsh-hero--photo .tlsh-hero__note {
	margin: 1.4rem 0 1.75rem;
	padding: 1.1rem 0 0;
	border-top: 2px solid var(--vb-sun, #FFC94D);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	color: #fff;
}

@media (max-width: 700px) {
	.tlsh-hero__shade { background: linear-gradient(0deg, rgba(20, 16, 46, 0.9) 0%, rgba(20, 16, 46, 0.72) 60%, rgba(20, 16, 46, 0.5) 100%); }
	.tlsh-hero__photo img { object-position: 38% 50%; }
}

/* ------------------------------------------------------------------
 * Shop benefits band (icons, larger and airier than the old strip)
 * ------------------------------------------------------------------ */
.tlm-shop-benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	max-width: var(--tlm-content-box, 1280px);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) var(--tlm-section-px, 1.5rem);
	list-style: none;
	text-align: center;
	background: var(--vb-cream, #F7F0E2);
}

.tlm-shop-benefits li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	margin: 0;
}

.tlm-shop-benefits__icon {
	display: grid;
	place-items: center;
	width: clamp(72px, 7vw, 92px);
	height: clamp(72px, 7vw, 92px);
	border-radius: 50%;
	background: var(--vb-night, #1B2440);
	color: var(--vb-sun, #FFC94D);
}

.tlm-shop-benefits__icon svg { width: 50%; height: 50%; }

.tlm-shop-benefits__label {
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--vb-night, #1B2440);
}

@media (max-width: 760px) {
	.tlm-shop-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
}

html[data-tlm-mode="dark"] .tlm-shop-benefits { background: #131a30; }
html[data-tlm-mode="dark"] .tlm-shop-benefits__label { color: #fff; }

/* Behind the scenes: photos instead of placeholder boxes */
.tlm-shop-behind__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }

.tlm-shop-behind__grid li {
	display: block;
	aspect-ratio: auto;
	padding: 0;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
}

.tlm-shop-behind__grid li .tlm-zoom,
.tlm-shop-behind__grid li button {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.tlm-shop-behind__grid li img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 16px;
}

/* ------------------------------------------------------------------
 * WhatsApp buttons: WhatsApp green and the WhatsApp icon (inc/whatsapp-buttons.php)
 * ------------------------------------------------------------------ */
/* Selectors repeat the ones the earlier Reserve-button rules use (header pill, drawer, gold buttons), so green wins. */
a.tlm-wa.tlm-wa,
body .ct-header .tlm-top-reserve.tlm-wa,
body .ct-header nav ul.menu > li.tlm-drawer-cta > a.tlm-wa,
body #offcanvas nav li.tlm-drawer-cta > a.tlm-wa,
body .vb a.vb-btn.tlm-wa {
	--tlm-wa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052e16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 0-7.3 12.8L3.5 20.5l4.3-1.1A8.5 8.5 0 1 0 12 3.5Z'/%3E%3Cpath d='M8.7 8.4c.2-.5.4-.5.7-.5h.5c.2 0 .4 0 .6.4l.7 1.6c.1.2 0 .4-.1.5l-.5.6c-.1.2-.1.3 0 .5.3.6 1.4 1.8 2.6 2.2.2.1.3.1.5-.1l.5-.6c.2-.2.3-.2.5-.1l1.5.8c.2.1.3.2.3.5 0 .8-.9 1.5-1.6 1.5-1.7 0-4.2-1.2-5.7-3.3-.6-.8-.9-1.7-.9-2.4 0-.6.2-1 .4-1.6Z'/%3E%3C/svg%3E");
	background-color: #25D366 !important;
	background-image: var(--tlm-wa-icon) !important;
	background-repeat: no-repeat !important;
	background-position: 1.05rem center !important;
	background-size: 1.3rem 1.3rem !important;
	border-color: #25D366 !important;
	color: #052e16 !important;
	padding-left: calc(1.05rem + 1.3rem + 0.55rem) !important;
	box-shadow: 0 5px 0 rgba(5, 46, 22, 0.35);
	animation: none;
}

a.tlm-wa.tlm-wa:hover,
a.tlm-wa.tlm-wa:focus-visible,
body .ct-header .tlm-top-reserve.tlm-wa:hover,
body .ct-header nav ul.menu > li.tlm-drawer-cta > a.tlm-wa:hover,
body #offcanvas nav li.tlm-drawer-cta > a.tlm-wa:hover,
body .vb a.vb-btn.tlm-wa:hover {
	background-color: #1ebe5b !important;
	color: #052e16 !important;
}

a.tlm-wa.tlm-wa:focus-visible { outline: 3px solid #052e16; outline-offset: 3px; }
a.tlm-wa.tlm-wa:active { box-shadow: 0 2px 0 rgba(5, 46, 22, 0.35); }

/* the small "Reserve" pill beside the phone menu and in the desktop nav */
body .ct-header .tlm-top-reserve.tlm-wa,
body .ct-header nav ul.menu > li.tlm-drawer-cta > a.tlm-wa {
	background-position: 0.8rem center !important;
	background-size: 1.1rem 1.1rem !important;
	padding-left: calc(0.8rem + 1.1rem + 0.45rem) !important;
}

/* the contact page channel row keeps its card shape */
a.tlc-channel.tlm-wa.tlm-wa { background-position: 1.1rem center !important; padding-left: calc(1.1rem + 1.3rem + 0.7rem) !important; }
a.tlc-channel.tlm-wa .tlc-channel__label,
a.tlc-channel.tlm-wa .tlc-channel__value { color: #052e16 !important; }

/* the arrow after the label is redundant next to the WhatsApp icon */
a.tlm-wa > svg { display: none; }

/* ------------------------------------------------------------------
 * Contact: Turnstile widget spacing
 * ------------------------------------------------------------------ */
.tlc-turnstile { margin: 0.4rem 0 1rem; }

/* ------------------------------------------------------------------
 * Footer: three groups, social row, one thin legal bar
 * ------------------------------------------------------------------ */
body .tlm-footer { font-size: 1rem; }

body .tlm-footer .tlm-footer__body { padding-block: clamp(2rem, 3.4vw, 3rem) 1.4rem; }

body .tlm-footer .tlm-footer__body-inner {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
}

body .tlm-footer .tlm-footer__col-title {
	margin-bottom: 0.7rem;
	font-size: 1.3rem;
}

body .tlm-footer p,
body .tlm-footer li,
body .tlm-footer a,
body .tlm-footer address { font-size: 1.02rem; line-height: 1.5; }

body .tlm-footer .tlm-footer__nav-list { gap: 0.1rem; }
body .tlm-footer .tlm-footer__nav-list a { min-height: 2.2rem; }

.tlm-footer__contact-list li { padding-block: 0.15rem; color: rgba(247, 240, 226, 0.88); }
.tlm-footer__label { font-weight: 700; color: var(--vb-sun, #FFC94D); }
.tlm-footer__address { max-width: 30ch; }

body .tlm-footer .tlm-footer__social-row {
	max-width: var(--tlm-content-max, 1280px);
	margin: 1.4rem auto 0;
}

body .tlm-footer .tlm-footer__social { gap: 0.7rem; }

body .tlm-footer .tlm-footer__bottom { padding-block: 0.9rem; }

body .tlm-footer .tlm-footer__bottom-inner { gap: 0.35rem 1.75rem; }

body .tlm-footer .tlm-footer__bottom a,
body .tlm-footer .tlm-footer__bottom p { font-size: 0.95rem; margin: 0; }

body .tlm-footer .tlm-footer__legal-links a,
body .tlm-footer .tlm-footer__credits a { min-height: 2rem; }

body .tlm-footer .tlm-footer__credits a { font-weight: 700; color: var(--vb-sun, #FFC94D); }

@media (max-width: 900px) {
	body .tlm-footer .tlm-footer__body-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body .tlm-footer .tlm-footer__col--contact { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	body .tlm-footer .tlm-footer__body-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 1rem; }
	body .tlm-footer .tlm-footer__email { white-space: normal; overflow-wrap: anywhere; }
	body .tlm-footer .tlm-footer__bottom-inner { align-items: flex-start; }
}

/* Home reviews: the owner's quotes are shown whole (the earlier 6-line clamp is gone) */
.vb-quote blockquote p {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
	font-size: 1.05rem;
	line-height: 1.5;
}

/* a titled review: the quote mark leads, then the title, then the text */
.vb-quote__title::before {
	content: "\201C";
	display: block;
	margin-bottom: 0.1rem;
	font-size: 3.5rem;
	line-height: 0.6;
	color: var(--vb-sun, #FFC94D);
}

.vb-quote__title + blockquote::before { display: none; }

.tlm-xp-guests h2 { text-wrap: balance; }
a.tlc-channel.tlm-wa::before { display: none !important; }
html[data-tlm-mode="dark"] .tlm-shop-benefits__icon { background: #26305a; }

/* ------------------------------------------------------------------
 * Tour, step 4: the sugarcane press photo shown whole on a soft backdrop of itself
 * ------------------------------------------------------------------ */
.tlm-showcase-slide--contain { overflow: hidden; background: var(--vb-night, #1B2440); }

.tlm-showcase-slide--contain::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--tlm-slide-bg) center / cover no-repeat;
	filter: blur(26px) brightness(0.72) saturate(1.1);
}

.tlm-showcase-slide--contain img {
	position: relative;
	object-fit: contain;
	object-position: 50% 50%;
	padding: clamp(0.5rem, 1.2vw, 1rem);
}

/* ------------------------------------------------------------------
 * Contact hero: room to breathe
 * ------------------------------------------------------------------ */
.tlc-hero {
	padding-block: clamp(3.5rem, 7vw, 6.5rem) calc(var(--tlc-edge) + clamp(2.5rem, 5vw, 4rem)) !important;
}

.tlc-hero__inner {
	max-width: 1280px;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 6vw, 6rem);
}

.tlc-hero h1 {
	margin-bottom: 1.6rem;
	font-size: clamp(2.6rem, 5vw, 4.6rem);
}

.tlc-hero__lede { max-width: 40ch; margin-bottom: 2.25rem; line-height: 1.7; }
.tlc-hero__actions { gap: 1rem 1.25rem; margin-bottom: 2.6rem; }
.tlc-hero__facts { gap: 0.8rem; padding-left: 1.25rem; }

@media (max-width: 900px) {
	.tlc-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.tlc-hero__lede { margin-bottom: 1.75rem; }
}

/* ------------------------------------------------------------------
 * Footer bottom bar: copyright and credit stacked on the left, legal links on the right
 * ------------------------------------------------------------------ */
body .tlm-footer .tlm-footer__bottom { padding-block: 1.1rem 1.3rem; }

body .tlm-footer .tlm-footer__bottom-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.3rem clamp(1.5rem, 4vw, 3rem);
}

body .tlm-footer .tlm-footer__copyright { grid-column: 1; grid-row: 1; }
body .tlm-footer .tlm-footer__credits { grid-column: 1; grid-row: 2; display: block; gap: 0; color: rgba(247, 240, 226, 0.72); }
body .tlm-footer .tlm-footer__credits a { display: inline; min-height: 0; margin-left: 0.3rem; }

body .tlm-footer .tlm-footer__legal-links {
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-self: end;
	gap: 0.4rem clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 760px) {
	body .tlm-footer .tlm-footer__bottom-inner { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
	body .tlm-footer .tlm-footer__copyright { grid-row: 1; }
	body .tlm-footer .tlm-footer__legal-links { grid-column: 1; grid-row: 2; justify-self: start; margin-block: 0.5rem; gap: 0.1rem 1.5rem; }
	body .tlm-footer .tlm-footer__credits { grid-row: 3; }
}

/* ------------------------------------------------------------------
 * WhatsApp buttons: a calm green pulse and an icon nudge (off for reduced motion)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	a.tlm-wa.vb-btn,
	body .ct-header .tlm-top-reserve.tlm-wa,
	body .ct-header nav ul.menu > li.tlm-drawer-cta > a.tlm-wa,
	body #offcanvas nav li.tlm-drawer-cta > a.tlm-wa,
	a.tlc-channel--primary.tlm-wa,
	a.tlm-single-wa-btn.tlm-wa {
		animation: tlm-wa-pulse 2.8s ease-out 1.2s infinite;
	}

	a.tlm-wa.tlm-wa {
		transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.2s ease, background-position 0.25s ease;
	}

	a.tlm-wa.tlm-wa:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 9px 0 rgba(5, 46, 22, 0.35), 0 14px 26px -8px rgba(37, 211, 102, 0.6); animation-play-state: paused; }
	a.tlm-wa.tlm-wa:active { transform: translateY(2px); }
}

@keyframes tlm-wa-pulse {
	0% { box-shadow: 0 5px 0 rgba(5, 46, 22, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.55); }
	70% { box-shadow: 0 5px 0 rgba(5, 46, 22, 0.35), 0 0 0 16px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 5px 0 rgba(5, 46, 22, 0.35), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ------------------------------------------------------------------
 * Motion across the whole page (the script tags the pieces; this styles them).
 * Only runs when the visitor has not asked for reduced motion.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.vb-anim [data-vb-reveal="zoom"] {
		transform: scale(1.06);
		transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: calc(var(--vb-i, 0) * 90ms);
	}

	.vb-anim [data-vb-reveal="pop"] {
		transform: translateY(16px) scale(0.92);
		transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
		transition-delay: calc(var(--vb-i, 0) * 90ms);
	}

	.vb-anim [data-vb-reveal="zoom"].is-in,
	.vb-anim [data-vb-reveal="pop"].is-in { opacity: 1; transform: none; }

	/* shop benefit icons: the circle pops, then the icon settles */
	.vb-anim .tlm-shop-benefits li[data-vb-reveal] .tlm-shop-benefits__icon { transform: scale(0.6) rotate(-12deg); transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s; }
	.vb-anim .tlm-shop-benefits li.is-in .tlm-shop-benefits__icon { transform: none; }

	/* photos lift gently on hover (product packshots stay still, they are never zoomed) */
	.tls-photo img, .tlc-hero__photo img, .tlm-shop-behind__grid li img, .tlm-xp-guests__media img {
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
	}
	.tls-photo:hover img, .tlc-hero__photo:hover img, .tlm-shop-behind__grid li:hover img, .tlm-xp-guests__media figure:hover img {
		transform: scale(1.035);
	}
}

/* ------------------------------------------------------------------
 * Product gallery: real photographs fill the frame (packshots keep their stage)
 * ------------------------------------------------------------------ */
body.single-product .woocommerce-product-gallery .flexy-item.tlm-photo-fill {
	padding: 0;
	background: none !important;
}

body.single-product .woocommerce-product-gallery .flexy-item.tlm-photo-fill figure.ct-media-container {
	position: relative;
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: 5 / 6;
}

body.single-product .woocommerce-product-gallery .flexy-item.tlm-photo-fill figure.ct-media-container > img,
body.single-product .woocommerce-product-gallery .flexy-item.tlm-photo-fill img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	max-height: none;
	object-fit: cover;
	mix-blend-mode: normal !important;
	filter: none !important;
	border-radius: 0;
}

/* the WhatsApp icon gives a little wiggle every few seconds, and a bigger one on hover */
@media (prefers-reduced-motion: no-preference) {
	body .ct-header nav ul.menu > li.tlm-drawer-cta > a.tlm-wa,
	body .ct-header .tlm-top-reserve.tlm-wa,
	body .vb a.vb-btn.tlm-wa,
	a.tlm-wa.vb-btn {
		animation: tlm-wa-pulse 2.8s ease-out 1.2s infinite, tlm-wa-wiggle 6s ease-in-out 2s infinite;
	}
}

@keyframes tlm-wa-wiggle {
	0%, 88%, 100% { background-position-y: center; }
	90% { background-position-y: calc(50% - 3px); }
	93% { background-position-y: calc(50% + 2px); }
	96% { background-position-y: calc(50% - 2px); }
}

/* ------------------------------------------------------------------
 * Product gallery thumbnails: one tidy rounded square each, the same in light and dark
 * ------------------------------------------------------------------ */
body.single-product .woocommerce-product-gallery .flexy-pills ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 0.6rem 0 0;
	padding: 4px;
	list-style: none;
}

body.single-product .woocommerce-product-gallery .flexy-pills li {
	box-sizing: border-box;
	width: 84px;
	height: 84px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	border: 0;
	border-radius: 16px;
	background: #fff;
	mix-blend-mode: normal !important;
	opacity: 1 !important;
	filter: none;
	box-shadow: 0 0 0 1px rgba(27, 36, 64, 0.14);
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.single-product .woocommerce-product-gallery .flexy-pills li:hover { transform: translateY(-2px); }
body.single-product .woocommerce-product-gallery .flexy-pills li.active { box-shadow: 0 0 0 3px var(--vb-tangerine, #F59A3B); }

body.single-product .woocommerce-product-gallery .flexy-pills li .ct-media-container {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none !important;
	box-shadow: none;
}

body.single-product .woocommerce-product-gallery .flexy-pills li img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	border: 0;
	border-radius: 0 !important;
	box-shadow: none;
	object-fit: cover;
	mix-blend-mode: normal !important;
	filter: none !important;
	aspect-ratio: auto !important;
}

/* packshot thumbnails sit whole on white with a little air; photograph thumbnails fill the square */
body.single-product .woocommerce-product-gallery .flexy-pills li.tlm-thumb-pack { background: #fff; }
body.single-product .woocommerce-product-gallery .flexy-pills li.tlm-thumb-pack img { object-fit: contain; padding: 6px; box-sizing: border-box; }

/* Contact hero: a portrait of both founders, framed on their faces and shirts */
.tlc-hero__photo img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 40%;
}

/* ------------------------------------------------------------------
 * Gallery hero: the background is alive. Each photo drifts and zooms slowly (Ken Burns),
 * and warm light (sun and coral, the colours of the packaging) wanders across the picture.
 * Off for visitors who ask for reduced motion.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.tlg-hero__slide { overflow: hidden; }

	.tlg-hero__slide img {
		transform-origin: 50% 50%;
		animation: tlg-drift 16s ease-in-out infinite alternate;
	}

	.tlg-hero__slide:nth-child(even) img { animation-name: tlg-drift-b; animation-duration: 19s; }
	.tlg-hero__slide:nth-child(3n) img { animation-duration: 22s; }

	.tlg-hero__shade { overflow: hidden; }

	.tlg-hero__shade::after {
		content: "";
		position: absolute;
		inset: -25%;
		background:
			radial-gradient(38% 42% at 28% 38%, rgba(255, 201, 77, 0.30), transparent 70%),
			radial-gradient(34% 38% at 78% 62%, rgba(240, 98, 94, 0.24), transparent 70%),
			radial-gradient(30% 34% at 55% 20%, rgba(143, 221, 235, 0.16), transparent 70%);
		mix-blend-mode: soft-light;
		animation: tlg-glow 14s ease-in-out infinite alternate;
		pointer-events: none;
	}

	/* a few cacao-gold specks float upward behind the headline */
	.tlg-hero__head::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -40%;
		bottom: -10%;
		z-index: -1;
		background-image:
			radial-gradient(circle, rgba(255, 201, 77, 0.55) 0 2px, transparent 3px),
			radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 1.5px, transparent 2.5px),
			radial-gradient(circle, rgba(255, 201, 77, 0.4) 0 3px, transparent 4px);
		background-size: 220px 260px, 340px 300px, 460px 380px;
		background-position: 0 0, 90px 120px, 200px 40px;
		animation: tlg-specks 26s linear infinite;
		pointer-events: none;
		opacity: 0.8;
	}
}

@keyframes tlg-drift {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}

@keyframes tlg-drift-b {
	from { transform: scale(1.1) translate3d(1.5%, 1%, 0); }
	to { transform: scale(1) translate3d(0, 0, 0); }
}

@keyframes tlg-glow {
	from { transform: translate3d(-4%, -2%, 0) rotate(0deg); opacity: 0.75; }
	to { transform: translate3d(5%, 3%, 0) rotate(8deg); opacity: 1; }
}

@keyframes tlg-specks {
	from { background-position: 0 0, 90px 120px, 200px 40px; }
	to { background-position: -40px -260px, 120px -180px, 160px -340px; }
}

/* Shop cards: a photograph shown on hover fills the whole card (no small image inside the white stage) */
body ul.products li.product a.ct-media-container .ct-swap.tlm-swap-photo {
	object-fit: cover !important;
	mix-blend-mode: normal !important;
	filter: none !important;
	border-radius: inherit;
}

/* ------------------------------------------------------------------
 * "Where it all began": a pinned photo wall. Loose prints with paper
 * borders, slightly tilted and overlapping, no scrolling row. Each photo
 * keeps its own proportions (height:auto), nothing is cropped.
 * ------------------------------------------------------------------ */
.tls-early .tls-early__strip {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
	gap: clamp(18px, 2.4vw, 40px) clamp(10px, 1.4vw, 24px);
	overflow: visible;
	scroll-snap-type: none;
	max-width: min(1280px, 100%);
	padding-block: 1.5rem 3rem;
	padding-inline: max(1.25rem, 3vw);
}

.tls-early .tls-early__item {
	position: relative;
	flex: none;
	height: auto;
	padding: clamp(7px, 0.9vw, 12px) clamp(7px, 0.9vw, 12px) clamp(26px, 3vw, 44px);
	background: #FBF6EA;
	border-radius: 3px;
	box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.25);
	rotate: var(--tls-tilt, 0deg);
	scroll-snap-align: none;
}

.tls-early .tls-early__item img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 1px;
	box-shadow: none;
}

/* a strip of tape holding each print */
.tls-early .tls-early__item::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	width: clamp(54px, 28%, 96px);
	height: 24px;
	translate: -50% 0;
	rotate: -4deg;
	background: rgba(255, 201, 77, 0.78);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.tls-early .tls-early__item:nth-child(1) { grid-column: 1 / 4;  margin-top: 2.2rem; --tls-tilt: -3deg; }
.tls-early .tls-early__item:nth-child(2) { grid-column: 4 / 9;  margin-top: 0;      --tls-tilt: 2deg; z-index: 2; }
.tls-early .tls-early__item:nth-child(3) { grid-column: 9 / 13; margin-top: 3rem;   --tls-tilt: -2deg; }
.tls-early .tls-early__item:nth-child(4) { grid-column: 2 / 7;  margin-top: -4.5rem; --tls-tilt: 1.5deg; }
.tls-early .tls-early__item:nth-child(5) { grid-column: 7 / 11; margin-top: -2.5rem; --tls-tilt: -2.5deg; z-index: 2; }
.tls-early .tls-early__item:nth-child(even)::before { rotate: 5deg; background: rgba(240, 98, 94, 0.72); }

@media (prefers-reduced-motion: no-preference) {
	.tls-early .tls-early__item { transition: rotate 0.45s cubic-bezier(0.16, 1, 0.3, 1), translate 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease; }
	.tls-early .tls-early__item:hover,
	.tls-early .tls-early__item:focus-within { rotate: 0deg; translate: 0 -8px; z-index: 3; box-shadow: 0 28px 44px -18px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.25); }
	.tls-early .tls-early__strip:hover .tls-early__item:not(:hover),
	.tls-early .tls-early__strip:focus-within .tls-early__item:not(:focus-within) { opacity: 1; filter: none; }
}

/* tablets and phones: two columns, the wide photo spans both */
@media (max-width: 900px) {
	.tls-early .tls-early__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 0.9rem; padding-block: 1.2rem 2rem; }
	.tls-early .tls-early__item:nth-child(n) { grid-column: auto; margin-top: 0; }
	.tls-early .tls-early__item:nth-child(1) { order: 1; --tls-tilt: -2.5deg; }
	.tls-early .tls-early__item:nth-child(3) { order: 2; --tls-tilt: 2deg; margin-top: 1.4rem; }
	.tls-early .tls-early__item:nth-child(2) { order: 3; grid-column: 1 / -1; --tls-tilt: -1deg; }
	.tls-early .tls-early__item:nth-child(4) { order: 4; --tls-tilt: 2deg; }
	.tls-early .tls-early__item:nth-child(5) { order: 5; --tls-tilt: -2deg; margin-top: 1.2rem; }
}