.offer-picker{padding-block:4rem 3rem;border-top:.1rem solid rgba(var(--color-foreground),.08)}
.offer-picker__inner{--op-line:rgba(var(--color-foreground),.12);--op-line-strong:rgba(var(--color-foreground),.28);--op-muted:rgba(var(--color-foreground),.6)}
.offer-picker__badge{display:inline-block;margin:0 auto 1.6rem;padding:.5rem 1.2rem;border:.1rem solid var(--op-accent);color:var(--op-accent);font-size:.9rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.offer-picker__badge,.offer-picker__title,.offer-picker__sub{text-align:center}
.offer-picker__title{margin:0 0 .8rem;text-wrap:balance}
.offer-picker__sub{max-width:58rem;margin:0 auto;color:var(--op-muted)}
.offer-picker__progress{max-width:56rem;margin:3rem auto 0}
.offer-picker__track{position:relative;height:.3rem;margin-top:3rem;background:var(--op-line)}
.offer-picker__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--op-accent);transition:width .45s cubic-bezier(.32,.72,.3,1)}
.offer-picker__pips{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center}
.offer-picker__pip{position:relative;display:grid;place-items:center;width:2.6rem;height:2.6rem;border:.1rem solid var(--op-line-strong);border-radius:50%;background:rgb(var(--color-background));color:var(--op-muted);font-size:1rem;transition:background-color .3s,border-color .3s,color .3s}
.offer-picker__pip:first-child{margin-left:-.1rem}
.offer-picker__pip:last-child{margin-right:-.1rem}
.offer-picker__pip.is-on,.offer-picker__pip.is-done{background:var(--op-accent);border-color:var(--op-accent);color:rgb(var(--color-background))}
.offer-picker__pip-label{position:absolute;top:3rem;white-space:nowrap;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--op-muted)}
.offer-picker__msg{margin:4rem 0 0;text-align:center;font-size:1.3rem;letter-spacing:.1em;text-transform:uppercase}
.offer-picker__msg.is-complete{color:var(--op-accent);font-weight:600}
.offer-picker__slots{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem}
.op-slot{display:flex;align-items:center;gap:.8rem;padding:.5rem .9rem .5rem .5rem;border:.1rem dashed var(--op-line-strong);background:rgb(var(--color-background));color:var(--op-muted);font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase}
.op-slot.is-filled{border-style:solid;border-color:var(--op-accent);color:rgb(var(--color-foreground));font-size:1.2rem;letter-spacing:.02em;text-transform:none}
.op-slot__thumb{display:grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;overflow:hidden;background:rgba(var(--color-foreground),.06)}
.op-slot__thumb img{width:100%;height:100%;object-fit:cover}
.op-slot__remove{padding:0 .2rem;border:0;background:none;color:var(--op-muted);font-size:1.6rem;line-height:1;cursor:pointer}
.offer-picker__tabs{display:flex;flex-wrap:wrap;gap:.2rem;justify-content:center;margin-top:3rem;border-bottom:.1rem solid var(--op-line)}
.offer-picker__tab{margin-bottom:-.1rem;padding:.9rem 1.4rem;border:0;border-bottom:.1rem solid transparent;background:none;color:var(--op-muted);font-size:1.1rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.offer-picker__tab[aria-selected="true"]{color:rgb(var(--color-foreground));border-bottom-color:var(--op-accent)}
.offer-picker__select{display:none}
@media screen and (max-width:680px){.offer-picker__tabs{display:none}.offer-picker__select{display:block;width:100%;margin-top:2.4rem;padding:1.1rem 1.2rem;border:.1rem solid var(--op-line-strong);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;font-size:1.3rem}}
.offer-picker__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;margin-top:2.2rem}
.offer-picker__grid[hidden]{display:none!important}
@media screen and (max-width:989px){.offer-picker__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media screen and (max-width:640px){.offer-picker__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}}
.offer-picker__empty{grid-column:1/-1;margin:2.4rem 0;text-align:center;color:var(--op-muted);font-size:1.3rem}
.op-card{display:flex;flex-direction:column;border:.1rem solid var(--op-line);background:rgb(var(--color-background));transition:border-color .2s,box-shadow .2s,opacity .2s}
.op-card:hover{border-color:var(--op-line-strong)}
.op-card.is-picked{border-color:var(--op-accent);box-shadow:0 0 0 .1rem var(--op-accent)}
.op-card.is-locked{opacity:.4;pointer-events:none}
.op-card__media{position:relative;aspect-ratio:1/1;max-width:100%;overflow:hidden;background:rgba(var(--color-foreground),.04)}
.op-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.op-card__media-alt{opacity:0;transition:opacity .4s ease}
.op-card:hover .op-card__media-alt,.op-card:focus-within .op-card__media-alt{opacity:1}
.op-card__qv{position:absolute;top:.8rem;right:.8rem;z-index:2;display:grid;place-items:center;width:2.8rem;height:2.8rem;border:.1rem solid var(--op-line);border-radius:50%;background:rgb(var(--color-background));color:rgb(var(--color-foreground));opacity:0;cursor:pointer;transition:opacity .18s}
.op-card:hover .op-card__qv,.op-card__qv:focus-visible{opacity:1}
@media (hover:none){.op-card__qv{opacity:1}.op-card__media-alt{display:none}}
.op-card__swatches{position:absolute;left:.9rem;bottom:.9rem;z-index:2;display:flex;flex-wrap:wrap;gap:.6rem;max-width:80%}
.op-swatch{width:1.4rem;height:1.4rem;padding:0;border:.2rem solid rgb(var(--color-background));border-radius:50%;background:var(--op-swatch);box-shadow:0 0 0 .1rem var(--op-line-strong);cursor:pointer;transition:transform .15s,box-shadow .15s}
.op-swatch[aria-pressed="true"]{transform:scale(1.2);box-shadow:0 0 0 .15rem rgb(var(--color-foreground))}
.op-card__body{display:flex;flex-direction:column;flex:1;gap:.2rem;padding:1.2rem 1.2rem 1.3rem}
.op-card__title{margin:0;font-size:1.6rem;line-height:1.25}
.op-card__titlebtn{all:unset;display:inline;cursor:pointer;text-underline-offset:.3rem}
.op-card__titlebtn:hover,.op-card__titlebtn:focus-visible{text-decoration:underline}
.op-card__variant{margin:0;color:var(--op-muted);font-size:1rem;letter-spacing:.1em;text-transform:uppercase}
.op-card__price{margin:.5rem 0 0;font-size:1.2rem}
.op-card__price s{color:var(--op-muted);margin-right:.6rem}
.op-card__price b{color:var(--op-accent);font-size:1rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.op-card__pick{width:100%;margin-top:auto;padding:.8rem;border:.1rem solid rgb(var(--color-foreground));background:transparent;color:rgb(var(--color-foreground));font-size:1rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.op-card.is-picked .op-card__pick{background:var(--op-accent);border-color:var(--op-accent);color:rgb(var(--color-background))}
.offer-picker__bar{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:2.4rem;padding:1.3rem 0;padding-bottom:calc(1.3rem + env(safe-area-inset-bottom,0px));border-top:.1rem solid var(--op-line);background:rgb(var(--color-background))}
.offer-picker__summary{flex:1;min-width:18rem;margin:0;color:var(--op-muted);font-size:1.2rem;font-variant-numeric:tabular-nums}
.offer-picker__submit:disabled{opacity:.35;cursor:not-allowed}
.offer-picker__modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.6rem;background:rgba(0,0,0,.6)}
.offer-picker__modal[hidden]{display:none!important}
body.op-modal-open{overflow:hidden}
.op-qv{display:grid;grid-template-columns:1.05fr 1fr;width:100%;max-width:88rem;max-height:90vh;overflow:hidden;background:rgb(var(--color-background));box-shadow:0 2rem 6rem rgba(0,0,0,.35)}
@media screen and (max-width:749px){.op-qv{grid-template-columns:1fr;max-height:92vh;overflow-y:auto}}
.op-qv__media{display:flex;flex-direction:column;gap:.8rem;padding:1.2rem;background:rgba(var(--color-foreground),.03);min-width:0}
.op-qv__stage{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;background:rgb(var(--color-background))}
.op-qv__r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.op-qv__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
.op-qv__r:checked + .op-qv__photo{opacity:1}
.op-qv__thumbs{display:flex;gap:.8rem;flex-wrap:wrap}
.op-qv__thumb{width:5.4rem;height:5.4rem;overflow:hidden;cursor:pointer;border:.1rem solid transparent;opacity:.6;transition:opacity .15s,border-color .15s}
.op-qv__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.op-qv__thumb:hover{opacity:1}
.op-qv__media:has(#op-qv-0:checked) .op-qv__thumb:nth-of-type(1),
.op-qv__media:has(#op-qv-1:checked) .op-qv__thumb:nth-of-type(2),
.op-qv__media:has(#op-qv-2:checked) .op-qv__thumb:nth-of-type(3),
.op-qv__media:has(#op-qv-3:checked) .op-qv__thumb:nth-of-type(4),
.op-qv__media:has(#op-qv-4:checked) .op-qv__thumb:nth-of-type(5){opacity:1;border-color:rgb(var(--color-foreground))}
.op-qv__info{position:relative;padding:2.8rem 2.8rem 2.4rem;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem}
@media screen and (max-width:749px){.op-qv__info{padding:2rem 1.6rem}}
.op-qv__close{position:absolute;top:1.2rem;right:1.4rem;border:0;background:none;color:var(--op-muted);font-size:2.4rem;line-height:1;cursor:pointer;z-index:2}
.op-qv__brand{margin:0;font-size:1rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(var(--color-foreground),.5)}
.op-qv__title{margin:.4rem 0 .6rem;font-size:2.4rem;line-height:1.15}
.op-qv__price{margin:0 0 1.2rem;font-size:1.4rem}
.op-qv__price s{color:rgba(var(--color-foreground),.5);margin-right:.8rem}
.op-qv__price b{color:var(--op-accent,#A8863C);font-size:1.1rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.op-qv__optlabel{margin:.4rem 0 .2rem;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--color-foreground),.6)}
.op-qv__swatches{position:static;margin:.4rem 0 1.4rem;max-width:none}
.op-qv__swatches .op-swatch{width:2rem;height:2rem}
.op-qv__desc{margin:0 0 1.4rem;font-size:1.4rem;line-height:1.6;color:rgba(var(--color-foreground),.8)}
.op-qv__meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin:0 0 1.8rem;padding-top:1.4rem;border-top:.1rem solid rgba(var(--color-foreground),.12);font-size:1.1rem;letter-spacing:.04em;color:rgba(var(--color-foreground),.6)}
.op-qv__add{width:100%;margin-top:auto}
.op-qv__link{margin:1.2rem 0 0;text-align:center;font-size:1.2rem}
.op-qv__link a{color:rgba(var(--color-foreground),.7)}
@media (prefers-reduced-motion:reduce){.offer-picker *,.offer-picker *::before,.offer-picker *::after,.op-qv__photo{transition:none!important}}
