/* Both layers share the approved 2172 x 724 atlas coordinates. */
#products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]) .food-photo{
  position:relative;
  isolation:isolate;
}
#products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]) .food-photo::before{
  opacity:0;
}
#products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]) .food-photo::after{
  content:"";
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(100%,calc(100% * var(--frame-width) / 410 / 1.25));
  aspect-ratio:var(--frame-width) / 410;
  background-image:url(assets/food-outline-2026-10-13/foods-outline.webp);
  background-repeat:no-repeat;
  background-size:calc(2172 / var(--frame-width) * 100%) calc(724 / 410 * 100%);
  background-position:calc(var(--frame-left) / (2172 - var(--frame-width)) * 100%) calc(180 / (724 - 410) * 100%);
  clip-path:inset(0 0 0 calc(var(--outline-trim-left,0) / var(--frame-width) * 100%));
  opacity:1;
  pointer-events:none;
}
/* Main drawings begin at source pixel 12/14; trim only stray edge fragments. */
#products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]):nth-child(2) .food-photo,
#products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]):nth-child(3) .food-photo{--outline-trim-left:10}
/* React to the whole card; illustration layers deliberately ignore pointer events. */
#products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]):focus-visible .food-photo::before{opacity:1}
#products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]):focus-visible .food-photo::after{opacity:0}
@media(hover:hover) and (pointer:fine){
  #products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]):hover .food-photo::before{opacity:1}
  #products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]):hover .food-photo::after{opacity:0}
}
@media(prefers-reduced-motion:no-preference){
  #products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]) .food-photo::before,
  #products[data-food-outline="ready"] .foods>button:is([data-pick],[data-home-product]) .food-photo::after{transition:opacity 120ms ease-out}
}