/* The model shares the page background: no panel, floor, frame or backdrop.
   Grid areas, the stage size, the fallback image geometry and the space
   reserved for the controls live in the critical styles/site.css, so this
   deferred sheet cannot shift the layout. */
.product-jar { align-self: center; }
.product-jar__visual figcaption { align-self: start; }
/* A sentence, not an eyebrow: it reads as the hint it is, in the same size as
   the caption under the jar. */
.ingredient-map__label { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.ingredient-hotspot { box-sizing: border-box; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 11px; min-width: 0; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 24px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .2s; }
.ingredient-hotspot[aria-expanded="true"] { border-color: var(--accent-text); }
.ingredient-hotspot__dot { display: block; width: 22px; height: 22px; border: 4px solid var(--surface); border-radius: 50%; background: var(--accent-text); outline: 1px solid var(--accent-text); transition: transform .2s, background .2s; }
.ingredient-hotspot__name { min-width: 0; overflow-wrap: anywhere; }
.ingredient-hotspot:hover .ingredient-hotspot__dot, .ingredient-hotspot:focus-visible .ingredient-hotspot__dot, .ingredient-hotspot[aria-expanded="true"] .ingredient-hotspot__dot { transform: scale(1.15); background: var(--teal); }
/* The panels are stacked in styles/site.css; here they only get their colours
   and a fade, so a description swap does not blink. The outline repeats the
   one on the open button, tying the description to it. */
.ingredient-panel { border-color: var(--accent-text); color: var(--ink); opacity: 0; transition: opacity .2s; }
.ingredient-panel.is-active { opacity: 1; }
.product-jar__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: transparent; cursor: grab; touch-action: pan-y pinch-zoom; opacity: 0; transition: opacity .28s ease; }
.product-jar.is-ready .product-jar__canvas { opacity: 1; }
.product-jar__canvas.is-dragging { cursor: grabbing; }
.product-jar__fallback { border-radius: var(--radius); opacity: 1; transition: opacity .28s ease; }
.product-jar.is-ready .product-jar__fallback { opacity: 0; }
.product-jar [hidden] { display: none !important; }
.product-jar__controls { display: flex; justify-content: center; align-items: center; gap: 14px; }
.product-jar__controls p, .product-jar__status { color: var(--muted); font-size: 13px; line-height: 1.6; }
.product-jar__controls p span { font-size: 11px; }
.product-jar__flavors { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0 0 4px; padding: 0; border: 0; }
.product-jar__flavors legend { width: 100%; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.product-jar__flavors button { border: 1px solid var(--line); border-radius: 100px; min-height: 44px; padding: 10px 16px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.product-jar__flavors button[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-text); color: var(--surface); }
.product-jar__flavors button:hover { border-color: var(--accent-text); }
.product-jar__controls button { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); }
.product-jar__controls button:hover { color: var(--accent-text); border-color: currentColor; }
.product-jar__controls .icon { width: 20px; height: 20px; }
.product-jar__status { text-align: center; }
@media (min-width: 1024px) {
  .product-jar__flavors { flex-wrap: nowrap; }
  .product-jar__flavors button { flex: none; white-space: nowrap; }
}
@media (max-width: 700px) {
  .product-jar__flavors { justify-content: center; }
  .product-jar__flavors legend { text-align: center; }
  .ingredient-hotspot { min-height: 56px; }
  .product-jar__controls p span { display: none; }
}