/* Source-derived packaging illustrations; display colour follows the adjoining variant name. */
body.dhd .packaging-title-row{display:flex;align-items:flex-start;gap:.22em;min-width:0;text-align:left}
body.dhd .packaging-title-text{min-width:0;overflow-wrap:normal;text-align:left}
body.dhd .packaging-title-icon{position:relative;display:inline-flex;flex:0 0 clamp(.75em,calc(1em * var(--packaging-title-ratio,1)),1.5em);width:clamp(.75em,calc(1em * var(--packaging-title-ratio,1)),1.5em);height:1em;margin-top:.055em;isolation:isolate;pointer-events:none;color:inherit;background:none;border:0;border-radius:0;overflow:visible}
body.dhd .packaging-title-icon__art{position:relative;display:block;width:100%;height:100%;box-sizing:border-box;color:inherit;transform-origin:50% 100%}
body.dhd .packaging-title-icon__art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border:0;background:none;filter:none}
@supports (mask-image:linear-gradient(black,black)) or (-webkit-mask-image:linear-gradient(black,black)){
 body.dhd .packaging-title-icon__art img{opacity:0}
 body.dhd .packaging-title-icon__art::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--packaging-title-image) center/contain no-repeat;mask:var(--packaging-title-image) center/contain no-repeat}
}
/* Incised detail sits on an opaque body; it is never a luminous wireframe. */
@supports (mask-image:linear-gradient(black,black)) or (-webkit-mask-image:linear-gradient(black,black)){
 body.dhd [data-icon-relief="true"] .packaging-title-icon__art::after{content:"";position:absolute;inset:0;background:#14251e;opacity:.76;-webkit-mask:var(--packaging-title-engraving) center/contain no-repeat;mask:var(--packaging-title-engraving) center/contain no-repeat}
}
body.dhd .packaging-title-icon__sheen{display:none}
/* The animal stays planted: only its pencil detail develops on first sight.
   A short inspection response darkens that same detail on hover/focus. Neither
   treatment translates, rotates or scales the silhouette, and neither loops. */
body.dhd .packaging-title-icon__art{animation:none;transform:none;will-change:auto}
body.dhd [data-icon-relief="true"].is-packaging-icon-revealing .packaging-title-icon__art::after{animation:packaging-title-ink-reveal 720ms cubic-bezier(.22,.61,.36,1) both}
body.dhd [data-icon-relief="true"].is-packaging-icon-inspecting .packaging-title-icon__art::after{animation:packaging-title-ink-inspect 480ms ease-out both}
@keyframes packaging-title-ink-reveal{from{opacity:.76;clip-path:inset(0 100% 0 0)}to{opacity:.76;clip-path:inset(0 0 0 0)}}
@keyframes packaging-title-ink-inspect{0%,100%{opacity:.76}42%{opacity:.96}}
body.dhd.page-product .commerce-product-page .product-showcase[data-product-studio] .showcase-heading h2.packaging-title-row{width:fit-content;max-width:100%;text-align:left}
@media(max-width:850px){body.dhd.page-product .commerce-product-page .product-showcase[data-product-studio] .showcase-heading h2.packaging-title-row{margin-inline:auto;text-align:left;justify-content:flex-start}}
html[data-fx-motion="off"] body.dhd .packaging-title-icon__art,html[data-fx-motion="off"] body.dhd .packaging-title-icon__art::after{animation:none;transform:none;will-change:auto}
@media(prefers-reduced-motion:reduce){body.dhd .packaging-title-icon__art,body.dhd .packaging-title-icon__art::after{animation:none!important;transform:none!important;will-change:auto!important}}
@media print{body.dhd .packaging-title-icon__art,body.dhd .packaging-title-icon__art::after{animation:none!important;transform:none!important;will-change:auto!important}}