/* Separate photographic layers keep the ingredient transition behind the product. */
.order-intro{position:relative;top:auto}
.order-intro h2{font-size:clamp(40px,3.8vw,56px);margin:18px 0 20px}
.order-intro>p{font-size:16px;line-height:1.6;max-width:440px}
.blend-preview{--blend-accent:#cfaa4a;margin:28px 0 34px;min-width:0}
.blend-preview[hidden]{display:none}
.blend-preview-kicker{font-size:10px;letter-spacing:.13em;line-height:1.5}
.blend-preview-stage{position:relative;isolation:isolate;aspect-ratio:1/1;min-width:0;max-width:440px;margin:5px auto 0}
.blend-preview-stage:before{content:'';position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--blend-accent) 23%,transparent),transparent 68%);z-index:-1}
.blend-preview-stage:after{content:'';position:absolute;left:28%;top:70%;width:44%;height:5%;border-radius:50%;background:radial-gradient(ellipse,#40312032,transparent 70%);z-index:0}
.blend-preview-jar-wrap{position:absolute;left:27%;top:27%;width:46%;aspect-ratio:1;z-index:3;pointer-events:none}
.blend-preview-jar{display:block;width:100%;height:100%;background:url('assets/real-jar/closed.webp?v=real1') center/contain no-repeat;filter:drop-shadow(0 7px 7px #2e271719)}
.artwork-ready .blend-preview-jar{background-image:var(--jar-image);background-size:contain;background-position:center}
.blend-preview-ingredients{position:absolute;inset:0;z-index:2;visibility:hidden}
.artwork-ready .blend-preview-ingredients{visibility:visible}
.blend-preview-stage:has(.blend-ingredient.is-named) .blend-preview-ingredients{z-index:4}
.blend-ingredient-anchor{position:absolute;width:22.5%;aspect-ratio:1;margin-left:-11.25%;margin-top:-11.25%}
.blend-ingredient{position:relative;display:block;appearance:none;width:100%;height:100%;padding:0;border:0;border-radius:50%;background:none;cursor:help;color:var(--ink);overflow:visible;touch-action:manipulation}
.blend-ingredient-photo{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:contain;background-position:center;filter:drop-shadow(0 4px 3px #33271b15);transition:transform 160ms cubic-bezier(.16,1,.3,1)}
.artwork-ready .blend-ingredient-photo{background-image:var(--ingredient-image)}
.blend-ingredient-name{position:absolute;top:100%;left:50%;transform:translate(-50%,3px);opacity:0;visibility:hidden;pointer-events:none;background:#252a20;color:#fffdf8;padding:7px 10px;border-radius:4px;white-space:nowrap;font-size:12px;line-height:1.4;box-shadow:0 4px 12px #23272212;transition:opacity 125ms ease-out,transform 125ms ease-out;z-index:5}
.blend-ingredient.is-named .blend-ingredient-name{visibility:visible;opacity:1;transform:translate(-50%,0)}
.blend-ingredient-anchor:has(.is-named){z-index:6}
.blend-ingredient:focus-visible{outline:2px solid #4e5a3e;outline-offset:5px}
.blend-ingredient:active .blend-ingredient-photo{transform:scale(.97)}
.blend-preview.is-switching .blend-ingredient{pointer-events:none}
.blend-preview-caption{margin:0;text-align:center}
.blend-preview-name{font-weight:550;font-size:clamp(25px,2.5vw,34px);letter-spacing:-.035em;line-height:1.15}
.blend-preview-details{font-size:12px;line-height:1.7;color:#545b4c;max-width:360px;margin:10px auto 0;text-wrap:balance}
.blend-preview-hint{font-size:11px;line-height:1.6;color:#545b4c;margin:12px 0 0;text-align:center}
.blend-preview-hint .hint-touch{display:none}
.blend-preview-actions{display:flex;align-items:center;justify-content:center;gap:15px;min-height:42px;margin-top:14px;flex-wrap:wrap}
.blend-preview-actions[hidden]{display:none}
.blend-preview-tabs{display:flex;gap:5px}
.blend-preview-tabs.is-single{display:none}
.blend-preview-tabs button{font-family:inherit;font-size:11px;line-height:1.4;border:1px solid #23272235;background:transparent;border-radius:3px;padding:9px 11px;min-height:38px;cursor:pointer;color:var(--ink);transition:transform 150ms ease-out}
.blend-preview-tabs button[hidden]{display:none}
.blend-preview-tabs button[aria-pressed=true]{background:#4e5a3e;border-color:#4e5a3e;color:#fffdf8}
.blend-preview-tabs button:focus-visible{outline:2px solid #4e5a3e;outline-offset:3px}
.blend-preview-tabs button:active{transform:scale(.97)}
.artwork-unavailable .blend-preview-hint{display:none}
@media(hover:hover) and (pointer:fine){.blend-ingredient:hover .blend-ingredient-photo{transform:translateY(-3px) scale(1.04)}}
@media(hover:none){.blend-preview-hint .hint-desktop{display:none}.blend-preview-hint .hint-touch{display:inline}}
@media(max-width:700px){.order-planner .blend-preview{margin:6px -9px 28px;padding-bottom:24px;border-bottom:1px solid #23272225}.blend-preview-stage{max-width:440px;margin:0 auto}.blend-preview-name{font-size:29px}.blend-preview-caption{padding:0 7px}.blend-preview-kicker{text-align:center}.blend-preview-details{font-size:11px;max-width:300px}.blend-ingredient-name{font-size:11px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.blend-ingredient-photo,.blend-ingredient-name,.blend-preview-tabs button{transition:none}}
.paused .blend-ingredient-photo,.paused .blend-ingredient-name{transition:none}

button.blend-preview-hint{display:block;width:100%;min-height:48px;padding:8px 12px;border:0;background:transparent;font-family:inherit;cursor:pointer}
.blend-preview-hint span{display:inline-block;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px;margin-top:4px}
.blend-preview-hint:focus-visible{outline:2px solid #4e5a3e;outline-offset:3px}
.artwork-unavailable button.blend-preview-hint{display:block}
.blend-ingredient{cursor:pointer}
body:has(.ingredient-dialog[open]){overflow:hidden}
.ingredient-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100svh - 40px);margin:auto;padding:58px 32px 28px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);overscroll-behavior:contain}
.ingredient-dialog::backdrop{background:#18201580;backdrop-filter:blur(6px)}
.ingredient-dialog-close{position:absolute;top:10px;right:12px;min-height:44px;padding:10px 14px;background:transparent;border:0;color:inherit;cursor:pointer}
.ingredient-guide-kicker{font-size:10px;letter-spacing:.14em;margin:0}
.ingredient-guide-image{display:block;width:132px;height:132px;object-fit:contain;margin:12px auto}
.ingredient-guide-category{color:#596d44;font-size:12px;margin:0 0 5px}
.ingredient-dialog h2{font-size:32px;line-height:1.15;letter-spacing:-.03em;margin:0 0 18px}
.ingredient-guide-copy p{font-size:15px;line-height:1.65;margin:0 0 14px;color:var(--muted)}
.ingredient-guide-blends{font-size:12px;line-height:1.6;border-top:1px solid var(--line);padding-top:14px;margin:18px 0 8px}
.ingredient-guide-source{display:inline-block;font-size:12px;min-height:44px;padding:10px 0;text-decoration:underline;text-underline-offset:3px}
.ingredient-guide-source[hidden]{display:none}
.ingredient-guide-list-title{font-size:13px;margin:16px 0 10px}
.ingredient-guide-options{display:flex;flex-wrap:wrap;gap:8px}
.ingredient-guide-options button{min-height:44px;padding:9px 12px;border:1px solid #66715b;background:transparent;color:var(--ink);border-radius:24px;font:inherit;font-size:12px;cursor:pointer}
.ingredient-guide-options button[aria-pressed=true]{background:#4e5a3e;color:#fffdf8}
.ingredient-dialog button:focus-visible,.ingredient-dialog a:focus-visible{outline:2px solid #4e5a3e;outline-offset:3px}
@media(max-width:700px){.ingredient-dialog{padding:54px 24px 24px}.ingredient-guide-image{width:108px;height:108px}.ingredient-dialog h2{font-size:28px}}