/* Final note-artwork contract: show the complete source image, centered, at every size. */
html body :is(
  img.note-artwork,
  img[data-note-artwork="true"],
  img[data-smart-note-image="true"],
  .library-note-image > img,
  .note-detail-image > img,
  .dialog-note-chip > img,
  .note-match-items img,
  .product-card-notes img,
  .notes-family-showcase .family-card-art img,
  .notes-hero-art img,
  .pdp-main-ingredients img.note-artwork,
  .note-image-editor > img
){
  box-sizing:border-box!important;
  display:block!important;
  margin:auto!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  clip-path:none!important;
  transform:none!important;
  scale:1!important;
  translate:none!important;
  transform-origin:center!important;
}

/* Match the specificity of legacy library rules, including labeled artwork. */
html body #notes-library-page .library-notes-grid > .library-note-card,
html body #notes-library-page .related-notes-row > .library-note-card.compact{
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  grid-template-rows:auto auto!important;
  align-content:start!important;
}
html body #notes-library-page .library-notes-grid > .library-note-card > .library-note-image,
html body #notes-library-page .related-notes-row > .library-note-card.compact > .library-note-image{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  aspect-ratio:1!important;
  padding:8px!important;
  display:grid!important;
  place-items:center!important;
}
html body #notes-library-page .library-notes-grid > .library-note-card > .library-note-image > img,
html body #notes-library-page .library-notes-grid > .library-note-card > .library-note-image > img.note-artwork-crop-label,
html body #notes-library-page .related-notes-row > .library-note-card.compact > .library-note-image > img,
html body #notes-library-page .note-detail-image > img.note-artwork{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  clip-path:none!important;
  transform:none!important;
  scale:1!important;
  translate:none!important;
  position:static!important;
  inset:auto!important;
  grid-area:auto!important;
  place-self:center!important;
}
html body #notes-library-page .library-notes-grid > .library-note-card > .library-note-copy,
html body #notes-library-page .related-notes-row > .library-note-card.compact > .library-note-copy{
  height:auto!important;
  min-height:42px!important;
  padding:6px 8px 10px!important;
  overflow:visible!important;
}
html body #notes-library-page .library-note-card .library-note-copy b,
html body .pdp-page .dialog-note-chip b,
html body .product-card-notes b{
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:anywhere!important;
  text-overflow:clip!important;
  line-height:1.4!important;
}
html body .product-card-notes > span{
  height:auto!important;
  min-height:48px!important;
  grid-template-rows:38px auto!important;
}

/* Route-specific rules must not offset artwork or leave a phantom grid column. */
html body .product-overlay .pdp-page .pdp-profile-section[data-pdp-section="notes"] .dialog-note-chip,
html body .pdp-page .dialog-note-chip{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  height:auto!important;
  min-height:112px!important;
  place-items:center!important;
  text-align:center!important;
}
html body .product-overlay .pdp-page .pdp-profile-section[data-pdp-section="notes"] .dialog-note-chip > img,
html body .product-overlay .pdp-page .pdp-profile-section[data-pdp-section="notes"] .dialog-note-chip > img.note-artwork-crop-label,
html body .pdp-page .dialog-note-chip > img{
  position:static!important;
  inset:auto!important;
  grid-column:1!important;
  grid-row:1!important;
  place-self:center!important;
  margin:0 auto!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  clip-path:none!important;
  transform:none!important;
  scale:1!important;
  translate:none!important;
}
html body .product-overlay .pdp-page .pdp-profile-section[data-pdp-section="notes"] .dialog-note-chip > b{
  grid-column:1!important;
  grid-row:2!important;
  height:auto!important;
  overflow:visible!important;
  -webkit-line-clamp:unset!important;
}

:where(
  .library-note-image,
  .note-detail-image,
  .dialog-note-chip,
  .note-match-items > span,
  .product-card-notes > span,
  .notes-family-showcase .family-card-art,
  .pdp-main-ingredients article,
  .note-image-editor
){
  align-items:center!important;
  justify-items:center!important;
}

/* Old labeled artwork must remain fully visible; do not mask or crop its lower edge. */
:where(
  .library-note-image,
  .note-detail-image,
  .note-match-items > span
):has(>img.note-artwork-crop-label)::after{content:none!important;display:none!important}

/* Notes library cards. */
html body #notes-library-page .library-note-card .library-note-image{
  display:grid!important;
  place-items:center!important;
  padding:clamp(6px,1vw,12px)!important;
  overflow:hidden!important;
}
html body #notes-library-page .library-note-card .library-note-image > img{
  width:min(100%,150px)!important;
  height:min(100%,150px)!important;
  max-width:100%!important;
  max-height:100%!important;
}

/* Main note view and related-note cards. */
html body #notes-library-page .note-detail-image{display:grid!important;place-items:center!important}
html body #notes-library-page .note-detail-image > img{
  width:min(100%,420px)!important;
  height:min(100%,420px)!important;
  max-width:100%!important;
  max-height:100%!important;
}
.note-detail-section .related-notes-row .library-note-card.compact .library-note-image > img{
  width:min(100%,116px)!important;
  height:min(100%,116px)!important;
  max-width:100%!important;
  max-height:100%!important;
}

/* Product note pyramid and key ingredients. */
body .product-overlay .pdp-page .dialog-note-chip > img,
.pdp-page .dialog-note-chip > img{
  width:min(100%,94px)!important;
  height:min(100%,94px)!important;
  max-width:100%!important;
  max-height:100%!important;
}
.pdp-page .pdp-main-ingredients img.note-artwork{
  width:min(100%,96px)!important;
  height:96px!important;
  max-width:100%!important;
}

/* Small note representations keep enough breathing room to remain legible. */
.product-card-notes img{width:42px!important;height:38px!important;max-width:100%!important;max-height:100%!important}
.note-match-items img{width:38px!important;height:38px!important;max-width:100%!important;max-height:100%!important}
.notes-family-showcase .family-card-art img{max-width:31%!important;max-height:64px!important}
.notes-hero-art img{object-fit:contain!important}

@media(max-width:640px){
  html body #notes-library-page .library-note-card .library-note-image{padding:6px!important}
  html body #notes-library-page .library-note-card .library-note-image > img{
    width:min(100%,112px)!important;
    height:min(100%,112px)!important;
  }
  html body #notes-library-page .note-detail-image > img{
    width:min(100%,210px)!important;
    height:min(100%,210px)!important;
  }
  .note-detail-section .related-notes-row .library-note-card.compact .library-note-image > img{
    width:min(100%,104px)!important;
    height:min(100%,104px)!important;
  }
  body .product-overlay .pdp-page .dialog-note-chip > img,
  .pdp-page .dialog-note-chip > img{
    width:min(100%,78px)!important;
    height:min(100%,78px)!important;
  }
  .pdp-page .pdp-main-ingredients img.note-artwork{height:76px!important}
  .product-card-notes img{width:36px!important;height:33px!important}
  .notes-family-showcase .family-card-art img{max-height:58px!important}
}

/* Final geometry: one centered image frame followed by a naturally sized label.
   Percentage-height images inside auto grid rows can escape the frame or leave
   an implicit column in RTL; use a definite frame and a single flex column. */
html body #notes-library-page .library-note-card,
html body #notes-library-page .library-notes-grid > .library-note-card,
html body #notes-library-page .related-notes-row > .library-note-card.compact{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  padding:0!important;
}
html body #notes-library-page .library-note-card > .library-note-image,
html body #notes-library-page .library-notes-grid > .library-note-card > .library-note-image,
html body #notes-library-page .related-notes-row > .library-note-card.compact > .library-note-image{
  position:relative!important;
  flex:none!important;
  width:100%!important;
  min-width:0!important;
  height:160px!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:10px!important;
  overflow:hidden!important;
}
html body #notes-library-page .library-note-card > .library-note-image > img,
html body #notes-library-page .library-notes-grid > .library-note-card > .library-note-image > img,
html body #notes-library-page .library-notes-grid > .library-note-card > .library-note-image > img.note-artwork-crop-label,
html body #notes-library-page .related-notes-row > .library-note-card.compact > .library-note-image > img{
  position:absolute!important;
  inset:0!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:10px!important;
  object-fit:contain!important;
  object-position:center!important;
  clip-path:none!important;
  transform:none!important;
  scale:1!important;
  translate:none!important;
}
html body #notes-library-page .library-note-card > .library-note-copy{
  flex:none!important;
  width:100%!important;
  height:auto!important;
  padding:8px!important;
  text-align:center!important;
}
html body #notes-library-page .library-note-image::after,
html body #notes-library-page .note-detail-image::after,
html body .note-match-items > span::after{
  content:none!important;
  display:none!important;
}
html body .product-card-notes > span,
html body .note-match-items > span{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  height:auto!important;
  min-height:48px!important;
}
html body .product-card-notes img,
html body .note-match-items img{
  flex:none!important;
  position:static!important;
  margin-inline:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  scale:1!important;
  clip-path:none!important;
}
@media(max-width:640px){
  html body #notes-library-page .library-note-card > .library-note-image,
  html body #notes-library-page .library-notes-grid > .library-note-card > .library-note-image,
  html body #notes-library-page .related-notes-row > .library-note-card.compact > .library-note-image{height:132px!important}
}