:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --amber:#F59E0B;
}

/* ── Scroll progress ── */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--blue),var(--amber));z-index:1000;pointer-events:none}

/* ── Header on scroll ── */
header{transition:box-shadow .35s var(--ease-out),background-color .35s var(--ease-out)}
header.is-scrolled{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);box-shadow:0 8px 30px -12px rgba(15,62,117,.25)}
.logo img{transition:transform .5s var(--ease-spring)}
.logo:hover img{transform:scale(1.04) rotate(-1deg)}

/* ── Nav underline ── */
.nav-scroll a{position:relative}
.nav-scroll a::after{content:'';position:absolute;left:15px;right:15px;bottom:0;height:2px;background:var(--amber);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease-out)}
.nav-scroll a:hover::after,.nav-scroll a.active::after{transform:scaleX(1)}
.nav-scroll a.active{border-bottom-color:transparent}

/* ── Search ── */
.search-bar{transition:border-color .25s,box-shadow .35s var(--ease-out)}
.search-bar:focus-within{box-shadow:0 0 0 4px rgba(27,95,168,.12)}
.search-bar button svg{transition:transform .35s var(--ease-spring)}
.search-bar button:hover svg{transform:scale(1.15) rotate(-8deg)}

/* ── Icon buttons & cart badge ── */
.icon-btn svg{transition:transform .35s var(--ease-spring)}
.icon-btn:hover svg{transform:translateY(-2px)}
.cart-badge.bump,.m-badge.bump{animation:badge-bump .6s var(--ease-spring)}
@keyframes badge-bump{0%{transform:scale(1)}35%{transform:scale(1.55)}100%{transform:scale(1)}}
.cart-wrap .icon-btn.shake svg{animation:cart-shake .6s var(--ease-out)}
@keyframes cart-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}

/* ── Buttons ── */
.btn,.btn-hero,.btn-efapel-red,.btn-efapel,.add-cart,.add-cart-large,.checkout-btn,.promo-cta{position:relative;overflow:hidden;isolation:isolate;transition:background-color .25s,color .25s,border-color .25s,transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.btn::before,.btn-hero::before,.btn-efapel-red::before,.btn-efapel::before,.add-cart::before,.add-cart-large::before,.checkout-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease-out)}
.btn:hover::before,.btn-hero:hover::before,.btn-efapel-red:hover::before,.btn-efapel:hover::before,.add-cart:hover::before,.add-cart-large:hover::before,.checkout-btn:hover::before{transform:translateX(120%)}
.btn-hero:hover,.btn-efapel-red:hover,.btn-efapel:hover,.add-cart-large:hover,.checkout-btn:hover{transform:translateY(-2px)}
.btn-hero-primary:hover{box-shadow:0 12px 28px -10px rgba(245,158,11,.7)}
.btn-efapel-red:hover{box-shadow:0 12px 28px -10px rgba(232,64,28,.7)}
.add-cart-large:hover,.checkout-btn:hover{box-shadow:0 12px 28px -10px rgba(27,95,168,.6)}
.btn:active,.btn-hero:active,.add-cart:active,.add-cart-large:active{transform:scale(.97)}
.btn-hero svg,.btn-efapel-red svg,.promo-cta svg,.see-all svg{transition:transform .35s var(--ease-spring)}
.btn-hero:hover svg,.btn-efapel-red:hover svg,.promo-card:hover .promo-cta svg,.see-all:hover svg{transform:translateX(4px)}
.see-all:hover{text-decoration:none}

/* add-to-cart states */
.add-cart.is-loading,.add-cart-large.is-loading{pointer-events:none;opacity:.85}
.add-cart.is-done,.add-cart-large.is-done{background:var(--green)!important}
.add-cart .btn-check,.add-cart-large .btn-check{animation:pop-in .45s var(--ease-spring)}
@keyframes pop-in{from{transform:scale(0) rotate(-45deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

/* ── Product cards ── */
.prod-card{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .3s;will-change:transform}
.prod-card:hover{transform:translateY(-6px);border-color:rgba(27,95,168,.35);box-shadow:0 22px 40px -18px rgba(15,62,117,.35)}
.prod-img{overflow:hidden;background:radial-gradient(circle at 50% 40%,#fff 0%,var(--bg) 75%)}
.prod-img img{transition:transform .8s var(--ease-out),opacity .6s var(--ease-out)}
.prod-card:hover .prod-img img{transform:scale(1.08)}
.prod-badge{z-index:1;animation:badge-in .6s var(--ease-spring) both .2s}
@keyframes badge-in{from{transform:translateY(-8px) scale(.8);opacity:0}}
.prod-name a{transition:color .2s}
.prod-card:hover .prod-name a{color:var(--blue)}

/* Lazy image fade-in */
.js img.fade-img{opacity:0}
.js img.fade-img.is-loaded{opacity:1}

/* ── Category cards ── */
.cat-card{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),background-color .3s,border-color .3s}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px -18px rgba(15,62,117,.45)}
.cat-icon{transition:background-color .35s,transform .6s var(--ease-spring)}
.cat-card:hover .cat-icon{transform:scale(1.1) rotate(-6deg)}

/* ── Hero ── */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);z-index:-1;pointer-events:none}
.hero::before{width:420px;height:420px;background:rgba(245,158,11,.22);top:-160px;right:-80px;animation:orb-a 14s ease-in-out infinite alternate}
.hero::after{width:360px;height:360px;background:rgba(56,140,230,.35);bottom:-180px;left:-100px;animation:orb-b 18s ease-in-out infinite alternate}
@keyframes orb-a{to{transform:translate(-120px,80px) scale(1.15)}}
@keyframes orb-b{to{transform:translate(140px,-60px) scale(1.2)}}
.hero-grid-lines{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%)}
.hero h1 em{background:linear-gradient(90deg,#F59E0B,#FCD34D,#F59E0B);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine-text 5s linear infinite}
@keyframes shine-text{to{background-position:200% center}}
.hero-inner>div:first-child>*,.efapel-hero-inner>*:first-child>*{animation:rise-in .9s var(--ease-out) both}
.hero-inner>div:first-child>*:nth-child(1),.efapel-hero-inner>*:first-child>*:nth-child(1){animation-delay:.05s}
.hero-inner>div:first-child>*:nth-child(2),.efapel-hero-inner>*:first-child>*:nth-child(2){animation-delay:.15s}
.hero-inner>div:first-child>*:nth-child(3),.efapel-hero-inner>*:first-child>*:nth-child(3){animation-delay:.25s}
.hero-inner>div:first-child>*:nth-child(4),.efapel-hero-inner>*:first-child>*:nth-child(4){animation-delay:.35s}
.hero-inner>div:first-child>*:nth-child(5),.efapel-hero-inner>*:first-child>*:nth-child(5){animation-delay:.45s}
.hero-inner>div:first-child>*:nth-child(n+6),.efapel-hero-inner>*:first-child>*:nth-child(n+6){animation-delay:.55s}
@keyframes rise-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero-visual,.efapel-hero-inner>*:nth-child(2){animation:zoom-in 1.1s var(--ease-out) both .3s}
@keyframes zoom-in{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:none}}
.hero-visual a{animation:float 6s ease-in-out infinite}
.hero-visual a:nth-child(2){animation-delay:-1.5s}
.hero-visual a:nth-child(3){animation-delay:-3s}
.hero-visual a:nth-child(4){animation-delay:-4.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-visual a svg{transition:transform .5s var(--ease-spring)}
.hero-visual a:hover svg{transform:scale(1.15) rotate(-6deg)}
.stat{transition:transform .4s var(--ease-out),background-color .3s,border-color .3s}
.stat:hover{transform:translateY(-3px);background:rgba(255,255,255,.12);border-color:rgba(245,158,11,.4)}
.stat-num,.stat-ef-num{font-variant-numeric:tabular-nums}

/* ── Trust / why / testimonials / promo ── */
.trust-item svg{transition:transform .5s var(--ease-spring)}
.trust-item:hover svg{transform:scale(1.2) rotate(-8deg)}
.why-card,.testi-card,.partner-card,.highlight-card,.certif-item,.efapel-prod-card{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),background-color .3s,border-color .3s}
.why-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);border-color:rgba(245,158,11,.35)}
.why-icon{transition:transform .6s var(--ease-spring),background-color .3s}
.why-card:hover .why-icon{transform:rotate(-10deg) scale(1.1);background:rgba(245,158,11,.18)}
.testi-card:hover,.partner-card:hover,.highlight-card:hover,.certif-item:hover,.efapel-prod-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px -20px rgba(15,62,117,.35)}
.promo-card{transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.promo-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 26px 50px -24px rgba(0,0,0,.5)}
.promo-stripe{transition:transform .9s var(--ease-out)}
.promo-card:hover .promo-stripe{transform:skewX(-8deg) translateX(-60px)}
.efapel-banner::before{animation:pulse-glow 6s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.6}}
.efapel-prod-img img{transition:transform .8s var(--ease-out)}
.efapel-prod-card:hover .efapel-prod-img img{transform:scale(1.07)}

/* ── Footer ── */
.social-link{transition:transform .4s var(--ease-spring),background-color .25s,border-color .25s,color .25s}
.social-link:hover{transform:translateY(-3px)}
footer ul li a{transition:color .2s,transform .35s var(--ease-out)}
footer ul li a:hover{transform:translateX(4px)}

/* ── Alerts ── */
.alert{animation:slide-down .6s var(--ease-out) both}
@keyframes slide-down{from{opacity:0;transform:translateY(-12px)}}

/* ── Scroll reveal ── */
.js [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--reveal-delay,0s)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="zoom"]{transform:scale(.94)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* ── Toast ── */
.toast-stack{position:fixed;z-index:1100;right:20px;bottom:24px;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:calc(100vw - 32px)}
@media(max-width:767px){.toast-stack{left:16px;right:16px;bottom:80px}}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:#0B1F3A;color:#fff;padding:12px 14px 12px 12px;border-radius:12px;box-shadow:0 20px 50px -15px rgba(0,0,0,.45);font-size:13px;line-height:1.4;max-width:380px;animation:toast-in .55s var(--ease-spring) both;position:relative;overflow:hidden}
.toast.is-leaving{animation:toast-out .4s var(--ease-out) both}
@keyframes toast-in{from{opacity:0;transform:translateY(24px) scale(.95)}}
@keyframes toast-out{to{opacity:0;transform:translateX(30px)}}
.toast-icon{width:30px;height:30px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast-icon svg{width:16px;height:16px}
.toast-icon polyline{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .5s var(--ease-out) .25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.toast a{color:var(--amber);font-weight:700;white-space:nowrap;margin-left:auto}
.toast::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--amber);transform-origin:0 50%;animation:toast-timer 3.5s linear forwards}
@keyframes toast-timer{to{transform:scaleX(0)}}

/* ── Fly to cart ── */
.fly-img{position:fixed;z-index:1200;pointer-events:none;border-radius:12px;object-fit:contain;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js img.fade-img{opacity:1}
  .scroll-progress{display:none}
}