/* gift builder: a popcorn bag that fills as you go */
.gb{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;margin-top:10px}
.gb-bag{position:sticky;top:110px;text-align:center}
.gb-bag svg{width:100%;max-width:280px;height:auto;overflow:visible;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
.gb-bag #gbPile circle,.gb-bag #gbSpill circle{fill:#FFF7E8;stroke:#E2C386;stroke-width:2}
.gb-bag #gbPile g{transition:transform .5s cubic-bezier(.2,1.4,.4,1),opacity .3s}
.gb-step{margin:14px 0 8px;font:700 12px var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--butter)}
.gb-meter{height:10px;border-radius:999px;border:2px solid var(--line);overflow:hidden;max-width:220px;margin:0 auto}
.gb-meter i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--red) 0 10px,var(--popcorn) 10px 20px);transition:width .5s}
.gb-fall{position:absolute;top:28%;left:50%;width:26px;height:26px;pointer-events:none;animation:gbFall 1.9s linear infinite}
.gb-fall svg{width:100%;height:100%}
@keyframes gbFall{0%{transform:translate(var(--x0),0) rotate(0);opacity:0}12%{opacity:1}100%{transform:translate(var(--x1),250px) rotate(var(--r));opacity:0}}
.gb-stage{min-height:420px;background:var(--maroon-ink);border:1.5px solid var(--line);border-radius:16px;padding:28px}
.gb-stage h3{margin:0 0 6px;font:700 24px var(--label);letter-spacing:.08em;text-transform:uppercase}
.gb-stage .hint{margin:0 0 20px;color:var(--muted)}
.gb-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gb-opt{display:flex;flex-direction:column;text-align:left;background:var(--maroon);border:2px solid var(--line);border-radius:12px;padding:0;overflow:hidden;cursor:pointer;color:inherit;font:inherit;transition:border-color .15s,transform .15s}
.gb-opt:hover,.gb-opt:focus-visible{border-color:var(--butter);transform:translateY(-3px)}
.gb-opt img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gb-opt span{padding:14px 16px 16px;display:block}
.gb-opt b{display:block;font:700 17px var(--label);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.gb-opt small{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.gb-opt em{display:block;margin-top:10px;font:700 15px var(--label);font-style:normal;color:var(--butter)}
.gb-sizes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gb-size{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--maroon);border:2px solid var(--line);border-radius:12px;padding:18px 20px;cursor:pointer;color:inherit;font:inherit;text-align:left}
.gb-size:hover,.gb-size:focus-visible{border-color:var(--butter)}
.gb-size b{font:700 18px var(--label);letter-spacing:.06em;text-transform:uppercase}
.gb-size small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.gb-size em{font:700 20px var(--label);font-style:normal;color:var(--butter)}
.gb-picked{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;min-height:38px}
.gb-picked button,.gb-picked i{display:inline-flex;align-items:center;gap:8px;font:700 12.5px var(--label);font-style:normal;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:9px 12px 7px}
.gb-picked button{background:var(--popcorn);color:var(--maroon-ink);border:0;cursor:pointer}
.gb-picked button::after{content:"\00d7";font-size:16px;line-height:.7}
.gb-picked i{border:1.5px dashed var(--line);color:var(--muted)}
.gb-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.gb-tools input{flex:1 1 160px;min-width:0;background:var(--maroon);border:1.5px solid var(--line);border-radius:8px;color:var(--popcorn);font:16px var(--body);padding:10px 12px}
.gb-tools input::placeholder{color:var(--muted)}
.gb-tools button{font:700 11.5px var(--label);letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--popcorn);border:1.5px solid var(--line);border-radius:999px;padding:9px 12px 7px;cursor:pointer}
.gb-tools button[aria-pressed=true]{background:var(--butter);border-color:var(--butter);color:var(--maroon-ink)}
.gb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:330px;overflow-y:auto;padding:2px 4px 2px 2px}
.gb-fl{display:flex;align-items:center;gap:10px;background:var(--maroon);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;color:inherit;font:inherit;text-align:left;min-height:54px}
.gb-fl:hover:not(:disabled),.gb-fl:focus-visible{border-color:var(--butter)}
.gb-fl:disabled{opacity:.4;cursor:not-allowed}
.gb-fl.on{border-color:var(--butter);background:rgba(243,198,110,.12)}
.gb-fl .dot{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.gb-fl img{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:none;background:#fff}
.gb-fl span{flex:1;min-width:0;font:700 13px/1.25 var(--label);letter-spacing:.06em;text-transform:uppercase}
.gb-fl em{font:500 13px var(--body);font-style:normal;color:var(--muted);white-space:nowrap}
.gb-fl u{text-decoration:none;font:700 12px var(--label);background:var(--butter);color:var(--maroon-ink);border-radius:999px;padding:3px 7px 1px}
.gb-none{grid-column:1/-1;color:var(--muted);margin:6px 2px}
.gb-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gb-form label{display:grid;gap:6px;font:700 12px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gb-form label.wide{grid-column:1/-1}
.gb-form input,.gb-form textarea{background:var(--maroon);border:1.5px solid var(--line);border-radius:8px;color:var(--popcorn);font:16px var(--body);padding:11px 12px;width:100%}
.gb-form textarea{min-height:84px;resize:vertical}
.gb-sum{margin:20px 0 0;padding:16px 18px;border:1.5px dashed var(--line);border-radius:12px;list-style:none}
.gb-sum li{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:15px}
.gb-sum li:last-child{margin-top:8px;padding-top:12px;border-top:1.5px dashed var(--line);font:700 14px var(--label);letter-spacing:.14em;text-transform:uppercase}
.gb-sum li:last-child b{font-size:24px;letter-spacing:0;color:var(--butter)}
.gb-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.gb-back{background:none;border:0;color:var(--muted);font:500 15px var(--body);text-decoration:underline;cursor:pointer;padding:8px 0}
.gb-nav .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.gb-nav .run{font:700 15px var(--label);color:var(--butter);margin-left:auto}
.gb-done{text-align:center;padding:40px 10px}
.gb-done h3{font-size:30px;color:var(--butter)}
.gb-done .cta-row{justify-content:center;margin-top:22px}
[hidden]{display:none!important}
@media (max-width:980px){.gb{grid-template-columns:1fr;gap:18px}.gb-bag{position:static;display:flex;align-items:center;gap:16px;text-align:left}.gb-bag svg{width:110px;flex:none}.gb-bag .gb-info{flex:1}.gb-meter{margin:0;max-width:none}.gb-fall{display:none}}
@media (max-width:640px){.gb-stage{padding:18px}.gb-opts{grid-template-columns:1fr}.gb-opt{flex-direction:row;align-items:center}.gb-opt img{width:110px;aspect-ratio:1}.gb-sizes{grid-template-columns:1fr}.gb-grid{grid-template-columns:repeat(2,1fr);max-height:300px}.gb-form{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gb-fall{display:none}.gb-bag #gbPile g,.gb-meter i{transition:none}}
.gb>*{min-width:0}.gb-stage{min-width:0}

.gb-split{margin:0 0 14px}