/* === FTP-SYNC-TEST-MARKER-V100 === */

*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	--bg: #F7F5F0;
	--surface: rgba(255, 255, 255, 0.55);
	--surface-strong: rgba(255, 255, 255, 0.80);
	--border: rgba(255, 255, 255, 0.70);
	--border-subtle: rgba(0, 0, 0, 0.06);
	--text: #141210;
	--text-muted: #6B6760;
	--text-light: #A09D98;
	--accent: #5B45FF;
	--accent-soft: rgba(91, 69, 255, 0.10);
	--accent-glow: rgba(91, 69, 255, 0.22);
	--teal: #00C9A7;
	--teal-soft: rgba(0, 201, 167, 0.10);
	--amber: #F59E0B;
	--blob1: rgba(91, 69, 255, 0.13);
	--blob2: rgba(0, 201, 167, 0.10);
	--blob3: rgba(255, 180, 60, 0.09);
	--radius: 20px;
	--radius-sm: 12px;
	--radius-pill: 999px;
	--shadow-card: 0 4px 30px rgba(0, 0, 0, 0.06);
	--shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.11);
	--transition: 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden; /* Impede falso zoom no Chrome Android causado por overflows em filhos */
	max-width: 100vw;
}

body {
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	overflow-x: hidden;
	background: var(--bg);
	color: var(--text);
}

#cursor-glow {
	position: fixed;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(91, 69, 255, .07) 0%, transparent 70%);
	pointer-events: none !important;
	transform: translate(-50%, -50%);
	transition: opacity .4s;
	z-index: -1 !important;
	mix-blend-mode: multiply;
}

#navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5%;
	height: 68px;
	background: rgba(247, 245, 240, .65);
	backdrop-filter: blur(18px) saturate(180%);
	border-bottom: 1px solid var(--border-subtle);
}

.nav-logo {
	font-family: "Syne", sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -.03em;
	color: var(--text);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.nav-logo-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	display: inline-block;
	flex-shrink: 0;
}

.nav-links {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-links a {
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
	color: var(--text-muted);
	transition: color .2s;
}

.nav-links a:hover {
	color: var(--text);
}

/* ── Nav pills ── */
.nav-links a {
	padding: 5px 14px;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: background 0.25s, border-color 0.25s, color 0.2s;
}

.nav-links a:hover {
	background: rgba(91, 69, 255, .07);
	border-color: rgba(91, 69, 255, .18);
}

.nav-cta {
	display: flex !important;
	align-items: center;
	gap: 8px;
	position: relative;
	z-index: 1010;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: var(--radius-pill);
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .2);
	backdrop-filter: blur(10px);
	color: var(--text);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	transition: transform var(--transition), box-shadow var(--transition), background .15s;
}

.btn:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 10px 36px rgba(0, 0, 0, .12);
	opacity: 1;
}

.btn:active {
	transform: translateY(0) scale(.97);
	transition: transform .08s ease;
}

/* ── Botão primário: lavanda claro translúcido ── */
.btn-primary {
	background: rgba(91, 69, 255, 0.08);
	border-color: rgba(91, 69, 255, 0.30) !important;
	color: #5b45ff !important;
	font-weight: 600;
	backdrop-filter: blur(12px);
}

.btn-primary:hover {
	box-shadow: 0 8px 28px rgba(91, 69, 255, 0.20) !important;
	color: #5b45ff !important;
}

.btn-large {
	padding: 16px 40px;
	font-size: 16px;
}

.btn-outline {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(0, 0, 0, .12);
}

/* ── Hero duas colunas ── */
.hero {
	position: relative;
	min-height: 80vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 24px;
	padding: 100px 4% 80px;
	overflow: hidden;
	text-align: left;
}

.hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(72px);
	transition: transform .12s linear;
	pointer-events: none !important;
	z-index: 0 !important;
}

.blob-1 {
	width: 480px;
	height: 480px;
	background: var(--blob1);
	top: -80px;
	left: -120px;
}

.blob-2 {
	width: 420px;
	height: 420px;
	background: var(--blob2);
	bottom: 40px;
	right: -100px;
}

.blob-3 {
	width: 340px;
	height: 340px;
	background: var(--blob3);
	top: 80px;
	right: 20%;
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 560px;
	width: 100%;
	justify-self: end;
}

.hero-image {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 900px;
	animation: heroImgFloat 5s ease-in-out infinite;
	will-change: transform;
}

.hero-image img {
	width: 100%;
	max-width: 480px;
	height: 600px;
	object-fit: cover;
	object-position: center top;
	border-radius: 28px;
	box-shadow:
		0 4px 24px rgba(91,69,255,0.18),
		0 16px 48px rgba(91,69,255,0.10),
		0 32px 80px rgba(0,0,0,0.22),
		0 64px 120px rgba(0,0,0,0.12);
	transition: transform 0.12s ease-out, box-shadow 0.4s ease;
	transform-style: preserve-3d;
}

.hero-image img:hover {
	box-shadow:
		0 4px 32px rgba(91,69,255,0.28),
		0 16px 56px rgba(91,69,255,0.16),
		0 32px 90px rgba(0,0,0,0.26),
		0 64px 120px rgba(0,0,0,0.14);
}

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

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--surface);
	border: 1px solid var(--border);
	backdrop-filter: blur(10px);
	border-radius: var(--radius-pill);
	padding: 6px 16px 6px 8px;
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 2rem;
}

.hero-badge-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.hero h1, .hero-content h1 {
	font-family: "Syne", sans-serif !important;
	font-weight: 800 !important;
	font-size: clamp(38px, 6vw, 64px) !important;
	line-height: 1.08 !important;
	letter-spacing: -.03em !important;
	color: var(--text) !important;
	margin-bottom: 1.25rem !important;
}

.hero h1 .highlight {
	position: relative;
	display: inline-block;
	color: var(--accent);
}

.hero h1 .highlight::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--teal));
	border-radius: 2px;
	opacity: .6;
}

.hero-sub {
	font-size: 18px;
	font-weight: 300;
	color: var(--text-muted);
	max-width: 520px;
	margin: 0 auto 2.5rem;
	line-height: 1.65;
}

.hero-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.hero-scroll {
	display: none;
}

.hero-scroll span {
	font-size: 12px;
	color: var(--text-muted);
	letter-spacing: .08em;
}

.scroll-arrow {
	width: 1px;
	height: 32px;
	background: linear-gradient(to bottom, transparent, var(--text-muted));
}

@keyframes heroFloat {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(6px); }
}

.hero ~ section, #features, #testimonials, #cta, .cta-section {
	padding: 100px 5%;
}

.section-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: .75rem;
}

.section-title {
	font-family: "Syne", sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.5vw, 42px);
	letter-spacing: -.025em;
	line-height: 1.15;
	color: var(--text);
	margin-bottom: 1rem;
}

.section-sub {
	font-size: 17px;
	font-weight: 300;
	color: var(--text-muted);
	max-width: 500px;
	line-height: 1.65;
}

.section-header {
	margin-bottom: 4rem;
	text-align: center;
}

.section-sub {
	margin-left: auto;
	margin-right: auto;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.glass-card {
	background: var(--surface);
	border: 1px solid var(--border);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition), transform var(--transition);
	transform-style: preserve-3d;
	cursor: default;
}

.glass-card:hover {
	box-shadow: var(--shadow-card-hover);
}

.feature-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.icon-purple { background: var(--accent-soft); }
.icon-teal   { background: var(--teal-soft); }
.icon-amber  { background: rgba(245, 158, 11, .1); }

.feature-title {
	font-family: "Syne", sans-serif;
	font-weight: 600;
	font-size: 18px;
	color: var(--text);
	margin-bottom: .6rem;
	letter-spacing: -.01em;
}

.feature-text {
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.7;
	font-weight: 300;
}

.testimonials {
	background: transparent;
}

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.testimonial-card {
	background: var(--surface-strong);
	border: 1px solid var(--border);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition), transform var(--transition);
	transform-style: preserve-3d;
	cursor: default;
}

.testimonial-card:hover {
	box-shadow: var(--shadow-card-hover);
}

.stars {
	display: flex;
	gap: 3px;
	margin-bottom: 1rem;
}

.star {
	width: 14px;
	height: 14px;
	background: var(--amber);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.testimonial-text {
	font-size: 15px;
	color: var(--text-muted);
	font-style: italic;
	font-weight: 300;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.author-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Syne", sans-serif;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
}

.av-purple { background: var(--accent-soft); color: var(--accent); }
.av-teal   { background: var(--teal-soft);   color: #00a88c; }
.av-amber  { background: rgba(245, 158, 11, .12); color: #b07800; }

.author-name {
	font-family: "Syne", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--text);
}

.author-role {
	font-size: 12px;
	color: var(--text-light);
	font-weight: 300;
}

.cta-section {
	padding: 80px 5%;
}

.cta-inner {
	background: var(--surface);
	border: 1px solid var(--border);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 28px;
	padding: 72px 5%;
	text-align: center;
	box-shadow: var(--shadow-card);
	position: relative;
	overflow: hidden;
}

.cta-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
}

.cta-blob-1 {
	width: 300px;
	height: 300px;
	background: var(--blob1);
	top: -80px;
	left: -60px;
}

.cta-blob-2 {
	width: 260px;
	height: 260px;
	background: var(--blob2);
	bottom: -60px;
	right: -40px;
}

.cta-inner .section-title {
	max-width: 560px;
	margin: 0 auto 1rem;
}

.cta-inner .section-sub {
	margin: 0 auto 2.5rem;
}

.cta-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
	margin: 0 5%;
	border: none;
}

footer,
html body footer,
.js-footer,
.foot-main,
section.foot,
div.foot,
[class*="footer"],
[id*="footer"] {
	background: #F7F5F0 !important;
	color: #141210 !important;
}

footer {
	padding: 48px 5% 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	background: #F7F5F0 !important;
	/* linha separadora com gradiente — some nas bordas */
	border-top: none !important;
	position: relative;
}

footer::before {
	content: '';
	position: absolute;
	top: 0; left: 5%; right: 5%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(91,69,255,0.25) 30%, rgba(0,0,0,0.10) 70%, transparent);
}

/* Bloco esquerdo: logo + tagline */
.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.footer-logo {
	font-family: "Syne", sans-serif;
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -.03em;
	color: var(--text) !important;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 7px;
}

.footer-tagline {
	font-size: 12px;
	color: var(--text-light);
	font-weight: 400;
	letter-spacing: 0.02em;
}

/* Links: ul.list dentro de .footer-links */
.footer-links {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.footer-links ul.list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links .footer-menu-item {
	margin: 0;
	padding: 0;
}

.footer-links .footer-menu-link {
	font-size: 13px;
	color: var(--text-light) !important;
	text-decoration: none;
	font-weight: 400;
	transition: color .2s;
	white-space: nowrap;
}

.footer-links .footer-menu-link:hover {
	color: var(--accent) !important;
}

/* Copyright */
.footer-copy {
	font-size: 12px;
	color: var(--text-light);
	font-weight: 300;
	text-align: right;
	line-height: 1.6;
}

.footer-copy a {
	color: var(--text-light) !important;
	text-decoration: none;
	transition: color .2s;
}

.footer-copy a:hover {
	color: var(--accent) !important;
}

/* ── CORREÇÃO: Reveal com fallback automático ── */
@keyframes autoReveal {
	from { opacity: 0; transform: translateY(32px); }
	to   { opacity: 1; transform: none; }
}

.reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity .65s cubic-bezier(.23, 1, .32, 1), transform .65s cubic-bezier(.23, 1, .32, 1);
	animation: autoReveal 0.65s cubic-bezier(.23, 1, .32, 1) 0.8s both;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
	animation: none;
}

.mobile-menu {
	display: none;
	position: fixed;
	top: 68px;
	left: 0;
	right: 0;
	background: rgba(247, 245, 240, .96);
	backdrop-filter: blur(20px);
	padding: 1.5rem 5%;
	z-index: 99;
	flex-direction: column;
	gap: 1rem;
}

.mobile-menu.open {
	display: flex;
}

.mobile-menu a {
	font-size: 16px;
	color: var(--text-muted);
	text-decoration: none;
	padding: 8px 0;
	font-weight: 300;
}

.hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 4px;
}

.hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--text);
	border-radius: 2px;
}

@media (max-width: 768px) {
	.nav-links, .nav-cta {
		display: none;
	}

	.hamburger {
		display: flex;
	}

	.hero {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		text-align: center;
		padding: 24px 5% 40px;
		min-height: auto;
		gap: 24px;
	}

	.hero-image {
		order: -1; /* imagem aparece antes do texto */
	}

	.hero-image img {
		height: 300px;
		width: 100%;
		max-width: 100%;
		object-position: center 15%;
	}

	.hero-content {
		max-width: 100%;
	}

	.hero-badge {
		font-size: 11px;
	}

	.hero h1, .hero-content h1 {
		font-size: clamp(32px, 8vw, 42px) !important;
		margin-bottom: 0.75rem !important;
	}

	.hero-sub {
		font-size: 15px;
		margin-bottom: 1.25rem;
	}

	.hero-buttons {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.hero-buttons .btn {
		width: 100%;
		max-width: 280px;
		padding: 14px 24px;
	}

	.hero-buttons .btn {
		width: 100%;
		max-width: 320px;
		justify-content: center;
	}

	.features-grid, .testimonials-grid {
		grid-template-columns: 1fr;
	}

	.cta-buttons .btn {
		width: 100%;
		max-width: 320px;
	}

	.cta-buttons {
		flex-direction: column;
		align-items: center;
	}

	footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-links ul.list {
		gap: 0.25rem 1.25rem;
	}

	.footer-copy {
		text-align: left;
	}

}

/* ── CATEGORIES COVERFLOW CAROUSEL ── */

#categorias {
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
}

#categorias .section-header {
	padding-left: 5%;
	padding-right: 5%;
}

.categories-grid {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
	padding: 16px 5% 44px;
	user-select: none;
	-webkit-user-select: none;
	/* Espaço extra no final para o último card não ficar colado */
}

.categories-grid::-webkit-scrollbar {
	display: none;
}

.categories-grid.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.category-card {
	flex: 0 0 220px;
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	text-decoration: none;
	box-shadow: var(--shadow-card);
	will-change: transform, opacity;
	transform-origin: center bottom;
	transition: box-shadow 0.3s;
	/* Sem transform hover — o JS cuida disso */
}

.category-card:hover {
	box-shadow: var(--shadow-card-hover);
}

.category-card-img {
	width: 100%;
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

.category-card-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	background: rgba(91, 69, 255, 0.04);
}

.category-card-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
}

.category-card-name {
	font-family: "Syne", sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--text);
	letter-spacing: -.01em;
}

.category-card-arrow {
	font-size: 16px;
	color: var(--text-muted);
	transition: transform .2s;
}

.category-card:hover .category-card-arrow {
	transform: translateX(4px);
}

/* Mobile: cards maiores para preencher melhor a tela */
@media (max-width: 768px) {
	.category-card {
		flex: 0 0 72vw;
	}

	.categories-grid {
		padding: 12px 5% 36px;
		gap: 12px;
	}
}

/* ── NUVEMSHOP Z-INDEX FIXES ── */

.js-head-main {
	z-index: 999 !important;
}

.btn-utility, .js-search-button, .js-cart-handler, .js-toggle-menu {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	position: relative;
	z-index: 1010;
}

.js-search-controls-wrapper {
	position: relative;
	z-index: 1010;
}

.js-search-container {
	position: relative;
	z-index: 1010;
}

.js-search-suggest {
	z-index: 1020 !important;
}

@media (max-width: 767px) {
	.nav-cta, .col-auto.d-md-none {
		display: flex !important;
		visibility: visible !important;
	}

	.nav-links {
		display: none !important;
	}

	.hamburger {
		display: flex !important;
	}
}

/* ── Subcategory dropdown — card cascade ── */

/* Ancora o dropdown ao li pai, não ao container da nav */
.js-item-subitems-desktop {
	position: relative !important;
}

/* Container: light refinado */
.js-desktop-dropdown {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: auto !important;
	width: fit-content !important;
	background: rgba(255, 255, 255, 0.55) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	border-radius: 20px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
	padding: 10px !important;
	margin-top: 8px !important;
}

/* Lista: grid 2 colunas */
ul.desktop-list-subitems {
	display: grid !important;
	grid-template-columns: repeat(2, 130px) !important;
	gap: 6px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* Cada card ocupa a célula do grid */
ul.desktop-list-subitems > li {
	margin: 0 !important;
	padding: 0 !important;
}

/* Link vira card light refinado */
ul.desktop-list-subitems > li > a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: 100% !important;
	padding: 14px 10px !important;
	border-radius: 13px !important;
	border-top: 2px solid rgba(91, 69, 255, 0.18) !important;
	border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
	background: linear-gradient(160deg, #ffffff 0%, #f5f4f9 100%) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: #1a1820 !important;
	text-decoration: none !important;
	transition: background 0.22s, border-color 0.22s, color 0.22s, box-shadow 0.22s, transform 0.22s !important;
	line-height: 1.3 !important;
}

ul.desktop-list-subitems > li > a:hover {
	background: linear-gradient(160deg, rgba(91,69,255,0.08) 0%, rgba(91,69,255,0.14) 100%) !important;
	border-top-color: rgba(91, 69, 255, 0.7) !important;
	border-right-color: rgba(91, 69, 255, 0.2) !important;
	border-bottom-color: rgba(91, 69, 255, 0.2) !important;
	border-left-color: rgba(91, 69, 255, 0.2) !important;
	color: #5b45ff !important;
	box-shadow: 0 4px 14px rgba(91, 69, 255, 0.15) !important;
	transform: translateY(-2px) !important;
}

/* ── Animação em cascata ── */
@keyframes subCardIn {
	from { opacity: 0; transform: translateY(-10px) scale(0.93); }
	to   { opacity: 1; transform: none; }
}

.js-item-subitems-desktop:hover ul.desktop-list-subitems > li > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li > a {
	animation: subCardIn 0.28s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.js-item-subitems-desktop:hover ul.desktop-list-subitems > li:nth-child(1) > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li:nth-child(1) > a { animation-delay: 0.00s; }
.js-item-subitems-desktop:hover ul.desktop-list-subitems > li:nth-child(2) > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li:nth-child(2) > a { animation-delay: 0.05s; }
.js-item-subitems-desktop:hover ul.desktop-list-subitems > li:nth-child(3) > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li:nth-child(3) > a { animation-delay: 0.10s; }
.js-item-subitems-desktop:hover ul.desktop-list-subitems > li:nth-child(4) > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li:nth-child(4) > a { animation-delay: 0.15s; }
.js-item-subitems-desktop:hover ul.desktop-list-subitems > li:nth-child(5) > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li:nth-child(5) > a { animation-delay: 0.20s; }
.js-item-subitems-desktop:hover ul.desktop-list-subitems > li:nth-child(6) > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li:nth-child(6) > a { animation-delay: 0.25s; }
.js-item-subitems-desktop:hover ul.desktop-list-subitems > li:nth-child(7) > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li:nth-child(7) > a { animation-delay: 0.30s; }
.js-item-subitems-desktop:hover ul.desktop-list-subitems > li:nth-child(8) > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li:nth-child(8) > a { animation-delay: 0.35s; }
.js-item-subitems-desktop:hover ul.desktop-list-subitems > li:nth-child(9) > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li:nth-child(9) > a { animation-delay: 0.40s; }
.js-item-subitems-desktop:hover ul.desktop-list-subitems > li:nth-child(10) > a,
.js-item-subitems-desktop.active ul.desktop-list-subitems > li:nth-child(10) > a { animation-delay: 0.45s; }

.js-item-subitems-desktop.active .js-desktop-dropdown,
.js-item-subitems-desktop:hover .js-desktop-dropdown {
	z-index: 1050 !important;
}

.js-head-main, .head-main {
	z-index: 1000 !important;
	position: relative !important;
}

#nav-search {
	z-index: 1100 !important;
}

.js-modal-overlay {
	z-index: 1090 !important;
}

#modal-cart {
	z-index: 1095 !important;
}

body, #navbar, .nav-cta, .js-search-controls-wrapper {
	overflow: visible !important;
}

#nav-search {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999 !important;
	background: rgba(247, 245, 240, .97);
	backdrop-filter: blur(20px);
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding-top: 120px;
}

#nav-search.modal-show {
	display: flex !important;
	background: rgba(247, 245, 240, .05) !important;
	backdrop-filter: blur(24px) !important;
}

#nav-search .js-search-input, #nav-search input {
	pointer-events: auto !important;
	z-index: 9999 !important;
	position: relative !important;
	background: #fff !important;
	border: 1px solid rgba(0, 0, 0, .15) !important;
	border-radius: 999px !important;
	padding: 14px 20px !important;
	font-size: 16px !important;
	width: 90% !important;
	max-width: 560px !important;
	outline: none !important;
	font-family: "DM Sans", sans-serif !important;
}

.js-search-container {
	pointer-events: none;
	opacity: 0;
	width: 0;
	overflow: hidden;
	transition: all .25s ease;
	position: relative;
	z-index: 9999;
}

.js-search-container.expanded {
	pointer-events: auto !important;
	opacity: 1 !important;
	width: 260px !important;
	overflow: visible !important;
}

.js-search-container.expanded input,
.js-search-container.expanded .js-search-input {
	pointer-events: auto !important;
	z-index: 9999 !important;
	cursor: text !important;
	background: rgba(255, 255, 255, .95) !important;
}

.blob, .hero-bg {
	pointer-events: none !important;
	z-index: 0 !important;
}

.js-search-suggest {
	z-index: 9999 !important;
	pointer-events: auto !important;
	position: absolute !important;
	background: #fff !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .12) !important;
	border: 1px solid rgba(0, 0, 0, .07) !important;
}

.nav-search-inner {
	width: 100%;
	max-width: 640px;
	padding: 0 20px;
	position: relative;
}

.nav-search-container {
	position: relative;
}

#nav-search .js-search-container,
#nav-search .nav-search-container {
	pointer-events: auto !important;
	opacity: 1 !important;
	width: 100% !important;
	overflow: visible !important;
}

.nav-search-close {
	position: absolute;
	top: -60px;
	right: 20px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--text-muted);
}

.nav-search-form {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	padding: 6px 6px 6px 24px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

.nav-search-input {
	flex: 1;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-size: 16px !important;
	font-family: "DM Sans", sans-serif !important;
	padding: 10px 0 !important;
}

.nav-search-submit {
	border: none;
	border-radius: 999px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: var(--accent);
	color: #fff;
	flex-shrink: 0;
}

.nav-search-suggest {
	margin-top: 12px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
	border: 1px solid rgba(0, 0, 0, .07);
	overflow: hidden;
}

.nav-search-suggest:empty {
	display: none;
}

.nav-search-suggest .search-suggest-list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.nav-search-suggest .search-suggest-item {
	padding: 0;
}

.nav-search-suggest .search-suggest-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	text-decoration: none;
	color: var(--text);
	transition: background 0.2s ease;
}

.nav-search-suggest .search-suggest-link:hover {
	background: rgba(91, 69, 255, 0.05);
}

.nav-search-suggest .search-suggest-image-container {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(247, 245, 240, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.nav-search-suggest .search-suggest-image {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.nav-search-suggest .search-suggest-text {
	min-width: 0;
}

.nav-search-suggest .search-suggest-name,
.nav-search-suggest .search-suggest-text p {
	margin: 0;
}

.nav-search-suggest .search-suggest-name {
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.35;
}

.nav-search-suggest .search-suggest-text p:last-child {
	margin-top: 4px;
	font-size: 14px;
	color: var(--text-muted);
}

.nav-search-suggest .btn.btn-link {
	font-size: 14px;
	color: var(--accent);
}

/* ── Utilities hover float ── */
.utilities-item {
	transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Alinha o botão hamburguer verticalmente com os outros ícones do header */
.utilities-container:has([data-toggle="#nav-hamburger"]),
[data-toggle="#nav-hamburger"] {
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: middle !important;
}

[data-toggle="#nav-hamburger"] .utilities-icon {
	display: block !important;
	vertical-align: middle !important;
}

.utilities-item:hover {
	transform: translateY(-3px) scale(1.03) !important;
	box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12) !important;
}

/* ══════════════════════════════════════════
   FULLSCREEN NAV OVERLAY
══════════════════════════════════════════ */

/* Esconde overlay do Nuvemshop — o menu já É fullscreen */
.js-modal-overlay[data-modal-id="#nav-hamburger"] {
	display: none !important;
}

/* Neutraliza classes de posição do Nuvemshop */
#nav-hamburger.transition-slide,
#nav-hamburger.modal-left,
#nav-hamburger.modal-right {
	transform: none !important;
	left: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}

/* Container fullscreen — slide da direita */
#nav-hamburger {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100dvh !important;
	max-width: none !important;
	max-height: none !important;
	background: rgba(247, 245, 240, 0.78) !important;
	-webkit-backdrop-filter: blur(28px) saturate(160%) !important;
	backdrop-filter: blur(28px) saturate(160%) !important;
	z-index: 9999 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	padding: 80px 10% 60px !important;
	overflow: hidden !important;
	transform: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s !important;
	pointer-events: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

#nav-hamburger.fs-open {
	opacity: 1 !important;
	visibility: visible !important;
	transition: opacity 0.35s ease !important;
	pointer-events: all !important;
}

/* Esconde apenas o footer */
#nav-hamburger .hamburger-footer,
#nav-hamburger .modal-footer {
	display: none !important;
}

/* Containers internos transparentes — sem eles o glass fica bloqueado pelo fundo sólido */
#nav-hamburger .modal-with-fixed-footer,
#nav-hamburger .modal-scrollable-area,
#nav-hamburger .modal-body,
#nav-hamburger .nav-body,
#nav-hamburger .nav-primary,
#nav-hamburger .nav-secondary {
	background: transparent !important;
}

/* Botão X principal — position:fixed pois absolute ancora em .modal-scrollable-area */
#nav-hamburger .js-modal-close.modal-header {
	position: fixed !important;
	top: 10px !important;
	right: 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	background: rgba(0,0,0,0.06) !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	z-index: 10000 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	/* Esconde o conteúdo interno do Nuvemshop */
	font-size: 0 !important;
	overflow: hidden !important;
}

#nav-hamburger .js-modal-close.modal-header *,
#nav-hamburger > .js-modal-close.modal-header .row,
#nav-hamburger > .js-modal-close.modal-header .col,
#nav-hamburger > .js-modal-close.modal-header .col-auto,
#nav-hamburger > .js-modal-close.modal-header .js-toggle-menu-close,
#nav-hamburger > .js-modal-close.modal-header .js-modal-close,
#nav-hamburger > .js-modal-close.modal-header svg,
#nav-hamburger > .js-modal-close.modal-header a,
#nav-hamburger > .js-modal-close.modal-header span {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

#nav-hamburger .js-modal-close.modal-header::before,
#nav-hamburger .js-modal-close.modal-header::after {
	content: '' !important;
	position: absolute !important;
	width: 18px !important;
	height: 2px !important;
	background: #141210 !important;
	border-radius: 2px !important;
	display: block !important;
}

#nav-hamburger .js-modal-close.modal-header::before {
	transform: rotate(45deg) !important;
}

#nav-hamburger .js-modal-close.modal-header::after {
	transform: rotate(-45deg) !important;
}

/* ── Lista principal — centralizada, sem divisórias ── */
#nav-hamburger .nav-primary {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
}

#nav-hamburger ul.nav-list {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
	width: 100% !important;
}

#nav-hamburger .nav-list > li {
	border: none !important;
	width: 100% !important;
	text-align: center !important;
	overflow: visible !important;
	position: static !important;
}

/* Links flutuantes centrados */
#nav-hamburger a.nav-list-link {
	display: block !important;
	font-family: "Syne", sans-serif !important;
	font-size: clamp(26px, 7vw, 48px) !important;
	font-weight: 700 !important;
	color: #141210 !important;
	text-decoration: none !important;
	line-height: 1.25 !important;
	padding: 10px 0 !important;
	letter-spacing: -0.02em !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	text-align: center !important;
	opacity: 0;
	transform: translateY(24px);
}

/* Esconde seta → dos itens com subcategorias */
#nav-hamburger a.nav-list-link .nav-list-arrow {
	display: none !important;
}

#nav-hamburger.fs-open a.nav-list-link {
	animation: fsMenuItemIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

#nav-hamburger a.nav-list-link:hover {
	color: #5b45ff !important;
}

/* Stagger */
#nav-hamburger li:nth-child(1) a.nav-list-link { animation-delay: 0.12s !important; }
#nav-hamburger li:nth-child(2) a.nav-list-link { animation-delay: 0.19s !important; }
#nav-hamburger li:nth-child(3) a.nav-list-link { animation-delay: 0.26s !important; }
#nav-hamburger li:nth-child(4) a.nav-list-link { animation-delay: 0.33s !important; }
#nav-hamburger li:nth-child(5) a.nav-list-link { animation-delay: 0.40s !important; }
#nav-hamburger li:nth-child(6) a.nav-list-link { animation-delay: 0.47s !important; }
#nav-hamburger li:nth-child(7) a.nav-list-link { animation-delay: 0.54s !important; }
#nav-hamburger li:nth-child(8) a.nav-list-link { animation-delay: 0.61s !important; }

@keyframes fsMenuItemIn {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Subpainel — cobre o menu, sem X duplicado ── */
/* Não definimos display aqui: Nuvemshop controla show/hide com display:none inline.
   O JS adiciona .fs-subpanel-open apenas no painel ativo → sem vazar outros painéis. */
#nav-hamburger .js-menu-panel {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(247, 245, 240, 0.60) !important;
	z-index: 10001 !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 80px 10% 60px !important;
	list-style: none !important;
	margin: 0 !important;
	overflow: hidden !important;
}

/* Só o painel ativo (class gerenciada por JS) usa display:flex */
#nav-hamburger .js-menu-panel.fs-subpanel-open {
	display: flex !important;
}

/* Header do subpainel */
#nav-hamburger .js-menu-panel .modal-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 60px !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 16px !important;
	background: transparent !important;
	border: none !important;
	z-index: 10002 !important;
	width: auto !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

/* Coluna do botão de voltar — sem fundo, só flex */
#nav-hamburger .js-menu-panel .modal-header .col:first-child {
	display: flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Botão de voltar — classe correta é js-toggle-menu-back */
#nav-hamburger .js-menu-panel .modal-header .js-toggle-menu-back {
	display: flex !important;
	align-items: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: all !important;
	/* Remove qualquer padding herdado */
	padding: 0 !important;
	background: transparent !important;
}

/* Linha interna do botão (row do Bootstrap) */
#nav-hamburger .js-menu-panel .modal-header .js-toggle-menu-back .row {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 6px !important;
	margin: 0 !important;
}

/* Circulo com a seta ← — posição fixa relativa ao #nav-hamburger (tem transform) */
#nav-hamburger .js-menu-panel .modal-header .js-toggle-menu-back .col-auto {
	position: fixed !important;
	top: 9px !important;
	left: 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	background: rgba(0,0,0,0.08) !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	z-index: 10003 !important;
}

/* Ícone SVG da seta */
#nav-hamburger .js-menu-panel .modal-header .js-toggle-menu-back svg {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 16px !important;
	height: 16px !important;
	fill: #141210 !important;
	color: #141210 !important;
}

/* Oculta o nome da categoria — só o círculo ← aparece */
#nav-hamburger .js-menu-panel .modal-header .js-toggle-menu-back .col {
	display: none !important;
}

/* Esconde APENAS o col-auto direto do row do header (o X)
   Não afeta o col-auto dentro de .js-toggle-menu-back (a seta ←) */
#nav-hamburger .js-menu-panel .modal-header > .row > .col-auto {
	display: none !important;
}

/* Items do subpainel — estilo igual ao principal */
#nav-hamburger .js-menu-panel > li {
	text-align: center !important;
	width: 100% !important;
	border: none !important;
}

#nav-hamburger .js-menu-panel > li > a {
	font-family: "Syne", sans-serif !important;
	font-size: clamp(22px, 6vw, 40px) !important;
	font-weight: 700 !important;
	color: #141210 !important;
	text-decoration: none !important;
	padding: 10px 0 !important;
	display: block !important;
	text-align: center !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
}

#nav-hamburger .js-menu-panel > li > a:hover {
	color: #5b45ff !important;
}

/* ── Ícone hamburger ── */
[data-toggle="#nav-hamburger"] .utilities-icon {
	transition: opacity 0.2s, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

[data-toggle="#nav-hamburger"].nav-is-open .utilities-icon {
	opacity: 0 !important;
	transform: rotate(90deg) scale(0.6) !important;
}

/* ══════════════════════════════════════════
   PÁGINA DE PRODUTO
══════════════════════════════════════════ */

/* ── Float no card de informações do produto (mesmo efeito do hero) ── */
@keyframes cardFloat {
	0%, 100% { transform: translateY(0px); }
	50%       { transform: translateY(-10px); }
}
#single-product .col[data-store^="product-info"] {
	border-radius: 24px;
	transform: translateY(0);
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease;
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.06),
		0 16px 40px rgba(0, 0, 0, 0.08),
		0 32px 72px rgba(0, 0, 0, 0.06);
}
#single-product .col[data-store^="product-info"]:hover {
	transform: translateY(-5px);
	box-shadow:
		0 6px 18px rgba(91, 69, 255, 0.08),
		0 14px 34px rgba(0, 0, 0, 0.11),
		0 26px 52px rgba(0, 0, 0, 0.08);
}

/* ── Tipografia: substitui Libre Baskerville + Rubik por Syne + DM Sans ── */
#single-product h1,
#single-product h2,
#single-product h3,
#single-product .h1,
#single-product .h2,
#single-product .h3,
#single-product .page-header,
#single-product .page-title {
	font-family: "Syne", sans-serif !important;
	font-weight: 700 !important;
	color: var(--text) !important;
	letter-spacing: -0.02em !important;
}

#single-product,
#single-product p,
#single-product span,
#single-product label,
#single-product li,
#single-product div {
	font-family: "DM Sans", sans-serif !important;
}

/* ── Nome do produto ── */
#single-product .page-header {
	font-family: "Syne", sans-serif !important;
	font-size: clamp(22px, 4vw, 36px) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	color: var(--text) !important;
	margin-bottom: 16px !important;
}

/* ── Preço principal ── */
#single-product .js-price-display,
#single-product .font-hugest {
	font-family: "DM Sans", sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(26px, 4vw, 36px) !important;
	color: var(--text) !important;
	letter-spacing: -0.01em !important;
}

/* ── Preço riscado (compare at price) ── */
#single-product .price-compare {
	font-family: "DM Sans", sans-serif !important;
	font-weight: 400 !important;
	color: var(--text-muted) !important;
	text-decoration: line-through !important;
}

/* ── Parcelas ── */
#single-product .js-installment,
#single-product [class*="installment"] {
	font-family: "DM Sans", sans-serif !important;
	color: var(--text-muted) !important;
	font-size: 14px !important;
}

/* ── Breadcrumb ── */
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
	font-family: "DM Sans", sans-serif !important;
	font-size: 13px !important;
	color: var(--text-muted) !important;
}

.breadcrumb a:hover {
	color: var(--accent) !important;
}

/* ── Descrição do produto ── */

/* Container centralizado com largura legível */
.product-description-centered {
	max-width: 760px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Título "Descrição" */
#product-description h5.font-big {
	font-family: "Syne", sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--text) !important;
	letter-spacing: -0.01em !important;
	margin-bottom: 14px !important;
	padding-bottom: 12px !important;
	border-bottom: 1.5px solid var(--border-subtle) !important;
}

/* Corpo */
#product-description .user-content {
	font-family: "DM Sans", sans-serif !important;
	font-size: 15px !important;
	line-height: 1.75 !important;
	color: var(--text-muted) !important;
}

/* Parágrafos: espaçamento consistente */
#product-description .user-content p {
	margin-bottom: 6px !important;
}

/* Negrito */
#product-description .user-content strong,
#product-description .user-content b {
	color: var(--text) !important;
	font-weight: 600 !important;
}

/* Listas */
#product-description .user-content ul,
#product-description .user-content ol {
	padding-left: 20px !important;
	margin-bottom: 12px !important;
}

#product-description .user-content li {
	margin-bottom: 4px !important;
}

/* Product description visual upgrade v15 */
#product-description {
	position: relative;
	--desc-parallax-x: 0px;
	--desc-parallax-y: 0px;
	--desc-parallax-tilt: 0deg;
	width: 100% !important;
	margin-top: 18px !important;
}

.product-description-centered {
	max-width: 100% !important;
	padding-inline: 0 !important;
	/* overflow: hidden foi removido — cortava o parallax do card.
	   O html overflow-x:hidden (V38) já previne o zoom no Android. */
	overflow: visible !important;
	/* Padding para dar espaço ao movimento do parallax sem clipar nas bordas */
	padding: 8px 4px !important;
}

/* Contém os containers de produto dentro do viewport.
   html overflow-x:hidden (V38) já protege contra scroll Android */
.product-gallery-coverflow,
.product-image-container,
.product-thumbs-strip {
	max-width: 100% !important;
	overflow: visible !important;
}
/* Galeria Principal: Estilo Pilha de Cartas (Cards de lateral) */
#single-product .js-swiper-product.swiper-container {
	border-radius: 22px !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 auto !important; /* Centralização Forçada */
    float: none !important;
	box-shadow: none !important;
	overflow: hidden !important; 
    width: 100% !important;
    left: 0 !important; /* Reseta qualquer deslocamento */
}

/* Container pai da galeria principal */
#single-product .product-image-container {
	padding: 0 !important;
	background: transparent !important;
	overflow: hidden !important;
    margin: 0 auto 40px auto !important; /* Aumentado para dar respiro ao card de baixo no desktop */
    float: none !important;
    max-width: 100% !important;
    text-align: center !important;
}

/* ESCopo Restrito: Apenas slides da galeria principal ganham o estilo de Cartão */
#single-product .js-swiper-product .swiper-slide {
	padding: 40px !important; /* Aumentado para Desktop para garantir sombra total */
	box-sizing: border-box !important;
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* O "Cartão" agora é cada imagem individualmente */
#single-product .js-swiper-product .js-product-slide-link {
	background: #fff !important;
	border-radius: 22px !important;
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.07),
		0 16px 48px rgba(0, 0, 0, 0.11),
		0 32px 72px rgba(0, 0, 0, 0.07) !important;
	overflow: hidden !important;
	display: block !important;
	width: 100% !important;
	position: relative !important;
}

/* --- AJUSTES MOBILE (V66) --- */
@media (max-width: 767px) {
	#single-product .js-swiper-product .swiper-slide {
		padding: 15px !important; 
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
	}
	#single-product .js-swiper-product .js-product-slide-link {
		border-radius: 18px !important;
		box-shadow:
			0 2px 10px rgba(0, 0, 0, 0.06),
			0 8px 24px rgba(0, 0, 0, 0.10) !important;
        /* V81: width 100% ao invés de calc(100% - 30px) pra manter a proporção
           quadrada certa. `padding-bottom: 100%` (inline) é relativo à largura
           do PAI, enquanto width reduzia só a largura do próprio elemento —
           isso gerava um retângulo ~30px mais alto que largo. Com 100% o
           padding-bottom casa com a largura real e o card fica quadrado.
           margin auto removido porque flex do pai + 100% já posicionam certo. */
        width: 100% !important;
        max-width: 450px;
	}
    /* Miniaturas Gigantes: Bloqueio contra encolhimento via JS */
    #single-product .product-thumbs-strip {
        padding: 15px 0 !important;
        max-width: 62% !important; 
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        min-height: 125px !important; 
    }
    #single-product .js-swiper-product-thumbs {
        height: 115px !important;
        overflow: visible !important;
        width: 100% !important;
    }
    #single-product .js-swiper-product-thumbs .swiper-wrapper {
        width: max-content !important; /* Impede o Swiper de espremer os slides */
    }
    #single-product .js-swiper-product-thumbs .swiper-slide {
        width: 100px !important; 
        min-width: 100px !important; /* Trava de tamanho contra JS */
        height: 100px !important; 
        margin-right: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #single-product .js-product-thumb {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    }
    #single-product .js-swiper-product-thumbs .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important; 
        max-height: none !important;
        object-fit: contain !important; 
        display: block !important;
    }
}

/* Garante que os Thumbnails não sejam afetados pelos estilos acima */
#single-product .js-swiper-product-thumbs .swiper-slide {
	padding: 0 !important;
	width: auto !important;
	margin-right: 18px !important; /* Espaço entre thumbs */
}
#single-product .product-thumbs-strip {
	padding: 10px 0 !important;
    overflow: visible !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
}

#single-product .product-thumbs-strip {
	padding: 16px 0 !important;
}

#product-description .user-content {
	position: relative !important;
	isolation: isolate;
	overflow: hidden;
    z-index: 50 !important; /* Elevado para não ser bloqueado pela galeria no desktop */
	padding: 30px 34px 32px !important;
	border-radius: 22px !important;
	border: 1px solid rgba(255, 255, 255, 0.52) !important;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.28)) !important;
	backdrop-filter: blur(18px) saturate(155%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(155%) !important;
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.06),
		0 16px 44px rgba(0, 0, 0, 0.09),
		0 28px 60px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
	/* Tilt 3D via JS (initCardTilt) */
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
	font-size: 17px !important;
	line-height: 1.9 !important;
	text-align: center !important;
}

#product-description .user-content::before,
#product-description .user-content::after {
	content: "";
	position: absolute;
	border-radius: 999px;
	filter: blur(6px);
	pointer-events: none;
	z-index: -1;
	transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

#product-description .user-content::before {
	width: 280px;
	height: 280px;
	top: -110px;
	right: -55px;
	background: radial-gradient(circle, rgba(91, 69, 255, 0.18), rgba(91, 69, 255, 0));
	transform: translate3d(calc(var(--desc-parallax-x) * -0.8), calc(var(--desc-parallax-y) * -1.3), 0);
}

#product-description .user-content::after {
	width: 230px;
	height: 230px;
	bottom: -115px;
	left: -35px;
	background: radial-gradient(circle, rgba(0, 201, 167, 0.16), rgba(0, 201, 167, 0));
	transform: translate3d(calc(var(--desc-parallax-x) * 0.65), calc(var(--desc-parallax-y) * 1.15), 0);
}

#product-description .user-content:hover {
	border-color: rgba(255, 255, 255, 0.72) !important;
	box-shadow: 0 24px 60px rgba(25, 20, 14, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

#product-description .user-content > * {
	position: relative;
	z-index: 1;
}

#product-description h5.font-big {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(20px, 2vw, 24px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	margin-bottom: 18px !important;
	padding-bottom: 16px !important;
	border-bottom: 1px solid rgba(20, 18, 16, 0.08) !important;
}

#product-description h5.font-big::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: linear-gradient(135deg, rgba(91, 69, 255, 0.95), rgba(0, 201, 167, 0.90));
	box-shadow: 0 0 0 6px rgba(91, 69, 255, 0.10);
}

#product-description .user-content p {
	margin-bottom: 14px !important;
}

#product-description .user-content li {
	margin-bottom: 6px !important;
}

#product-description .user-content h2,
#product-description .user-content h3,
#product-description .user-content h4 {
	font-family: "Syne", sans-serif !important;
	color: var(--text) !important;
	letter-spacing: -0.02em !important;
	margin-top: 24px !important;
	margin-bottom: 12px !important;
}

#product-description .user-content a {
	color: var(--accent) !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(91, 69, 255, 0.25);
	transition: border-color 0.2s ease, opacity 0.2s ease;
}

#product-description .user-content a:hover {
	border-color: rgba(91, 69, 255, 0.6);
	opacity: 0.9;
}

#product-description .user-content ul,
#product-description .user-content ol {
	padding-left: 0 !important;
	list-style-position: inside !important;
	text-align: center !important;
}

#product-description .user-content img,
#product-description .user-content iframe,
#product-description .user-content video {
	display: block;
	max-width: 100%;
	border-radius: 18px;
	margin: 18px auto;
	box-shadow: 0 14px 34px rgba(20, 18, 16, 0.12);
}

@media (min-width: 768px) {
	#single-product > .container > #product-description,
	#single-product .container > #product-description {
		display: block !important;
		margin-top: clamp(-420px, -29vw, -252px) !important;
		padding: 0 !important;
	}

	#product-description .user-content {
		background-attachment: fixed;
		max-width: 100% !important;
		min-height: 0 !important;
	}
}

@media (max-width: 767px) {
	.product-description-centered {
		padding-inline: 0 !important;
	}

	#product-description .user-content {
		padding: 24px 20px 24px !important;
		border-radius: 22px !important;
		backdrop-filter: blur(14px) saturate(145%) !important;
		-webkit-backdrop-filter: blur(14px) saturate(145%) !important;
		transform: none !important;
		font-size: 16px !important;
		line-height: 1.85 !important;
	}

	#product-description .user-content::before {
		width: 220px;
		height: 220px;
		top: -120px;
		right: -80px;
	}

	#product-description .user-content::after {
		width: 180px;
		height: 180px;
		bottom: -100px;
		left: -60px;
	}
}

/* ── Labels (ex: última peça) ── */
#single-product .product-label,
#single-product .js-stock-alert,
#single-product [class*="stock"] {
	font-family: "DM Sans", sans-serif !important;
	font-size: 13px !important;
}

/* ── Botão de compra ── */
#single-product .btn-primary,
#product_form .btn-primary,
input.btn-primary.js-addtocart,
input.js-prod-submit-form {
	font-family: "Syne", sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	background: rgba(91, 69, 255, 0.16) !important;
	background-color: rgba(91, 69, 255, 0.16) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 1.5px solid rgba(91, 69, 255, 0.35) !important;
	color: #5b45ff !important;
	-webkit-text-fill-color: #5b45ff !important;
	border-radius: 999px !important;
	padding: 0 32px !important;
	height: 54px !important;
	opacity: 1 !important;
	box-shadow: 0 2px 8px rgba(91, 69, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.40) !important;
	transition: background 0.3s, transform 0.2s, box-shadow 0.3s !important;
}

#single-product .btn-primary:hover,
#product_form .btn-primary:hover,
input.btn-primary.js-addtocart:hover {
	background: rgba(91, 69, 255, 0.24) !important;
	background-color: rgba(91, 69, 255, 0.24) !important;
	border-color: rgba(91, 69, 255, 0.55) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 14px rgba(91, 69, 255, 0.18), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

#single-product .btn-primary:active,
input.btn-primary.js-addtocart:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 12px rgba(91, 69, 255, 0.15) !important;
}

/* ── Linha quantidade + botão (só o form-row externo) ── */
#single-product #product_form .form-row.mb-4 {
	align-items: center !important;
}

#single-product #product_form .form-row.mb-4 > .col-4,
#single-product #product_form .form-row.mb-4 > .col-8 {
	margin-bottom: 0 !important;
}

#single-product #product_form input.btn-primary {
	margin-bottom: 0 !important;
}

/* ── Seletor de quantidade ── */
#single-product .form-quantity,
#single-product .form-quantity-product {
	background: rgba(91, 69, 255, 0.10) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 1.5px solid rgba(91, 69, 255, 0.28) !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	height: 54px !important;
	box-shadow: none !important;
}

/* Input do número */
#single-product .js-quantity-input,
#single-product .form-quantity input[type="number"],
#single-product .form-quantity input[type="text"] {
	font-family: "DM Sans", sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	color: #5b45ff !important;
	background: transparent !important;
	border: none !important;
	text-align: center !important;
	box-shadow: none !important;
}

/* Botões − e + */
#single-product .js-quantity-down,
#single-product .js-quantity-up,
#single-product .form-quantity-icon {
	color: #5b45ff !important;
	background: transparent !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px 14px !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
}

#single-product .js-quantity-down:hover,
#single-product .js-quantity-up:hover {
	background: rgba(91, 69, 255, 0.12) !important;
}

#single-product .form-quantity-icon svg {
	fill: #5b45ff !important;
	color: #5b45ff !important;
}

/* ── Seletor de variantes (dropdown de estampa) ── */
#single-product .js-product-variants .form-label,
#single-product .js-product-variants label.form-label {
	font-family: "DM Sans", sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: var(--text-muted) !important;
	margin-bottom: 8px !important;
}

#single-product .js-product-variants .form-group {
	position: relative !important;
	background: rgba(91, 69, 255, 0.08) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 1.5px solid rgba(91, 69, 255, 0.22) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	padding: 10px 20px 10px !important;
	margin-bottom: 12px !important;
}

#single-product .js-product-variants .form-label {
	margin-bottom: 2px !important;
}

#single-product .js-product-variants select.form-select,
#single-product .js-product-variants .js-variation-option {
	font-family: "DM Sans", sans-serif !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #5b45ff !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	padding: 2px 40px 2px 0 !important;
	width: 100% !important;
	cursor: pointer !important;
	outline: none !important;
	margin: 0 !important;
}

/* Ícone — círculo roxo translúcido com chevron dentro */
#single-product .js-product-variants .form-select-icon {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
	width: 28px !important;
	height: 28px !important;
	background: rgba(91, 69, 255, 0.12) !important;
	border: 1px solid rgba(91, 69, 255, 0.25) !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#single-product .js-product-variants .form-select-icon svg {
	display: none !important;
}

#single-product .js-product-variants .form-select-icon::after {
	content: '' !important;
	display: block !important;
	width: 7px !important;
	height: 7px !important;
	border-right: 2px solid #5b45ff !important;
	border-bottom: 2px solid #5b45ff !important;
	transform: rotate(45deg) translateY(-25%) !important;
	border-radius: 1px !important;
}

/* ── Alerta "última peça" ── */
#single-product .text-accent,
#product_form .text-accent {
	color: var(--accent) !important;
	font-family: "DM Sans", sans-serif !important;
	font-weight: 600 !important;
}

/* ── Card branco da coluna de info do produto ── */
/* Especificidade máxima: ID dobrado + atributo + classe + nth-child como fallback */
html body #single-product#single-product .row.section-single-product > div.col[data-store^="product-info-"],
html body #single-product#single-product .row.section-single-product > div.col.pt-3,
html body #single-product#single-product .row.section-single-product > div:nth-child(2) {
	background-color: #ffffff !important;
	background-image: none !important;
	border-radius: 20px !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06),
	            0 1px 4px rgba(0, 0, 0, 0.04) !important;
	padding: 32px 36px !important;
	margin-left: 16px !important;
	margin-top: 0 !important;
	align-self: flex-start !important;
	position: relative !important;
	z-index: 1 !important;
	isolation: isolate !important;
}

/* Page-header dentro do card de produto: remover o fundo bege que vem da regra
   global de category/page-title (linha ~2160). Sem isso, fica um retângulo bege
   atrás do título do produto cobrindo o card branco. */
#single-product .page-header[data-store^="page-title"],
#single-product section.page-header {
	background: transparent !important;
	background-color: transparent !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Aproxima título do preço */
#single-product .page-header h1.js-product-name,
#single-product h1.js-product-name {
	margin-top: 4px !important;
	margin-bottom: 8px !important;
}

#single-product [data-store^="product-price-"] {
	margin-top: 0 !important;
}

@media (max-width: 767px) {
	html body #single-product#single-product .row.section-single-product > div.col[data-store^="product-info-"],
	html body #single-product#single-product .row.section-single-product > div.col.pt-3,
	html body #single-product#single-product .row.section-single-product > div:nth-child(2) {
		margin-left: 14px !important;
		margin-right: 14px !important;
		padding: 24px 20px !important;
		border-radius: 16px !important;
		margin-top: 16px !important;
		max-width: calc(100% - 28px) !important;
		flex: 0 0 calc(100% - 28px) !important;
		box-sizing: border-box !important;
	}
}

/* ── Galeria ── */

/* Reduz espaço acima da galeria no mobile */
@media (max-width: 767px) {
	#single-product {
		padding-top: 8px !important;
	}
	#single-product .section-single-product > [class*="col-12"]:first-child {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Imagem principal: cantos arredondados — overflow: visible para evitar
   bug de recomposição GPU quando filho tem will-change / transform */
#single-product .js-swiper-product .swiper-slide {
	border-radius: 0 !important;
	overflow: visible !important;
}

/* ── Galeria: carrossel flutuante com vidro ── */

/* Mobile: thumbs flutuam sobre a imagem principal */
@media (max-width: 767px) {
	#single-product [data-store^="product-image"] {
		position: relative !important;
	}
	#single-product [data-store^="product-image"] .order-last {
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 10 !important;
		padding: 0 !important;
	}
	#single-product .swiper-product-thumb {
		padding: 14px 0 !important;
		margin-bottom: 0 !important;
	}
	#single-product .product-image-container {
		padding-bottom: 108px !important;
	}
}


/* Cards de thumbs: dimensões fixas — NÃO mexer em transform/opacity/transition
   (Swiper anima essas propriedades em runtime e quebra se forçarmos com !important)
   V72: desktop 88px, mobile 120px (override abaixo).
   Seletor duplo cobre as duas classes que coexistem no mesmo elemento (.swiper-product-thumb + .js-swiper-product-thumbs),
   garantindo vitória sobre os blocos conflitantes anteriores (linhas ~2039 e ~2071). */
#single-product .swiper-product-thumb .swiper-slide,
#single-product .js-swiper-product-thumbs .swiper-slide {
	width: 80px !important;
	height: 80px !important;
	min-width: 80px !important;
	cursor: pointer !important;
}

/* Mobile: V79 — 100px (reduzido de 120) pra caber 3 thumbs completos em 375px */
@media (max-width: 767px) {
	#single-product .swiper-product-thumb .swiper-slide,
	#single-product .js-swiper-product-thumbs .swiper-slide {
		width: 100px !important;
		height: 100px !important;
		min-width: 100px !important;
	}
	/* V77: Só garante overflow: hidden nos containers do Swiper (desfazendo o `overflow: visible`
	   da outra IA). NÃO mexemos mais no .swiper-wrapper — deixamos o Swiper gerenciar a largura
	   dele, porque o max-content natural do wrapper flexbox é necessário pro Swiper transformar
	   o carrossel. Qualquer interferência aí quebra a galeria. */
	#single-product .js-swiper-product-thumbs,
	#single-product .swiper-product-thumb {
		overflow: hidden !important;
		height: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	#single-product .product-thumbs-strip {
		min-height: 130px !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}
	/* V77: defesa-em-profundidade contra overflow horizontal da página inteira.
	   Qualquer elemento filho que tente exceder a viewport é clipado aqui. */
	html, body {
		overflow-x: hidden !important;
		max-width: 100vw !important;
	}
	/* V80: removidas as regras defensivas de centralização do V79 — elas estavam
	   interagindo com o padding 9% do `.js-swiper-product` mobile e mudando a
	   largura/altura efetiva do card principal, deixando a imagem estranha. */
}

/* product-thumb V78: card simples, preenchendo 100% da swiper-slide.
   V78 zera margin/padding: o HTML tem `mr-3 mr-md-0 mb-md-3` (Bootstrap) no anchor,
   criando 16px de espaço vazio à direita dentro da slide. E o inline style do template
   define `padding-bottom: X%` pra criar aspect-ratio, que agora é redundante porque
   a slide já tem width/height fixos. */
#single-product .swiper-product-thumb .product-thumb {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	opacity: 1 !important;
	border: none !important;
	background: #fff !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
	transform: scale(1) !important;
	transition:
		box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1),
		transform 0.35s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* V75: Card ativo — só leve elevação + sombra um pouco mais pronunciada (neutra, sem cor) */
#single-product .swiper-product-thumb .swiper-slide-active .product-thumb,
#single-product .swiper-product-thumb .swiper-slide-active .product-thumb.selected,
#single-product .swiper-product-thumb .product-thumb.selected {
	border: none !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14) !important;
	transform: scale(1.04) !important;
}

/* V75: neutraliza o pseudo ::after que desenhava borda roxa dura */
#single-product .swiper-product-thumb .product-thumb::after,
#single-product .swiper-product-thumb .product-thumb.selected::after,
#single-product .swiper-product-thumb .swiper-slide-active .product-thumb::after {
	border: 2px solid transparent !important;
	box-shadow: none !important;
}

/* V75: Mobile — lift ligeiramente maior pra ficar visível na tela menor */
@media (max-width: 767px) {
	#single-product .swiper-product-thumb .swiper-slide-active .product-thumb,
	#single-product .swiper-product-thumb .swiper-slide-active .product-thumb.selected,
	#single-product .swiper-product-thumb .product-thumb.selected {
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
		transform: scale(1.05) !important;
	}
}

/* V75: padding do container reduzido agora que não há halo pra caber */
#single-product .swiper-product-thumb {
	padding: 14px 10px !important;
}

/* V75: REMOVIDO o justify-content: center no .swiper-wrapper desktop.
   Ele conflitava com o transform: translate3d() que o Swiper aplica nativamente:
   quando chegava no último slide, o offset combinado jogava o wrapper pra fora do viewport
   e não era mais possível arrastar de volta. A centralização visual correta já vem do
   `centeredSlides: true` na config do Swiper (store.js.tpl linha ~2792). */

/* ── Animação da imagem principal ── */
@keyframes imgReveal {
	from { filter: blur(8px) brightness(1.1); transform: scale(1.05); }
	to   { filter: blur(0px) brightness(1);   transform: scale(1); }
}

#single-product .js-swiper-product .swiper-slide-active .js-product-slide-img {
	animation: imgReveal 0.55s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

/* ══════════════════════════════════════════
   PÁGINA DE CATEGORIA
══════════════════════════════════════════ */

/* ── Fundo consistente em todas as páginas ── */
html,
body {
	background-color: var(--bg) !important;
}

section.container.mt-3,
section.container.mt-3 .page-header,
.page-header[data-store^="page-title"],
.category-controls-sticky-detector {
	background: var(--bg) !important;
}

/* ── Título da categoria ── */
.category-controls h1,
.category-controls .h1,
section.container.mt-3 .page-header h1,
section.container.mt-3 .page-header .h1 {
	font-family: "Syne", sans-serif !important;
	font-weight: 800 !important;
	font-size: clamp(28px, 5vw, 48px) !important;
	letter-spacing: -0.03em !important;
	color: var(--text) !important;
	line-height: 1.1 !important;
	margin-bottom: 4px !important;
}

/* Breadcrumb na categoria */
.category-controls .breadcrumb,
section.container.mt-3 .breadcrumb,
.category-controls .breadcrumb a,
section.container.mt-3 .breadcrumb a,
.category-controls .breadcrumb span,
section.container.mt-3 .breadcrumb span {
	font-family: "DM Sans", sans-serif !important;
	font-size: 12px !important;
	color: var(--text-light) !important;
}

/* ── Barra de filtros/ordenação ── */
.js-category-controls.category-controls {
	top: 0 !important;
	z-index: 999 !important;
	visibility: visible !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	background: rgba(247, 245, 240, 0.88) !important;
	backdrop-filter: blur(14px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
	border-bottom: 1px solid var(--border-subtle) !important;
}

/* Botões Filtrar e Ordenar */
.category-controls .btn.btn-link,
.category-controls a.btn.btn-link {
	font-family: "DM Sans", sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--text-muted) !important;
	background: var(--surface-strong) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border: 1px solid var(--border-subtle) !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	text-decoration: none !important;
	transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.category-controls .btn.btn-link:hover,
.category-controls a.btn.btn-link:hover {
	background: rgba(91, 69, 255, 0.07) !important;
	border-color: rgba(91, 69, 255, 0.22) !important;
	color: var(--accent) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 16px rgba(91, 69, 255, 0.12) !important;
}

.category-controls .btn.btn-link svg {
	width: 14px !important;
	height: 14px !important;
}

/* ── Cards de produto na categoria ── */
.category-body .js-item-info-container.item {
	background: var(--surface) !important;
	backdrop-filter: blur(14px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow-card) !important;
	overflow: hidden !important;
	transition: transform var(--transition), box-shadow var(--transition) !important;
}

.category-body .js-item-info-container.item:hover {
	transform: translateY(-6px) !important;
	box-shadow: var(--shadow-card-hover) !important;
}

/* Imagem: clipa dentro do card */
.category-body .item-image,
.category-body .js-item-image-padding {
	border-radius: var(--radius) var(--radius) 0 0 !important;
	overflow: hidden !important;
}

/* Área de texto */
.category-body .item-description {
	padding: 14px 16px 16px !important;
}

/* Nome do produto */
.category-body .item-name {
	font-family: "DM Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--text) !important;
	line-height: 1.4 !important;
	margin-bottom: 6px !important;
}

/* Preço */
.category-body .item-price {
	font-family: "DM Sans", sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--accent) !important;
	letter-spacing: -0.01em !important;
}

/* Preço riscado */
.category-body .price-compare {
	font-family: "DM Sans", sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--text-light) !important;
	text-decoration: line-through !important;
}

/* Botão "Comprar" nos cards */
.category-body .item-actions .btn {
	font-family: "Syne", sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	background: rgba(91, 69, 255, 0.08) !important;
	border: 1.5px solid rgba(91, 69, 255, 0.28) !important;
	color: var(--accent) !important;
	border-radius: 999px !important;
	padding: 8px 20px !important;
	height: auto !important;
	width: 100% !important;
	transition: background 0.25s, box-shadow 0.25s, transform 0.25s !important;
}

.category-body .item-actions .btn:hover {
	background: rgba(91, 69, 255, 0.16) !important;
	box-shadow: 0 6px 20px rgba(91, 69, 255, 0.20) !important;
	transform: translateY(-2px) !important;
}

/* ── Blobs de parallax ── */
.cat-blob {
	position: fixed;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none !important;
	z-index: -1;
	will-change: transform;
	transition: transform 0.08s linear;
}

.cat-blob-1 {
	width: 480px;
	height: 480px;
	background: var(--blob1);
	top: 80px;
	right: -120px;
}

.cat-blob-2 {
	width: 380px;
	height: 380px;
	background: var(--blob2);
	top: 45%;
	left: -80px;
}

.cat-blob-3 {
	width: 320px;
	height: 320px;
	background: var(--blob3);
	top: 70%;
	right: 25%;
}

/* Perspectiva para o tilt 3D dos cards */
.category-body .col-grid {
	perspective: 1000px;
}

.category-body .item {
	transform-style: preserve-3d;
	will-change: transform;
}

/* ── Animação de entrada dos cards ── */
@keyframes categoryCardIn {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

.category-body .col-grid {
	animation: categoryCardIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.category-body .col-grid:nth-child(1) { animation-delay: 0.05s; }
.category-body .col-grid:nth-child(2) { animation-delay: 0.10s; }
.category-body .col-grid:nth-child(3) { animation-delay: 0.15s; }
.category-body .col-grid:nth-child(4) { animation-delay: 0.20s; }
.category-body .col-grid:nth-child(5) { animation-delay: 0.25s; }
.category-body .col-grid:nth-child(6) { animation-delay: 0.30s; }
.category-body .col-grid:nth-child(7) { animation-delay: 0.35s; }
.category-body .col-grid:nth-child(8) { animation-delay: 0.40s; }

/* ══════════════════════════════════════════
   MEIOS DE PAGAMENTO & ENVIO
══════════════════════════════════════════ */

/* ── Accordion: glass card ── */
#single-product .accordion.px-3 {
	background: var(--surface) !important;
	backdrop-filter: blur(12px) saturate(140%) !important;
	-webkit-backdrop-filter: blur(12px) saturate(140%) !important;
	border: 1px solid var(--border-subtle) !important;
	border-radius: var(--radius-sm) !important;
	margin-bottom: 10px !important;
	padding-left: 18px !important;
	padding-right: 18px !important;
}

/* ── Header do accordion ── */
#single-product .js-accordion-toggle {
	text-decoration: none !important;
	padding-top: 14px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid transparent !important;
	transition: border-color 0.3s ease !important;
}

/* Linha separadora só quando aberto */
#single-product .js-accordion-container:has(.js-accordion-content[style*="block"]) .js-accordion-toggle {
	border-bottom-color: var(--border-subtle) !important;
}

/* ── Título ── */
#single-product .accordion .h5.font-big {
	font-family: "DM Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--text) !important;
	letter-spacing: 0 !important;
	margin: 0 !important;
}

/* ── Ícone +/− ── */
#single-product .js-accordion-toggle .col-auto svg {
	color: var(--text-muted) !important;
}

/* ── Badges de métodos de pagamento ── */
.payment-methods-badges {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
}

.payment-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: "DM Sans", sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	border: 1.5px solid !important;
	line-height: 1 !important;
}

.payment-badge--pix {
	background: rgba(0, 201, 167, 0.10) !important;
	border-color: rgba(0, 201, 167, 0.35) !important;
	color: #00a98a !important;
}

.payment-badge--card {
	background: rgba(91, 69, 255, 0.07) !important;
	border-color: rgba(91, 69, 255, 0.25) !important;
	color: var(--accent) !important;
}

.payment-badge--boleto {
	background: rgba(245, 158, 11, 0.08) !important;
	border-color: rgba(245, 158, 11, 0.30) !important;
	color: #b97a00 !important;
}

/* ── Texto de parcelamento ── */
#single-product .js-product-payments-container [class*="installment"],
#single-product .js-product-payments-container .item-installments {
	font-family: "DM Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--text) !important;
}

/* ── Link "Ver mais detalhes" — oculto ── */
#single-product #btn-installments,
#single-product .js-product-payments-container .btn-link {
	display: none !important;
}

/* ══════════════════════════════════════════
   PRODUTOS RELACIONADOS
══════════════════════════════════════════ */

/* ── Seção container ── */
.js-related-products,
.js-complementary-products {
	padding-top: 48px !important;
	padding-bottom: 64px !important;
}

/* ── Título da seção ── */
.js-related-products .h3,
.js-complementary-products .h3 {
	font-family: "Syne", sans-serif !important;
	font-size: clamp(20px, 3vw, 28px) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	color: var(--text) !important;
	margin-bottom: 0 !important;
}

/* ── Card: glass morphism ── */
#related-products .item,
#complementary-products .item {
	background: var(--surface) !important;
	backdrop-filter: blur(14px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow-card) !important;
	overflow: hidden !important;
	transition: transform var(--transition), box-shadow var(--transition) !important;
}

#related-products .item:hover,
#complementary-products .item:hover {
	transform: translateY(-6px) !important;
	box-shadow: var(--shadow-card-hover) !important;
}

/* ── Imagem: sem padding extra, bordas superiores arredondadas ── */
#related-products .item-image,
#complementary-products .item-image {
	border-radius: var(--radius) var(--radius) 0 0 !important;
	overflow: hidden !important;
}

/* ── Info text area ── */
#related-products .item-description,
#complementary-products .item-description {
	padding: 14px 16px 16px !important;
}

/* ── Nome do produto ── */
#related-products .item-name,
#complementary-products .item-name {
	font-family: "DM Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--text) !important;
	line-height: 1.4 !important;
	margin-bottom: 6px !important;
}

/* ── Preço ── */
#related-products .item-price,
#complementary-products .item-price {
	font-family: "DM Sans", sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--accent) !important;
	letter-spacing: -0.01em !important;
}

/* ── Preço riscado ── */
#related-products .price-compare,
#complementary-products .price-compare {
	font-family: "DM Sans", sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--text-light) !important;
	text-decoration: line-through !important;
}

/* ── Botão "Comprar" ── */
#related-products .item-actions .btn,
#complementary-products .item-actions .btn {
	font-family: "Syne", sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	background: rgba(91, 69, 255, 0.08) !important;
	border: 1.5px solid rgba(91, 69, 255, 0.30) !important;
	color: var(--accent) !important;
	border-radius: 999px !important;
	padding: 8px 20px !important;
	height: auto !important;
	width: 100% !important;
	transition: background 0.25s, box-shadow 0.25s, transform 0.25s !important;
}

#related-products .item-actions .btn:hover,
#complementary-products .item-actions .btn:hover {
	background: rgba(91, 69, 255, 0.16) !important;
	box-shadow: 0 6px 20px rgba(91, 69, 255, 0.20) !important;
	transform: translateY(-2px) !important;
}

/* ── Setas de navegação do carrossel ── */
#related-products .swiper-button-prev,
#related-products .swiper-button-next,
#complementary-products .swiper-button-prev,
#complementary-products .swiper-button-next {
	background: var(--surface-strong) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border: 1px solid var(--border) !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
	transition: transform var(--transition), box-shadow var(--transition) !important;
}

#related-products .swiper-button-prev:hover,
#related-products .swiper-button-next:hover,
#complementary-products .swiper-button-prev:hover,
#complementary-products .swiper-button-next:hover {
	transform: scale(1.1) !important;
	box-shadow: 0 8px 24px rgba(91, 69, 255, 0.18) !important;
}

/* ── Entrada dos cards com stagger ── */
@keyframes relatedCardIn {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

#related-products .swiper-slide,
#complementary-products .swiper-slide {
	animation: relatedCardIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

#related-products .swiper-slide:nth-child(1),
#complementary-products .swiper-slide:nth-child(1) { animation-delay: 0.05s; }
#related-products .swiper-slide:nth-child(2),
#complementary-products .swiper-slide:nth-child(2) { animation-delay: 0.12s; }
#related-products .swiper-slide:nth-child(3),
#complementary-products .swiper-slide:nth-child(3) { animation-delay: 0.19s; }
#related-products .swiper-slide:nth-child(4),
#complementary-products .swiper-slide:nth-child(4) { animation-delay: 0.26s; }

/* ── Disable secondary hover image (products have no second image) ── */
/* Secondary image: keep hidden, force featured visible on hover */
.item-image-secondary { display: none !important; opacity: 0 !important; }
.js-item-info-container.item:hover .item-image-featured,
.js-item-info-container.item:focus .item-image-featured { opacity: 1 !important; visibility: visible !important; }

/* ══════════════════════════════════════
   PAGE (Quem Somos, Trocas, etc.)
══════════════════════════════════════ */

/* Blobs */
.page-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.page-blob-1 {
    width: 420px; height: 420px;
    background: var(--blob1);
    top: 60px; right: -100px;
}
.page-blob-2 {
    width: 340px; height: 340px;
    background: var(--blob2);
    bottom: 80px; left: -80px;
}

/* Hero */
.page-hero {
    position: relative;
    z-index: 1;
    padding: 48px 0 24px;
}
.page-hero .page-header { padding-top: 0 !important; margin-bottom: 0 !important; }
.page-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem) !important;
    font-weight: 800 !important;
    font-family: "Syne", sans-serif !important;
    color: var(--text) !important;
    margin: 0 !important;
}

/* Layout */
.page-body { position: relative; z-index: 1; }

/* about layout — estrutura via inline styles no tpl */

/* Owner card */
.owner-card {
    background: var(--surface);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 28px 20px;
    text-align: center;
    position: sticky;
    top: 88px;
}

/* owner photo — dimensões via inline styles no tpl */

.owner-name {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 4px !important;
}
.owner-role {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Content card */
.page-content-card {
    background: var(--surface) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 36px 40px;
}
.page-content-card p {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-muted);
    margin-bottom: 1.4rem;
}
.page-content-card p:first-child {
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 500;
}
.page-content-card p:last-child { margin-bottom: 0; }
.page-content-card strong, .page-content-card b { color: var(--text); }
.page-content-card h2, .page-content-card h3 {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    color: var(--text);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 767px) {
    .page-hero { padding: 32px 0 16px; }
    .page-blob { display: none; }
    .about-layout { flex-direction: column !important; }
    .about-photo-col { width: 100% !important; max-width: 100% !important; flex: none !important; }
    .owner-card { position: static; }
    .page-content-card { padding: 24px 20px; }
}

/* ══════════════════════════════════════
   PRODUCT GALLERY — CAROUSEL COM SCALE
══════════════════════════════════════ */

/* Remove white card */
#single-product .product-image-container,
.product-gallery-coverflow .product-image-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Clip container so side slides don't bleed into page layout */
.product-gallery-coverflow {
    overflow: hidden;
}

/* Desktop: clean overflow, extra room for box-shadow */
.product-gallery-coverflow .js-swiper-product {
    overflow: hidden !important;
    padding: 12px 0 20px !important;
}

/*
 * Scale effect applied to the INNER link element, NOT the .swiper-slide.
 *
 * Critical: .swiper-slide must have overflow: visible (not hidden).
 * overflow: hidden on the slide + will-change: transform on a child creates
 * nested GPU compositor layers that Chrome fails to clip correctly after
 * several transitions → images appear to disappear.
 *
 * Fix: overflow: visible on .swiper-slide (so no clipping of child layer)
 *      + NO will-change on the child (no separate compositor layer needed,
 *        Chrome auto-promotes transform/opacity transitions anyway).
 */
.product-gallery-coverflow .js-swiper-product .swiper-slide {
    overflow: visible !important;
    border-radius: 16px;
}

.product-gallery-coverflow .js-swiper-product .swiper-slide .js-product-slide-link {
    transition: transform 0.45s cubic-bezier(0.23,1,0.32,1),
                opacity 0.45s ease,
                box-shadow 0.45s ease;
    transform: scale(0.88);
    opacity: 0.62;
    border-radius: 16px;
    overflow: hidden;
    /* NO will-change here — avoids nested GPU compositor layer bug */
    display: block;
}

.product-gallery-coverflow .js-swiper-product .swiper-slide-active .js-product-slide-link {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 16px 48px rgba(0,0,0,0.13);
}

/* Thumbs strip */
.product-thumbs-strip {
    position: relative;
    padding: 0 8px;
    margin-top: 4px;
}

.product-thumbs-strip .js-swiper-product-thumbs {
    overflow: hidden;
}

.product-thumbs-strip .swiper-slide {
    width: auto !important;
}

/* Hide unnecessary arrows everywhere */
.product-thumb-nav,
.js-swiper-product-thumbs-prev,
.js-swiper-product-thumbs-next,
.js-swiper-product-prev,
.js-swiper-product-next {
    display: none !important;
}

/* Mobile: peek effect — overflow visible so side slides peek in */
@media (max-width: 767px) {
    .product-gallery-coverflow .js-swiper-product {
        overflow: visible !important;
        padding: 6px 9% 8px !important;
        margin-bottom: 6px !important; /* override Bootstrap mb-3 (16px) */
    }
    .product-gallery-coverflow .js-swiper-product .swiper-slide .js-product-slide-link {
        transform: scale(0.86);
        opacity: 0.52;
    }
    .product-gallery-coverflow .js-swiper-product .swiper-slide-active .js-product-slide-link {
        transform: scale(1);
        opacity: 1;
    }
    .product-thumbs-strip {
        margin-top: 0;
        padding: 0 4px;
    }

    /* V83: Centraliza galeria — neutraliza o margin -15px do .row Bootstrap
       e restaura padding simétrico no .col-12 (que perdeu padding com a regra
       padding:0 da linha ~3312). Precisa estar AQUI (depois da 3312) pra vencer. */
    .product-gallery-coverflow {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #single-product .product-image-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 8px !important;
    }
}

/* --- CATEGORY REVAMP (V16) --- */
.category-banner {
    position: relative;
}
.category-banner-info {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 2em;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: -40px auto 40px auto !important; /* Cria um charmoso overlap por cima da imagem original */
    z-index: 2;
    position: relative;
    color: var(--text);
}
.category-banner h1, .category-banner-info h2, .category-banner-info h3 {
    font-family: "Syne", sans-serif !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    text-shadow: none !important;
    margin-bottom: 0.5em !important;
}
.item-product {
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease, background 0.35s !important;
    border-radius: 20px;
    padding: 10px 10px 16px 10px;
    background: rgba(255, 255, 255, 0.3); /* Base muito suave do glass */
}
.item-product:hover {
    transform: translateY(-8px) !important;
    box-shadow:
        0 4px 16px rgba(91, 69, 255, 0.07),
        0 16px 40px rgba(0, 0, 0, 0.10),
        0 32px 64px rgba(0, 0, 0, 0.07) !important;
    background: rgba(255, 255, 255, 0.90) !important;
}
.item-product .item-image {
    border-radius: 16px;
    overflow: hidden;
}
.item-actions .btn {
    transition: all 0.3s ease !important;
    border-radius: 14px !important;
}
.item-actions .btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 24px rgba(91, 69, 255, 0.16) !important;
}
.label.label-primary, .item-product .label {
    background: rgba(91, 69, 255, 0.12) !important;
    backdrop-filter: blur(8px);
    color: var(--accent) !important;
    border: 1px solid rgba(91, 69, 255, 0.25);
    font-weight: 600;
}

/* FIX EXTREMO ESPAÇAMENTO CATEGORIAS/BUSCA (V18) */
.template-category .page-header, .template-search .page-header,
.template-category .category-controls-container, .template-search .category-controls-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}
.template-category section, .template-search section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}
.template-category .category-controls, .template-search .category-controls {
    margin-top: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.template-category .page-header h1, .template-search .page-header h1,
.template-search .page-header h2, .template-search h2.h3 {
    margin-bottom: 5px !important;
    margin-top: 5px !important;
    line-height: 1.1 !important;
}
.template-category .category-body, .template-search .category-body {
    margin-top: 10px !important;
    padding-top: 20px !important;
    padding-bottom: 80px !important;
}
.js-category-controls-prev {
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
}

/* --- PREMIUM SIDECART, SIDEBAR & REFINEMENTS (V19) --- */

/* 1. Sidebar Categories: Transformando Links em Pills Interativas */
.template-category .js-accordion-container li,
.template-search .js-accordion-container li {
    display: block !important;
}

.template-category .js-accordion-container li a.btn-link,
.template-search .js-accordion-container li a.btn-link {
    display: inline-block !important;
    padding: 8px 18px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(91, 69, 255, 0.12) !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-family: "DM Sans", sans-serif !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

.template-category .js-accordion-container li a.btn-link:hover,
.template-search .js-accordion-container li a.btn-link:hover {
    background: rgba(91, 69, 255, 0.08) !important;
    border-color: rgba(91, 69, 255, 0.25) !important;
    transform: translateX(4px) !important;
    color: var(--accent) !important;
    box-shadow: 0 4px 12px rgba(91, 69, 255, 0.08) !important;
}

/* 2. Ajustes de Tipografia Sidebar (Desktop) */
@media (min-width: 768px) {
    .template-category .page-header h1, .template-search .page-header h1 {
        font-size: clamp(38px, 5vw, 60px) !important;
        margin-top: 15px !important;
    }
}
.template-category #filters h4, .template-category #filters h5,
.template-search #filters h4, .template-search #filters h5 {
    font-family: "Syne", sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    margin-bottom: 20px !important;
}
.template-category .category-back {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
}
.template-category .category-back:hover {
    color: var(--accent) !important;
}

/* 3. Dropdowns Menu Principal - Efeito Glass e Fade In */
.js-desktop-nav-list ul, .js-nav-desktop-list .js-submenu {
    background: rgba(247, 245, 240, 0.85) !important;
    backdrop-filter: blur(18px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06) !important;
    animation: menuFadeSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes menuFadeSlide {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 4. Carrinho Lateral (Sidecart) e Paineis Modal Right Overlay */
#ajax-cart, .modal-right, .offcanvas {
    background: rgba(247, 245, 240, 0.75) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
}
#modal-cart,
#modal-cart.transition-slide,
#modal-cart.modal-right,
#modal-cart.offcanvas {
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s !important;
}
#modal-cart.modal-show {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.35s ease !important;
}
.cart-item {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px !important;
    transition: transform 0.2s !important;
}
.cart-item:hover {
    transform: translateY(-2px) !important;
}

/* 5. FIX: OVAL BUTTONS BOX / QUANTITY SELECTOR BUG (V25) */
.form-quantity .row, .form-quantity .form-row {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important; /* Tira margem negativa do bootstrap e nuvemshop */
}
.form-quantity .col, .form-quantity .form-control-container {
    padding: 0 !important;
    margin: 0 !important;
}
.form-quantity, #single-product .form-quantity {
    display: inline-flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 130px !important;
    border-radius: 999px !important; 
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.1)) !important;
    padding: 2px !important;
    background: var(--surface, #fff) !important;
    margin: 0 auto !important;
    overflow: hidden !important; 
}
.form-quantity .form-quantity-icon, .form-quantity .btn,
#single-product .form-quantity .form-quantity-icon, #single-product .form-quantity .btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.form-quantity input.js-quantity-input, .form-quantity input.js-cart-quantity-input,
#single-product .form-quantity input[type="number"], #single-product .form-quantity input[type="text"] {
    width: 25px !important;
    min-width: 0 !important;
    max-width: 40px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    font-weight: 600 !important;
}
.form-quantity .btn:hover, #single-product .form-quantity .btn:hover {
    background: rgba(0,0,0,0.05) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* --- V24: SUBTLE GLASSMORPHISM & TILT PARALLAX --- */

/* 1. Botões de Compra c/ Glass Leve Subtil (Desktop e Mobile) */
.btn-primary, .btn-primary:focus, .btn-primary:active,
input[type="submit"].btn-primary, button.btn-primary,
.js-addtocart,
#single-product .btn-primary, #single-product .btn-primary:focus, #single-product .btn-primary:active,
#single-product input[type="submit"].btn-primary, #single-product button.btn-primary,
#single-product .js-addtocart {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: rgba(91, 69, 255, 1) !important;
    text-shadow: none !important;
    font-family: "Syne", sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 999px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 16px rgba(91, 69, 255, 0.08), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-primary:hover, .js-addtocart:hover,
#single-product .btn-primary:hover, #single-product .js-addtocart:hover {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 24px rgba(91, 69, 255, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-2px) !important;
    color: rgba(60, 40, 220, 1) !important;
}

.btn-primary:active, .js-addtocart:active,
#single-product .btn-primary:active, #single-product .js-addtocart:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 8px rgba(91, 69, 255, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;
}

/* Brilho dinamico ao focar */
.btn-primary::after, .js-addtocart::after,
#single-product .btn-primary::after, #single-product .js-addtocart::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%) !important;
    transform: skewX(-20deg) !important;
    transition: none !important;
}
.btn-primary:hover::after, .js-addtocart:hover::after,
#single-product .btn-primary:hover::after, #single-product .js-addtocart:hover::after {
    left: 150% !important;
    transition: left 0.6s ease-in-out !important;
}

/* 2. Cards - zoom simples e seguro (sem tilt, sem touch-action) */
/* Esconde imagens secundarias e controles de slider */
.item-product .item-image-secondary,
.item-product .item-more-images-message,
.item-product .item-slider-pagination-container,
.item-product .item-slider-controls-container {
    display: none !important;
    opacity: 0 !important;
}
/* Garante que apenas o primeiro slide seja visivel */
.item-product .item-image-slide:not(:first-child) {
    display: none !important;
}
.item-product .item-image {
    overflow: hidden !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    position: relative !important;
}
.item-product .item-image img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center !important;
    will-change: transform !important;
    pointer-events: none !important;
}
/* Zoom ao hover apenas (desktop) - sem tilt 3D */
@media (hover: hover) {
    .item-product:hover .item-image img {
        transform: scale(1.07) !important;
    }
}

/* 3. Estilização Premium do Carrossel de Miniaturas (Figurinhas Produto) */
.swiper-product-thumb {
    padding: 10px 5px !important;
}
.product-thumb {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    transition: opacity 0.3s ease, box-shadow 0.3s ease !important;
    opacity: 0.55 !important;
    border: none !important;
    /* Sem scale aqui - evita falso zoom em iOS ao carregar */
}
.product-thumb::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
    border: 2px solid transparent !important;
    box-sizing: border-box !important;
    transition: inherit !important;
    pointer-events: none !important;
}
.product-thumb img {
    /* V73: força a imagem a preencher o card e centralizar via object-fit.
       Antes o tema usava top:0 + translateX(-50%) (só centro X),
       e a V72 tentou translate(-50%,-50%) que empurrou as imagens pra fora do card.
       Agora o posicionamento é absoluto total + object-fit: contain. */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 12px !important;
    transition: transform 0.5s ease !important;
    transform: none !important;
}
@media (hover: hover) {
    .product-thumb:hover {
        opacity: 0.85 !important;
    }
    .product-thumb:hover img {
        transform: scale(1.04) !important;
    }
}
/* Estado Selecionado (Anel Brilhante Premium) */
.product-thumb.selected {
    opacity: 1 !important;
    box-shadow: 0 8px 16px rgba(91, 69, 255, 0.15) !important;
}
.product-thumb.selected::after {
    border: 2px solid rgba(91, 69, 255, 1) !important; /* Roxo principal */
    box-shadow: inset 0 0 0 2px rgba(255,255,255,1) !important; /* Anel interno branco Apple style */
}
.product-thumb.selected img {
    transform: scale(1.05) !important;
}

/* Product cards: keep product image static on hover sitewide */
.item-product .item-image-featured,
.js-item-info-container.item:hover .item-image-featured,
.js-item-info-container.item:focus .item-image-featured {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
}

.item-product .item-image-secondary,
.js-item-info-container.item:hover .item-image-secondary,
.js-item-info-container.item:focus .item-image-secondary {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    left: auto !important;
}

@media (hover: hover) {
    .item-product:hover .item-image img {
        transform: none !important;
    }
}

/* Category/search cards: keep product image static on hover */
.template-category .item-product .item-image-featured,
.template-search .item-product .item-image-featured,
.template-category .js-item-info-container.item:hover .item-image-featured,
.template-search .js-item-info-container.item:hover .item-image-featured {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
}

.template-category .item-product .item-image-secondary,
.template-search .item-product .item-image-secondary,
.template-category .js-item-info-container.item:hover .item-image-secondary,
.template-search .js-item-info-container.item:hover .item-image-secondary {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    left: auto !important;
}

@media (hover: hover) {
    .template-category .item-product:hover .item-image img,
    .template-search .item-product:hover .item-image img {
        transform: none !important;
    }
}

/* Home featured sliders: preserve hover lift + shadow without clipping */
section[data-store^="home-products-"] .js-swiper-featured,
section[data-store^="home-products-"] .js-swiper-new,
section[data-store^="home-products-"] .js-swiper-sale,
section[data-store^="home-products-"] .swiper-container {
    overflow: hidden !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
}

/* Home featured grid container comes with pr-0 on slider mode; restore right gutter */
section[data-store^="home-products-"] .js-products-featured-grid-container,
section[data-store^="home-products-"] .js-products-new-grid-container,
section[data-store^="home-products-"] .js-products-sale-grid-container {
    padding-right: 15px !important;
}

section[data-store^="home-products-"] .swiper-wrapper,
section[data-store^="home-products-"] .swiper-slide {
    overflow: visible !important;
}

section[data-store^="home-products-"] .js-products-home-grid.swiper-wrapper {
    padding-top: 14px !important;
    padding-bottom: 34px !important;
}

@media (max-width: 767px) {
    section[data-store^="home-products-"] .js-swiper-featured,
    section[data-store^="home-products-"] .js-swiper-new,
    section[data-store^="home-products-"] .js-swiper-sale,
    section[data-store^="home-products-"] .swiper-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    section[data-store^="home-products-"] .js-products-featured-grid-container,
    section[data-store^="home-products-"] .js-products-new-grid-container,
    section[data-store^="home-products-"] .js-products-sale-grid-container {
        padding-right: 12px !important;
    }

    section[data-store^="home-products-"] .js-products-home-grid.swiper-wrapper {
        padding-bottom: 28px !important;
    }
}

/* Home featured cards: softer hover so shadows don't hit section edges */
section[data-store^="home-products-"] .item-product:hover {
    transform: translateY(-5px) !important;
    box-shadow:
        0 2px 10px rgba(91, 69, 255, 0.05),
        0 10px 24px rgba(0, 0, 0, 0.08),
        0 18px 36px rgba(0, 0, 0, 0.05) !important;
}

/* Product page: inline CEP estimator above CTA */
#product_form #product-shipping-container.product-shipping-calculator--inline {
    margin-bottom: 14px !important;
    padding: 12px 14px 6px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

#product_form #product-shipping-container.product-shipping-calculator--inline .js-toggle-shipping > .js-accordion-toggle {
    display: none !important;
}

#product_form #product-shipping-container.product-shipping-calculator--inline .js-toggle-shipping > .js-accordion-content {
    display: block !important;
}

#product_form #product-shipping-container.product-shipping-calculator--inline .js-shipping-calculator-head {
    min-height: 0 !important;
    margin-top: 0 !important;
}

#product_form #product-shipping-container.product-shipping-calculator--inline .js-shipping-calculator-with-zipcode {
    display: none !important;
}

#product_form #product-shipping-container.product-shipping-calculator--inline .js-shipping-calculator-form {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    margin-top: 0 !important;
}

#product_form #product-shipping-container.product-shipping-calculator--inline .js-shipping-input {
    border-radius: 999px !important;
}

#product_form #product-shipping-container.product-shipping-calculator--inline .js-calculate-shipping {
    border-radius: 999px !important;
    min-width: 58px !important;
}

#product_form #product-shipping-container.product-shipping-calculator--inline .js-shipping-calculator-response {
    margin-top: 8px !important;
}

/* Product page: buy button with same pill feel as "Alterar CEP" (color-adjusted) */
#single-product #product_form input.js-addtocart.js-prod-submit-form.btn.btn-primary,
#single-product #product_form input.js-addtocart.btn-primary,
#single-product #product_form .btn-primary[data-store="product-buy-button"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 241, 255, 0.95) 100%) !important;
    background-color: rgba(250, 249, 255, 0.96) !important;
    border: 1.5px solid rgba(91, 69, 255, 0.24) !important;
    border-bottom-color: rgba(91, 69, 255, 0.34) !important;
    color: #5b45ff !important;
    -webkit-text-fill-color: #5b45ff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 2px 10px rgba(91, 69, 255, 0.10) !important;
    border-radius: 999px !important;
    height: 54px !important;
    will-change: transform, box-shadow !important;
    transition: transform 0.16s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out, background-color 0.2s ease-out !important;
}

#single-product #product_form input.js-addtocart.js-prod-submit-form.btn.btn-primary:hover,
#single-product #product_form input.js-addtocart.btn-primary:hover,
#single-product #product_form .btn-primary[data-store="product-buy-button"]:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(241, 237, 255, 0.98) 100%) !important;
    border-color: rgba(91, 69, 255, 0.40) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 5px 14px rgba(91, 69, 255, 0.16) !important;
}

@media (hover: hover) and (pointer: fine) {
    #single-product #product_form input.js-addtocart.js-prod-submit-form.btn.btn-primary:hover,
    #single-product #product_form input.js-addtocart.btn-primary:hover,
    #single-product #product_form .btn-primary[data-store="product-buy-button"]:hover {
        transform: translateY(-1px) !important;
    }
}

#single-product #product_form input.js-addtocart.js-prod-submit-form.btn.btn-primary:active,
#single-product #product_form input.js-addtocart.btn-primary:active,
#single-product #product_form .btn-primary[data-store="product-buy-button"]:active {
    transform: translateY(0) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 2px 8px rgba(91, 69, 255, 0.12) !important;
}

/* Product page: smoother add-to-cart placeholder state to avoid "truncated" click feel */
#single-product #product_form .js-addtocart-placeholder.btn-transition {
    transition: none !important;
    transform: none !important;
}

#single-product #product_form .js-addtocart-placeholder.btn-transition .transition-container {
    transition: opacity 0.16s ease-out !important;
}

#single-product #product_form input.js-addtocart[disabled],
#single-product #product_form .js-addtocart-placeholder.disabled {
    transform: none !important;
    animation: none !important;
}