/*
Theme Name: TailTocks
Theme URI: https://tailtocks.com
Author: TailTocks
Author URI: https://tailtocks.com
Description: Modern pop & playful sticker-style block theme for the TailTocks wagging cat clock store. Cream soda canvas, tangerine stickers, 3px espresso outlines, hard offset shadows.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tailtocks
Tags: block-patterns, block-styles, custom-colors, custom-logo, editor-style, full-site-editing, one-column, portfolio, e-commerce
*/

/* ---------------------------------------------------------------
   TailTocks custom layer — things theme.json cannot express
   --------------------------------------------------------------- */

/* Pure cream page background (M7-T1: pop-art tile pattern removed) */
body {
	background-color: #FDF2DF;
}

/* Images never overflow their container (fixed-width assets shrink on mobile) */
img {
	max-width: 100%;
	height: auto;
}
/* Core renders resized image figures as shrink-to-fit tables, which ignores
   percentage max-width and lets wide image assets overflow on mobile. */
.wp-block-image {
	display: block;
}

/* Nothing may push the page wider than the viewport */
html,
body {
	overflow-x: clip;
}

/* T4 · In-page anchor navigation: smooth scroll, respect reduced-motion,
   and keep anchored sections clear of the fixed-height header */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
section[id] {
	scroll-margin-top: 90px;
}

/* Header: never let the cart pill get squeezed on mobile */
.tt-header .wp-block-button__link {
	white-space: nowrap;
}
.tt-header .wp-block-buttons {
	flex-shrink: 0;
}

/* Header cart badge */
.tt-cart-count {
	display: none;
}
.tt-cart-count.has-items {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--wp--preset--color--lemon);
	color: var(--wp--preset--color--espresso);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	font-size: 13px;
	line-height: 1;
	margin-left: 6px;
	vertical-align: middle;
	box-shadow: 1px 1px 0 var(--wp--preset--color--espresso);
}

/* Suppress redundant WooCommerce auto-hooked navigation blocks */
.tt-header .wp-block-woocommerce-customer-account,
.tt-header .wc-block-customer-account,
.tt-header .wp-block-woocommerce-mini-cart,
.tt-header .wc-block-mini-cart {
	display: none !important;
}

/* ===============================================================
   Navigation · Desktop Horizontal Bar & Mobile Sticker Drawer
   =============================================================== */

/* Clean reset for core navigation in TailTocks header */
.tt-header .wp-block-navigation,
.tt-header .wp-block-navigation ul,
.tt-header .wp-block-navigation li {
	list-style: none !important;
	list-style-type: none !important;
}

.tt-header .wp-block-navigation a {
	text-decoration: none !important;
}

/* Base header flex layout: strictly horizontal, single row */
.tt-header {
	border-bottom: 3px solid var(--wp--preset--color--espresso);
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.tt-header > .wp-block-group:first-child,
.tt-header .tt-header-brand {
	display: flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
}

/* Wordmark logo: hide any separate text title so it never duplicates "TailTocks" */
.tt-header .wp-block-site-title {
	display: none !important;
}

.tt-header .wp-block-site-logo {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
}

.tt-header .wp-block-site-logo a {
	display: inline-flex !important;
	align-items: center !important;
	text-decoration: none !important;
	line-height: 0 !important;
}

.tt-header .wp-block-site-logo img {
	display: block !important;
	width: auto !important;
	height: 44px !important;
	max-height: 44px !important;
	max-width: 165px !important;
	object-fit: contain !important;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.tt-header .wp-block-site-logo a:hover img {
	transform: scale(1.04) !important;
}

.tt-header .wp-block-navigation {
	display: flex !important;
	align-items: center !important;
}

/* Safeguard: Close button MUST NEVER be visible when menu is closed */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* ---------------------------------------------------------------
   Desktop Navigation (>= 782px): Single Row, Centered, No Hamburger
   --------------------------------------------------------------- */
@media (min-width: 782px) {
	/* Hamburger open button MUST be completely hidden on desktop */
	.tt-header .wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	/* Close button MUST be completely hidden on desktop */
	.tt-header .wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	/* Desktop links container: inline flex in the header */
	.tt-header .wp-block-navigation {
		flex-grow: 1 !important;
		justify-content: center !important;
	}

	.tt-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: flex !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		background: transparent !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	.tt-header .wp-block-navigation__responsive-container-content {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		min-height: 0 !important;
	}

	.tt-header ul.wp-block-navigation__container {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 24px !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		flex-wrap: nowrap !important;
	}

	.tt-header .wp-block-navigation-item {
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		white-space: nowrap !important;
	}

	.tt-header .wp-block-navigation-item__content {
		display: inline-block !important;
		font-family: var(--wp--preset--font-family--baloo-2) !important;
		font-size: 17px !important;
		font-weight: 800 !important;
		color: var(--wp--preset--color--espresso) !important;
		text-decoration: none !important;
		padding: 4px 8px !important;
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		border-radius: 8px !important;
		transition: color 0.15s ease-out, transform 0.15s ease-out !important;
	}

	.tt-header .wp-block-navigation-item__content:hover,
	.tt-header .wp-block-navigation-item__content:focus {
		color: var(--wp--preset--color--tangerine) !important;
		background: transparent !important;
		border-color: transparent !important;
		box-shadow: none !important;
		transform: translateY(-2px) !important;
	}
}

/* ---------------------------------------------------------------
   Mobile Navigation (<= 781px): Single Row Header + Sticker Drawer
   --------------------------------------------------------------- */
@media (max-width: 781px) {
	.tt-header {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	.tt-header > .wp-block-group:first-child {
		margin-right: auto !important;
	}

	.tt-header .wp-block-buttons {
		order: 2 !important;
		margin-right: 12px !important;
	}

	.tt-header .wp-block-navigation {
		order: 3 !important;
		margin: 0 !important;
	}

	/* Hide the inline menu on mobile when closed */
	.tt-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Hamburger Open Button */
	.tt-header .wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-open {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
		background: var(--wp--preset--color--warm-paper) !important;
		border: 2.5px solid var(--wp--preset--color--espresso) !important;
		border-radius: 12px !important;
		box-shadow: 2px 2px 0 var(--wp--preset--color--espresso) !important;
		color: var(--wp--preset--color--espresso) !important;
		cursor: pointer !important;
		outline: none !important;
		transition: transform 0.15s ease-out, background-color 0.15s ease-out !important;
	}
	.tt-header .wp-block-navigation__responsive-container-open:hover,
	.tt-header .wp-block-navigation__responsive-container-open:focus,
	.wp-block-navigation__responsive-container-open:hover,
	.wp-block-navigation__responsive-container-open:focus {
		background: var(--wp--preset--color--lemon) !important;
		transform: translateY(-2px);
	}
	.tt-header .wp-block-navigation__responsive-container-open svg,
	.wp-block-navigation__responsive-container-open svg {
		width: 22px !important;
		height: 22px !important;
		fill: var(--wp--preset--color--espresso) !important;
	}

	/* Hide the hamburger button behind the open overlay */
	.has-modal-open .wp-block-navigation__responsive-container-open,
	.is-menu-open ~ .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	/* Fullscreen Mobile Drawer Overlay */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background-color: var(--wp--preset--color--warm-paper) !important;
		background: #FFFDF8 !important;
		z-index: 999999 !important;
		padding: 24px 20px !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		overflow-y: auto !important;
	}

	/* Close Button: cute round sticker */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 20px !important;
		right: 20px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
		background: var(--wp--preset--color--lemon) !important;
		border: 2.5px solid var(--wp--preset--color--espresso) !important;
		border-radius: 9999px !important;
		box-shadow: 2px 2px 0 var(--wp--preset--color--espresso) !important;
		color: var(--wp--preset--color--espresso) !important;
		cursor: pointer !important;
		outline: none !important;
		z-index: 10 !important;
		transition: transform 0.15s ease-out, background-color 0.15s ease-out !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus {
		background: var(--wp--preset--color--mint) !important;
		transform: rotate(90deg);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 20px !important;
		height: 20px !important;
		fill: var(--wp--preset--color--espresso) !important;
	}

	/* Navigation List inside Overlay */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 75vh !important;
		padding-top: 40px !important;
		box-sizing: border-box !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 16px !important;
		width: 100% !important;
		list-style: none !important;
		list-style-type: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100% !important;
		text-align: center !important;
		display: block !important;
		list-style: none !important;
		list-style-type: none !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: inline-block !important;
		font-family: var(--wp--preset--font-family--baloo-2) !important;
		font-size: 24px !important;
		font-weight: 800 !important;
		color: var(--wp--preset--color--espresso) !important;
		text-decoration: none !important;
		padding: 10px 32px !important;
		border-radius: 9999px !important;
		border: 2px solid transparent !important;
		transition: all 0.15s ease-out !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
		background: var(--wp--preset--color--mint) !important;
		border-color: var(--wp--preset--color--espresso) !important;
		box-shadow: 2px 2px 0 var(--wp--preset--color--espresso) !important;
		transform: translateY(-2px);
	}
}

@media (max-width: 600px) {
	.tt-header {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	.tt-header .wp-block-site-logo img {
		height: 34px !important;
		max-height: 34px !important;
		max-width: 125px !important;
	}
	.tt-header .tt-cart .wp-block-button__link {
		padding-left: 14px !important;
		padding-right: 14px !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
		font-size: 0.9rem !important;
	}
}

/* Sticker CTA: image-button hover lift ("peeling sticker") */
.tt-cta {
	transition: transform 0.15s ease-out;
	display: inline-block;
}
/* CTA hover = tail wag (signature motion, replaces generic lift) */
.tt-cta-wag:hover {
	animation: tt-wag 0.6s var(--motion-wag) infinite;
}

/* Feature card (sticker card with mint header bar — NO shadow per owner decision) */
.tt-card {
	background: var(--wp--preset--color--warm-paper);
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 16px;
	overflow: hidden;
}
.tt-card .tt-card-header {
	background: var(--wp--preset--color--mint);
	border-bottom: 3px solid var(--wp--preset--color--espresso);
	padding: 8px 16px;
	margin: 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: var(--wp--preset--font-size--headline-card);
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--espresso);
}
.tt-card figure {
	margin: 0;
}
.tt-card img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
}

/* Floating sticker decorations */
.tt-sticker {
	position: absolute;
	z-index: 2;
	margin: 0;
	pointer-events: none;
}
.tt-sparkle-a { top: 40px; left: 31%; width: 40px; }
.tt-sparkle-b { top: 130px; left: 33.5%; width: 20px; }
.tt-sparkle-c { top: 33%; right: 34%; width: 26px; }
.tt-paw-a { top: 310px; left: 26%; width: 54px; transform: rotate(12deg); }
.tt-paw-b { bottom: -28px; left: -32px; width: 62px; transform: rotate(-14deg); }
.tt-paw-c { top: 240px; right: 30.5%; width: 54px; transform: rotate(18deg); }
.tt-smiley-a { bottom: -24px; right: -16px; width: 56px; }

/* Header bar */
.tt-header {
	border-bottom: 3px solid var(--wp--preset--color--espresso);
}

/* Nav: when links wrap onto two rows on narrow screens, keep rows tight */
@media (max-width: 900px) {
	.tt-header .wp-block-navigation ul {
		row-gap: 4px;
		column-gap: 20px;
	}
}

/* Hide decorations on mobile */
@media (max-width: 781px) {
	.tt-sticker { display: none; }
}

/* Mobile hardening: never allow sticker decorations to create horizontal scroll */
html, body {
	overflow-x: clip;
}

/* ---------------------------------------------------------------
   Variant backport (branch variant/pop-framework, 2026-09-20)
   --------------------------------------------------------------- */

:root {
	/* Signature motion (framework §5): the tail-wag easing, reused everywhere */
	--motion-wag: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

@keyframes tt-wag {
	0%, 100% { transform: rotate(-4deg); }
	50%      { transform: rotate(4deg); }
}

/* Sticker text: 8-direction outline (OUTSIDE glyphs) + hard offset shadow.
   Never use -webkit-text-stroke on Baloo 2 — it paints inward and shatters counters. */
.tt-sticker-text {
	text-shadow:
		-2px -2px 0 #2b2118, 0 -2px 0 #2b2118, 2px -2px 0 #2b2118,
		-2px  0   0 #2b2118,                   2px  0   0 #2b2118,
		-2px  2px 0 #2b2118, 0  2px 0 #2b2118, 2px  2px 0 #2b2118;
	filter: drop-shadow(3px 3px 0 #2b2118);
}

/* ===============================================================
   M12 · Compact Pop Craft Workshop ("MAKE IT YOURS / HOW IT WORKS")
   =============================================================== */
.tt-section.tt-workshop {
	padding-top: 48px;
	padding-bottom: 52px;
}
@media (max-width: 781px) {
	.tt-section.tt-workshop {
		padding-top: 36px;
		padding-bottom: 40px;
	}
}

.tt-anchor-target {
	position: relative;
	top: -60px;
	height: 0;
	visibility: hidden;
}

.tt-workshop .tt-section-title {
	margin-bottom: 6px;
}

.tt-workshop .tt-section-sub {
	margin-top: 4px;
	margin-bottom: 24px;
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
}

/* 3-Card Pop Craft Grid */
.tt-craft-grid {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	max-width: 1080px;
	margin: 0 auto;
	align-items: stretch;
}

.tt-craft-grid,
.tt-craft-grid * {
	box-sizing: border-box;
}

@media (min-width: 900px) {
	.tt-craft-grid {
		grid-template-columns: 1fr auto 1fr auto 1fr;
		gap: 14px;
		align-items: center;
	}
}

/* Individual Pop Craft Card */
.tt-craft-card {
	box-sizing: border-box;
	background: #FFFDF8;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 20px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	padding: 16px 16px 18px;
	display: flex;
	flex-direction: column;
	text-align: left;
	position: relative;
	transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.tt-craft-card:hover {
	transform: translateY(-4px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso);
}

/* Header inside Card */
.tt-craft-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.tt-step-badge {
	display: inline-block;
	background: var(--wp--preset--color--tangerine);
	color: #FFF7E8;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.05em;
	padding: 3px 10px;
	border-radius: 9999px;
	border: 2px solid var(--wp--preset--color--espresso);
	line-height: 1.2;
}

.tt-craft-tag {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 13px;
	font-weight: 700;
	color: #7A6354;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Standardized Comic Image Stage Window */
.tt-craft-window {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	background: #FFFDF8;
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 14px;
	overflow: hidden;
	display: block;
	margin-bottom: 14px;
	padding: 0;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
}

.tt-craft-window img {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.tt-craft-card:hover .tt-craft-window img {
	transform: scale(1.03);
}

/* Body inside Card */
.tt-craft-card-body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.tt-craft-title {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 6px;
}

.tt-craft-desc {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	color: #554438;
	margin: 0;
}

/* Connecting arrows between cards (desktop only) */
.tt-craft-arrow {
	display: none;
}

@media (min-width: 900px) {
	.tt-craft-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		color: var(--wp--preset--color--espresso);
		opacity: 0.75;
		margin: 0 -2px;
	}
	.tt-craft-arrow svg {
		width: 40px;
		height: 22px;
		display: block;
	}
}

/* Compact Conversion & Assurance Bar */
.tt-workshop-bar {
	margin-top: 24px;
	text-align: center;
}

.tt-workshop-badges {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	background: #FFFDF8;
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 6px 18px;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	margin-bottom: 14px;
}

.tt-badge-item {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 14.5px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
}

.tt-badge-dot {
	color: var(--wp--preset--color--tangerine);
	font-weight: 900;
}

.tt-workshop-cta {
	margin-bottom: 8px;
}

.tt-workshop-reassurance {
	font-size: 13px;
	font-weight: 700;
	color: #5A4A3E;
	margin: 0;
	letter-spacing: 0.02em;
}
.tt-btn {
	display: inline-block;
	background: var(--wp--preset--color--tangerine);
	color: #FFF7E8;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	box-shadow: 4px 4px 0 #2B2118;
	padding: 12px 32px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: transform 0.15s ease-out;
}
.tt-btn:hover {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--espresso);
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.tt-cta-wag:hover { animation: none; }
}

/* M6-T4 · Photo wall "WAGGING IN THE WILD" — realistic polaroids.
   The only true-paper exemption zone on the site (sticker language elsewhere):
   warm off-white paper, golden-ratio margins, 3-layer diffuse soft shadows.
   M8-T2 #4: no more horizontal scroll on mobile — everything shows in a
   3-col mini grid (desktop: 7 staggered prints); hover pops a print with
   transform scale + z-index only, so the layout never jumps. */
.tt-wild-wall {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 40px;
	padding: 20px 4px 26px;
}
.tt-pola {
	position: relative;
	margin: 0;
	/* smaller paper margins on the mobile mini grid with safe caption chin */
	padding: 8px 8px 36px;
	/* fully opaque warm paper — nothing behind the print may show through */
	background-color: #fbfaf6;
	border-radius: 2px;
	transition: transform 0.25s var(--motion-wag), box-shadow 0.25s var(--motion-wag);
	/* 3-layer diffuse ambient shadows — no single hard black cast */
	box-shadow:
		0 1px 2px rgba(30, 25, 18, 0.10),
		0 6px 14px rgba(30, 25, 18, 0.08),
		0 22px 38px -10px rgba(30, 25, 18, 0.16);
}
.tt-pola-photo {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 1px;
	/* opaque warm backing behind the (lazy-loading) print */
	background-color: #efe8d8;
	/* the print sits slightly recessed into the paper */
	box-shadow: inset 0 1px 5px rgba(30, 25, 18, 0.26), inset 0 0 2px rgba(30, 25, 18, 0.16);
}
.tt-pola-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}
/* 135° ultra-subtle laminated sheen across the photo */
.tt-pola-sheen {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(255, 255, 255, 0) 46%);
	pointer-events: none;
}
.tt-pola figcaption {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	height: 28px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--wp--preset--font-family--caveat);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.15;
	color: #3b3a36;
	overflow: hidden;
}
/* semi-transparent washi tape with torn edges — universal across all prints with organic tilts */
.tt-pola::before,
.tt-pola-tape {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 56px;
	height: 18px;
	background: linear-gradient(105deg, rgba(244, 226, 158, 0.72), rgba(238, 216, 140, 0.58) 55%, rgba(244, 226, 158, 0.68));
	clip-path: polygon(4% 0, 96% 3%, 100% 26%, 97% 52%, 100% 78%, 96% 100%, 3% 97%, 0 74%, 3% 50%, 0 24%);
	transform: translateX(-50%) rotate(-3deg);
	z-index: 2;
	pointer-events: none;
}
.tt-pola:nth-child(2n)::before { transform: translateX(-50%) rotate(2.5deg); }
.tt-pola:nth-child(3n)::before { transform: translateX(-50%) rotate(-2deg); }
.tt-pola:nth-child(5n)::before { transform: translateX(-50%) rotate(3.5deg); }
.tt-pola:nth-child(7n)::before { transform: translateX(-50%) rotate(-3.5deg); }
.tt-pola-e .tt-pola-tape,
.tt-pola-e::before { transform: translateX(-50%) rotate(4deg); }
/* scattered, hand-placed tilts (-2.5° ~ +2.5°) */
.tt-pola-a { transform: rotate(-2.5deg); }
.tt-pola-b { transform: rotate(2deg); }
.tt-pola-c { transform: rotate(-1.5deg); }
.tt-pola-d { transform: rotate(2.5deg); }
.tt-pola-e { transform: rotate(-2deg); }
.tt-pola-f { transform: rotate(1.5deg); }
.tt-pola-g { transform: rotate(-2.2deg); }
/* hover: pop straight-up and enlarge — transform + z-index only,
   so neighbors never reflow and the layout never jumps */
.tt-pola:hover {
	transform: rotate(0deg) scale(1.45);
	z-index: 6;
	box-shadow:
		0 2px 3px rgba(30, 25, 18, 0.12),
		0 10px 20px rgba(30, 25, 18, 0.12),
		0 32px 52px -12px rgba(30, 25, 18, 0.24);
}
@media (prefers-reduced-motion: reduce) {
	.tt-pola { transition: none; }
	.tt-pola:hover { transform: none; z-index: 6; box-shadow:
		0 1px 2px rgba(30, 25, 18, 0.10),
		0 6px 14px rgba(30, 25, 18, 0.08),
		0 22px 38px -10px rgba(30, 25, 18, 0.16);
	}
}
@media (min-width: 900px) {
	.tt-wild-wall {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 28px;
		padding: 28px 8px 34px;
	}
	.tt-pola {
		flex: 0 0 auto;
		width: 240px;
		/* golden margin ratio restored on the big prints with safe chin for 1-2 line captions */
		padding: 13px 13px 62px;
	}
	.tt-pola figcaption {
		font-size: 20px;
		line-height: 1.15;
		left: 10px;
		right: 10px;
		bottom: 8px;
		height: 48px;
	}
	.tt-pola::before,
	.tt-pola-tape {
		top: -13px;
		width: 96px;
		height: 28px;
	}
	.tt-pola:hover { transform: rotate(0deg) scale(1.25); }
	/* staggered, hand-placed feel */
	.tt-pola:nth-child(2n) { margin-top: 28px; }
	.tt-pola:nth-child(3n) { margin-top: 10px; }
}

/* M5-T1 · 404 page */
.tt-404 { text-align: center; padding: 24px 0; }
.tt-404-big {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: clamp(72px, 14vw, 140px);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--tangerine);
	margin: 0;
}
.tt-404-sub {
	font-size: 19px;
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
	margin: 16px 0 28px;
}

/* M4-T3 · Footer: newsletter placeholder + social icons (sticker language, no shadow) */
.tt-footer-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 32px;
	max-width: 1200px;
	margin: 0 auto 20px;
	padding: 0 20px;
}
.tt-newsletter-label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 18px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
}
.tt-newsletter-row {
	display: flex;
	gap: 8px;
}
.tt-newsletter input {
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 8px 18px;
	font-family: Nunito, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--espresso);
	background: var(--wp--preset--color--warm-paper);
	width: 220px;
}
.tt-newsletter input:focus {
	outline: 3px solid var(--wp--preset--color--tangerine);
	outline-offset: 1px;
}
.tt-newsletter button {
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 8px 22px;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	transition: transform 0.15s ease-out;
}
.tt-newsletter button:hover {
	background: var(--wp--preset--color--tangerine);
	color: #FFF7E8;
	transform: translateY(-2px);
}
.tt-newsletter button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}
.tt-newsletter-feedback {
	display: none;
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--baloo-2), sans-serif;
	text-align: left;
	animation: ttFeedbackPop 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes ttFeedbackPop {
	0% { opacity: 0; transform: scale(0.94) translateY(-3px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}
.tt-newsletter-feedback.is-success {
	display: block;
	background: var(--wp--preset--color--butter);
	border: 2.5px solid var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--espresso);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
}
.tt-newsletter-feedback.is-error {
	display: block;
	background: var(--wp--preset--color--peach);
	border: 2.5px solid #E76F51;
	color: var(--wp--preset--color--espresso);
	font-size: 14px;
	font-weight: 700;
}
.tt-feedback-head {
	font-size: 15px;
	font-weight: 800;
	margin-bottom: 4px;
}
.tt-feedback-coupon {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	flex-wrap: wrap;
}
.tt-coupon-code {
	display: inline-block;
	background: #FFF7E8;
	border: 2px dashed var(--wp--preset--color--espresso);
	border-radius: 6px;
	padding: 2px 8px;
	font-family: monospace;
	font-size: 14px;
	font-weight: 900;
	color: var(--wp--preset--color--tangerine);
	letter-spacing: 0.5px;
}
.tt-copy-btn {
	border: 2px solid var(--wp--preset--color--espresso) !important;
	border-radius: 9999px !important;
	padding: 2px 8px !important;
	background: var(--wp--preset--color--mint) !important;
	color: var(--wp--preset--color--espresso) !important;
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	cursor: pointer !important;
	transition: background 0.15s, transform 0.15s !important;
}
.tt-copy-btn:hover {
	background: var(--wp--preset--color--lemon) !important;
	transform: translateY(-1px) !important;
}
.tt-copy-btn.is-copied {
	background: #FFF7E8 !important;
	color: var(--wp--preset--color--espresso) !important;
}
.tt-social {
	display: flex;
	gap: 12px;
}
.tt-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	background: var(--wp--preset--color--warm-paper);
	color: var(--wp--preset--color--espresso);
	transition: transform 0.15s ease-out, background 0.15s ease-out;
}
.tt-social a:hover {
	background: var(--wp--preset--color--lemon);
	transform: translateY(-2px);
}
@media (max-width: 781px) {
	.tt-footer-bar {
		flex-direction: column;
		text-align: center;
	}
	.tt-newsletter-row { justify-content: center; }
	.tt-newsletter input { width: min(220px, 52vw); }
	.tt-newsletter-feedback { text-align: center; }
	.tt-feedback-coupon { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-newsletter button:hover, .tt-social a:hover { transform: none; }
}

/* M8-T2 #5 · Category pill nav (replaces the three oversized PICK YOUR
   PACK cards) — sticker capsules under MEET THE CLOCKS, linking to the
   category archives / custom page. Colors keep the old card identities:
   CATS tangerine / DOGS mint / CUSTOM deep-teal. */
.tt-cat-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 20px;
	margin-top: 24px;
}
.tt-pill {
	display: inline-block;
	padding: 8px 26px;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-decoration: none;
	color: var(--wp--preset--color--espresso);
	transition: transform 0.2s var(--motion-wag);
}
.tt-pill--cats   { background: var(--wp--preset--color--tangerine); transform: rotate(-2deg); }
.tt-pill--dogs   { background: var(--wp--preset--color--mint); transform: rotate(1.5deg); }
.tt-pill--custom { background: #1E3A4C; color: #FFF7E8; transform: rotate(-1deg); }
.tt-pill--cats:hover   { transform: rotate(0deg) translateY(-3px); }
.tt-pill--dogs:hover   { transform: rotate(0deg) translateY(-3px); }
.tt-pill--custom:hover { transform: rotate(0deg) translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
	.tt-pill { transition: none; }
	.tt-pill:hover { transform: none; }
}

/* Trust bar (framework §9: trust right after the hero) */
.tt-trust {
	background: var(--wp--preset--color--warm-paper);
	border-top: 3px solid var(--wp--preset--color--espresso);
	border-bottom: 3px solid var(--wp--preset--color--espresso);
	padding: 16px 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px 36px;
}
.tt-trust-item,
.tt-trust span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 15px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	white-space: nowrap;
}
.tt-trust-badge {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--warm-paper, #FFFAF0);
	border: 2px solid var(--wp--preset--color--espresso, #2B2118);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tt-trust-badge--whisper { background: #FFFAF0; }
.tt-trust-badge--battery { background: var(--wp--preset--color--soft-mint, #CDEBC5); }
.tt-trust-badge--package { background: var(--wp--preset--color--peach, #FFD9C7); }
.tt-trust-badge--kit     { background: var(--wp--preset--color--butter, #FFE9A8); }

.tt-trust-badge svg {
	display: block;
}
.tt-trust img { width: 16px; height: 16px; margin: 0; }

@media (max-width: 600px) {
	.tt-trust {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px 10px;
		padding: 16px 14px;
	}
	.tt-trust-item,
	.tt-trust span {
		font-size: 13px;
		gap: 6px;
		white-space: normal;
		line-height: 1.25;
	}
	.tt-trust-badge {
		width: 28px;
		height: 28px;
	}
	.tt-trust-badge svg {
		width: 15px;
		height: 15px;
	}
}

/* Section shell — uniform breathing room: 64px mobile, 104px desktop */
.tt-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 24px;
}
@media (min-width: 782px) {
	.tt-section { padding: 104px 24px; }
}
.tt-section-title {
	text-align: center;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 800;
	color: var(--wp--preset--color--tangerine);
	margin: 0;
}
.tt-section-sub {
	text-align: center;
	max-width: 480px;
	margin: 12px auto 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
}

/* Colorway wall → product wall (framework §7: the shelf) */
.tt-colorways {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 40px;
}
@media (min-width: 1024px) {
	.tt-colorways { grid-template-columns: repeat(4, 1fr); }
}
.tt-colorway {
	background: #fff;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 16px;
	padding: 16px;
	text-align: center;
	cursor: pointer;
	transition: transform 0.2s var(--motion-wag);
}
.tt-colorway:hover { transform: translateY(-4px) rotate(-1deg); }
.tt-colorway:hover img {
	animation: tt-wag 0.7s var(--motion-wag) infinite;
	transform-origin: bottom center;
}
.tt-colorway img {
	display: block;
	width: 100%;
	max-width: 150px;
	margin: 0 auto;
}
.tt-colorway .tt-name {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 16px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
}
.tt-colorway .tt-meta { margin-top: 12px; }

/* M7-T1 · Replaced by compact M12 tt-workshop Pop Craft cards */

@media (prefers-reduced-motion: reduce) {
	.tt-cta-wag:hover, .tt-colorway:hover img { animation: none; }
}

/* M6-T3 · Full-bleed hero background video. Copy sits above a warm-cream
   scrim (denser on the text side) so the sticker headline and CTA stay
   readable. prefers-reduced-motion: inline script pauses the video → poster. */
.tt-hero--video {
	overflow: hidden;
	isolation: isolate;
	/* M9-T1 fix: moved here from an inline style on the <main> block —
	   inline styles the block JSON doesn't declare make the editor flag
	   the group as invalid content */
	position: relative;
}
/* WP constrained layout caps every direct child at 1200px — the bg layers
   must break out to true full bleed */
.tt-hero--video > .tt-hero-bg,
.tt-hero--video > .tt-hero-scrim {
	max-width: none;
	margin: 0;
}
.tt-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.tt-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		rgba(253, 242, 223, 0.92) 0%,
		rgba(253, 242, 223, 0.85) 32%,
		rgba(253, 242, 223, 0.50) 62%,
		rgba(253, 242, 223, 0.30) 100%
	);
}
.tt-hero-copy {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 120px 24px 150px;
}
.tt-hero-copy p.has-body-lg-font-size {
	max-width: 560px;
	line-height: 1.5;
	color: var(--wp--preset--color--espresso, #2B2118);
}
@media (max-width: 781px) {
	.tt-hero-copy { padding: 72px 24px 84px; }
	/* Mobile: video is cover-cropped center; strengthen the scrim so the
	   copy survives the busier frame */
	.tt-hero-scrim {
		background: linear-gradient(
			180deg,
			rgba(253, 242, 223, 0.93) 0%,
			rgba(253, 242, 223, 0.84) 55%,
			rgba(253, 242, 223, 0.70) 100%
		);
	}
}

/* Content gutter: keep sections off the viewport edges (esp. mobile) */
.tt-hero {
	padding-left: 20px;
	padding-right: 20px;
}

/* M7-T1 #1 · Hero video sits flush against the sticky header's bottom edge
   (WP flow layout would otherwise inject a block-gap above main) */
.tt-hero { margin-block-start: 0 !important; }

/* ---------------------------------------------------------------
   M11-T1 · Interactive Pendulum Cat Clock (Hero Section)
   Source: Abyssinian Cat Pendulum Clock (cat-2.svg, 642.56 x 1468.96)
   - Dual-axis physical animation:
     1. #tail pivot at (345.55px, 600px) swinging naturally
     2. #hour-hand, #minute-hand pivot at (255.45px, 714px) synced to local time
   --------------------------------------------------------------- */
.cat-clock-wrapper {
	position: relative;
	width: 100%;
	max-width: 368px;
	margin: 24px auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	filter: drop-shadow(0 18px 32px rgba(114, 44, 30, 0.12));
	z-index: 2;
}

.cat-clock-wrapper svg {
	width: 100%;
	height: auto;
	display: block;
}

/* 1. 尾巴独立旋转轴心 (345.55px, 600px) */
#tail {
	transform-box: view-box;
	transform-origin: 345.55px 600px;
	animation: catClockTail 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

@keyframes catClockTail {
	0% { transform: rotate(-6.5deg); }
	100% { transform: rotate(6.5deg); }
}

/* 2. 原版时针与分针独立旋转轴心 (255.45px, 714px) */
#hour-hand,
#minute-hand {
	transform-box: view-box;
	transform-origin: 255.45px 714px;
}

/* 分针微步进超调回弹（每秒跳动 0.1° 时呈现机械挂钟的微弹质感） */
#minute-hand {
	transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}

/* Hero Section Layout Integration (Scaled down 20% to leave ample vertical breathing room) */
@media (min-width: 782px) {
	.tt-hero .cat-clock-wrapper {
		position: absolute;
		right: max(32px, calc((100% - 1200px) / 2 + 48px));
		top: 50%;
		transform: translateY(-50%);
		width: 256px;
		max-width: 270px;
		margin: 0;
	}
}

@media (min-width: 782px) and (max-width: 1024px) {
	.tt-hero .cat-clock-wrapper {
		width: 216px;
		max-width: 232px;
	}
}

@media (max-width: 781px) {
	.tt-hero .cat-clock-wrapper {
		width: 100%;
		max-width: 224px;
		margin: 22px auto 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#tail {
		animation: none !important;
	}
	#minute-hand {
		transition: none !important;
	}
}

/* M7-T2 · Cat-tail cursor rebuild (desktop fine-pointer only; JS gates
   pointer:coarse and prefers-reduced-motion, so these rules only ever
   apply when the feature is active). The thin tail TIP is the click
   point: it sits exactly on the pointer, the tapered body trails
   back-down below it, and all rotation pivots on the tip. */
#tt-tail-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	/* M8-T3 #1: shrunk to 65% of the original 120×140 (JS writes
	   `transform`, so scale must come from the box size itself) */
	width: 78px;
	height: 91px;
	/* glue the SVG tip (60,18 → 39,11.7 at 0.65×) to the pointer */
	margin: -11.7px 0 0 -39px;
	pointer-events: none;
	transform-origin: 39px 11.7px;
	will-change: transform;
	opacity: 0;
	transition: opacity 0.18s ease-out;
}
#tt-tail-cursor.is-active {
	opacity: 1;
}
/* never clip the tail, whatever the wag angle */
#tt-tail-cursor svg {
	display: block;
	overflow: visible;
}
html.tt-tail-on,
html.tt-tail-on *,
body.tt-tail-on,
body.tt-tail-on * {
	cursor: none !important;
}

/* ---------------------------------------------------------------
   WooCommerce product cards (shortcode [products]) in sticker language
   --------------------------------------------------------------- */
.tt-section .tt-products ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}
/* WooCommerce's clearfix pseudo-elements would occupy grid cells */
.tt-products ul.products::before,
.tt-products ul.products::after {
	display: none;
	content: none;
}
@media (min-width: 1024px) {
	.tt-section .tt-products ul.products { grid-template-columns: repeat(4, 1fr); }
}
.tt-products ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
	position: relative !important;
	overflow: hidden !important;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--warm-paper, #FFFDF8);
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 20px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	padding: 20px 16px 22px;
	margin: 0;
	text-align: center;
	float: none;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	transition: transform 0.2s var(--motion-wag), box-shadow 0.2s var(--motion-wag);
}
.tt-products ul.products li.product:hover {
	transform: translateY(-5px) rotate(-1deg);
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso);
}
.tt-products ul.products li.product a { text-decoration: none; }
/* M8-T2 fix: WC's own `.woocommerce ul.products li.product a img
   { height:auto }` has specificity (0,3,4) — one element higher than
   our li.product img (0,3,3) — so images rendered at natural height
   (portrait cats ≈377px vs landscape pug ≈211px) and every text line
   drifted. The `a img` tail pushes us to (0,3,5) and wins. */
body .tt-products ul.products li.product a img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: contain;
	object-position: center;
	margin: 0 auto 8px;
	box-shadow: none;
	transition: opacity 0.25s ease;
}
.tt-products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 17px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	padding: 8px 0 0;
	line-height: 1.25;
	/* reserve two lines so the price line aligns across the row */
	min-height: 2.5em;
}
.tt-products ul.products li.product .price {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 20px;
	font-weight: 800;
	color: var(--wp--preset--color--tangerine);
	margin-top: 6px;
}
/* keep a minimum gap under the link; the button then sinks to the
   card bottom via margin-top:auto so all buttons align in a row */
.tt-products ul.products li.product .woocommerce-loop-product__link {
	display: block;
	margin-bottom: 14px;
}
.tt-products ul.products li.product .button,
.woocommerce ul.products li.product .button,
.tt-products ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .added_to_cart {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	margin-top: auto !important;
	margin-bottom: 0 !important;
	height: 42px !important;
	min-height: 42px !important;
	padding: 8px 22px !important;
	box-sizing: border-box !important;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--espresso) !important;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 9999px !important;
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	box-shadow: 2.5px 2.5px 0 var(--wp--preset--color--espresso) !important;
	transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out !important;
}
.tt-products ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
	background: var(--wp--preset--color--tangerine) !important;
	color: #fff !important;
	transform: translateY(-2px);
}
.tt-products ul.products li.product .button.added,
.woocommerce ul.products li.product .button.added {
	display: none !important;
}
.tt-products ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .added_to_cart {
	background: var(--wp--preset--color--tangerine) !important;
	color: #fff !important;
}
.tt-products ul.products li.product .added_to_cart::after,
.woocommerce ul.products li.product .added_to_cart::after {
	content: " →";
}
.tt-products ul.products li.product .added_to_cart:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
	background: var(--wp--preset--color--highlight, #FFE9A8) !important;
	color: var(--wp--preset--color--espresso) !important;
	transform: translateY(-2px);
}


/* ---------------------------------------------------------------
   M5-T2 · WooCommerce archive + single-product sticker skin
   (legacy-template output, scoped to WC pages; homepage unaffected)
   --------------------------------------------------------------- */

/* Archive product grid: same sticker card language as the homepage wall */
body.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after {
	display: none;
	content: none;
}
@media (min-width: 1024px) {
	body.woocommerce-page ul.products { grid-template-columns: repeat(4, 1fr); }
}
body.woocommerce-page ul.products li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	position: relative !important;
	overflow: hidden !important;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--warm-paper, #FFFDF8);
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 20px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	padding: 20px 16px 22px;
	margin: 0;
	text-align: center;
	float: none;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	transition: transform 0.2s var(--motion-wag), box-shadow 0.2s var(--motion-wag);
}
body.woocommerce-page ul.products li.product:hover {
	transform: translateY(-5px) rotate(-1deg);
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso);
}
body.woocommerce-page ul.products li.product a { text-decoration: none; }
body.woocommerce-page ul.products li.product a img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: contain;
	object-position: center;
	margin: 0 auto 8px;
	box-shadow: none;
	transition: opacity 0.25s ease;
}
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__link .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 17px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	padding: 8px 0 0;
	line-height: 1.25;
	/* reserve two lines so the price line aligns across the row */
	min-height: 2.5em;
}
body.woocommerce-page ul.products li.product .price {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 20px;
	font-weight: 800;
	color: var(--wp--preset--color--tangerine);
	margin-top: 6px;
}
/* min gap under the link; button sinks via margin-top:auto */
body.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
	display: block;
	margin-bottom: 14px;
}
body.woocommerce-page .products .button,
body.woocommerce-page a.button.add_to_cart_button,
body.woocommerce-page ul.products li.product .button,
body.woocommerce-page .products .added_to_cart,
body.woocommerce-page ul.products li.product .added_to_cart {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	margin-top: auto !important;
	margin-bottom: 0 !important;
	height: 42px !important;
	min-height: 42px !important;
	padding: 8px 22px !important;
	box-sizing: border-box !important;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--espresso) !important;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 9999px !important;
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	box-shadow: 2.5px 2.5px 0 var(--wp--preset--color--espresso) !important;
	transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out !important;
}
body.woocommerce-page .products .button:hover,
body.woocommerce-page a.button.add_to_cart_button:hover,
body.woocommerce-page ul.products li.product .button:hover {
	background: var(--wp--preset--color--tangerine) !important;
	color: #fff !important;
	transform: translateY(-2px);
}
body.woocommerce-page .products .button.added,
body.woocommerce-page a.button.add_to_cart_button.added,
body.woocommerce-page ul.products li.product .button.added {
	display: none !important;
}
body.woocommerce-page .products .added_to_cart,
body.woocommerce-page ul.products li.product .added_to_cart {
	background: var(--wp--preset--color--tangerine) !important;
	color: #fff !important;
}
body.woocommerce-page .products .added_to_cart::after,
body.woocommerce-page ul.products li.product .added_to_cart::after {
	content: " →";
}
body.woocommerce-page .products .added_to_cart:hover,
body.woocommerce-page ul.products li.product .added_to_cart:hover {
	background: var(--wp--preset--color--highlight, #FFE9A8) !important;
	color: var(--wp--preset--color--espresso) !important;
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   Product Card Video Hover Effect (Full Card Fill)
   --------------------------------------------------------------- */
.tt-card-video-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	border-radius: 13px;
	overflow: hidden;
	background: var(--wp--preset--color--espresso);
	transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tt-card-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Subtle gradient scrim over the video at bottom to ensure text & buttons pop */
.tt-card-video-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(43, 33, 24, 0.92) 0%,
		rgba(43, 33, 24, 0.68) 32%,
		rgba(43, 33, 24, 0.2) 60%,
		transparent 100%
	);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

/* Hover trigger (pure CSS fallback + JS class synergy) */
@media (hover: hover) {
	li.product.has-video-preview:hover .tt-card-video-wrap,
	li.product.is-video-active .tt-card-video-wrap {
		opacity: 1;
	}
	li.product.has-video-preview:hover .tt-card-video-wrap::after,
	li.product.is-video-active .tt-card-video-wrap::after {
		opacity: 1;
	}

	/* Fade out static product image to let video fill the entire card unobstructed */
	li.product.has-video-preview:hover .woocommerce-loop-product__link img,
	li.product.is-video-active .woocommerce-loop-product__link img,
	li.product.has-video-preview:hover a img,
	li.product.is-video-active a img {
		opacity: 0 !important;
	}

	/* High-contrast typography only on cards with active video preview */
	li.product.has-video-preview:hover .woocommerce-loop-product__title,
	li.product.is-video-active .woocommerce-loop-product__title {
		color: #FFFDF8 !important;
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
	}
	li.product.has-video-preview:hover .price,
	li.product.is-video-active .price {
		color: var(--wp--preset--color--lemon) !important;
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
	}
	li.product.has-video-preview:hover .price .woocommerce-Price-amount,
	li.product.is-video-active .price .woocommerce-Price-amount {
		color: var(--wp--preset--color--lemon) !important;
	}
	li.product.has-video-preview:hover .tt-card-stars-num,
	li.product.is-video-active .tt-card-stars-num {
		color: #FFFDF8 !important;
	}
}

/* Layering: ensure card link, title, stars, price, and CTA float above video */
.tt-products ul.products li.product .woocommerce-loop-product__link,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
	position: relative;
	z-index: 3;
}

.tt-products ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.tt-products ul.products li.product .tt-card-stars,
body.woocommerce-page ul.products li.product .tt-card-stars,
.tt-products ul.products li.product .price,
body.woocommerce-page ul.products li.product .price {
	position: relative;
	z-index: 3;
	transition: color 0.25s ease, text-shadow 0.25s ease;
}

.tt-products ul.products li.product .button,
body.woocommerce-page .products .button,
body.woocommerce-page a.button.add_to_cart_button,
.tt-products ul.products li.product .added_to_cart,
body.woocommerce-page .products .added_to_cart {
	position: relative;
	z-index: 4;
}

/* ---------------------------------------------------------------
   Product Card Interactive Wag Pill (Mobile / Touch Preview Pill)
   --------------------------------------------------------------- */
.tt-card-wag-pill {
	display: none; /* Hidden on desktop: mouse hover triggers full preview */
}

/* ---------------------------------------------------------------
   M10-T1 · Mobile Horizontal Banner Cards & Viewport Auto-Wag
   (Scoped to mobile viewports < 768px; desktop 4-col grid unaffected)
   --------------------------------------------------------------- */
@media (max-width: 767px) {
	/* 1. Single-column list layout */
	.tt-section .tt-products ul.products,
	body.woocommerce-page ul.products,
	.woocommerce ul.products[class*="columns-"] {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 14px !important;
		margin-top: 20px !important;
		margin-bottom: 28px !important;
		padding: 0 !important;
	}

	/* 2. Horizontal banner card container */
	.tt-products ul.products li.product,
	body.woocommerce-page ul.products li.product,
	.woocommerce ul.products[class*="columns-"] li.product {
		position: relative !important;
		display: block !important;
		padding: 12px !important;
		border-radius: 18px !important;
		border: 3px solid var(--wp--preset--color--espresso) !important;
		box-shadow: 3.5px 3.5px 0 var(--wp--preset--color--espresso) !important;
		background: var(--wp--preset--color--warm-paper, #FFFDF8) !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 144px !important;
		text-align: left !important;
		float: none !important;
		margin: 0 !important;
		overflow: hidden !important;
		transition: transform 0.2s var(--motion-wag), box-shadow 0.2s var(--motion-wag) !important;
	}

	.tt-products ul.products li.product:active,
	body.woocommerce-page ul.products li.product:active {
		transform: scale(0.99) !important;
	}

	/* 3. Link wrapper: 2-column grid (Left: 120px media, Right: info) */
	.tt-products ul.products li.product .woocommerce-loop-product__link,
	body.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
		display: grid !important;
		grid-template-columns: 120px minmax(0, 1fr) !important;
		column-gap: 14px !important;
		align-items: start !important;
		margin-bottom: 0 !important;
		text-decoration: none !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* 4. Left thumbnail image */
	.tt-products ul.products li.product .woocommerce-loop-product__link img,
	body.woocommerce-page ul.products li.product .woocommerce-loop-product__link img,
	body .tt-products ul.products li.product a img,
	body.woocommerce-page ul.products li.product a img {
		grid-column: 1 !important;
		grid-row: 1 / span 5 !important;
		width: 120px !important;
		height: 120px !important;
		min-width: 120px !important;
		max-width: 120px !important;
		min-height: 120px !important;
		max-height: 120px !important;
		object-fit: contain !important;
		object-position: center !important;
		background: #FFF9EF !important;
		border: 2px solid var(--wp--preset--color--espresso) !important;
		border-radius: 14px !important;
		padding: 6px !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		box-shadow: none !important;
		transition: opacity 0.3s ease !important;
	}

	/* 5. Right column: Product title */
	.tt-products ul.products li.product .woocommerce-loop-product__title,
	body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
		grid-column: 2 !important;
		grid-row: 1 !important;
		font-family: var(--wp--preset--font-family--baloo-2) !important;
		font-size: 15px !important;
		font-weight: 800 !important;
		line-height: 1.25 !important;
		color: var(--wp--preset--color--espresso) !important;
		padding: 0 !important;
		margin: 0 !important;
		min-height: auto !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		text-align: left !important;
		padding-right: 4px !important;
		text-shadow: none !important;
	}

	/* 6. Right column: Rating stars */
	.tt-products ul.products li.product .tt-card-stars,
	body.woocommerce-page ul.products li.product .tt-card-stars {
		grid-column: 2 !important;
		grid-row: 2 !important;
		margin-top: 4px !important;
		margin-bottom: 0 !important;
		text-align: left !important;
		font-size: 12px !important;
		line-height: 1 !important;
	}
	.tt-products ul.products li.product .tt-card-stars .tt-stars,
	body.woocommerce-page ul.products li.product .tt-card-stars .tt-stars {
		color: var(--wp--preset--color--tangerine) !important;
		letter-spacing: 1px !important;
		font-size: 12px !important;
	}
	.tt-products ul.products li.product .tt-card-stars-num,
	body.woocommerce-page ul.products li.product .tt-card-stars-num {
		color: var(--wp--preset--color--espresso) !important;
		font-weight: 800 !important;
		font-size: 12px !important;
	}

	/* 7. Right column: Price */
	.tt-products ul.products li.product .price,
	body.woocommerce-page ul.products li.product .price {
		grid-column: 2 !important;
		grid-row: 3 !important;
		font-family: var(--wp--preset--font-family--baloo-2) !important;
		font-size: 18px !important;
		font-weight: 800 !important;
		color: var(--wp--preset--color--tangerine) !important;
		margin-top: 6px !important;
		margin-bottom: 0 !important;
		text-align: left !important;
		line-height: 1 !important;
		text-shadow: none !important;
	}
	.tt-products ul.products li.product .price .woocommerce-Price-amount,
	body.woocommerce-page ul.products li.product .price .woocommerce-Price-amount {
		color: var(--wp--preset--color--tangerine) !important;
		text-shadow: none !important;
	}

	/* 8. Bottom-Right: Add to Cart button */
	.tt-products ul.products li.product .button,
	body.woocommerce-page .products .button,
	body.woocommerce-page a.button.add_to_cart_button,
	.tt-products ul.products li.product .added_to_cart,
	body.woocommerce-page .products .added_to_cart {
		position: absolute !important;
		right: 12px !important;
		bottom: 12px !important;
		margin: 0 !important;
		height: 32px !important;
		min-height: 32px !important;
		padding: 0 14px !important;
		font-size: 12px !important;
		font-weight: 800 !important;
		border: 2px solid var(--wp--preset--color--espresso) !important;
		box-shadow: 2px 2px 0 var(--wp--preset--color--espresso) !important;
		border-radius: 999px !important;
		background: var(--wp--preset--color--mint) !important;
		color: var(--wp--preset--color--espresso) !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		z-index: 5 !important;
		line-height: 1 !important;
		white-space: nowrap !important;
	}
	.tt-products ul.products li.product .added_to_cart,
	body.woocommerce-page .products .added_to_cart {
		background: var(--wp--preset--color--highlight, #FFE9A8) !important;
	}

	/* 9. Video container: tightly scoped to the 120x120 left thumbnail box */
	.tt-products ul.products li.product .tt-card-video-wrap,
	body.woocommerce-page ul.products li.product .tt-card-video-wrap {
		position: absolute !important;
		top: 12px !important;
		left: 12px !important;
		width: 120px !important;
		height: 120px !important;
		border-radius: 14px !important;
		border: 2px solid var(--wp--preset--color--espresso) !important;
		background: var(--wp--preset--color--espresso) !important;
		overflow: hidden !important;
		z-index: 3 !important;
		opacity: 0 !important;
		transition: opacity 0.35s ease !important;
		pointer-events: none !important;
		box-sizing: border-box !important;
	}
	.tt-products ul.products li.product .tt-card-video,
	body.woocommerce-page ul.products li.product .tt-card-video {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		display: block !important;
	}
	.tt-card-video-wrap::after {
		display: none !important; /* No dark gradient scrim needed on miniature thumbnail */
	}

	/* Active state on mobile: video fades in inside thumbnail box */
	.tt-products ul.products li.product.is-video-active .tt-card-video-wrap,
	body.woocommerce-page ul.products li.product.is-video-active .tt-card-video-wrap {
		opacity: 1 !important;
	}
	.tt-products ul.products li.product.is-video-active .woocommerce-loop-product__link img,
	body.woocommerce-page ul.products li.product.is-video-active .woocommerce-loop-product__link img,
	body .tt-products ul.products li.product.is-video-active a img,
	body.woocommerce-page ul.products li.product.is-video-active a img {
		opacity: 0 !important;
	}

	/* Text stays crisp and high-contrast dark on warm paper */
	.tt-products ul.products li.product.is-video-active .woocommerce-loop-product__title,
	body.woocommerce-page ul.products li.product.is-video-active .woocommerce-loop-product__title {
		color: var(--wp--preset--color--espresso) !important;
		text-shadow: none !important;
	}
	.tt-products ul.products li.product.is-video-active .price,
	body.woocommerce-page ul.products li.product.is-video-active .price,
	.tt-products ul.products li.product.is-video-active .price .woocommerce-Price-amount,
	body.woocommerce-page ul.products li.product.is-video-active .price .woocommerce-Price-amount {
		color: var(--wp--preset--color--tangerine) !important;
		text-shadow: none !important;
	}
	.tt-products ul.products li.product.is-video-active .tt-card-stars-num,
	body.woocommerce-page ul.products li.product.is-video-active .tt-card-stars-num {
		color: var(--wp--preset--color--espresso) !important;
	}

	/* 10. Interactive Wag Pill on mobile */
	.tt-card-wag-pill {
		display: inline-flex !important;
		position: absolute !important;
		bottom: 18px !important;
		left: 18px !important;
		z-index: 6 !important;
		align-items: center !important;
		gap: 3px !important;
		padding: 3px 8px !important;
		background: rgba(43, 33, 24, 0.85) !important;
		backdrop-filter: blur(4px) !important;
		-webkit-backdrop-filter: blur(4px) !important;
		color: #FFFDF8 !important;
		border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
		border-radius: 999px !important;
		font-family: var(--wp--preset--font-family--baloo-2) !important;
		font-size: 10px !important;
		font-weight: 800 !important;
		letter-spacing: 0.02em !important;
		cursor: pointer !important;
		line-height: 1 !important;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
		transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
		-webkit-tap-highlight-color: transparent !important;
	}
	.tt-card-wag-pill .tt-pill-icon {
		font-size: 8px !important;
		line-height: 1 !important;
		display: inline-block !important;
	}
	.tt-card-wag-pill:active {
		transform: scale(0.93) !important;
	}
	/* Active Wag Pill: Tangerine pop + glow */
	li.product.is-video-active .tt-card-wag-pill,
	.tt-card-wag-pill.is-playing {
		background: var(--wp--preset--color--tangerine, #E86130) !important;
		border-color: #FFFDF8 !important;
		color: #FFFDF8 !important;
		box-shadow: 0 2px 8px rgba(232, 97, 48, 0.55) !important;
	}
	@keyframes tt-pill-pulse {
		0%, 100% { opacity: 1; transform: scale(1); }
		50% { opacity: 0.6; transform: scale(0.9); }
	}
	.tt-card-wag-pill.is-playing .tt-pill-icon {
		animation: tt-pill-pulse 1.2s infinite ease-in-out !important;
	}
}

/* Archive chrome: result count / sort dropdown / pagination */
.woocommerce-result-count {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
}
.woocommerce-ordering select {
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 6px 14px;
	background: var(--wp--preset--color--warm-paper);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
}
.woocommerce-pagination ul.page-numbers {
	border: none;
	display: flex;
	gap: 8px;
	justify-content: center;
}
.woocommerce-pagination ul.page-numbers li {
	border: none;
	float: none;
}
.woocommerce-pagination .page-numbers {
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 4px 14px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	background: var(--wp--preset--color--warm-paper);
	text-decoration: none;
}
.woocommerce-pagination .page-numbers.current {
	background: var(--wp--preset--color--tangerine);
	color: #FFF7E8;
}

/* Breadcrumb: small, espresso, quiet */
.woocommerce-breadcrumb {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
	margin-bottom: 20px;
}
.woocommerce-breadcrumb a { color: var(--wp--preset--color--tangerine); }

/* Archive: the sticker query-title is the only page heading —
   hide WC legacy template's duplicate title */
.woocommerce-products-header__title.page-title { display: none; }

/* ===============================================================
   M9 · Single Product Page (PDP) — 7-Step High-Converting Funnel
   =============================================================== */
.tt-pdp-page {
	overflow-x: hidden;
}

/* 1. PDP Buy Box Hero */
.tt-pdp-hero {
	padding: 40px 24px 130px 24px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.single-product .tt-pdp-hero div.product {
	display: grid !important;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
	gap: 56px !important;
	align-items: start !important;
	margin: 0 auto !important;
	padding: 0 !important;
	float: none !important;
	position: relative;
	width: 100% !important;
	max-width: 1200px !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
.single-product .tt-pdp-hero div.product::before,
.single-product .tt-pdp-hero div.product::after {
	display: none !important;
}

.single-product .tt-pdp-hero div.product > *,
.single-product .tt-pdp-hero .woocommerce-product-gallery,
.single-product .tt-pdp-hero .summary.entry-summary {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* Gallery Column */
.single-product .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
@media (min-width: 961px) {
	.single-product .woocommerce-product-gallery {
		position: sticky;
		top: 100px;
	}
}
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	height: 480px !important;
	background: var(--wp--preset--color--warm-paper);
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 24px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	overflow: hidden;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
	height: 480px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-sizing: border-box;
	text-align: center;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	padding: 24px;
	box-sizing: border-box;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	max-height: 432px !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
	margin: 0 auto !important;
	border: none !important;
	border-radius: 14px;
	display: block !important;
	transition: none !important;
	transform: none !important;
}
.single-product .woocommerce-product-gallery img:hover {
	transform: none !important;
}

/* Lightbox trigger button */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--warm-paper);
	border: 2px solid var(--wp--preset--color--espresso);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger img.emoji {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
}

/* Wag Badge Sticker on Gallery */
.tt-gallery-wag-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--butter);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	line-height: 1;
	pointer-events: none;
}
.tt-wag-badge-paw {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	fill: currentColor;
}
.single-product img.emoji,
.tt-pdp-page img.emoji {
	width: 18px !important;
	height: 18px !important;
	vertical-align: -3px !important;
	display: inline-block !important;
	margin: 0 !important;
}
.tt-wag-badge-pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
	border: 1.5px solid var(--wp--preset--color--espresso);
	animation: ttPulse 1.8s infinite;
}
@keyframes ttPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.35); opacity: 0.7; }
}

/* Gallery Flexslider Thumbnails */
.single-product .woocommerce-product-gallery .flex-control-thumbs,
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex !important;
	gap: 10px !important;
	margin: 20px 0 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce div.product div.images .flex-control-thumbs li {
	flex: 1 1 0;
	min-width: 0;
	width: auto !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	float: none !important;
	margin: 0 !important;
	position: relative;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img,
.woocommerce div.product div.images .flex-control-thumbs img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover !important;
	background: var(--wp--preset--color--warm-paper);
	border: 2.5px solid var(--wp--preset--color--espresso) !important;
	border-radius: 14px !important;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	cursor: pointer;
	opacity: 0.7;
	padding: 3px;
	box-sizing: border-box;
	transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
	opacity: 1;
	border-color: var(--wp--preset--color--tangerine) !important;
	transform: translateY(-2px);
}

/* Summary Column Elements */
.single-product .product_title {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: clamp(30px, 3.5vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 12px 0;
}

/* Rating Row */
.tt-pdp-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}
.tt-pdp-rating-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--wp--preset--color--espresso);
	font-weight: 700;
	font-size: 14px;
	transition: color 0.15s ease;
}
.tt-pdp-rating-link:hover {
	color: var(--wp--preset--color--tangerine);
}
.tt-pdp-rating .tt-stars {
	color: #F5A623;
	letter-spacing: 2px;
	font-size: 16px;
}
.tt-pdp-rating-val {
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
}
.tt-pdp-rating-count {
	color: #7D6B5D;
	font-size: 13px;
}
.tt-pdp-stock-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #E8F8F0;
	border: 1.5px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 700;
	color: #1B6E45;
}
.tt-stock-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #27AE60;
	display: inline-block;
}

/* Price */
.single-product .summary .price {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 34px;
	font-weight: 800;
	color: var(--wp--preset--color--tangerine);
	margin: 0 0 16px 0;
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.single-product .summary .price del {
	font-size: 22px;
	color: #9E8C7E;
	opacity: 0.65;
}
.single-product .summary .price ins {
	text-decoration: none;
}

/* Short Description */
.single-product .woocommerce-product-details__short-description {
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--espresso);
	margin-bottom: 20px;
}

/* Key Selling Points Checklist */
.tt-pdp-bullets {
	list-style: none;
	padding: 16px 20px;
	margin: 0 0 24px 0;
	background: var(--wp--preset--color--warm-paper);
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 16px;
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tt-pdp-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--espresso);
}
.tt-pdp-bullets .tt-bullet-icon {
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 2px;
}

/* Custom Order Workflow Box */
.tt-custom-flow-box {
	background: #FFF9ED;
	border: 2.5px dashed var(--wp--preset--color--tangerine);
	border-radius: 16px;
	padding: 16px 20px;
	margin-bottom: 24px;
}
.tt-custom-flow-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 14px;
	color: var(--wp--preset--color--espresso);
}
.tt-custom-flow-badge {
	background: var(--wp--preset--color--tangerine);
	color: #FFF7E8;
	font-size: 11px;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 6px;
	letter-spacing: 0.5px;
}
.tt-custom-flow-steps {
	margin: 0;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--espresso);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Quantity & Add to Cart Row */
.single-product form.cart {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.single-product .quantity {
	display: inline-flex;
}
.single-product .quantity input.qty {
	width: 68px;
	height: 52px;
	text-align: center;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 18px;
	font-weight: 800;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 14px;
	background: var(--wp--preset--color--warm-paper);
	color: var(--wp--preset--color--espresso);
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
	padding: 0;
	-moz-appearance: textfield;
}
.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.single-product button.single_add_to_cart_button {
	flex: 1;
	min-width: 220px;
	height: 52px;
	background: var(--wp--preset--color--tangerine);
	color: #FFF7E8;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 18px;
	font-weight: 800;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 32px;
}
.single-product button.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--espresso);
	transform: translateY(-2px);
	box-shadow: 4px 6px 0 var(--wp--preset--color--espresso);
}
.single-product button.single_add_to_cart_button:active {
	transform: translateY(1px);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
}

/* Trust Pills Strip */
.tt-pdp-trust-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 6px;
}
.tt-trust-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--wp--preset--color--warm-paper);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 12px;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	text-align: center;
}
.tt-trust-pill img {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Product Meta */
.single-product .product_meta {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1.5px dashed #E2D7C8;
	font-size: 13px;
	color: #7D6B5D;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.single-product .product_meta a {
	color: var(--wp--preset--color--espresso);
	font-weight: 700;
	text-decoration: underline;
}

/* 2. Section: Craftsmanship Features Band */
.tt-pdp-features-band {
	padding: 40px 0 60px 0;
}
.tt-pdp-features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 36px;
}
.tt-feature-card {
	background: var(--wp--preset--color--warm-paper);
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 20px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	padding: 16px 16px 22px 16px;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tt-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 4px 8px 0 var(--wp--preset--color--espresso);
}
.tt-feature-img-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 14px;
	overflow: hidden;
	background: #FFFDF8;
	margin-bottom: 16px;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
}
.tt-feature-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.tt-feature-card:hover .tt-feature-img {
	transform: scale(1.04);
}
.tt-feature-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	background: var(--wp--preset--color--butter);
	color: var(--wp--preset--color--espresso);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 4px 9px;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	z-index: 2;
}
.tt-feature-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.tt-feature-icon {
	font-size: 28px;
	margin-bottom: 8px;
	line-height: 1;
	display: block;
}
.tt-feature-title {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 19px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 8px 0;
	line-height: 1.25;
}
.tt-feature-desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--espresso);
	margin: 0;
}

/* 3. Section: Scale & Dimensions */
.tt-pdp-scale-section {
	padding: 60px 24px;
}
.tt-pdp-scale-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
	margin-top: 36px;
}
.tt-scale-image-wrap {
	position: relative;
	background: var(--wp--preset--color--warm-paper);
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 24px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	overflow: hidden;
}
.tt-scale-img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
}
.tt-scale-sticker-badge {
	position: absolute;
	bottom: 16px;
	left: 16px;
	background: var(--wp--preset--color--warm-paper);
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tt-scale-specs-card {
	background: var(--wp--preset--color--warm-paper);
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 24px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	padding: 28px;
}
.tt-specs-heading {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 24px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 18px 0;
}
.tt-specs-table {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tt-spec-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 10px;
	border-bottom: 1.5px dashed #E2D7C8;
	font-size: 14px;
}
.tt-spec-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.tt-spec-name {
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	flex-shrink: 0;
}
.tt-spec-val {
	text-align: right;
	color: #635447;
	font-weight: 600;
}

/* 4. Section: FAQ Accordion */
.tt-faq {
	padding-top: 64px;
	padding-bottom: 64px;
	box-sizing: border-box;
}
@media (min-width: 782px) {
	.tt-faq {
		padding-top: 96px;
		padding-bottom: 96px;
	}
}
.tt-faq .tt-section-title {
	font-size: clamp(24px, 5.5vw, 48px);
}
.tt-pdp-faq-band {
	padding: 40px 0 60px 0;
}
.tt-faq-accordion {
	max-width: 820px;
	width: 100%;
	margin: 36px auto 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
}
details.tt-faq-card {
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--warm-paper, #FFFAF0);
	border: 3px solid var(--wp--preset--color--espresso, #2B2118);
	border-radius: 20px;
	overflow: hidden;
	transition: background-color 0.2s ease;
}
details.tt-faq-card:hover {
	background: #FFFDF8;
}
details.tt-faq-card[open] {
	background: #FFFDF8;
}
summary.tt-faq-summary {
	width: 100%;
	box-sizing: border-box;
	padding: 20px 24px;
	font-family: var(--wp--preset--font-family--baloo-2, "Baloo 2", cursive);
	font-size: 19px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso, #2B2118);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	list-style: none;
	user-select: none;
	line-height: 1.35;
}
summary.tt-faq-summary::-webkit-details-marker {
	display: none;
}
.tt-faq-q {
	flex: 1;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}
.tt-faq-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--butter, #FFEAA7);
	border: 2px solid var(--wp--preset--color--espresso, #2B2118);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--baloo-2, sans-serif);
	font-size: 20px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso, #2B2118);
	transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s ease, color 0.2s ease;
	line-height: 1;
	flex-shrink: 0;
}
details.tt-faq-card[open] .tt-faq-icon {
	transform: rotate(45deg);
	background: var(--wp--preset--color--tangerine, #F2782C);
	color: #FFF7E8;
}
.tt-faq-body {
	box-sizing: border-box;
	padding: 0 24px 22px 24px;
	font-size: 16px;
	line-height: 1.6;
	color: #4A3E36;
	border-top: 1.5px dashed rgba(43, 33, 24, 0.15);
	padding-top: 16px;
}
.tt-faq-body p {
	margin: 0;
}
.tt-faq-body p + p {
	margin-top: 10px;
}
.tt-faq-body ul {
	margin: 10px 0 12px 0;
	padding-left: 22px;
}
.tt-faq-body li {
	margin-bottom: 8px;
	line-height: 1.55;
}
@media (max-width: 600px) {
	.tt-faq {
		padding: 48px 16px;
	}
	.tt-faq .tt-section-title {
		font-size: clamp(22px, 6vw, 32px);
	}
	.tt-faq-accordion {
		margin-top: 24px;
		gap: 12px;
	}
	details.tt-faq-card {
		border-radius: 16px;
	}
	summary.tt-faq-summary {
		padding: 14px 16px;
		font-size: 16px;
		gap: 12px;
	}
	.tt-faq-icon {
		width: 28px;
		height: 28px;
		font-size: 18px;
	}
	.tt-faq-body {
		padding: 0 16px 16px 16px;
		padding-top: 12px;
		font-size: 14px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.tt-faq-card,
	.tt-faq-icon {
		transition: none !important;
	}
}

/* 5. Section: Reviews & Social Proof */
.tt-pdp-reviews-section {
	padding: 60px 24px;
}
.tt-reviews-header-card {
	background: var(--wp--preset--color--warm-paper);
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 20px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	padding: 24px 32px;
	margin: 36px 0 28px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}
.tt-reviews-score-col {
	display: flex;
	align-items: center;
	gap: 18px;
}
.tt-reviews-big-score {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 52px;
	font-weight: 900;
	color: var(--wp--preset--color--espresso);
	line-height: 1;
}
.tt-reviews-stars-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tt-reviews-stars-wrap .tt-stars {
	color: #F5A623;
	letter-spacing: 3px;
	font-size: 20px;
}
.tt-reviews-total {
	font-size: 14px;
	color: #7D6B5D;
	font-weight: 700;
}
.tt-reviews-badges-col {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tt-badge-pill {
	background: var(--wp--preset--color--mint);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
}
.tt-quotes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.tt-quote-card {
	background: var(--wp--preset--color--warm-paper);
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 20px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tt-quote-card .tt-quote-avatar {
	width: 56px;
	height: 56px;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 2.5px 2.5px 0 var(--wp--preset--color--espresso);
	background: #FFFDF8;
	flex-shrink: 0;
	margin: 0 0 4px 0;
	padding: 0;
}
.tt-quote-card .tt-quote-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	margin: 0 !important;
	object-fit: cover;
	object-position: center 30%;
}
.tt-quote-stars {
	color: #F5A623;
	letter-spacing: 2px;
	font-size: 16px;
}
.tt-quote-text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--espresso);
	margin: 0;
	flex-grow: 1;
	font-style: italic;
}
.tt-quote-author {
	font-weight: 800;
	font-size: 14px;
	color: var(--wp--preset--color--espresso);
	margin: 0;
}

/* 6. Section: Related Products Band */
.tt-pdp-related-band {
	padding: 40px 0 60px 0;
}

/* 7. Responsive Breakpoints for PDP */
@media (max-width: 960px) {
	.tt-pdp-hero {
		padding: 30px 20px 100px 20px;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}
	.single-product .tt-pdp-hero div.product {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 28px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
	.single-product .tt-pdp-hero div.product > *,
	.single-product .woocommerce-product-gallery,
	.single-product .summary.entry-summary {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
	.single-product .woocommerce-product-gallery {
		position: relative !important;
		top: auto !important;
	}
	.single-product .woocommerce-product-gallery .flex-viewport,
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
		height: 400px !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
		max-height: 350px !important;
	}
	.tt-pdp-features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tt-pdp-scale-grid {
		grid-template-columns: 1fr;
	}
	.tt-quotes-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.tt-pdp-hero {
		padding: 20px 16px 80px 16px;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}
	.single-product .tt-pdp-hero div.product {
		grid-template-columns: minmax(0, 1fr) !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
	.single-product .woocommerce-product-gallery .flex-viewport,
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
		height: 330px !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
		padding: 16px !important;
	}
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
		max-height: 280px !important;
	}
	.single-product .woocommerce-product-gallery .flex-control-thumbs,
	.woocommerce div.product div.images .flex-control-thumbs {
		margin-top: 14px !important;
		gap: 8px !important;
	}
	.single-product .product_title {
		font-size: 28px;
	}
	.tt-pdp-trust-strip {
		grid-template-columns: 1fr;
	}
	.tt-pdp-features-grid {
		grid-template-columns: 1fr;
	}
	.tt-reviews-header-card {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
	}
	.single-product form.cart {
		flex-direction: column;
		align-items: stretch;
	}
	.single-product button.single_add_to_cart_button {
		width: 100%;
	}
	.single-product .quantity {
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.tt-products ul.products li.product .added_to_cart:hover,
	body.woocommerce-page ul.products li.product:hover,
	body.woocommerce-page .products .button:hover,
	body.woocommerce-page .products .added_to_cart:hover,
	.single-product button.single_add_to_cart_button:hover { transform: none; }
}

/* ---------------------------------------------------------------
   M8-T1 · Section color bands + shaped edges (kit-cat.com style)
   Bands: Butter (MEET THE CLOCKS + trust) / Soft Mint (MAKE IT
   YOURS) / Peach (WAGGING IN THE WILD) / Navy (footer). Edges are
   tiling SVG strips (::before above / ::after below the band), so
   they never distort at any viewport width. Hero, PICK YOUR PACK
   and the timeline stay on the Cream canvas.
   --------------------------------------------------------------- */
.tt-band { position: relative; }
.tt-band::before,
.tt-band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 28px;
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: auto 100%;
	pointer-events: none;
	/* M8-T3 #3: bands no longer reserve margin gaps for their edges —
	   the strips stack ON TOP of the neighbouring section's edge, so
	   the shapes read as growing out of it (z-index beats the previous
	   section's content; hero's stacking context keeps this sane) */
	z-index: 2;
}
.tt-band::before { bottom: calc(100% - 2px); }
.tt-band::after { top: calc(100% - 2px); }

/* Butter — wave top only. M8-T4 #1: the bottom wave was removed —
   it dipped 26px into the Mint band while Mint's scallop rose 26px
   into Butter, and the two strips read as a ghosted double edge
   (yellow outline + green circles). The seam is now a single clean
   layer: straight Butter edge + Mint scallops overlapping it. */
.tt-band--butter {
	background: var(--wp--preset--color--butter);
	margin: 0;
	/* M8-T3 #3: the Mint scallop now overlaps this band's bottom edge
	   (no margin gap), so pad past the 28px strip to keep the trust
	   bar clear of it */
	padding-bottom: 48px;
}
.tt-band--butter::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 28 V16 Q15 4 30 16 T60 16 T90 16 T120 16 V28 Z' fill='%23FFE9A8'/%3E%3C/svg%3E");
	-webkit-clip-path: inset(2px 0 0 0);
	clip-path: inset(2px 0 0 0);
}
.tt-band--butter::after { content: none; }
/* trust bar merges into the band: drop its own paper bg + frame */
.tt-band--butter .tt-trust {
	background: transparent;
	border: 0;
}

/* Soft Mint — scallop (semicircles) top, wave bottom */
.tt-band--mint {
	background: var(--wp--preset--color--soft-mint);
	margin: 0;
}
.tt-band--mint::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 28 A28 28 0 0 1 56 28 Z' fill='%23CDEBC5'/%3E%3C/svg%3E");
}
.tt-band--mint::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 0 V12 Q15 24 30 12 T60 12 T90 12 T120 12 V0 Z' fill='%23CDEBC5'/%3E%3C/svg%3E");
	-webkit-clip-path: inset(0 0 2px 0);
	clip-path: inset(0 0 2px 0);
}

/* Peach — sitting-cat / standing-dog silhouette repeat on top */
.tt-band--peach {
	background: var(--wp--preset--color--peach);
	margin-top: 0;
}
.tt-band--peach::before {
	height: 80px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='80' viewBox='0 0 300 80'%3E%3Cg fill='none' stroke='%23FFD9C7' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M20 76 C8 76 3 69 7 61'/%3E%3Cpath d='M167 50 C158 43 157 33 162 25'/%3E%3C/g%3E%3Cg fill='%23FFD9C7'%3E%3Cpath d='M26 79 C17 76 12 66 15 55 C18 45 25 40 28 33 L23 12 L36 22 C38 20 41 20 43 20 L51 8 L56 23 C66 28 73 41 74 55 C76 68 74 76 71 79 Z'/%3E%3Cpath d='M165 79 L165 55 C165 48 168 45 175 43 L205 41 C211 41 215 38 216 31 L220 18 L226 26 L236 28 C241 30 244 35 243 40 L241 45 C239 50 236 51 231 51 L228 51 L228 79 L218 79 L218 61 L178 61 L178 79 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Navy footer — wave top, cream text, mint Join button kept */
.tt-band--navy {
	background: var(--wp--preset--color--navy);
	margin-top: 0;
	color: #FFF7E8;
}
/* Footer template-part gap reset: ensures template part and footer bands touch cleanly */
.wp-site-blocks > * + .wp-block-template-part:has(.tt-band--navy),
.wp-site-blocks > * + footer.wp-block-template-part,
footer.wp-block-template-part {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}
.tt-band--navy::before {
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 28 V16 Q15 4 30 16 T60 16 T90 16 T120 16 V28 Z' fill='%231D3557'/%3E%3C/svg%3E");
	-webkit-clip-path: inset(2px 0 0 0);
	clip-path: inset(2px 0 0 0);
}
.tt-band--navy .tt-newsletter-label,
.tt-band--navy p { color: #FFF7E8; }
.tt-band--navy .tt-social a {
	background: transparent;
	border-color: #FFF7E8;
	color: #FFF7E8;
}
.tt-band--navy .tt-social a:hover {
	background: var(--wp--preset--color--lemon);
	border-color: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--espresso);
}

/* smaller edge strips on phones — tiles scale with strip height,
   so shapes keep their aspect and never distort */
@media (max-width: 781px) {
	.tt-band::before,
	.tt-band::after { height: 20px; }
	.tt-band--butter,
	.tt-band--mint { margin: 0; }
	.tt-band--peach { margin-top: 0; }
	.tt-band--peach::before { height: 56px; }
	.tt-band--navy { margin-top: 0; }
	.tt-band--butter { padding-bottom: 36px; }
}

/* ---------------------------------------------------------------
   M8-T3 · Reviews layer + cursor shrink + edge masking fixes
   --------------------------------------------------------------- */

/* #2a · Hero rating badge: cream sticker pill so the stars stay
   readable over the video scrim. M8-T4 #2: CTA + badge live in a
   flex row — badge matches the CTA image height (300px-wide asset,
   1632×360 → 66px) and both are vertically centered */
.tt-hero-ctarow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 18px;
}
/* WP flow layout would push the second child down with block-gap */
.tt-hero-ctarow > * + * { margin-block-start: 0 !important; }
/* M9-T1 fix (round 2): this WP/Gutenberg version rejects width/height
   attributes + inline img styles on resized image blocks — the valid
   form is className "is-resized" with no inline style, so the rendered
   sizes live here in CSS instead (430px title, 300px/66px CTA) */
.tt-hero-title img {
	width: 430px;
	max-width: 100%;
	height: auto;
}
.tt-hero-ctarow .tt-cta img {
	display: block;
	width: 300px;
	max-width: 100%;
	height: auto;
}
.tt-hero-ctarow .tt-cta { margin: 0; }
.tt-hero-ctarow .tt-hero-rating { margin: 0; }
.tt-hero-rating {
	display: inline-flex;
	align-items: center;
	height: 66px;
	box-sizing: border-box;
	padding: 6px 18px;
	/* M8-T5 fix: slug is cream-soda — plain `cream` doesn't exist, so
	   the badge was rendering with a transparent background */
	background: var(--wp--preset--color--cream-soda);
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 15px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
}
.tt-stars {
	color: var(--wp--preset--color--tangerine);
	letter-spacing: 1px;
}

/* #2b · Star row on product cards (homepage wall + /shop/ archive).
   Fixed height keeps the M8-T2 alignment lines: image / title / stars /
   price / button all sit on the same baselines across the row. */
.tt-products ul.products li.product .tt-card-stars,
body.woocommerce-page ul.products li.product .tt-card-stars {
	height: 20px;
	line-height: 20px;
	margin: 6px 0 0;
	font-size: 13px;
	/* narrow mobile cards: never let the "4.9" wrap onto the price */
	white-space: nowrap;
	overflow: hidden;
}
.tt-products ul.products li.product .tt-card-stars-num,
body.woocommerce-page ul.products li.product .tt-card-stars-num {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
}

/* #2c · Quote stickers between the timeline and the photo wall.
   Cream canvas (no band), white sticker cards with a hand-written
   quote — same voice as the polaroid captions. Extra bottom padding
   so the Peach silhouette strip (which now overlaps the section edge
   instead of sitting in a margin gap) never touches the cards. */
.tt-quotes { padding-bottom: 128px; }
.tt-quotes-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	max-width: 1080px;
	margin: 36px auto 0;
}
@media (min-width: 900px) {
	.tt-quotes-grid { grid-template-columns: repeat(3, 1fr); }
}
.tt-quotes-grid .tt-quote,
.tt-quote {
	box-sizing: border-box;
	margin: 44px 0 0 !important;
	margin-block-start: 44px !important;
	padding: 22px 24px 18px;
	background: #fff;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 16px;
	text-align: center;
}
/* M8-T4 #3 · circular avatar sticker — M9-T1 moved the class onto a
   core/image figure; the circle styles now live in the M9-T1 block
   below (`.tt-quote-avatar img`). */
.tt-quote-a { transform: rotate(-1.6deg); }
.tt-quote-b { transform: rotate(1.1deg); }
.tt-quote-c { transform: rotate(-0.8deg); }
/* M9-T1: the old `.tt-quote p` / `.tt-quote cite` / `.tt-quote .tt-stars`
   rules were deleted here — quote content is now editable paragraphs
   with dedicated classes (`.tt-quote-text/-stars/-cite`, see the M9-T1
   block), and the element-scoped selectors beat them on specificity. */
@media (max-width: 781px) {
	.tt-quotes { padding-bottom: 96px; }
	.tt-products ul.products li.product .tt-card-stars,
	body.woocommerce-page ul.products li.product .tt-card-stars { font-size: 11px; }
	.tt-products ul.products li.product .tt-card-stars .tt-stars,
	body.woocommerce-page ul.products li.product .tt-card-stars .tt-stars { letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-quote-a, .tt-quote-b, .tt-quote-c { transform: none; }
}

/* ---------------------------------------------------------------
   M9-T1 · Front page instantiated as real blocks (B: editable content
   + locked skeleton). Everything below keeps the block-rendered markup
   pixel-identical to the old raw-HTML pattern output.
   --------------------------------------------------------------- */

/* 1 · Block-gap neutralization. WP flow layout injects
   `margin-block-start: block-gap` between siblings at the page root
   and inside every group — the old pattern was raw HTML with no such
   gaps, and band seams depend on zero gaps. */
.wp-site-blocks > * + *.tt-band,
.wp-site-blocks > * + *.tt-section { margin-block-start: 0; }
.tt-band > * + *,
.tt-hero > * + *,
.tt-quote > * + *,
.tt-wild-wall > * + * { margin-block-start: 0 !important; }

/* 2 · Polaroids as core/image blocks. The old markup wrapped the print
   in a .tt-pola-photo span (recessed frame) plus .tt-pola-sheen and
   .tt-pola-tape spans. Blocks render figure > img + figcaption, so the
   frame moves onto the img and the sheen/tape become pseudo-elements
   inset by exactly the paper padding (== the photo rect). */
.tt-pola > img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border-radius: 1px;
	background-color: #efe8d8;
}
.wp-block-image.tt-pola::after {
	content: "";
	position: absolute;
	inset: 8px 8px 36px;
	border-radius: 1px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(255, 255, 255, 0) 46%);
	box-shadow: inset 0 1px 5px rgba(30, 25, 18, 0.26), inset 0 0 2px rgba(30, 25, 18, 0.16);
	pointer-events: none;
}
.wp-block-image.tt-pola::before,
.wp-block-image.tt-pola--tape::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 56px;
	height: 18px;
	background: linear-gradient(105deg, rgba(244, 226, 158, 0.72), rgba(238, 216, 140, 0.58) 55%, rgba(244, 226, 158, 0.68));
	clip-path: polygon(4% 0, 96% 3%, 100% 26%, 97% 52%, 100% 78%, 96% 100%, 3% 97%, 0 74%, 3% 50%, 0 24%);
	transform: translateX(-50%) rotate(-3deg);
	z-index: 2;
	pointer-events: none;
}
.wp-block-image.tt-pola:nth-child(2n)::before { transform: translateX(-50%) rotate(2.5deg); }
.wp-block-image.tt-pola:nth-child(3n)::before { transform: translateX(-50%) rotate(-2deg); }
.wp-block-image.tt-pola:nth-child(5n)::before { transform: translateX(-50%) rotate(3.5deg); }
.wp-block-image.tt-pola:nth-child(7n)::before { transform: translateX(-50%) rotate(-3.5deg); }
.wp-block-image.tt-pola-e::before { transform: translateX(-50%) rotate(4deg); }
@media (min-width: 900px) {
	.wp-block-image.tt-pola::after { inset: 13px 13px 62px; }
	.wp-block-image.tt-pola::before,
	.wp-block-image.tt-pola--tape::before { top: -13px; width: 96px; height: 28px; }
}

/* 3 · Quote cards as groups of editable blocks: avatar is a core/image
   (figure gets the class, the circle styles move onto the img), and
   stars / quote / attribution are paragraphs with dedicated classes. */
.tt-quote .wp-block-image.tt-quote-avatar,
.tt-quote figure.tt-quote-avatar,
.wp-block-image.tt-quote-avatar {
	width: 64px !important;
	height: 64px !important;
	margin: -54px auto 8px !important;
	border: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	padding: 0 !important;
}
.tt-quote .tt-quote-avatar img,
.wp-block-image.tt-quote-avatar img {
	display: block !important;
	width: 64px !important;
	height: 64px !important;
	margin: 0 auto !important;
	border-radius: 50% !important;
	border: 3.5px solid var(--wp--preset--color--espresso) !important;
	background: #FFFDF8 !important;
	object-fit: cover !important;
	object-position: center 30% !important;
	box-shadow: 2.5px 2.5px 0 var(--wp--preset--color--espresso) !important;
}
.tt-quote-stars {
	margin: 0;
	font-size: 15px;
	letter-spacing: 1px;
	color: var(--wp--preset--color--tangerine);
}
.tt-quote-text {
	margin: 8px 0 6px;
	font-family: var(--wp--preset--font-family--caveat);
	font-size: 30px;
	line-height: 1.15;
	color: var(--wp--preset--color--espresso);
}
.tt-quote-cite {
	margin: 0;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 13px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	opacity: 0.75;
}
@media (max-width: 781px) {
	.tt-quote-text { font-size: 26px; }
}

/* M8-T2 fix · Product-card title line reservation on narrow screens.
   Mobile 2-col cards are narrow: the longest title ("Custom Hand-Drawn
   Pet Clock") wraps to 4 lines, so reserve four to keep the price line
   aligned across the row. MUST live at the end of the file: the archive
   base rule uses an equally specific link-qualified selector, so source
   order decides — this block has to come after it. */
@media (max-width: 781px) {
	.tt-products ul.products li.product .woocommerce-loop-product__title,
	body.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
	body.woocommerce-page ul.products li.product .woocommerce-loop-product__link .woocommerce-loop-product__title {
		min-height: 2.6em !important;
		font-size: 13.5px !important;
		line-height: 1.25 !important;
		padding: 4px 0 0 !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
	}
}

/* ===============================================================
   M10-T1 · Cart + Checkout sticker skin (WC 11.x Cart/Checkout
   Blocks route — confirmed via post_content: wp:woocommerce/cart
   and wp:woocommerce/checkout blocks, NOT classic shortcodes).
   Pure CSS reskin of .wc-block-* classes; zero WC logic touched.
   Red lines honored: no card shadows (hard offset shadow only on
   CTA buttons, per red line #2), inputs ≥16px (anti iOS zoom).
   =============================================================== */

/* --- Shared: page canvas ------------------------------------- */
.wc-block-cart,
.wc-block-checkout {
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--nunito);
}
.wc-block-cart .wc-block-components-title,
.wc-block-checkout .wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
}

/* --- Shared: primary buttons → .tt-btn language (tangerine pill,
   3px espresso outline, hard offset shadow — CTA shadow allowed) */
.wc-block-cart__submit .wc-block-components-button,
.wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--tangerine) !important;
	color: #FFF7E8 !important;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 9999px !important;
	box-shadow: 4px 4px 0 #2B2118 !important;
	padding: 14px 32px !important;
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em;
	transition: transform 0.15s ease-out, background 0.15s ease-out;
}
.wc-block-cart__submit .wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--mint) !important;
	color: var(--wp--preset--color--espresso) !important;
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.wc-block-cart__submit .wc-block-components-button,
	.wc-block-components-checkout-place-order-button { transition: none; }
	.wc-block-cart__submit .wc-block-components-button:hover,
	.wc-block-components-checkout-place-order-button:hover { transform: none; }
}

/* ===============================================================
   CART
   =============================================================== */

/* Line items → cream sticker cards. M10-T1fix: the original
   per-cell border trick (border-collapse:separate + borders on every
   td) shattered whenever cell heights/widths varied — floating border
   fragments instead of one card. Now the whole <tr> becomes a single
   flex card at every viewport; cells are plain blocks inside it.
   WC injects its CSS after the theme's, so structural rules need
   !important. */
.wc-block-cart-items,
.wc-block-cart-items tbody,
.wc-block-cart-items__row {
	display: block;
	width: 100%;
}
/* WC's default faint table/row hairlines — replaced by card edges */
.wc-block-cart-items {
	border-bottom: none !important;
}
.wc-block-cart-items__header {
	/* column labels make no sense once rows are cards */
	display: none !important;
}
.wc-block-cart-items__row {
	display: flex;
	align-items: center;
	gap: 12px 24px;
	background: var(--wp--preset--color--warm-paper) !important;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 20px;
	padding: 18px 22px;
	margin-bottom: 16px;
}
.wc-block-cart-items__row td {
	display: block;
	background: transparent !important;
	border: none !important;
	padding: 0;
}
.wc-block-cart-item__image {
	flex: none;
	width: 110px;
}
.wc-block-cart-item__product {
	flex: 1 1 auto;
	min-width: 0;
}
.wc-block-cart-item__total {
	flex: none;
	margin-left: auto;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	font-size: 19px;
	color: var(--wp--preset--color--espresso);
}
.wc-block-cart-item__image img {
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 14px;
}
.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
}
.wc-block-components-product-metadata {
	color: var(--wp--preset--color--espresso);
	opacity: 0.75;
}

/* Quantity stepper → sticker pill */
.wc-block-components-quantity-selector {
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	background: #FFFDF8;
	overflow: hidden;
}
.wc-block-components-quantity-selector__input {
	font-size: 16px; /* anti iOS zoom */
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
	background: transparent;
	border: none;
}
.wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--espresso);
	font-weight: 800;
	background: transparent;
	border: none;
}
.wc-block-components-quantity-selector__button:hover {
	background: var(--wp--preset--color--lemon);
	color: var(--wp--preset--color--espresso);
}

/* Remove link → mini sticker chip (WC Blocks injects its CSS after the
   theme stylesheet, so these need !important to win the cascade) */
.wc-block-cart-item__remove-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--wp--preset--color--espresso) !important;
	border-radius: 9999px !important;
	padding: 0 !important;
	color: var(--wp--preset--color--espresso) !important;
	background: var(--wp--preset--color--cream-soda) !important;
	transition: background 0.15s ease-out;
}
.wc-block-cart-item__remove-link:hover {
	background: var(--wp--preset--color--peach) !important;
	color: var(--wp--preset--color--deep-orange) !important;
	text-decoration: none;
}

/* Totals sidebar → complete summary sticker card */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	background: var(--wp--preset--color--warm-paper) !important;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 22px !important;
	padding: 22px 24px !important;
	box-sizing: border-box !important;
	width: 100% !important;
}
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block {
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}
.wc-block-cart__sidebar .wc-block-components-totals-item {
	border-bottom: 2px dashed rgba(43, 33, 24, 0.25) !important;
}
.wc-block-cart__sidebar .wc-block-components-totals-footer-item {
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-weight: 800 !important;
	font-size: 22px !important;
	border-top: 2px dashed var(--wp--preset--color--espresso) !important;
	padding-top: 14px !important;
	margin-top: 14px !important;
}
.wc-block-cart__submit,
.wp-block-woocommerce-proceed-to-checkout-block {
	margin-top: 20px !important;
	padding: 0 !important;
	background: transparent !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
/* Coupon accordion & checkout/cart coupon form */
.wc-block-components-panel__button {
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-weight: 800 !important;
	color: var(--wp--preset--color--espresso) !important;
	font-size: 16px !important;
	padding: 10px 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}
.wc-block-components-panel__button:focus {
	outline: none !important;
}
.wc-block-components-totals-coupon__form {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	margin: 10px 0 4px 0 !important;
	box-sizing: border-box !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input,
.wc-block-components-totals-coupon__input.wc-block-components-text-input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	position: relative !important;
	box-sizing: border-box !important;
}
.wc-block-components-totals-coupon__input input,
#wc-block-components-totals-coupon__input-coupon {
	height: 50px !important;
	min-height: 50px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 14px !important;
	background: #FFFDF8 !important;
	padding: 12px 16px !important;
	font-size: 16px !important;
	font-family: var(--wp--preset--font-family--nunito) !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--espresso) !important;
	box-shadow: none !important;
	margin: 0 !important;
	line-height: normal !important;
	transition: border-color 0.15s ease !important;
}
.wc-block-components-totals-coupon__input.is-active input,
.wc-block-components-totals-coupon__input input:focus {
	border-color: var(--wp--preset--color--tangerine) !important;
	outline: 3px solid var(--wp--preset--color--lemon) !important;
	outline-offset: 1px !important;
	padding-top: 18px !important;
	padding-bottom: 6px !important;
}
.wc-block-components-totals-coupon__input label {
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--espresso) !important;
	pointer-events: none !important;
	position: absolute !important;
	left: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 15px !important;
	transition: all 0.15s ease !important;
	max-width: calc(100% - 32px) !important;
}
.wc-block-components-totals-coupon__input.is-active label,
.wc-block-components-totals-coupon__input input:focus + label {
	top: 4px !important;
	left: 14px !important;
	transform: none !important;
	font-size: 11px !important;
	color: #8C7A6B !important;
	line-height: 1 !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon .wc-block-components-button.wc-block-components-totals-coupon__button {
	flex: 0 0 auto !important;
	height: 50px !important;
	min-height: 50px !important;
	padding: 0 24px !important;
	min-width: 92px !important;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--lemon) !important;
	color: var(--wp--preset--color--espresso) !important;
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso) !important;
	white-space: nowrap !important;
	margin: 0 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
.wc-block-components-totals-coupon__button:hover:not(:disabled) {
	background-color: #FFE066 !important;
	transform: translate(-1px, -1px) !important;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso) !important;
}
.wc-block-components-totals-coupon__button:active:not(:disabled) {
	transform: translate(2px, 2px) !important;
	box-shadow: 1px 1px 0 var(--wp--preset--color--espresso) !important;
}
.wc-block-components-totals-coupon__button:disabled {
	opacity: 0.65 !important;
	cursor: not-allowed !important;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso) !important;
	transform: none !important;
}
.wc-block-components-totals-discount__coupon-list-item.wc-block-components-chip {
	border: 2px solid var(--wp--preset--color--espresso) !important;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--warm-paper) !important;
	color: var(--wp--preset--color--espresso) !important;
	font-family: var(--wp--preset--font-family--nunito) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 4px 10px !important;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso) !important;
}
.wc-block-components-totals-discount__coupon-list-item.wc-block-components-chip .wc-block-components-chip__remove {
	padding: 0 !important;
	margin-left: 6px !important;
	cursor: pointer !important;
}


/* Empty cart → sticker message */
.wp-block-woocommerce-empty-cart-block {
	text-align: center;
	padding: 40px 0 24px;
}
.wc-block-cart__empty-cart__title {
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-weight: 800 !important;
	font-size: 34px !important;
	color: var(--wp--preset--color--espresso);
	display: inline-block;
	background: var(--wp--preset--color--warm-paper);
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 22px;
	padding: 28px 44px;
	transform: rotate(-1.2deg);
}
.wc-block-cart__empty-cart__title::before {
	filter: none; /* keep the default icon but on our cream card */
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
	border-color: rgba(43, 33, 24, 0.35);
	color: rgba(43, 33, 24, 0.35);
}
.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
}
/* Non-button links inside the empty-cart block */
.wp-block-woocommerce-empty-cart-block p a {
	color: var(--wp--preset--color--tangerine);
	font-weight: 700;
}

/* ===============================================================
   CHECKOUT
   =============================================================== */

/* Step titles & Section Spacing */
.wc-block-components-checkout-step__title,
.wc-block-components-title {
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-weight: 800 !important;
	font-size: 26px !important;
	color: var(--wp--preset--color--espresso) !important;
	margin-top: 0 !important;
	margin-bottom: 18px !important;
	line-height: 1.25 !important;
}
.wc-block-checkout__contact-fields .wc-block-components-checkout-step__description,
.wc-block-checkout__shipping-fields .wc-block-components-checkout-step__description {
	margin-bottom: 16px !important;
	color: #6B5B4E !important;
}

/* Inputs → outlined rounded sticker fields, ≥16px (iOS zoom红线) */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-blocks-components-select__select,
.wc-block-components-country-input .wc-blocks-components-select__select,
.wc-block-components-state-input input,
.wc-block-components-state-input .wc-blocks-components-select__select,
.wc-block-checkout__order-notes textarea {
	height: 54px !important;
	min-height: 54px !important;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 14px !important;
	background: #FFFDF8 !important;
	font-size: 16px !important;
	font-family: var(--wp--preset--font-family--nunito) !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--espresso) !important;
	padding: 12px 16px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}
.wc-block-components-text-input textarea,
.wc-block-checkout__order-notes textarea {
	height: auto !important;
	min-height: 90px !important;
	padding: 16px !important;
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-blocks-components-select__select:focus,
.wc-block-checkout__order-notes textarea:focus {
	border-color: var(--wp--preset--color--tangerine) !important;
	outline: 3px solid var(--wp--preset--color--lemon) !important;
	outline-offset: 1px;
	box-shadow: none !important;
}
/* Active inputs & select clearance for floating label to prevent collision */
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select {
	padding-top: 22px !important;
	padding-bottom: 6px !important;
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--espresso) !important;
	pointer-events: none !important;
	transition: all 0.15s ease !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label,
.wc-blocks-components-select__label {
	top: 6px !important;
	left: 16px !important;
	font-size: 11px !important;
	line-height: 1 !important;
	transform: none !important;
	color: #7D6B5D !important;
}
/* Error state → deep-orange family (贴纸风错误色) */
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input.has-error textarea {
	border-color: var(--wp--preset--color--deep-orange) !important;
	background: #FDEAE4 !important;
}
.wc-block-components-text-input.has-error label,
.wc-block-components-validation-error,
.wc-block-components-validation-error p {
	color: var(--wp--preset--color--deep-orange) !important;
	font-weight: 700;
}

/* Checkbox → espresso outline */
.wc-block-components-checkbox__input {
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 6px !important;
}
.wc-block-components-checkbox__input:checked {
	background: var(--wp--preset--color--mint) !important;
}
.wc-block-components-checkbox__label {
	font-weight: 600;
	color: var(--wp--preset--color--espresso);
}

/* Notice banners → sticker error/info cards */
.wc-block-components-notice-banner {
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 16px !important;
	font-weight: 600;
	padding: 14px 18px !important;
	margin-bottom: 24px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px 14px !important;
	flex: 1 1 auto !important;
	padding-right: 0 !important;
	line-height: 1.4 !important;
}
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.button,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wp-element-button,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a,
.wc-block-components-notice-banner .wc-forward,
.wc-block-components-notice-banner a.button,
.wc-block-components-notice-banner a.wp-element-button,
.wc-block-components-notice-banner a {
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	float: none !important;
	border: 2px solid var(--wp--preset--color--espresso) !important;
	border-radius: 9999px !important;
	background-color: var(--wp--preset--color--lemon) !important;
	background: var(--wp--preset--color--lemon) !important;
	color: var(--wp--preset--color--espresso) !important;
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	padding: 5px 16px !important;
	text-decoration: none !important;
	text-underline-position: auto !important;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso) !important;
	margin: 0 0 0 auto !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
	transform: none !important;
	opacity: 1 !important;
	transition: background 0.15s ease-out, transform 0.15s ease-out !important;
}
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:hover,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.button:hover,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wp-element-button:hover,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a:hover,
.wc-block-components-notice-banner .wc-forward:hover,
.wc-block-components-notice-banner a.button:hover,
.wc-block-components-notice-banner a.wp-element-button:hover,
.wc-block-components-notice-banner a:hover {
	background-color: var(--wp--preset--color--mint) !important;
	background: var(--wp--preset--color--mint) !important;
	color: var(--wp--preset--color--espresso) !important;
	transform: translateY(-1px) !important;
	opacity: 1 !important;
	text-decoration: none !important;
}
.wc-block-components-notice-banner.is-error {
	background: var(--wp--preset--color--peach) !important;
	border-color: var(--wp--preset--color--deep-orange) !important;
	color: var(--wp--preset--color--espresso) !important;
}
.wc-block-components-notice-banner.is-success {
	background: var(--wp--preset--color--soft-mint) !important;
}

/* Order summary → cohesive sticker card (desktop and mobile) */
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--wp--preset--color--warm-paper) !important;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 22px !important;
	padding: 20px 22px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	margin-bottom: 24px !important;
}
.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel.has-border,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content,
.wp-block-woocommerce-checkout-order-summary-block [class*="card"],
.wp-block-woocommerce-checkout-order-summary-block .components-card {
	border: none !important;
	background: transparent !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-shadow: none !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}
.wc-block-components-order-summary-item {
	border-bottom: 2px dashed rgba(43, 33, 24, 0.25);
}
.wc-block-components-order-summary-item__image img {
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 12px;
}
.wc-block-components-order-summary-item__quantity {
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	background: var(--wp--preset--color--lemon);
	color: var(--wp--preset--color--espresso);
	font-weight: 800;
}
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	font-size: 22px;
}

/* Radio controls & Shipping options (Eliminate fake outer border & separate cards) */
.wc-block-components-radio-control::after,
.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control__option::after {
	content: none !important;
	display: none !important;
	border: none !important;
}
.wc-block-components-shipping-rates-control,
.wc-block-components-shipping-rates-control__package {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control,
.wc-block-components-radio-control {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 0 16px 0 !important;
}
.wc-block-components-payment-method-label {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
}
.wc-block-components-radio-control__option {
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 14px !important;
	background: #FFFDF8 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 16px 20px 16px 52px !important;
	box-shadow: none !important;
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}
.wc-block-components-radio-control__option:hover {
	transform: translateY(-1px) !important;
}
.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option:checked,
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked {
	background: var(--wp--preset--color--soft-mint) !important;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso) !important;
}

/* Address card (saved address display) */
.wc-block-components-address-card {
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 16px;
	background: var(--wp--preset--color--warm-paper);
	box-sizing: border-box !important;
	width: 100% !important;
}
.wc-block-components-address-card__edit {
	color: var(--wp--preset--color--tangerine);
	font-weight: 700;
}

/* Form fields and steps in checkout */
.wc-block-components-checkout-step {
	margin-bottom: 36px !important;
	box-sizing: border-box !important;
	width: 100% !important;
}
.wc-block-components-text-input,
.wc-blocks-components-select {
	margin-bottom: 16px !important;
	box-sizing: border-box !important;
	width: 100% !important;
}
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-blocks-components-select__select {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* All standard pages get proper responsive horizontal padding */
main.tt-hero {
	padding-left: 24px !important;
	padding-right: 24px !important;
	box-sizing: border-box !important;
}

/* Global box-sizing & overflow prevention for Cart & Checkout */
.wc-block-cart,
.wc-block-checkout,
.wc-block-cart *,
.wc-block-checkout *,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	box-sizing: border-box !important;
}

/* ===============================================================
   Mobile ≤600px — rows are already sticker cards at every width
   (M10-T1fix); here we only tighten the card for narrow screens.
   Checkout form stays single column (WC already stacks sidebar).
   =============================================================== */
@media (max-width: 600px) {
	main.tt-hero {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.wc-block-cart-items__row {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		gap: 12px 14px !important;
		padding: 14px 16px !important;
		box-sizing: border-box !important;
		width: 100% !important;
	}
	.wc-block-cart-item__image {
		width: 76px !important;
		flex: 0 0 76px !important;
	}
	.wc-block-cart-item__image img {
		width: 76px !important;
		height: 76px !important;
		object-fit: cover !important;
		border-radius: 12px !important;
	}
	.wc-block-cart-item__product {
		flex: 1 1 calc(100% - 94px) !important;
		min-width: 0 !important;
	}
	/* line total drops to its own row, right-aligned, below the product */
	.wc-block-cart-item__total {
		flex: 1 1 100% !important;
		text-align: right !important;
		font-size: 18px !important;
		margin-left: 0 !important;
		margin-top: 6px !important;
		padding-top: 8px !important;
		border-top: 1px dashed rgba(43, 33, 24, 0.15) !important;
	}
	.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.wc-block-cart__empty-cart__title {
		font-size: 26px !important;
		padding: 22px 26px;
	}
	.wp-block-woocommerce-checkout-order-summary-block {
		padding: 16px 18px !important;
	}
	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}
	.wc-block-components-notice-banner .wc-forward,
	.wc-block-components-notice-banner a.button,
	.wc-block-components-notice-banner a.wp-element-button,
	.wc-block-components-notice-banner a {
		margin-left: 0 !important;
		margin-top: 4px !important;
		align-self: flex-start !important;
	}

	/* Product cards & section spacing on mobile ≤600px */
	.tt-section {
		padding: 48px 14px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.tt-section .tt-products,
	.tt-section .tt-products .woocommerce,
	body.woocommerce-page .woocommerce {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	/* Product list and cards follow the horizontal banner layout defined in M10-T1 */
	/* Hide tail cursor on touch and mobile */
	#tt-tail-cursor {
		display: none !important;
	}
}

/* M10-T1 addendum · Classic WC notices (add-to-cart banner etc.)
   rendered above the blocks — same sticker language */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wp--preset--color--soft-mint) !important;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 16px !important;
	color: var(--wp--preset--color--espresso) !important;
	font-weight: 600;
	padding: 14px 18px !important;
	margin-bottom: 24px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px 14px !important;
	box-sizing: border-box !important;
	width: 100% !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--wp--preset--color--espresso) !important;
}
.woocommerce-error {
	background: var(--wp--preset--color--peach) !important;
	border-color: var(--wp--preset--color--deep-orange) !important;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-message .button,
.woocommerce-info .button {
	display: inline-block;
	border: 3px solid var(--wp--preset--color--espresso) !important;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--lemon) !important;
	color: var(--wp--preset--color--espresso) !important;
	font-family: var(--wp--preset--font-family--baloo-2) !important;
	font-weight: 800 !important;
	padding: 6px 18px !important;
	text-decoration: none !important;
}
.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto !important;
	flex-shrink: 0 !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background: var(--wp--preset--color--mint) !important;
}



/* ==========================================================================
   M10: 4-Column Modern DTC Footer & Legal Policy Pages
   ========================================================================== */

/* Footer Structure */
.tt-site-footer {
	background-color: var(--wp--preset--color--navy) !important;
	border-top: 4px solid var(--wp--preset--color--espresso);
	color: #FFFDF8;
}

.tt-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.tt-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 0.9fr 1.1fr 1fr;
	gap: 40px;
	align-items: start;
}

/* Col 1: Brand */
.tt-footer-logo-link {
	display: inline-block;
	margin-bottom: 14px;
	text-decoration: none;
	line-height: 0;
}

.tt-footer-logo {
	display: block;
	width: auto;
	height: 48px;
	max-width: 175px;
	object-fit: contain;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tt-footer-logo-link:hover .tt-footer-logo {
	transform: scale(1.04);
}

.tt-footer-logo-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.tt-footer-brand-name {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 26px;
	font-weight: 800;
	color: #FFFDF8;
	letter-spacing: -0.5px;
}

.tt-footer-tagline {
	font-family: Nunito, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #CBD5E1;
	margin: 0 0 20px 0;
}

.tt-footer-col--brand .tt-newsletter {
	width: 100%;
}

.tt-footer-col--brand .tt-newsletter-label {
	color: #FFFDF8;
	font-size: 16px;
	margin-bottom: 10px;
}

.tt-footer-col--brand .tt-newsletter-row {
	display: flex;
	gap: 8px;
	max-width: 360px;
}

.tt-footer-col--brand .tt-newsletter input {
	flex: 1;
	min-width: 0;
}

/* Nav Columns (Col 2 & Col 3) */
.tt-footer-heading {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 18px;
	font-weight: 800;
	color: #FFFDF8;
	margin: 0 0 16px 0;
	letter-spacing: 0.3px;
}

.tt-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tt-footer-links li {
	margin-bottom: 10px;
}

.tt-footer-links a {
	font-family: Nunito, sans-serif;
	font-size: 14.5px;
	color: #E2E8F0;
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
	display: inline-block;
}

.tt-footer-links a:hover {
	color: var(--wp--preset--color--butter);
	transform: translateX(3px);
}

/* Col 4: Perks & Social */
.tt-footer-perks {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
}

.tt-footer-perks li {
	font-family: Nunito, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: #E2E8F0;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.tt-perk-icon {
	font-size: 16px;
}

/* Bottom Bar */
.tt-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: 48px;
	padding-top: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.tt-footer-copyright {
	font-family: Nunito, sans-serif;
	font-size: 13px;
	color: #94A3B8;
	margin: 0;
}

.tt-secure-badge {
	font-family: Nunito, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	color: #A7F3D0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Responsive Footer */
@media (max-width: 992px) {
	.tt-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
	.tt-footer-col--brand {
		grid-column: span 2;
	}
}

@media (max-width: 600px) {
	.tt-footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.tt-footer-col--brand {
		grid-column: span 1;
	}
	.tt-footer-col--brand .tt-newsletter-row {
		flex-direction: column;
		max-width: 100%;
	}
	.tt-footer-col--brand .tt-newsletter input {
		width: 100%;
	}
	.tt-footer-col--brand .tt-newsletter button {
		width: 100%;
	}
	.tt-footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}
}

/* Legal Policy Pages Styling */
.tt-policy-card {
	background: #FFFDF8;
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 24px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso);
	padding: 44px;
	margin: 20px auto 60px;
	max-width: 920px;
	box-sizing: border-box;
	color: var(--wp--preset--color--espresso);
	font-family: Nunito, sans-serif;
}

.tt-policy-card h2 {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 24px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin-top: 36px;
	margin-bottom: 12px;
	border-bottom: 2px dashed rgba(43, 33, 24, 0.18);
	padding-bottom: 8px;
}

.tt-policy-card p {
	font-size: 15.5px;
	line-height: 1.75;
	margin-bottom: 16px;
}

.tt-policy-card ul {
	padding-left: 24px;
	margin-bottom: 20px;
}

.tt-policy-card li {
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 8px;
}

.tt-policy-card a {
	color: var(--wp--preset--color--tangerine);
	font-weight: 700;
	text-decoration: underline;
}

.tt-policy-meta {
	display: inline-block;
	background: var(--wp--preset--color--butter);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 4px 16px;
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 24px;
}

.tt-policy-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 14px;
	overflow: hidden;
	margin: 20px 0;
}

.tt-policy-table th,
.tt-policy-table td {
	padding: 12px 16px;
	border-bottom: 1.5px solid rgba(43, 33, 24, 0.15);
	font-size: 14.5px;
	text-align: left;
}

.tt-policy-table th {
	background: var(--wp--preset--color--butter);
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
}

.tt-policy-table tbody tr:last-child td {
	border-bottom: none;
}

/* Contact Us Grid */
.tt-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.tt-contact-card {
	background: var(--wp--preset--color--warm-paper);
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
}

.tt-contact-icon {
	font-size: 32px;
	display: block;
	margin-bottom: 12px;
}

.tt-contact-card h3 {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 18px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 8px 0;
}

.tt-contact-card p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 10px 0;
}

.tt-contact-link {
	font-size: 15px;
	font-weight: 800;
	color: var(--wp--preset--color--tangerine);
}

@media (max-width: 600px) {
	.tt-policy-card {
		padding: 24px 18px;
		margin: 10px 10px 40px;
	}
}

/* ===============================================================
   M10 · Custom Pet Clock Interactive Builder UI
   =============================================================== */
.tt-custom-builder-wrap {
	background: #FFFDF8;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 20px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	padding: 24px;
	margin: 0 0 24px 0;
	box-sizing: border-box;
}

.tt-custom-builder-head {
	margin-bottom: 20px;
	border-bottom: 2px dashed rgba(43, 33, 24, 0.15);
	padding-bottom: 14px;
}

.tt-builder-badge {
	display: inline-block;
	background: var(--wp--preset--color--butter);
	border: 1.5px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 3px 10px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 11px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin-bottom: 6px;
}

.tt-builder-title {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 22px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 4px 0;
}

.tt-builder-subtitle {
	font-size: 13.5px;
	line-height: 1.45;
	color: #6C5D50;
	margin: 0;
}

.tt-builder-step {
	margin-bottom: 20px;
}

.tt-step-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 15px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin-bottom: 10px;
}

.tt-step-label .tt-step-num,
.tt-builder-step .tt-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--wp--preset--color--tangerine);
	color: #FFF7E8;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
}

.tt-step-label .tt-req {
	color: var(--wp--preset--color--tangerine);
}

/* Upload Dropzone */
.tt-upload-box {
	background: var(--wp--preset--color--warm-paper);
	border: 2.5px dashed var(--wp--preset--color--espresso);
	border-radius: 16px;
	padding: 22px 16px;
	text-align: center;
	cursor: pointer;
	position: relative;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.tt-upload-box:hover,
.tt-upload-box.is-dragover {
	background: #FFF5E6;
	border-color: var(--wp--preset--color--tangerine);
}

.tt-upload-box.has-error {
	border-color: #E03131 !important;
	background: #FFF5F5 !important;
	animation: tt-wobble 0.4s ease-in-out;
}

@keyframes tt-wobble {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

.tt-upload-icon-wrap {
	font-size: 38px;
	line-height: 1;
	margin-bottom: 8px;
}

.tt-upload-text {
	font-size: 15px;
	color: var(--wp--preset--color--espresso);
	margin-bottom: 8px;
}

.tt-upload-text strong {
	color: var(--wp--preset--color--tangerine);
	text-decoration: underline;
}

.tt-upload-btn-callout {
	display: inline-block;
	background: var(--wp--preset--color--butter);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 13.5px;
	font-weight: 800;
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	padding: 6px 16px;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	cursor: pointer;
	margin-bottom: 8px;
	transition: transform 0.1s ease;
}

.tt-upload-btn-callout:hover {
	transform: translateY(-1px);
	background: #FFE699;
}

.tt-upload-hint {
	display: block;
	font-size: 12px;
	color: #8C7A6B;
}

/* Upload Success Feedback Box */
.tt-upload-feedback-box {
	background: #FFFDF8;
	border: 2.5px solid #28A745;
	border-radius: 14px;
	padding: 12px 14px;
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
	text-align: left;
}

.tt-feedback-head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 800;
	color: #155724;
	background: #D4EDDA;
	border-radius: 8px;
	padding: 6px 10px;
	margin-bottom: 12px;
}

.tt-feedback-body {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tt-feedback-thumb-wrap {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	border: 2px solid var(--wp--preset--color--espresso);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	overflow: hidden;
	background: #FFF;
	flex-shrink: 0;
}

.tt-feedback-thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tt-feedback-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tt-feedback-filename {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 14px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tt-feedback-filesize {
	font-size: 12px;
	color: #7A6354;
}

.tt-feedback-badge-pill {
	display: inline-block;
	align-self: flex-start;
	background: #E8F8F0;
	border: 1px solid #28A745;
	color: #1E7E34;
	font-size: 11px;
	font-weight: 700;
	border-radius: 9999px;
	padding: 1px 8px;
	margin-top: 3px;
}

.tt-feedback-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}

.tt-pill-btn {
	border: 1.5px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 800;
	padding: 4px 10px;
	cursor: pointer;
	box-shadow: 1.5px 1.5px 0 var(--wp--preset--color--espresso);
	transition: transform 0.1s ease;
	text-align: center;
}

.tt-pill-btn:hover {
	transform: translateY(-1px);
}

.tt-pill-btn--change {
	background: var(--wp--preset--color--butter);
	color: var(--wp--preset--color--espresso);
}

.tt-pill-btn--remove {
	background: #FFEAEA;
	color: #D9534F;
	border-color: #D9534F;
}

.tt-upload-error-msg {
	margin-top: 10px;
	background: #FFEBEB;
	border: 1.5px solid #E03131;
	border-radius: 8px;
	color: #C92A2A;
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 10px;
	text-align: center;
}

/* Real-Time Configuration Summary Card */
.tt-custom-summary-card {
	background: #FFFDF8;
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 16px;
	box-shadow: 3.5px 3.5px 0 var(--wp--preset--color--espresso);
	padding: 16px;
	margin: 22px 0 16px 0;
	box-sizing: border-box;
}

.tt-summary-card-head {
	border-bottom: 2px dashed rgba(43, 33, 24, 0.15);
	padding-bottom: 10px;
	margin-bottom: 12px;
}

.tt-summary-card-badge {
	display: inline-block;
	background: var(--wp--preset--color--tangerine);
	color: #FFF7E8;
	font-size: 10.5px;
	font-weight: 800;
	border-radius: 4px;
	padding: 2px 7px;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.tt-summary-card-title {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 17px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 2px 0;
}

.tt-summary-card-desc {
	font-size: 12px;
	color: #7A6354;
	display: block;
}

.tt-summary-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tt-summary-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--wp--preset--color--espresso);
}

.tt-summary-icon {
	font-size: 18px;
	flex-shrink: 0;
}

.tt-summary-text {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.tt-val-empty {
	color: #D97706;
	font-weight: 700;
	font-size: 12.5px;
}

.tt-val-success {
	color: #1E7E34;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tt-summary-mini-thumb {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--espresso);
	object-fit: cover;
	vertical-align: middle;
}

.tt-color-dot-inline {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--espresso);
	vertical-align: middle;
	margin-right: 2px;
}

.tt-summary-card-foot {
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1.5px dashed rgba(43, 33, 24, 0.15);
}

.tt-summary-ready-pill {
	display: block;
	text-align: center;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 800;
	transition: all 0.2s ease;
}

.tt-summary-ready-pill.is-waiting {
	background: #FFF3CD;
	border: 1.5px solid #FFEEBA;
	color: #856404;
}

.tt-summary-ready-pill.is-ready {
	background: #D4EDDA;
	border: 1.5px solid #C3E6CB;
	color: #155724;
}

/* Pop-Up Feedback Confirmation Modal */
.tt-custom-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(43, 33, 24, 0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	animation: tt-fade-in 0.2s ease;
}

@keyframes tt-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.tt-custom-modal-card {
	background: #FFFDF8;
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 24px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso);
	max-width: 480px;
	width: 100%;
	padding: 28px 24px 24px;
	box-sizing: border-box;
	position: relative;
	text-align: center;
	animation: tt-pop-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes tt-pop-in {
	from { transform: scale(0.9); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.tt-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: #F7F2E7;
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--espresso);
	transition: transform 0.1s ease;
}

.tt-modal-close:hover {
	transform: scale(1.08);
	background: #FFEAEA;
}

.tt-modal-icon-badge {
	font-size: 44px;
	line-height: 1;
	margin-bottom: 8px;
}

.tt-modal-title {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 24px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 6px 0;
}

.tt-modal-subtitle {
	font-size: 13.5px;
	color: #6C5D50;
	margin: 0 0 18px 0;
}

.tt-modal-recap-box {
	background: var(--wp--preset--color--warm-paper);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 14px;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
	margin-bottom: 16px;
}

.tt-modal-recap-thumb {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	border: 2px solid var(--wp--preset--color--espresso);
	overflow: hidden;
	background: #FFF;
	flex-shrink: 0;
}

.tt-modal-recap-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tt-modal-recap-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
}

.tt-modal-recap-item {
	display: flex;
	gap: 6px;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tt-recap-label {
	color: #7A6354;
	font-size: 12px;
}

.tt-modal-proof-notice {
	background: #E8F8F0;
	border: 1.5px solid var(--wp--preset--color--espresso);
	border-radius: 12px;
	padding: 10px 14px;
	text-align: left;
	font-size: 12.5px;
	line-height: 1.45;
	color: #1B6E45;
	margin-bottom: 20px;
}

.tt-modal-proof-notice p {
	margin: 4px 0 0 0;
	color: #2D4C3A;
}

.tt-modal-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tt-modal-btn {
	width: 100%;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 3.5px 3.5px 0 var(--wp--preset--color--espresso);
	transition: transform 0.15s ease, background-color 0.15s ease;
	box-sizing: border-box;
}

.tt-modal-btn:hover {
	transform: translateY(-2px);
}

.tt-modal-btn:active {
	transform: translateY(1px);
}

.tt-modal-btn--primary {
	background: var(--wp--preset--color--tangerine);
	color: #FFF7E8;
}

.tt-modal-btn--secondary {
	background: var(--wp--preset--color--butter);
	color: var(--wp--preset--color--espresso);
}

/* Text Input */
.tt-text-input {
	width: 100%;
	padding: 10px 14px;
	font-size: 14.5px;
	font-family: inherit;
	color: var(--wp--preset--color--espresso);
	background: var(--wp--preset--color--warm-paper);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 10px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tt-text-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--tangerine);
	box-shadow: 0 0 0 3px rgba(242, 120, 44, 0.2);
	background: #FFF;
}

.tt-input-hint {
	display: block;
	font-size: 12px;
	color: #8C7A6B;
	margin-top: 5px;
}

/* Color Picker Pills */
.tt-color-picker-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.tt-color-choice {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--warm-paper);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 12px;
	padding: 8px 10px;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	transition: all 0.15s ease;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
}

.tt-color-choice:hover {
	transform: translateY(-2px);
}

.tt-color-choice.is-selected {
	background: var(--wp--preset--color--butter);
	border-color: var(--wp--preset--color--tangerine);
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
}

.tt-color-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--espresso);
	flex-shrink: 0;
}

.tt-builder-guarantee {
	margin-top: 18px;
	padding: 10px 14px;
	background: #E8F8F0;
	border: 1.5px solid var(--wp--preset--color--espresso);
	border-radius: 10px;
	font-size: 12.5px;
	line-height: 1.45;
	color: #1B6E45;
}

/* Thank You Custom Milestone Box */
.tt-thankyou-custom-box {
	background: #FFF9ED;
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 20px;
	box-shadow: 5px 5px 0 var(--wp--preset--color--espresso);
	padding: 28px;
	margin: 24px 0 36px 0;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.tt-custom-box-icon {
	font-size: 42px;
	line-height: 1;
	flex-shrink: 0;
}

.tt-custom-box-title {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 22px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 8px 0;
}

.tt-custom-box-desc {
	font-size: 14.5px;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 14px 0;
}

.tt-custom-box-timeline {
	margin: 0;
	padding-left: 20px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--espresso);
}

@media (max-width: 600px) {
	.tt-color-picker-grid {
		grid-template-columns: 1fr;
	}
	.tt-thankyou-custom-box {
		flex-direction: column;
		padding: 20px;
	}
}

/* ===============================================================
 * Track Order Page Styling
 * =============================================================== */
.tt-track-order-card {
	max-width: 860px;
	margin: 40px auto 60px auto;
	background: var(--wp--preset--color--warm-paper);
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 24px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso);
	padding: 40px 48px;
}

.tt-track-order-card .tt-policy-meta {
	display: inline-block;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.08em;
	background: var(--wp--preset--color--mint);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 999px;
	padding: 4px 14px;
	margin-bottom: 12px;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
}

.tt-track-order-card h2 {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 32px;
	font-weight: 900;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 12px 0;
}

.tt-track-order-card > p {
	font-size: 15px;
	line-height: 1.6;
	color: #615247;
	margin-bottom: 28px;
}

/* Track Order Form WooCommerce Integration */
.tt-track-order-card .woocommerce-form-track-order,
.tt-track-order-card form.track_order {
	background: #FFF9ED;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 18px;
	padding: 28px 32px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	margin-bottom: 36px;
}

.tt-track-order-card .woocommerce-form-track-order p {
	margin-bottom: 18px;
}

.tt-track-order-card .woocommerce-form-track-order label {
	display: block;
	font-weight: 800;
	font-size: 14px;
	color: var(--wp--preset--color--espresso);
	margin-bottom: 6px;
}

.tt-track-order-card .woocommerce-form-track-order input.input-text {
	width: 100%;
	padding: 12px 16px;
	background: #FFFFFF;
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 12px;
	font-size: 15px;
	color: var(--wp--preset--color--espresso);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	box-sizing: border-box;
	transition: all 0.15s ease;
}

.tt-track-order-card .woocommerce-form-track-order input.input-text:focus {
	outline: none;
	background: #FFFDF0;
	border-color: var(--wp--preset--color--tangerine);
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
}

.tt-track-order-card .woocommerce-form-track-order button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 32px;
	background: var(--wp--preset--color--tangerine);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 17px;
	font-weight: 800;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 999px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	cursor: pointer;
	transition: all 0.15s ease;
}

.tt-track-order-card .woocommerce-form-track-order button.button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso);
	background: #E0681E;
}

/* Track Order Tips Grid */
.tt-track-tips-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 24px;
}

.tt-track-tip {
	background: #FFFFFF;
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 16px;
	padding: 18px 20px;
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
}

.tt-tip-icon {
	font-size: 26px;
	display: inline-block;
	margin-bottom: 8px;
}

.tt-track-tip h4 {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 16px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 6px 0;
}

.tt-track-tip p {
	font-size: 13px;
	line-height: 1.5;
	color: #615247;
	margin: 0;
}

.tt-track-tip code {
	background: #F4EBE1;
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
}

@media (max-width: 768px) {
	.tt-track-order-card {
		padding: 24px 20px;
		margin: 20px 16px 40px 16px;
	}
	.tt-track-order-card .woocommerce-form-track-order {
		padding: 20px 16px;
	}
	.tt-track-order-card .woocommerce-form-track-order .form-row,
	.tt-track-order-card .woocommerce-form-track-order .form-row-first,
	.tt-track-order-card .woocommerce-form-track-order .form-row-last {
		width: 100% !important;
		float: none !important;
		margin-right: 0 !important;
	}
	.tt-track-tips-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ===============================================================
 * Customer Reviews CTA & Interactive Drawer Styling
 * =============================================================== */
.tt-reviews-cta-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.tt-btn--write-review {
	background: var(--wp--preset--color--tangerine);
	color: #FFFFFF !important;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 16px;
	font-weight: 800;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 999px;
	padding: 10px 24px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	cursor: pointer;
	transition: all 0.15s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tt-btn--write-review:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso);
	background: #E0681E;
}

.tt-review-incentive-tag {
	font-size: 12.5px;
	font-weight: 800;
	color: #D64545;
	background: #FFF2F2;
	border: 1.5px solid var(--wp--preset--color--espresso);
	border-radius: 999px;
	padding: 3px 10px;
	box-shadow: 1.5px 1.5px 0 var(--wp--preset--color--espresso);
}

/* Interactive Review Drawer */
.tt-review-drawer {
	background: #FFF9ED;
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 24px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso);
	padding: 36px 40px;
	margin: 28px 0 36px 0;
	animation: ttSlideDown 0.25s ease-out;
}

@keyframes ttSlideDown {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tt-review-form-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.tt-review-form-title {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 26px;
	font-weight: 900;
	color: var(--wp--preset--color--espresso);
	margin: 0;
}

.tt-close-drawer-btn {
	background: #FFFFFF;
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font-size: 16px;
	font-weight: 900;
	color: var(--wp--preset--color--espresso);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.tt-close-drawer-btn:hover {
	background: #FFE0E0;
	transform: scale(1.08);
}

.tt-review-form-sub {
	font-size: 14.5px;
	color: #615247;
	margin: 0 0 24px 0;
}

.tt-review-field {
	margin-bottom: 20px;
}

.tt-field-label {
	display: block;
	font-weight: 800;
	font-size: 14px;
	color: var(--wp--preset--color--espresso);
	margin-bottom: 6px;
}

.tt-req {
	color: #E24A4A;
}

/* Star Rating Selector */
.tt-star-rating-select {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #FFFFFF;
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 14px;
	padding: 10px 18px;
	width: fit-content;
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
}

.tt-pick-star {
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	color: #D6CBC2;
	transition: color 0.1s ease, transform 0.1s ease;
	user-select: none;
}

.tt-pick-star.is-active,
.tt-pick-star.is-hover {
	color: #F5A623;
}

.tt-pick-star:hover {
	transform: scale(1.2);
}

.tt-star-mood {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-weight: 800;
	font-size: 14.5px;
	color: var(--wp--preset--color--espresso);
	margin-left: 12px;
}

.tt-review-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.tt-review-field .tt-text-input {
	width: 100%;
	padding: 12px 16px;
	background: #FFFFFF;
	border: 2.5px solid var(--wp--preset--color--espresso);
	border-radius: 12px;
	font-size: 15px;
	color: var(--wp--preset--color--espresso);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	box-sizing: border-box;
	transition: all 0.15s ease;
}

.tt-review-field .tt-text-input:focus {
	outline: none;
	background: #FFFDF0;
	border-color: var(--wp--preset--color--tangerine);
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
}

.tt-review-field .tt-textarea {
	resize: vertical;
	min-height: 90px;
	line-height: 1.5;
}

/* Photo Dropzone */
.tt-review-photo-drop {
	background: #FFFFFF;
	border: 2.5px dashed var(--wp--preset--color--espresso);
	border-radius: 14px;
	padding: 18px 24px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.tt-review-photo-drop:hover {
	background: #FFFDF0;
	border-color: var(--wp--preset--color--tangerine);
}

#tt-rev-photo-prompt {
	font-size: 14px;
	color: #615247;
	text-align: center;
}

#tt-rev-photo-preview {
	display: flex;
	align-items: center;
	gap: 14px;
}

#tt-rev-photo-preview-img {
	width: 60px;
	height: 60px;
	border-radius: 10px;
	border: 2px solid var(--wp--preset--color--espresso);
	object-fit: cover;
}

#tt-rev-photo-name {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#tt-rev-photo-remove {
	background: #FFE8E8;
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 8px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 800;
	color: #C0392B;
	cursor: pointer;
}

.tt-btn--submit-review {
	background: var(--wp--preset--color--tangerine);
	color: #FFFFFF !important;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 17px;
	font-weight: 800;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 999px;
	padding: 12px 36px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	cursor: pointer;
	transition: all 0.15s ease;
}

.tt-btn--submit-review:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso);
	background: #E0681E;
}

.tt-btn--submit-review:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
}

/* Success Card */
.tt-review-success-card {
	background: #E8F8F0;
	border: 3.5px solid var(--wp--preset--color--espresso);
	border-radius: 20px;
	box-shadow: 5px 5px 0 var(--wp--preset--color--espresso);
	padding: 32px;
	text-align: center;
	animation: ttSlideDown 0.25s ease-out;
}

.tt-rev-succ-icon {
	font-size: 48px;
	line-height: 1;
	margin-bottom: 12px;
}

.tt-review-success-card h3 {
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 26px;
	font-weight: 900;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 10px 0;
}

.tt-review-success-card p {
	font-size: 15px;
	color: #2F6142;
	max-width: 500px;
	margin: 0 auto 20px auto;
	line-height: 1.5;
}

.tt-coupon-code-pill {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #FFFFFF;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 999px;
	padding: 8px 12px 8px 24px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso);
	margin-bottom: 16px;
}

.tt-coupon-code-pill code {
	font-family: monospace;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 2px;
	color: var(--wp--preset--color--tangerine);
}

.tt-btn-copy-coupon {
	background: var(--wp--preset--color--mint);
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 999px;
	padding: 6px 16px;
	font-family: var(--wp--preset--font-family--baloo-2);
	font-size: 13.5px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso);
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	transition: all 0.15s ease;
}

.tt-btn-copy-coupon:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--wp--preset--color--espresso);
}

.tt-review-success-card small {
	display: block;
	font-size: 13px;
	color: #558368;
}

@media (max-width: 768px) {
	.tt-review-drawer {
		padding: 24px 18px;
	}
	.tt-review-form-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.tt-reviews-cta-col {
		align-items: flex-start;
		width: 100%;
	}
	.tt-btn--write-review {
		width: 100%;
		justify-content: center;
	}
}

/* ===============================================================
   M14 · PDP Video Integration (Gallery Overlay & Motion Showcase)
   =============================================================== */

/* Gallery Top Bar */
.tt-gallery-top-bar {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	padding-right: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	z-index: 25;
	pointer-events: none;
	box-sizing: border-box;
}

.tt-gallery-top-bar .tt-gallery-wag-badge {
	position: static;
	pointer-events: auto;
}

.tt-gallery-video-toggle {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--butter, #FFEAA7);
	color: var(--wp--preset--color--espresso, #2B2118);
	border: 2.5px solid var(--wp--preset--color--espresso, #2B2118);
	border-radius: 9999px;
	padding: 6px 14px;
	font-family: var(--wp--preset--font-family--baloo-2, inherit);
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 2.5px 2.5px 0 var(--wp--preset--color--espresso, #2B2118);
	transition: all 0.15s ease;
	line-height: 1;
}

.tt-gallery-video-toggle:hover {
	transform: translate(-1px, -1px);
	background: #FFD452;
	box-shadow: 3.5px 3.5px 0 var(--wp--preset--color--espresso, #2B2118);
}

.tt-gallery-video-toggle.is-active {
	background: #FFEAEA;
	color: #D9534F;
	border-color: #D9534F;
}

.tt-toggle-play-icon {
	color: var(--wp--preset--color--tangerine, #F2782C);
	font-size: 12px;
}

/* Gallery Video Panel Overlay (sits directly on top of the 480px image area) */
.tt-gallery-video-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 480px;
	background: var(--wp--preset--color--warm-paper, #FFFDF8);
	border: 3.5px solid var(--wp--preset--color--espresso, #2B2118);
	border-radius: 24px;
	box-shadow: 4px 4px 0 var(--wp--preset--color--espresso, #2B2118);
	overflow: hidden;
	z-index: 20;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.tt-gallery-video-panel.is-active {
	display: flex !important;
}

/* Hide underlying flex-viewport card when video is active to prevent double-card overlap */
.single-product .woocommerce-product-gallery.is-video-active .flex-viewport {
	visibility: hidden !important;
	border-color: transparent !important;
	box-shadow: none !important;
	pointer-events: none !important;
}

@media (max-width: 960px) {
	.tt-gallery-video-panel {
		height: 400px !important;
	}
}

@media (max-width: 640px) {
	.tt-gallery-video-panel {
		height: 330px !important;
	}
}

.tt-gallery-player {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	background: #FFFDF8;
	display: block;
}

.tt-gallery-video-bar {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(43, 33, 24, 0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 6px 12px;
	border-radius: 9999px;
	border: 1.5px solid var(--wp--preset--color--espresso, #2B2118);
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	z-index: 40;
}

.tt-gvid-btn {
	background: #FFFDF8;
	border: 1.5px solid var(--wp--preset--color--espresso, #2B2118);
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--baloo-2, inherit);
	font-size: 12px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso, #2B2118);
	padding: 4px 10px;
	cursor: pointer;
	transition: transform 0.1s ease;
}

.tt-gvid-btn:hover {
	transform: scale(1.05);
	background: var(--wp--preset--color--butter, #FFEAA7);
}

.tt-gvid-btn--photos {
	background: var(--wp--preset--color--tangerine, #F2782C);
	color: #FFF;
	border-color: var(--wp--preset--color--espresso, #2B2118);
}

.tt-gvid-btn--photos:hover {
	background: #E05C10;
}

/* Video Thumbnail Button in flex-control-thumbs */
.tt-flex-video-thumb {
	position: relative;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
}

.tt-thumb-video-btn {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: none;
	background: transparent;
	display: block;
	cursor: pointer;
	border-radius: 14px;
	box-sizing: border-box;
}

.tt-thumb-video-btn .tt-thumb-video-img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover !important;
	background: var(--wp--preset--color--warm-paper);
	border: 2.5px solid var(--wp--preset--color--espresso) !important;
	border-radius: 14px !important;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso);
	cursor: pointer;
	opacity: 0.85;
	padding: 3px;
	box-sizing: border-box;
	display: block;
	transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.tt-thumb-video-btn:hover .tt-thumb-video-img,
.tt-thumb-video-btn.is-active .tt-thumb-video-img {
	opacity: 1;
	border-color: var(--wp--preset--color--tangerine) !important;
	transform: translateY(-2px);
}

.tt-tv-badge {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--baloo-2, inherit);
	font-size: 10px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso, #2B2118);
	letter-spacing: 0.5px;
	background: var(--wp--preset--color--butter, #FFEAA7);
	padding: 2px 6px;
	border-radius: 6px;
	border: 1.5px solid var(--wp--preset--color--espresso, #2B2118);
	box-shadow: 1px 1px 0 var(--wp--preset--color--espresso, #2B2118);
	white-space: nowrap;
	pointer-events: none;
	line-height: 1.2;
	z-index: 2;
	transition: all 0.15s ease;
}

.tt-thumb-video-btn:hover .tt-tv-badge,
.tt-thumb-video-btn.is-active .tt-tv-badge {
	background: var(--wp--preset--color--tangerine, #F2782C);
	color: #FFF;
	transform: translateX(-50%) translateY(-2px);
}

/* Dedicated "SEE IT WAG IN REAL LIFE" Motion Showcase Section */
.tt-band--motion {
	background: #FFFDF8;
	border-top: 3.5px solid var(--wp--preset--color--espresso, #2B2118);
	border-bottom: 3.5px solid var(--wp--preset--color--espresso, #2B2118);
	padding: 60px 24px;
}

.tt-pdp-motion-band .tt-section {
	max-width: 1160px;
	margin: 0 auto;
}

.tt-motion-showcase-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	align-items: center;
	margin-top: 32px;
}

.tt-motion-player-card {
	background: #FFF;
	border: 3.5px solid var(--wp--preset--color--espresso, #2B2118);
	border-radius: 24px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso, #2B2118);
	overflow: hidden;
	position: relative;
}

.tt-motion-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #FFFDF8;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-motion-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tt-motion-badge-pill {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(43, 33, 24, 0.85);
	color: #FFF7E8;
	border: 1.5px solid var(--wp--preset--color--espresso, #2B2118);
	border-radius: 9999px;
	padding: 4px 12px;
	font-family: var(--wp--preset--font-family--baloo-2, inherit);
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	gap: 6px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 5;
}

.tt-motion-pulse-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ADE80;
	animation: tt-badge-pulse 1.5s infinite;
}

.tt-motion-player-overlay {
	position: absolute;
	bottom: 14px;
	right: 14px;
	display: flex;
	gap: 8px;
	z-index: 5;
}

.tt-motion-ctrl-btn {
	background: #FFFDF8;
	border: 2px solid var(--wp--preset--color--espresso, #2B2118);
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--baloo-2, inherit);
	font-size: 12px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso, #2B2118);
	padding: 5px 12px;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso, #2B2118);
	transition: all 0.15s ease;
}

.tt-motion-ctrl-btn:hover {
	transform: translate(-1px, -1px);
	background: var(--wp--preset--color--butter, #FFEAA7);
}

.tt-motion-features-card {
	background: var(--wp--preset--color--warm-paper, #FFFDF8);
	border: 3.5px solid var(--wp--preset--color--espresso, #2B2118);
	border-radius: 24px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--espresso, #2B2118);
	padding: 32px 28px;
	box-sizing: border-box;
}

.tt-motion-card-head {
	border-bottom: 2px dashed rgba(43, 33, 24, 0.15);
	padding-bottom: 18px;
	margin-bottom: 20px;
}

.tt-motion-mini-badge {
	display: inline-block;
	background: var(--wp--preset--color--mint, #A7D7C5);
	color: var(--wp--preset--color--espresso, #2B2118);
	border: 1.5px solid var(--wp--preset--color--espresso, #2B2118);
	border-radius: 9999px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.tt-motion-card-title {
	font-family: var(--wp--preset--font-family--baloo-2, inherit);
	font-size: 24px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso, #2B2118);
	margin: 0 0 6px 0;
}

.tt-motion-card-desc {
	font-size: 14px;
	color: #6C5D50;
	margin: 0;
	line-height: 1.45;
}

.tt-motion-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tt-motion-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.tt-motion-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--wp--preset--color--butter, #FFEAA7);
	border: 2px solid var(--wp--preset--color--espresso, #2B2118);
	box-shadow: 2px 2px 0 var(--wp--preset--color--espresso, #2B2118);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.tt-motion-item-text h4 {
	font-family: var(--wp--preset--font-family--baloo-2, inherit);
	font-size: 16px;
	font-weight: 800;
	color: var(--wp--preset--color--espresso, #2B2118);
	margin: 0 0 3px 0;
}

.tt-motion-item-text p {
	font-size: 13px;
	color: #6C5D50;
	margin: 0;
	line-height: 1.45;
}

@media (max-width: 900px) {
	.tt-motion-showcase-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.tt-band--motion {
		padding: 40px 16px;
	}
}



/* ============================================================
 * Language switcher — header (dropdown pill) & footer (navy)
 * ============================================================ */
.tt-header-actions {
	align-items: center;
}

/* Header: dropdown rendered as a quiet pill next to the cart button */
.tt-lang-switcher.pll-switcher.pll-layout-dropdown {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
}

.tt-lang-switcher .pll-switcher-inner {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: #ffffff;
	border: 3px solid #2B2118;
	border-radius: 9999px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #2B2118;
	cursor: pointer;
	line-height: 1;
	transition: background-color .15s ease, transform .1s ease;
}

.tt-lang-switcher .pll-switcher-inner:hover {
	background: #CDEBC5;
}

.tt-lang-switcher .pll-switcher-inner .pll-switcher-label {
	font-weight: 800;
}

.tt-lang-switcher .pll-switcher-flag img {
	display: block;
	border-radius: 2px;
}

/* Chevron toggle that opens the submenu */
.tt-lang-switcher button.pll-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: #2B2118;
	cursor: pointer;
	font-size: 11px;
	line-height: 1;
}

.tt-lang-switcher button.pll-submenu-toggle::before {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform .15s ease;
}

.tt-lang-switcher button.pll-submenu-toggle[aria-expanded="true"]::before {
	transform: rotate(-135deg) translate(-1px, -1px);
}

.tt-lang-switcher button.pll-submenu-toggle:hover {
	background: #CDEBC5;
}

/* Dropdown panel */
/* Note: Polylang controls submenu visibility via
   .pll-switcher-inner:hover and [aria-expanded="true"] + ul — do NOT
   set display/visibility here, only skin the open panel. */
.tt-lang-switcher .pll-switcher-inner {
	position: relative;
	--tt-lang-gap: 8px;
}

/* Invisible hover bridge: fills the gap between pill and panel so
   .pll-switcher-inner stays :hover-ed while the mouse travels across
   the gap (Polylang only keeps the submenu open while
   .pll-switcher-inner is hovered — without the bridge the menu
   vanishes the moment the pointer leaves the pill). */
.tt-lang-switcher .pll-switcher-inner::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: var(--tt-lang-gap);
}

.tt-lang-switcher .pll-switcher-inner ul {
	top: calc(100% + var(--tt-lang-gap));
	right: 0;
	left: auto;
	z-index: 999;
	min-width: 160px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #FFFAF0;
	border: 3px solid #2B2118;
	border-radius: 16px;
	box-shadow: 4px 4px 0 rgba(43, 33, 24, .9);
	gap: 2px;
}

.tt-lang-switcher ul li {
	margin: 0;
}

.tt-lang-switcher ul li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .03em;
	color: #2B2118;
	text-decoration: none;
	line-height: 1;
}

.tt-lang-switcher ul li a:hover {
	background: #CDEBC5;
}

.tt-lang-switcher ul li.current-lang a {
	background: #FFE9A8;
	cursor: default;
}

/* Footer switcher on navy band: cream text, lemon hover */
.tt-footer-switcher .pll-switcher ul {
	position: static;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.tt-footer-switcher .pll-switcher ul li a {
	display: inline-flex;
	gap: 8px;
	padding: 4px 6px;
	font-size: 14px;
	font-weight: 700;
	color: #FFFDF8;
	text-decoration: none;
}

.tt-footer-switcher .pll-switcher ul li a:hover {
	color: #FFD23F;
	text-decoration: underline;
}

.tt-footer-switcher .pll-switcher ul li.current-lang a {
	color: #FFD23F;
	font-weight: 800;
	text-decoration: underline;
}

/* ============================================================
 * Greek subset fallbacks
 *
 * Baloo 2 (display) and Nunito (body) ship no Greek glyphs, so
 * Greek pages used to fall through to generic cursive/sans-serif
 * system fonts. Comfortaa (rounded, mirrors Baloo 2's character)
 * and Manrope (humanist sans, close to Nunito) cover Greek.
 * unicode-range keeps these files (≈10 KB each) unloaded for
 * Latin pages — the browser only fetches them when Greek text
 * is actually rendered.
 * ============================================================ */
@font-face {
	font-family: 'Comfortaa';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/comfortaa-greek.woff2') format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/manrope-greek.woff2') format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}