/* Secret SHOP — motion system (3.6.0)
 * Restraint first: one hero moment, quiet scroll reveals, action feedback.
 * Only transform + opacity are animated. Everything is off under prefers-reduced-motion,
 * and nothing is hidden unless motion.js has confirmed it can reveal it (html.ss-motion).
 */
:root{
  --ss-ease-out:cubic-bezier(.22,1,.36,1);   /* entering, settling */
  --ss-ease-in:cubic-bezier(.4,0,1,1);       /* exiting, faster */
  --ss-ease-emph:cubic-bezier(.16,1,.3,1);   /* hero beats */
  --ss-dur-micro:160ms;
  --ss-dur-state:220ms;
  --ss-dur-reveal:640ms;
  --ss-rise:20px;
  --ss-stagger:70ms;
}
@media (max-width:700px){:root{--ss-rise:14px;--ss-stagger:45ms;--ss-dur-reveal:520ms}}

/* ---------- 1. Hero moment: copy follows the slide in reading order ----------
 * Only after home-carousel.js marks the carousel ready, so the first paint (LCP) is never hidden:
 * the first active slide already sits in its end state; the beats play on every slide change. */
body.home .ss-home-carousel.is-ready .ss-home-hero-slide:not(.is-active) .ss-home-hero__copy>*{
  opacity:0;transform:translate3d(0,var(--ss-rise),0);
  transition:opacity 180ms var(--ss-ease-in),transform 180ms var(--ss-ease-in);
}
body.home .ss-home-carousel.is-ready .ss-home-hero-slide.is-active .ss-home-hero__copy>*{
  opacity:1;transform:none;
  transition:opacity 700ms var(--ss-ease-out) var(--ss-beat,0ms),transform 900ms var(--ss-ease-emph) var(--ss-beat,0ms);
}
/* image settles first (carousel), then eyebrow → headline → subtitle → CTA */
body.home .ss-home-hero__copy>:nth-child(1){--ss-beat:220ms}
body.home .ss-home-hero__copy>:nth-child(2){--ss-beat:300ms}
body.home .ss-home-hero__copy>:nth-child(3){--ss-beat:380ms}
body.home .ss-home-hero__copy>:nth-child(4){--ss-beat:460ms}

/* ---------- 2. Section reveal on scroll (once) ---------- */
html.ss-motion [data-ss-reveal]{
  opacity:0;transform:translate3d(0,var(--ss-rise),0);
}
html.ss-motion [data-ss-reveal].is-revealed{
  opacity:1;transform:none;
  transition:opacity var(--ss-dur-reveal) var(--ss-ease-out) var(--ss-delay,0ms),
             transform calc(var(--ss-dur-reveal) + 160ms) var(--ss-ease-out) var(--ss-delay,0ms);
}
/* motion.js removes data-ss-reveal once settled, so cards get their own hover transforms back. */

/* ---------- 3. Add to cart (3.6.1) ----------
 * Apple's logic: the control you pressed answers in place. No new elements, no layout shift,
 * no extra link — the button morphs cart → spinner → drawn check, holds, then returns.
 * Woo's own .added state, check glyph and "Ver carrinho" link are neutralised (motion.js
 * strips them); the header count simply arrives with the new number. */
.ss-product-card__price-row>a.added_to_cart.wc-forward{display:none!important}
body .ss-product-card__price-row>.ss-product-card__cart{
  position:relative!important;overflow:visible!important;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--ss-dur-state) var(--ss-ease-out),border-color var(--ss-dur-state) var(--ss-ease-out),color var(--ss-dur-state) var(--ss-ease-out),transform 140ms var(--ss-ease-out)!important;
}
/* 44px touch target around the 34px visual button */
body .ss-product-card__price-row>.ss-product-card__cart::before{content:""!important;position:absolute;inset:-5px;display:block!important}
body .ss-product-card__price-row>.ss-product-card__cart::after{content:none!important;display:none!important}
body .ss-product-card__price-row>.ss-product-card__cart:active{transform:scale(.92)}
body .ss-product-card__price-row>.ss-product-card__cart>svg:not(.ss-card-check){
  transition:opacity 180ms var(--ss-ease-out),transform 220ms var(--ss-ease-out);
}
.ss-card-check,.ss-card-spinner{position:absolute;left:50%;top:50%;pointer-events:none;opacity:0}
.ss-card-check{width:18px!important;height:18px!important;margin:-9px 0 0 -9px;fill:none!important;stroke:#fff!important;stroke-width:1.8!important;stroke-linecap:round;stroke-linejoin:round;transform:scale(.7);transition:opacity 160ms var(--ss-ease-out),transform 260ms var(--ss-ease-emph)}
.ss-card-check path{stroke-dasharray:1;stroke-dashoffset:1}
.ss-card-spinner{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;transition:opacity 140ms var(--ss-ease-out)}
@keyframes ss-spin{to{transform:rotate(360deg)}}
/* loading */
body .ss-product-card__price-row>.ss-product-card__cart.loading{cursor:progress;opacity:1!important}
body .ss-product-card__price-row>.ss-product-card__cart.loading>svg:not(.ss-card-check){opacity:0;transform:scale(.6)}
body .ss-product-card__price-row>.ss-product-card__cart.loading .ss-card-spinner{opacity:.85;animation:ss-spin 700ms linear infinite}
/* added: wine fill, check draws itself */
body .ss-product-card__price-row>.ss-product-card__cart.ss-is-added{
  border-color:#8c1a30!important;background:#6e1020!important;color:#fff!important;
}
body .ss-product-card__price-row>.ss-product-card__cart.ss-is-added>svg:not(.ss-card-check){opacity:0;transform:scale(.6)}
body .ss-product-card__price-row>.ss-product-card__cart.ss-is-added .ss-card-check{opacity:1;transform:none}
body .ss-product-card__price-row>.ss-product-card__cart.ss-is-added .ss-card-check path{stroke-dashoffset:0;transition:stroke-dashoffset 320ms var(--ss-ease-out) 80ms}
/* returning to the cart icon: the check fades, the cart scales back in */
body .ss-product-card__price-row>.ss-product-card__cart.ss-is-leaving .ss-card-check{opacity:0;transform:scale(.85)}

/* Touch screens keep Woo's neon hover after a tap; gate it to real pointers. */
@media (hover:none),(pointer:coarse){
  body .ss-product-card__price-row>.ss-product-card__cart:not(.ss-is-added):hover{border-color:#303030!important;background:transparent!important;color:var(--ss-white,#f7f7f5)!important}
}

/* Header count: the new number arrives (no bounce, no wiggle). */
@keyframes ss-count-in{
  from{opacity:.25;transform:scale(.6)}
  to{opacity:1;transform:none}
}
.ss-cart-count.ss-pop{animation:ss-count-in 300ms var(--ss-ease-out)}

/* Card price formatting: "no Pix" never orphans, card line stays one unit per phrase. */
.ss-product-card__pix-price small{white-space:nowrap}
.ss-product-card__card-price>span{white-space:nowrap}
.ss-product-card__prices{min-width:0}

/* ---------- 4. Hover: lift (real pointers only) ---------- */
@media (hover:hover) and (pointer:fine){
  .ss-home-category{transition:transform var(--ss-dur-state) var(--ss-ease-out)}
  .ss-home-category:hover{transform:translate3d(0,-4px,0)}
  .ss-home-round{transition:transform var(--ss-dur-state) var(--ss-ease-out)}
  .ss-home-category:hover .ss-home-round{transform:translate3d(4px,0,0)}
}

@media (prefers-reduced-motion:reduce){
  body.home .ss-home-carousel.is-ready .ss-home-hero-slide .ss-home-hero__copy>*{opacity:1!important;transform:none!important;transition:none!important}
  html.ss-motion [data-ss-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .ss-cart-count.ss-pop{animation:none!important}
  .ss-card-check,.ss-card-check path,.ss-card-spinner,body .ss-product-card__price-row>.ss-product-card__cart,body .ss-product-card__price-row>.ss-product-card__cart>svg{transition:none!important}
  .ss-card-spinner{animation:none!important}
  .ss-home-category,.ss-home-category:hover,.ss-home-round{transform:none!important;transition:none!important}
}