/* ============================================================
   FOODSTOCKS — POLISH LAYER
   Sentuhan "premium SaaS + fun": glass header, tombol berdimensi,
   scroll-reveal, micro-interaction, focus ring aksesibel.
   Dimuat global (semua halaman). Hormati prefers-reduced-motion.
   ============================================================ */

/* ---------- Typografi lebih rapi ---------- */
h1,h2,h3{letter-spacing:-.015em}
.fs-hhero__title,.fs-section__title,.fs-hhead h2{text-wrap:balance}

/* ---------- Header backdrop-blur + elevasi ---------- */
.fs-header{
  background:#fff;
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
}
.fs-header.is-stuck{
  background:#fff;
  box-shadow:0 8px 26px -12px rgba(15,23,42,.22);
}

/* ---------- Nav: underline animasi (merah, di atas putih) ---------- */
.fs-menu a{position:relative}
.fs-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;border-radius:2px;
  background:var(--fs-red);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.fs-menu a:hover::after,.fs-menu .current-menu-item>a::after{transform:scaleX(1)}

/* ---------- Tombol berdimensi + micro-interaction ---------- */
.fs-btn{transition:transform .15s ease, box-shadow .22s ease, background .2s ease, filter .2s ease;will-change:transform}
.fs-btn--primary{
  background:linear-gradient(180deg,#FF1A1A 0%,var(--fs-red) 55%,#C40001 100%);
  box-shadow:0 8px 18px -8px rgba(214,0,1,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.fs-btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(214,0,1,.6), inset 0 1px 0 rgba(255,255,255,.3)}
.fs-btn--ghost:hover{transform:translateY(-2px)}
.fs-btn--yellow:hover{transform:translateY(-2px)}
.fs-btn:active{transform:translateY(0) scale(.97)}

/* WooCommerce add-to-cart ikut berdimensi */
.woocommerce a.button,.woocommerce button.button{transition:transform .15s ease, box-shadow .22s ease, background .2s ease!important}
.woocommerce a.button:hover,.woocommerce button.button:hover{transform:translateY(-2px)}

/* ---------- Focus ring aksesibel (premium) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.fs-btn:focus-visible{
  outline:3px solid rgba(214,0,1,.4);outline-offset:2px;border-radius:8px;
}

/* ---------- Kartu produk: hover halus ---------- */
.fs-card{transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .2s ease}
.fs-card:hover{transform:translateY(-6px)}
.fs-card .fs-badge{transition:transform .18s ease}
.fs-card:hover .fs-badge--save,.fs-card:hover .fs-badge--sale{transform:scale(1.06) rotate(-2deg)}

/* ---------- Ikon kategori: bounce playful ---------- */
.fs-hcat__item:hover .fs-hcat__icon{transform:translateY(-5px) rotate(-7deg) scale(1.1)}
.fs-cat:hover .fs-cat__icon{animation:fs-pop .45s cubic-bezier(.2,.7,.3,1)}
@keyframes fs-pop{0%{transform:scale(1)}45%{transform:scale(1.18) rotate(-6deg)}100%{transform:scale(1)}}

/* ---------- Announcement: shimmer halus (fun) ---------- */
.fs-announcement{
  background:linear-gradient(90deg,var(--fs-red) 0%,#FF1A1A 50%,var(--fs-red) 100%);
  background-size:200% 100%;animation:fs-shimmer 7s linear infinite;
}
@keyframes fs-shimmer{to{background-position:-200% 0}}

/* ---------- Hero card lift premium ---------- */
.fs-hhero__card{box-shadow:0 30px 80px -34px rgba(15,23,42,.4)}

/* ---------- Carousel arrow micro ---------- */
.fs-hcar__btn{transition:transform .15s ease, border-color .16s ease, color .16s ease, box-shadow .2s ease}
.fs-hcar__btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(15,23,42,.2)}
.fs-hcar__btn:active{transform:scale(.92)}

/* ---------- Brand thumb / promo lift ---------- */
.fs-hbrand:hover .fs-hbrand__thumb{transform:translateY(-5px)}
.fs-hpromo__card:hover{box-shadow:0 24px 50px -24px rgba(15,23,42,.4)}

/* ---------- SCROLL REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
[data-reveal].is-in{opacity:1;transform:none}
/* stagger ringan untuk anak grid/carousel */
[data-reveal] .fs-card,[data-reveal] .fs-cat,[data-reveal] .fs-trust__item,[data-reveal] .fs-testi__card{transition:opacity .5s ease, transform .5s ease}

/* ---------- Selection & scrollbar halus ---------- */
::selection{background:rgba(214,0,1,.16)}

/* ---------- Reduced motion: matikan semua animasi ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- UX: touch-action & target minimum (ui-ux-pro-max) ---------- */
a,button,input,select,textarea,.fs-btn,.fs-iconbtn,.fs-card,.fs-cattile,.fs-catcard,.fs-hslider__dot{touch-action:manipulation}
.fs-iconbtn{width:44px;height:44px}
/* tombol & link interaktif: pointer */
button,[role="button"],.fs-btn,a{cursor:pointer}