/* ==========================================================================
   Combine harvester FAMILY archives — "Assembly Dossier" v2 (EN + VI).
   Self-contained image-led design system: dark blueprint hero with the
   exploded-view artwork floating free, family progress strip, stepped
   sibling index, asymmetric parts wall with live spec chips, and the
   shared fabrication CTA band. Scoped to body.tt-asm-scope (family roots);
   the per-family accent arrives via --tt-asm-accent (inline on <body> and
   the .tt-asm root).
   ========================================================================== */

body.tt-asm-scope {
	--tt-asm-ink-950: #050c14;
	--tt-asm-ink-900: #0a1522;
	--tt-asm-ink-800: #0f2033;
	--tt-asm-cobalt: #273b94;
	--tt-asm-paper: #eef1f5;
	--tt-asm-plate: #ffffff;
	--tt-asm-line: #dce3ea;
	--tt-asm-text: #0f1c29;
	--tt-asm-muted: #5b6975;
	--tt-asm-ease: cubic-bezier(.22, 1, .36, 1);
	background: var(--tt-asm-paper);
}

body.tt-asm-scope #main {
	background: var(--tt-asm-paper);
}

/* Legacy Flatsome chrome replaced by the design system. */
body.tt-asm-scope .shop-page-title,
body.tt-asm-scope .custom-view-toggle,
body.tt-asm-scope .wc-parent-category-filter {
	display: none !important;
}

body.tt-asm-scope .category-page-row {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.tt-asm-scope .category-page-row > .large-3 {
	display: none !important;
}

body.tt-asm-scope .category-page-row > .large-9,
body.tt-asm-scope .category-page-row > .large-12 {
	width: 100%;
	max-width: none;
	flex-basis: 100%;
	padding: 0;
}

body.tt-asm-scope .shop-container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.tt-asm,
.tt-asm *,
.tt-asm *::before,
.tt-asm *::after,
body.tt-asm-scope .shop-container *,
body.tt-asm-scope .shop-container *::before,
body.tt-asm-scope .shop-container *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Shared atoms
   -------------------------------------------------------------------------- */

.tt-asm-kicker {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.tt-asm-kicker--light {
	color: var(--tt-asm-muted);
}

.tt-asm-kicker__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tt-asm-accent, #f2b13f);
	box-shadow: 0 0 10px rgba(255, 255, 255, .3);
	box-shadow: 0 0 10px color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 70%, transparent);
}

.tt-asm-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 15px 24px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .35s var(--tt-asm-ease), box-shadow .35s var(--tt-asm-ease), background-color .25s ease, border-color .25s ease, color .25s ease;
}

.tt-asm-btn__arrow {
	display: inline-block;
	transition: transform .35s var(--tt-asm-ease);
}

.tt-asm-btn:hover .tt-asm-btn__arrow,
.tt-asm-btn:focus-visible .tt-asm-btn__arrow {
	transform: translate(3px, -2px);
}

.tt-asm-btn--primary {
	background: var(--tt-asm-accent, #f2b13f);
	color: var(--tt-asm-accent-ink, #231703);
	box-shadow: 0 14px 34px -14px rgba(5, 12, 20, .5);
	box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 62%, transparent);
}

.tt-asm-btn--primary:hover,
.tt-asm-btn--primary:focus-visible {
	color: var(--tt-asm-accent-ink, #231703);
	transform: translateY(-2px);
	box-shadow: 0 20px 42px -14px rgba(5, 12, 20, .55);
	box-shadow: 0 20px 42px -14px color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 72%, transparent);
}

.tt-asm-btn--ghost {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .22);
	color: #eaf1f8;
}

.tt-asm-btn--ghost:hover,
.tt-asm-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
	transform: translateY(-2px);
}

.tt-asm-btn--outline {
	background: transparent;
	border-color: rgba(15, 28, 41, .26);
	border-color: color-mix(in srgb, var(--tt-asm-text) 26%, transparent);
	color: var(--tt-asm-text);
}

.tt-asm-btn--outline:hover,
.tt-asm-btn--outline:focus-visible {
	border-color: var(--tt-asm-text);
	transform: translateY(-2px);
}

.tt-asm-breadcrumb {
	margin: 0 0 26px;
}

.tt-asm-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.tt-asm-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, .52);
}

.tt-asm-breadcrumb li + li::before {
	content: "/";
	color: rgba(255, 255, 255, .28);
	font-weight: 400;
}

.tt-asm-breadcrumb a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	transition: color .2s ease;
}

.tt-asm-breadcrumb a:hover,
.tt-asm-breadcrumb a:focus-visible {
	color: #fff;
}

.tt-asm-breadcrumb li[aria-current] {
	color: var(--tt-asm-accent, #f2b13f);
}

.tt-asm-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.tt-asm-meta li {
	padding: 8px 13px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}

/* Scroll reveal (JS adds .is-visible; content is visible without JS). */
.tt-asm [data-tt-reveal],
body.tt-asm-scope [data-tt-reveal] {
	opacity: 1;
	transform: none;
}

.tt-asm .tt-reveal-armed,
body.tt-asm-scope .tt-reveal-armed {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s var(--tt-asm-ease), transform .8s var(--tt-asm-ease);
}

.tt-asm .tt-reveal-armed.is-visible,
body.tt-asm-scope .tt-reveal-armed.is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Hero — dark blueprint stage
   -------------------------------------------------------------------------- */

.tt-asm-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(34% 30% at 4% 96%, rgba(71, 103, 232, .16), transparent 70%),
		linear-gradient(128deg, #0e2036 0%, var(--tt-asm-ink-900) 46%, var(--tt-asm-ink-950) 100%);
	background:
		radial-gradient(46% 40% at 78% 18%, color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 16%, transparent) 0%, transparent 66%),
		radial-gradient(34% 30% at 4% 96%, rgba(71, 103, 232, .16), transparent 70%),
		linear-gradient(128deg, #0e2036 0%, var(--tt-asm-ink-900) 46%, var(--tt-asm-ink-950) 100%);
	color: #f2f7fb;
}

.tt-asm-hero__bg {
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
	mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
}

.tt-asm-hero__shell {
	display: grid;
	grid-template-columns: minmax(400px, 1.02fr) minmax(460px, .98fr);
	align-items: center;
	gap: clamp(36px, 4.6vw, 70px);
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(64px, 7vw, 104px) 26px clamp(30px, 4vw, 56px);
}

.tt-asm-hero__title {
	margin: 0 0 18px;
	font-size: clamp(42px, 5.6vw, 76px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.028em;
	color: #f7fafc;
}

.tt-asm-hero__lead {
	max-width: 46ch;
	margin: 0 0 26px;
	font-size: clamp(15px, 1.25vw, 17.5px);
	line-height: 1.65;
	color: rgba(226, 236, 245, .78);
}

.tt-asm-index-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 9px 15px;
	border: 1px solid rgba(255, 255, 255, .24);
	border: 1px solid color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 42%, transparent);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	background: color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 10%, transparent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tt-asm-accent, #f2b13f);
}

.tt-asm-index-chip__family {
	color: inherit;
	text-decoration: none;
}

.tt-asm-index-chip__family:hover,
.tt-asm-index-chip__family:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tt-asm-index-chip__sep {
	opacity: .45;
}

.tt-asm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Stage — free-floating artwork on the engineering plate */

.tt-asm-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(340px, 34vw, 520px);
}

.tt-asm-stage__ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-52%, -54%);
	font-size: clamp(190px, 22vw, 340px);
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.02em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .07);
	pointer-events: none;
	user-select: none;
}

.tt-asm-stage__orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(86%, 460px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border: 1.5px dashed rgba(255, 255, 255, .26);
	border: 1.5px dashed color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 34%, transparent);
	border-radius: 50%;
	pointer-events: none;
	animation: tt-asm-orbit-spin 70s linear infinite;
	animation-play-state: paused;
}

.tt-asm-stage__orbit::before,
.tt-asm-stage__orbit::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tt-asm-accent, #f2b13f);
	box-shadow: 0 0 12px rgba(255, 255, 255, .3);
	box-shadow: 0 0 12px color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 80%, transparent);
}

.tt-asm-stage__orbit::before {
	top: -4px;
	left: 50%;
	margin-left: -3.5px;
}

.tt-asm-stage__orbit::after {
	bottom: -4px;
	left: 50%;
	margin-left: -3.5px;
	opacity: .5;
}

@keyframes tt-asm-orbit-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.tt-asm-stage__cross {
	position: absolute;
	width: 22px;
	height: 22px;
	pointer-events: none;
	opacity: .55;
}

.tt-asm-stage__cross::before,
.tt-asm-stage__cross::after {
	content: "";
	position: absolute;
	background: rgba(255, 255, 255, .45);
	background: color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 72%, transparent);
}

.tt-asm-stage__cross::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
}

.tt-asm-stage__cross::after {
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
}

.tt-asm-stage__cross--tl {
	top: 6%;
	left: 4%;
}

.tt-asm-stage__cross--br {
	right: 4%;
	bottom: 12%;
}

.tt-asm-stage__figure {
	position: relative;
	z-index: 1;
	width: min(92%, 520px);
	margin: 0;
	will-change: transform;
}

.tt-asm-stage__figure img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .5)) drop-shadow(0 8px 16px rgba(0, 0, 0, .34));
	animation: tt-asm-float 7.5s ease-in-out infinite;
	animation-play-state: paused;
}

[data-tt-asm-root].is-ambient-active .tt-asm-stage__orbit,
[data-tt-asm-root].is-ambient-active .tt-asm-stage__figure img {
	animation-play-state: running;
}

@keyframes tt-asm-float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
}

.tt-asm-stage__dim {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.tt-asm-stage__dim-line {
	position: relative;
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--tt-asm-accent, #f2b13f), rgba(255, 255, 255, .12));
	background: linear-gradient(90deg, color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 60%, transparent), rgba(255, 255, 255, .12));
}

.tt-asm-stage__dim-line::before,
.tt-asm-stage__dim-line::after {
	content: "";
	position: absolute;
	top: -3.5px;
	width: 1px;
	height: 8px;
	background: rgba(255, 255, 255, .34);
}

.tt-asm-stage__dim-line::before {
	left: 0;
}

.tt-asm-stage__dim-line::after {
	right: 0;
}

.tt-asm-stage__dim-tag {
	color: var(--tt-asm-accent, #f2b13f);
}

.tt-asm-stage__hint {
	position: absolute;
	top: 4%;
	right: 2%;
	max-width: 200px;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.5;
	text-align: right;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	transition: color .3s ease;
}

.tt-asm-stage__hint.is-swiped {
	color: var(--tt-asm-accent, #f2b13f);
}

/* Progress strip — seven families, current locked */

.tt-asm-progress {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.tt-asm-progress ol {
	display: flex;
	gap: 0;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 26px;
	list-style: none;
}

.tt-asm-progress li {
	flex: 1 1 0;
	min-width: 0;
}

.tt-asm-progress a {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 12px 18px;
	text-decoration: none;
	border-left: 1px solid rgba(255, 255, 255, .07);
	transition: background-color .25s ease;
}

.tt-asm-progress li:first-child a {
	border-left: 0;
}

.tt-asm-progress a:hover,
.tt-asm-progress a:focus-visible {
	background: rgba(255, 255, 255, .045);
}

.tt-asm-progress__num {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .18em;
	color: rgba(255, 255, 255, .38);
}

.tt-asm-progress__name {
	overflow: hidden;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .66);
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color .25s ease;
}

.tt-asm-progress a:hover .tt-asm-progress__name,
.tt-asm-progress a:focus-visible .tt-asm-progress__name {
	color: #fff;
}

.tt-asm-progress__bar {
	display: block;
	height: 2px;
	margin-top: 4px;
	background: rgba(255, 255, 255, .14);
	border-radius: 2px;
	transition: background-color .3s ease;
}

.tt-asm-progress li.is-current a {
	background: rgba(255, 255, 255, .07);
	background: color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 7%, transparent);
}

.tt-asm-progress li.is-current .tt-asm-progress__num,
.tt-asm-progress li.is-current .tt-asm-progress__name {
	color: var(--tt-asm-accent, #f2b13f);
}

.tt-asm-progress li.is-current .tt-asm-progress__bar {
	background: var(--tt-asm-accent, #f2b13f);
	box-shadow: 0 0 12px rgba(255, 255, 255, .3);
	box-shadow: 0 0 12px color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 65%, transparent);
}

/* --------------------------------------------------------------------------
   Parts wall — asymmetric native-loop restyle
   -------------------------------------------------------------------------- */

/* Scroll anchor for the hero CTA; carries the rhythm below the hero. */
.tt-asm-wall-anchor {
	display: block;
	height: clamp(30px, 3.8vw, 52px);
	scroll-margin-top: 16px;
}

/* The wall grid — native Woo loop, asymmetric with a featured lead slot */

body.tt-asm-scope .shop-container .row,
body.tt-asm-scope .shop-container .products {
	width: 100%;
	max-width: 1280px;
	margin-right: auto;
	margin-left: auto;
}

body.tt-asm-scope .category-page-row .products {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr);
	gap: 18px;
	padding: 0 26px;
}

body.tt-asm-scope .category-page-row .products::before,
body.tt-asm-scope .category-page-row .products::after {
	display: none;
}

body.tt-asm-scope .category-page-row .products > .product-small {
	grid-column: span 3;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: none !important;
}

/* Featured lead slot — the first part gets the stage. */
body.tt-asm-scope .category-page-row .products > .product-small:first-child {
	grid-column: span 6;
	grid-row: span 2;
}

body.tt-asm-scope .category-page-row .product-small > .col-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	border: 1px solid var(--tt-asm-line);
	border-radius: 18px;
	background: var(--tt-asm-plate);
	overflow: hidden;
	transition: transform .5s var(--tt-asm-ease), border-color .3s ease, box-shadow .5s var(--tt-asm-ease);
}

body.tt-asm-scope .category-page-row .product-small > .col-inner::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	right: 24px;
	left: 24px;
	height: 3px;
	border-radius: 0 0 4px 4px;
	background: var(--tt-asm-accent, #f2b13f);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--tt-asm-ease);
}

body.tt-asm-scope .category-page-row .product-small > .col-inner:hover {
	transform: translateY(-5px);
	border-color: var(--tt-asm-accent, #f2b13f);
	border-color: color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 50%, var(--tt-asm-line));
	box-shadow: 0 26px 48px -26px rgba(15, 28, 41, .3);
}

body.tt-asm-scope .category-page-row .product-small > .col-inner:hover::before {
	transform: scaleX(1);
}

body.tt-asm-scope .category-page-row .product-small .badge-container,
body.tt-asm-scope .category-page-row .product-small .image-tools {
	display: none !important;
}

body.tt-asm-scope .category-page-row .product-small .box {
	display: flex;
	flex: 1;
	flex-direction: column;
	height: 100%;
}

body.tt-asm-scope .category-page-row .product-small .box-image {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 22px 22px 8px;
	background: linear-gradient(165deg, #f6f8fb 0%, #e9edf3 100%);
}

body.tt-asm-scope .category-page-row .product-small .box-image > div:first-child,
body.tt-asm-scope .category-page-row .product-small .box-image a {
	display: block;
	width: 100%;
	height: 100%;
}

body.tt-asm-scope .category-page-row .product-small .box-image img {
	display: block;
	width: 100%;
	height: 168px;
	object-fit: contain;
	filter: drop-shadow(0 16px 18px rgba(15, 28, 41, .2));
	transition: transform .55s var(--tt-asm-ease);
}

body.tt-asm-scope .category-page-row .product-small > .col-inner:hover .box-image img {
	transform: scale(1.06) rotate(-1.2deg) translateY(-4px);
}

body.tt-asm-scope .category-page-row .products > .product-small:first-child .box-image {
	flex: 1 1 auto;
	min-height: 0;
}

body.tt-asm-scope .category-page-row .products > .product-small:first-child .box-text {
	flex: 0 0 auto;
}

body.tt-asm-scope .category-page-row .products > .product-small:first-child .box-image img {
	height: 100%;
	min-height: 320px;
}

body.tt-asm-scope .category-page-row .product-small .box-text {
	position: static; /* let the card index pin to .col-inner, not this box */
	--tt-asm-card-x: 20px; /* single left edge for name, chips and footer */
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 16px var(--tt-asm-card-x) 0;
	background: var(--tt-asm-plate);
	text-align: left;
}

body.tt-asm-scope .category-page-row .product-small .title-wrapper {
	margin: 0;
}

body.tt-asm-scope .category-page-row .product-small .product-cat {
	display: none !important;
}

body.tt-asm-scope .category-page-row .product-small .product-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.3em); /* one-line names keep the same rhythm */
	margin: 0;
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.3;
}

body.tt-asm-scope .category-page-row .products > .product-small:first-child .product-title {
	font-size: clamp(19px, 1.6vw, 24px);
}

body.tt-asm-scope .category-page-row .product-small .product-title a {
	color: var(--tt-asm-text);
	text-decoration: none;
	transition: color .2s ease;
}

body.tt-asm-scope .category-page-row .product-small .product-title a:hover {
	color: var(--tt-asm-cobalt);
}

body.tt-asm-scope .category-page-row .product-small .price-wrapper {
	display: none;
}

/* Injected card extras: live model chips + full-width detail row */

.tt-asm-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 13px;
	margin-top: 13px;
	padding: 0;
}



body.tt-asm-scope .category-page-row .product-small .tt-asm-card__chips {
	display: flex !important; /* beat Flatsome's .box-text ul rules */
	flex-wrap: nowrap;
	gap: 6px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden; /* fixed truncation: 2 chips on mobile, 3 on desktop */
}

body.tt-asm-scope .category-page-row .product-small .tt-asm-card__chips li {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 24px;
	margin: 0;
	padding: 0 9px;
	border: 1px solid #e3e9f0;
	border-radius: 6px;
	background: #f4f6f9;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1;
	white-space: nowrap;
	color: #4b5a68;
}

body.tt-asm-scope .category-page-row .product-small .tt-asm-card__chips .tt-asm-card__chips-more {
	border-style: dashed;
	background: transparent;
	color: var(--tt-asm-muted);
}

/* Mobile counter replaces the third chip below 640px. */
body.tt-asm-scope .category-page-row .product-small .tt-asm-card__chips .tt-asm-card__chips-more--sm {
	display: none;
}

@media (max-width: 639px) {
	body.tt-asm-scope .category-page-row .product-small .tt-asm-card__chips > li:nth-child(3),
	body.tt-asm-scope .category-page-row .product-small .tt-asm-card__chips .tt-asm-card__chips-more--lg {
		display: none;
	}

	body.tt-asm-scope .category-page-row .product-small .tt-asm-card__chips .tt-asm-card__chips-more--sm {
		display: inline-flex;
	}
}

.tt-asm-card__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: auto calc(-1 * var(--tt-asm-card-x, 20px)) 0; /* auto top pins the row to the card bottom */
	padding: 13px var(--tt-asm-card-x, 20px) 15px;
	border-top: 1px solid #e7ecf2;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--tt-asm-text);
	text-decoration: none;
	transition: color .25s ease, background-color .3s ease;
}

/* Flatsome's `.box a` display rule is more specific than the card atom. */
body.tt-asm-scope .category-page-row .product-small .tt-asm-card__link {
	display: flex;
}

.tt-asm-card__link-arrow {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	/* soft chip tinted with the family accent (was dead gray); hover keeps
	   the accent fill below — same chip language, per-family hue. */
	background: #eef1f6;
	background: color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 12%, #fff);
	color: var(--tt-asm-accent-ink, #231703);
	line-height: 0;
	transition: background-color .3s ease, color .3s ease, transform .4s var(--tt-asm-ease);
}

.tt-asm-card__link-arrow svg {
	display: block;
}

.tt-asm-card__link:hover,
.tt-asm-card__link:focus-visible {
	color: var(--tt-asm-cobalt);
}

.tt-asm-card__link:hover .tt-asm-card__link-arrow,
.tt-asm-card__link:focus-visible .tt-asm-card__link-arrow,
body.tt-asm-scope .category-page-row .product-small > .col-inner:hover .tt-asm-card__link-arrow {
	background: var(--tt-asm-accent, #f2b13f);
	color: var(--tt-asm-accent-ink, #231703);
	transform: translate(2px, -2px);
}

/* Pagination + empty state */

body.tt-asm-scope .shop-container nav.woocommerce-pagination {
	width: 100%;
	max-width: 1280px;
	margin: clamp(28px, 3vw, 42px) auto 0;
	padding: 0 26px;
}

body.tt-asm-scope nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.tt-asm-scope nav.woocommerce-pagination ul li {
	margin: 0;
	border: 0;
}

body.tt-asm-scope nav.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--tt-asm-line);
	border-radius: 10px;
	background: var(--tt-asm-plate);
	font-size: 13px;
	font-weight: 700;
	color: var(--tt-asm-text);
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

body.tt-asm-scope nav.woocommerce-pagination .page-numbers:hover,
body.tt-asm-scope nav.woocommerce-pagination .page-numbers:focus-visible {
	border-color: var(--tt-asm-accent, #f2b13f);
}

body.tt-asm-scope nav.woocommerce-pagination .page-numbers.current {
	background: var(--tt-asm-text);
	border-color: var(--tt-asm-text);
	color: #fff;
}

body.tt-asm-scope .shop-container .woocommerce-info,
body.tt-asm-scope .shop-container .woocommerce-no-products-found {
	width: calc(100% - 52px);
	max-width: 1280px;
	margin: 0 auto;
	padding: 26px 28px;
	border: 1px dashed rgba(15, 28, 41, .28);
	border: 1px dashed color-mix(in srgb, var(--tt-asm-text) 28%, transparent);
	border-radius: 16px;
	background: var(--tt-asm-plate);
	font-size: 15px;
	color: var(--tt-asm-muted);
}

body.tt-asm-scope .shop-container .woocommerce-info::before,
body.tt-asm-scope .shop-container .woocommerce-no-products-found::before {
	display: none;
}

/* --------------------------------------------------------------------------
   Fabrication CTA band
   -------------------------------------------------------------------------- */

.tt-asm-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: clamp(48px, 5.5vw, 80px);
	background:
		linear-gradient(120deg, #0d1f34 0%, var(--tt-asm-ink-900) 55%, var(--tt-asm-ink-950) 100%);
	background:
		radial-gradient(44% 60% at 88% 30%, color-mix(in srgb, var(--tt-asm-accent, #f2b13f) 15%, transparent) 0%, transparent 70%),
		linear-gradient(120deg, #0d1f34 0%, var(--tt-asm-ink-900) 55%, var(--tt-asm-ink-950) 100%);
	color: #f2f7fb;
}

.tt-asm-cta::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 60%);
	mask-image: linear-gradient(90deg, #000 0%, transparent 60%);
}

.tt-asm-cta__shell {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
	align-items: center;
	gap: clamp(28px, 4vw, 60px);
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(48px, 5.4vw, 76px) 26px;
}

.tt-asm-cta__title {
	max-width: 20ch;
	margin: 0 0 14px;
	font-size: clamp(26px, 3vw, 42px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.12;
	color: #f7fafc;
}

.tt-asm-cta__lead {
	max-width: 56ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(226, 236, 245, .72);
}

.tt-asm-cta__actions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 16px;
}

.tt-asm-cta__actions .tt-asm-btn {
	justify-content: center;
	padding: 19px 30px;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	body.tt-asm-scope .category-page-row .products > .product-small {
		grid-column: span 4;
	}

	body.tt-asm-scope .category-page-row .products > .product-small:first-child {
		grid-column: span 8;
	}
}

@media (max-width: 1023px) {
	.tt-asm-hero__shell {
		grid-template-columns: 1fr;
		gap: 10px;
		padding-top: clamp(48px, 6vw, 72px);
	}

	.tt-asm-stage {
		order: -1;
		min-height: 300px;
		margin-bottom: 12px;
	}

	.tt-asm-stage__figure {
		width: min(74%, 420px);
	}

	.tt-asm-stage__ghost {
		font-size: clamp(160px, 26vw, 260px);
	}

	.tt-asm-progress__name {
		display: none;
	}

	.tt-asm-progress a {
		align-items: center;
		padding: 14px 6px 16px;
	}

	.tt-asm-progress__bar {
		width: 100%;
	}

	.tt-asm-cta__shell {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 849px) {
	body.tt-asm-scope .category-page-row .products > .product-small {
		grid-column: span 6;
	}

	body.tt-asm-scope .category-page-row .products > .product-small:first-child {
		grid-column: span 12;
		grid-row: auto;
	}

	body.tt-asm-scope .category-page-row .products > .product-small:first-child .box-image img {
		height: 240px;
		min-height: 0;
	}
}

@media (max-width: 639px) {
	.tt-asm-hero__shell {
		padding-right: 20px;
		padding-left: 20px;
	}

	.tt-asm-hero__title {
		font-size: clamp(34px, 9.4vw, 44px);
	}

	.tt-asm-stage {
		min-height: 240px;
	}

	.tt-asm-stage__figure {
		width: min(86%, 330px);
	}

	.tt-asm-stage__dim-tag,
	.tt-asm-stage__dim-label {
		font-size: 9px;
	}

	.tt-asm-progress ol {
		padding: 0 20px;
	}

	body.tt-asm-scope .category-page-row .products,
	body.tt-asm-scope .shop-container nav.woocommerce-pagination {
		padding-right: 20px;
		padding-left: 20px;
	}

	body.tt-asm-scope .category-page-row .products {
		gap: 12px;
	}

	body.tt-asm-scope .category-page-row .product-small .box-text {
		--tt-asm-card-x: 14px;
		padding: 13px var(--tt-asm-card-x) 0;
	}

	.tt-asm-card {
		margin-top: 12px;
	}

	.tt-asm-card__link {
		padding-bottom: 13px;
	}

	.tt-asm-cta__shell {
		padding-right: 20px;
		padding-left: 20px;
	}
}

@media (max-width: 359px) {
	body.tt-asm-scope .category-page-row .product-small .tt-asm-card__link {
		gap: 4px;
		padding-right: 8px;
		padding-left: 8px;
		font-size: 10px;
		letter-spacing: .08em;
	}

	body.tt-asm-scope .category-page-row .product-small .tt-asm-card__link-arrow {
		width: 24px;
		height: 24px;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tt-asm-stage__orbit,
	.tt-asm-stage__figure img {
		animation: none;
	}

	.tt-asm *,
	body.tt-asm-scope .shop-container * {
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Harvest Frame — uniform precision grid (scoped to this family only)
   Removes the asymmetric featured-first slot; all cards share one plate.
   -------------------------------------------------------------------------- */

body.term-harvest-frame.tt-asm-scope .category-page-row .products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small,
body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small:first-child {
	grid-column: span 1;
	grid-row: auto;
}

body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small:first-child .box-image {
	flex: 0 0 auto;
	min-height: 0;
}

body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small:first-child .box-text {
	flex: 1 1 auto;
}

body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small:first-child .box-image img {
	height: 168px;
	min-height: 0;
}

body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small:first-child .product-title {
	font-size: 14.5px;
}

body.term-harvest-frame.tt-asm-scope .category-page-row .product-small > .col-inner:hover,
body.term-harvest-frame.tt-asm-scope .category-page-row .product-small > .col-inner:focus-within {
	border-color: var(--tt-asm-cobalt);
	box-shadow: 0 22px 44px -22px rgba(39, 59, 148, .3);
	transform: translateY(-3px);
}

body.term-harvest-frame.tt-asm-scope .category-page-row .product-small > .col-inner:hover .tt-asm-card__link-arrow,
body.term-harvest-frame.tt-asm-scope .category-page-row .product-small .tt-asm-card__link:hover .tt-asm-card__link-arrow,
body.term-harvest-frame.tt-asm-scope .category-page-row .product-small .tt-asm-card__link:focus-visible .tt-asm-card__link-arrow {
	background: var(--tt-asm-cobalt);
	color: #fff;
}

@media (max-width: 1100px) {
	body.term-harvest-frame.tt-asm-scope .category-page-row .products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small,
	body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small:first-child {
		grid-column: span 1;
	}
}

@media (max-width: 849px) {
	body.term-harvest-frame.tt-asm-scope .category-page-row .products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small,
	body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small:first-child {
		grid-column: span 1;
	}

	body.term-harvest-frame.tt-asm-scope .category-page-row .products > .product-small:first-child .box-image img {
		height: 168px;
		min-height: 0;
	}
}

@media (max-width: 359px) {
	body.term-harvest-frame.tt-asm-scope .category-page-row .products {
		grid-template-columns: 1fr;
	}
}
