/* FMKE animated hero card — [fmke_hero_card] */
.fmke-hero-wrap{max-width:66.4989em;margin:0 auto;padding:20px 2.617em 0;box-sizing:border-box}
@media(max-width:782px){.fmke-hero-wrap{padding:14px 12px 0}}
.fmke-hero{--h-int:5000ms;position:relative;display:grid;grid-template-columns:1.05fr 1fr;min-height:340px;margin:0 0 28px;border-radius:16px;overflow:hidden;background:var(--fmke-primary-light,#FFF1E0);box-shadow:0 10px 30px rgba(255,106,0,.16);isolation:isolate}
.fmke-hero *{box-sizing:border-box}
.fmke-hero__content{position:relative;display:flex;flex-direction:column;justify-content:center;padding:36px 40px 64px;z-index:2}
.fmke-hero__texts{position:relative;min-height:190px}
.fmke-hero__text{position:absolute;inset:0 0 auto 0;visibility:hidden;pointer-events:none}
.fmke-hero__text.is-active{position:relative;visibility:visible;pointer-events:auto}
.fmke-hero__badge{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--fmke-primary,#FF6A00);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fmke-hero__title{margin:14px 0 8px!important;font-size:clamp(26px,3.6vw,42px)!important;line-height:1.1!important;font-weight:800!important;color:var(--fmke-dark,#1F3D2C)!important}
.fmke-hero__sub{margin:0 0 18px;font-size:16px;color:var(--fmke-muted,#5a5a5a);max-width:44ch}
.fmke-hero__cta{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;background:var(--fmke-dark,#1F3D2C);color:#fff!important;font-weight:700;text-decoration:none!important;transition:transform .2s,background .2s}
.fmke-hero__cta:hover{background:var(--fmke-primary,#FF6A00);transform:translateX(4px)}
.fmke-hero__cta span{transition:transform .2s}.fmke-hero__cta:hover span{transform:translateX(3px)}

/* text enter/exit, staggered */
.fmke-hero__text>*{opacity:0;transform:translateY(18px)}
.fmke-hero__text.is-active>*{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,.7,.2,1),transform .6s cubic-bezier(.22,.7,.2,1)}
.fmke-hero__text.is-active>:nth-child(1){transition-delay:.15s}
.fmke-hero__text.is-active>:nth-child(2){transition-delay:.25s}
.fmke-hero__text.is-active>:nth-child(3){transition-delay:.35s}
.fmke-hero__text.is-active>:nth-child(4){transition-delay:.45s}
.fmke-hero__text.is-leaving{visibility:visible}
.fmke-hero__text.is-leaving>*{opacity:0;transform:translateY(-14px);transition:opacity .3s ease,transform .3s ease;transition-delay:0s}

/* media */
.fmke-hero__media{position:relative;overflow:hidden;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
.fmke-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.fmke-hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s ease-out;will-change:transform;backface-visibility:hidden}
.fmke-hero__slide.is-active{opacity:1;z-index:1}
.fmke-hero__slide.is-active img{transform:scale(1)}
.fmke-hero__chip{position:absolute;right:20px;bottom:20px;z-index:3;animation:fmkeFloat 4s ease-in-out infinite;will-change:transform}
.fmke-hero__chip-in{padding:10px 16px;border-radius:12px;background:#fff;color:var(--fmke-dark,#1F3D2C);font-weight:800;font-size:15px;box-shadow:0 8px 20px rgba(0,0,0,.18);opacity:0;transform:translate3d(0,10px,0) scale(.96);transition:opacity .45s ease,transform .45s cubic-bezier(.22,.7,.2,1)}
.fmke-hero__chip-in.is-in{opacity:1;transform:none}
.fmke-hero__chip-in small{display:block;font-weight:600;font-size:11px;color:var(--fmke-primary,#FF6A00);text-transform:uppercase;letter-spacing:.05em}
@keyframes fmkeFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}

/* dots with progress */
.fmke-hero__dots{position:absolute;left:40px;bottom:24px;display:flex;gap:8px;z-index:4}
.fmke-hero__dot{position:relative;width:34px;height:5px;padding:0;border:0;border-radius:3px;background:rgba(31,61,44,.18);overflow:hidden;cursor:pointer}
.fmke-hero__dot::after{content:"";position:absolute;inset:0;background:var(--fmke-primary,#FF6A00);transform:scaleX(0);transform-origin:left}
.fmke-hero__dot.is-done::after{transform:scaleX(1)}
.fmke-hero__dot.is-active::after{animation:fmkeFill var(--h-int) linear forwards}
.fmke-hero.is-paused .fmke-hero__dot.is-active::after{animation-play-state:paused}
@keyframes fmkeFill{to{transform:scaleX(1)}}

@media(max-width:782px){
 .fmke-hero{grid-template-columns:1fr;min-height:0}
 .fmke-hero__media{order:-1;height:200px;clip-path:none}
 .fmke-hero__content{padding:22px 20px 56px}
 .fmke-hero__texts{min-height:210px}
 .fmke-hero__dots{left:20px}
}
/* Large screens: let the card break out of the theme's content column and
   take up 90% of the viewport width, centered. Mobile is unaffected. */
@media(min-width:1025px){
 .fmke-hero{width:90vw;max-width:1800px;margin-left:calc(50% - 45vw);margin-right:calc(50% - 45vw)}
}
@media(prefers-reduced-motion:reduce){
 .fmke-hero *{animation:none!important;transition-duration:.01s!important}
}

/* Real product photos (hero-card.php marks them .is-product): full-bleed like
   the stock images (no side gaps), but anchored toward the TOP of the photo so
   the crop falls mostly on the bottom and the top of the product is not cut off.
   --fmke-pos is the vertical anchor: 0% = show the very top, 50% = centred
   (the old behaviour), 100% = show the very bottom. */
.fmke-hero__slide.is-product{--fmke-pos:18%}
.fmke-hero__slide.is-product img{object-fit:cover;object-position:center var(--fmke-pos)}