/* The sale pop-up (inc/popup.php, js/popup.js). Self-contained: the front page doesn't load site.css, so its own tokens.
   The ad's look: a pair of his vials on the cap blue, tagged Full price / Free, then the code and one way in. Phone: a sheet. */
.mwpop { --pi: #0b1538; --pi2: #3a4566; --pi3: #646d8a; --pb: #1d3cff; --pb-hi: #3a55ff; --pn: #070e44;
  position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; padding: 20px; }
.mwpop[hidden] { display: none; }
.mwpop-bg { position: absolute; inset: 0; background: rgba(6, 12, 48, .5); backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%);
  opacity: 0; transition: opacity .26s ease; }
.mwpop-card { position: relative; display: grid; grid-template-columns: 300px 1fr; width: min(760px, 100%); border-radius: 24px; overflow: hidden; outline: none;
  background: #fff; color: var(--pi); box-shadow: 0 40px 90px -30px rgba(6, 12, 48, .55);
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .26s ease, transform .4s cubic-bezier(.22, .61, .21, 1); }
.mwpop.in .mwpop-bg { opacity: 1; }
.mwpop.in .mwpop-card { opacity: 1; transform: none; }
.mwpop-card:focus, .mwpop-card:focus-visible { outline: none !important; box-shadow: 0 40px 90px -30px rgba(6, 12, 48, .55) !important; }   /* focused on open for keyboards; no ring on the card itself */
.mwpop .nw { white-space: nowrap; }
.mwpop-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(11, 21, 56, .06); color: var(--pi); cursor: pointer; transition: background .2s ease; }
.mwpop-x:hover { background: rgba(11, 21, 56, .12); }
.mwpop-x svg { width: 16px; height: 16px; }
.mwpop-x:focus-visible, .mwpop-go:focus-visible, .mwpop-code button:focus-visible { outline: 2px solid var(--pb); outline-offset: 2px; }
.mwpop-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;   /* the pair + tags sit mid-panel (Eric 10-23: too low) */
  gap: 16px; padding: 32px 20px;
  background: radial-gradient(80% 60% at 50% 38%, rgba(74, 99, 255, .55), transparent 70%), linear-gradient(180deg, #1d3cff 0%, #1530d0 55%, var(--pn) 100%); }
.mwpop-pair { display: flex; align-items: flex-end; justify-content: center; gap: 24px; }
.mwpop-v { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mwpop-v img { width: auto; height: 210px; display: block; filter: drop-shadow(0 18px 22px rgba(4, 10, 50, .5)); }
.mwpop-tag { padding: 7px 14px; border-radius: 999px; font: 500 14px/1 "Matter", sans-serif; color: #fff; border: 1px solid rgba(255, 255, 255, .45); white-space: nowrap; }
.mwpop-tag.on { background: #fff; color: var(--pb); border-color: #fff; }
.mwpop-body { padding: 40px 36px 32px; }
.mwpop-k { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font: 500 16px/1.25 "Matter", sans-serif; letter-spacing: -.01em; color: var(--pi, #0b1538); }   /* the "still us" line reads at a glance (Nick 10-23: "so they can read... it's still us, just fresh look") */
.mwpop-k .dot { width: 7px; height: 7px; border-radius: 50%; background: #03c97c; box-shadow: 0 0 0 4px rgba(3, 201, 124, .15); }
.mwpop h2 { margin: 0; font: 500 38px/1.02 "Matter", sans-serif; letter-spacing: -.035em; color: var(--pi); text-wrap: pretty; }
.mwpop-s { margin: 14px 0 0; font: 400 15px/1.5 "Matter", sans-serif; color: var(--pi2); text-wrap: pretty; }
.mwpop-code { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; padding: 8px 8px 8px 16px; border: 1px dashed rgba(11, 21, 56, .25); border-radius: 14px; }
.mwpop-code span { font: 400 13px/1 "Matter", sans-serif; color: var(--pi3); }
.mwpop-code b { flex: 1; font: 500 22px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: .14em; color: var(--pi); }
.mwpop-code button { height: 36px; padding: 0 16px; border: 1px solid rgba(11, 21, 56, .18); border-radius: 999px; background: #fff; color: var(--pi);
  font: 500 14px/1 "Matter", sans-serif; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.mwpop-code button.done { background: #effbf5; color: #0f7a52; border-color: rgba(3, 201, 124, .4); }
.mwpop-go { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin: 14px 0 0; border-radius: 999px; background: var(--pb); color: #fff;
  font: 500 16px/1 "Matter", sans-serif; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.mwpop-go:hover { background: var(--pb-hi); color: #fff; }
.mwpop-go:active { transform: scale(.98); }
.mwpop-alt { margin: 14px 0 0; font: 400 13.5px/1.4 "Matter", sans-serif; color: var(--pi3); text-align: center; }

@media (max-width: 680px) {
  .mwpop { place-items: end center; padding: 0; }
  .mwpop-card { grid-template-columns: 1fr; width: 100%; max-height: 92svh; overflow-y: auto; border-radius: 24px 24px 0 0; transform: translateY(40px); }
  .mwpop-art { padding: 22px 20px 20px; }
  .mwpop-pair { gap: 20px; }
  .mwpop-v { gap: 10px; }
  .mwpop-v img { height: 110px; }
  .mwpop-tag { padding: 6px 12px; font-size: 13px; }
  .mwpop-body { padding: 24px 20px calc(22px + env(safe-area-inset-bottom)); }
  .mwpop h2 { font-size: 30px; }
  .mwpop-x { background: rgba(255, 255, 255, .9); }
}
@media (prefers-reduced-motion: reduce) { .mwpop-bg, .mwpop-card { transition: none; } }
/* the button keeps white text in every state: a site link colour (navy) was winning until hover (Eric 10-23) */
.mwpop a.mwpop-go, .mwpop a.mwpop-go:link, .mwpop a.mwpop-go:visited, .mwpop a.mwpop-go:hover, .mwpop a.mwpop-go:focus { color: #fff; text-decoration: none; }
/* hover: a light sweep across the button, the premium beat (Eric 10-23: "a shimmer on hover") */
.mwpop-go { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 10px 24px -12px rgba(29, 60, 255, .7); transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
.mwpop-go::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 48%, rgba(255, 255, 255, .12) 56%, transparent 70%);
  transform: translateX(-110%); }
.mwpop-go:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(29, 60, 255, .85); }
.mwpop-go:hover::after { transform: translateX(110%); transition: transform .9s cubic-bezier(.22, .61, .21, 1); }
@media (prefers-reduced-motion: reduce) { .mwpop-go::after { display: none; } .mwpop-go:hover { transform: none; } }

/* ---- the entrance (Nick 10-23: "enhance it a bit with something to catch the customers' attention... it needs something"):
   the full-price vial lands, the free one drops in beside it, its tag pops, a light sweeps the panel, three glints twinkle,
   then the code stamps in. Once, about 1.6 s, as the card opens; after that only the "Free" tag catches the light now and then. */
.mwpop.in .mwpop-v:first-of-type { animation: mwpop-rise .6s .12s cubic-bezier(.2, .8, .2, 1) both; }
.mwpop.in .mwpop-v:last-of-type img { animation: mwpop-drop .75s .42s cubic-bezier(.3, 1.45, .5, 1) both; }
.mwpop.in .mwpop-v:first-of-type .mwpop-tag { animation: mwpop-fade .4s .5s ease both; }
.mwpop.in .mwpop-tag.on { animation: mwpop-pop .5s .95s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes mwpop-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes mwpop-drop { 0% { opacity: 0; transform: translateY(-70px) rotate(-6deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes mwpop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mwpop-pop { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: none; } }
/* a band of light across the blue panel, once, as the free vial lands */
.mwpop-art { overflow: hidden; isolation: isolate; }
.mwpop-art::after { content: ""; position: absolute; inset: -20% -60%; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 47%, rgba(255, 255, 255, .08) 53%, transparent 62%); }
.mwpop.in .mwpop-art::after { animation: mwpop-sweep 1.1s 1s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes mwpop-sweep { 0% { opacity: 1; transform: translateX(-45%); } 100% { opacity: 1; transform: translateX(45%); } }
/* three four-point glints around the free vial */
.mwpop-spark { position: absolute; z-index: 2; width: 28px; height: 28px; background: #fff; pointer-events: none; opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); }
.mwpop-spark.s1 { top: 22%; left: 70%; }
.mwpop-spark.s2 { top: 40%; left: 86%; width: 20px; height: 20px; }
.mwpop-spark.s3 { top: 58%; left: 56%; width: 16px; height: 16px; }
.mwpop.in .mwpop-spark.s1 { animation: mwpop-twinkle .9s 1.05s ease-out both; }
.mwpop.in .mwpop-spark.s2 { animation: mwpop-twinkle .8s 1.25s ease-out both; }
.mwpop.in .mwpop-spark.s3 { animation: mwpop-twinkle .8s 1.4s ease-out both; }
@keyframes mwpop-twinkle { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 40% { opacity: 1; transform: scale(1.15) rotate(45deg); } 100% { opacity: 0; transform: scale(.3) rotate(90deg); } }
/* the code stamps in */
.mwpop.in .mwpop-code b { animation: mwpop-stamp .45s 1.3s cubic-bezier(.3, 1.5, .5, 1) both; display: inline-block; transform-origin: left center; }
@keyframes mwpop-stamp { 0% { opacity: 0; transform: scale(1.5); letter-spacing: .4em; } 100% { opacity: 1; transform: none; } }
/* afterwards: the Free tag catches the light every few seconds */
.mwpop-tag.on { position: relative; overflow: hidden; }
.mwpop-tag.on::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(29, 60, 255, .22) 50%, transparent 70%); transform: translateX(-120%); }
.mwpop.in .mwpop-tag.on::after { animation: mwpop-glint 4.5s 2.4s ease-in-out infinite; }
@keyframes mwpop-glint { 0%, 70% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
@media (max-width: 680px) {
  .mwpop-spark.s1 { top: 14%; left: 62%; } .mwpop-spark.s2 { top: 34%; left: 74%; } .mwpop-spark.s3 { top: 50%; left: 56%; }
  @keyframes mwpop-drop { 0% { opacity: 0; transform: translateY(-44px) rotate(-6deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .mwpop.in .mwpop-v:first-of-type, .mwpop.in .mwpop-v:last-of-type img, .mwpop.in .mwpop-tag, .mwpop.in .mwpop-code b, .mwpop.in .mwpop-tag.on::after { animation: none; }
  .mwpop-art::after, .mwpop-spark { display: none; }
}

/* a percentage sale's tags (inc/sale-next.php): the old price struck through, the new one lit */
.mwpop-tag.was { text-decoration: line-through; text-decoration-thickness: 1px; color: rgba(255, 255, 255, .78); }

/* ---- the ribbon-cutting (Nick 10-24: "a quick ribbon-cutting reveal with a small confetti burst"). A satin ribbon in the cap
   blue, stitched white along both edges and carrying the "still us" line, unrolls across the vials from the middle. A snip
   flashes at its centre, the two halves spring back toward their ends and droop away like cut ribbon, and confetti
   (popup.js) bursts from the cut behind the vials and drifts down. Then the price tags and the code land. About 2 s, once. */
.mwpop-pair { position: relative; z-index: 1; }
.mwpop-cf { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.mwpop-cf.f { z-index: 2; }   /* a few pieces pass in front of the vials, for depth */
.mwpop-art:has(.mwpop-rb)::after, .mwpop-art:has(.mwpop-rb) .mwpop-spark { display: none; }   /* the old sweep and glints give way to the cut */
.mwpop-rb { position: absolute; left: -140px; right: -140px; top: 40%; height: 34px; z-index: 3; pointer-events: none; font-style: normal;
  filter: drop-shadow(0 9px 12px rgba(4, 10, 50, .5)) drop-shadow(0 2px 2px rgba(4, 10, 50, .35)); }
.mwpop-rb .h { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px calc(100% - 1px), rgba(255, 255, 255, .22) calc(100% - 1px)),
    linear-gradient(180deg, #4a5fe0 0%, #22359f 13%, #14226e 46%, #0d1858 78%, #1d2f8f 100%);   /* deep navy satin (his button navy), so it reads on the blue panel */
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12); }
/* stitched edges */
.mwpop-rb .h::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; bottom: 4px; border-top: 1px dashed rgba(220, 228, 255, .55); border-bottom: 1px dashed rgba(220, 228, 255, .45); }
.mwpop-rb .h.l { clip-path: polygon(0 0, calc(50% + 7px) 0, calc(50% - 7px) 100%, 0 100%); transform-origin: 0 50%; }
.mwpop-rb .h.r { clip-path: polygon(calc(50% + 7px) 0, 100% 0, 100% 100%, calc(50% - 7px) 100%); transform-origin: 100% 50%; }
/* satin: a soft light runs along the ribbon while it waits to be cut */
.mwpop-rb .h::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 38%, rgba(190, 205, 255, .5) 48%, rgba(255, 255, 255, .16) 54%, transparent 63%);
  transform: translateX(-60%); }
.mwpop-rb b { position: relative; font: 500 11px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: .19em; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(2, 6, 30, .6); }
/* the snip: a white four-point flash and a ring at the cut */
.mwpop-rb .snip { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0;
  background: #fff; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 8px #fff); }
.mwpop-rb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; opacity: 0;
  border: 1.5px solid rgba(255, 255, 255, .9); }

.mwpop.in .mwpop-rb { animation: mwpop-rb-in .6s .16s cubic-bezier(.22, .9, .25, 1) backwards; }
.mwpop.in .mwpop-rb .h::before { animation: mwpop-rb-sheen .9s .45s cubic-bezier(.4, 0, .2, 1) both; }
.mwpop.in .mwpop-rb .h.l { animation: mwpop-rb-l 1.25s 1.12s cubic-bezier(.3, .02, .2, 1) forwards; }
.mwpop.in .mwpop-rb .h.r { animation: mwpop-rb-r 1.25s 1.12s cubic-bezier(.3, .02, .2, 1) forwards; }
.mwpop.in .mwpop-rb .snip { animation: mwpop-snip .5s 1.06s cubic-bezier(.2, .8, .3, 1) both; }
.mwpop.in .mwpop-rb::after { animation: mwpop-ring .6s 1.08s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes mwpop-rb-in { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(-40px 0 -40px 0); } }
@keyframes mwpop-rb-sheen { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
/* cut: each half recoils toward its end, then droops and slides away */
@keyframes mwpop-rb-l { 0% { transform: none; } 12% { transform: translateX(-5%) rotate(2deg); } 62% { opacity: 1; } 100% { transform: translateX(-58%) translateY(46px) rotate(22deg); opacity: 0; } }
@keyframes mwpop-rb-r { 0% { transform: none; } 12% { transform: translateX(5%) rotate(-2deg); } 62% { opacity: 1; } 100% { transform: translateX(58%) translateY(46px) rotate(-22deg); opacity: 0; } }
@keyframes mwpop-snip { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 35% { opacity: 1; transform: scale(1.15) rotate(30deg); } 100% { opacity: 0; transform: scale(.4) rotate(70deg); } }
@keyframes mwpop-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(4.2); } }
/* the tags and the code land after the cut */
.mwpop.in .mwpop-art:has(.mwpop-rb) .mwpop-v:first-of-type .mwpop-tag { animation: mwpop-pop .5s 1.5s cubic-bezier(.3, 1.6, .5, 1) both; }
.mwpop.in .mwpop-art:has(.mwpop-rb) .mwpop-tag.on { animation: mwpop-pop .5s 1.66s cubic-bezier(.3, 1.6, .5, 1) both; }
.mwpop.in .mwpop-art:has(.mwpop-rb) .mwpop-tag.on::after { animation: mwpop-glint 4.5s 3s ease-in-out infinite; }
.mwpop.in .mwpop-card:has(.mwpop-rb) .mwpop-code b { animation-delay: 1.8s; }
@media (max-width: 680px) {
  .mwpop-rb { top: 37%; height: 28px; }
  .mwpop-rb b { font-size: 10px; letter-spacing: .16em; }
}
@media (prefers-reduced-motion: reduce) { .mwpop-rb, .mwpop-cf { display: none; } }

/* ---- "grand": the grand opening (Eric 10-24: "full width and then when ribbon gets cut the card as we know it is behind it").
   One wide satin ribbon across the whole screen at the vials' height, the card waiting behind it, a step back and in shadow.
   The cut: the halves fall away to both sides, the card steps forward into the light, and confetti fills the screen around
   it (behind the card and, for depth, a little in front). Same ribbon, stitching and navy as "ribbon", at ceremony size. */
.mwpop-gcf { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.mwpop-gcf.f { z-index: 4; }
.mwpop--grand .mwpop-card { z-index: 2; }
.mwpop--grand .mwpop-art::after, .mwpop--grand .mwpop-spark { display: none; }
.mwpop-grb { position: absolute; left: -90px; right: -90px; top: var(--grb-y, 50%); height: 60px; margin-top: -30px; z-index: 3; pointer-events: none; font-style: normal;
  filter: drop-shadow(0 20px 26px rgba(4, 10, 50, .55)) drop-shadow(0 3px 4px rgba(4, 10, 50, .4)); }
.mwpop-grb .h { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6) 0 1px, transparent 1px calc(100% - 1px), rgba(255, 255, 255, .25) calc(100% - 1px)),
    linear-gradient(180deg, #5468e8 0%, #24379f 12%, #14226e 45%, #0c1652 78%, #1d2f8f 100%); }
.mwpop-grb .h::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; border-top: 1.5px dashed rgba(220, 228, 255, .55); border-bottom: 1.5px dashed rgba(220, 228, 255, .45); }
.mwpop-grb .h::before { content: ""; position: absolute; inset: 0; transform: translateX(-60%);
  background: linear-gradient(100deg, transparent 40%, rgba(190, 205, 255, .5) 48%, rgba(255, 255, 255, .16) 53%, transparent 61%); }
.mwpop-grb .h.l { clip-path: polygon(0 0, calc(50% + 12px) 0, calc(50% - 12px) 100%, 0 100%); transform-origin: 0 50%; }
.mwpop-grb .h.r { clip-path: polygon(calc(50% + 12px) 0, 100% 0, 100% 100%, calc(50% - 12px) 100%); transform-origin: 100% 50%; }
.mwpop-grb b { position: relative; font: 500 15px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: .3em; color: #fff; white-space: nowrap; text-shadow: 0 1px 0 rgba(2, 6, 30, .6); }
.mwpop-grb .snip { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; opacity: 0;
  background: #fff; clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); filter: drop-shadow(0 0 12px #fff); }
.mwpop-grb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; opacity: 0; border: 2px solid rgba(255, 255, 255, .9); }
.mwpop--grand.in .mwpop-grb { animation: mwpop-grb-in .75s .12s cubic-bezier(.22, .9, .25, 1) backwards; }
.mwpop--grand.in .mwpop-grb .h::before { animation: mwpop-rb-sheen 1s .5s cubic-bezier(.4, 0, .2, 1) 2 both; }   /* the light runs along it twice while it waits */
.mwpop--grand.in .mwpop-grb .h.l { animation: mwpop-grb-l 1.4s 2.12s cubic-bezier(.3, .02, .2, 1) forwards; }
.mwpop--grand.in .mwpop-grb .h.r { animation: mwpop-grb-r 1.4s 2.12s cubic-bezier(.3, .02, .2, 1) forwards; }
.mwpop--grand.in .mwpop-grb .snip { animation: mwpop-snip .55s 2.05s cubic-bezier(.2, .8, .3, 1) both; }
.mwpop--grand.in .mwpop-grb::after { animation: mwpop-ring .7s 2.08s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes mwpop-grb-in { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(-120px 0 -120px 0); } }
@keyframes mwpop-grb-l { 0% { transform: none; } 10% { transform: translateX(-3%) rotate(1.2deg); } 60% { opacity: 1; } 100% { transform: translateX(-64%) translateY(130px) rotate(13deg); opacity: 0; } }
@keyframes mwpop-grb-r { 0% { transform: none; } 10% { transform: translateX(3%) rotate(-1.2deg); } 60% { opacity: 1; } 100% { transform: translateX(64%) translateY(130px) rotate(-13deg); opacity: 0; } }
/* the card waits behind the ribbon, a step back and in shadow; at the cut it steps forward into the light */
.mwpop--grand.in .mwpop-card { transform: scale(.955); filter: brightness(.7) saturate(.85); transition: opacity .3s ease, transform .4s ease, filter .4s ease; }
.mwpop--grand.in.cut .mwpop-card { transform: none; filter: none; transition: opacity .3s ease, transform .85s cubic-bezier(.2, 1.4, .35, 1), filter .55s ease; }
.mwpop--grand.in .mwpop-v:first-of-type .mwpop-tag { animation: mwpop-pop .5s 2.55s cubic-bezier(.3, 1.6, .5, 1) both; }
.mwpop--grand.in .mwpop-tag.on { animation: mwpop-pop .5s 2.72s cubic-bezier(.3, 1.6, .5, 1) both; }
.mwpop--grand.in .mwpop-tag.on::after { animation: mwpop-glint 4.5s 4s ease-in-out infinite; }
.mwpop--grand.in .mwpop-code b { animation-delay: 2.85s; }
@media (max-width: 680px) {
  .mwpop-grb { height: 44px; margin-top: -22px; left: -40px; right: -40px; }
  .mwpop-grb .h::after { top: 5px; bottom: 5px; border-width: 1px; }
  .mwpop-grb b { font-size: 11px; letter-spacing: .2em; }
  .mwpop-grb .snip { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .mwpop--grand.in .mwpop-card { transform: translateY(14px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .mwpop-grb, .mwpop-gcf { display: none; }
  .mwpop--grand.in .mwpop-card { transform: none; filter: none; }
}

/* ---- the set (Nick 11-03: "make it stand out more, maybe use a set of vials"): one 3-pack, bigger, its old price struck
   beside the new one, and a "Save $X" sticker in the corner of the panel. And the lineup: a vial from each line. */
.mwpop-pack .mwpop-v { gap: 14px; }
.mwpop-pack .mwpop-v img { width: 250px; height: 236px; object-fit: cover; object-position: 50% 48%; }   /* the render carries empty space above and below the set: crop to the vials */
.mwpop-tags { display: flex; gap: 8px; }
.mwpop-cap { font: 500 12px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.mwpop-save { position: absolute; top: -20px; left: -6px; z-index: 3; display: grid; place-items: center; align-content: center; width: 92px; height: 92px; border-radius: 50%;
  background: #fff; color: var(--pb); font: 600 24px/1 "Matter", sans-serif; letter-spacing: -.03em; transform: rotate(-10deg);
  box-shadow: 0 14px 26px -10px rgba(4, 10, 50, .6), inset 0 0 0 3px #fff, inset 0 0 0 4.5px rgba(29, 60, 255, .35); }
.mwpop-save small { display: block; margin: 0 0 3px; font: 500 10.5px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--pi2); }
.mwpop.in .mwpop-save { animation: mwpop-sticker .55s 1.15s cubic-bezier(.3, 1.6, .5, 1) both; }
.mwpop--grand.in .mwpop-save { animation-delay: 2.6s; }
@keyframes mwpop-sticker { 0% { opacity: 0; transform: rotate(-30deg) scale(.3); } 100% { opacity: 1; transform: rotate(-10deg); } }
.mwpop-line { gap: 14px; }
.mwpop-line .mwpop-v { gap: 12px; }
.mwpop-line .mwpop-v img { width: 68px; height: 160px; object-fit: cover; }   /* crop the render's empty sides so three fit the panel */
.mwpop-line .mwpop-tag { padding: 6px 10px; font-size: 13px; }
.mwpop-line .mwpop-tag s { margin-right: 2px; font-weight: 400; color: var(--pi3); text-decoration-thickness: 1px; }
.mwpop.in .mwpop-line .mwpop-v { animation: mwpop-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.mwpop.in .mwpop-line .mwpop-v:nth-child(2) { animation-delay: .1s; } .mwpop.in .mwpop-line .mwpop-v:nth-child(3) { animation-delay: .2s; } .mwpop.in .mwpop-line .mwpop-v:nth-child(4) { animation-delay: .3s; }
.mwpop.in .mwpop-line .mwpop-v:last-of-type img { animation: none; }
@media (max-width: 680px) {
  .mwpop-pack .mwpop-v img { width: 180px; height: 170px; }
  .mwpop-save { width: 72px; height: 72px; font-size: 19px; top: -10px; left: -40px; }
  .mwpop-save small { font-size: 9px; }
  .mwpop-line .mwpop-v img { width: 46px; height: 108px; }
  .mwpop-line { gap: 22px; }
  .mwpop-line .mwpop-tag { padding: 5px 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mwpop.in .mwpop-save, .mwpop.in .mwpop-line .mwpop-v { animation: none; } }

/* the offer extra under the headline ("+ a free vial"), in the blue like the Current Offers page (Nick 11-03) */
.mwpop h2 .mwpop-plus { display: block; margin-top: 6px; font-size: .58em; letter-spacing: -.02em; color: var(--pb); }