/*
 * Sueca · movimento e micro-interações (camada sobre o protótipo).
 * Estados "escondidos para animar" só valem com html.sx-motion (posto por JS no início do body e só sem
 * prefers-reduced-motion) — sem JS ou com movimento reduzido, tudo aparece parado.
 */
:root{--sx-ease:cubic-bezier(.2,.8,.2,1);--sx-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---------- revelar ao rolar (js/sueca-motion marca .sx-reveal → .is-in) ---------- */
.sx-motion .sx .sx-reveal{opacity:0;transform:translateY(12px);transition:opacity .45s var(--sx-ease),transform .45s var(--sx-ease)!important;transition-delay:var(--sx-d,0ms)!important}
.sx-motion .sx .sx-reveal.is-in{opacity:1;transform:none}

/* ---------- banners principais (hero e cabeçalhos): sem animação, a pedido ---------- */
.sx .hero-dot{transition:width .35s var(--sx-ease),background-color .25s,opacity .25s}

/* ---------- botões ---------- */
.sx .btn,.sx .cartbtn,.sx .side-action,.sx .promo-popup>a{transition:background-color .2s,color .2s,border-color .2s,box-shadow .25s var(--sx-ease),transform .2s var(--sx-ease)}
.sx .btn:hover,.sx .cartbtn:hover,.sx .side-action:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(181,24,26,.18)}
.sx .btn-outline:hover{box-shadow:0 6px 14px rgba(181,24,26,.1)}
.sx .btn:active,.sx .cartbtn:active,.sx .side-action:active,.sx .iconbtn:active,.sx .product-qty-btn:active,.sx .favorite-btn:active{transform:scale(.96)!important;transition-duration:.08s}
.sx .add-card-cart.is-busy{pointer-events:none;opacity:.85}
.sx .add-card-cart.is-busy .card-cart-icon{animation:sx-cart-roll .7s ease-in-out infinite}
@keyframes sx-cart-roll{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* "pop" quando o estado muda (favorito, no carrinho, contador) */
.sx .sx-pop{animation:sx-pop .42s var(--sx-spring)}
@keyframes sx-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.sx .cartcount.sx-bump{animation:sx-bump .55s var(--sx-spring)}
@keyframes sx-bump{0%{transform:scale(1)}35%{transform:scale(1.45);background:#fff;color:#B5181A}100%{transform:scale(1)}}
.sx .cartbtn.sx-bump .cart-icon{animation:sx-wiggle .5s ease-in-out}
@keyframes sx-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}60%{transform:rotate(9deg)}}
.sx .product-qty-stepper{transition:opacity .25s var(--sx-ease),transform .25s var(--sx-ease)}
.sx .product-qty-value{display:inline-block;transition:transform .2s var(--sx-ease)}

/* ---------- header ---------- */
.sx .menu a{position:relative}
.sx .menu a:after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;background:#ff4952;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--sx-ease)}
.sx .menu a:hover:after,.sx .menu a:focus-visible:after{transform:scaleX(1)}
.sx .search{transition:border-color .2s,box-shadow .25s var(--sx-ease),background-color .2s}
.sx .search:focus-within{border-color:#ff4952;box-shadow:0 0 0 3px rgba(255,73,82,.18)}
.sx .search button svg{transition:transform .25s var(--sx-spring)}
.sx .search:focus-within button svg,.sx .search button:hover svg{transform:scale(1.15) rotate(-8deg)}
.sx .iconbtn{transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--sx-ease)}
.sx .iconbtn:hover{transform:translateY(-1px)}
@media (max-width:1100px){
  .sx-motion .sx .menu.open{animation:sx-drop .32s var(--sx-ease) both}
  .sx-motion .sx .menu.open a{animation:sx-fade-up .35s var(--sx-ease) both}
  .sx-motion .sx .menu.open a:nth-child(2){animation-delay:.04s}
  .sx-motion .sx .menu.open a:nth-child(3){animation-delay:.08s}
  .sx-motion .sx .menu.open a:nth-child(4){animation-delay:.12s}
  .sx-motion .sx .menu.open a:nth-child(5){animation-delay:.16s}
  .sx-motion .sx .menu.open a:nth-child(6){animation-delay:.2s}
}
@keyframes sx-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes sx-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- cards e listas ---------- */
.sx .cat-card img{transition:transform .55s var(--sx-ease)}
.sx .cat-card:hover img{transform:scale(1.05)}
.sx .circle-arrow{transition:transform .3s var(--sx-spring),background-color .2s}
.sx .cat-card:hover .circle-arrow{transform:translateX(5px)}
.sx .product-detail-link .product-detail-arrow{display:inline-block;transition:transform .25s var(--sx-spring)}
.sx .product-detail-link:hover .product-detail-arrow{transform:translate(3px,-3px)}
.sx .service-shop-image img{transition:transform .6s var(--sx-ease)}
.sx .service-clickable-card:hover .service-shop-image img{transform:scale(1.05)}
.sx .side a{transition:background-color .2s,color .2s,padding-left .25s var(--sx-ease)}
.sx .side a:hover{padding-left:22px}
.sx .side a span{transition:transform .25s var(--sx-spring)}
.sx .side a:hover span{transform:translateX(3px)}
.sx .pill{transition:border-color .2s,color .2s,transform .2s var(--sx-ease),box-shadow .2s}
.sx .pill:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.06)}
.sx .branch-card{transition:border-color .25s,transform .25s var(--sx-ease)}
.sx .branch-card:hover{border-color:#B5181A;transform:translateY(-3px)}
.sx .sx-pager .pages-items .page,.sx .sx-pager .pages-items .action{transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--sx-ease)}
.sx .sx-pager .pages-items a:hover{transform:translateY(-2px)}

/* ---------- promoções: aba lateral + popup ancorado no centro da aba ---------- */
.sx .promo{transition:transform .25s var(--sx-ease),box-shadow .25s,background-color .2s}
.sx .promo:hover{transform:translateX(-4px);box-shadow:-6px 6px 18px rgba(181,24,26,.3)}
.sx .promo.is-calling{animation:sx-promo-call 1.8s ease-out .2s 2}
@keyframes sx-promo-call{0%{box-shadow:0 0 0 0 rgba(255,0,0,.45)}70%{box-shadow:0 0 0 14px rgba(255,0,0,0)}100%{box-shadow:0 0 0 0 rgba(255,0,0,0)}}
.sx .promo-popup.is-anchored{bottom:auto!important;transform-origin:100% var(--sx-arrow-y,50%)}
.sx .promo-popup.is-anchored:after{right:-8px!important;bottom:auto!important;top:var(--sx-arrow-y,50%)!important;margin-top:-8px;transform:rotate(-45deg)!important}
.sx .promo-popup.is-visible{animation:sx-promo-in .62s var(--sx-ease) both!important}
.sx .promo-popup.is-leaving{animation:sx-promo-out .3s ease-in both!important;pointer-events:none}
@keyframes sx-promo-in{0%{opacity:0;transform:translateX(26px) scale(.9)}60%{opacity:1;transform:translateX(-4px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes sx-promo-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(18px) scale(.94)}}
.sx-motion .sx .promo-popup.is-visible>*{animation:sx-fade-up .45s var(--sx-ease) both}
.sx-motion .sx .promo-popup.is-visible>.promo-popup-kicker{animation-delay:.18s}
.sx-motion .sx .promo-popup.is-visible>strong{animation-delay:.26s}
.sx-motion .sx .promo-popup.is-visible>p{animation-delay:.34s}
.sx-motion .sx .promo-popup.is-visible>a{animation-delay:.42s}
.sx .promo-popup>a{position:relative;overflow:hidden}
.sx .promo-popup>a:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sx-shine 3.2s ease-in-out 1.2s infinite}
@keyframes sx-shine{0%,70%{left:-60%}100%{left:130%}}
.sx .promo-popup-close{transition:background-color .2s,color .2s,transform .25s var(--sx-spring)}
.sx .promo-popup-close:hover{transform:rotate(90deg)}

/* ---------- botão flutuante do WhatsApp ---------- */
/* entrada com mola (fill backwards: depois da entrada o hover/clique voltam a mandar no transform) */
.sx .float-wa{isolation:isolate;animation:sx-wa-in .7s var(--sx-spring) .9s backwards;transition:transform .28s var(--sx-spring),box-shadow .25s ease,opacity .25s ease}
/* anel que pulsa de tempos em tempos */
.sx .float-wa:before{content:'';position:absolute;inset:0;border-radius:50%;background:#1ccc66;z-index:-1;animation:sx-wa-ring 3.2s ease-out 2.4s infinite;pointer-events:none}
/* etiqueta "Fale com a Sueca": no hover (desktop) e uma vez sozinha na 1ª visita (js/sueca-motion, classe is-hint) */
.sx .float-wa:after{content:'Fale com a Sueca';position:absolute;right:calc(100% + 12px);top:50%;transform:translate(10px,-50%) scale(.96);opacity:0;white-space:nowrap;background:#111;color:#fff;font:700 13px var(--font-body);letter-spacing:.01em;padding:10px 15px;border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.25);pointer-events:none;transition:opacity .25s ease,transform .35s var(--sx-spring)}
.sx .float-wa:hover:after,.sx .float-wa:focus-visible:after,.sx .float-wa.is-hint:after{opacity:1;transform:translate(0,-50%) scale(1)}
.sx .float-wa:hover,.sx .float-wa:focus-visible{transform:scale(1.08);box-shadow:0 12px 30px rgba(28,204,102,.45)}
.sx .float-wa:active{transform:scale(.9);transition-duration:.1s}
.sx .float-wa:hover svg,.sx .float-wa.is-nudge svg{animation:sx-wa-wiggle .7s ease}
html.sx-drawer-open .sx .float-wa{opacity:0;pointer-events:none;transform:scale(.6)}
@keyframes sx-wa-in{0%{opacity:0;transform:translateY(24px) scale(.4)}60%{opacity:1;transform:translateY(-4px) scale(1.08)}100%{opacity:1;transform:none}}
@keyframes sx-wa-ring{0%{transform:scale(1);opacity:.5}75%,100%{transform:scale(1.75);opacity:0}}
@keyframes sx-wa-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}

/* ---------- movimento reduzido: sem animações decorativas ---------- */
@media (prefers-reduced-motion:reduce){
  .sx *,.sx *:before,.sx *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* atraso escalonado da entrada (definido pelo js/sueca-motion em data-sx-d) */
.sx-reveal[data-sx-d="1"]{--sx-d:50ms}.sx-reveal[data-sx-d="2"]{--sx-d:100ms}.sx-reveal[data-sx-d="3"]{--sx-d:150ms}.sx-reveal[data-sx-d="4"]{--sx-d:200ms}