.wop{box-sizing:border-box;background:var(--wop-background,#f4f6f2);color:var(--wop-text,#35432f);border:1px solid var(--wop-track,#dfe5da);border-radius:20px;padding:clamp(18px,3vw,32px);margin:24px 0;width:100%;clear:both;font:inherit}.wop *{box-sizing:border-box}.wop .wop-heading{font-size:1.15em;font-weight:600;line-height:1.5;margin:0 0 22px}.wop-meter{height:12px;border-radius:20px;background:var(--wop-track);overflow:hidden}.wop-fill{display:block;height:100%;width:0;background:var(--wop-accent);border-radius:inherit;transition:width .45s ease}.wop-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:20px}.wop-offer{position:relative;min-width:0}.wop-offer summary{cursor:pointer;list-style:none;display:flex;align-items:center;flex-direction:column;text-align:center;gap:6px;border-radius:10px;padding:10px 6px;height:100%;border:1px solid var(--wop-track)}.wop-offer summary::-webkit-details-marker{display:none}.wop-offer summary:focus-visible{outline:3px solid var(--wop-accent);outline-offset:3px}.wop-icon{display:grid;place-items:center;border:1px solid var(--wop-accent);border-radius:50%;width:38px;height:38px;color:var(--wop-accent)}.wop-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.wop-offer.is-reached .wop-icon{background:var(--wop-accent);color:var(--wop-background)}.wop-title{font-size:.9em;line-height:1.35}.wop-state{font-size:.72em;line-height:1.4}.wop-description{position:absolute;z-index:30;bottom:calc(100% + 10px);left:0;width:260px;max-width:75vw;background:var(--wop-text);color:var(--wop-background);border-radius:10px;padding:14px;font-size:.88em;line-height:1.5;box-shadow:0 8px 24px #0002;overflow-wrap:anywhere}.wop-offer:last-child .wop-description{left:auto;right:0}.wop .wop-total{font-size:.85em;margin:18px 0 0;line-height:1.5}.wop .wop-error{font-size:.85em;margin:12px 0 0}.wop [hidden]{display:none!important}@media(hover:hover){.wop-offer:not([open]):hover>.wop-description{display:block}.wop-offer summary:hover{background:var(--wop-track)}}@media(max-width:480px){.wop-offers{grid-template-columns:repeat(2,minmax(0,1fr))}.wop-offer:nth-child(even) .wop-description{right:0;left:auto}}@media(prefers-reduced-motion:reduce){.wop-fill{transition:none}}
/* Compact cards: available gifts are raised; completed offers are inset. */
.wop{padding:clamp(16px,2.4vw,26px)}
.wop .wop-heading{margin-bottom:16px}
.wop-offers{margin-top:16px;gap:10px}
.wop-offer summary{position:relative;isolation:isolate;gap:4px;padding:12px 8px;min-height:112px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.wop-icon{width:32px;height:32px}
.wop-icon svg{width:21px;height:21px}
.wop-title{font-size:.84em}
.wop-offer .wop-state{position:absolute;z-index:2;pointer-events:none;font-size:.7em;font-weight:700;line-height:1.3;letter-spacing:.01em}
.wop-offer.is-active summary{border-color:var(--wop-accent);background:var(--wop-background);box-shadow:0 5px 0 var(--wop-accent),0 9px 16px #0002;transform:translateY(-3px);padding-top:30px}
.wop-offer.is-active .wop-state{top:0;left:0;right:0;padding:5px 6px;background:var(--wop-accent);color:var(--wop-background);border-radius:9px 9px 0 0}
.wop-offer.is-active summary:active{transform:translateY(1px);box-shadow:0 1px 0 var(--wop-accent),0 3px 7px #0002}
.wop-offer.is-applied summary{background:var(--wop-track);border-color:var(--wop-track);box-shadow:inset 0 2px 6px #0002;transform:translateY(1px)}
.wop-offer.is-applied summary>:not(.wop-state){opacity:.36}
.wop-offer.is-applied .wop-state{inset:0;display:flex;align-items:center;justify-content:center;padding:12px;color:var(--wop-text);border-radius:9px;background:linear-gradient(transparent 12%,var(--wop-background) 40%,var(--wop-background) 60%,transparent 88%);text-wrap:balance;font-size:.8em}
.wop .wop-total{margin-top:14px;font-size:.8em}
@media(hover:hover){.wop-offer.is-active summary:hover{background:var(--wop-background);transform:translateY(-5px);box-shadow:0 7px 0 var(--wop-accent),0 12px 20px #0002}.wop-offer.is-applied summary:hover{background:var(--wop-track)}}
@media(prefers-reduced-motion:reduce){.wop-offer summary{transition:none}}
/* Minimal scale. Markers use readable equal-width segments, wrapping inside
   narrow containers instead of depending on viewport width. */
.wop--minimal{padding:18px 20px;border-radius:18px;container-type:inline-size}
.wop--minimal .wop-heading{font-size:1em;line-height:1.45;margin:0 0 8px}
.wop--minimal .wop-meter{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.wop--minimal .wop-total{display:none}
.wop--minimal .wop-offers{display:grid;grid-template-columns:repeat(var(--wop-columns,4),minmax(0,1fr));gap:10px 0;margin:0;padding:0}
.wop--minimal .wop-offer{position:relative;min-width:0}
.wop--minimal .wop-offer::before{content:"";position:absolute;top:26px;left:-50%;width:100%;height:6px;border-radius:6px;background:linear-gradient(to right,var(--wop-accent) 0 var(--wop-segment,0%),var(--wop-track) var(--wop-segment,0%) 100%);pointer-events:none}
.wop--minimal .wop-offer.is-row-start::before{left:0;width:50%}
.wop--minimal .wop-offer summary,.wop--minimal .wop-offer summary:hover,.wop--minimal .wop-offer summary:active{z-index:1;min-height:86px;height:auto;padding:10px 2px 2px;gap:8px;background:none;border:0;border-radius:8px;box-shadow:none;transform:none;isolation:auto}
.wop--minimal .wop-icon{position:relative;flex:none;width:32px;height:32px;margin:0;background:var(--wop-background);color:var(--wop-accent);border:1.5px solid var(--wop-accent);box-shadow:0 0 0 4px var(--wop-background);transition:transform .18s ease,box-shadow .18s ease}
.wop--minimal .wop-offer summary>strong{font-size:.73em;font-weight:500;line-height:1.3;max-width:100%;overflow-wrap:anywhere}
.wop--minimal .wop-offer.is-active .wop-icon{transform:scale(1.22);background:var(--wop-accent);color:var(--wop-background);box-shadow:0 0 0 4px var(--wop-background),0 4px 8px #0003}
.wop--minimal .wop-offer.is-applied summary>:not(.wop-state){opacity:1}
.wop--minimal .wop-offer.is-applied .wop-icon{background:var(--wop-track);color:var(--wop-accent);border-color:var(--wop-track);box-shadow:inset 0 1px 3px #0002,0 0 0 4px var(--wop-background)}
.wop--minimal .wop-offer.is-applied .wop-icon svg{opacity:.4}
.wop--minimal .wop-offer.is-applied .wop-icon::after{content:"✓";position:absolute;right:-4px;top:-5px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:var(--wop-accent);color:var(--wop-background);font:bold 12px/1 sans-serif;box-shadow:0 0 0 2px var(--wop-background)}
.wop--minimal .wop-offer .wop-title,.wop--minimal .wop-offer .wop-state{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;inset:auto!important}
.wop--minimal .wop-description{bottom:calc(100% + 5px);font-size:.8em;max-width:min(260px,80vw);width:max-content}
.wop--minimal .wop-offer .wop-description{left:50%;right:auto;transform:translateX(-50%)}
.wop--minimal .wop-offer.is-row-start .wop-description{left:0;transform:none}
.wop--minimal .wop-offer.is-row-end .wop-description{left:auto;right:0;transform:none}
@media(hover:hover){.wop--minimal .wop-offer.is-active summary:hover .wop-icon{transform:scale(1.3)}.wop--minimal .wop-offer.is-active summary:active .wop-icon{transform:scale(1.12)}}
@container(max-width:320px){.wop--minimal .wop-offer summary>strong{font-size:11px}.wop--minimal .wop-icon{width:30px;height:30px}.wop--minimal .wop-offer::before{top:25px}}
@media(prefers-reduced-motion:reduce){.wop--minimal .wop-icon{transition:none}}
.wop--minimal .wop-description{max-width:var(--wop-tooltip-width,260px);width:var(--wop-tooltip-width,260px);white-space:normal;overflow-wrap:anywhere}
.wop--minimal .wop-amount-value{white-space:nowrap}
@container(max-width:320px){.wop--minimal .wop-amount-prefix{display:block}.wop--minimal .wop-offer summary>strong{line-height:1.4}}