/*
Theme Name: Hello Elementor Fancy
Theme URI: https://fancybottons.com/
Description: Child theme de Hello Elementor para a loja Fancy (fancybottons.com). Design system, header e footer da marca. Funcionalidades (login OTP, modal, cart lateral) ficam no plugin fancy-core.
Author: Fancy
Author URI: https://fancybottons.com/
Template: hello-elementor
Version: 0.2.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor-fancy
*/

/* =====================================================================
   FANCY — DESIGN SYSTEM
   Extraído do protótipo (index.html + footer.html) preservado em
   /home/u411883163/prototype/. Se precisar reeditar visual, essa é a
   fonte da verdade.
   ===================================================================== */

/* ===== Tokens ===== */
:root {
	--fancy-rosa: #FFE6EA;
	--fancy-rosa-hover: #ffd6dd;
	--fancy-vermelho: #A80B1E;
	--fancy-vermelho-hover: #8a0918;
	--fancy-cinza-claro: #f5f5f5;
	--fancy-cinza-texto: #6b6b6b;
	--fancy-texto: #1e1e1e;
	--fancy-sombra: 0 8px 30px rgba(0, 0, 0, 0.06);
	--fancy-sombra-hover: 0 12px 40px rgba(168, 11, 30, 0.12);
	--fancy-radius: 20px;
	--fancy-radius-sm: 12px;
	--fancy-transition: 0.25s ease;

	/* Alias sem prefixo — o protótipo usa esses nomes em regras internas.
	   Definir aqui garante paridade 1:1 com o HTML/CSS estático. */
	--rosa: var(--fancy-rosa);
	--vermelho: var(--fancy-vermelho);
	--vermelho-hover: var(--fancy-vermelho-hover);
	--cinza-claro: var(--fancy-cinza-claro);
	--cinza-texto: var(--fancy-cinza-texto);
	--sombra: var(--fancy-sombra);
	--sombra-hover: var(--fancy-sombra-hover);
	--radius: var(--fancy-radius);
	--radius-sm: var(--fancy-radius-sm);
	--transition: var(--fancy-transition);
}

/* ===== Base ===== */
body {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--fancy-texto);
	line-height: 1.6;
	background: #ffffff;
	scroll-behavior: smooth;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.fancy-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ===== Scrollbar customizada ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--fancy-rosa); }
::-webkit-scrollbar-thumb { background: var(--fancy-vermelho); border-radius: 12px; }

/* O reset.css do tema PAI (hello-elementor) pinta TODO botão de rosa/magenta
   (#c36 = #CC3366) no hover/focus, com esta regra:
     [type=button]:hover,[type=submit]:hover,button:hover,...{background-color:#c36;color:#fff}
   A tentativa anterior (só `button:hover`, especificidade 0,1,1) PERDIA para
   o `[type=button]:hover` do pai (0,2,0) em qualquer botão com type="button"
   (abas do login, setas do carrossel) — por isso o rosa voltava. Aqui
   replicamos a lista EXATA de seletores do pai: mesma especificidade, mas
   carregado depois, então vence o desempate. Também zeramos o `color:#fff`
   para `inherit`, deixando cada componente decidir a própria cor. */
[type="button"]:hover, [type="button"]:focus,
[type="submit"]:hover, [type="submit"]:focus,
[type="reset"]:hover,  [type="reset"]:focus,
button:hover, button:focus {
	background-color: transparent;
	color: inherit;
}

/* =====================================================================
   HEADER
   ===================================================================== */
.fancy-header {
	/* Sticky (não fixed): o header ocupa o próprio espaço no fluxo do
	   documento e gruda no topo ao rolar. Isso elimina de vez a classe de
	   bug de "header sobre o conteúdo" — não existe mais um valor de
	   padding-top pra reservar/calcular (que era frágil: quebrava quando a
	   altura real do header ≠ valor chutado, ou com a admin bar do WP). */
	position: sticky;
	top: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(168, 11, 30, 0.06);
	z-index: 1000;
	padding: 12px 0;
	transition: box-shadow 0.3s;
}
.fancy-header.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); }

/* Com a admin bar do WP (barra fixa no topo, só para quem está logado), o
   ponto de "grude" do sticky precisa descer a altura dela — senão o header
   escorrega por baixo da barra ao rolar. Não precisa mais mexer no
   padding-top do body: sendo sticky, o header já reserva o próprio espaço. */
body.admin-bar .fancy-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .fancy-header { top: 46px; }
}

.fancy-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.fancy-header .header-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.fancy-header .header-search {
	display: flex;
	align-items: center;
	background: var(--fancy-cinza-claro);
	border-radius: 40px;
	padding: 8px 18px;
	gap: 10px;
	width: 100%;
	max-width: 280px;
	transition: 0.2s;
	border: 2px solid transparent;
}
.fancy-header .header-search:focus-within {
	border-color: var(--fancy-vermelho);
	background: #fff;
}
.fancy-header .header-search i { color: var(--fancy-cinza-texto); font-size: 16px; }
.fancy-header .header-search input {
	border: none; background: transparent; outline: none;
	font-family: inherit; font-size: 14px; width: 100%; padding: 4px 0;
	color: var(--fancy-texto);
}
.fancy-header .header-search input::placeholder { color: #b0b0b0; }

.fancy-header .header-logo { flex-shrink: 0; display: flex; align-items: center; }
.fancy-header .header-logo a { display: block; }
.fancy-header .header-logo img { height: 40px; width: auto; display: block; }

.fancy-header .header-right {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1;
	justify-content: flex-end;
}

.fancy-header .header-icon {
	position: relative;
	font-size: 22px;
	color: #2c2c2c;
	cursor: pointer;
	transition: 0.2s;
	background: none;
	border: none;
	padding: 4px;
	font-family: inherit;
}
.fancy-header .header-icon:hover { color: var(--fancy-vermelho); }

.fancy-header .cart-badge {
	position: absolute;
	top: -6px; right: -8px;
	background: var(--fancy-vermelho);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	border-radius: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	font-family: inherit;
}

.fancy-header .header-profile {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #2c2c2c;
	transition: 0.2s;
	border: none;
	background: none;
	padding: 4px 8px;
	border-radius: 30px;
	font-family: inherit;
}
.fancy-header .header-profile:hover { background: var(--fancy-rosa); color: var(--fancy-vermelho); }
.fancy-header .header-profile i { font-size: 20px; }

/* Header responsivo — busca colapsa em mobile */
@media (max-width: 768px) {
	.fancy-header .header-search { max-width: 160px; padding: 6px 12px; }
	.fancy-header .header-search input { font-size: 13px; }
	.fancy-header .header-profile span { display: none; }
}
@media (max-width: 480px) {
	.fancy-header .header-search { max-width: 40px; padding: 8px; justify-content: center; }
	.fancy-header .header-search input { display: none; }
	.fancy-header .header-logo img { height: 32px; }
	.fancy-header .header-right { gap: 12px; }
}

/* =====================================================================
   FOOTER — versão vermelha (footer.html)
   ===================================================================== */
.fancy-footer {
	background-color: var(--fancy-vermelho);
	color: #ffffff;
	padding: 3rem 2rem 1.5rem;
	font-family: 'Poppins', sans-serif;
	margin-top: 40px;
}

.fancy-footer .footer-container {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 2.5rem 2rem;
	align-items: start;
}

.fancy-footer .footer-brand {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.fancy-footer .footer-logo { display: flex; align-items: center; gap: 0.75rem; }
.fancy-footer .footer-logo img {
	height: 56px;
	width: auto;
	display: block;
}
/* filtro branco só quando o admin marcou "aplicar filtro branco no logo" */
.fancy-footer .footer-logo.is-white-filter img {
	filter: brightness(0) invert(1);
}

.fancy-footer .footer-slogan {
	font-size: 1.1rem;
	font-weight: 300;
	color: var(--fancy-rosa);
	font-style: italic;
	border-top: 2px solid rgba(255, 230, 234, 0.25);
	padding-top: 0.75rem;
	max-width: 280px;
	line-height: 1.5;
}
.fancy-footer .footer-slogan i { color: var(--fancy-rosa); margin-right: 6px; opacity: 0.7; }

.fancy-footer .footer-col h4 {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: #ffffff;
	margin-bottom: 1.2rem;
	position: relative;
	padding-bottom: 0.6rem;
}
.fancy-footer .footer-col h4::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	width: 36px; height: 3px;
	background: var(--fancy-rosa);
	border-radius: 4px;
}

.fancy-footer .contact-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0;
	margin: 0;
}
.fancy-footer .contact-list li {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-size: 0.95rem;
	font-weight: 300;
	color: var(--fancy-rosa);
	transition: color 0.2s;
	line-height: 1.4;
}
.fancy-footer .contact-list li a {
	color: var(--fancy-rosa);
	text-decoration: none;
	transition: color 0.2s, transform 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
}
.fancy-footer .contact-list li a:hover { color: #ffffff; }
.fancy-footer .contact-list li a:hover .contact-icon {
	transform: scale(1.1);
	background: rgba(255, 255, 255, 0.15);
}
.fancy-footer .contact-icon {
	width: 40px; height: 40px; min-width: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color: var(--fancy-rosa);
	transition: all 0.25s ease;
	border: 1px solid rgba(255, 230, 234, 0.15);
}
.fancy-footer .contact-icon i { font-size: 1.1rem; }
.fancy-footer .contact-text { display: flex; flex-direction: column; gap: 0.1rem; }
.fancy-footer .contact-text .label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	/* 0.85 (não 0.6) — contraste mínimo AA (4.5:1) sobre o vermelho de fundo;
	   0.6 media 3.07:1, reprovado. Ver auditoria de acessibilidade Fase 7. */
	color: rgba(255, 230, 234, 0.85);
	font-weight: 400;
}
.fancy-footer .contact-text .value {
	font-weight: 400;
	color: #ffffff;
	font-size: 0.95rem;
}

.fancy-footer .hours-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 0;
	margin: 0;
}
.fancy-footer .hours-list li {
	display: flex;
	justify-content: space-between;
	font-size: 0.92rem;
	font-weight: 300;
	color: var(--fancy-rosa);
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 230, 234, 0.06);
}
.fancy-footer .hours-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.fancy-footer .hours-list .day { font-weight: 400; color: #ffffff; }
.fancy-footer .hours-list .time { font-weight: 300; color: var(--fancy-rosa); }
.fancy-footer .hours-note {
	margin-top: 0.8rem;
	font-size: 0.8rem;
	/* 0.85 — ver nota de contraste em .contact-text .label acima */
	color: rgba(255, 230, 234, 0.85);
	font-weight: 300;
	font-style: italic;
}

.fancy-footer .production-info {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.fancy-footer .production-item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 0.8rem 1rem;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 10px;
	border-left: 3px solid var(--fancy-rosa);
	transition: background 0.2s;
}
.fancy-footer .production-item:hover { background: rgba(255, 255, 255, 0.08); }
.fancy-footer .production-item .prod-icon {
	font-size: 1.2rem;
	color: var(--fancy-rosa);
	margin-top: 2px;
	min-width: 28px;
	text-align: center;
}
.fancy-footer .production-item .prod-text {
	font-size: 0.88rem;
	font-weight: 300;
	color: var(--fancy-rosa);
	line-height: 1.5;
}
.fancy-footer .production-item .prod-text strong { font-weight: 600; color: #ffffff; }

.fancy-footer .footer-bottom {
	max-width: 1200px;
	margin: 2.5rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 230, 234, 0.15);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.8rem;
	/* 0.85 — ver nota de contraste em .contact-text .label acima */
	color: rgba(255, 230, 234, 0.85);
	font-weight: 300;
}
.fancy-footer .footer-bottom .footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.fancy-footer .footer-bottom .footer-legal a {
	color: rgba(255, 230, 234, 0.85);
	text-decoration: none;
	transition: color 0.2s;
}
.fancy-footer .footer-bottom .footer-legal a:hover { color: #ffffff; }
.fancy-footer .footer-bottom .footer-heart { color: var(--fancy-rosa); }
.fancy-footer .footer-bottom .footer-heart i { color: #ff6b81; margin: 0 3px; }

/* Footer responsivo */
@media (max-width: 992px) {
	.fancy-footer .footer-container { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.fancy-footer .footer-brand { grid-column: 1 / -1; text-align: center; align-items: center; }
	.fancy-footer .footer-slogan { max-width: 100%; text-align: center; }
	.fancy-footer .footer-logo { justify-content: center; }
	.fancy-footer .footer-col h4::after { left: 50%; transform: translateX(-50%); }
	.fancy-footer .footer-col { text-align: center; }
	.fancy-footer .contact-list li,
	.fancy-footer .contact-list li a { justify-content: center; }
	.fancy-footer .hours-list li { justify-content: center; gap: 1rem; flex-wrap: wrap; }
	.fancy-footer .production-item {
		justify-content: center;
		text-align: center;
		flex-direction: column;
		align-items: center;
		border-left: none;
		border-top: 3px solid var(--fancy-rosa);
		padding: 1rem;
	}
	.fancy-footer .production-item .prod-icon { margin-top: 0; }
	.fancy-footer .footer-bottom { flex-direction: column; text-align: center; }
	.fancy-footer .footer-bottom .footer-legal { justify-content: center; }
}
@media (max-width: 600px) {
	.fancy-footer .footer-container { grid-template-columns: 1fr; gap: 2rem; }
	.fancy-footer .footer-brand { grid-column: 1; }
	.fancy-footer .footer-col h4::after { left: 50%; transform: translateX(-50%); }
	.fancy-footer .footer-logo img { height: 44px; }
	.fancy-footer .footer-slogan { font-size: 1rem; }
	.fancy-footer .contact-list li { font-size: 0.85rem; }
	.fancy-footer .contact-icon { width: 36px; height: 36px; min-width: 36px; font-size: 1rem; }
	.fancy-footer .footer-bottom { font-size: 0.7rem; gap: 0.5rem; }
	.fancy-footer .footer-bottom .footer-legal { gap: 1rem; justify-content: center; }
}
@media (max-width: 400px) {
	.fancy-footer { padding: 3rem 1rem 1.5rem; }
	.fancy-footer .footer-container { padding: 0; }
	.fancy-footer .contact-list li a { flex-wrap: wrap; justify-content: center; }
}

/* =====================================================================
   HOME — Banners, Categorias, Personalizados, Pelúcias
   Extraído de /home/u411883163/prototype/index.html (blocos .banners,
   .category-carousel-section, .product-grid, .plush-section).
   ===================================================================== */

.fancy-home .fancy-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Section header (título + subtítulo)
   Centralizado em toda a página: com o título encostado à esquerda a home
   parecia um painel administrativo; centralizado, cada seção vira um bloco
   com respiro próprio. `justify-content: center` (e não `text-align`) porque
   o título é flex — é ele que alinha o ícone com o texto. */
/* display:block + ícone inline (e NÃO flex): num flex o ícone é um item
   irmão do texto, então quando o título quebra em duas linhas — o que
   sempre acontece no celular — ele fica pendurado sozinho na margem
   esquerda, longe do texto centralizado. Inline, ele anda junto da
   primeira palavra e quebra junto com ela. */
.fancy-section-title {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 6px;
	display: block;
	color: var(--fancy-texto);
	text-align: center;
	line-height: 1.25;
}
.fancy-section-title .icon {
	font-size: 28px;
	color: var(--fancy-vermelho);
	display: inline-block;
	vertical-align: -0.06em;
	margin-right: 10px;
}
.fancy-section-sub {
	color: var(--fancy-cinza-texto);
	font-size: 15px;
	margin-bottom: 24px;
	font-weight: 400;
	text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Banners ---------- */
.fancy-banners {
	margin-top: 24px;
	margin-bottom: 32px;
	position: relative;
}
.fancy-banner-slider {
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	border-radius: var(--fancy-radius);
	position: relative;
	background: #f0f0f0;
}
.fancy-banner-slide {
	flex: 0 0 100%;
	/* aspect-ratio real da imagem vem inline (front-page.php), a partir das
	   dimensões reais do banner cadastrado — nada de altura chutada em px,
	   que cortava a imagem sempre que a altura real não batia com o valor
	   fixo. align-items:flex-start no pai evita que um banner "estique"
	   outro banner de proporção diferente no mesmo carrossel. */
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
}
.fancy-banner-slide img,
.fancy-banner-slide picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--fancy-radius);
	display: block;
}
.fancy-banner-slide a { display: block; height: 100%; }

.fancy-banner-controls {
	position: absolute;
	top: 50%; left: 0; right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	padding: 0 16px;
	pointer-events: none;
	z-index: 2;
}
.fancy-banner-controls button {
	pointer-events: all;
	background: transparent;
	border: none;
	color: var(--fancy-vermelho);
	font-size: 32px;
	cursor: pointer;
	transition: 0.2s;
	padding: 8px;
	opacity: 0.8;
	font-family: inherit;
}
.fancy-banner-controls button:hover { opacity: 1; transform: scale(1.1); }
.fancy-banner-controls button:active { transform: scale(0.9); }

.fancy-banner-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}
.fancy-banner-dots span {
	width: 8px; height: 8px;
	border-radius: 20px;
	background: #d0d0d0;
	cursor: pointer;
	transition: 0.3s;
}
.fancy-banner-dots span.active { background: var(--fancy-vermelho); width: 28px; }

/* Banner com só 1 slide: esconder controles/dots. */
.fancy-banners[data-total="1"] .fancy-banner-controls,
.fancy-banners[data-total="1"] .fancy-banner-dots { display: none; }

/* ---------- Category carousel ---------- */
.fancy-category-carousel-section {
	padding: 8px 0 16px;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 32px;
	position: relative;
}
.fancy-category-carousel-wrapper {
	position: relative;
	/* Precisamos esconder o overflow horizontal (é o que "esconde" as
	   categorias fora da página visível do carrossel). MAS a especificação
	   do CSS diz que, com overflow-x:hidden, um overflow-y:visible é
	   forçado a computar como `auto` — ou seja, ele TAMBÉM recorta na
	   vertical. Foi por isso que o zoom do hover continuava cortado.
	   Solução robusta: manter overflow-x:hidden e dar folga vertical via
	   PADDING. O recorte do overflow acontece na borda do padding-box, então
	   tudo que cresce DENTRO desse padding continua visível — o zoom tem
	   espaço para crescer pra cima/baixo sem ser cortado. */
	overflow-x: hidden;
	padding: 22px 0;
}
.fancy-category-carousel-track {
	display: flex;
	gap: 20px;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}
.fancy-category-carousel-item {
	/* O design da imagem já foi pensado para funcionar sozinho (título
	   impresso nela, proporção retrato ~5:6) — sem círculo, sombra, borda
	   ou corte: só a imagem, livre, na proporção original. */
	flex: 0 0 calc(20% - 16px);
	min-width: 160px;
	cursor: pointer;
	transition: transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
}
.fancy-category-carousel-item:hover { transform: translateY(-4px); }
.fancy-category-carousel-item img {
	width: 100%;
	max-width: 150px;
	height: auto;
	display: block;
	/* Zoom discreto (1.08x) no hover. O padding vertical do wrapper garante
	   folga para a imagem crescer sem ser recortada. */
	transition: transform 0.35s ease;
}
.fancy-category-carousel-item:hover img {
	transform: scale(1.08);
}

@media (max-width: 768px) {
	.fancy-category-carousel-item { min-width: 110px; }
	.fancy-category-carousel-item img { max-width: 120px; }
}
@media (max-width: 480px) {
	.fancy-category-carousel-item { min-width: 90px; }
	.fancy-category-carousel-item img { max-width: 95px; }
}

/* Setas nas laterais do carrossel (mesmo padrão do banner): só o ícone,
   sem círculo/fundo, sobrepostas à imagem em vez de ficarem empilhadas
   em cima dos pontinhos de navegação. */
.fancy-category-carousel-controls {
	position: absolute;
	top: 50%;
	left: 0; right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	padding: 0 4px;
	pointer-events: none;
	z-index: 2;
}
.fancy-category-carousel-controls button {
	pointer-events: all;
	background: transparent;
	border: none;
	color: var(--fancy-vermelho);
	font-size: 26px;
	cursor: pointer;
	transition: 0.2s;
	padding: 8px;
	opacity: 0.75;
	font-family: inherit;
}
.fancy-category-carousel-controls button:hover { opacity: 1; transform: scale(1.1); }

/* Se ≤ 5 categorias cabem todas na tela (data-static=1), o JS não ativa o
   carrossel — então escondemos também as setas, que não teriam função. */
.fancy-category-carousel-section[data-static="1"] .fancy-category-carousel-controls { display: none; }

/* ---------- Product grid (personalizados) ---------- */
.fancy-product-grid {
	display: grid;
	/* auto-fill (não auto-fit): com poucos produtos na seção, auto-fit
	   colapsa as colunas vazias e estica os cards para ocupar a largura
	   toda — mesmo problema já corrigido no grid de pelúcias. */
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px;
}
.fancy-product-card {
	background: #fff;
	border-radius: var(--fancy-radius);
	padding: 20px 16px 18px;
	box-shadow: var(--fancy-sombra);
	border: 1px solid #f0f0f0;
	transition: 0.3s;
	display: flex;
	flex-direction: column;
	position: relative;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.fancy-product-card:focus-visible {
	outline: 2px solid var(--fancy-vermelho);
	outline-offset: 2px;
}
.fancy-product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fancy-sombra-hover);
	border-color: var(--fancy-rosa);
}
.fancy-product-card .card-image {
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: var(--fancy-radius-sm);
	overflow: hidden;
	margin-bottom: 12px;
	background: var(--fancy-rosa);
	position: relative;
}
.fancy-product-card .card-image img {
	width: 100%; height: 100%; object-fit: cover;
}
.fancy-product-card .card-image .badge {
	position: absolute;
	top: 10px; left: 10px;
	background: var(--fancy-vermelho);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 30px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	z-index: 2;
}
.fancy-product-card .card-name {
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 2px;
	color: var(--fancy-texto);
}
.fancy-product-card .card-price {
	font-weight: 700;
	font-size: 18px;
	color: var(--fancy-vermelho);
	margin: 6px 0 10px;
}
.fancy-product-card .card-price .from {
	font-weight: 400;
	font-size: 13px;
	color: var(--fancy-cinza-texto);
	margin-right: 4px;
}
.fancy-product-card .card-actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
	flex-wrap: wrap;
}
.fancy-product-card .card-actions .btn-add {
	flex: 1;
	padding: 10px 14px;
	background: var(--fancy-vermelho);
	color: #fff;
	border: none;
	border-radius: 40px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: 0.2s;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
}
/* :hover e :active do "Personalizar" moraram aqui, presos ao <span> do botão
   (`.btn-add:hover` / `.btn-add:active`). Foram para fancy-ui.css, disparados
   pelo CARD — mesmo motivo dos cards de arte e de destaque, que já tinham sido
   corrigidos assim: o card inteiro é o alvo do clique (`role="button"` +
   `data-fancy-personalize`), então quem clica no nome, no preço ou na imagem
   não encostava no <span> e não via feedback nenhum. Ver "BOTÃO PERSONALIZAR"
   em fancy-ui.css, ao lado da regra gêmea do botão "Adicionar". */

/* ---------- Pelúcias grid ---------- */
.fancy-plush-section { margin: 56px 0 40px; }
.fancy-plush-grid {
	display: grid;
	/* auto-fill (não auto-fit): com poucos produtos (ex.: só 1 pelúcia
	   cadastrada), auto-fit colapsa as colunas vazias e estica o único
	   item para ocupar a largura toda do grid — auto-fill mantém as
	   colunas vazias reservadas, então o card não fica gigante. */
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
}
.fancy-plush-card {
	background: #fff;
	border-radius: var(--fancy-radius);
	padding: 16px;
	box-shadow: var(--fancy-sombra);
	border: 1px solid #f0f0f0;
	text-align: center;
	transition: 0.3s;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
.fancy-plush-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--fancy-sombra-hover);
}
/* .plush-link envolve só a parte navegável (imagem/nome/preço) sem quebrar
   o layout flex do card — os filhos do <a> viram itens diretos do flex pai. */
.fancy-plush-card .plush-link {
	display: contents;
	text-decoration: none;
	color: inherit;
}
.fancy-plush-card .plush-image {
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: var(--fancy-radius-sm);
	overflow: hidden;
	background: var(--fancy-rosa);
	margin-bottom: 10px;
}
.fancy-plush-card .plush-image img { width: 100%; height: 100%; object-fit: cover; }
.fancy-plush-card .plush-name {
	font-weight: 600;
	font-size: 15px;
	color: var(--fancy-texto);
}
.fancy-plush-card .plush-price {
	font-weight: 700;
	font-size: 18px;
	color: var(--fancy-vermelho);
	margin: 6px 0 4px;
}
.fancy-plush-card .plush-installment {
	font-size: 13px;
	color: var(--fancy-cinza-texto);
	margin-bottom: 12px;
}
.fancy-plush-card .btn-add-plush {
	padding: 10px 14px;
	background: var(--fancy-vermelho);
	color: #fff;
	border: none;
	border-radius: 40px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: 0.2s;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	width: 100%;
	text-decoration: none;
}
.fancy-plush-card .btn-add-plush:hover {
	background: var(--fancy-vermelho-hover);
	transform: scale(1.02);
}

/* =====================================================================
   HOME — SEÇÕES DE CONVERSÃO
   (benefícios, kits, como funciona, favoritos/ofertas/novidades, CTA)
   ===================================================================== */

/* ---------- Cabeçalho de seção com link ----------
   Empilhado e centralizado para acompanhar os títulos: o link ("Ver
   categorias") fica embaixo, centralizado, em vez de puxado para a direita. */
.fancy-section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
	text-align: center;
}
.fancy-section-head .fancy-section-sub { margin-bottom: 0; }
.fancy-section-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fancy-vermelho);
	white-space: nowrap;
	transition: gap 0.2s;
}
.fancy-section-link:hover { gap: 11px; }
.fancy-center { text-align: center; }

/* ---------- Barra de benefícios ---------- */
.fancy-benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 8px 0 36px;
}
.fancy-benefits .benefit {
	display: flex;
	align-items: center;
	gap: 13px;
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: var(--fancy-radius-sm);
	padding: 15px 17px;
	transition: var(--fancy-transition);
}
.fancy-benefits .benefit:hover {
	border-color: var(--fancy-rosa-hover);
	box-shadow: var(--fancy-sombra);
}
.fancy-benefits .benefit i {
	font-size: 17px;
	color: var(--fancy-vermelho);
	background: var(--fancy-rosa);
	width: 42px; height: 42px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.fancy-benefits .benefit strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.fancy-benefits .benefit span { display: block; font-size: 12.5px; color: var(--fancy-cinza-texto); line-height: 1.4; }

/* ---------- Kits ---------- */
.fancy-kits-section { margin-bottom: 48px; }
.fancy-kits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
}
.fancy-kit-card {
	position: relative;
	background: linear-gradient(160deg, #fff 55%, var(--fancy-rosa));
	border: 2px solid var(--fancy-rosa);
	border-radius: var(--fancy-radius);
	padding: 22px 20px 18px;
	cursor: pointer;
	transition: var(--fancy-transition);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.fancy-kit-card:hover,
.fancy-kit-card:focus-visible {
	transform: translateY(-5px);
	border-color: var(--fancy-vermelho);
	box-shadow: var(--fancy-sombra-hover);
	outline: none;
}
.fancy-kit-card .kit-badge {
	position: absolute;
	top: 14px; right: 14px;
	background: var(--fancy-vermelho);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.03em;
	padding: 5px 10px;
	border-radius: 20px;
}
.fancy-kit-card .kit-qty {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--fancy-vermelho);
	letter-spacing: -1.5px;
}
.fancy-kit-card .kit-qty small { font-size: 15px; font-weight: 600; margin-left: 3px; letter-spacing: 0; }
/* min-height de 2 linhas: sem isso, um kit com nome curto ("10 bottons 44mm")
   e o vizinho com nome longo ("10 bottons 32mm holográficos") empurravam
   preço, selo de economia e botão para alturas diferentes, e a fileira toda
   ficava em escadinha. */
.fancy-kit-card .kit-name {
	font-size: 15px;
	font-weight: 600;
	margin: 6px 0 14px;
	line-height: 1.35;
	min-height: calc(2 * 1.35em);
	color: var(--fancy-texto);
}
.fancy-kit-card .kit-prices { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fancy-kit-card .kit-full {
	font-size: 13px;
	color: var(--fancy-cinza-texto);
	text-decoration: line-through;
}
.fancy-kit-card .kit-total { font-size: 23px; font-weight: 800; color: var(--fancy-texto); }
.fancy-kit-card .kit-unit { font-size: 12.5px; color: var(--fancy-cinza-texto); margin-top: 3px; }
.fancy-kit-card .kit-save {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #0a7d1a;
	background: #e6f7ec;
	padding: 5px 11px;
	border-radius: 20px;
	/* O margin-bottom garante o respiro mínimo até o botão, que usa
	   margin-top:auto e por isso não teria folga no card mais alto da fileira. */
	margin: 13px 0 16px;
	align-self: flex-start;
}
/* margin-top:auto gruda o botão no rodapé do card, alinhando-o com os
   vizinhos da mesma fileira mesmo quando o conteúdo acima tem alturas
   diferentes (o card já é flex-column e o grid estica todos à mesma altura). */
.fancy-kit-card .kit-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	background: var(--fancy-vermelho);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 16px;
	border-radius: 30px;
	transition: var(--fancy-transition);
}
.fancy-kit-card:hover .kit-cta { background: var(--fancy-vermelho-hover); }
.fancy-kit-card .kit-cta i { transition: transform 0.2s; }
.fancy-kit-card:hover .kit-cta i { transform: translateX(4px); }

/* ---------- Como funciona ---------- */
.fancy-how-section {
	background: var(--fancy-cinza-claro);
	border-radius: var(--fancy-radius);
	padding: 40px 28px;
	margin-bottom: 48px;
}
.fancy-how-steps {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	counter-reset: step;
}
.fancy-how-steps li {
	position: relative;
	background: #fff;
	border-radius: var(--fancy-radius-sm);
	padding: 26px 18px 20px;
	text-align: center;
	transition: var(--fancy-transition);
}
.fancy-how-steps li:hover { transform: translateY(-4px); box-shadow: var(--fancy-sombra); }
.fancy-how-steps .step-num {
	position: absolute;
	top: -13px; left: 50%;
	transform: translateX(-50%);
	width: 28px; height: 28px;
	background: var(--fancy-vermelho);
	color: #fff;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.fancy-how-steps li i { font-size: 24px; color: var(--fancy-vermelho); display: block; margin-bottom: 11px; }
.fancy-how-steps li strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.fancy-how-steps li span { display: block; font-size: 12.5px; color: var(--fancy-cinza-texto); line-height: 1.5; }

/* ---------- Faixas de produtos (favoritos / ofertas / novidades) ---------- */
.fancy-strip-section,
.fancy-offers-section,
.fancy-new-section { margin-bottom: 48px; }
.fancy-offers-section .fancy-section-title .icon { color: #d9a300; }

/* ---------- CTA final ---------- */
.fancy-cta-final {
	background: linear-gradient(135deg, var(--fancy-vermelho), var(--fancy-vermelho-hover));
	border-radius: var(--fancy-radius);
	padding: 46px 32px;
	margin: 8px 0 56px;
	text-align: center;
	color: #fff;
}
.fancy-cta-final h2 { font-size: 27px; font-weight: 700; margin: 0 0 10px; }
.fancy-cta-final p {
	font-size: 15px;
	max-width: 620px;
	margin: 0 auto 24px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}
.fancy-cta-final .cta-actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
.fancy-cta-final .cta-btn-primary,
.fancy-cta-final .cta-btn-wpp {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 27px;
	border-radius: 30px;
	font-size: 15px;
	font-weight: 600;
	transition: var(--fancy-transition);
}
.fancy-cta-final .cta-btn-primary { background: #fff; color: var(--fancy-vermelho); }
.fancy-cta-final .cta-btn-primary:hover { transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.16); }
.fancy-cta-final .cta-btn-wpp { background: #25D366; color: #fff; }
.fancy-cta-final .cta-btn-wpp:hover { transform: scale(1.03); filter: brightness(0.95); }

/* ---------- Responsivo das novas seções ---------- */
@media (max-width: 992px) {
	.fancy-benefits { grid-template-columns: repeat(2, 1fr); }
	.fancy-how-steps { grid-template-columns: repeat(2, 1fr); }
}
/* As grades de celular (benefícios, kits, "como funciona", vitrines) ficam
   todas juntas no bloco "CELULAR — VITRINES" no fim do arquivo. Aqui só o
   que não é grade, para não haver duas regras disputando o mesmo seletor. */
@media (max-width: 600px) {
	.fancy-how-section { padding: 32px 18px; }
	.fancy-cta-final { padding: 34px 20px; }
	.fancy-cta-final h2 { font-size: 22px; }
}

/* ---------- Card de ARTE de catálogo (sem nome — a arte é o produto) ---------- */
.fancy-art-card {
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: var(--fancy-radius);
	padding: 10px 10px 12px;
	cursor: pointer;
	transition: var(--fancy-transition);
	display: flex;
	flex-direction: column;
	text-align: center;
}
.fancy-art-card:hover,
.fancy-art-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--fancy-sombra);
	outline: none;
}
.fancy-art-card .art-card-image {
	border-radius: var(--fancy-radius-sm);
	overflow: hidden;
	background: var(--fancy-cinza-claro);
	aspect-ratio: 1 / 1;
	margin-bottom: 9px;
}
.fancy-art-card .art-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.fancy-art-card:hover .art-card-image img { transform: scale(1.06); }
.fancy-art-card .art-card-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 10px;
	background: var(--fancy-vermelho);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: 30px;
	transition: var(--fancy-transition);
}
.fancy-art-card:hover .art-card-btn { background: var(--fancy-vermelho-hover); }

/* =====================================================================
   MOBILE — padrões de loja (menu inferior, busca em tela cheia,
   modal em folha, botão de compra fixo)
   Tudo aqui é escondido no desktop.
   ===================================================================== */

/* ---------- Menu inferior fixo ---------- */
.fancy-bottom-nav { display: none; }
.fancy-search-overlay { display: none; }
.fancy-header .header-search-mobile { display: none; }

@media (max-width: 768px) {
	.fancy-bottom-nav {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 1200;
		background: rgba(255, 255, 255, 0.97);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-top: 1px solid #ededed;
		/* Respeita a área do gesto/home bar do iPhone. */
		padding-bottom: env(safe-area-inset-bottom, 0);
		box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.05);
	}
	.fancy-bottom-nav .bn-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		/* Alvo de toque confortável (≥44px). */
		min-height: 56px;
		padding: 7px 4px 8px;
		background: none;
		border: none;
		font-family: inherit;
		font-size: 10.5px;
		font-weight: 500;
		color: var(--fancy-cinza-texto);
		cursor: pointer;
		transition: color 0.15s;
	}
	.fancy-bottom-nav .bn-item i { font-size: 18px; }
	.fancy-bottom-nav .bn-item:active { color: var(--fancy-vermelho); }
	.fancy-bottom-nav .bn-item.is-active { color: var(--fancy-vermelho); font-weight: 600; }

	.fancy-bottom-nav .bn-icon-wrap { position: relative; display: inline-flex; }
	.fancy-bottom-nav .bn-badge {
		position: absolute;
		top: -6px; right: -10px;
		background: var(--fancy-vermelho);
		color: #fff;
		font-size: 9.5px;
		font-weight: 700;
		min-width: 17px; height: 17px;
		border-radius: 20px;
		display: flex; align-items: center; justify-content: center;
		padding: 0 4px;
	}
	.fancy-bottom-nav .bn-badge.is-empty { display: none; }

	/* Espaço para o conteúdo não ficar embaixo da barra. */
	body { padding-bottom: 68px; }

	/* ---------- Header enxuto ---------- */
	.fancy-header .header-search { display: none; }
	.fancy-header .header-search-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px; height: 40px;
		border-radius: 50%;
		border: none;
		background: var(--fancy-cinza-claro);
		color: var(--fancy-texto);
		font-size: 15px;
		cursor: pointer;
	}
	.fancy-header .header-icon,
	.fancy-header .header-profile { min-width: 40px; min-height: 40px; }

	/* ---------- Busca em tela cheia ---------- */
	.fancy-search-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1500;
		background: #fff;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
		padding-top: env(safe-area-inset-top, 0);
	}
	.fancy-search-overlay.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
	.fancy-search-overlay .search-overlay-bar {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 16px;
		border-bottom: 1px solid #f0f0f0;
	}
	.fancy-search-overlay form {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 9px;
		background: var(--fancy-cinza-claro);
		border-radius: 30px;
		padding: 11px 16px;
	}
	.fancy-search-overlay form i { color: var(--fancy-cinza-texto); font-size: 14px; }
	.fancy-search-overlay input {
		flex: 1;
		border: none;
		background: transparent;
		outline: none;
		font-family: inherit;
		/* 16px evita o zoom automático do iOS ao focar o campo. */
		font-size: 16px;
		color: var(--fancy-texto);
		min-width: 0;
	}
	.fancy-search-overlay .search-overlay-close {
		background: none;
		border: none;
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		color: var(--fancy-vermelho);
		cursor: pointer;
		padding: 8px 4px;
		white-space: nowrap;
	}
	.fancy-search-overlay .search-overlay-suggest { padding: 22px 18px; }
	.fancy-search-overlay .suggest-title {
		display: block;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--fancy-cinza-texto);
		margin-bottom: 12px;
	}
	.fancy-search-overlay .suggest-chips { display: flex; flex-wrap: wrap; gap: 9px; }
	.fancy-search-overlay .suggest-chips a {
		background: var(--fancy-rosa);
		color: var(--fancy-vermelho);
		font-size: 13.5px;
		font-weight: 600;
		padding: 9px 16px;
		border-radius: 30px;
	}

	/* ---------- Modais como folha que sobe (padrão mobile) ---------- */
	.fancy-modal-overlay { align-items: flex-end; }
	.fancy-modal-box {
		width: 100%;
		max-width: 100%;
		max-height: 92vh;
		border-radius: 22px 22px 0 0;
		padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0));
		animation: fancySheetUp 0.28s ease;
	}
	/* "Puxadorzinho" no topo, que sinaliza folha arrastável. */
	.fancy-modal-box::before {
		content: '';
		display: block;
		width: 40px; height: 4px;
		border-radius: 20px;
		background: #e0e0e0;
		margin: -6px auto 14px;
	}
	@keyframes fancySheetUp {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

	/* Carrinho lateral ocupa a tela toda. */
	.fancy-cart-sidebar { width: 100%; max-width: 100%; }

	/* Campos com 16px evitam o zoom automático do iOS. */
	.fancy-form-group select,
	.fancy-form-group input[type="number"],
	.fancy-art-panel textarea,
	#fancy-art-notes,
	.fancy-login-card input { font-size: 16px; }

	/* ---------- Botão de compra fixo na página de produto ---------- */
	.woocommerce div.product form.cart,
	.fancy-single-personalize-trigger {
		position: sticky;
		bottom: calc(68px + env(safe-area-inset-bottom, 0));
		z-index: 900;
		background: rgba(255, 255, 255, 0.97);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		padding: 12px;
		margin-left: -12px;
		margin-right: -12px;
		border-top: 1px solid #f0f0f0;
		box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.06);
	}
	.woocommerce div.product .single_add_to_cart_button.button.alt { min-height: 50px; }
}

@media (max-width: 480px) {
	.fancy-bottom-nav .bn-item { font-size: 10px; }
	.fancy-bottom-nav .bn-item i { font-size: 17px; }
}

/* ---------- Empty states admin-oriented ---------- */
.fancy-empty-hint {
	padding: 32px 24px;
	text-align: center;
	background: #fafafa;
	border: 1px dashed #d5d5d5;
	border-radius: var(--fancy-radius);
	color: var(--fancy-cinza-texto);
	font-size: 14px;
	line-height: 1.6;
}
.fancy-empty-hint strong { color: var(--fancy-texto); }
.fancy-empty-hint a { color: var(--fancy-vermelho); text-decoration: underline; }

/* Responsivo (breakpoints do protótipo) */
@media (max-width: 992px) {
	.fancy-category-carousel-item { flex: 0 0 calc(25% - 15px); }
}
@media (max-width: 768px) {
	.fancy-section-title { font-size: 22px; }
	.fancy-section-title .icon { font-size: 22px; }
	.fancy-category-carousel-item { flex: 0 0 calc(33.33% - 14px); }
}
@media (max-width: 480px) {
	.fancy-category-carousel-item { flex: 0 0 calc(50% - 10px); }
}

/* =====================================================================
   PÁGINA DE CATEGORIA — sidebar + accordion de coleções
   Extraído do bloco #category-page do protótipo (index.html).
   ===================================================================== */

.fancy-category-page { padding: 24px 0 40px; }

/* Centralizado como os títulos de seção da home (mesma decisão de layout). */
.fancy-category-header {
	margin-bottom: 20px;
	text-align: center;
}
.fancy-category-header h1 {
	font-size: 32px;
	font-weight: 700;
	color: var(--fancy-texto);
	display: block;
	line-height: 1.25;
	margin: 0 0 6px;
}
/* Inline pelo mesmo motivo do .fancy-section-title: acompanhar o texto
   quando o nome da categoria quebra em duas linhas. */
.fancy-category-header h1 i {
	color: var(--fancy-vermelho);
	display: inline-block;
	vertical-align: -0.06em;
	margin-right: 10px;
}
.fancy-category-header .cat-desc {
	color: var(--fancy-cinza-texto);
	font-size: 15px;
	margin: 0 auto;
	max-width: 640px;
}

.fancy-category-layout {
	display: flex;
	gap: 32px;
	margin-top: 20px;
}

/* Sidebar */
.fancy-category-sidebar {
	flex: 0 0 240px;
	position: sticky;
	top: 100px;
	align-self: flex-start;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--fancy-radius);
	padding: 20px 16px;
	box-shadow: var(--fancy-sombra);
	border: 1px solid #f0f0f0;
}
.fancy-category-sidebar .sidebar-title {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--fancy-vermelho);
}
.fancy-category-sidebar .sidebar-search {
	width: 100%;
	padding: 10px 14px;
	border: 2px solid #eee;
	border-radius: var(--fancy-radius-sm);
	font-family: inherit;
	font-size: 14px;
	margin-bottom: 16px;
	transition: 0.2s;
	background: #fafafa;
	color: var(--fancy-texto);
}
.fancy-category-sidebar .sidebar-search:focus {
	border-color: var(--fancy-vermelho);
	outline: none;
	background: #fff;
}
.fancy-category-sidebar .sidebar-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}
.fancy-category-sidebar .sidebar-nav li {
	padding: 8px 12px;
	border-radius: var(--fancy-radius-sm);
	cursor: pointer;
	transition: 0.2s;
	font-size: 14px;
	font-weight: 500;
	color: #444;
	display: flex;
	align-items: center;
	gap: 8px;
	border-left: 3px solid transparent;
}
.fancy-category-sidebar .sidebar-nav li:hover {
	background: var(--fancy-rosa);
	color: var(--fancy-vermelho);
}
.fancy-category-sidebar .sidebar-nav li.active {
	background: var(--fancy-rosa);
	color: var(--fancy-vermelho);
	border-left-color: var(--fancy-vermelho);
}
.fancy-category-sidebar .sidebar-nav li .badge-count {
	margin-left: auto;
	background: #eee;
	padding: 0 8px;
	border-radius: 20px;
	font-size: 11px;
	/* var(--fancy-cinza-texto) = 5.33:1 sobre branco; #888 direto dava 3.54:1,
	   abaixo do mínimo AA (4.5:1) para texto normal. */
	color: var(--fancy-cinza-texto);
}
.fancy-category-sidebar .sidebar-nav li.hidden { display: none; }
.fancy-category-sidebar .sidebar-nav .no-results {
	font-size: 13px;
	color: var(--fancy-cinza-texto);
	padding: 12px;
	text-align: center;
	list-style: none;
}

/* Área principal */
.fancy-category-content { flex: 1; min-width: 0; }

/* Bloco de coleção (accordion) */
.fancy-collection-block {
	margin-bottom: 32px;
	border: 1px solid #f0f0f0;
	border-radius: var(--fancy-radius);
	overflow: hidden;
	transition: 0.3s;
	background: #fff;
	box-shadow: var(--fancy-sombra);
}
.fancy-collection-block .collection-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	cursor: pointer;
	transition: 0.2s;
	background: #fff;
	user-select: none;
	border: none;
	width: 100%;
	font-family: inherit;
	text-align: left;
}
.fancy-collection-block .collection-header:hover { background: var(--fancy-rosa); }
.fancy-collection-block .collection-header .collection-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--fancy-texto);
	display: flex;
	align-items: center;
	gap: 10px;
}
.fancy-collection-block .collection-header .collection-title small {
	font-weight: 400;
	font-size: 14px;
	color: var(--fancy-cinza-texto);
}
.fancy-collection-block .collection-header .toggle-icon {
	font-size: 20px;
	color: var(--fancy-cinza-texto);
	transition: transform 0.3s ease;
}
.fancy-collection-block .collection-header[aria-expanded="true"] .toggle-icon {
	transform: rotate(180deg);
}
.fancy-collection-block .collection-body {
	padding: 0 20px 20px;
	transition: max-height 0.4s ease, padding 0.3s ease;
	max-height: 5000px;
	overflow: hidden;
}
.fancy-collection-block .collection-body.collapsed {
	max-height: 0;
	padding: 0 20px;
}

/* Subcoleção — grupo dentro do accordion */
.fancy-subcollection { margin-bottom: 20px; }
.fancy-subcollection:last-child { margin-bottom: 0; }
.fancy-subcollection .sub-title {
	font-weight: 600;
	font-size: 16px;
	color: var(--fancy-vermelho);
	margin: 0 0 10px;
}

.fancy-collection-carousel {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 18px;
	padding-top: 8px;
}

/* ---------- Carrossel horizontal infinito das artes ---------- */
.fancy-art-carousel {
	position: relative;
	padding: 8px 0 4px;
	/* Espaço lateral para as setas não cobrirem os cards. */
	margin: 0 -6px;
}
.fancy-art-carousel .carousel-viewport {
	overflow: hidden;
	padding: 4px 6px 8px;
}
.fancy-art-carousel .carousel-track {
	display: flex;
	gap: 16px;
	will-change: transform;
}
.fancy-art-carousel .carousel-item {
	/* 5 por vez no desktop, descontando o gap. */
	flex: 0 0 calc((100% - (16px * 4)) / 5);
	min-width: 0;
}

.fancy-art-carousel .carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid #ececec;
	background: rgba(255, 255, 255, 0.96);
	color: var(--fancy-texto);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
	transition: var(--fancy-transition);
	font-family: inherit;
}
.fancy-art-carousel .carousel-prev { left: -4px; }
.fancy-art-carousel .carousel-next { right: -4px; }
.fancy-art-carousel .carousel-nav:hover {
	background: var(--fancy-vermelho);
	border-color: var(--fancy-vermelho);
	color: #fff;
}
/* Poucos itens: não há o que girar — esconde as setas e alinha à esquerda. */
.fancy-art-carousel.is-static .carousel-nav { display: none; }
.fancy-art-carousel.is-static .carousel-track { transform: none !important; }

@media (max-width: 1200px) {
	.fancy-art-carousel .carousel-item { flex-basis: calc((100% - (16px * 3)) / 4); }
}
@media (max-width: 992px) {
	.fancy-art-carousel .carousel-item { flex-basis: calc((100% - (16px * 2)) / 3); }
}
@media (max-width: 700px) {
	.fancy-art-carousel .carousel-track { gap: 12px; }
	.fancy-art-carousel .carousel-item { flex-basis: calc((100% - 12px) / 2); }
	.fancy-art-carousel .carousel-nav { width: 32px; height: 32px; font-size: 12px; }
}

/* Miniprod (card menor dentro da collection) */
.fancy-mini-card {
	background: #fff;
	border-radius: var(--fancy-radius-sm);
	padding: 12px 10px;
	box-shadow: var(--fancy-sombra);
	border: 1px solid #f0f0f0;
	display: flex;
	flex-direction: column;
	transition: 0.3s;
	text-decoration: none;
	color: inherit;
}
.fancy-mini-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--fancy-sombra-hover);
	border-color: var(--fancy-rosa);
}
.fancy-mini-card .card-image {
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: var(--fancy-radius-sm);
	overflow: hidden;
	background: var(--fancy-rosa);
	margin-bottom: 10px;
}
.fancy-mini-card .card-image img { width: 100%; height: 100%; object-fit: cover; }
.fancy-mini-card .card-name {
	font-weight: 600;
	font-size: 13px;
	color: var(--fancy-texto);
	line-height: 1.3;
	margin-bottom: 4px;
}
.fancy-mini-card .card-price {
	font-weight: 700;
	font-size: 15px;
	color: var(--fancy-vermelho);
	margin: 4px 0 8px;
}
.fancy-mini-card .card-price .from {
	font-weight: 400;
	font-size: 12px;
	color: var(--fancy-cinza-texto);
	margin-right: 3px;
}
.fancy-mini-card .btn-add {
	background: var(--fancy-vermelho);
	color: #fff;
	border: none;
	border-radius: 40px;
	font-weight: 600;
	font-size: 12px;
	padding: 6px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	text-decoration: none;
}
.fancy-mini-card .btn-add:hover { background: var(--fancy-vermelho-hover); }

/* Responsivo */
@media (max-width: 992px) {
	.fancy-category-sidebar { flex: 0 0 200px; }
	.fancy-category-layout { gap: 20px; }
}
@media (max-width: 768px) {
	.fancy-category-layout { flex-direction: column; }
	.fancy-category-sidebar {
		flex: none;
		position: relative;
		top: 0;
		max-height: none;
		width: 100%;
		padding: 16px;
		margin-bottom: 20px;
		border-radius: var(--fancy-radius-sm);
	}
	.fancy-category-sidebar .sidebar-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		max-height: 200px;
		overflow-y: auto;
	}
	.fancy-category-sidebar .sidebar-nav li {
		padding: 6px 12px;
		font-size: 13px;
		border-left: none;
		background: var(--fancy-cinza-claro);
		border-radius: 30px;
		white-space: nowrap;
	}
	.fancy-category-sidebar .sidebar-nav li:hover { background: var(--fancy-rosa); }
	.fancy-category-sidebar .sidebar-nav li.active {
		background: var(--fancy-rosa);
		border-left: none;
	}
	.fancy-category-sidebar .sidebar-nav li .badge-count { display: none; }
	.fancy-category-sidebar .sidebar-search { margin-bottom: 10px; }
	.fancy-collection-block .collection-header .collection-title { font-size: 18px; }
	.fancy-collection-carousel {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 14px;
	}
}
@media (max-width: 480px) {
	.fancy-collection-block .collection-header { padding: 12px 16px; }
	.fancy-collection-block .collection-header .collection-title { font-size: 16px; }
	.fancy-collection-carousel {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.fancy-category-sidebar .sidebar-nav li { font-size: 12px; padding: 4px 10px; }
}

/* =====================================================================
   MODAL DE PERSONALIZAÇÃO + TOAST
   Extraído do bloco #quickAddModal do protótipo.
   ===================================================================== */

.fancy-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.fancy-modal-overlay.open { display: flex; }

.fancy-modal-box {
	background: #fff;
	border-radius: var(--fancy-radius);
	max-width: 540px;
	width: 100%;
	padding: 32px 28px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
	animation: fancyModalIn 0.3s ease;
	max-height: 90vh;
	overflow-y: auto;
}
@keyframes fancyModalIn {
	from { opacity: 0; transform: scale(0.94) translateY(20px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

.fancy-modal-box .fancy-modal-close {
	float: right;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	/* #888 = 3.54:1, dentro do mínimo AA de 3:1 p/ componentes de UI;
	   #999 dava 2.85:1, reprovado. */
	color: #888;
	transition: 0.2s;
	padding: 0 4px;
}
.fancy-modal-box .fancy-modal-close:hover { color: var(--fancy-vermelho); }
.fancy-modal-box h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--fancy-texto); }
.fancy-modal-sub { color: var(--fancy-cinza-texto); font-size: 14px; margin: 0 0 20px; }

.fancy-form-group { margin-bottom: 18px; }
.fancy-form-group label {
	font-weight: 600;
	font-size: 14px;
	display: block;
	margin-bottom: 4px;
	color: var(--fancy-texto);
}
.fancy-form-group .fancy-required { color: var(--fancy-vermelho); }
.fancy-form-group select,
.fancy-form-group input[type="number"] {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #eee;
	border-radius: var(--fancy-radius-sm);
	font-family: inherit;
	font-size: 14px;
	background: #fafafa;
	transition: 0.2s;
	color: var(--fancy-texto);
}
.fancy-form-group select:focus,
.fancy-form-group input[type="number"]:focus {
	border-color: var(--fancy-vermelho);
	outline: none;
	background: #fff;
}

.fancy-file-upload-area {
	border: 2px dashed #ddd;
	border-radius: var(--fancy-radius-sm);
	padding: 20px;
	/* flex centraliza o ícone/texto como itens da caixa, em vez de depender
	   de text-align herdado sobre o conteúdo inline de um <i> — mais
	   previsível entre navegadores. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	transition: 0.2s;
	color: var(--fancy-cinza-texto);
	font-size: 14px;
	background: #fafafa;
	margin-top: 4px;
}
.fancy-file-upload-area:hover,
.fancy-file-upload-area:focus-visible {
	border-color: var(--fancy-vermelho);
	background: var(--fancy-rosa);
	outline: none;
}
.fancy-file-upload-area i {
	font-size: 28px;
	line-height: 1;
	margin-bottom: 6px;
	color: var(--fancy-vermelho);
}
.fancy-file-upload-area input { display: none; }
.fancy-file-upload-area small {
	display: block;
	font-size: 11.5px;
	color: #a0a0a0;
	margin-top: 4px;
}

/* ---------- Modal: 3 modos de envio da arte ---------- */
.fancy-art-modes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 4px 0 14px;
}
.fancy-art-mode {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-align: center;
	padding: 13px 8px;
	border: 2px solid #eee;
	border-radius: var(--fancy-radius-sm);
	background: #fafafa;
	cursor: pointer;
	font-family: inherit;
	transition: var(--fancy-transition);
}
.fancy-art-mode i { font-size: 17px; color: var(--fancy-cinza-texto); transition: var(--fancy-transition); }
.fancy-art-mode strong { font-size: 12.5px; font-weight: 600; color: var(--fancy-texto); line-height: 1.25; }
.fancy-art-mode span { font-size: 10.5px; color: var(--fancy-cinza-texto); line-height: 1.3; }
.fancy-art-mode:hover { border-color: var(--fancy-rosa-hover); background: #fff; }
.fancy-art-mode.is-active {
	border-color: var(--fancy-vermelho);
	background: var(--fancy-rosa);
}
.fancy-art-mode.is-active i,
.fancy-art-mode.is-active strong { color: var(--fancy-vermelho); }

.fancy-art-panel textarea,
#fancy-art-notes {
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	padding: 11px 14px;
	border: 2px solid #eee;
	border-radius: var(--fancy-radius-sm);
	background: #fafafa;
	resize: vertical;
	transition: 0.2s;
	color: var(--fancy-texto);
}
.fancy-art-panel textarea:focus,
#fancy-art-notes:focus { outline: none; border-color: var(--fancy-vermelho); background: #fff; }
.fancy-sub-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.fancy-art-tip {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 11.5px;
	color: var(--fancy-cinza-texto);
	line-height: 1.45;
	margin: 8px 0 0;
	background: var(--fancy-cinza-claro);
	padding: 9px 11px;
	border-radius: var(--fancy-radius-sm);
}
.fancy-art-tip i { color: var(--fancy-vermelho); margin-top: 1px; }

/* ---------- Modal: lista de artes (frente/verso + quantidade) ---------- */
.fancy-art-item {
	border: 1px solid #eee;
	border-radius: var(--fancy-radius-sm);
	padding: 11px 12px;
	background: #fff;
}
.fancy-art-item + .fancy-art-item { margin-top: 9px; }
.fancy-art-item .art-item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 9px;
}
.fancy-art-item .art-item-title { font-size: 12.5px; font-weight: 700; color: var(--fancy-vermelho); }
.fancy-art-item .art-item-remove {
	background: none;
	border: none;
	color: #b9b9b9;
	cursor: pointer;
	font-size: 14px;
	padding: 3px 5px;
	transition: 0.2s;
}
.fancy-art-item .art-item-remove:hover { color: var(--fancy-vermelho); }

.fancy-art-item .art-item-sides { display: flex; gap: 10px; }
.fancy-art-item .art-side {
	position: relative;
	width: 78px;
	flex-shrink: 0;
	text-align: center;
}
.fancy-art-item .art-side img {
	width: 78px; height: 78px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #eee;
	display: block;
}
.fancy-art-item .art-side.is-empty {
	width: 78px; height: 78px;
	border: 2px dashed #ddd;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c4c4c4;
	font-size: 17px;
	cursor: pointer;
	transition: 0.2s;
	background: #fafafa;
}
.fancy-art-item .art-side.is-empty:hover,
.fancy-art-item .art-side.is-empty:focus-visible {
	border-color: var(--fancy-vermelho);
	color: var(--fancy-vermelho);
	background: var(--fancy-rosa);
	outline: none;
}
.fancy-art-item .art-side-caption {
	display: block;
	font-size: 10.5px;
	color: var(--fancy-cinza-texto);
	margin-top: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fancy-art-item .art-side-clear {
	position: absolute;
	top: -6px; right: -6px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--fancy-vermelho);
	color: #fff;
	border: 2px solid #fff;
	font-size: 9px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.fancy-art-item .art-item-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px dashed #f0f0f0;
}
.fancy-art-item .art-item-qty label { font-size: 12px; font-weight: 600; margin: 0; }
.fancy-art-item .art-item-qty input {
	width: 74px;
	padding: 6px 9px;
	border: 2px solid #eee;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	text-align: center;
	background: #fafafa;
}
.fancy-art-item .art-item-qty input:focus { border-color: var(--fancy-vermelho); outline: none; background: #fff; }

@media (max-width: 480px) {
	.fancy-art-modes { grid-template-columns: 1fr; }
	.fancy-art-mode { flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; }
	.fancy-art-mode > div { text-align: left; }
}

.fancy-upload-preview-list {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fancy-upload-preview-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f8f8f8;
	padding: 8px 12px;
	border-radius: var(--fancy-radius-sm);
	border: 1px solid #eee;
}
.fancy-upload-preview-item .preview-thumb {
	width: 48px; height: 48px;
	border-radius: 6px;
	object-fit: cover;
	background: #ddd;
	flex-shrink: 0;
}
.fancy-upload-preview-item .preview-info {
	flex: 1;
	font-size: 13px;
	color: #333;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.fancy-upload-preview-item .preview-qty {
	display: flex;
	align-items: center;
	gap: 6px;
}
.fancy-upload-preview-item .preview-qty label { font-size: 12px; font-weight: 400; margin: 0; }
.fancy-upload-preview-item .preview-qty input {
	width: 48px;
	padding: 4px 6px;
	border: 1px solid #ddd;
	border-radius: 6px;
	text-align: center;
	font-family: inherit;
	font-size: 13px;
	background: #fff;
}
.fancy-upload-preview-item .preview-qty input:focus { border-color: var(--fancy-vermelho); outline: none; }
.fancy-upload-preview-item .preview-remove {
	background: none;
	border: none;
	/* #888 = 3.54:1 (mínimo AA p/ UI é 3:1); #ccc dava 1.61:1, bem reprovado. */
	color: #888;
	cursor: pointer;
	font-size: 18px;
	transition: 0.2s;
	padding: 4px;
}
.fancy-upload-preview-item .preview-remove:hover { color: var(--fancy-vermelho); }

.fancy-upload-error {
	color: var(--fancy-vermelho);
	font-size: 13px;
	margin-top: 6px;
	min-height: 1em;
}

.fancy-modal-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	border-top: 2px solid #f0f0f0;
	margin-top: 8px;
}
.fancy-modal-total .total-label { font-weight: 500; font-size: 15px; color: var(--fancy-texto); }
.fancy-modal-total .total-price { font-weight: 700; font-size: 24px; color: var(--fancy-vermelho); }

/* .fancy-btn-submit: base, :hover e :active moraram aqui — versão duplicada
   e mais antiga do botão, sem a "tecla física" (sombra sólida) que o resto
   do site usa. fancy-ui.css tem uma segunda declaração completa da MESMA
   classe, carregada DEPOIS (ver a dependência em functions.php), então ela
   sempre vencia essas aqui — mas as duas versões conviviam no código,
   divergindo aos poucos a cada edição em só uma das duas. Foi rastreado como
   possível causa de um bug relatado (hover branco no botão "Adicionar ao
   carrinho"): mesmo não sendo a causa direta confirmada, duas fontes de
   verdade para o mesmo botão é o tipo de duplicação que abre espaço para
   esse defeito reaparecer. Só o `:disabled` (dimmed, sem soerguer no clique)
   ficou — é o único pedaço que fancy-ui.css não tinha réplica. */
.fancy-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- Toast ---------- */
.fancy-toast {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%) translateY(80px);
	background: #1e1e1e;
	color: #fff;
	padding: 14px 32px;
	border-radius: 40px;
	font-size: 14px;
	font-weight: 500;
	z-index: 9999;
	opacity: 0;
	transition: 0.4s ease;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	pointer-events: none;
	font-family: inherit;
	max-width: 90vw;
}
.fancy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fancy-toast .toast-icon { margin-right: 10px; color: var(--fancy-rosa); }
.fancy-toast.error { background: var(--fancy-vermelho); }
.fancy-toast.error .toast-icon { color: #fff; }

@media (max-width: 480px) {
	.fancy-modal-box { padding: 24px 18px; }
}

/* =====================================================================
   CARRINHO — SIDEBAR LATERAL
   Extraído do bloco #cartSidebar do protótipo.
   ===================================================================== */

.fancy-cart-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 2900;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fancy-cart-overlay.open {
	opacity: 1;
	visibility: visible;
}

.fancy-cart-sidebar {
	position: fixed;
	top: 0;
	right: -420px;
	width: 400px;
	max-width: 92vw;
	height: 100%;
	background: #fff;
	z-index: 3000;
	box-shadow: -8px 0 40px rgba(0, 0, 0, 0.06);
	transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
}
.fancy-cart-sidebar.open { right: 0; }

.fancy-cart-sidebar .cart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	flex-shrink: 0;
}
.fancy-cart-sidebar .cart-header h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--fancy-texto);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}
.fancy-cart-sidebar .cart-header h2 i { color: var(--fancy-vermelho); }
.fancy-cart-sidebar .close-cart {
	background: none;
	border: none;
	font-size: 28px;
	cursor: pointer;
	/* #888 = 3.54:1 (mínimo AA p/ UI é 3:1); #999 dava 2.85:1, reprovado. */
	color: #888;
	transition: 0.2s;
	padding: 0;
	line-height: 1;
}
.fancy-cart-sidebar .close-cart:hover { color: var(--fancy-vermelho); }

.fancy-cart-sidebar .cart-items {
	flex: 1;
	overflow-y: auto;
	padding-right: 4px;
}
.fancy-cart-sidebar .cart-items .empty-cart {
	text-align: center;
	color: var(--fancy-cinza-texto);
	padding: 40px 0;
	font-size: 15px;
}
.fancy-cart-sidebar .cart-items .empty-cart i {
	font-size: 48px;
	color: #ddd;
	display: block;
	margin-bottom: 12px;
}

.fancy-cart-sidebar .cart-item {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #f0f0f0;
	align-items: center;
}
.fancy-cart-sidebar .cart-item .ci-image {
	width: 56px;
	height: 56px;
	background: var(--fancy-rosa);
	border-radius: var(--fancy-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}
.fancy-cart-sidebar .cart-item .ci-image img { width: 100%; height: 100%; object-fit: cover; }
.fancy-cart-sidebar .cart-item .ci-info { flex: 1; min-width: 0; }
.fancy-cart-sidebar .cart-item .ci-info .ci-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--fancy-texto);
}
.fancy-cart-sidebar .cart-item .ci-info .ci-detail {
	font-size: 12px;
	color: var(--fancy-cinza-texto);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fancy-cart-sidebar .cart-item .ci-info .ci-price {
	font-weight: 700;
	color: var(--fancy-vermelho);
	font-size: 15px;
	margin-top: 2px;
}
.fancy-cart-sidebar .cart-item .ci-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.fancy-cart-sidebar .cart-item .ci-qty button {
	background: var(--fancy-rosa);
	border: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-weight: 700;
	cursor: pointer;
	font-size: 14px;
	transition: 0.2s;
	font-family: inherit;
	color: var(--fancy-vermelho);
}
.fancy-cart-sidebar .cart-item .ci-qty button:hover:not(:disabled) { background: var(--fancy-rosa-hover); }
.fancy-cart-sidebar .cart-item .ci-qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.fancy-cart-sidebar .cart-item .ci-qty span {
	font-weight: 600;
	min-width: 18px;
	text-align: center;
	color: var(--fancy-texto);
}
.fancy-cart-sidebar .cart-item .ci-remove {
	background: none;
	border: none;
	/* #888 = 3.54:1 (mínimo AA p/ UI é 3:1); #ccc dava 1.61:1, bem reprovado. */
	color: #888;
	font-size: 18px;
	cursor: pointer;
	transition: 0.2s;
	padding: 4px;
	flex-shrink: 0;
}
.fancy-cart-sidebar .cart-item .ci-remove:hover { color: var(--fancy-vermelho); }

.fancy-cart-sidebar .cart-footer {
	border-top: 2px solid #f0f0f0;
	padding-top: 18px;
	margin-top: 8px;
	flex-shrink: 0;
}
.fancy-cart-sidebar .cart-footer .cart-total {
	display: flex;
	justify-content: space-between;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--fancy-texto);
}
.fancy-cart-sidebar .cart-footer .cart-total .total-value { color: var(--fancy-vermelho); }
.fancy-cart-sidebar .cart-footer .btn-checkout {
	display: block;
	width: 100%;
	padding: 14px;
	background: var(--fancy-vermelho);
	color: #fff;
	border: none;
	border-radius: 40px;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: 0.2s;
	font-family: inherit;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}
.fancy-cart-sidebar .cart-footer .btn-checkout:hover { background: var(--fancy-vermelho-hover); }
.fancy-cart-sidebar .cart-footer .btn-checkout[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Item "piscando" brevemente ao atualizar (feedback visual de qty/remove) */
.fancy-cart-sidebar .cart-item.is-updating { opacity: 0.5; pointer-events: none; }

@media (max-width: 480px) {
	.fancy-cart-sidebar { padding: 20px 16px; }
}

/* =====================================================================
   LOGIN MODAL — abas Acesso rápido / Conta segura
   ===================================================================== */

.fancy-login-box { max-width: 420px; }

.fancy-auth-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	padding-bottom: 8px;
	border-bottom: 2px solid #f0f0f0;
}
.fancy-auth-tab {
	flex: 1;
	background: none;
	border: none;
	border-radius: var(--fancy-radius-sm);
	padding: 10px 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--fancy-cinza-texto);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	position: relative;
	transition: background 0.2s, color 0.2s;
}
.fancy-auth-tab:hover { color: var(--fancy-vermelho); }
/* Fundo cinza claro (sem tom de rosa) + texto vermelho escuro: contraste
   alto e visualmente neutro. */
.fancy-auth-tab.is-active { background: var(--fancy-cinza-claro); color: var(--fancy-vermelho); }

.fancy-auth-panel.fancy-hidden { display: none; }

.fancy-auth-error {
	display: none;
	background: var(--fancy-rosa);
	color: var(--fancy-vermelho);
	border-radius: var(--fancy-radius-sm);
	padding: 10px 14px;
	font-size: 13px;
	margin-bottom: 16px;
}
.fancy-auth-error.show { display: block; }

.fancy-auth-hint {
	font-size: 12px;
	color: var(--fancy-cinza-texto);
	margin: 12px 0 0;
	line-height: 1.5;
	text-align: center;
}

/* =====================================================================
   PÁGINA DE PRODUTO ÚNICO — gatilho do modal (substitui o form nativo do Woo
   em produtos personalizáveis, ver Fancy_Single_Product)
   ===================================================================== */
.fancy-single-personalize-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--fancy-vermelho);
	color: #fff;
	border: none;
	border-radius: 40px;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 28px;
	cursor: pointer;
	transition: 0.2s;
	font-family: inherit;
	margin: 8px 0 4px;
}
.fancy-single-personalize-trigger:hover,
.fancy-single-personalize-trigger:focus-visible {
	background: var(--fancy-vermelho-hover);
	transform: scale(1.02);
	outline: none;
}
.fancy-single-personalize-trigger:focus-visible {
	outline: 2px solid var(--fancy-vermelho);
	outline-offset: 3px;
}
.fancy-single-personalize-hint {
	font-size: 13px;
	color: var(--fancy-cinza-texto);
	margin: 0 0 16px;
}

/* =====================================================================
   CHECKOUT (WooCommerce Blocks) — /finalizar-compra/
   O estilo do checkout vive em fancy-core/assets/css/fancy-checkout.css,
   carregado SÓ na página do checkout (Fancy_Checkout::enqueue). Ficava
   aqui antes, como camadas de !important empilhadas sobre as classes de
   componente; foi reescrito de uma vez em um arquivo próprio para o
   layout ser tratado como um desenho só, e não como remendos.
   ===================================================================== */


/* =====================================================================
   CARRINHO NATIVO (/carrinho/) — a sidebar customizada cobre o uso
   principal; esta página fica como fallback caso alguém acesse direto.
   ===================================================================== */
.woocommerce-cart .woocommerce {
	font-family: 'Poppins', sans-serif;
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
}
.woocommerce-cart table.shop_table {
	border: 1px solid #f0f0f0;
	border-radius: var(--fancy-radius);
	overflow: hidden;
	border-collapse: separate;
	box-shadow: var(--fancy-sombra);
}
.woocommerce-cart table.shop_table th {
	background: var(--fancy-cinza-claro);
	font-weight: 600;
	color: var(--fancy-texto);
	padding: 14px;
}
.woocommerce-cart table.shop_table td { padding: 14px; border-top: 1px solid #f5f5f5; }
.woocommerce-cart .product-remove a {
	color: #888 !important;
	font-size: 18px;
}
.woocommerce-cart .product-remove a:hover { color: var(--fancy-vermelho) !important; }
.woocommerce-cart .quantity input.qty {
	border-radius: var(--fancy-radius-sm);
	border-color: #eee;
	font-family: 'Poppins', sans-serif;
}
.woocommerce-cart .cart_totals {
	background: #fff;
	border-radius: var(--fancy-radius);
	border: 1px solid #f0f0f0;
	box-shadow: var(--fancy-sombra);
	padding: 20px 24px;
}
.woocommerce-cart .cart_totals h2 { font-family: 'Poppins', sans-serif; font-weight: 700; }
.woocommerce-cart .cart_totals .order-total .amount { color: var(--fancy-vermelho); font-weight: 700; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .button {
	background: var(--fancy-vermelho) !important;
	color: #fff !important;
	border-radius: 40px !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	border: none !important;
	transition: 0.2s;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart .button:hover { background: var(--fancy-vermelho-hover) !important; }
.woocommerce-cart .coupon input#coupon_code {
	border-radius: var(--fancy-radius-sm);
	border-color: #eee;
	font-family: 'Poppins', sans-serif;
}

/* =====================================================================
   MINHA CONTA (/minha-conta/) — login nativo (fallback p/ Conta segura),
   pedidos, endereços, detalhes da conta.
   ===================================================================== */
.woocommerce-account .woocommerce {
	font-family: 'Poppins', sans-serif;
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: #fff;
	border-radius: var(--fancy-radius);
	border: 1px solid #f0f0f0;
	box-shadow: var(--fancy-sombra);
	padding: 12px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--fancy-radius-sm);
	color: var(--fancy-texto);
	font-weight: 500;
	transition: 0.2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--fancy-rosa);
	color: var(--fancy-vermelho);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--fancy-vermelho);
	color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content {
	background: #fff;
	border-radius: var(--fancy-radius);
	border: 1px solid #f0f0f0;
	box-shadow: var(--fancy-sombra);
	padding: 24px;
}
.woocommerce-account table.shop_table {
	border: 1px solid #f0f0f0;
	border-radius: var(--fancy-radius-sm);
	overflow: hidden;
}
.woocommerce-account table.shop_table th { background: var(--fancy-cinza-claro); font-weight: 600; }
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account a.button {
	background: var(--fancy-vermelho) !important;
	color: #fff !important;
	border-radius: 40px !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	border: none !important;
	padding: 10px 24px !important;
	transition: 0.2s;
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account a.button:hover { background: var(--fancy-vermelho-hover) !important; }
.woocommerce-account .woocommerce-form-row input.input-text,
.woocommerce-account .woocommerce-Input,
.woocommerce-account select {
	border-radius: var(--fancy-radius-sm);
	border-color: #eee;
	font-family: 'Poppins', sans-serif;
	background: #fafafa;
	padding: 10px 14px;
}
.woocommerce-account .woocommerce-form-row input.input-text:focus,
.woocommerce-account .woocommerce-Input:focus {
	border-color: var(--fancy-vermelho);
	background: #fff;
	outline: none;
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	background: #fff;
	border-radius: var(--fancy-radius);
	border: 1px solid #f0f0f0;
	box-shadow: var(--fancy-sombra);
	padding: 24px;
}
.woocommerce-account .u-column1.col-1,
.woocommerce-account .u-column2.col-2 { padding: 0 12px; }
.woocommerce-account mark.order-status { color: var(--fancy-vermelho); font-weight: 600; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	padding: 6px 16px !important;
	font-size: 13px !important;
}

@media (max-width: 768px) {
	.woocommerce-account .woocommerce {
		display: flex;
		flex-direction: column;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 16px; }
}

/* =====================================================================
   LOJA / CATEGORIA-FOLHA / BUSCA — grade padrão de produtos do WooCommerce
   (archive-product.php). Cobre /loja/, categorias sem subcoleção e
   resultados de busca, que compartilham o mesmo template base.
   ===================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products,
.search-results ul.products {
	font-family: 'Poppins', sans-serif;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: #fff;
	border-radius: var(--fancy-radius);
	padding: 16px 16px 20px;
	box-shadow: var(--fancy-sombra);
	border: 1px solid #f0f0f0;
	transition: 0.3s;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--fancy-sombra-hover);
	border-color: var(--fancy-rosa);
}
.woocommerce ul.products li.product img {
	border-radius: var(--fancy-radius-sm);
	aspect-ratio: 1/1;
	object-fit: cover;
	margin-bottom: 10px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: 600;
	font-size: 15px;
	color: var(--fancy-texto);
	margin: 0 0 4px;
}
.woocommerce ul.products li.product .price {
	color: var(--fancy-vermelho);
	font-weight: 700;
	font-size: 16px;
}
.woocommerce ul.products li.product .price del { color: #bbb; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .fancy-loop-personalize-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--fancy-vermelho) !important;
	color: #fff !important;
	border-radius: 40px !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	padding: 10px 18px !important;
	margin-top: 12px;
	border: none !important;
	cursor: pointer;
	transition: 0.2s;
	width: 100%;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .fancy-loop-personalize-trigger:hover {
	background: var(--fancy-vermelho-hover) !important;
	transform: scale(1.02);
}
.woocommerce ul.products li.product .onsale {
	background: var(--fancy-vermelho);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	border-radius: 30px;
	top: 10px;
	left: 10px;
	right: auto;
	min-height: auto;
	padding: 4px 12px;
	line-height: 1.4;
}

.woocommerce-products-header__title.page-title,
.woocommerce-page .page-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	color: var(--fancy-texto);
	font-size: 28px;
}
.woocommerce-breadcrumb {
	font-family: 'Poppins', sans-serif;
	color: var(--fancy-cinza-texto);
	font-size: 13px;
	margin-bottom: 16px;
}
.woocommerce-breadcrumb a { color: var(--fancy-cinza-texto); }
.woocommerce-breadcrumb a:hover { color: var(--fancy-vermelho); }
.woocommerce-result-count,
.woocommerce-ordering { font-family: 'Poppins', sans-serif; color: var(--fancy-cinza-texto); font-size: 14px; }
.woocommerce-ordering select {
	border-radius: var(--fancy-radius-sm);
	border-color: #eee;
	font-family: 'Poppins', sans-serif;
	padding: 6px 10px;
}
.woocommerce nav.woocommerce-pagination ul { border: none; gap: 6px; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border-radius: var(--fancy-radius-sm);
	border: 1px solid #eee;
	font-family: 'Poppins', sans-serif;
	color: var(--fancy-texto);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--fancy-vermelho);
	color: #fff;
	border-color: var(--fancy-vermelho);
}

.woocommerce-info, .woocommerce-message, .woocommerce-error {
	font-family: 'Poppins', sans-serif;
	border-top-color: var(--fancy-vermelho) !important;
	border-radius: var(--fancy-radius-sm);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--fancy-vermelho) !important; }
.woocommerce-info .button, .woocommerce-message .button {
	background: var(--fancy-vermelho) !important;
	border-radius: 40px !important;
}

/* =====================================================================
   PÁGINA DE PRODUTO ÚNICO — conteúdo (galeria, título, preço, abas)
   A área de compra (add-to-cart) de produtos personalizáveis já é
   substituída pelo gatilho do modal — ver Fancy_Single_Product.
   ===================================================================== */
.woocommerce div.product {
	font-family: 'Poppins', sans-serif;
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
}
.woocommerce div.product .product_title {
	font-weight: 700;
	color: var(--fancy-texto);
	font-size: 28px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--fancy-vermelho);
	font-weight: 700;
	font-size: 22px;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	border-radius: var(--fancy-radius);
	overflow: hidden;
	background: var(--fancy-rosa);
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--fancy-radius); }
.woocommerce div.product .flex-control-thumbs img {
	border-radius: var(--fancy-radius-sm);
	opacity: 0.7;
	transition: 0.2s;
}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs .flex-active img { opacity: 1; }

/* Avaliação (estrelas + link "N avaliações") */
.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 12px;
}
.woocommerce div.product .star-rating { color: var(--fancy-vermelho); font-size: 15px; }
.woocommerce div.product .woocommerce-review-link {
	font-size: 13px;
	color: var(--fancy-cinza-texto);
	text-decoration: underline;
}

.woocommerce div.product .fancy-single-installment {
	font-size: 13px;
	color: var(--fancy-cinza-texto);
	margin: -8px 0 12px;
}

/* Resumo curto (abaixo do preço, acima do formulário de compra) */
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--fancy-cinza-texto);
	font-size: 15px;
	line-height: 1.7;
	margin: 12px 0 20px;
}

/* Estoque ("Em estoque" / "Esgotado") */
.woocommerce div.product p.stock {
	font-size: 13px;
	font-weight: 600;
	color: #0a7d1a;
	margin-bottom: 16px;
}
.woocommerce div.product p.stock.out-of-stock { color: var(--fancy-vermelho); }

/* Quantidade + botão "Adicionar ao carrinho" — só aparece pra produtos
   simples (pelúcias); produtos personalizáveis usam o gatilho do modal
   (Fancy_Single_Product), que já tem estilo próprio (.fancy-loop-personalize-trigger). */
.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 20px 0;
}
.woocommerce div.product form.cart .quantity {
	margin: 0;
}
.woocommerce div.product form.cart .quantity .qty {
	width: 90px;
	padding: 14px 12px;
	border: 2px solid #eee;
	border-radius: var(--fancy-radius-sm);
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	text-align: center;
	background: #fafafa;
	transition: 0.2s;
}
.woocommerce div.product form.cart .quantity .qty:focus {
	border-color: var(--fancy-vermelho);
	outline: none;
	background: #fff;
}
.woocommerce div.product .single_add_to_cart_button.button.alt {
	background: var(--fancy-vermelho) !important;
	border: none;
	border-radius: var(--fancy-radius-sm);
	color: #fff !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 15px;
	padding: 14px 32px;
	flex: 1;
	min-width: 180px;
	text-align: center;
	transition: 0.2s;
	cursor: pointer;
}
.woocommerce div.product .single_add_to_cart_button.button.alt:hover {
	background: var(--fancy-vermelho-hover) !important;
	transform: scale(1.01);
}
.woocommerce div.product .single_add_to_cart_button.button.alt:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Meta (SKU / categoria / tags) */
.woocommerce div.product .product_meta {
	font-size: 13px;
	color: var(--fancy-cinza-texto);
	padding-top: 16px;
	border-top: 1px solid #f0f0f0;
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }
.woocommerce div.product .product_meta a { color: var(--fancy-vermelho); text-decoration: underline; }

/* Calculadora de frete (SuperFrete) — o plugin usa custom properties
   próprias (verde, #0fae79) como "camada de compatibilidade de tema";
   sobrescrever aqui em vez de brigar com o CSS deles no !important. */
.woocommerce div.product #super-frete-shipping-calculator {
	--superfrete-primary-color: var(--fancy-vermelho);
	--superfrete-primary-hover: var(--fancy-vermelho-hover);
	--superfrete-secondary-color: var(--fancy-vermelho);
	--superfrete-secondary-hover: var(--fancy-vermelho-hover);
	--superfrete-font-family: 'Poppins', sans-serif;
	--superfrete-radius-sm: var(--fancy-radius-sm);
	--superfrete-radius-md: var(--fancy-radius-sm);
	--superfrete-radius-lg: var(--fancy-radius);
	margin-top: 12px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 2px solid #f0f0f0;
	padding: 0;
	margin: 32px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: none;
	background: none;
	margin: 0 20px 0 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: var(--fancy-cinza-texto);
	padding: 10px 0;
	display: inline-block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--fancy-vermelho); }
.woocommerce div.product .woocommerce-Tabs-panel { font-family: 'Poppins', sans-serif; padding-top: 16px; }

.woocommerce div.product .related.products {
	margin-top: 48px;
	border-top: 1px solid #f0f0f0;
	padding-top: 32px;
}
.woocommerce div.product .related.products > h2 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 22px;
	margin-bottom: 20px;
}

@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
	.woocommerce div.product { padding: 16px; }
	.woocommerce div.product .product_title { font-size: 22px; }
}

/* =====================================================================
   ÍCONES — regras de alinhamento
   O Font Awesome desenha o glifo num pseudo-elemento cuja caixa é do
   tamanho da fonte, não do ícone. Num contêiner flex isso faz o ícone
   encolher/esticar junto com o texto e "descer" alguns pixels da linha de
   base; num contêiner de bloco ele fica colado à esquerda mesmo com o
   texto centralizado. As regras abaixo dão a cada ícone uma caixa própria
   e previsível.
   ===================================================================== */

/* Ícone ao lado de texto nunca encolhe nem desalinha verticalmente. */
.fancy-header i,
.fancy-bottom-nav i,
.fancy-cart-sidebar i,
.fancy-modal-box i,
.fancy-footer i,
.fancy-section-title i,
.fancy-category-header i {
	line-height: 1;
	flex-shrink: 0;
}

/* "Como funciona": ícone em medalhão centralizado acima do texto, no mesmo
   idioma visual da barra de benefícios. Antes era um `display:block` cru,
   que deixava o glifo encostado na borda esquerda do card. */
.fancy-how-steps li i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--fancy-rosa);
	font-size: 21px;
	color: var(--fancy-vermelho);
}

/* Carrinho vazio: ícone grande, centralizado sobre a mensagem. */
.fancy-cart-sidebar .cart-items .empty-cart i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--fancy-cinza-claro);
	font-size: 34px;
	color: #c9c9c9;
}

/* Botões redondos do carrinho (+ / − / lixeira): o glifo no centro exato. */
.fancy-cart-sidebar .cart-item .ci-qty button,
.fancy-cart-sidebar .cart-item .ci-remove,
.fancy-cart-sidebar .close-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.fancy-cart-sidebar .cart-footer .cart-shipping-note {
	margin: -6px 0 12px;
	font-size: 12px;
	color: var(--fancy-cinza-texto);
	text-align: right;
}

/* =====================================================================
   LOGIN MODAL — alternância Entrar / Criar conta (Conta segura)
   ===================================================================== */
.fancy-auth-switch {
	display: flex;
	gap: 6px;
	background: var(--fancy-cinza-claro);
	border-radius: 30px;
	padding: 4px;
	margin-bottom: 18px;
}
.fancy-auth-switch-btn {
	flex: 1;
	background: none;
	border: none;
	border-radius: 30px;
	padding: 9px 10px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fancy-cinza-texto);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.fancy-auth-switch-btn:hover { color: var(--fancy-vermelho); }
.fancy-auth-switch-btn.is-active {
	background: #fff;
	color: var(--fancy-vermelho);
	box-shadow: var(--fancy-sombra);
}

/* Campos que só existem em um dos modos. O atributo data-mode fica no
   <form>, então basta uma regra por modo. */
#fancy-panel-secure[data-mode="login"] .fancy-only-register,
#fancy-panel-secure[data-mode="register"] .fancy-only-login { display: none; }

.fancy-auth-hint a { color: var(--fancy-vermelho); text-decoration: underline; }

/* =====================================================================
   CELULAR — VITRINES
   (fica no fim do arquivo de propósito: sobrescreve as grades definidas
   lá em cima sem precisar de !important)

   O problema que este bloco resolve: NÃO existia regra de grade para
   telas pequenas. As vitrines ficavam no `repeat(auto-fill, minmax(200px,
   1fr))` do desktop, e num aparelho de ~390px de largura (menos 48px de
   respiro do container) só cabia UMA coluna. Como o card tem imagem
   quadrada, cada produto virava um bloco de ~340×340 e ocupava a tela
   inteira — a loja rolava um produto por vez, parecendo remendo em vez
   de layout de loja.

   Duas colunas fixas é o padrão de vitrine em celular: a cliente compara
   produtos lado a lado e vê 4 por tela em vez de 1.
   ===================================================================== */
@media (max-width: 600px) {
	/* Menos respiro lateral = mais largura útil para as duas colunas. */
	.fancy-container,
	.fancy-home .fancy-container { padding: 0 14px; }

	.fancy-product-grid,
	.fancy-plush-grid,
	.fancy-kits-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* ---- Títulos ---- */
	.fancy-section-title { font-size: 19px; }
	.fancy-section-title .icon { font-size: 19px; margin-right: 8px; }
	.fancy-section-sub { font-size: 13.5px; margin-bottom: 18px; }
	.fancy-category-header h1 { font-size: 23px; }

	/* ---- Barra de benefícios: 2 colunas, cartão compacto ---- */
	.fancy-benefits {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		margin-bottom: 28px;
	}
	.fancy-benefits .benefit {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 12px;
	}
	.fancy-benefits .benefit i { width: 34px; height: 34px; font-size: 14px; }
	.fancy-benefits .benefit strong { font-size: 12.5px; }
	.fancy-benefits .benefit span { font-size: 11px; }

	/* ---- Card de personalizado ---- */
	.fancy-product-card { padding: 12px 10px; }
	.fancy-product-card .card-image { margin-bottom: 9px; }
	.fancy-product-card .card-name { font-size: 13.5px; }
	.fancy-product-card .card-price { font-size: 15px; margin: 5px 0 9px; }
	.fancy-product-card .card-price .from { display: block; font-size: 11px; margin: 0 0 1px; }
	.fancy-product-card .card-actions .btn-add { font-size: 12px; padding: 9px 8px; }

	/* ---- Card de pelúcia ---- */
	.fancy-plush-card { padding: 12px 10px; }
	.fancy-plush-card .plush-name { font-size: 13px; }
	.fancy-plush-card .plush-price { font-size: 15px; margin: 5px 0 2px; }
	.fancy-plush-card .plush-installment { font-size: 11px; margin-bottom: 9px; }
	.fancy-plush-card .btn-add-plush { font-size: 12px; padding: 9px 8px; }

	/* ---- Card de arte de catálogo ---- */
	.fancy-art-card { padding: 7px 7px 9px; }
	.fancy-art-card .art-card-btn { font-size: 12px; padding: 8px 10px; gap: 5px; }

	/* ---- Kits ---- */
	.fancy-kit-card { padding: 14px 12px 12px; }
	.fancy-kit-card .kit-badge { font-size: 9.5px; padding: 3px 7px; top: 10px; right: 10px; }
	.fancy-kit-card .kit-qty { font-size: 26px; }
	.fancy-kit-card .kit-qty small { font-size: 12px; }
	.fancy-kit-card .kit-name {
		font-size: 12.5px;
		margin: 4px 0 8px;
		min-height: calc(2 * 1.3em);
		line-height: 1.3;
	}
	.fancy-kit-card .kit-prices { gap: 6px; }
	.fancy-kit-card .kit-full { font-size: 11px; }
	.fancy-kit-card .kit-total { font-size: 17px; }
	.fancy-kit-card .kit-unit { font-size: 10.5px; }
	.fancy-kit-card .kit-save { font-size: 10px; padding: 4px 8px; margin: 8px 0 10px; }
	.fancy-kit-card .kit-cta { font-size: 12.5px; padding: 9px 10px; }

	/* ---- Como funciona: 2 colunas ---- */
	.fancy-how-steps { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.fancy-how-steps li { padding: 22px 10px 14px; }
	.fancy-how-steps li i { width: 42px; height: 42px; font-size: 17px; margin-bottom: 9px; }
	.fancy-how-steps li strong { font-size: 12.5px; }
	.fancy-how-steps li span { font-size: 11px; }
}

/* =====================================================================
   CELULAR — CARROSSÉIS ARRASTÁVEIS COM O DEDO

   No desktop os carrosséis são movidos por JS (transform + setas). No
   toque isso fica engessado: a pessoa espera arrastar, e nenhum
   `transform` animado por JS reproduz bem a inércia e o encaixe que o
   próprio sistema entrega. Aqui a rolagem passa a ser NATIVA
   (`overflow-x: auto` + `scroll-snap`), e o JS se retira do caminho —
   ele detecta esta mesma largura, para o autoplay e limpa o transform
   inline (ver enterSwipeMode() em fancy-home.js / fancy-category.js).

   A largura dos itens é deliberadamente FRACIONÁRIA (41% / 38%): assim
   dois itens cabem inteiros e um pedaço do terceiro fica aparecendo na
   borda. É esse pedaço cortado que avisa "tem mais coisa aqui, arrasta"
   — sem ele o carrossel parece uma lista que acabou.

   As setas somem: no toque elas só ocupam espaço em cima do conteúdo.
   ===================================================================== */
@media (max-width: 768px) {

	/* ---------- Carrossel de artes (página de categoria) ---------- */
	.fancy-art-carousel .carousel-viewport {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-padding-left: 6px;
		/* Barra de rolagem escondida: no celular ela não aparece mesmo, e
		   num tablet híbrido ela cortaria o card de baixo. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.fancy-art-carousel .carousel-viewport::-webkit-scrollbar { display: none; }

	.fancy-art-carousel .carousel-track {
		/* !important porque o JS pode ter deixado um transform inline se a
		   janela mudou de modo no meio de uma animação. */
		transform: none !important;
		transition: none !important;
	}
	.fancy-art-carousel .carousel-item {
		flex: 0 0 41%;
		scroll-snap-align: start;
	}
	/* Os clones existem só para o giro infinito do desktop. Na rolagem
	   nativa eles apareceriam como produtos repetidos. */
	.fancy-art-carousel .carousel-item[aria-hidden="true"] { display: none; }
	.fancy-art-carousel .carousel-nav { display: none; }

	/* ---------- Carrossel de categorias (home) ---------- */
	.fancy-category-carousel-wrapper {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.fancy-category-carousel-wrapper::-webkit-scrollbar { display: none; }

	.fancy-category-carousel-track {
		transform: none !important;
		transition: none !important;
	}
	.fancy-category-carousel-item {
		flex: 0 0 38%;
		min-width: 0;
		scroll-snap-align: center;
	}
	.fancy-category-carousel-item[aria-hidden="true"] { display: none; }
	.fancy-category-carousel-controls { display: none; }

	/* Sem hover no toque: o zoom só atrapalharia durante o arrasto. */
	.fancy-category-carousel-item:hover { transform: none; }
	.fancy-category-carousel-item:hover img { transform: none; }
}

/* Telas bem estreitas: os cards de kit têm muito texto para 2 colunas. */
@media (max-width: 360px) {
	.fancy-kits-grid { grid-template-columns: 1fr; }
	.fancy-benefits { grid-template-columns: 1fr; }
}

/* Utilities */
.fancy-hidden { display: none !important; }