/* Temas da loja: cores e ilustrações. Geometria e tipografia são compartilhadas. */
:root{--season-action:#ba3020;--season-night:#191919;--season-night-soft:#28201b;--season-highlight:#e8bd78;--season-surface:#faf7f2;--season-line:#e5ddd2;--season-pattern:none}
:root.tema-natal{--season-action:#21624b;--season-night:#102a23;--season-night-soft:#1c3e30;--season-highlight:#f2d28a;--season-surface:#f2f7f3;--season-line:#d5e5d9;--season-pattern:radial-gradient(circle at 3px 3px,#b18b3920 1.5px,transparent 2px);}
:root.tema-ano-novo{--season-action:#70551e;--season-night:#211d15;--season-night-soft:#393020;--season-highlight:#f3dca0;--season-surface:#faf8f1;--season-line:#e7dfca;--season-pattern:radial-gradient(circle at 3px 3px,#aa80252a 1px,transparent 2px);}
:root.tema-pascoa{--season-action:#764763;--season-night:#2c202c;--season-night-soft:#463147;--season-highlight:#edc4dd;--season-surface:#faf5f8;--season-line:#ead9e5;--season-pattern:repeating-linear-gradient(135deg,#875d7908 0 6px,transparent 6px 15px);}
:root.tema-dia-das-maes{--season-action:#973b5b;--season-night:#331c27;--season-night-soft:#502e3c;--season-highlight:#f7c0d1;--season-surface:#fff5f7;--season-line:#f1d6df;--season-pattern:radial-gradient(ellipse at 0 100%,#ca658a0f,transparent 75%);}
:root.tema-dia-dos-namorados{--season-action:#9e273c;--season-night:#31141d;--season-night-soft:#4e202d;--season-highlight:#ffc2b5;--season-surface:#fff5f3;--season-line:#f1d3d2;--season-pattern:radial-gradient(circle at 3px 3px,#b9385020 1px,transparent 2px);}
:root.tema-dia-das-criancas{--season-action:#5d43a2;--season-night:#231d3c;--season-night-soft:#3c2e60;--season-highlight:#ffe198;--season-surface:#f7f5ff;--season-line:#e0d9f2;--season-pattern:radial-gradient(circle at 4px 4px,#ffbd5128 2px,transparent 3px),radial-gradient(circle at 20px 16px,#3faaba20 2px,transparent 3px);}
:root.tema-festa-junina{--season-action:#9d411d;--season-night:#332016;--season-night-soft:#50321f;--season-highlight:#ffd487;--season-surface:#fff8ee;--season-line:#edddc4;--season-pattern:repeating-linear-gradient(90deg,#c26f2d0d 0 12px,transparent 12px 24px);}
:root.tema-oktoberfest{--season-action:#155b8b;--season-night:#102737;--season-night-soft:#1c425c;--season-highlight:#f5d390;--season-surface:#f2f8fc;--season-line:#cfe0ed;--season-pattern:repeating-linear-gradient(45deg,#2176a90c 0 12px,transparent 12px 24px);}
:root.tema-outubro-rosa{--season-action:#a52f5b;--season-night:#301d29;--season-night-soft:#4d2c3e;--season-highlight:#ffc2d6;--season-surface:#fff5f9;--season-line:#efd5e0;--season-pattern:linear-gradient(90deg,#f3a9c30c,transparent 70%);}
:root.tema-halloween{--season-action:#69417f;--season-night:#231729;--season-night-soft:#3e284c;--season-highlight:#ffc376;--season-surface:#f8f4fb;--season-line:#e1d5e9;--season-pattern:radial-gradient(circle at 4px 4px,#cc7b2620 1.5px,transparent 2.5px);}

/* Cada novo tema herda a composição; basta definir os dois desenhos em SVG.
   Os motivos ficam nas margens, sem cobrir banners, fotos ou controles. */
:root[class*="tema-"]{--season-corner:url('/assets/seasonal/ano-novo.svg');--season-accent:url('/assets/seasonal/ano-novo-accent.svg')}
:root.tema-natal{--season-corner:url('/assets/seasonal/natal.svg');--season-accent:url('/assets/seasonal/natal-accent.svg')}
:root.tema-ano-novo{--season-corner:url('/assets/seasonal/ano-novo.svg');--season-accent:url('/assets/seasonal/ano-novo-accent.svg')}
:root.tema-pascoa{--season-corner:url('/assets/seasonal/pascoa.svg');--season-accent:url('/assets/seasonal/pascoa-accent.svg')}
:root.tema-dia-das-maes{--season-corner:url('/assets/seasonal/dia-das-maes.svg');--season-accent:url('/assets/seasonal/dia-das-maes-accent.svg')}
:root.tema-dia-dos-namorados{--season-corner:url('/assets/seasonal/dia-dos-namorados.svg');--season-accent:url('/assets/seasonal/dia-dos-namorados-accent.svg')}
:root.tema-dia-das-criancas{--season-corner:url('/assets/seasonal/dia-das-criancas.svg');--season-accent:url('/assets/seasonal/dia-das-criancas-accent.svg')}
:root.tema-festa-junina{--season-corner:url('/assets/seasonal/festa-junina.svg');--season-accent:url('/assets/seasonal/festa-junina-accent.svg')}
:root.tema-oktoberfest{--season-corner:url('/assets/seasonal/oktoberfest.svg');--season-accent:url('/assets/seasonal/oktoberfest-accent.svg')}
:root.tema-outubro-rosa{--season-corner:url('/assets/seasonal/outubro-rosa.svg');--season-accent:url('/assets/seasonal/outubro-rosa-accent.svg')}
:root.tema-halloween{--season-corner:url('/assets/seasonal/halloween.svg?v=20261028-4');--season-accent:url('/assets/seasonal/halloween-accent.svg?v=20261028-4')}

/* Variáveis comuns mantêm todos os componentes alinhados ao tema ativo. */
:root[class*="tema-"]{--ember:var(--season-action);--ember-dark:var(--season-action);--copper:var(--season-action);--gold:var(--season-highlight);--store-green:var(--season-action);--store-dark:var(--season-night);--cream:#fff;--paper:#fff;--ink:#222;--muted:#666;--line:var(--season-line)}
:root[class*="tema-"] body{background:#fff}
:root[class*="tema-"] :is(.site-header,.site-header.is-scrolled,.seo-header){background:linear-gradient(110deg,var(--season-night),var(--season-night-soft));color:#fff;border:0;box-shadow:inset 0 -2px 0 var(--season-action)}
:root[class*="tema-"] .shop-nav{background:transparent}
:root[class*="tema-"] .utility-bar{border-bottom:1px solid #ffffff12}
:root[class*="tema-"] .utility-bar span,:root[class*="tema-"] .utility-bar a:hover,:root[class*="tema-"] .shop-nav a:hover{color:var(--season-highlight)}
:root[class*="tema-"] .header-search{border-color:#fff;background:#fff;color:#222}
:root[class*="tema-"] .header-search button{color:var(--season-action)}
:root[class*="tema-"] #bag-count{background:var(--season-action);color:#fff}
/* Faixa sem texto sobreposto às artes cadastradas no painel. */
.seasonal-ribbon{background:var(--season-pattern),var(--season-surface);background-size:32px 32px,auto;border-bottom:1px solid var(--season-line);color:var(--season-action)}
.seasonal-ribbon[hidden]{display:none!important}
.seasonal-ribbon-inner{display:flex;align-items:center;justify-content:center;gap:12px;width:min(1250px,calc(100% - 32px));min-height:44px;margin-inline:auto;padding:9px 0}
.seasonal-symbol{flex-shrink:0;font-size:1.15rem;line-height:1.3}
.seasonal-ribbon p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;min-width:0;margin:0;line-height:1.5;overflow-wrap:anywhere}
.seasonal-ribbon strong{font-size:.72rem;letter-spacing:.06em}
.seasonal-ribbon p>span{font-size:.73rem;color:#514853}
/* Banners continuam usando as imagens, textos e enquadramentos do painel. */
:root[class*="tema-"] .hero-copy::before{display:none;content:none}
:root[class*="tema-"] .hero .eyebrow,:root[class*="tema-"] .hero h1 em{color:var(--season-highlight)}
:root[class*="tema-"] .hero-actions .primary{background:var(--season-action);color:#fff}
:root[class*="tema-"] .hero-actions .primary:hover{background:color-mix(in srgb,var(--season-action) 82%,#000)}
:root[class*="tema-"] .banner-dot[aria-pressed="true"]{background:var(--season-highlight);border-color:var(--season-highlight)}
:root[class*="tema-"] .store-benefits{background:var(--season-surface);border-bottom:1px solid var(--season-line)}
:root[class*="tema-"] :is(.benefit-symbol,.store-benefits strong,.shelf-heading h2,.catalog-section h2,.eyebrow,.seo-eyebrow,.product-info-label){color:var(--season-action)}
:root[class*="tema-"] .category-card .category-name,:root[class*="tema-"] .category-card .category-caption{background:var(--season-night);box-shadow:inset 0 -2px 0 var(--season-action)}
:root[class*="tema-"] .category-card .category-caption{color:var(--season-highlight)}
:root[class*="tema-"] .category-card:hover{box-shadow:0 0 0 1px var(--season-line)}
:root[class*="tema-"] .shelf-heading h2{font-weight:400}
:root[class*="tema-"] .shelf-arrow:hover{border-color:var(--season-action);color:var(--season-action);background:var(--season-surface)}
:root[class*="tema-"] .catalog-section{background:var(--season-surface);border-block:1px solid var(--season-line)}
:root[class*="tema-"] :is(.product-card,.product-media,.product-content,.seo-card,.seo-card-image,.seo-product-photo){background:#fff}
:root[class*="tema-"] .product-card{box-shadow:none;border:0}
:root[class*="tema-"] .product-card:hover{box-shadow:inset 0 0 0 1px var(--season-line)}
:root[class*="tema-"] .product-action .primary{background:var(--season-action);color:#fff;box-shadow:none}
:root[class*="tema-"] .product-action .primary:hover{background:color-mix(in srgb,var(--season-action) 82%,#000)}
:root[class*="tema-"] :is(.catalog-toolbar form,.filter-field){background:#fff;border-color:var(--season-line)}
html[class*="tema-"] .filter-field:focus-within{border-color:var(--ember);box-shadow:0 0 0 2px color-mix(in srgb,var(--ember) 15%,transparent)}
html[class*="tema-"] .filter-field select:focus-visible{outline:none}
:root[class*="tema-"] .occasion-card{background:var(--season-surface);border:1px solid var(--season-line);box-shadow:none;color:#222}
:root[class*="tema-"] .occasion-icon{color:var(--season-action)}
:root[class*="tema-"] .how-section{background:var(--season-surface);color:#222}
:root[class*="tema-"] .steps li{border-color:var(--season-line)}
:root[class*="tema-"] .steps li>span{color:var(--season-action);border-color:var(--season-line)}
:root[class*="tema-"] .whatsapp-cta{background:var(--season-action)}
:root[class*="tema-"] .whatsapp-cta-inner{background:none;border:0;box-shadow:none}
:root[class*="tema-"] .whatsapp-cta h2,:root[class*="tema-"] .whatsapp-cta .eyebrow,:root[class*="tema-"] .whatsapp-cta p{color:#fff}
:root[class*="tema-"] .whatsapp-cta-button{background:var(--season-night);color:#fff}
:root[class*="tema-"] footer{background:linear-gradient(110deg,var(--season-night),var(--season-night-soft));border:0;box-shadow:inset 0 2px 0 var(--season-action)}
:root[class*="tema-"] .footer-grid h2,:root[class*="tema-"] .footer-grid>div>h2,:root[class*="tema-"] .seo-footer-grid strong{color:var(--season-highlight)}
:root[class*="tema-"] .footer-bottom{border-color:#ffffff20}
:root[class*="tema-"] .seo-category-hero,:root[class*="tema-"] .seo-cta{background:var(--season-night);color:#fff}
:root[class*="tema-"] .seo-category-hero .seo-eyebrow{color:var(--season-highlight)}
:root[class*="tema-"] .seo-category-nav a[aria-current="page"]{background:var(--season-action);border-color:var(--season-action);color:#fff}
:root[class*="tema-"] .seo-button:not(.whatsapp):not(.seo-card-whatsapp),:root[class*="tema-"] .seo-text-link{background:var(--season-action);color:#fff}
:root[class*="tema-"] :is(.seo-info-block,.seo-product-info,.product-info-stack){border-color:var(--season-line);background:#fff}
:root[class*="tema-"] .thumbnails button[aria-pressed="true"],:root[class*="tema-"] .seo-product-thumbnails a[aria-current="true"]{border-color:var(--season-action)}
:root[class*="tema-"] .payment-option{background:#fff;border-color:var(--season-line);color:#222}
:root[class*="tema-"] .bag-total{color:var(--season-action)!important}
/* Atendimento sempre reconhecível, em qualquer campanha. */
html[class*="tema-"] .whatsapp-fab{color:#fff;background:#25d366;border-color:#fff;box-shadow:0 8px 22px rgba(14,81,42,.3)}
html[class*="tema-"] .whatsapp-fab:hover{background:#25d366;box-shadow:0 12px 28px rgba(14,81,42,.42)}
:root[class*="tema-"] .product-action .primary.whatsapp,:root[class*="tema-"] .seo-button.whatsapp,:root[class*="tema-"] .seo-card-whatsapp,:root[class*="tema-"] .detail-availability .whatsapp{background:#176b3a;color:#fff}
:root[class*="tema-"] .product-action .primary.whatsapp:hover,:root[class*="tema-"] .seo-button.whatsapp:hover{background:#11532c}
/* Camada ornamental estática: sem movimentos, eventos de mouse ou texto acessível.
   O cabeçalho mantém sua posição sticky; as decorações não criam rolagem. */
:root[class*="tema-"] :is(.site-header,.seo-header,footer,.catalog-section,.seo-category-hero){isolation:isolate}
:root[class*="tema-"] :is(footer,.catalog-section,.seo-category-hero){position:relative}
:root[class*="tema-"] :is(.site-header,.seo-header,footer,.catalog-section,.seo-category-hero)::before,
:root[class*="tema-"] :is(.site-header,.seo-header,footer,.catalog-section,.seo-category-hero)::after{
 content:"";position:absolute;inset:0 auto auto 0;width:clamp(90px,11vw,180px);aspect-ratio:9/7;
 background:var(--season-highlight);mask:var(--season-corner) left top/contain no-repeat;
 pointer-events:none;user-select:none;z-index:-1;opacity:.5;
}
:root[class*="tema-"] :is(.site-header,.seo-header,footer,.catalog-section,.seo-category-hero)::after{inset:0 0 auto auto;transform:scaleX(-1)}
:root[class*="tema-"] :is(.catalog-section)::before,
:root[class*="tema-"] :is(.catalog-section)::after{width:clamp(64px,8vw,125px);background:var(--season-action);opacity:.17}
:root[class*="tema-"] footer::before,:root[class*="tema-"] footer::after{opacity:.32}
/* Um pequeno motivo acompanha os títulos, repetindo a identidade ao longo da loja. */
:root[class*="tema-"] :where(.shelf-heading,.catalog-section .section-heading,.how-section .eyebrow)::before{
 content:"";display:block;flex:none;width:48px;height:36px;margin:0 auto 8px;
 background:var(--season-action);mask:var(--season-accent) center/contain no-repeat;
 pointer-events:none;user-select:none;opacity:.8;
}
:root[class*="tema-"] .shelf-heading::before{width:38px;height:30px;margin:0}
:root[class*="tema-"] .how-section .eyebrow::before{margin:0 0 10px;width:40px;height:30px}
@media(max-width:760px){
 :root[class*="tema-"] :is(.site-header,.seo-header)::before,
 :root[class*="tema-"] :is(.site-header,.seo-header)::after{width:76px;opacity:.32}
 :root[class*="tema-"] :is(.catalog-section)::before,
 :root[class*="tema-"] :is(.catalog-section)::after{width:56px;opacity:.13}
 :root[class*="tema-"] footer::before,:root[class*="tema-"] footer::after{width:88px;opacity:.25}
 :root[class*="tema-"] .shelf-heading::before{width:32px;height:24px;margin:0 auto 8px}
 .seasonal-ribbon-inner{justify-content:flex-start;gap:9px;min-height:44px;padding-block:10px}
 .seasonal-ribbon p{justify-content:flex-start;gap:2px 10px}
 .seasonal-ribbon strong{font-size:.65rem}.seasonal-ribbon p>span{font-size:.66rem}
 .seasonal-symbol{font-size:1.05rem}
}

