/* =========================================================
   Modo Natal — skin sazonal. Só carrega com o modo ligado
   (inc/cos-natal.php) e está todo preso a body.cos-natal:
   desligado, o site fica exatamente como era.
   ========================================================= */

body.cos-natal {
	--natal: #7d1a24;        /* vermelho escuro — 10:1 com texto branco */
	--natal-hover: #94222d;
	--natal-gold: #c8a45a;   /* só em linhas e ornamentos, nunca em texto */
	--natal-flake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4l2 1l2-1M12 2v6.5l3 1.72M17.93 6.27l.13 2.23l1.87 1.23M20.66 7l-5.63 3.25l.01 3.46M19.93 14.27l-1.87 1.23l-.13 2.23M20.66 17l-5.63-3.25l-2.99 1.74M14 20l-2-1l-2 1M12 22v-6.5l-3-1.72M6.07 17.73l-.13-2.23l-1.87-1.23M3.34 17l5.63-3.25l-.01-3.46M4.07 9.73l1.87-1.23l.13-2.23M3.34 7l5.63 3.25l2.99-1.74'/%3E%3C/svg%3E");
}
body.cos-natal--green {
	--natal: #16402f;
	--natal-hover: #1e5440;
}

/* ── Cor ──────────────────────────────────────────────────
   As faixas escuras do tema (todas pintadas com --ink) passam à cor de Natal. */
body.cos-natal :is(.utility, .cos-home-hero, .cos-newsletter, .footer) {
	background-color: var(--natal);
}

/* Botões: trocar o --ink no próprio botão muda fundo, contorno e hover de uma
   vez (incluindo as regras com !important do WooCommerce) sem tocar na cor do
   texto do resto do site. A lista cobre todos os botões cheios do tema — loja,
   carrinho, checkout e conta — e os estados "selecionado" que parecem botões
   (separadores de entrar/registar, item ativo da conta, página atual). */
body.cos-natal :is(
	.cta,
	.cos-btn,
	.button,
	.drawer-cta,
	.single_add_to_cart_button,
	.woocommerce-Button,
	.wp-block-button__link,
	input[type="submit"],
	#place_order,
	form:is(.login, .register, .lost_reset_password, .woocommerce-ResetPassword) button[type="submit"],
	.cos-filters__apply,
	.cos-filters__drawer-reset,
	.cos-welcome-tab,
	.cos-account-auth__tab[aria-selected="true"],
	.cos-account-nav__item.is-active .cos-account-nav__link,
	.woocommerce-pagination .current,
	.reviews-pagination .current
) {
	--ink: var(--natal);
	--ink-soft: var(--natal-hover);
}

body.cos-natal ::selection {
	background: var(--natal);
	color: var(--paper);
}

/* ── Linhas douradas ──────────────────────────────────────
   Por baixo do menu e no topo da faixa do rodapé (newsletter + rodapé são uma
   faixa só, por isso a linha fica na primeira das duas). */
body.cos-natal .nav {
	border-bottom: 1px solid var(--natal-gold);
}
body.cos-natal :is(.cos-newsletter, .footer) {
	border-top: 1px solid var(--natal-gold);
}
body.cos-natal .cos-newsletter + .footer {
	border-top: 0;
}

/* ── Banner da página inicial ─────────────────────────────
   Floco dourado antes do nome da loja. */
body.cos-natal .cos-home-hero__eyebrow::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	vertical-align: -3px;
	background: var(--natal-gold);
	-webkit-mask: var(--natal-flake) center / contain no-repeat;
	mask: var(--natal-flake) center / contain no-repeat;
}

/* Neve — só no banner. Uma camada ::before com flocos em mosaico que desce por
   transform. Os mosaicos têm 240, 160 e 480px de altura, por isso descer 480px
   fecha o ciclo sem salto; as larguras diferentes evitam que se note a grelha.
   Fica por baixo do scrim (::after), que a esbate junto ao texto. */
body.cos-natal--snow .cos-home-hero::before {
	content: "";
	position: absolute;
	inset: -480px 0 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 34px 52px, rgb(255 255 255 / 0.9), transparent 3px),
		radial-gradient(circle at 205px 170px, rgb(255 255 255 / 0.85), transparent 4px),
		radial-gradient(circle at 96px 200px, rgb(255 255 255 / 0.6), transparent 3px),
		radial-gradient(circle at 130px 30px, rgb(255 255 255 / 0.75), transparent 3.5px),
		radial-gradient(circle at 300px 90px, rgb(255 255 255 / 0.5), transparent 6px),
		radial-gradient(circle at 90px 380px, rgb(255 255 255 / 0.4), transparent 7px),
		radial-gradient(circle at 380px 300px, rgb(255 255 255 / 0.6), transparent 5px);
	background-size:
		230px 240px, 230px 240px, 230px 240px,
		170px 160px,
		410px 480px, 410px 480px, 410px 480px;
	animation: cos-natal-snow 26s linear infinite;
	will-change: transform;
}
@keyframes cos-natal-snow {
	to { transform: translate3d(0, 480px, 0); }
}
@media (prefers-reduced-motion: reduce) {
	body.cos-natal--snow .cos-home-hero::before { animation: none; }
}

/* ── Luzes ────────────────────────────────────────────────
   Duas grinaldas penduradas nas arestas do banner: uma por baixo do menu e
   outra na aresta de baixo. Sem JS nem elementos extra: dois SVG em mosaico de
   480px (2 arcos × 6 lâmpadas, a rodar vermelho, amarelo, verde, azul).
   ::before = fio + lâmpadas (parado). ::after = o brilho de cada lâmpada, que
   pisca dentro do próprio SVG (<animate>), cada uma com a sua duração e o seu
   atraso para nunca ficarem em sintonia. Só se repinta esta faixa de 48px. */
body.cos-natal--lights :is(.cos-home, .cos-home-hero + *) {
	position: relative;
}
body.cos-natal--lights :is(.cos-home, .cos-home-hero + *)::before,
body.cos-natal--lights :is(.cos-home, .cos-home-hero + *)::after {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);   /* full-bleed, como o banner */
	width: 100vw;
	height: 48px;
	z-index: 2;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='48'%3E%3Cpath d='M0 3Q120 41 240 3Q360 41 480 3' fill='none' stroke='%2323402f' stroke-width='1.2'/%3E%3Cpath fill='%2323402f' d='M18.5 8.5h3v3.5h-3zM58.5 17h3v3.5h-3zM98.5 21.2h3v3.5h-3zM138.5 21.2h3v3.5h-3zM178.5 17h3v3.5h-3zM218.5 8.5h3v3.5h-3zM258.5 8.5h3v3.5h-3zM298.5 17h3v3.5h-3zM338.5 21.2h3v3.5h-3zM378.5 21.2h3v3.5h-3zM418.5 17h3v3.5h-3zM458.5 8.5h3v3.5h-3z'/%3E%3Cg fill='%23d8343a'%3E%3Cellipse cx='20' cy='16' rx='3' ry='4'/%3E%3Cellipse cx='180' cy='24.5' rx='3' ry='4'/%3E%3Cellipse cx='340' cy='28.7' rx='3' ry='4'/%3E%3C/g%3E%3Cg fill='%23e9ae2f'%3E%3Cellipse cx='60' cy='24.5' rx='3' ry='4'/%3E%3Cellipse cx='220' cy='16' rx='3' ry='4'/%3E%3Cellipse cx='380' cy='28.7' rx='3' ry='4'/%3E%3C/g%3E%3Cg fill='%232ea05a'%3E%3Cellipse cx='100' cy='28.7' rx='3' ry='4'/%3E%3Cellipse cx='260' cy='16' rx='3' ry='4'/%3E%3Cellipse cx='420' cy='24.5' rx='3' ry='4'/%3E%3C/g%3E%3Cg fill='%233b7fd9'%3E%3Cellipse cx='140' cy='28.7' rx='3' ry='4'/%3E%3Cellipse cx='300' cy='24.5' rx='3' ry='4'/%3E%3Cellipse cx='460' cy='16' rx='3' ry='4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 480px 48px repeat-x;
}
body.cos-natal--lights :is(.cos-home, .cos-home-hero + *)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='48'%3E%3CradialGradient id='r'%3E%3Cstop offset='0' stop-color='%23ffe1de'/%3E%3Cstop offset='.3' stop-color='%23ff5a55' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ff3b3b' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='y'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.3' stop-color='%23ffd27a' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ffc35a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23dcffe8'/%3E%3Cstop offset='.3' stop-color='%234be38a' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%232fd475' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b'%3E%3Cstop offset='0' stop-color='%23dcecff'/%3E%3Cstop offset='.3' stop-color='%235aa8ff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%233d8bfd' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cg fill='url(%23r)'%3E%3Ccircle cx='20' cy='16' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='1.9s' begin='-0.3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='180' cy='24.5' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='2.9s' begin='-1.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='340' cy='28.7' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='2.3s' begin='-0.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3Cg fill='url(%23y)'%3E%3Ccircle cx='60' cy='24.5' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='2.7s' begin='-1.1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='220' cy='16' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='2.1s' begin='-0.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='380' cy='28.7' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='3.3s' begin='-2.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3Cg fill='url(%23g)'%3E%3Ccircle cx='100' cy='28.7' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='2.5s' begin='-1.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='260' cy='16' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='3.1s' begin='-0.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='420' cy='24.5' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='1.7s' begin='-1.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3Cg fill='url(%23b)'%3E%3Ccircle cx='140' cy='28.7' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='3.5s' begin='-0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='300' cy='24.5' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='2.2s' begin='-1.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='460' cy='16' r='12'%3E%3Canimate attributeName='opacity' values='1;0.1;1' dur='2.8s' begin='-2.1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
}
/* Sem movimento: ficam o fio e as lâmpadas coloridas, sem o brilho a piscar. */
@media (prefers-reduced-motion: reduce) {
	body.cos-natal--lights :is(.cos-home, .cos-home-hero + *)::after { content: none; }
}