.customs-product-navigator-component {
	--h: auto;
	--accent: #fff;
	--visible: 9.2;
	--gap: 0px;
	--setpos: center;
	--setwidth: 0px;
	background-color: #000;
 scroll-margin-top: 200px;
	@media (max-width:1400px) {
		--visible: 5.5;
		--gap: 0px;
	}
	@media (max-width:900px) {
		--visible: 3.5;
		--gap: 0px;
	}
	@media (max-width:500px) {
		--visible: 2.2;
		--gap: 0px;
	}
	@media (max-width:400px) {
		--visible: 1.8;
		--gap: 0px;
	}
	font-size: 1.125rem;
	max-width: 1920px;
	padding: 1rem 0;
	margin: 0 auto 2rem auto;
	.gmd {
		font-family: "Material Symbols Rounded", sans-serif;
		font-display: swap;
		font-size: 25px;
		line-height: 1;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		font-feature-settings: "liga";
		-webkit-font-smoothing: antialiased;
		font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 18
	}
	.gmd::before {
		content: ""
	}
	.loader, img[src=""]:before {
			display: inline-block;
			content: "";
    width: 48px;
    height: 48px;
    border: 5px solid #555;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
			position: absolute;
    left: calc(50% - 24px);
    }
	.customs-product-navigator>div {
		margin: 0 auto;
		max-width: 1760px;
		text-align: center;
	}
	.customs-product-navigator div[role="navigation"] {
		overflow: hidden;
		overflow-x: visible;
		animation: scrollingnav forwards;
		width: 100%;
		padding: 0;
		scrollbar-gutter: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
		>ul {
			display: flex;
			transition: transform .45s cubic-bezier(.2, .9, .2, 1);
			align-items: stretch;
			will-change: transform;
			justify-content: var(--setpos);
			padding: 0 0 10px 0;
			direction: ltr;
			margin: .5rem 6px;
			gap: var(--gap);
			&:after,
			&:before {
				content: "";
				min-width: var(--setwidth);
				flex-grow: 1;
				flex-basis: 0;
			}
			@media (max-width:1200px) {
				&:after,
				&:before {
					min-width: 50%;
				}
			}
			>li {
				display: flex;
				flex: 0 0 calc((fit-content(200px) - (var(--visible) - 1) * var(--gap)) / var(--visible));
				height: 44px;
				min-height: auto;
				max-width: 250px;
				scroll-snap-align: center;
				align-items: center;
				justify-content: center;
				position: relative;
				padding: 0 1rem;
				margin: 0;
				border: 1px solid #333;
				border-top: 0;
				border-bottom: 0;
				text-align: center;
				text-wrap: balance;
				@media (max-width:1200px) {
					flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
				}
				&:first-child {
					border-left: 0;
				}
				&:last-child {
					border-right: 0;
				}
			}
		}
		a {
			color: #fff;
			text-decoration: none !important;
			min-width: 100%;
			line-height: normal;
			font-size: 16px;
			&:hover {
				text-decoration: underline !important;
			}
		}
		&:hover {
			scrollbar-color: rgba(255, 255, 255, .18) transparent;
			&::-webkit-scrollbar-thumb {
				background-color: rgba(255, 255, 255, .18);
				border-radius: 40px;
			}
			&::-webkit-scrollbar-track {
				background-color: transparent;
			}
		}
		&::-webkit-scrollbar {
			height: 6px;
		}
	}
	li:has(a[aria-current=page]) {
		background: #44D62C;
		a {
			color: #000 !important;
		}
	}
	.designs {
		margin-top: 2rem !important;
		@media (max-width:1200px) {
			display: none;
		}
	}
	.mobile-designs {
		display: none;
		margin: 2rem auto 2rem auto !important;
		@media (max-width:1200px) {
			display: block;
			white-space: nowrap;
		}
	}
	.mobile-designs {
		overflow: hidden;
		overflow-x: visible;
		animation: scrollingnav forwards;
		width: 100%;
		padding: 0;
		scrollbar-gutter: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
		>div[role="tablist"] {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			width: max-content;
			min-width: calc(224px + (1rem * 2));
			max-height: 140px;
			transition: transform .45s cubic-bezier(.2, .9, .2, 1);
			align-items: stretch;
			will-change: transform;
			justify-content: var(--setpos);
			padding: 0;
			direction: ltr;
			margin: .5rem auto;
			gap: 0.9rem;
			&:has(button:only-child) {
				max-height: 60px;
			}
			&:after,
			&:before {
				content: "";
				display: flex;
				width: 0.5px;
				height: 140px;
				background: transparent;
			}
			>button {
				display: flex;
				flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
				min-height: auto;
				max-width: 224px;
				scroll-snap-align: center;
				align-items: center;
				justify-content: center;
				position: relative;
				padding: 0;
				margin: 0;
				border: 2px solid #333;
				border-radius: 5px;
				overflow: hidden;
				transition: all 100ms ease-out;
				&:hover {
					border: 2px solid #fff;
					transition: all 100ms ease-in;
					transform: scale(1.0);
				}
				&[aria-selected="true"] {
					border: 2px solid #44D62C;
					box-shadow: 0px 0px 12px #44AA2C;
				}
				img {
					width: 100%;
					height: auto;
				}
			}
		}
		&:hover {
			scrollbar-color: rgba(255, 255, 255, .18) transparent;
			&::-webkit-scrollbar-thumb {
				background-color: rgba(255, 255, 255, .18);
				border-radius: 40px;
			}
			&::-webkit-scrollbar-track {
				background-color: transparent;
			}
		}
		&::-webkit-scrollbar {
			height: 6px;
		}
	}
	.designs-button {
		z-index: 2;
		position: relative;
		top: 0px;
		scale: 1;
		transition: all .15s;
	}
	&:has(.designs-preview.do-fade) .designs-button {
		scale: 0.5;
		opacity: 0;
	}
	.designs-preview {
		height: 45vw;
		background: no-repeat center center;
		background-size: cover;
		position: relative;
		top: 0px;
		z-index: 1;
		margin-top: 2rem !important;
		transition: opacity .15s;
		&.do-fade{
			opacity: 0;
		}
	}
	@media (max-width:600px) {
		.designs-preview {
			height: 62vw;
			background-size: 166%;
		}
	}
	@media (min-width:1200px) {
		.designs-button {
			z-index: 2;
			position: relative;
			top: 100px;
		}
		.designs-preview {
			height: 560px;
			background: no-repeat center center;
			background-size: 125%;
			position: relative;
			top: 0px;
			z-index: 1;
			margin-top: -12px !important;
		}
	}
	.controls {
		position: relative;
		margin: 12px auto 0 auto;
		padding: 8px 16px 28px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: row;
		width: fit-content;
		&:has(.dots .dot:only-child){
			display: none;
		}
	}
	.nav-group {
		display: flex;
		gap: 8px;
		align-items: center;
	}
	.nav-btn {
		background: #222;
		border: 1px solid #000;
		padding: 10px;
		text-align: center;
		border-radius: 48px;
		width: 45px;
		height: 45px;
		cursor: pointer;
		font: inherit;
		font-size: 25px;
		line-height: 1;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		font-feature-settings: "liga";
		-webkit-font-smoothing: antialiased;
		transition: all .15s ease;
		overflow: hidden;
	}
	.nav-btn:hover {
		border-color: var(--accent);
		color: var(--accent);
	}
	/* Accessible disabled state */
	.nav-btn:disabled {
		opacity: 0.55;
		cursor: not-allowed;
	}
	.left-icon.gmd::before {
		content: "chevron_left";
		color: #fff;
	}
	.right-icon.gmd::before {
		content: "chevron_right";
		color: #fff;
	}
	.dots {
		top: 60px;
		display: flex;
		flex-flow: row wrap;
		gap: 0px;
		row-gap: 0px;
		align-items: center;
		justify-content: center;
		width: 100%;
		overflow: hidden;
		margin: 0px 16px;
	}
	.dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #5C5C5C;
		border: none;
		cursor: pointer;
		margin: 12px;
		&:hover {
			outline: 2px solid #fff;
		}
	}
	.dot[aria-current="true"] {
		background: var(--accent);
		box-shadow: 0 0 0 4px rgba(6, 108, 255, .12);
		border-radius: 0;
		transform: rotate(45deg);
		&:hover {
			outline: none;
		}
	}
	.designs-button button {
		background: #44D62C;
		color: #000;
		border: none;
		border-radius: 4px;
		padding: .5rem 1rem;
		font-family: "RazerF5", Arial, san-serif;
		font-weight: 700;
		font-size: 1rem;
		text-transform: uppercase;
		box-shadow: 0px 0px 3px #888;
		transition: all 300ms linear;
		&:hover {
			background: #73E161;
			transition: all 300ms linear;
		}
	}
	.viewport {
		height: auto;
		overflow: hidden;
		width: 100%;
	}
	.track {
		display: flex;
		gap: 0;
		align-items: center;
		will-change: transform;
		padding: 0 0px;
		direction: ltr;
		&:has(>div:nth-child(2)){
			transition: transform .45s cubic-bezier(.2, .9, .2, 1);
		}
	}
	.slide {
		flex: 0 0 100%;
		height: fit-content;
		max-height: 60vh;
		max-width: 1760px;
		border-radius: 0px;
		display: flex;
		flex-flow: wrap;
		align-items: start;
		justify-content: center;
		color: #fff;
		box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
		overflow: hidden;
		background: transparent;
		position: relative;
		left: calc(100% * (1 - 1) / 2);
		background-position: top;
		background-size: cover;
		background-repeat: no-repeat;
		gap: 0;
		padding: 5px;
		>div[role="tablist"] {
			display: flex;
			flex-flow: wrap;
			align-items: start;
			justify-content: center;
			gap: 0.9rem;
			button {
				width: 224px;
				height: 57px;
				border: 2px solid #333;
				border-radius: 5px;
				overflow: hidden;
				transition: all 100ms ease-out;
				padding: 0;
				background: #000;
				&:hover {
					border: 2px solid #fff;
					transition: all 100ms ease-in;
					transform: scale(1.0);
				}
				&[aria-selected="true"] {
					border: 2px solid #44D62C;
					box-shadow: 0px 0px 12px #44AA2C;
				}
				img {
					width: 100%;
					height: auto;
				}
			}
		}
	}
	.hidden{
		display: none !important;
	}
	}
.translate>span[lang]{display: none;}
	[lang|="en"] .translate [lang="en"],
	[lang="zh-CN"] .translate [lang="zh-CN"],
	[lang="zh-HK"] .translate [lang="zh"],
	[lang="zh-TW"] .translate [lang="zh"],
	[lang="fr-CA"] .translate [lang="fr-CA"],
	[lang|="fr"] .translate [lang="fr"],
	[lang|="de"] .translate [lang="de"],
	[lang|="it"] .translate [lang="it"],
	[lang|="ja"] .translate [lang="ja"],
	[lang|="ko"] .translate [lang="ko"],
	[lang|="es"] .translate [lang="es"],
	[lang|="pt"] .translate [lang="pt"],
	[lang|="ar"] .translate [lang="ar"],
	[lang|="my"] .translate [lang="my"],
	[lang|="th"] .translate [lang="th"],
	[lang|="tr"] .translate [lang="tr"],
	[lang|="vi"] .translate [lang="vi"],
	[lang|="id"] .translate [lang="id"]
	{display: inline;}
@keyframes scrollingnav {
	0%,
	to {
		--setpos: start;
		--setwidth: var(--gap);
	}
}
.popout-configurator {
	--bg: #111;
	--panel: #111;
	--stroke: #555;
	--modalstroke: #333;
	--text: #fff;
	--muted: #bbb;
	--green: #44d62c;
	--hovergreen: #73E161;
	/* Razer-ish green */
	--shadow: 0 24px 80px rgba(0, 0, 0, .70);
	--radius: 8px;
	--glow: 0 0 0 1px rgba(68, 214, 44, .72), 0 0 18px rgba(68, 214, 44, .18);
	--font: Roboto, sans-serif;
	color: #fff;
	* {
		box-sizing: border-box;
	}
	/* Overlay */
	.overlay {
		position: fixed;
		inset: 0;
		display: none;
		align-items: center;
		justify-content: center;
		padding: 16px;
		background: rgba(0, 0, 0, .62);
		backdrop-filter: blur(2px);
		z-index: 1001;
	}
	.overlay.show {
		display: flex;
		animation: appear .5s;
	}
	.overlay-close {
		position: absolute;
		top: -26px;
		right: calc(50% - min(1200px, 100%) / 2 - 34px);
		width: 34px;
		height: 34px;
		border-radius: 999px;
		background: #000;
		border: 1px solid #fff;
		color: #fff;
		cursor: pointer;
		display: grid;
		place-items: center;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
		transition: .15s ease;
		z-index: 1000;
		line-height: 0;
		font-size: 20px;
	}
	.overlay-close:hover {
		border-color: #44d62c;
		color: #44d62c;
	}
	/* Modal */
	.modal {
		width: min(1200px, 100%);
		height: min(800px, 92vh);
		max-height: 92dvh;
		border-radius: var(--radius);
		background: var(--bg);
		border: 1px solid var(--modalstroke);
		box-shadow: var(--shadow);
		overflow: visible;
		display: grid;
		grid-template-columns: 1.35fr 1fr;
		position: relative;
		font-family: Roboto, Arial, sans-serif;
	}
	/* IMPORTANT for grid scroll children */
	.preview,
	.panel {
		min-height: 0;
	}
	/* Left preview */
	.preview {
		padding: 28px 26px;
		border-right: 1px solid transparent;
		background: var(--bg);
		display: flex;
		flex-direction: column;
		gap: 14px;
		border-radius: inherit;
	}
	.hero {
		flex: 1;
		display: grid;
		place-items: center;
		position: relative;
		border-radius: 12px;
		background: var(--bg);
		overflow: hidden;
		padding: 6px;
		img {
			width: 100%;
			height: auto;
			max-width: 500px;
		}
	}
	/* Text below preview image (3 lines, centered) */
	.preview-footer {
		text-align: center;
		color: var(--text);
		font-size: 14px;
		line-height: 1.5;
		padding: 8px 10px 2px;
	}
 .preview-footer ul li{
		margin: 10px 0;
		list-style: none;
	}
 .preview-footer ul {
		margin: 0;
		padding: 0;
	}
	/* Right panel */
	.panel {
		padding: 22px 18px 0 18px;
		display: flex;
		flex-direction: column;
		gap: 14px;
		background: var(--bg);
		overflow: auto;
		border-radius: inherit;
		/* panel scrolls, bottom bar stays visible */
		scrollbar-gutter: stable both-edges;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
		&:hover {
			scrollbar-color: rgba(255, 255, 255, .18) transparent;
			&::-webkit-scrollbar-thumb {
				background-color: rgba(255, 255, 255, .18);
				border-radius: 40px;
			}
			&::-webkit-scrollbar-track {
				background-color: transparent;
			}
		}
		&::-webkit-scrollbar {
			height: 6px;
		}
	}
	.section-title {
		font-size: 16px;
		color: #fff;
		font-weight: 400;
		margin: 10px 0 8px 0;
	}
	.product-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}
	.icon-btn {
		padding: 5px;
		border-radius: 8px;
		background: var(--bg);
		border: 1.5px solid var(--stroke);
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		transition: .15s ease;
		color: var(--text);
		min-height: 85px;
		width: 100%;
		img {
			min-height: 35px;
		}
	}
	.icon-btn:hover {
		border-color: #fff;
	}
	.icon-btn.selected {
		border-color: rgba(68, 214, 44, .95);
		box-shadow: var(--glow);
	}
	.icon {
		width: 16px;
		height: 16px;
		display: block;
		opacity: .95;
		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
	}
	.icon-label {
		font-size: 14px;
		color: #cfd3d6;
		opacity: 1;
		font-family: Roboto !important;
	}
	.heading {
		margin-top: 2px;
		padding: 6px 0 0;
		&.desktop-only{
				margin-top: 20px;
		}
	}
	.heading h2 {
		margin: 0;
		font-size: 21px;
		font-weight: 400;
		letter-spacing: .2px;
	}
	.mobile-only.heading h2{
		padding-right: 30px;
	}
	.heading p {
		margin: 3px 0 0;
		font-size: 14px;
		color: var(--muted);
		line-height: 1.35;
	}
	.heading a {
		color: #fff;
		text-decoration: none;
		white-space: nowrap;
		display: block;
   margin-top: 4px;
		width: fit-content;
	}
	.heading a:hover {
		text-decoration: none;
		text-underline-offset: 3px;
	}
	.heading a:hover > span:not([aria-hidden]){
		 text-decoration: underline;
	}
	.heading a .chev {
		color: var(--green);
	}
	.modalDesc > span{
		 min-height: 1.5rem;
    display: block;
	}
	/* Choice rows */
	.choice-group {
		margin-top: 2px;
		display: flex;
		flex-direction: column;
	}
	.panel>div:nth-last-child(2) {
		flex-grow: 1;
	}
	.choice {
		border-radius: 8px;
		border: 1.5px solid var(--stroke);
		background: var(--bg);
		color: #fff;
		padding: 10px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		cursor: pointer;
		transition: .15s ease;
		font-size: 14px;
		min-height: 44px;
		margin-bottom: 16px;
	}
	.choice:hover {
		border-color: #fff;
	}
	.choice.selected {
		border-color: rgba(68, 214, 44, .95);
		box-shadow: var(--glow);
	}
	.choice small {
		color: var(--muted);
		font-size: 14px;
	}
	.tabs-row {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 2px 0 -5px;
	}
	.arrow {
		width: 26px;
		height: 26px;
		border-radius: 7px;
		background: var(--bg);
		border: none;
		cursor: pointer;
		color: #cfd3d6;
		display: none;
		place-items: center;
		transition: .15s ease;
		user-select: none;
		font-size: 30px;
		line-height: 0;
		position: relative;
		top: -4px;
	}
	.arrow:hover {
		color: var(--green);
	}
	.tabs-row:has(.tabs .tab:nth-child(3)) .arrow{
		display: grid;
	}
	.tabs {
		flex: 1;
		display: flex;
		gap: 6px;
		padding: 2px;
		border-radius: 0px;
		border: none;
		background: transparent;
		overflow: hidden;
		scrollbar-gutter: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
		&:hover {
			scrollbar-color: rgba(255, 255, 255, .18) transparent;
			&::-webkit-scrollbar-thumb {
				background-color: rgba(255, 255, 255, .18);
				border-radius: 40px;
			}
			&::-webkit-scrollbar-track {
				background-color: transparent;
			}
		}
		&::-webkit-scrollbar {
			height: 6px;
		}
	}
	.tab {
		flex: 1;
		text-align: center;
		padding: 6px 6px;
		font-size: 14px;
		border: 1px solid transparent;
		background: transparent;
		border-radius: 8px 8px 0 0;
		cursor: pointer;
		color: #cfd3d6;
		transition: .15s ease;
		white-space: nowrap;
		scroll-snap-align: center;
		min-height: 2.2rem;
		&:hover {
			background: transparent;
			border: 1px solid black;
			border-color: var(--green);
			border-bottom: 1px solid black;
			color: inherit;
		}
	}
	.tab.active {
		background: var(--green);
		border: 1px solid black;
		border-color: var(--green);
		border-bottom: 1px solid var(--green);
		color: #000;
		box-shadow: 0 0 0 1px rgba(68, 214, 44, .18) inset;
	}
	.list {
		display: flex;
		flex-direction: column;
		gap: 0px;
		margin-top: 4px;
		overflow: auto;
		&:focus-visible{
			outline: auto 1px Highlight;
    outline: auto 1px -webkit-focus-ring-color;
		}
	}
	/* nice scrollbar */
	.list::-webkit-scrollbar {
		width: 8px;
	}
	.list::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, .10);
		border-radius: 999px;
		border: 2px solid transparent;
		background-clip: content-box;
	}
	.list::-webkit-scrollbar-thumb:hover {
		background: rgba(255, 255, 255, .16);
		background-clip: content-box;
	}
	/* Bottom action bar (Total + Next Step) */
	.actionbar {
		position: sticky;
		bottom: 0;
		margin-top: 14px;
		padding: 14px 0 16px;
		background: linear-gradient(180deg, rgba(17, 17, 17, 0), rgba(17, 17, 17, .92) 30%, rgba(17, 17, 17, .98));
		backdrop-filter: blur(2px);
	}
	.actionbar-inner {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
	}
	.total {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding-left: 2px;
	}
	.total .label {
		font-size: 14px;
		color: var(--muted);
	}
	.total .value {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: .2px;
	}
	.next-wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 6px;
	}
	.next-btn {
		font-family: RazerF5, Arial, sans-serif;
		border: 1px solid var(--green);
		background: var(--green);
		color: #000;
		font-weight: 800;
		font-size: 16px;
		letter-spacing: .35px;
		padding: 8px 12px;
		border-radius: 4px;
		/* screenshot-ish (more square) */
		cursor: pointer;
		transition: .15s ease;
		text-transform: uppercase;
		min-width: 104px;
		display: inline-flex;
		justify-content: center;
		box-shadow: 0 10px 22px rgba(68, 214, 44, .18);
	}
	.next-btn:hover {
		background-color: var(--hovergreen);
	}
	.ship {
		font-size: 14px;
		color: var(--muted);
	}
	.mobile-only {
		display: none;
	}
	/* Responsive */
	@media (max-width: 980px) {
		.modal {
			width: min(920px, 100%);
			height: min(720px, 92vh);
			max-height: 92dvh;
		}
	}
	/* Mobile: stack preview + panel, keep actionbar usable */
		@media (max-width: 1290px) {
		.overlay-close {
			top: 24px;
			right: 24px;
			position: fixed;
		}
	}
	@media (max-width: 860px) {
		.desktop-only {
			display: none;
		}
		.mobile-only {
			display: block;
		}
		.overlay {
			padding: 10px;
		}
		.modal {
			overflow-y: auto;
			/* allow vertical scrolling */
			-webkit-overflow-scrolling: touch;
			/* smooth iOS scrolling */
			overscroll-behavior: contain;
			/* prevent scroll chaining to background */
			grid-template-columns: 1fr;
			grid-template-rows: auto 1fr;
			height: min(860px, 96vh);
			max-height: 96dvh;
			border-radius: 14px;
			scrollbar-gutter: auto;
			scroll-snap-type: x mandatory;
			scrollbar-width: thin;
			scrollbar-color: transparent transparent;
			&:hover {
				scrollbar-color: rgba(255, 255, 255, .18) transparent;
				&::-webkit-scrollbar-thumb {
					background-color: rgba(255, 255, 255, .18);
					border-radius: 40px;
				}
				&::-webkit-scrollbar-track {
					background-color: transparent;
				}
			}
			&::-webkit-scrollbar {
				height: 6px;
			}
		}
		.preview {
			border-right: none;
			border-bottom: 1px solid var(--stroke);
			padding: 16px 14px;
		}
		.hero {
			min-height: 220px;
			aspect-ratio: 1;
		}
		.mat {
			width: min(520px, 96%);
		}
		.panel {
			padding: 16px 14px 0 14px;
			overflow: visible;
			/* was scrolling before; disable it on mobile */
			max-width: calc(100vw - 25px);
		}
		.product-grid {
			grid-template-columns: repeat(4, 1fr);
			gap: 8px;
		}
		.actionbar {
			padding-bottom: 18px;
			width: calc(100% + 3px);
			margin-left: -1px;
		}
		.list {
			overflow: visible;
			/* avoid 2nd inner scrollbar on mobile */
			max-height: none;
		}
	}
	@media (max-width: 470px) {
		.product-grid {
			grid-template-columns: repeat(2, 1fr);
		}
		.next-btn {
			min-width: 112px;
		}
	}
	@media (prefers-reduced-motion: reduce) {
		* {
			transition: none !important;
		}
	}
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes appear{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}