.training-photo{transition:filter .32s ease}
.training-hero.is-selecting .training-photo{filter:brightness(.23) saturate(.55)}
.hotspots{z-index:3;pointer-events:none}
.selection-light,.selection-target{position:absolute;inset:0;width:100%;height:100%;margin:0}
.selection-light{object-fit:fill;pointer-events:none;opacity:0;filter:brightness(1.13) saturate(1.07);transition:opacity .28s ease;z-index:1}
.selection-light.selected{opacity:1}
.selection-target{z-index:2;pointer-events:auto;cursor:pointer}
.hotspots .spot{z-index:4;pointer-events:auto}
.spot.selected>span{background:var(--selection-color);color:#101415;box-shadow:0 0 0 8px #ffffff15,0 0 30px var(--selection-color);transform:scale(1.1)}
.spot.selected b{opacity:0}
.training-copy,.spot-hint{transition:opacity .3s}
.is-selecting .training-copy{opacity:.12;pointer-events:none}
.is-selecting .spot-hint{opacity:0}
.is-selecting .spot:not(.selected){opacity:.25}
.selection-caption{position:absolute;z-index:5;left:50%;top:12%;width:80%;max-width:1000px;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,12px);transition:opacity .3s,transform .3s;color:#fff}
.is-selecting .selection-caption{opacity:1;transform:translate(-50%,0)}
.selection-caption strong{display:block;font:800 clamp(30px,3.8vw,64px)/.95 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.5px}
.selection-caption[data-product="0"] strong{color:#36d4e2;font-style:italic;letter-spacing:.5px;text-shadow:0 2px 0 #075666,0 0 24px #20cddd38}
.selection-caption[data-product="1"] strong{color:#ee94bf;background:linear-gradient(110deg,#f39bc9 20%,#ed8dbd 42%,#40dce8 62%,#21c1d4 85%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-style:italic;filter:drop-shadow(0 2px 6px #e777a52a)}
.selection-caption[data-product="2"] strong{color:#f3cb70;background:linear-gradient(180deg,#fff0c5 0%,#eec46a 45%,#c78b28 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1.4px;filter:drop-shadow(0 2px 8px #dca64138)}
.selection-caption[data-product="3"] strong{color:#eceff2;background:linear-gradient(105deg,#fff 10%,#aeb9c4 45%,#f7fafc 65%,#f3dc39 90%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-style:italic;letter-spacing:.2px;filter:drop-shadow(0 2px 7px #dce5ed24)}
.spot:focus-visible{outline:2px solid white;outline-offset:8px;border-radius:6px}
@media(max-width:700px){.selection-caption{top:55px;width:90%}.selection-caption strong{font-size:clamp(28px,7vw,38px)}}
@media(prefers-reduced-motion:reduce){.training-photo,.selection-light,.training-copy,.spot-hint,.selection-caption{transition:none}}

.selection-caption[data-product="0"] strong{color:#edcf9f;text-shadow:0 2px 0 #705535,0 0 24px #ddbb8638}

.hero-jar-replacement{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:0;transition:filter .32s ease}
.training-hero.is-selecting .hero-jar-replacement{filter:brightness(.23) saturate(.55)}
@media(prefers-reduced-motion:reduce){.hero-jar-replacement{transition:none}}