/* ==========================================================================
   TEEMCW — MOTION, HERO, DRAWER, LOADER
   Loaded after woocommerce.css, before responsive.css.

   Everything here animates transform or opacity only. No width, height, top
   or left is ever transitioned, so the compositor does the work and a 144Hz
   panel gets 144 distinct frames instead of 144 copies of the same one.
   ========================================================================== */

/* Let the browser skip work for offscreen sections entirely. */
.tw-sec {
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

/* --------------------------------------------------------------------------
   Page loader
   -------------------------------------------------------------------------- */

.tw-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	gap: var(--sp-5);
	background: var(--white);
	transition: opacity 420ms var(--ease), visibility 420ms;
}

.tw-loader.is-done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.tw-loader__in {
	display: grid;
	justify-items: center;
	gap: var(--sp-5);
}

.tw-loader__logo {
	width: 148px;
	height: auto;
	animation: tw-pulse 1.5s var(--ease) infinite;
}

.tw-loader__bar {
	width: 160px;
	height: 2px;
	border-radius: var(--r-pill);
	background: var(--rose-100);
	overflow: hidden;
}

.tw-loader__bar span {
	display: block;
	width: 40%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--rose-300), var(--rose-500));
	animation: tw-slide 1.15s var(--ease) infinite;
}

@keyframes tw-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .74; transform: scale(.975); }
}

@keyframes tw-slide {
	0%   { transform: translateX(-110%); }
	100% { transform: translateX(360%); }
}

@media (prefers-reduced-motion: reduce) {
	.tw-loader__logo,
	.tw-loader__bar span { animation: none; }
	.tw-loader__bar span { width: 100%; }
}

/* --------------------------------------------------------------------------
   Scroll progress
   -------------------------------------------------------------------------- */

.tw-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: calc(var(--z-header) + 5);
	pointer-events: none;
	background: transparent;
}

.tw-progress__bar {
	height: 100%;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--rose-300), var(--rose-500), var(--rose-600));
	will-change: transform;
}

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */

.tw-rv {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
	will-change: opacity, transform;
}

.tw-rv.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

html.no-js .tw-rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.tw-rv { opacity: 1 !important; transform: none !important; transition: none; }
}

/* --------------------------------------------------------------------------
   Hero carousel
   -------------------------------------------------------------------------- */

.tw-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.tw-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(52rem 34rem at 78% 12%, var(--rose-50), transparent 64%),
		radial-gradient(38rem 30rem at 8% 92%, var(--blush-3), transparent 62%),
		linear-gradient(180deg, var(--white) 0%, var(--blush-1) 100%);
}

.tw-hero__in {
	position: relative;
	padding-block: var(--sp-9) var(--sp-8);
}

/* All slides stack; only the active one is painted. */
.tw-hero__stage {
	display: grid;
	min-height: 30rem;
}

.tw-slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	gap: var(--sp-8);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 14px, 0);
	transition: opacity 760ms var(--ease-out),
	            transform 760ms var(--ease-out),
	            visibility 760ms;
	pointer-events: none;
}

.tw-slide.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* The copy arrives just after the slide, which reads as intentional rather
   than as a single hard cut. */
.tw-slide__copy > * {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}

.tw-slide.is-on .tw-slide__copy > * { opacity: 1; transform: none; }
.tw-slide.is-on .tw-slide__copy > *:nth-child(1) { transition-delay: 90ms; }
.tw-slide.is-on .tw-slide__copy > *:nth-child(2) { transition-delay: 160ms; }
.tw-slide.is-on .tw-slide__copy > *:nth-child(3) { transition-delay: 230ms; }
.tw-slide.is-on .tw-slide__copy > *:nth-child(4) { transition-delay: 300ms; }

.tw-slide__art {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--blush-2);
	box-shadow: var(--shadow-md);
}

.tw-slide__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 1100ms var(--ease-out);
}
.tw-slide.is-on .tw-slide__img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
	.tw-slide,
	.tw-slide__copy > *,
	.tw-slide__img { transition: none; transform: none; }
	.tw-slide__img { transform: none; }
}

/* Carousel controls */
.tw-hero__nav {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

.tw-hero__arrow {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: var(--white);
	color: var(--ink-2);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}

.tw-hero__arrow:first-child svg { transform: rotate(180deg); }

.tw-hero__arrow:hover {
	background: var(--rose-500);
	border-color: var(--rose-500);
	color: #fff;
	transform: translateY(-1px);
}

.tw-hero__dots { display: flex; gap: var(--sp-2); }

.tw-hero__dot {
	position: relative;
	width: 2.25rem;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--rose-100);
	cursor: pointer;
	overflow: hidden;
}

.tw-hero__dot-fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--rose-500);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.tw-hero__dot.is-on .tw-hero__dot-fill {
	animation: tw-dot 6500ms linear forwards;
}

@keyframes tw-dot {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.tw-hero__dot.is-on .tw-hero__dot-fill { animation: none; transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Promotional strip
   -------------------------------------------------------------------------- */

.tw-promo { padding-block: var(--sp-6); background: var(--white); }

.tw-promo__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-promo__item { margin: 0; }

.tw-promo__link {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	height: 100%;
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--blush-1);
	color: var(--ink);
	transition: transform var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            background var(--dur) var(--ease);
}

.tw-promo__link:hover {
	transform: translateY(-2px);
	background: var(--white);
	border-color: var(--rose-200);
	box-shadow: var(--shadow-md);
	color: var(--ink);
}

.tw-promo__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: var(--r-pill);
	background: var(--white);
	border: 1px solid var(--rose-100);
	color: var(--rose-500);
}
.tw-promo__link:hover .tw-promo__icon { background: var(--rose-50); }

.tw-promo__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.tw-promo__title { font-size: var(--fs-base); font-weight: 600; }
.tw-promo__text { color: var(--ink-3); font-size: var(--fs-xs); }

.tw-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	margin-left: auto;
	color: var(--rose-600);
	font-size: var(--fs-xs);
	font-weight: 600;
	white-space: nowrap;
}
.tw-promo__cta svg { transition: transform var(--dur) var(--ease); }
.tw-promo__link:hover .tw-promo__cta svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Side cart
   -------------------------------------------------------------------------- */

.tw-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }

.tw-drawer__scrim {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	background: rgba(35, 25, 29, .4);
	opacity: 0;
	transition: opacity 320ms var(--ease);
	cursor: pointer;
}
.tw-drawer.is-on .tw-drawer__scrim { opacity: 1; }

.tw-drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	width: min(92vw, 26rem);
	background: var(--white);
	box-shadow: var(--shadow-lg);
	transform: translate3d(100%, 0, 0);
	transition: transform 420ms var(--ease-out);
	will-change: transform;
}
.tw-drawer.is-on .tw-drawer__panel { transform: none; }

.tw-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--line);
}

.tw-drawer__title {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-md);
	font-weight: 700;
}
.tw-drawer__title svg { color: var(--rose-500); }
.tw-drawer__n { color: var(--ink-4); font-weight: 500; }

.tw-drawer__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: opacity var(--dur) var(--ease);
}
.tw-drawer__body.is-busy { opacity: .5; pointer-events: none; }

.tw-drawer__ship { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }

.tw-drawer__ship-msg {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--ink-2);
}
.tw-drawer__ship-msg svg { color: var(--ok); flex: none; }

.tw-drawer__ship-bar {
	height: 4px;
	border-radius: var(--r-pill);
	background: var(--line);
	overflow: hidden;
}
.tw-drawer__ship-bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--rose-400), var(--rose-500));
	transition: width 520ms var(--ease);
}

.tw-drawer__items { margin: 0; padding: 0; list-style: none; flex: 1; }

.tw-dline {
	position: relative;
	display: grid;
	grid-template-columns: 68px 1fr;
	gap: var(--sp-3);
	margin: 0;
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--line);
}

.tw-dline__media img {
	width: 68px;
	height: 68px;
	object-fit: contain;
	border-radius: var(--r-sm);
	background: var(--blush-2);
	padding: 4px;
}

.tw-dline__body { min-width: 0; padding-right: var(--sp-4); }

.tw-dline__name {
	margin: 0 0 .2rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.35;
}
.tw-dline__name a { color: var(--ink); }
.tw-dline__name a:hover { color: var(--rose-600); }

.tw-dline__meta { margin: 0 0 .3rem; color: var(--ink-4); font-size: var(--fs-xs); }

.tw-dline__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-top: var(--sp-2);
}

.tw-dline__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	overflow: hidden;
}

.tw-dline__qty .tw-qty-btn { width: 1.9rem; height: 1.9rem; }
.tw-dline__n { min-width: 1.6rem; text-align: center; font-size: var(--fs-sm); font-weight: 600; }
.tw-dline__price { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }

.tw-dline__remove {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-4);
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--ink-4);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tw-dline__remove:hover { background: var(--err-bg); color: var(--err); }

.tw-drawer__foot {
	padding: var(--sp-5);
	border-top: 1px solid var(--line);
	background: var(--blush-1);
}

.tw-drawer__discreet {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 var(--sp-3);
	color: var(--ink-3);
	font-size: var(--fs-xs);
}
.tw-drawer__discreet svg { color: var(--rose-400); flex: none; }

.tw-drawer__sub {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: .2rem;
	font-size: var(--fs-md);
}
.tw-drawer__sub strong { font-size: var(--fs-lg); color: var(--ink); }

.tw-drawer__note { margin: 0 0 var(--sp-4); color: var(--ink-4); font-size: var(--fs-xs); }
.tw-drawer__foot .tw-btn + .tw-btn { margin-top: var(--sp-2); }

.tw-drawer__empty {
	display: grid;
	justify-items: center;
	gap: var(--sp-4);
	padding: var(--sp-9) var(--sp-5);
	text-align: center;
	color: var(--ink-3);
}

.tw-drawer__empty-icon {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: var(--r-pill);
	background: var(--blush-2);
	color: var(--rose-300);
}

.tw-drawer__empty .tw-btn { max-width: 16rem; }

/* --------------------------------------------------------------------------
   Definition: rings and edges
   The brief asked for more enclosure, so the interactive elements now sit in
   a visible container rather than floating on the white.
   -------------------------------------------------------------------------- */

/* Navigation links get a pill that fills on hover. */
.tw-nav > li > a {
	padding: .45rem .8rem;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	transition: background var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease);
}

.tw-nav > li > a::after { display: none; }

.tw-nav > li > a:hover,
.tw-nav > li.current-menu-item > a {
	background: var(--blush-2);
	border-color: var(--rose-100);
	color: var(--rose-700);
}

/* The whole tool cluster sits in one container. */
.tw-hd__tools {
	padding: .25rem;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--blush-1);
}

.tw-icon-btn:hover { background: var(--white); box-shadow: var(--shadow-sm); }

/* Primary buttons get a soft ring that lifts on hover. */
.tw-btn {
	box-shadow: 0 1px 2px rgba(35, 25, 29, .06),
	            0 0 0 1px rgba(214, 83, 124, .16);
}

.tw-btn:hover {
	box-shadow: var(--shadow-rose),
	            0 0 0 1px rgba(214, 83, 124, .3);
}

.tw-btn--ghost {
	box-shadow: 0 1px 2px rgba(35, 25, 29, .05),
	            0 0 0 1px rgba(35, 25, 29, .06);
}
.tw-btn--ghost:hover {
	box-shadow: var(--shadow),
	            0 0 0 1px var(--rose-200);
}

.tw-btn--quiet { box-shadow: none; }
.tw-btn--quiet:hover { box-shadow: none; }

/* Product cards sit on a defined surface instead of bare white. */
.tw-card__media {
	border: 1px solid var(--line);
	transition: border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease),
	            transform var(--dur) var(--ease);
}

.tw-card:hover .tw-card__media {
	border-color: var(--rose-200);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

/* Section headings carry a rule that ties the block together. */
.tw-head {
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--line);
}

.tw-head--center { border-bottom: 0; padding-bottom: 0; }

.tw-head__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: .3rem .7rem;
	border: 1px solid var(--rose-100);
	border-radius: var(--r-pill);
	background: var(--rose-50);
}

/* Trust items become cards. */
.tw-trust__item {
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--white);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tw-trust__item:hover { border-color: var(--rose-200); box-shadow: var(--shadow-sm); }

/* FAQ rows get a container each. */
.tw-faq { border-top: 0; display: grid; gap: var(--sp-2); }

.tw-faq__item {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--white);
	padding-inline: var(--sp-4);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tw-faq__item[open] { border-color: var(--rose-200); box-shadow: var(--shadow-sm); }

/* Sticky section headings on long catalogue pages. */
.tw-woo .woocommerce-products-header {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-2));
	z-index: 5;
	padding-block: var(--sp-2);
	background: linear-gradient(180deg, var(--white) 72%, transparent);
}

/* ==========================================================================
   MEGA MENU, STICKY STORY, FIGURES, PRODUCT EXTRAS
   skill.md 05, 07, 11.E. Transform and opacity only.
   ========================================================================== */

.tw-nav .tw-has-mega { position: static; }
.tw-hd__nav { position: static; }

.tw-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	padding-block: var(--sp-6);
	background: var(--white);
	border-top: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--dur) var(--ease),
	            transform var(--dur) var(--ease),
	            visibility var(--dur);
}

.tw-has-mega:hover > .tw-mega,
.tw-has-mega:focus-within > .tw-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.tw-mega__in {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--sp-7);
	align-items: start;
}

.tw-mega__cats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-3);
}

.tw-mega__cat {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2);
	border: 1px solid transparent;
	border-radius: var(--r-md);
	color: var(--ink);
	transition: background var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease);
}

.tw-mega__cat:hover {
	background: var(--blush-1);
	border-color: var(--rose-100);
	color: var(--ink);
}

.tw-mega__cat-media {
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--blush-2);
}
.tw-mega__cat-media img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

.tw-mega__cat-name { display: block; font-size: var(--fs-sm); font-weight: 600; }
.tw-mega__cat-n { display: block; color: var(--ink-4); font-size: var(--fs-xs); }

.tw-mega__h {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--ink-4);
}
.tw-mega__links ul + .tw-mega__h { margin-top: var(--sp-5); }

.tw-mega__links ul { margin: 0; padding: 0; list-style: none; }
.tw-mega__links li { margin-bottom: var(--sp-2); }
.tw-mega__links a { color: var(--ink-2); font-size: var(--fs-sm); }
.tw-mega__links a:hover { color: var(--rose-600); }

.tw-mega__feature {
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--blush-1);
	color: var(--ink);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tw-mega__feature:hover { border-color: var(--rose-200); box-shadow: var(--shadow); color: var(--ink); }

.tw-mega__feature-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--blush-2); }
.tw-mega__feature-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-2); }

.tw-mega__feature-body { display: block; padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--white); }

.tw-mega__feature-label {
	display: block;
	margin-bottom: .2rem;
	color: var(--rose-500);
	font-size: var(--fs-xs);
	font-weight: 600;
}
.tw-mega__feature-name { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.tw-mega__feature-price { display: block; margin-top: .25rem; font-weight: 700; }

/* ---- Sticky storytelling ------------------------------------------------ */

.tw-story__in {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--sp-9);
	align-items: start;
}

.tw-story__stick {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-8));
}

.tw-story__stick h2 { margin-bottom: var(--sp-4); }
.tw-story__stick p { color: var(--ink-2); margin-bottom: var(--sp-5); max-width: 42ch; }

.tw-story__steps {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-step {
	position: relative;
	margin: 0;
	padding: var(--sp-6);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	transition: border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease),
	            transform var(--dur) var(--ease);
}

.tw-step:hover {
	border-color: var(--rose-200);
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.tw-step__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--sp-3);
	border-radius: var(--r-md);
	background: var(--blush-2);
	color: var(--rose-500);
}

.tw-step h3 {
	margin-bottom: .35rem;
	font-family: var(--font-body);
	font-size: var(--fs-md);
	font-weight: 600;
}
.tw-step p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.55; }

/* ---- Figures ------------------------------------------------------------ */

.tw-figures { background: var(--blush-1); }

.tw-figures__in {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-5);
}

.tw-figure { text-align: center; }

.tw-figure__n {
	display: block;
	color: var(--rose-600);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.tw-figure__label {
	display: block;
	margin-top: var(--sp-2);
	color: var(--ink-3);
	font-size: var(--fs-sm);
}

/* ---- Product extras ----------------------------------------------------- */

.tw-buynow { width: 100%; margin-top: var(--sp-2); }

.tw-eta {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: var(--sp-4) 0 0;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--rose-100);
	border-radius: var(--r-md);
	background: var(--blush-1);
	color: var(--ink-2);
	font-size: var(--fs-sm);
}
.tw-eta svg { flex: none; color: var(--rose-500); }
.tw-eta strong { color: var(--ink); white-space: nowrap; }

.tw-ppay {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-3);
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}

.tw-ppay__label {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: var(--ok);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.tw-ppay__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-ppay__list li {
	margin: 0;
	padding: .25rem .6rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--white);
	color: var(--ink-3);
	font-size: var(--fs-xs);
}

.tw-pfaq {
	grid-column: 1 / -1;
	max-width: 46rem;
	margin-top: var(--sp-8);
	padding-top: var(--sp-7);
	border-top: 1px solid var(--line);
}

.tw-pfaq__title { margin-bottom: var(--sp-5); font-size: var(--fs-2xl); }