/* Receipt redesign (DESIGN.md): the site-wide pieces. A deep-teal header and footer, the cause bar in the
   cause's own colour, yellow focus rings on dark grounds and teal on light ones. Homepage sections live in home.css. */

/* ---------- focus rings ---------- */
.vm :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.vm .vm-givebar :focus-visible, .vm .vm-header :focus-visible, .vm .vm-foot :focus-visible, .vm .rx-dark :focus-visible { outline-color: var(--yellow); }
.vm .vm-header .vm-drop__panel :focus-visible, .vm .vm-header .vm-mobilenav :focus-visible { outline-color: var(--teal); }

/* ---------- cause bar: the selected cause's colour, or Voucher Magpie teal when none is picked ---------- */
.vm-givebar { background: var(--club); color: #fff; border-bottom: 0; }
.vm-givebar__in { min-height: 48px; font-size: 14px; text-wrap: balance; }
.vm-givebar__in > .vm-ico { color: #fff; }
.vm-givebar__text a, .vm-givebar__text b { color: #fff; font-weight: 700; }
.vm-givebar__note { color: rgba(255,255,255,.85); }
.vm-givebar__action, .vm .vm-givebar__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; background: transparent; color: #fff; font-weight: 700; text-decoration: none; }
.vm-givebar__action:hover, .vm .vm-givebar__btn:hover { background: rgba(255,255,255,.12); }
.vm-givebar__logo { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
@media (max-width: 640px) { .vm-givebar__note { display: none; } }

/* ---------- header: shop-floor teal ---------- */
.vm .vm-header { background: var(--teal-deep); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.vm-header__in { height: 68px; max-width: var(--max); padding: 0 var(--gutter); }
.vm .vm-header .vm-logo { color: #fff; }
.vm .vm-header .vm-logo__word { color: #fff; }
.vm .vm-header .vm-logo__word b { color: var(--mint); }
/* Nav items: no pill on hover; the text brightens and a thin mint underline shows, the same mark as the current page. */
.vm .vm-header .vm-header__nav > a, .vm .vm-header .vm-drop > a { padding: 10px 8px; color: rgba(255,255,255,.85); font: 600 15px/20px var(--font-sans); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 2px; transition: color .15s, text-decoration-color .15s; }
.vm .vm-header .vm-header__nav > a:hover, .vm .vm-header .vm-drop > a:hover, .vm .vm-header .vm-drop[data-open] > a { background: none; color: #fff; text-decoration-color: var(--mint); }
.vm .vm-header .vm-header__nav a[aria-current="page"] { color: #fff; text-decoration-color: var(--mint); }
.vm .vm-header .vm-drop__btn { color: rgba(255,255,255,.7); background: none; }
.vm .vm-header .vm-drop__btn:hover { background: none; color: var(--mint); }
.vm .vm-header .vm-drop__panel { color: var(--ink); }
.vm .vm-header .vm-iconbtn, .vm .vm-header .vm-menubtn { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; border-radius: 999px; }
.vm .vm-header .vm-iconbtn:hover, .vm .vm-header .vm-menubtn:hover { background: rgba(255,255,255,.16); }
.vm .vm-header .vm-authlinks a { color: rgba(255,255,255,.88); }
.vm .vm-header .vm-authlinks a:last-child { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 700; text-decoration: none; }
.vm .vm-header .vm-authlinks a:last-child:hover { background: var(--yellow-hover); }
.vm .vm-header .vm-acctchip { color: var(--ink); }
.vm .vm-header .vm-acctchip--signin { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.vm .vm-header .vm-mobilenav { background: var(--surface); color: var(--ink); }
@media (max-width: 640px) { .vm-header__in { height: 60px; } }

/* ---------- footer: night teal ---------- */
.vm .vm-foot { background: var(--teal-night); color: #b7d3cf; border-top: 0; }
.vm .vm-foot ul a { color: #b7d3cf; }
.vm .vm-foot ul a:hover { color: #fff; }
.vm .vm-foot .vm-logo__word, .vm .vm-foot .vm-logo { color: #fff; }
.vm .vm-foot .vm-logo__word b { color: var(--mint); }
.vm .vm-foot__head { color: #fff; font: 800 17px/22px var(--font-display); letter-spacing: -.01em; text-transform: none; }
.vm .vm-foot__brand p, .vm .vm-foot__bottom .vm-foot__note, .vm .vm-foot__copy { color: #9fbfba; }
@media (max-width: 640px) { .vm .vm-foot ul a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- tickets: checked time and condition chip ---------- */
.vm-ticket__checked { display: inline-flex; align-items: center; gap: 4px; color: var(--teal); font-weight: 600; }
.vm-ticket__checked .vm-ico { width: 15px; height: 15px; }
.vm-ticket__chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--yellow-soft); color: var(--yellow-ink); font: 600 12px/16px var(--font-sans); }

/* Override the old tab line (a full-width teal bar and teal text) on hovered or open menu items: just the mint underline under the words. */
.vm .vm-header .vm-header__nav .vm-drop:hover > a, .vm .vm-header .vm-header__nav .vm-drop[data-open] > a,
.vm .vm-header .vm-header__nav .vm-drop:hover > a[aria-current], .vm .vm-header .vm-header__nav .vm-drop[data-open] > a[aria-current] { color: #fff; box-shadow: none; background: none; text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Header search: wide enough that "Search stores" isn't cut off. */
@media (min-width: 1100px) { .vm .vm-header .vm-hsearch { flex: 0 1 230px; min-width: 190px; max-width: 260px; } }

/* ---------- header search: opening it is a moment ----------
   The menu items lift and fade one after another while their space closes up, the box stretches into it on a
   soft spring, a mint-and-yellow light sweeps once round its edge and settles into a glow, the magnifier hops,
   the close button pops in, and the page dims behind with a light blur. Closing runs it back. Reduced motion: none of it. */
@property --vm-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (min-width: 1100px) {
  .vm .vm-header .vm-header__nav { max-width: 1000px; transition: max-width .6s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
  .vm .vm-header.is-searching .vm-header__nav { display: flex !important; max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
  .vm .vm-header .vm-header__nav > * { transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .25s ease; }
  .vm .vm-header.is-searching .vm-header__nav > * { opacity: 0; transform: translateY(-10px) scale(.94); }
  .vm .vm-header.is-searching .vm-header__nav > :nth-child(2) { transition-delay: .04s; }
  .vm .vm-header.is-searching .vm-header__nav > :nth-child(3) { transition-delay: .08s; }
  .vm .vm-header.is-searching .vm-header__nav > :nth-child(4) { transition-delay: .12s; }
  .vm .vm-header.is-searching .vm-header__nav > :nth-child(5) { transition-delay: .16s; }

  .vm .vm-header .vm-hsearch { flex: 1 1 230px; max-width: 260px; transition: max-width .7s cubic-bezier(.16,1,.3,1), margin .7s cubic-bezier(.16,1,.3,1); }
  .vm .vm-header.is-searching .vm-hsearch { flex: 1 1 230px; max-width: 760px; margin-left: 32px; }

  .vm .vm-header .vm-hsearch .vm-search { position: relative; isolation: isolate; border-color: transparent; transition: box-shadow .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
  .vm .vm-header .vm-hsearch .vm-search::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; padding: 3px; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--vm-sweep), var(--mint), var(--yellow) 25%, var(--mint) 50%, rgba(127,224,207,.25) 75%, var(--mint));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: opacity .35s ease; }
  .vm .vm-header.is-searching .vm-hsearch .vm-search { border-color: transparent; box-shadow: 0 0 0 6px rgba(127,224,207,.18), 0 14px 34px rgba(0,0,0,.28); }
  .vm .vm-header.is-searching .vm-hsearch .vm-search::before { opacity: 1; }
  .vm .vm-header.is-searching .vm-hsearch .vm-search > .vm-ico { color: var(--teal); }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .vm .vm-header.is-searching .vm-hsearch .vm-search::before { animation: vm-sweep 1.4s cubic-bezier(.16,1,.3,1) both; }
  .vm .vm-header.is-searching .vm-hsearch .vm-search > .vm-ico { animation: vm-hop .55s cubic-bezier(.34,1.56,.64,1) .1s both; }
  .vm .vm-header.is-searching .vm-hsearch__close { animation: vm-pop .35s cubic-bezier(.34,1.56,.64,1) .25s both; }
  .vm .vm-header.is-searching .vm-hsearch input::placeholder { animation: vm-slidein .5s cubic-bezier(.16,1,.3,1) .15s both; }
  .vm .vm-header .vm-suggest:not([hidden]) { animation: vm-drop .3s cubic-bezier(.16,1,.3,1) both; transform-origin: top center; }
  .vm .vm-searchshade:not([hidden]) { animation: vm-fade .35s ease-out both; }
}
.vm .vm-searchshade { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes vm-sweep { from { --vm-sweep: 0deg; } to { --vm-sweep: 360deg; } }
@keyframes vm-hop { 0% { transform: none; } 40% { transform: rotate(-20deg) scale(1.25); } 70% { transform: rotate(8deg) scale(.95); } 100% { transform: none; } }
@keyframes vm-pop { from { opacity: 0; transform: scale(.3) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes vm-slidein { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes vm-drop { from { opacity: 0; transform: translateY(-8px) scaleY(.96); } to { opacity: 1; transform: none; } }
@keyframes vm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .vm .vm-header .vm-header__nav, .vm .vm-header .vm-header__nav > *, .vm .vm-header .vm-hsearch, .vm .vm-header .vm-hsearch .vm-search, .vm .vm-header .vm-hsearch .vm-search::before { transition: none; }
}

/* Terms buttons on tickets: a full 44px tap target. */
.vm .vm-ticket__terms { min-height: 44px; padding-inline: 12px; }

/* Store pages: the no-code line under the name, and the collapsed offer summary. */
.vm .vm-nocode { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; max-width: 46em; padding: 12px 16px; border-radius: var(--radius-md); background: var(--teal-soft); color: var(--ink); font-size: 15px; line-height: 22px; }
.vm .vm-nocode > .vm-ico { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--teal); fill: none; }
.vm .vm-nocode b { font-weight: 800; }
.vm .vm-nocode a { color: var(--teal); font-weight: 700; white-space: nowrap; }
.vm .vm-activetable--fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.vm .vm-activetable--fold > summary::-webkit-details-marker { display: none; }
.vm .vm-activetable--fold > summary::after { content: "+"; font: 700 22px/1 var(--font-sans); color: var(--teal); }
.vm .vm-activetable--fold[open] > summary::after { content: "–"; }
.vm .vm-activetable--fold > summary h3 { margin: 0; font-size: 18px; }
.vm .vm-activetable--fold[open] > summary { margin-bottom: 12px; }

/* Store hero: count tiles are white (only the best-saving tile is yellow); the domain link drops on phones so the first offer starts on the first screen. */
.vm .vm-stat.vm-stat--count { background: var(--surface); color: var(--ink); }
@media (max-width: 640px) { .vm .vm-hero__domain { display: none; } .vm .vm-nocode { margin-top: 8px; } }

/* Give mega menu: square 40px logos, and the club search in place of a one-item list. */
.vm .vm-mega__causes .vm-charity__logo { width: 40px; height: 40px; border-radius: 8px; flex: none; }
.vm .vm-mega__findclub { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; padding: 4px 4px 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
.vm .vm-mega__findclub > .vm-ico { width: 18px; height: 18px; color: var(--ink-muted); flex: none; }
.vm .vm-mega__findclub input[type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15px/20px var(--font-sans); height: 36px; }
/* A menu shut with Escape stays shut while the pointer is still over it. */
.vm .vm-header .vm-drop.is-shut .vm-drop__panel { display: none !important; }
@media (min-width: 1100px) and (hover: hover) { .vm:has(.vm-header__nav .vm-drop.is-shut:hover)::after { display: none; } }

/* Phones keep each offer's checked time (the old compact proof line hid its last item). */
.vm .vm-ticket__proof > span.vm-ticket__when { display: inline !important; }

/* Mega menus: once one is open, moving to the next swaps instantly instead of cross-fading (site.js sets is-instant). */
.vm .vm-header__nav.is-instant .vm-mega { animation: none !important; }

/* Footer: four link groups spread across the full width, with a little more air between links. */
@media (min-width: 860px) { .vm .vm-foot__grid { grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 48px; } }
@media (min-width: 1100px) { .vm .vm-foot__grid { gap: 64px; } }
.vm .vm-foot ul { gap: 12px; }

/* No-code stores: the "no code today" line runs full width under the header; their tiles stay top right on
   bigger screens and drop on phones so the first offer is on the first screen. */
.vm .vm-hero > .vm-nocode--row { grid-column: 1 / -1; margin: 4px 0 0; max-width: none; }
@media (max-width: 640px) { .vm .vm-stats--nocode { display: none; } }

/* No-code line: the ways to save, the charity line when the store pays us, and a clear button to the shop. */
.vm .vm-nocode--row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 16px 18px; }
.vm .vm-nocode--row > .vm-ico { align-self: start; margin-top: 3px; }
.vm .vm-nocode__text p { margin: 0; }
.vm .vm-nocode__text p + p { margin-top: 6px; }
.vm .vm-nocode__give { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; color: var(--teal-ink); }
.vm .vm-nocode__give .vm-ico { width: 16px; height: 16px; margin-top: 3px; flex: none; color: var(--teal); fill: var(--teal); }
.vm .vm-nocode a.vm-nocode__go { color: var(--on-teal); white-space: nowrap; text-decoration: none; }
@media (max-width: 760px) { .vm .vm-nocode--row { grid-template-columns: auto minmax(0, 1fr); } .vm .vm-nocode__go { grid-column: 1 / -1; justify-self: stretch; } }

/* ---------- moving between pages: quick but seamless ----------
   Same-site page loads cross-fade (Chrome, Edge, Safari 18.2+; others just load). The cause bar and header are
   named, so they stay put while only the page below them changes: out in 120ms, in over 220ms with a small rise.
   A picked link shows at once: a thin line runs along the top and a chosen search suggestion stays highlighted. */
@view-transition { navigation: auto; }
.vm-givebar { view-transition-name: vm-causebar; }
.vm-header { view-transition-name: vm-header; }
.vt-flat .vm-givebar, .vt-flat .vm-header { view-transition-name: none; }
::view-transition-old(root) { animation: vm-page-out .12s ease-in both; }
::view-transition-new(root) { animation: vm-page-in .22s cubic-bezier(.16,1,.3,1) both; }
::view-transition-group(vm-header), ::view-transition-group(vm-causebar) { animation-duration: .2s; }
@keyframes vm-page-out { to { opacity: 0; } }
@keyframes vm-page-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.vm-leavebar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 3px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, var(--teal) 0%, var(--mint) 25%, var(--yellow) 50%, var(--mint) 75%, var(--teal) 100%) 0 0 / 200% 100%; transition: opacity .15s ease; }
.is-leaving .vm-leavebar { opacity: 1; animation: vm-leave 1s linear infinite; }
@keyframes vm-leave { to { background-position: -200% 0; } }
.vm .vm-suggest [role=option].is-picked > a { background: var(--teal); color: #fff; transition: background .12s ease; }
.vm .vm-suggest [role=option].is-picked small { color: rgba(255,255,255,.8); }
@media (prefers-reduced-motion: reduce) { .is-leaving .vm-leavebar { animation: none; } }

/* ---------- the cause icon in the header ----------
   The chosen cause's crest beside the account button, the same size (42px). Hover or focus shows what we give;
   click opens the change-cause window. No cause picked: no icon. */
.vm-causeicon { position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; margin-right: 8px; text-decoration: none; }
.vm-causeicon[data-off] { display: none !important; }
.vm-causeicon__logo { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: #fff; color: var(--club); font: 800 13px/1 var(--font-display); }
.vm-causeicon__logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.vm-causeicon__tip { position: absolute; top: calc(100% + 12px); right: -8px; z-index: 30; display: grid; gap: 4px; width: 260px; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: #fff; font: 400 13.5px/1.45 var(--font-sans); text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.vm-causeicon__tip::before { content: ""; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); }
.vm-causeicon__tip b { font-weight: 700; }
.vm-causeicon__tip span { color: rgba(255,255,255,.8); }
@media (hover: hover) { .vm-causeicon:hover .vm-causeicon__tip { opacity: 1; transform: none; } }
.vm-causeicon:focus-visible .vm-causeicon__tip { opacity: 1; transform: none; }
/* The account button matches: 42px, initials or icon filling the circle. */
.vm .vm-header .vm-acctchip--icon, .vm .vm-header .vm-acctchip--signin { width: 42px; height: 42px; min-height: 0; padding: 0; justify-content: center; }
.vm .vm-header .vm-acctchip--icon i { width: 42px; height: 42px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .vm-causeicon, .vm-causeicon__logo, .vm-causeicon__tip { transition: none; } }

/* No cause picked yet: no cause bar at all (it appears once one is chosen). */
.vm-givebar:has(> [data-givebar-on][hidden]) { display: none; }

/* Cause picker: wider on desktop, with the charities and clubs in two columns. */
@media (min-width: 900px) {
  .vm .vm-dialog[data-charity-dialog] { width: min(900px, calc(100vw - 48px)); }
  .vm .vm-dialog[data-charity-dialog] .vm-dialog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; }
}

/* ---------- header icons: the cause crest and the account button as a matching pair ----------
   Clean circles with a soft shadow, no rings. Hover lifts them and grows a mint halo; the account icon gives
   a little bob (initials pop); both get the same dark tooltip. Reduced motion: no movement. */
.vm .vm-header .vm-causeicon__logo, .vm .vm-header .vm-acctchip--icon i, .vm .vm-header .vm-acctchip--signin { box-shadow: 0 2px 8px rgba(0,0,0,.22); transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.vm .vm-header .vm-acctchip--icon, .vm .vm-header .vm-acctchip--signin { position: relative; border: 0; background: transparent; }
.vm .vm-header .vm-acctchip--signin { background: var(--yellow); border-radius: 50%; }
.vm .vm-header .vm-acctchip--icon i { background: var(--yellow); color: var(--ink); }
@media (hover: hover) {
  .vm .vm-header .vm-causeicon:hover .vm-causeicon__logo, .vm .vm-header .vm-acctchip--icon:hover i, .vm .vm-header .vm-acctchip--signin:hover { transform: translateY(-2px); box-shadow: 0 0 0 5px rgba(127,224,207,.28), 0 8px 18px rgba(0,0,0,.28); }
  .vm .vm-header .vm-acctchip--signin:hover .vm-ico { animation: vm-wave .6s cubic-bezier(.34,1.56,.64,1); }
  .vm .vm-header .vm-acctchip--icon:hover i { animation: vm-popin .45s cubic-bezier(.34,1.56,.64,1); }
}
@keyframes vm-wave { 0% { transform: none; } 30% { transform: translateY(-3px) rotate(-10deg); } 60% { transform: translateY(0) rotate(8deg); } 100% { transform: none; } }
@keyframes vm-popin { 0% { transform: translateY(-2px) scale(1); } 40% { transform: translateY(-2px) scale(1.12); } 100% { transform: translateY(-2px) scale(1); } }
/* The account button's tooltip, matching the cause one. */
.vm .vm-header .vm-acctchip--icon::after, .vm .vm-header .vm-acctchip--signin::after { content: attr(aria-label); position: absolute; top: calc(100% + 12px); right: 0; z-index: 30; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff; font: 600 13px/1.3 var(--font-sans); white-space: nowrap; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
@media (hover: hover) { .vm .vm-header .vm-acctchip--icon:hover::after, .vm .vm-header .vm-acctchip--signin:hover::after { opacity: 1; transform: none; } }
.vm .vm-causeicon__tip { transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .vm .vm-header .vm-causeicon__logo, .vm .vm-header .vm-acctchip--icon i, .vm .vm-header .vm-acctchip--signin, .vm .vm-causeicon__tip { transition: none; animation: none !important; transform: none !important; }
}

/* ---------- mega menus: quick, but animated ----------
   Opening, the panel unrolls down from the header (0.3s) and its columns rise in one after another; closing,
   it rolls back up in under 0.2s. Moving from one menu to the next stays instant (is-instant). The page dim fades in. */
@media (min-width: 1100px) {
  .vm .vm-header .vm-mega.vm-drop__panel { display: block; visibility: hidden; opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); animation: none;
    transition: clip-path .18s cubic-bezier(.4,0,1,1), opacity .16s ease, transform .18s ease, visibility 0s linear .18s; }
  .vm .vm-header .vm-drop[data-open] > .vm-mega.vm-drop__panel { visibility: visible; opacity: 1; transform: none; clip-path: inset(0 0 -40px 0);
    transition: clip-path .34s cubic-bezier(.16,1,.3,1), opacity .2s ease, transform .34s cubic-bezier(.16,1,.3,1), visibility 0s; }
  .vm .vm-header .vm-mega .vm-mega__in > * { opacity: 0; transform: translateY(10px); transition: opacity .12s ease, transform .12s ease; }
  .vm .vm-header .vm-drop[data-open] > .vm-mega .vm-mega__in > * { opacity: 1; transform: none; transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1); }
  .vm .vm-header .vm-drop[data-open] > .vm-mega .vm-mega__in > :nth-child(2) { transition-delay: .05s; }
  .vm .vm-header .vm-drop[data-open] > .vm-mega .vm-mega__in > :nth-child(3) { transition-delay: .1s; }
  .vm .vm-header .vm-drop[data-open] > .vm-mega .vm-mega__in > :nth-child(4) { transition-delay: .15s; }
  .vm .vm-header__nav.is-instant .vm-mega.vm-drop__panel, .vm .vm-header__nav.is-instant .vm-mega .vm-mega__in > * { transition: none !important; }
}
@media (min-width: 1100px) and (hover: hover) {
  .vm .vm-header .vm-drop:hover > .vm-mega.vm-drop__panel { visibility: visible; opacity: 1; transform: none; clip-path: inset(0 0 -40px 0);
    transition: clip-path .34s cubic-bezier(.16,1,.3,1), opacity .2s ease, transform .34s cubic-bezier(.16,1,.3,1), visibility 0s; }
  .vm .vm-header .vm-drop:hover > .vm-mega .vm-mega__in > * { opacity: 1; transform: none; transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1); }
  .vm .vm-header .vm-drop:hover > .vm-mega .vm-mega__in > :nth-child(2) { transition-delay: .05s; }
  .vm .vm-header .vm-drop:hover > .vm-mega .vm-mega__in > :nth-child(3) { transition-delay: .1s; }
  .vm .vm-header .vm-drop:hover > .vm-mega .vm-mega__in > :nth-child(4) { transition-delay: .15s; }
  .vm:has(.vm-header__nav .vm-drop:hover .vm-mega, .vm-header__nav .vm-drop[data-open] .vm-mega)::after { animation: vm-fade .25s ease-out both; }
}
@media (prefers-reduced-motion: reduce) { .vm .vm-header .vm-mega.vm-drop__panel, .vm .vm-header .vm-mega .vm-mega__in > * { transition: none !important; transform: none !important; } }

/* Charity icons in round spots: the circle takes the icon's own background colour, so square tiles blend in. */
.vm .vm-causeicon__logo img, .vm .vm-givebar__logo img, .vm .vm-charlogo--icon img { padding: 15%; object-fit: contain; }
.vm .vm-charlogo--icon { border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.vm .vm-mega__causes .vm-charlogo--icon { border-radius: 50%; }

/* Store sidebar: what the chosen cause has raised so far (confirmed orders only), or an invitation before there's any. */
.vm .vm-raised { display: grid; gap: 10px; border-top: 4px solid var(--club); }
.vm .vm-raised__head { display: flex; align-items: center; gap: 12px; }
.vm .vm-raised__head h3 { margin: 0; font: 800 18px/1.2 var(--font-display); letter-spacing: -.01em; }
.vm .vm-raised__logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--edge); color: var(--club); font: 800 13px/1 var(--font-display); }
.vm .vm-raised__logo img { width: 100%; height: 100%; object-fit: contain; padding: 15%; }
.vm .vm-raised__big { margin: 0; font-size: 15px; color: var(--ink-2); }
.vm .vm-raised__big b { display: block; font: 800 34px/1 var(--font-display); letter-spacing: -.03em; color: var(--club); font-variant-numeric: tabular-nums; }
.vm .vm-raised__lead { margin: 0; font: 700 16px/1.35 var(--font-sans); }
.vm .vm-raised__fine { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.vm .vm-raised .vm-link { justify-self: start; font-size: 14px; }

/* Store page stubs: every label the same size, weight and line height ("15% OFF", "App only", "Free delivery",
   "Blue Light", "Armed Forces"), up to two centred lines, sized to the stub's width so the longest word fits. */
.vm .vm-ticket--store .vm-ticket__stub { padding-inline: 8px; }
.vm .vm-ticket--store .vm-ticket__stub .vm-ticket__big, .vm .vm-ticket--store .vm-ticket__stub small {
  font: 800 min(22px, calc((var(--stub) - 14px) / 4.4)) / 1.1 var(--font-display) !important; letter-spacing: -.01em !important; text-align: center; white-space: normal !important; }
.vm .vm-ticket--store .vm-ticket__stub small { text-transform: uppercase; margin-top: 2px; }

/* Foot of "Ways to save": a clear button to the shop and, where the store pays us, the cause line. */
.vm .vm-waysgo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.vm .vm-waysgo .vm-btn { text-decoration: none; }
.vm .vm-waysgo__give { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-muted); }
.vm .vm-waysgo__give .vm-ico { width: 16px; height: 16px; flex: none; color: var(--club); fill: var(--club); }
@media (max-width: 640px) { .vm .vm-waysgo .vm-btn { width: 100%; justify-content: center; } }

/* Small phones (under 420px): the magpie mark without the wordmark, so logo, cause avatar, search and menu fit. */
@media (max-width: 419px) {
  .vm .vm-header .vm-logo__word { display: none; }
  .vm .vm-header__in { gap: 8px; }
  .vm .vm-header .vm-causeicon { margin-right: 4px; }
}

/* Footer legal line wraps (it used to force sideways scroll on tablets). */
.vm .vm-foot__copy { white-space: normal; overflow-wrap: anywhere; }

/* Code cards: the Checked · Ends · Terms row wraps rather than clipping, and long store names wrap instead of "…". */
.vm .vm-grid-tickets .vm-ticket__meta, .vm .vm-ticket__meta { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 2px; }
.vm .vm-ticket__store { flex-wrap: wrap; }
.vm .vm-ticket__storelink { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }

/* Mobile menu: the button shows ✕ while the menu is open, and the page behind it doesn't scroll. */
.vm .vm-menubtn__close, .vm .vm-menubtn[aria-expanded="true"] .vm-menubtn__open { display: none; }
.vm .vm-menubtn[aria-expanded="true"] .vm-menubtn__close { display: contents; }
.vm .vm-menubtn__open { display: contents; }
html.is-menu-open, html.is-menu-open body { overflow: hidden; overscroll-behavior: none; }
html.is-menu-open .vm .vm-header .vm-mobilenav { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }

/* Tap targets: small inline links (the shop's website in the store header and facts, the curator, the cause name
   in the cause bar, "See …'s page") get at least 24px of tap height without moving the text around them. */
@media (min-width: 641px) { .vm .vm-hero__domain { display: inline-block; } }
.vm .vm-hero__domain, .vm .vm-curated, .vm .vm-facts dd > a, .vm [data-givebar-name], .vm .vm-raised .vm-link { min-height: 24px; line-height: 24px; }
.vm .vm-facts dd > a, .vm [data-givebar-name], .vm .vm-raised .vm-link { display: inline-block; }

/* Stores menu: each popular store's offer count under its name, counted like the store page. */
.vm .vm-mega__count { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font-sans); color: var(--slate); }

/* A 10px fade under the sticky header, so the page slips away beneath it as you scroll instead of being cut off hard. */
.vm .vm-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; pointer-events: none; z-index: -1; /* under the mega menus */
  background: linear-gradient(to bottom, var(--paper), color-mix(in srgb, var(--paper) 0%, transparent)); }

/* Extension "coming soon": one line with the three browser icons, not three empty dashed buttons. */
.vm .vm-extsoon { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--mint-wash); color: var(--teal-ink); font: 700 15px/1.3 var(--font-sans); }
.vm .vm-extsoon__icons { display: inline-flex; flex: none; }
.vm .vm-extsoon__icons > * { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--mint-wash); }
.vm .vm-extsoon__icons > * + * { margin-left: -6px; }
.vm .vm-extsoon--small { display: flex; font-size: 13px; padding: 8px 12px; }
/* Phones: the demo video is cropped to the extension's popup, so it's big enough to read. */
@media (max-width: 639px) {
  .vm .vm-exthero__demo video, .vm .vm-exthero__demo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 100% 30%; }
}

/* Price drop cards: the store's own recent price when our history has it, and when it dropped. */
.vm .vm-product__price { flex-wrap: wrap; row-gap: 2px; }
.vm .vm-product__ref { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vm .vm-product__when { font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* Price drops on phones: the three stat tiles become one line ("1,522 products reduced · 27 stores · 66% biggest
   saving") and the hero tightens up, so the first product starts within about 550px. */
@media (max-width: 639px) {
  .vm .vm-dropshero { gap: 10px; padding: 20px; margin-bottom: 14px; }
  .vm .vm-dropshero p { font-size: 15px; line-height: 22px; }
  .vm .vm-dropshero__stats { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 13px; }
  .vm .vm-dropshero__stats div { padding: 0; background: none; border-radius: 0; }
  .vm .vm-dropshero__stats b { display: inline; margin-right: 4px; font: 700 13px/18px var(--font-sans); }
  .vm .vm-dropshero__stats span { font-size: 13px; opacity: .85; }
  .vm .vm-dropshero__stats > div + div::before { content: "·"; display: inline-block; width: 16px; text-align: center; opacity: .7; }
  .vm .vm-dropshero__stats > div.is-linestart::before { display: none; }
}

/* Price drops on tablets (phones already do this): the section chips are one row that scrolls sideways. */
@media (min-width: 640px) and (max-width: 1024px) {
  .vm .vm-dropsbar__cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 2px; }
  .vm .vm-dropsbar__cats::-webkit-scrollbar { display: none; }
  .vm .vm-dropsbar__cats .vm-chip { flex: none; }
}

/* Tap targets: footer links and the "How we make money" links get at least 24px of tap height. */
.vm .vm-foot nav a, .vm .vm-foot__note a, .vm .vm-foot__dg a, .vm .vm-dropsnote a { display: inline-block; min-height: 24px; line-height: 24px; }

/* Extension install box: Add to Chrome first, then "coming soon" browsers with a tell-me-when sign-up. */
.vm .vm-extinstall { display: grid; gap: 14px; justify-items: start; }
.vm .vm-extinstall__chrome { gap: 10px; min-height: 52px; padding-inline: 20px 24px; font-size: 17px; }
.vm .vm-extinstall__chrome .vm-extbtn__icon, .vm .vm-extinstall__other .vm-extbtn__icon { width: 26px; height: 26px; background: #fff; border-radius: 50%; }
.vm .vm-extnotify { display: grid; gap: 8px; width: 100%; max-width: 460px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--mint-wash); }
.vm .vm-extnotify__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--teal-ink); }
.vm .vm-extnotify__which { display: flex; gap: 16px; margin: 0; padding: 0; border: 0; font-size: 14px; font-weight: 600; }
.vm .vm-extnotify__which label { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; cursor: pointer; }
.vm .vm-extnotify__form { display: flex; flex-wrap: wrap; gap: 8px; }
.vm .vm-extnotify__form > fieldset, .vm .vm-extnotify__form > .vm-formnote { flex-basis: 100%; }
.vm .vm-extnotify__form input[type=email] { flex: 1 1 200px; min-width: 0; min-height: 44px; }
.vm .vm-extnotify__form button { min-height: 44px; }
/* On Edge and Firefox, site.js puts the sign-up first and Chrome becomes the secondary link. */
.vm .vm-extinstall.is-notify-first .vm-extnotify { order: -1; }
.vm .vm-extinstall.is-notify-first .vm-extinstall__chrome { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); box-shadow: none; min-height: 44px; font-size: 15px; }