/* 11.6.0-solomax.61: right-to-left copy of motion.css, generated with rtlcss. Do not edit by hand; edit motion.css and regenerate. */
/*
 * Solomaxhub motion layer (theme 11.6.0-solomax.53). Storefront and customer panel.
 * Soft, eased feedback: pages settle in as they open (the header, sidebar and tab bar stay put), buttons press in,
 * cards lift, accordions and order cards unfold, and a slim bar shows while the next page loads.
 * Everything here is switched off for visitors whose device asks for reduced motion.
 */
:root {
	--sx-ease: cubic-bezier(.2, .8, .2, 1);
	--sx-ease-out: cubic-bezier(.16, 1, .3, 1);
	--sx-ease-in: cubic-bezier(.4, 0, 1, 1);
}

@media (prefers-reduced-motion: no-preference) {
	/* No cross-page fade (owner report, 25 Sep): Chrome's page transition drew the frosted desktop header as a blurred
	 * band for a moment when arriving at the homepage. Pages now load directly and then settle in (below). */

	/* Buttons: a soft press and an eased hover. */
	.bm-btn, .nt-btn, .ux-btn, .acp-sf-buybar__btn, .nt-header-shop-cta, .nt-header-login-cta, .ux-eye, .sx-support__item, .ux-reveal__btn {
		transition: transform .18s var(--sx-ease), box-shadow .24s var(--sx-ease), background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
	}
	.bm-btn:active, .nt-btn:active, .ux-btn:active, .acp-sf-buybar__btn:active, .nt-header-shop-cta:active, .nt-header-login-cta:active, .ux-eye:active, .sx-support__item:active {
		transform: translateY(1px) scale(.97);
	}
	@media (hover: hover) {
		.bm-btn--primary:hover, .nt-btn--primary:hover, .ux-btn--primary:hover, .acp-sf-buybar__btn:hover { box-shadow: 0 10px 24px rgba(253, 119, 2, .26); transform: translateY(-1px); }
		/* Product and category cards lift gently. */
		.nt-product-card-v6, .ux-service, .ux-statcard { transition: transform .3s var(--sx-ease), box-shadow .3s var(--sx-ease), border-color .2s ease; }
		.nt-product-card-v6:hover, html body .nt-product-card-v6[data-nt-reveal]:hover, .ux-service:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 38px rgba(28, 20, 16, .12); }
		.ux-statcard:hover { transform: translateY(-2px); }
	}
	a { transition: color .15s ease, text-decoration-color .15s ease; }

	/* Disclosure content unfolds instead of snapping open (FAQ, order cards, filters). */
	details[open] > :not(summary) { animation: sx-unfold .34s var(--sx-ease-out) both; }
	.ux-order[open] > .ux-order__body { animation: sx-unfold .34s var(--sx-ease-out) both; }

	/* Revealed delivery details and toasts arrive softly. */
	.ux-reveal.is-revealed .ux-reveal__content { animation: sx-unfold .36s var(--sx-ease-out) both; }
}

@keyframes sx-unfold { from { opacity: 0; transform: translateY(-4px); } }

/* Slim progress bar while the next page is on its way (see motion.js). */
.sx-pageprogress { position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 100002; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .2s ease; }
.sx-pageprogress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 3px 0 0 3px; background: linear-gradient(-90deg, #FD7702, #FF9A4D); animation: sx-progress 1.1s var(--sx-ease) infinite; }
.sx-pageprogress.is-active { opacity: 1; }
@keyframes sx-progress { 0% { transform: translateX(100%); } 100% { transform: translateX(-260%); } }
@media (prefers-reduced-motion: reduce) { .sx-pageprogress::before { animation: none; width: 100%; } }
@media print { .sx-pageprogress { display: none; } }

/*
 * Page settle (theme 11.6.0-solomax.53, owner request 25 Sep 2026): when a page opens, its parts arrive in a short,
 * eased sequence instead of all landing at once. The first view is CSS only (it never waits for a script and is over
 * in under a second); blocks further down rise in as they scroll into view (motion.js marks only content that starts
 * off-screen, so nothing visible is ever hidden); pictures fade in when they finish loading. The header, menu, tab bar
 * and support button stay put. All of it is off when the device asks for reduced motion.
 * Animations use fill-mode "backwards" so hover lifts and other transforms work normally once a part has settled.
 */
@media (prefers-reduced-motion: no-preference) {
	/* Storefront hero and page headings: eyebrow, title, text, then actions; the hero picture settles last. */
	:is(.bm-hero__copy, .bm-hero--page > .nt-container) > * { animation: sx-settle .6s var(--sx-ease-out) backwards; }
	:is(.bm-hero__copy, .bm-hero--page > .nt-container) > :nth-child(2) { animation-delay: 70ms; }
	:is(.bm-hero__copy, .bm-hero--page > .nt-container) > :nth-child(3) { animation-delay: 140ms; }
	:is(.bm-hero__copy, .bm-hero--page > .nt-container) > :nth-child(4) { animation-delay: 200ms; }
	:is(.bm-hero__copy, .bm-hero--page > .nt-container) > :nth-child(n+5) { animation-delay: 250ms; }
	.bm-hero__media { animation: sx-settle-scale .8s var(--sx-ease-out) 160ms backwards; }

	/* Product page: breadcrumb, picture, then the buying details one after another. */
	.nt-product-breadcrumb { animation: sx-settle-fade .45s ease-out backwards; }
	.nt-product-gallery-v6 { animation: sx-settle-scale .75s var(--sx-ease-out) 60ms backwards; }
	.nt-product-summary-v6 > * { animation: sx-settle .6s var(--sx-ease-out) 120ms backwards; }
	.nt-product-summary-v6 > :nth-child(2) { animation-delay: 170ms; }
	.nt-product-summary-v6 > :nth-child(3) { animation-delay: 220ms; }
	.nt-product-summary-v6 > :nth-child(4) { animation-delay: 270ms; }
	.nt-product-summary-v6 > :nth-child(n+5) { animation-delay: 320ms; }

	/* The first cards of the grid right under a heading arrive one after another. */
	:is(.bm-hero + .bm-section) :is(.products-grid, ul.products, .bm-cat-grid) > :nth-child(-n+8) { animation: sx-settle .6s var(--sx-ease-out) 220ms backwards; }
	:is(.bm-hero + .bm-section) :is(.products-grid, ul.products, .bm-cat-grid) > :nth-child(2) { animation-delay: 265ms; }
	:is(.bm-hero + .bm-section) :is(.products-grid, ul.products, .bm-cat-grid) > :nth-child(3) { animation-delay: 310ms; }
	:is(.bm-hero + .bm-section) :is(.products-grid, ul.products, .bm-cat-grid) > :nth-child(4) { animation-delay: 355ms; }
	:is(.bm-hero + .bm-section) :is(.products-grid, ul.products, .bm-cat-grid) > :nth-child(5) { animation-delay: 400ms; }
	:is(.bm-hero + .bm-section) :is(.products-grid, ul.products, .bm-cat-grid) > :nth-child(6) { animation-delay: 445ms; }
	:is(.bm-hero + .bm-section) :is(.products-grid, ul.products, .bm-cat-grid) > :nth-child(7) { animation-delay: 490ms; }
	:is(.bm-hero + .bm-section) :is(.products-grid, ul.products, .bm-cat-grid) > :nth-child(8) { animation-delay: 535ms; }

	/* Customer panel: the page heading, then its cards and rows. */
	.ux-main > * { animation: sx-settle .55s var(--sx-ease-out) backwards; }
	.ux-main > :nth-child(2) { animation-delay: 60ms; }
	.ux-main > :nth-child(3) { animation-delay: 120ms; }
	.ux-main > :nth-child(4) { animation-delay: 170ms; }
	.ux-main > :nth-child(5) { animation-delay: 210ms; }
	.ux-main > :nth-child(n+6) { animation-delay: 240ms; }
	:is(.ux-dash-quick, .ux-dash-stats) > * { animation: sx-settle .5s var(--sx-ease-out) 160ms backwards; }
	:is(.ux-dash-quick, .ux-dash-stats) > :nth-child(2) { animation-delay: 190ms; }
	:is(.ux-dash-quick, .ux-dash-stats) > :nth-child(3) { animation-delay: 220ms; }
	:is(.ux-dash-quick, .ux-dash-stats) > :nth-child(4) { animation-delay: 250ms; }
	:is(.ux-dash-quick, .ux-dash-stats) > :nth-child(n+5) { animation-delay: 280ms; }

	/* Blocks that start below the fold (motion.js): they rise in when they scroll into view. */
	.sx-later { opacity: 0; transform: translateY(18px); }
	.sx-later.sx-in { opacity: 1; transform: none; transition: opacity .6s var(--sx-ease-out), transform .7s var(--sx-ease-out); transition-delay: var(--sx-delay, 0ms); }

	/* Pictures that are still downloading fade in instead of popping in (motion.js). */
	img.sx-img-wait { opacity: 0; }
	img.sx-img-in { transition: opacity .45s ease-out; }
}
@keyframes sx-settle { from { opacity: 0; transform: translateY(14px); } }
@keyframes sx-settle-scale { from { opacity: 0; transform: translateY(10px) scale(.975); } }
@keyframes sx-settle-fade { from { opacity: 0; } }
@media print { .sx-later, img.sx-img-wait { opacity: 1 !important; transform: none !important; } }