/* Keep the link, bottle, vial and badges above the decorative ingredient layer. */
ul.products li.product .woocommerce-image__wrapper:has(.fn-card-notes) { isolation: isolate; }
ul.products li.product .woocommerce-image__wrapper:has(.fn-card-notes) > a { position: relative; z-index: 2; }
ul.products li.product .fn-card-notes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
ul.products li.product .fn-card-note { position: absolute; width: 48%; aspect-ratio: 1; background-image: var(--fn-note-atlas); background-repeat: no-repeat; opacity: 0; transform: translate(var(--fn-note-x),var(--fn-note-y)) scale(.84) rotate(var(--fn-note-r)); transition: opacity .24s ease, transform .4s var(--sg-lux-ease,cubic-bezier(.25,.46,.45,.94)); }
.fn-card-note--0 { left: -2%; top: 7%; --fn-note-x: 20px; --fn-note-y: 15px; --fn-note-r: -12deg; }
.fn-card-note--1 { right: -3%; top: 9%; --fn-note-x: -20px; --fn-note-y: 15px; --fn-note-r: 10deg; }
.fn-card-note--2 { left: -4%; bottom: 4%; --fn-note-x: 20px; --fn-note-y: -15px; --fn-note-r: -10deg; }
.fn-card-note--3 { right: -5%; bottom: 6%; --fn-note-x: -20px; --fn-note-y: -12px; --fn-note-r: 8deg; }
ul.products li.product.fn-notes-visible .fn-card-note { opacity: 1; transform: translate(0,0) scale(1) rotate(0); transition: opacity .5s ease var(--fn-note-delay), transform .65s var(--sg-lux-ease,cubic-bezier(.25,.46,.45,.94)) var(--fn-note-delay); }
/* Do not inherit the parent's full-width purchase-button styles. */
ul.products li.product button.fn-card-notes-toggle { position: absolute; right: 2px; bottom: 2px; z-index: 5; width: auto; min-width: 44px; min-height: 44px; margin: 0; padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: var(--sg-slate,#393e46); box-shadow: none; font: 400 10px/1.3 var(--sg-body,Inter,sans-serif); letter-spacing: 0; text-transform: none; display: none; align-items: center; gap: 4px; opacity: 1; transform: none; cursor: pointer; }
ul.products li.product button.fn-card-notes-toggle[hidden], .fn-card-notes-toggle [hidden] { display: none !important; }
ul.products li.product button.fn-card-notes-toggle:hover { background: transparent; color: var(--sg-ink,#222831); box-shadow: none; transform: none; }
ul.products li.product button.fn-card-notes-toggle:focus-visible { outline: 2px solid var(--sg-ink,#222831); outline-offset: 2px; }
.fn-card-notes-toggle__icon { font-size: 12px; line-height: 1; }
@media (hover: none), (pointer: coarse) {
  /* A 44px target would cover the vial in a narrow two-column card. */
  .woocommerce ul.products li.product.product .woocommerce-image__wrapper:has(.fn-card-notes) { overflow: visible; margin-bottom: 52px; }
  ul.products li.product button.fn-card-notes-toggle { display: inline-flex; bottom: -44px; }
}
@media (prefers-reduced-motion: reduce) {
  ul.products li.product .fn-card-note { transition: none !important; }
  ul.products li.product.fn-notes-visible .fn-card-note { transform: none; }
}