/*
 * AREA SHOP - Fastyshop V8 (pagina Vitrine / Catalogo)
 * ------------------------------------------------------------------
 * Mesma arquitetura da area Busca: grade 100% limpa e rapida, sem
 * nenhum residuo do tema. So e enfileirado quando a area "Vitrine"
 * e ativada no painel E a pagina e arquivo de loja/taxonomia.
 *
 * GUILHOTINA: todas as regras carregam !important e escopo proprio
 * (v8sf-shop-*) para vencer qualquer tema, igual ao header.
 */

/* Página da vitrine */
.v8sf-shop-page {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 12px 16px 64px !important;
}

/* Mobile: laterais padronizadas em 10px */
@media (max-width: 768px) {
	.v8sf-shop-page {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* ---------------------------------------------------------------
   GUILHOTINA x TEMA (camada 1): o tema não invade a vitrine V8.
   O buffer já remove page-header e sidebar do HTML; estas regras
   garantem o layout mesmo se o tema mudar a estrutura.
   --------------------------------------------------------------- */
.fastyshop-v8-shop {
	overflow-x: clip !important; /* evita scroll horizontal do banner full (100vw) */
}

.fastyshop-v8-shop .page-header,
.fastyshop-v8-shop .site-breadcrumb,
.fastyshop-v8-shop .breadcrumb,
.fastyshop-v8-shop .woocommerce-breadcrumb,
.fastyshop-v8-shop .woocommerce-result-count,
.fastyshop-v8-shop .woocommerce-ordering,
.fastyshop-v8-shop .shop-toolbar,
.fastyshop-v8-shop .razzi-toolbar,
.fastyshop-v8-shop .shop-loop-header {
	display: none !important;
}

.fastyshop-v8-shop .widget-area,
.fastyshop-v8-shop .primary-sidebar,
.fastyshop-v8-shop .blog-sidebar {
	display: none !important;
}

.fastyshop-v8-shop .site-content,
.fastyshop-v8-shop .site-content .container,
.fastyshop-v8-shop .razzi-container,
.fastyshop-v8-shop .razzi-container-wide,
.fastyshop-v8-shop .container {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Neutraliza o padding-top que o tema aplica na página de catálogo
   (.razzi-catalog-page .site-content) — a margem vem só da própria
   página V8. */
.fastyshop-v8-shop .site-content,
.fastyshop-v8-shop.razzi-catalog-page .site-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
}

.fastyshop-v8-shop .v8sf-shop-page {
	flex: 1 1 auto !important;
	width: 100% !important;
}

.v8sf-shop-page-head {
	margin-bottom: 28px !important;
}

.v8sf-shop-page-eyebrow {
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	color: var(--text-muted, #6B7280) !important;
	margin-bottom: 6px !important;
}

.v8sf-shop-page-title {
	font-size: 28px !important;
	font-weight: 800 !important;
	color: var(--text-main, #111827) !important;
	line-height: 1.2 !important;
	margin: 0 0 6px !important;
	/* FASE 8 — clamp transversal: título principal da vitrine em até
	   2 linhas com reticências. */
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	overflow: hidden !important;
}

/* X ao lado do título: desliga a seleção e volta ao padrão da loja */
.v8sf-shop-clear-all {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	margin-left: 10px !important;
	padding: 0 !important;
	border: 1.5px solid var(--border, #E5E7EB) !important;
	border-radius: 50% !important;
	background: #FFFFFF !important;
	color: var(--text-muted, #6B7280) !important;
	vertical-align: middle !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
}

.v8sf-shop-clear-all:hover {
	border-color: var(--danger, #DC2626) !important;
	color: var(--danger, #DC2626) !important;
	background: #FEF2F2 !important;
	transform: scale(1.08) !important;
}

.v8sf-shop-page-count {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--text-muted, #6B7280) !important;
	margin: 0 !important;
}

/* Grade de produtos */
.v8sf-shop-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--v8sf-shop-cols, 4), 1fr) !important;
	gap: 20px !important;
}

a.v8sf-shop-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	background: var(--surface, #FFFFFF) !important;
	border: 1px solid var(--border, #E5E7EB) !important;
	border-radius: 14px !important;
	padding: 12px !important;
	text-decoration: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

a.v8sf-shop-card:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.18) !important;
}

.v8sf-shop-card-thumb {
	display: block !important;
	width: 100% !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: #FAFAFA !important;
}

.v8sf-shop-card-thumb img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
}

.v8sf-shop-card-name {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--text-main, #111827) !important;
	line-height: 1.3 !important;
	/* FASE 3.2 — título SEMPRE com 2 linhas de altura e corta com reticências:
	   nomes longos (ex.: "Black Chic ...") deixavam cards de alturas
	   diferentes na mesma linha. */
	min-height: calc(2 * 1.3em) !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	overflow: hidden !important;
}

.v8sf-shop-card-price {
	font-size: 15px !important;
	font-weight: 800 !important;
	color: var(--success-dark, #059669) !important;
}

/* FASE 3.8 — segurança: filhos flex nunca estouram o card (o preço
   com del/ins/parcelas "vazava" para fora). min-width:0 deixa o flex
   encolher até o tamanho do card em vez de transbordar. */
a.v8sf-shop-card {
	min-width: 0 !important;
	max-width: 100% !important;
}

.v8sf-shop-card-name,
.v8sf-shop-card-price {
	min-width: 0 !important;
	max-width: 100% !important;
}

/* FASE 3.6 — DENSIDADE DOS CARDS (compacto / padrão / confortável) +
   FASE 3.8 — SUPER COMPACTO + título 1 linha / preço sem estourar.
   O hijacker põe a classe v8sf-shop-density-* no <body> conforme o
   painel; o padrão "normal" é o CSS base acima (sem overrides).
   Nos modos COMPACTOS o título NÃO quebra linha nem deixa buraco
   (o min-height de 2 linhas empurrava o preço e esticava o card):
   vira 1 linha com reticências e fonte reduzida para caber. */
body.v8sf-shop-density-compact .v8sf-shop-grid {
	gap: 12px !important;
}

body.v8sf-shop-density-compact a.v8sf-shop-card {
	gap: 8px !important;
	padding: 8px !important;
	border-radius: 12px !important;
}

body.v8sf-shop-density-compact .v8sf-shop-card-name {
	font-size: 12px !important;
	line-height: 1.2 !important;
	min-height: auto !important;
	display: block !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

body.v8sf-shop-density-compact .v8sf-shop-card-price {
	font-size: 13px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* SUPER COMPACTO — o máximo de produtos por tela: grade grudada
   (gap 5px), card com padding mínimo e título/preço ainda menores.
   O gap do card é ZERADO (não pode ir para todo o card): o espaço
   passa a ser pontual — 8px entre a foto e o título e 2px APENAS
   entre o título e o preço (o "buracão" não volta). */
body.v8sf-shop-density-supercompact .v8sf-shop-grid {
	gap: 6px !important;
}

/* Especificidade (0,3,2) > regra mobile dos modos 3/4/5 (0,3,1):
   o super compacto agora VENCE no grid de 3 colunas. */
body.v8sf-shop-density-supercompact .v8sf-shop-page a.v8sf-shop-card {
	gap: 0 !important;
	padding: 7px !important;
	border-radius: 16px !important;
}

body.v8sf-shop-density-supercompact a.v8sf-shop-card .v8sf-shop-card-name {
	margin-top: 8px !important;
}

body.v8sf-shop-density-supercompact .v8sf-shop-card-price {
	margin-top: 2px !important;
	padding-bottom: 6px !important;
}

body.v8sf-shop-density-supercompact .v8sf-shop-card-name {
	font-size: 11px !important;
	line-height: 1.2 !important;
	min-height: auto !important;
	display: block !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

body.v8sf-shop-density-supercompact .v8sf-shop-card-price {
	font-size: 12px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

body.v8sf-shop-density-comfortable .v8sf-shop-grid {
	gap: 26px !important;
}

body.v8sf-shop-density-comfortable a.v8sf-shop-card {
	gap: 12px !important;
	padding: 16px !important;
}

body.v8sf-shop-density-comfortable .v8sf-shop-card-name {
	font-size: 15px !important;
}

body.v8sf-shop-density-comfortable .v8sf-shop-card-price {
	font-size: 16px !important;
}

/* Estados */
.v8sf-shop-empty {
	text-align: center !important;
	padding: 48px 16px !important;
	color: var(--text-muted, #6B7280) !important;
}

.v8sf-shop-empty p {
	font-size: 16px !important;
	font-weight: 600 !important;
	margin: 0 0 16px !important;
}

a.v8sf-shop-empty-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 20px !important;
	border-radius: 12px !important;
	background: var(--v8sf-hdr-primary, #10B981) !important;
	color: #FFFFFF !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	text-decoration: none !important;
}

.v8sf-shop-pagination {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 28px 0 0 !important;
	margin: 0 !important;
}

.v8sf-shop-pagination a.page-numbers,
.v8sf-shop-pagination span.page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 38px !important;
	height: 38px !important;
	padding: 0 12px !important;
	border: 1px solid var(--border, #E5E7EB) !important;
	border-radius: 10px !important;
	background: var(--surface, #FFFFFF) !important;
	color: var(--text-main, #111827) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	white-space: nowrap !important;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.v8sf-shop-pagination a.page-numbers:hover {
	background: var(--v8sf-hdr-primary, #10B981) !important;
	border-color: var(--v8sf-hdr-primary, #10B981) !important;
	color: #FFFFFF !important;
	box-shadow: 0 6px 14px -4px rgba(16, 185, 129, 0.4) !important;
}

.v8sf-shop-pagination span.page-numbers.current {
	background: var(--v8sf-hdr-primary, #10B981) !important;
	border-color: var(--v8sf-hdr-primary, #10B981) !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.5) !important;
}

/* Responsivo: colunas por tamanho de tela (modo padrão, sem classe).
   Mobile alterna 2 ↔ 3; desktop segue a base do painel (shp_columns). */
@media (max-width: 1024px) {
	.v8sf-shop-grid {
		--v8sf-shop-cols: 3 !important;
	}
}

@media (max-width: 768px) {
	.v8sf-shop-grid {
		--v8sf-shop-cols: 2 !important;
	}
}

@media (max-width: 480px) {
	.v8sf-shop-grid {
		--v8sf-shop-cols: 2 !important;
		gap: 12px !important;
	}

	/* Novo padrão mobile = 2 colunas (decisão do cliente): a densidade
	   supercompact já não força 3 no celular — evita o flash "carrega 3
	   e redesenha para 2" (o usuário ainda pode escolher 3/híbrido). */
	body.v8sf-shop-density-supercompact .v8sf-shop-grid {
		--v8sf-shop-cols: 2 !important;
		gap: 6px !important;
	}

	.v8sf-shop-page-title {
		font-size: 22px !important;
	}
}

/* ==================================================================
   1 · HERO BANNER — carrossel de imagens (espaço do padrão app)
   ================================================================== */
.v8sf-shop-hero {
	position: relative !important;
	margin: 0 0 28px !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	background: #EEF2F5 !important;
	min-height: 220px !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

/* O TRILHO TRANSLADA (translateX) — o carrossel clássico que funciona
   em qualquer navegador: os slides ficam lado a lado e o trilho desliza
   a imagem ativa para dentro da área visível. Sem opacity/scale. */
.v8sf-shop-hero-track {
	display: flex !important;
	align-items: stretch !important;
	transition: transform 0.5s ease !important;
	will-change: transform !important;
}

.v8sf-shop-hero-slide {
	flex: 0 0 100% !important;
	min-width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.v8sf-shop-hero-media {
	display: block !important;
	width: 100% !important;
}

/* Imagem SEM CROP: proporção natural do arquivo. */
.v8sf-shop-hero-media img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	border-radius: 0 !important; /* o tema (.img) não arredonda o banner */
}

/* Setas do hero (desktop) */
.v8sf-shop-hero-arrow {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 3 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: var(--text-main, #111827) !important;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.25) !important;
	cursor: pointer !important;
	transition: background 0.2s ease, transform 0.2s ease !important;
}

.v8sf-shop-hero-arrow:hover {
	background: #FFFFFF !important;
	transform: translateY(-50%) scale(1.06) !important;
}

.v8sf-shop-hero-arrow.is-prev { left: 14px !important; }
.v8sf-shop-hero-arrow.is-next { right: 14px !important; }

/* Pontos (dots) */
.v8sf-shop-hero-dots {
	position: absolute !important;
	left: 50% !important;
	bottom: 12px !important;
	transform: translateX(-50%) !important;
	z-index: 3 !important;
	display: flex !important;
	gap: 7px !important;
}

.v8sf-shop-hero-dot {
	width: 8px !important;
	height: 8px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.6) !important;
	cursor: pointer !important;
	transition: width 0.25s ease, background 0.25s ease !important;
}

.v8sf-shop-hero-dot.is-active {
	width: 22px !important;
	background: #FFFFFF !important;
}

/* Placeholder: espaço reservado até os slides entrarem no painel */
.v8sf-shop-hero-placeholder {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	color: var(--text-muted, #6B7280) !important;
	background: linear-gradient(135deg, #F3F6F8 0%, #E8EDF1 100%) !important;
}

.v8sf-shop-hero-placeholder svg { opacity: 0.55 !important; }

.v8sf-shop-hero-placeholder span {
	font-size: 13px !important;
	font-weight: 600 !important;
	text-align: center !important;
	padding: 0 20px !important;
}

/* Mobile: hero com proporção natural da imagem (sem crop). */
@media (max-width: 768px) {
	.v8sf-shop-hero {
		border-radius: 16px !important;
		margin-bottom: 20px !important;
		min-height: 0 !important;
	}

	.v8sf-shop-hero-arrow { display: none !important; }
}

/* ==================================================================
   2 · CARROSSEL DE CATEGORIAS
   ================================================================== */
.v8sf-shop-cats {
	margin: 0 0 28px !important;
}

.v8sf-shop-cats-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 14px !important;
}

.v8sf-shop-cats-title {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--text-main, #111827) !important;
	margin: 0 !important;
	/* FASE 8 — clamp transversal: seção em 1 linha com reticências. */
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.v8sf-shop-cats-arrows {
	display: flex !important;
	gap: 8px !important;
}

.v8sf-shop-cats-arrow {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	border: 1px solid var(--border, #E5E7EB) !important;
	border-radius: 10px !important;
	background: var(--surface, #FFFFFF) !important;
	color: var(--text-main, #111827) !important;
	cursor: pointer !important;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
}

.v8sf-shop-cats-arrow:hover:not(:disabled) {
	background: var(--v8sf-hdr-primary, #10B981) !important;
	border-color: var(--v8sf-hdr-primary, #10B981) !important;
	color: #FFFFFF !important;
}

.v8sf-shop-cats-arrow:disabled {
	opacity: 0.35 !important;
	cursor: default !important;
}

.v8sf-shop-cats-track {
	display: flex !important;
	align-items: flex-start !important; /* cards nunca esticam verticalmente —
		o track é scroll container (overflow-x: auto → overflow-y: auto) e o
		stretch podia cortar o topo dos círculos no recorte vertical */
	gap: 14px !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
	/* Folga para o card SELECIONADO (scale 1.1) em todas as bordas:
	   no desktop o círculo cresce ~8px para cima e para os lados —
	   sem esta folga o topo e o 1º/último card voltam a cortar. */
	padding-top: 10px !important;
	padding-bottom: 8px !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
}

.v8sf-shop-cats-track::-webkit-scrollbar { display: none !important; }

/* Arrasto com mouse (desktop): cursor de pegar + proteção contra o
   arrasto nativo das imagens (que sequestraria o drag do carrossel). */
.v8sf-shop-cats-track,
.v8sf-shop-hero {
	cursor: grab !important;
}

.v8sf-shop-cats-track.is-dragging,
.v8sf-shop-hero.is-dragging {
	cursor: grabbing !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

.v8sf-shop-cats-track img,
.v8sf-shop-hero img {
	-webkit-user-drag: none !important;
	user-select: none !important;
	pointer-events: none !important;
}

a.v8sf-shop-cat {
	flex: 0 0 auto !important;
	width: 96px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	scroll-snap-align: start !important;
	text-decoration: none !important;
}

.v8sf-shop-cat-thumb {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 96px !important;
	height: 96px !important;
	border-radius: 50% !important;
	/* Contorno "stories" (padrão do Instagram): anel FINO de 2px com o
	   gradiente; o gradiente existe SÓ no anel externo. */
	padding: 2px !important;
	background: conic-gradient(from 210deg, #FFD200 0deg, #FF6B00 70deg, #FF2D87 160deg, #A855F7 260deg, #FFD200 360deg) !important;
	border: none !important;
	box-shadow: none !important;
	transition: transform 0.25s ease, box-shadow 0.3s ease !important;
}

/* Foto: fundo BRANCO enquanto carrega + contorno branco GROSSO (3px)
   entre a foto e o anel do gradiente — a moldura do stories real. */
.v8sf-shop-cat-thumb img,
.v8sf-shop-cat-fallback {
	border-radius: 50% !important;
	border: 3px solid #FFFFFF !important;
	background: #FFFFFF !important;
}

/* Hover: o anel convida ao clique (cresce levemente, pelo CENTRO —
   o card permanece centrado na própria posição, sem deslocar a linha). */
a.v8sf-shop-cat:hover .v8sf-shop-cat-thumb {
	transform: scale(1.06) !important;
	transform-origin: center center !important;
}

/* Card SELECIONADO: anel com o gradiente VERDE da marca + 10% maior
   (destaque extra, crescimento SIMÉTRICO pelo centro — o card fica
   selecionado no próprio centro, sem afastar nem encostar no vizinho)
   + brilho suave pulsando. As folgas do track (padding) protegem as
   bordas do corte. */
a.v8sf-shop-cat.is-active .v8sf-shop-cat-thumb {
	transform: scale(1.1) !important;
	transform-origin: center center !important;
	background: linear-gradient(135deg, #10B981 0%, #34D399 50%, #059669 100%) !important;
	animation: v8sf-story-pulse 2.4s ease-in-out infinite !important;
}

@keyframes v8sf-story-pulse {
	0%, 100% {
		box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18), 0 0 12px 1px rgba(16, 185, 129, 0.22) !important;
	}
	50% {
		box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.1), 0 0 22px 4px rgba(16, 185, 129, 0.32) !important;
	}
}

.v8sf-shop-cat-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	/* Fotos em retrato (570x713): ancorar pelo TOPO evita o corte
	   superior — a imagem não "desce" dentro do círculo. */
	object-position: center top !important;
}

.v8sf-shop-cat-fallback {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	color: var(--v8sf-hdr-primary, #10B981) !important;
	/* Fundo SÓLIDO (sem gradiente) — verde claro suave do design system */
	background: #F0FDF9 !important;
}

.v8sf-shop-cat-name {
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: var(--text-main, #111827) !important;
	text-align: center !important;
	line-height: 1.25 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.v8sf-shop-cat-count {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--text-muted, #6B7280) !important;
}

/* ==================================================================
   3 · TOOLBAR: Filtrar (esquerda) · Modos de exibição (direita)
   ================================================================== */
.v8sf-shop-toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: 0 0 22px !important;
	padding: 12px 14px !important;
	background: var(--surface, #FFFFFF) !important;
	border: 1px solid var(--border, #E5E7EB) !important;
	border-radius: 14px !important;
}

/* 3 zonas da barra: Filtrar (esquerda) · Atualizar+modos (centro) · Ajuda */
.v8sf-shop-toolbar-left,
.v8sf-shop-toolbar-right {
	display: flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
}

.v8sf-shop-toolbar-center {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	justify-content: center !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

/* Botão Atualizar (produtos aleatórios) — ícone circular com setas */
.v8sf-shop-shuffle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border: 1.5px solid var(--border, #E5E7EB) !important;
	border-radius: 10px !important;
	background: #FFFFFF !important;
	color: var(--text-main, #111827) !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
}

.v8sf-shop-shuffle:hover {
	border-color: var(--v8sf-hdr-primary, #10B981) !important;
	color: var(--v8sf-hdr-primary, #10B981) !important;
	background: #F0FDF9 !important;
}

.v8sf-shop-shuffle.is-spinning svg {
	animation: v8sf-spin 0.6s ease !important;
}

@keyframes v8sf-spin {
	to { transform: rotate(360deg); }
}

/* Botão Ajuda — texto à ESQUERDA do ícone */
.v8sf-shop-help {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	height: 38px !important;
	padding: 0 14px !important;
	border: 1.5px solid var(--border, #E5E7EB) !important;
	border-radius: 10px !important;
	background: #FFFFFF !important;
	color: var(--text-main, #111827) !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
}

.v8sf-shop-help:hover {
	border-color: var(--v8sf-hdr-primary, #10B981) !important;
	color: var(--v8sf-hdr-primary, #10B981) !important;
	background: #F0FDF9 !important;
}

/* POPUP DE AJUDA */
.v8sf-shop-help-pop {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9990 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}

.v8sf-shop-help-pop[hidden] {
	display: none !important;
}

.v8sf-shop-help-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(17, 24, 39, 0.5) !important;
	animation: v8sf-fade-in 0.25s ease !important;
}

@keyframes v8sf-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.v8sf-shop-help-card {
	position: relative !important;
	width: 100% !important;
	max-width: 340px !important;
	max-height: 82vh !important; /* não estoura telas baixas (mobile) */
	overflow-y: auto !important;
	background: #FFFFFF !important;
	border-radius: 18px !important;
	padding: 22px !important;
	box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.35) !important;
	animation: v8sf-pop-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes v8sf-pop-in {
	from { opacity: 0; transform: translateY(14px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.v8sf-shop-help-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #F1F3F5 !important;
	color: var(--text-muted, #6B7280) !important;
	cursor: pointer !important;
	transition: background 0.2s ease, color 0.2s ease !important;
}

.v8sf-shop-help-close:hover {
	background: #E5E7EB !important;
	color: var(--text-main, #111827) !important;
}

.v8sf-shop-help-title {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--text-main, #111827) !important;
	margin: 0 0 16px !important;
	padding-right: 30px !important;
	/* FASE 8 — clamp transversal: 1 linha com reticências. */
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

a.v8sf-shop-help-item {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	margin-bottom: 8px !important;
	border: 1px solid var(--border, #E5E7EB) !important;
	border-radius: 12px !important;
	background: #F9FAFB !important;
	text-decoration: none !important;
	color: var(--text-main, #111827) !important;
	transition: border-color 0.2s ease, background 0.2s ease !important;
}

a.v8sf-shop-help-item:last-child {
	margin-bottom: 0 !important;
}

a.v8sf-shop-help-item:hover {
	border-color: var(--v8sf-hdr-primary, #10B981) !important;
	background: #F0FDF9 !important;
}

.v8sf-shop-help-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 10px !important;
	background: #FFFFFF !important;
	border: 1px solid var(--border, #E5E7EB) !important;
	color: var(--v8sf-hdr-primary, #10B981) !important;
	flex-shrink: 0 !important;
}

.v8sf-shop-help-icon svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
	display: block !important;
}

.v8sf-shop-help-text {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

/* Ritmo tipográfico fixo: as duas linhas (título + subtítulo) ficam
   alinhadas e simétricas em qualquer item. RESET COMPLETO — o tema
   injeta um <style> inline com `small { margin-left:12px; padding:6px;
   background:#FFF; ... }` que desalinhava o subtítulo. */
.v8sf-shop-help-text strong,
.v8sf-shop-help-text small {
	display: block !important;
	line-height: 1.3 !important;
	text-align: left !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	font-style: normal !important;
}

.v8sf-shop-help-text strong {
	font-size: 14px !important;
	font-weight: 800 !important;
	color: var(--text-main, #111827) !important;
}

.v8sf-shop-help-text small {
	font-size: 11.5px !important;
	font-weight: 500 !important;
	color: var(--text-muted, #6B7280) !important;
	margin-top: 2px !important;
}

.v8sf-shop-help-arrow {
	color: var(--text-muted, #6B7280) !important;
	flex-shrink: 0 !important;
}

/* ÁREA DE SELEÇÃO — tags em linha PRÓPRIA, abaixo da contagem.
   A contagem é do bloco do título (linha estável); as tags são uma área
   de ação separada — nunca disputam a mesma linha. Mesmo eixo do título
   (esquerda no desktop, centralizado no mobile como unidade). */
.v8sf-shop-filterbar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 6px !important;
	margin-top: 12px !important;
}

/* Tag selecionada: pílula verde com X para remover */
.v8sf-shop-tag {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 5px 10px !important;
	border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
	border-radius: 999px !important;
	background: #F0FDF9 !important;
	color: var(--success-dark, #059669) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background 0.2s ease, border-color 0.2s ease !important;
}

.v8sf-shop-tag:hover {
	background: #ECFDF5 !important;
	border-color: var(--success, #10B981) !important;
}

.v8sf-shop-tag svg {
	color: inherit !important;
	opacity: 0.75 !important;
	flex-shrink: 0 !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.v8sf-shop-tag:hover svg {
	opacity: 1 !important;
	transform: scale(1.15) !important;
}

/* Cabeçalho como UNIDADE CENTRALIZADA em TODOS os viewports:
   eyebrow + título (+X) + contagem + tags no mesmo eixo central —
   o estado conversa igual no mobile e no desktop. */
.v8sf-shop-page-head {
	text-align: center !important;
}

.v8sf-shop-filterbar {
	justify-content: center !important;
}

/* POPUP DE FILTRO — multi-seleção de categorias */
.v8sf-shop-filter-pop {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9991 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}

.v8sf-shop-filter-pop[hidden] {
	display: none !important;
}

.v8sf-shop-filter-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(17, 24, 39, 0.5) !important;
	animation: v8sf-fade-in 0.25s ease !important;
}

.v8sf-shop-filter-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 440px !important;
	max-height: 82vh !important;
	background: #FFFFFF !important;
	border-radius: 18px !important;
	padding: 22px !important;
	box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.35) !important;
	animation: v8sf-pop-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.v8sf-shop-filter-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #F1F3F5 !important;
	color: var(--text-muted, #6B7280) !important;
	cursor: pointer !important;
	transition: background 0.2s ease, color 0.2s ease !important;
}

.v8sf-shop-filter-close:hover {
	background: #E5E7EB !important;
	color: var(--text-main, #111827) !important;
}

.v8sf-shop-filter-title {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--text-main, #111827) !important;
	margin: 0 0 14px !important;
	padding-right: 30px !important;
	/* FASE 8 — clamp transversal: 1 linha com reticências. */
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.v8sf-shop-filter-options {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	overflow-y: auto !important;
	padding: 2px !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
}

.v8sf-shop-filter-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 9px 14px !important;
	border: 1.5px solid var(--border, #E5E7EB) !important;
	border-radius: 999px !important;
	background: #FFFFFF !important;
	color: var(--text-main, #111827) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}

.v8sf-shop-filter-chip:hover {
	border-color: var(--v8sf-hdr-primary, #10B981) !important;
}

.v8sf-shop-filter-chip small {
	font-size: 11px !important;
	font-weight: 600 !important;
	opacity: 0.7 !important;
}

/* Selecionado: fica VERDE (cor da marca) */
.v8sf-shop-filter-chip.is-selected {
	background: var(--v8sf-hdr-primary, #10B981) !important;
	border-color: var(--v8sf-hdr-primary, #10B981) !important;
	color: #FFFFFF !important;
	box-shadow: 0 6px 14px -6px rgba(16, 185, 129, 0.5) !important;
}

.v8sf-shop-filter-empty {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--text-muted, #6B7280) !important;
	margin: 0 !important;
}

.v8sf-shop-filter-footer {
	display: flex !important;
	gap: 10px !important;
	margin-top: 18px !important;
	flex-shrink: 0 !important;
}

.v8sf-shop-filter-clear {
	flex: 1 !important;
	height: 44px !important;
	border: 1.5px solid var(--border, #E5E7EB) !important;
	border-radius: 10px !important;
	background: #FFFFFF !important;
	color: var(--text-main, #111827) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease, color 0.2s ease !important;
}

.v8sf-shop-filter-clear:hover {
	border-color: var(--danger, #DC2626) !important;
	color: var(--danger, #DC2626) !important;
}

.v8sf-shop-filter-apply {
	flex: 1 !important;
	height: 44px !important;
	border: none !important;
	border-radius: 10px !important;
	background: var(--v8sf-hdr-primary, #10B981) !important;
	color: #FFFFFF !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	cursor: pointer !important;
	box-shadow: 0 8px 18px -8px rgba(16, 185, 129, 0.55) !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.v8sf-shop-filter-apply:hover {
	opacity: 0.92 !important;
	transform: translateY(-1px) !important;
}

.v8sf-shop-filter {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	height: 38px !important;
	padding: 0 16px !important;
	border: 1.5px solid var(--border, #E5E7EB) !important;
	border-radius: 10px !important;
	background: #FFFFFF !important;
	color: var(--text-main, #111827) !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
}

.v8sf-shop-filter:hover {
	border-color: var(--v8sf-hdr-primary, #10B981) !important;
	color: var(--v8sf-hdr-primary, #10B981) !important;
	background: #F0FDF9 !important;
}

.v8sf-shop-modes {
	display: flex !important;
}

.v8sf-shop-modes-group {
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	padding: 4px !important;
	background: #F1F3F5 !important;
	border-radius: 10px !important;
}

.v8sf-shop-modes-group + .v8sf-shop-modes-group {
	margin-left: 8px !important;
}

.v8sf-shop-mode-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 34px !important;
	height: 30px !important;
	padding: 0 8px !important;
	border: none !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--text-muted, #6B7280) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	cursor: pointer !important;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.v8sf-shop-mode-btn:hover {
	color: var(--text-main, #111827) !important;
}

.v8sf-shop-mode-btn.is-active {
	background: #FFFFFF !important;
	color: var(--v8sf-hdr-primary, #10B981) !important;
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.12) !important;
}

/* Grupos por viewport: mobile só 2/3/auto · desktop só 4/5/auto */
.v8sf-shop-modes-desktop { display: none !important; }

@media (min-width: 769px) {
	.v8sf-shop-modes-mobile { display: none !important; }
	.v8sf-shop-modes-desktop { display: flex !important; }
}

/* ==================================================================
   MODOS DE EXIBIÇÃO — forçam a coluna escolhida (especificidade maior
   que os media queries responsivos). Sem classe = modo padrão.
   ================================================================== */
.v8sf-shop-page.v8sf-shop-mode-2 .v8sf-shop-grid { --v8sf-shop-cols: 2 !important; }
.v8sf-shop-page.v8sf-shop-mode-3 .v8sf-shop-grid { --v8sf-shop-cols: 3 !important; }
.v8sf-shop-page.v8sf-shop-mode-4 .v8sf-shop-grid { --v8sf-shop-cols: 4 !important; }
.v8sf-shop-page.v8sf-shop-mode-5 .v8sf-shop-grid { --v8sf-shop-cols: 5 !important; }

/* FASE 3.7 — MODOS 3/4/5 NO MOBILE: coluna fixa vira clamp() com mínimo
   de 104px por card. Se não couber (ex.: S22, 360px), a grade desce
   sozinha para 2 colunas — sem espremer 3/4 cards em 100px. Card com
   padding/gap reduzidos para não estourar a linha. */
@media (max-width: 480px) {
	.v8sf-shop-page.v8sf-shop-mode-3 .v8sf-shop-grid,
	.v8sf-shop-page.v8sf-shop-mode-4 .v8sf-shop-grid,
	.v8sf-shop-page.v8sf-shop-mode-5 .v8sf-shop-grid {
		grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
		--v8sf-shop-cols: auto !important;
	}

	.v8sf-shop-page.v8sf-shop-mode-3 a.v8sf-shop-card,
	.v8sf-shop-page.v8sf-shop-mode-4 a.v8sf-shop-card,
	.v8sf-shop-page.v8sf-shop-mode-5 a.v8sf-shop-card {
		padding: 8px !important;
		gap: 8px !important;
		border-radius: 12px !important;
	}

	/* 0.1.105 — SUPER COMPACTO + modo 3 no celular: SEMPRE 3 colunas
	   (o auto-fit minmax(104px) caía para 2 no S22). Especificidade
	   (0,4,1) > regra do modo (0,3,1). */
	body.v8sf-shop-density-supercompact .v8sf-shop-page.v8sf-shop-mode-3 .v8sf-shop-grid {
		grid-template-columns: repeat(3, 1fr) !important;
		--v8sf-shop-cols: 3 !important;
	}
}

/* ==================================================================
   MODO HÍBRIDO — linhas alternando simultaneamente.
   Escolha de 2 tipos no painel (shp_hybrid_type):
   · TIPO "alt"  (padrão):  mobile 2,3,2,3 · desktop 4,5,4,5
   · TIPO "seq4":            mobile 2,3,2,1 · desktop 4,5,4,3
     (a 4ª linha ocupa a largura total — card grande de destaque)
   ================================================================== */

/* ── TIPO "alt" — alternado ──────────────────────────────────────── */
.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-grid {
	grid-template-columns: repeat(6, 1fr) !important;
	--v8sf-shop-cols: 6 !important;
}

/* Ciclo de 5 cards: 1ª linha 2 cards (span 3) · 2ª linha 3 cards (span 2) */
.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(5n+1),
.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(5n+2) {
	grid-column: span 3 !important;
}

.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(5n+3),
.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(5n+4),
.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(5n) {
	grid-column: span 2 !important;
}

@media (min-width: 769px) {
	.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-grid {
		grid-template-columns: repeat(20, 1fr) !important;
		--v8sf-shop-cols: 20 !important;
	}

	/* 1ª linha: 4 cards (span 5 cada) · 2ª linha: 5 cards (span 4 cada) */
	.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(9n+1),
	.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(9n+2),
	.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(9n+3),
	.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(9n+4) {
		grid-column: span 5 !important;
	}

	.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(9n+5),
	.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(9n+6),
	.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(9n+7),
	.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(9n+8),
	.v8sf-shop-page.v8sf-shop-hybrid-alt.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(9n) {
		grid-column: span 4 !important;
	}
}

/* ── TIPO "seq4" — sequência de 4 linhas ────────────────────────── */
/* Mobile: 2 · 3 · 2 · 1 (a 4ª linha é 1 card de largura total) */
.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-grid {
	grid-template-columns: repeat(6, 1fr) !important;
	--v8sf-shop-cols: 6 !important;
}

/* Ciclo de 8 cards: span 3 ×2 · span 2 ×3 · span 3 ×2 · span 6 ×1 */
.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(8n+1),
.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(8n+2) {
	grid-column: span 3 !important;
}

.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(8n+3),
.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(8n+4),
.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(8n+5) {
	grid-column: span 2 !important;
}

.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(8n+6),
.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(8n+7) {
	grid-column: span 3 !important;
}

.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(8n) {
	grid-column: span 6 !important;
}

@media (min-width: 769px) {
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-grid {
		grid-template-columns: repeat(60, 1fr) !important;
		--v8sf-shop-cols: 60 !important;
	}

	/* Ciclo de 16 cards: span 15 ×4 · span 12 ×5 · span 15 ×4 · span 20 ×3 */
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+1),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+2),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+3),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+4) {
		grid-column: span 15 !important;
	}

	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+5),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+6),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+7),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+8),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+9) {
		grid-column: span 12 !important;
	}

	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+10),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+11),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+12),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+13) {
		grid-column: span 15 !important;
	}

	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+14),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n+15),
	.v8sf-shop-page.v8sf-shop-hybrid-seq4.v8sf-shop-mode-hybrid .v8sf-shop-card:nth-child(16n) {
		grid-column: span 20 !important;
	}
}

/* Desktop: círculos ajustados para ~7,5 visíveis (carrossel com prévia
   do próximo slide, em vez de mostrar todos de uma vez) */
@media (min-width: 769px) {
	a.v8sf-shop-cat {
		width: 141px !important;
	}

	.v8sf-shop-cat-thumb {
		width: 141px !important;
		height: 141px !important;
	}

	.v8sf-shop-cat-fallback {
		font-size: 38px !important;
	}

	.v8sf-shop-cat-name {
		font-size: 13.5px !important;
	}
}

/* Mobile: toolbar mais compacta */
@media (max-width: 480px) {
	.v8sf-shop-toolbar {
		padding: 10px !important;
	}

	.v8sf-shop-filter { padding: 0 12px !important; }
	.v8sf-shop-filter span { font-size: 12.5px !important; }

	/* FASE 2.3 — sem espaço? SÓ o ícone (Filtrar/Ajuda). O texto vira
	   quadradinho com ícone; aria-label/title mantêm a acessibilidade. */
	.v8sf-shop-filter > span,
	.v8sf-shop-help > span {
		display: none !important;
	}

	.v8sf-shop-filter,
	.v8sf-shop-help {
		width: 38px !important;
		padding: 0 !important;
	}
}

/* Desktop: página sem margens laterais — o hero vira full-bleed (borda a
   borda); as demais seções ganham a própria margem de 16px. */
@media (min-width: 769px) {
	.v8sf-shop-page {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.v8sf-shop-page-head,
	.v8sf-shop-cats,
	.v8sf-shop-toolbar,
	.v8sf-shop-grid,
	.v8sf-shop-empty,
	.v8sf-shop-pagination {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.v8sf-shop-hero {
		border-radius: 0 !important;
	}
}

/* ==================================================================
   HERO — estilos configuráveis no painel:
   · v8sf-shop-hero-is-box  → "em caixa": margens laterais + cantos
     arredondados em TODOS os viewports (desfaz o full-bleed do desktop).
   · v8sf-shop-hero-is-full → "full": borda a borda em TODOS os
     viewports, sem margens e com cantos retos (o padrão).
   ================================================================== */
.v8sf-shop-hero-is-box {
	border-radius: 20px !important;
}

@media (min-width: 769px) {
	.v8sf-shop-page.v8sf-shop-hero-is-box {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.v8sf-shop-page.v8sf-shop-hero-is-box .v8sf-shop-page-head,
	.v8sf-shop-page.v8sf-shop-hero-is-box .v8sf-shop-cats,
	.v8sf-shop-page.v8sf-shop-hero-is-box .v8sf-shop-toolbar,
	.v8sf-shop-page.v8sf-shop-hero-is-box .v8sf-shop-grid,
	.v8sf-shop-page.v8sf-shop-hero-is-box .v8sf-shop-empty,
	.v8sf-shop-page.v8sf-shop-hero-is-box .v8sf-shop-pagination {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.v8sf-shop-hero-is-box {
		border-radius: 20px !important;
	}
}

/* ── FULL: APENAS o banner colado nas paredes e no teto ───────────
   A página permanece na caixa padrão (1200px + paddings) — só o
   banner escapa com largura da viewport (100vw) e margens negativas.
   As demais seções (barra de navegação, categorias, grade) ficam
   exatamente como no modo caixa. */
.v8sf-shop-page.v8sf-shop-hero-is-full .v8sf-shop-hero {
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: -12px !important; /* zera o respiro padrão (12px) → cola no teto */
	margin-bottom: 28px !important;
	border-radius: 0 !important; /* cantos retos */
}