/* AGUNG GROCERY — lightweight interaction & motion layer.
   Only transforms/opacity during animations; never hides content without JS. */
:root{
  --ag-ease-out:cubic-bezier(.16,1,.3,1);
  --ag-ease-soft:cubic-bezier(.22,1,.36,1);
  --ag-motion-fast:180ms;
  --ag-motion-medium:360ms;
  --ag-motion-slow:660ms;
}

/* Useful scroll feedback without affecting layout. */
.ag-scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  z-index:130;overflow:hidden;pointer-events:none;
}
.ag-scroll-progress span{
  display:block;width:100%;height:100%;transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--sun) 0%,#f1aa35 52%,var(--red) 100%);
  box-shadow:0 0 12px #ffc3414a;
}
.site-header{
  transition:box-shadow var(--ag-motion-medium) ease,background var(--ag-motion-medium) ease;
}
.site-header.ag-scrolled{
  background:#fffffff7;
  box-shadow:0 16px 38px rgba(9,43,27,.16);
}
@supports(backdrop-filter:blur(10px)){
  .site-header.ag-scrolled{backdrop-filter:blur(16px)}
}

/* Intro choreography: once on first paint; no delayed essential functionality. */
@keyframes ag-hero-rise{
  from{opacity:.82;transform:translate3d(0,11px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes ag-hero-inset{
  from{opacity:.55;transform:translate3d(0,-7px,0) scale(.975)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
body[data-page="home"] .hero-content .hero-kicker{
  animation:ag-hero-rise .53s var(--ag-ease-out) both;
}
body[data-page="home"] .hero-content h1{
  animation:ag-hero-rise .7s var(--ag-ease-out) .08s both;
}
body[data-page="home"] .hero-content .hero-copy{
  animation:ag-hero-rise .62s var(--ag-ease-out) .18s both;
}
body[data-page="home"] .hero-content .hero-actions{
  animation:ag-hero-rise .6s var(--ag-ease-out) .26s both;
}
body[data-page="home"] .hero-content .hero-quick-links{
  animation:ag-hero-rise .57s var(--ag-ease-out) .32s both;
}
body[data-page="home"] .hero-content .hero-foot{
  animation:ag-hero-rise .52s var(--ag-ease-out) .36s both;
}
body[data-page="home"] .hero-photo-caption{
  animation:ag-hero-rise .64s var(--ag-ease-out) .27s both;
}

/* Progressive scroll reveal. Unobserved elements remain visible and usable. */
@keyframes ag-enter-up{
  from{opacity:.48;transform:translate3d(0,19px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes ag-enter-left{
  from{opacity:.48;transform:translate3d(-19px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes ag-enter-right{
  from{opacity:.48;transform:translate3d(19px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.ag-reveal-active{
  animation:ag-enter-up var(--ag-duration,650ms) var(--ag-ease-out) var(--ag-delay,0ms) both;
}
.ag-reveal-active[data-ag-effect="left"]{animation-name:ag-enter-left}
.ag-reveal-active[data-ag-effect="right"]{animation-name:ag-enter-right}

/* Position counter complements the rail meter: real progress, not a decoration. */
.ag-category-counter{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:65px;min-height:43px;padding:8px 10px;
  border:1px solid #dfe8dc;border-radius:100px;background:#fff;
  color:var(--pine);font-size:12px;font-weight:850;
  font-variant-numeric:tabular-nums;letter-spacing:.4px;white-space:nowrap;
}
@media(max-width:760px){
  .ag-category-counter{min-width:62px;min-height:38px;font-size:11px;background:#f4f8f2}
}
/* Navigable photo carousel: progress feedback and gentle drag affordance. */
.category-track{cursor:grab}
.category-track.ag-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.category-track.ag-dragging .category-tile{pointer-events:none}
.category-scroll-meter{
  position:relative;height:4px;max-width:154px;margin:6px auto 0;
  border-radius:100px;background:#d7e3d7;overflow:hidden;
}
.category-scroll-meter>span{
  position:absolute;left:0;top:0;bottom:0;width:28%;
  background:linear-gradient(90deg,var(--pine),#3f8d57);
  border-radius:inherit;
  transition:left .16s linear,width .22s var(--ag-ease-out);
}
.category-photo{position:relative}
.category-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,#123f2c30 100%);
  opacity:.25;transition:opacity .35s ease;
}
.category-tile:hover .category-photo::after,
.category-tile:focus-visible .category-photo::after{opacity:.85}
.category-tile:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.category-tile:active{transform:translateY(-1px) scale(.986)}
.category-tile::after{transition:transform .3s var(--ag-ease-out),background .3s ease}
.category-tile:hover::after,.category-tile:focus-visible::after{transform:translate(2px,-2px) rotate(13deg)}

/* Store tiles and editorial links feel directly interactive. */
.product-category-feature:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.product-category-feature .category-feature-link{transition:color .22s}
.product-category-feature:hover .category-feature-link{color:var(--red)}
.product-category-feature:active{transform:translateY(-1px) scale(.99)}
.product-art img{transition:transform .65s var(--ag-ease-out),filter .4s ease}
.product-card:hover .product-art>img{filter:saturate(1.09)}
.pantry-editorial-photo img{transition:transform .75s var(--ag-ease-out),filter .55s}
.pantry-editorial:hover .pantry-editorial-photo img{filter:saturate(1.13) contrast(1.045)}
.pantry-editorial:focus-visible{outline:3px solid var(--sun);outline-offset:4px}

/* Buttons have short, reversible depth/shimmer feedback. */
.btn,.a-button,.search-form button{
  position:relative;isolation:isolate;overflow:hidden;
}
.btn::after,.search-form button::after{
  content:"";position:absolute;top:-32%;bottom:-32%;left:0;width:34%;
  background:linear-gradient(90deg,transparent,#ffffff38,transparent);
  transform:translateX(-390%) skewX(-18deg);
  transition:transform .58s var(--ag-ease-out);
  pointer-events:none;
}
.btn:hover::after,.search-form button:hover::after{
  transform:translateX(500%) skewX(-18deg);
}
.btn:active,.search-form button:active,.category-arrow:active{
  transform:translateY(1px) scale(.976);
  box-shadow:none;
}
.btn:focus-visible,.category-arrow:focus-visible{
  outline:3px solid var(--sun);outline-offset:3px;
}
.hero-quick-links a:active{transform:translateY(0) scale(.97)}
@keyframes ag-count-pop{
  0%{transform:scale(1)}
  48%{transform:scale(1.34)}
  100%{transform:scale(1)}
}
@keyframes ag-cart-jump{
  0%,100%{transform:translateY(0)}
  45%{transform:translateY(-5px) rotate(-7deg)}
}
.ag-count-pop{animation:ag-count-pop .42s var(--ag-ease-out)}
.ag-cart-pop>.icon{animation:ag-cart-jump .44s var(--ag-ease-out)}

/* Contextual hero scroll affordance: a real anchor, not a decorative control. */
.hero-scroll-jump{
  position:absolute;right:22px;bottom:25px;z-index:4;
  display:grid;place-items:center;width:49px;height:49px;
  border:1px solid #ffffffaa;border-radius:50%;
  background:#ffffffdc;box-shadow:0 9px 21px #122b1e37;
  transition:transform .27s var(--ag-ease-out),background .2s,box-shadow .2s;
}
.hero-scroll-jump .icon{width:22px;height:22px;transform:rotate(90deg);filter:none}
.hero-scroll-jump:hover{background:var(--sun);transform:translateY(-4px);box-shadow:0 14px 24px #122b1e47}
.hero-scroll-jump:active{transform:translateY(1px) scale(.96)}
.hero-scroll-jump:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
@media(max-width:480px){.hero-scroll-jump{width:45px;height:45px;right:16px;bottom:18px}}
/* Search provides immediate feedback for navigation, including on slow connections. */
@keyframes ag-search-spin{to{transform:rotate(360deg)}}
.search-form.is-submitting button{pointer-events:none;opacity:.92}
.search-form.is-submitting button .icon{display:none}
.search-form.is-submitting button::before{
  content:"";width:16px;height:16px;border-radius:50%;
  border:2px solid #ffffffb3;border-top-color:transparent;
  animation:ag-search-spin .7s linear infinite;
}
.search-form.is-submitting button::after{display:none}
@media(prefers-reduced-motion:reduce){
 .search-form.is-submitting button::before{animation:none;border-top-color:#fff}
}
/* Secondary copy action preserves mailto as the primary email link. */
.ag-copy-email{
  width:max-content;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;
  border:1px solid #dbe6d8;border-radius:10px;
  background:#f7faf5;color:var(--pine);
  padding:9px 13px;font-size:12px;font-weight:790;line-height:1.2;
  transition:background .2s ease,color .2s ease,transform .24s var(--ag-ease-out),border-color .2s ease;
}
.ag-copy-email>span:first-child{font-size:19px;line-height:1}
.ag-copy-email:hover{border-color:#a3c3a1;background:#e6f2e4;transform:translateY(-2px)}
.ag-copy-email:active{transform:scale(.97)}
.ag-copy-email:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.ag-copy-email.is-copied{color:#fff;background:#1d7544;border-color:#1d7544}
.ag-copy-email.is-copy-failed{color:#9e3335;background:#fff4f1;border-color:#ecc3bd}
.site-footer .ag-copy-email{
  margin:0;background:#ffffff0c;border-color:#ffffff39;color:#f5dfae;
}
.site-footer .ag-copy-email:hover{
  color:var(--pine-dark);background:var(--sun);border-color:var(--sun);
}
.site-footer .ag-copy-email.is-copied{
  color:#0e3325;background:#e2ffda;border-color:#e2ffda;
}
/* Inline email action: keep mailto + copy control on the same row. */
.contact-email-row{
  display:flex;align-items:center;gap:9px;min-width:0;
  border-bottom:1px solid var(--line);
}
.contact-email-row .contact-email-link{
  flex:1;min-width:0;margin:0;padding:16px 0;
  gap:12px;border-bottom:0;
}
.contact-email-row .contact-email-link>span{min-width:0}
.contact-email-row .contact-email-link strong{overflow-wrap:anywhere;word-break:break-word}
.contact-email-row .ag-copy-contact{
  flex:0 0 44px;width:44px;height:44px;min-height:44px;
  margin:0;padding:0;gap:0;border-radius:11px;
  background:#edf4eb;border-color:#d8e5d7;
}
.contact-email-row .ag-copy-contact svg{
  display:block;width:20px;height:20px;flex:none;
  transition:transform .2s var(--ag-ease-out);
}
.contact-email-row .ag-copy-contact:hover svg{transform:scale(1.08)}
.contact-email-row .ag-copy-contact .ag-check-symbol{display:none}
.contact-email-row .ag-copy-contact.is-copied .ag-copy-symbol{display:none}
.contact-email-row .ag-copy-contact.is-copied .ag-check-symbol{display:block}
@media(max-width:360px){
  .contact-email-row{gap:5px}
  .contact-email-row .contact-email-link{gap:8px}
  .contact-email-row .contact-email-link>.icon{width:23px;height:23px}
  .contact-email-row .contact-email-link strong{font-size:12px}
  .contact-email-row .contact-email-link small{font-size:11px}
}
/* The footer uses the same compact inline copy affordance. */
.footer-email-row{display:flex;align-items:center;gap:9px;width:100%;min-width:0}
.footer-email-row .footer-email{
  min-width:0;flex:1;min-height:44px;
  padding:8px 0;margin:0;gap:9px;
}
.footer-email-row .footer-email span{min-width:0;overflow-wrap:anywhere}
.footer-email-row .ag-copy-footer{
  flex:0 0 44px;width:44px;height:44px;min-height:44px;
  padding:0;margin:0;gap:0;display:grid;place-items:center;border-radius:11px;
}
.footer-email-row .ag-copy-footer svg{width:20px;height:20px;display:block}
.footer-email-row .ag-copy-footer .ag-check-symbol{display:none}
.footer-email-row .ag-copy-footer.is-copied .ag-copy-symbol{display:none}
.footer-email-row .ag-copy-footer.is-copied .ag-check-symbol{display:block}
@media(min-width:1021px){
  .footer-body{grid-template-columns:1.23fr .57fr .65fr 1.2fr;gap:clamp(22px,3vw,40px)}
}
/* Footer/email & contact cards. */
.footer-contact{gap:13px;min-width:0}
.footer-contact>a,.footer-email{
  min-height:44px;display:inline-flex;align-items:center;gap:11px;
  padding:8px 11px;border-radius:11px;margin-left:-11px;
  text-decoration:none;transition:color .22s ease,transform .22s var(--ag-ease-out),background .22s ease;
}
.footer-contact>a span{overflow-wrap:anywhere;word-break:break-word}
.footer-contact>a:hover,.footer-contact>a:focus-visible{
  color:var(--sun);transform:translateX(3px);background:#ffffff12;
}
.footer-contact>a:hover .icon{filter:brightness(0) saturate(100%) invert(78%) sepia(77%) saturate(415%) hue-rotate(341deg)}
.footer-currency{margin-top:9px;border-top:1px solid #ffffff20;padding-top:19px;width:100%}
.contact-option{
  border-radius:12px;padding-inline:10px;margin-inline:-10px;
  transition:transform .25s var(--ag-ease-out),background .25s ease;
}
.contact-option:hover{transform:translateX(5px);background:#f1f6ef}
.contact-option:hover .icon{transform:rotate(-8deg) scale(1.08)}
.contact-option .icon{transition:transform .3s var(--ag-ease-out)}
.contact-option:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

/* Long-page convenience control, always 48px and clear of bottom nav. */
.ag-back-top{
  position:fixed;right:22px;bottom:24px;z-index:80;
  width:49px;height:49px;border:1px solid #d3e2d0;border-radius:50%;
  background:#ffffffeb;color:var(--pine);box-shadow:0 10px 34px #123b2840;
  display:grid;place-items:center;
  transition:background .23s,transform .28s var(--ag-ease-out),box-shadow .28s;
}
.ag-back-top[hidden]{display:none!important}
.ag-back-top .icon{height:21px;width:21px;transform:rotate(-90deg)}
.ag-back-top:hover{background:var(--sun);transform:translateY(-4px);box-shadow:0 14px 30px #123b2833}
.ag-back-top:active{transform:translateY(0) scale(.95)}
.ag-back-top:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

@media(max-width:960px){
  .site-header.ag-scrolled{box-shadow:0 9px 25px #0e332726}
}
@media(max-width:760px){
  .ag-back-top{bottom:calc(85px + env(safe-area-inset-bottom,0px));right:15px;width:46px;height:46px}
  .mobile-bottom-nav>a>.icon{transition:transform .2s var(--ag-ease-out)}
  .mobile-bottom-nav>a:active>.icon{transform:scale(.84)}
  .mobile-bottom-nav>a[aria-current=page]>.icon{transform:translateY(-2px)}
  .category-scroll-meter{max-width:120px;margin-top:3px}
  .category-track{cursor:default}
  .hero-actions .btn{transition:transform .16s ease}
}
@media(hover:none),(pointer:coarse){
  .category-tile:hover,.product-card:hover,.side-promo:hover{transform:none}
  .category-tile:hover .category-photo img,.product-card:hover .product-art>img{transform:none}
}

/* Accessibility: no motion when the operating system requests it. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .ag-reveal-active,
  body[data-page="home"] .hero-content .hero-kicker,
  body[data-page="home"] .hero-content h1,
  body[data-page="home"] .hero-content .hero-copy,
  body[data-page="home"] .hero-content .hero-actions,
  body[data-page="home"] .hero-content .hero-quick-links,
  body[data-page="home"] .hero-content .hero-foot,
  body[data-page="home"] .hero-photo-caption,
  .ag-count-pop,.ag-cart-pop>.icon{animation:none!important;opacity:1!important;transform:none!important}
  .category-track{scroll-behavior:auto!important}
  .btn:hover::after,.search-form button:hover::after{transform:translateX(-390%) skewX(-18deg)!important}
  .ag-copy-email:hover,.hero-scroll-jump:hover,.ag-back-top:hover,.contact-option:hover,
  .product-category-feature:hover,.category-tile:hover{transform:none!important}
}