/* popcorn bag: size menu, flying kernels, striped bag, drawer */
.flavor{position:relative}
.pb-add{font:700 12px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--maroon-ink);background:var(--butter);border:0;border-radius:6px;padding:9px 12px 7px;cursor:pointer;box-shadow:2px 2px 0 var(--shadow);transition:transform .12s}
.pb-add:hover{transform:translate(-1px,-1px)}
.pb-add[aria-expanded=true]{background:var(--popcorn)}
.pb-add:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.pb-sizes{position:absolute;left:-1.5px;right:-1.5px;top:calc(100% - 12px);z-index:20;background:var(--popcorn);color:var(--maroon-ink);border:2px solid var(--butter);border-radius:0 0 12px 12px;padding:10px;box-shadow:0 18px 30px rgba(0,0,0,.5);display:grid;gap:4px}
.pb-sizes p{margin:2px 4px 4px;font:700 11px var(--label);letter-spacing:.2em;text-transform:uppercase;color:#7a4a44}
.pb-sizes button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;background:#fff;border:1.5px solid rgba(36,5,3,.14);border-radius:8px;padding:9px 12px;cursor:pointer;font:700 14px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--maroon-ink);text-align:left}
.pb-sizes button:hover,.pb-sizes button:focus-visible{background:var(--red);border-color:var(--red);color:#fff}
.pb-sizes button small{display:block;font:500 12px var(--body);letter-spacing:0;text-transform:none;opacity:.7}
.pb-sizes button b{font:700 15px var(--label)}
.pb-sizes .pb-x{justify-content:center;background:none;border:0;font:500 13px var(--body);letter-spacing:0;text-transform:none;text-decoration:underline;padding:6px}
.pb-sizes .pb-x:hover,.pb-sizes .pb-x:focus-visible{background:none;color:var(--red)}
.pb-kernel{position:fixed;z-index:95;width:46px;height:46px;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.pb-kernel svg{width:100%;height:100%;display:block}
.pb-btn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:45;width:104px;height:128px;background:none;border:0;padding:0;cursor:pointer;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.pb-btn svg{width:100%;height:100%;overflow:visible}
.pb-btn #pbPile circle{fill:#FFF7E8;stroke:#E2C386;stroke-width:2}
.pb-count{position:absolute;top:26px;right:-4px;min-width:30px;height:30px;padding:0 7px;border-radius:999px;background:var(--butter);color:var(--maroon-ink);font:700 15px/31px var(--label);text-align:center;border:2px solid var(--maroon-ink);opacity:0;transform:scale(.4);transition:.2s}
.pb-btn.has .pb-count{opacity:1;transform:none}
.pb-total{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);background:var(--popcorn);color:var(--maroon-ink);font:700 12.5px var(--label);padding:5px 8px 3px;border-radius:6px;border:2px solid var(--maroon-ink);white-space:nowrap}
.pb-panel{position:fixed;inset:0;z-index:90;background:rgba(18,2,2,.66);display:flex;justify-content:flex-end}
.pb-panel[hidden]{display:none}
.pb-card{width:min(430px,100%);height:100%;background:var(--popcorn);color:var(--maroon-ink);display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.5);outline:none}
.pb-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 14px;border-bottom:2px dashed rgba(36,5,3,.16)}
.pb-head h2{margin:0;font:700 22px var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.pb-head button{background:none;border:0;font:700 12px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--maroon-ink);text-decoration:underline;cursor:pointer;padding:8px}
.pb-ship{padding:14px 22px 4px}
.pb-ship div{height:12px;border-radius:999px;background:#F2E3C4;border:2px solid var(--maroon-ink);overflow:hidden}
.pb-ship i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--red) 0 10px,#fff 10px 20px);transition:width .4s}
.pb-ship p{margin:8px 0 0;font-size:14px}
.pb-list{list-style:none;margin:0;padding:8px 22px;overflow-y:auto;flex:1}
.pb-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(36,5,3,.1)}
.pb-list li>div:nth-child(2){flex:1;min-width:0}
.pb-list b{display:block;font:700 15px var(--label);letter-spacing:.06em;text-transform:uppercase}
.pb-list span{font-size:13.5px;color:#6b4540}
.pb-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--maroon-ink);flex:none}
.pb-step{display:flex;align-items:center;border:2px solid var(--maroon-ink);border-radius:8px;overflow:hidden}
.pb-step button{width:34px;height:34px;border:0;background:var(--maroon-ink);color:var(--popcorn);font:700 17px var(--label);cursor:pointer}
.pb-step output{min-width:30px;text-align:center;font:700 15px var(--label)}
.pb-other a{font:700 12px var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.pb-none{justify-content:center;color:#6b4540;border:0!important;padding:34px 0!important;text-align:center}
.pb-foot{padding:16px 22px calc(20px + env(safe-area-inset-bottom,0px));border-top:2px dashed rgba(36,5,3,.16);display:grid;gap:12px}
.pb-foot .row{display:flex;justify-content:space-between;align-items:baseline;font:700 13px var(--label);letter-spacing:.16em;text-transform:uppercase}
.pb-foot .row b{font-size:26px;letter-spacing:0;color:var(--red)}
.pb-foot .btn{text-align:center}
.pb-foot .btn.off{opacity:.45}
.pb-foot .clear{background:none;border:0;font:500 13.5px var(--body);color:#6b4540;text-decoration:underline;cursor:pointer;justify-self:center}
.pb-foot small{font-size:12.5px;color:#6b4540;text-align:center;line-height:1.4}
.pb-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:96;background:var(--popcorn);color:var(--maroon-ink);border:2px solid var(--maroon-ink);box-shadow:4px 4px 0 var(--shadow);font:700 13px var(--label);letter-spacing:.08em;padding:11px 16px 9px;border-radius:8px;opacity:0;pointer-events:none;transition:.25s;max-width:calc(100vw - 150px);text-align:center}
.pb-toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:900px){.pb-btn{bottom:calc(86px + env(safe-area-inset-bottom,0px))}.pb-toast{bottom:96px}}
@media (max-width:640px){.pb-btn{width:84px;height:104px;right:10px}.pb-count{top:20px}.pb-total{bottom:20px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.pb-add,.pb-count,.pb-toast,.pb-ship i{transition:none}}

/* gifts in the bag, and the size menu when it opens outside a flavor card */
.pb-gift{background:repeating-linear-gradient(45deg,var(--red) 0 4px,#fff 4px 8px)}
.pb-rm{background:none;border:0;font:700 12px var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--red);text-decoration:underline;cursor:pointer;padding:8px 0}
[data-pb-host]{position:relative}
[data-pb-host]>.pb-sizes{left:auto;right:0;top:calc(100% + 8px);width:min(340px,100%);border-radius:12px;border-width:2px}
[hidden]{display:none!important}

.pb-sizes .pb-tin{justify-content:center;gap:8px;background:var(--maroon-ink,#240503);border-color:var(--maroon-ink,#240503);color:#F3C66E;letter-spacing:.18em;font-size:12px;padding:10px 12px;margin-top:4px}
.pb-sizes .pb-tin::before{content:"";width:13px;height:14px;border:2px solid currentColor;border-radius:2px 2px 3px 3px;border-top-width:4px;box-sizing:border-box}
.pb-sizes .pb-tin:hover,.pb-sizes .pb-tin:focus-visible{background:var(--red);border-color:var(--red);color:#fff}
/* Seasonal Selection band, top of the flavor menu */
.sea-band{margin:6px 0 34px;padding:22px;border:3px solid var(--butter);border-radius:20px;background:linear-gradient(180deg,rgba(243,198,110,.14),rgba(243,198,110,0))}
.sea-h{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.sea-h img{flex:none;width:72px;height:72px;border-radius:12px;box-shadow:3px 3px 0 var(--shadow)}
.sea-kick{margin:0;font:700 12px var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--butter)}
.sea-h h3{margin:4px 0 0;font:700 clamp(26px,3.2vw,36px)/1.05 var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--popcorn)}
.sea-band article.seasonal{margin-top:0}
.sea-band .sea-grid{margin-top:18px}
@media (max-width:640px){.sea-band{padding:16px 12px;margin-left:-6px;margin-right:-6px}.sea-h img{width:56px;height:56px}}