/* One bag for the whole site: the marquee Shop button, the bag button, the bag drawer and the product quick view.
   Colors come from the page's own variables, so it follows the Popcorn and Candy worlds. */

/* ---- the marquee Shop button: a little theater sign with chasing bulbs ---- */
.shopmq{--bulb:#FFE7A3;position:relative;display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--maroon-ink);background:var(--butter);
  font:700 15px var(--label);letter-spacing:.2em;text-transform:uppercase;padding:13px 22px 11px 20px;border-radius:10px;border:2.5px solid var(--popcorn);
  box-shadow:4px 4px 0 var(--shadow),inset 0 0 0 4px var(--red);isolation:isolate;white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease}
.shopmq::before,.shopmq::after{content:"";position:absolute;inset:4px;border-radius:7px;z-index:-1;pointer-events:none;border:3px dotted var(--bulb);filter:drop-shadow(0 0 2px var(--bulb))}
.shopmq::after{inset:4px;border-color:transparent;border-top-color:var(--bulb);border-bottom-color:var(--bulb);opacity:0;animation:mqBlink 1.1s steps(1) infinite}
.shopmq::before{animation:mqDim 1.1s steps(1) infinite}
.shopmq .mq-star{display:inline-block;color:var(--red);font-size:13px;transform:translateY(-1px)}
.shopmq:hover,.shopmq:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow),inset 0 0 0 4px var(--red)}
.shopmq:hover::before,.shopmq:hover::after{animation-duration:.45s}
.shopmq:focus-visible{outline:3px solid var(--popcorn);outline-offset:3px}
@keyframes mqDim{50%{opacity:.35}}
@keyframes mqBlink{50%{opacity:1}}
html[data-world="candy"] .shopmq{--bulb:#fff;background:linear-gradient(90deg,#C2105F,#7A2BC9);color:#fff;border-color:#3A1152;box-shadow:4px 4px 0 #3A1152,inset 0 0 0 4px #3A1152}
html[data-world="candy"] .shopmq .mq-star{color:#FFE14D}
.shopmq.big{font-size:19px;padding:19px 34px 16px 30px;border-radius:12px}
.shopmq.big .mq-star{font-size:16px}
@media (prefers-reduced-motion:reduce){.shopmq::before,.shopmq::after{animation:none}}

/* the bag button that sits beside it */
.bagbtn{position:relative;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2.5px solid var(--popcorn);background:transparent;color:var(--popcorn);cursor:pointer;flex:none;transition:transform .12s}
.bagbtn:hover{transform:translateY(-2px)}
.bagbtn:focus-visible{outline:3px solid var(--butter);outline-offset:2px}
.bagbtn svg{width:24px;height:24px}
.bagbtn .bag-n{position:absolute;top:-7px;right:-7px;min-width:23px;height:23px;padding:0 6px;border-radius:12px;background:var(--red);color:#fff;font:700 12px/23px var(--label);letter-spacing:.04em;border:2px solid var(--maroon-ink);transform:scale(0);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.bagbtn.has .bag-n{transform:scale(1)}
.bagbtn.pop{animation:bagPop .45s ease-out}
@keyframes bagPop{30%{transform:scale(1.18) rotate(-8deg)}65%{transform:scale(.95) rotate(5deg)}}
.nav .shopmq{margin-left:0}
.nav .shopmq+.bagbtn{margin-left:-14px}
@media (max-width:1480px){.nav{gap:18px}.nav .links{gap:20px}}
@media (max-width:1400px){.nav .links{gap:15px}.nav .links a{letter-spacing:.08em;font-size:13px}}
@media (max-width:1180px){.nav{gap:14px}.nav .links{gap:11px}.nav .links a{letter-spacing:.05em;font-size:12.5px}.nav .shopmq{padding:11px 14px 9px 12px;font-size:14px;gap:7px}.nav .shopmq .mq-star:last-child{display:none}.nav .bagbtn{width:44px;height:44px}}
@media (max-width:1020px){.nav .world-switch{margin-left:auto}.nav .shopmq{margin-left:0}}
@media (max-width:760px){.nav .shopmq{display:none}.nav .bagbtn{width:42px;height:42px}.nav .shopmq+.bagbtn{margin-left:0}}

@media (max-width:1080px) and (min-width:1021px){.nav .links a{font-size:12px;letter-spacing:.03em}.nav .links{gap:9px}}
@media (max-width:480px){.nav .world-switch{display:none}.nav .shopmq+.bagbtn{margin-left:auto}}

/* mobile quick bar: Shop is the raised marquee in the middle */
.mbar.mq3{grid-template-columns:1fr 1.25fr 1fr;align-items:end}
.mbar.mq3 a.shop{position:relative;margin-top:-26px;padding:18px 4px 13px;border-radius:12px;background:var(--butter);color:var(--maroon-ink);border:2.5px solid var(--popcorn);box-shadow:0 -4px 0 var(--red) inset,3px 3px 0 var(--shadow);font-size:15px;letter-spacing:.2em}
html[data-world="candy"] .mbar.mq3 a.shop{background:linear-gradient(90deg,#C2105F,#7A2BC9);color:#fff;border-color:#3A1152}
.mbar.mq3 a.shop .mq-n{position:absolute;top:-9px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--red);color:#fff;font:700 11px/22px var(--label);letter-spacing:0;border:2px solid var(--maroon-ink);display:none}
.mbar.mq3 a.shop.has .mq-n{display:block}

/* ---- the bag drawer ---- */
.nb-scrim{position:fixed;inset:0;z-index:90;background:rgba(10,2,1,.55);opacity:0;transition:opacity .25s}
html[data-world="candy"] .nb-scrim{background:rgba(58,17,82,.35)}
.nb-scrim.on{opacity:1}
.nb-drawer{position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(440px,100vw);display:flex;flex-direction:column;background:var(--maroon-ink);color:var(--popcorn);border-left:3px solid var(--red);box-shadow:-20px 0 60px rgba(0,0,0,.45);transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);font-family:var(--body)}
.nb-drawer.on{transform:none}
.nb-drawer:focus{outline:none}
@media (prefers-reduced-motion:reduce){.nb-drawer,.nb-scrim{transition:none}}
.nb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 20px 14px;border-bottom:1.5px solid var(--line)}
.nb-head h2{margin:0;font:700 22px/1 var(--label);letter-spacing:.18em;text-transform:uppercase}
.nb-x{background:none;border:1.5px solid var(--line);color:var(--popcorn);border-radius:8px;padding:9px 12px 7px;font:700 12px var(--label);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.nb-ship{padding:14px 20px 4px}
.nb-ship .bar{height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.nb-ship i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--butter),var(--red));transition:width .4s}
.nb-ship p{margin:8px 0 0;font:700 12px var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nb-list{list-style:none;margin:0;padding:8px 20px;overflow:auto;flex:1;overscroll-behavior:contain}
.nb-list li{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.nb-list .ph{display:block;max-width:none;width:62px;height:62px;padding:0;filter:none;animation:none;border-radius:10px;object-fit:cover;background:#fff;border:2px solid var(--line)}
.nb-list .ph.gift{background:repeating-linear-gradient(45deg,var(--red) 0 7px,var(--popcorn) 7px 14px)}
.nb-list .ph.pop{background:repeating-linear-gradient(90deg,#B3140F 0 9px,#FFF7E8 9px 18px)}
.nb-list b{display:block;font:700 15px/1.25 var(--body)}
.nb-list span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.nb-list a.ed{font:700 12px var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--butter)}
.nb-list .none{display:block;text-align:center;padding:40px 6px;border:0;color:var(--muted)}
.nb-list .none .shopmq{margin-top:18px}
.nb-step{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:22px;overflow:hidden}
.nb-step button{width:32px;height:32px;border:0;background:none;color:var(--popcorn);font:700 18px/1 var(--body);cursor:pointer}
.nb-step button:hover{background:var(--line)}
.nb-step output{min-width:22px;text-align:center;font:700 14px var(--label)}
.nb-rm{background:none;border:0;color:var(--muted);font:700 11px var(--label);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:underline}
.nb-deal{margin:6px 20px 0;padding:10px 12px;border-radius:8px;background:var(--line);font-size:13px}
.nb-foot{padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px));border-top:1.5px solid var(--line);display:grid;gap:10px}
.nb-foot .row{display:flex;justify-content:space-between;align-items:baseline;font:700 14px var(--label);letter-spacing:.14em;text-transform:uppercase}
.nb-foot .row b{font:700 24px var(--label);letter-spacing:.02em}
.nb-go{display:flex;justify-content:center;align-items:center;gap:10px;text-decoration:none;background:var(--red);color:#fff;border:2.5px solid var(--popcorn);border-radius:10px;padding:17px 18px 14px;font:700 16px var(--label);letter-spacing:.18em;text-transform:uppercase;box-shadow:4px 4px 0 var(--shadow)}
.nb-go.off{opacity:.45;pointer-events:none}
.nb-more{text-align:center;font:700 12px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:underline;background:none;border:0;cursor:pointer}
.nb-foot small{text-align:center;color:var(--muted);font-size:12px}

/* ---- quick view ---- */
.nb-qv{border:0;padding:0;max-width:min(920px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);border-radius:16px;background:var(--maroon-ink);color:var(--popcorn);box-shadow:0 30px 80px rgba(0,0,0,.6);outline:3px solid var(--red)}
.nb-qv::backdrop{background:rgba(10,2,1,.6)}
html[data-world="candy"] .nb-qv::backdrop{background:rgba(58,17,82,.4)}
.nb-qv .in{display:grid;grid-template-columns:1.05fr 1fr;min-height:420px}
.nb-qv .gal{background:#fff;position:relative;display:grid;place-items:center;padding:20px}
.nb-qv .gal img{width:100%;max-height:520px;object-fit:contain}
.nb-qv .thumbs{position:absolute;left:12px;bottom:12px;display:flex;gap:6px}
.nb-qv .thumbs button{width:46px;height:46px;border-radius:8px;border:2px solid #ddd;background:#fff center/cover;cursor:pointer;padding:0}
.nb-qv .thumbs button[aria-pressed=true]{border-color:var(--red)}
.nb-qv .info{padding:28px 28px 24px;display:flex;flex-direction:column;gap:14px;overflow:auto;max-height:calc(100dvh - 24px)}
.nb-qv .kick{font:700 12px var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--butter)}
.nb-qv h2{margin:0;font:700 30px/1.1 var(--body)}
.nb-qv .price{font:700 26px var(--label)}
.nb-qv .desc{font-size:15px;line-height:1.55;color:var(--muted);max-height:180px;overflow:auto}
.nb-qv .opts{display:flex;flex-wrap:wrap;gap:8px}
.nb-qv .opts button{border:2px solid var(--line);background:none;color:var(--popcorn);border-radius:8px;padding:10px 12px 8px;font:700 13px var(--label);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-align:left}
.nb-qv .opts button small{display:block;font:500 12px var(--body);letter-spacing:0;text-transform:none;opacity:.75}
.nb-qv .opts button[aria-pressed=true]{border-color:var(--butter);background:var(--butter);color:var(--maroon-ink)}
.nb-qv .opts button:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.nb-qv .buy{display:flex;gap:10px;align-items:stretch;margin-top:auto}
.nb-qv .buy .nb-step{border-width:2px;border-radius:10px}
.nb-qv .buy .nb-step button{height:52px;width:40px}
.nb-qv .buy .nb-go{flex:1;cursor:pointer}
.nb-qv .stock{font-size:13px;color:var(--muted)}
.nb-qv .close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:2px solid #3A1152;background:#fff;color:#3A1152;font:700 20px/1 var(--body);cursor:pointer}
@media (max-width:720px){.nb-qv .in{grid-template-columns:1fr}.nb-qv .gal{padding:12px;max-height:44vh}.nb-qv .gal img{max-height:38vh}.nb-qv .info{padding:20px;max-height:none}.nb-qv h2{font-size:24px}}
.nb-ph{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#FFF7E8 0 14px,#FBE9C8 14px 28px);color:#8E0B0B;font:400 40px "Rye",serif}

.nb-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:95;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--popcorn);color:var(--maroon-ink);font:700 14px var(--label);letter-spacing:.06em;padding:13px 18px 11px;border-radius:10px;box-shadow:4px 4px 0 var(--shadow);transition:.25s;max-width:calc(100vw - 32px);text-align:center}
.nb-toast.show{opacity:1;transform:translate(-50%,0)}
.nb-toast button{margin-left:10px;background:none;border:0;font:inherit;color:var(--red);text-decoration:underline;cursor:pointer}
/* Pick & Mix bags in the drawer */
.nb-list .nb-mixph{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:4px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,247,232,.9));border-radius:12px 12px 18px 18px}
.nb-list .nb-mixph img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nb-list .nb-mixlist{display:block;font-size:12px;line-height:1.4;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nb-list .nb-mixrow a.ed{display:inline-block;margin-top:6px}
/* Accessibility: Candy mode text on the raspberry pink is white, and light text never sits on white */
html[data-world="candy"] .btn.red,html[data-world="candy"] .red.btn,html[data-world="candy"] button.red,html[data-world="candy"] [type="submit"].red{color:#fff}
html[data-world="candy"] button[data-fam][aria-pressed="true"]{color:#fff}
html[data-world="candy"] .hours-list li,html[data-world="candy"] .hours-list li span{color:#3A1152}
html[data-world="candy"] .hours-list li.today,html[data-world="candy"] .hours-list li.today span{color:#C2105F}
html[data-world="candy"] .cq-rows dd{color:#3A1152}
html[data-world="candy"] .result .k{color:#fff}
html[data-world="candy"] .cq-top,html[data-world="candy"] .cq-top b{color:#3A1152}
html[data-world="candy"] .sh-search input{color:#3A1152}