/* 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: 640.98px) { .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 { border-color: var(--yellow); color: var(--ink); }
.vm .vm-header .vm-mobilenav { background: var(--surface); color: var(--ink); }
@media (max-width: 640.98px) { .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: 640.98px) { .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; }

/* Just above 1100px the nav leaves less room: the box can narrow to 150px so the account icon stays inside the header. While
   searching, the icons stay pinned to the right edge. */
@media (min-width: 1100px) and (max-width: 1179px) { .vm .vm-header .vm-hsearch { min-width: 150px; } }
@media (min-width: 1100px) { .vm .vm-header.is-searching .vm-header__end { margin-left: auto; } }

/* ---------- 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 { 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: 640.98px) { .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: 640.98px) { .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 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), except on a cause's own page, where it offers that cause. */
.vm-givebar:has(> [data-givebar-on][hidden]):not(:has(> [data-givebar-viewing]:not([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 { font-weight: 800; font-family: var(--font-display); letter-spacing: -.01em !important; text-align: center; }
.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: 640.98px) { .vm .vm-waysgo .vm-btn { width: 100%; justify-content: center; } }

/* Small phones (under 420px): a smaller wordmark beside the magpie, and the mark alone under 360px, so logo,
   cause avatar, search and menu fit. */
@media (max-width: 419px) {
  .vm .vm-header .vm-logo__word { font-size: 16px; line-height: 15px; }
  .vm .vm-header .vm-logo img { height: 32px; width: auto; }
  .vm .vm-header .vm-logo { gap: 6px; }
  .vm .vm-header__in { gap: 8px; }
  .vm .vm-header .vm-causeicon { margin-right: 4px; }
}

@media (max-width: 359px) { .vm .vm-header .vm-logo__word { display: none; } }

/* 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 whole demo at its own shape, small but complete (a crop left cut-off page text beside the popup). */
@media (max-width: 639.98px) {
  .vm .vm-exthero__demo video, .vm .vm-exthero__demo img { width: 100%; height: auto; aspect-ratio: 780 / 600; object-fit: contain; }
}

/* 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__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: 639.98px) {
  .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; }

/* Offer meta ("Checked 2 hours ago · Used 40 times · Ends 9 Jul · Terms"): each item keeps its words together and
   carries its separator in its own left padding. Items share a 16px column gap that the separator sits in; an item
   that starts a line has its separator pulled out past the left edge and clipped, so no line starts or ends with "·".
   The 3px padding keeps the Terms button's focus ring visible. */
.vm .vm-tmeta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 2px; overflow: hidden; padding: 3px; margin: -3px; flex: 0 0 calc(100% + 6px); max-width: calc(100% + 6px); }
.vm .vm-tmeta__i { position: relative; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-left: -16px; padding-left: 16px; }
.vm .vm-tmeta__i::before { content: "·"; position: absolute; left: 0; width: 16px; text-align: center; color: var(--ink-muted); }

/* Header keyboard use. "Close search" only exists once the search is open, so Tab never lands on it before. */
.vm .vm-header:not(.is-searching) .vm-hsearch__close { display: none; }
/* A menu's arrow button always keeps its place after the label (in the item's own right padding, so it costs no
   width) and only shows when focused, so the nav doesn't shift as Tab moves along it. */
.vm .vm-header__nav .vm-drop__btn, .vm .vm-header__nav .vm-drop__btn:not(:focus-visible) { position: static; width: 20px; height: 24px; margin-right: -20px; overflow: visible; clip: auto; opacity: 0; }
.vm .vm-header__nav .vm-drop__btn:focus-visible { opacity: 1; }

/* The cause band at the foot of the page has no stacking of its own, so it scrolls under the sticky header. */
.vm.vm.vm .vm-givebar--foot { z-index: auto; }

/* Footer logo straight on the dark footer, as in the header: no white box behind the magpie. */
.vm .vm-foot__brand .vm-logo img { padding: 0; background: none; border-radius: 0; }

/* In the meta row, Terms lines up with the other items: no side padding (it keeps its 44px height, and the word
   itself is wide enough to tap). */
.vm .vm-tmeta .vm-ticket__terms { padding-inline: 0; }

/* Give back: a second way in for organisers under the hero, and a preview of the fundraising pack. */
.vm .vm-givehero__organise { justify-self: start; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; text-underline-offset: 3px; }
.vm .vm-clubcta > div > .vm-btn { margin-top: 12px; }
.vm .vm-packpeek { margin: 0; display: grid; gap: 8px; justify-items: center; }
.vm .vm-packpeek__set { display: flex; align-items: flex-end; gap: 10px; }
.vm .vm-packpeek__poster { display: grid; align-content: start; gap: 4px; width: 92px; height: 130px; padding: 10px 8px; border-radius: 6px; background: var(--teal); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.14); transform: rotate(-3deg); }
.vm .vm-packpeek__poster b { font: 800 13px/1.1 var(--font-display); }
.vm .vm-packpeek__poster i { font: 600 9px/1.2 var(--font-sans); font-style: normal; color: var(--gleam); }
.vm .vm-packpeek__poster .vm-packpeek__qr { width: 34px; height: 34px; margin-top: auto; }
.vm .vm-packpeek__qrcard { display: grid; gap: 4px; justify-items: center; padding: 8px; border-radius: 8px; background: #fff; border: 1px solid var(--edge); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.vm .vm-packpeek__qrcard small { font-size: 10px; line-height: 1.2; color: var(--ink-muted); }
.vm .vm-packpeek__qr { width: 56px; height: 56px; border-radius: 3px; background: #fff conic-gradient(#111 0 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / 14px 14px; outline: 3px solid #fff; }
.vm .vm-packpeek__msg { max-width: 150px; padding: 8px 10px; border-radius: 12px 12px 12px 2px; background: #dcf8c6; color: #111; font-size: 11px; line-height: 1.35; box-shadow: 0 6px 16px rgba(0,0,0,.1); transform: rotate(2deg); }
.vm .vm-packpeek figcaption { font-size: 13px; color: var(--ink-muted); text-align: center; }
@media (max-width: 420px) { .vm .vm-packpeek__msg { display: none; } }
.vm .vm-give__notpartners { margin-top: 6px; font-size: 14px; color: var(--ink-muted); }

/* Give back picker: who you're supporting stays pinned under the header; causes are compact rows, clubs first. */
.vm .vm-give__pinned { position: sticky; z-index: 3; margin: 16px 0; padding: 12px 16px; border-radius: 12px; background: var(--teal-deep, #08504c); color: #fff; font-size: 15px; }
.vm .vm-give__pinned a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; padding-inline: 4px; }
/* The organiser link is a secondary (outline) button on the teal band at every width (full width on phones); on desktop
   the band is a little shorter so the organiser panel below starts on the first screen. */
.vm .vm-givehero__organise { min-height: 48px; padding: 0 20px; border: 1.5px solid rgba(255,255,255,.75); border-radius: var(--radius-pill); text-decoration: none; }
.vm .vm-givehero__organise:hover { background: rgba(255,255,255,.12); }
.vm .vm-givehero__organise span[aria-hidden] { flex: none; }
@media (max-width: 640.98px) { .vm .vm-givehero__organise { display: block; justify-self: stretch; text-align: center; padding: 11px 16px; line-height: 24px; } }
@media (min-width: 900px) {
  .vm .vm-givehero { padding-block: 40px; }
  .vm .vm-givehero + .vm-section { padding-top: 24px; }
}
.vm .vm-causegroup + .vm-causegroup { margin-top: 24px; }
.vm .vm-causegroup__h { margin: 0 0 8px; font: 700 18px/24px var(--font-display); }
.vm .vm-causerows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .vm .vm-causerows { grid-template-columns: 1fr 1fr; } }
.vm .vm-causerow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); }
.vm .vm-causerow[hidden], .vm .vm-causegroup[hidden] { display: none; }
.vm .vm-causerow__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vm .vm-causerow__name { font-weight: 700; color: var(--ink); text-decoration: none; }
.vm .vm-causerow__name:hover { text-decoration: underline; }
.vm .vm-causerow__meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vm .vm-causerow__meta a { color: var(--teal); }
.vm .vm-causerow .vm-btn { flex: none; min-height: 44px; }
/* The cause you've chosen: filled, in the positive teal, never greyed out. */
.vm .vm-causerow.is-chosen { background: var(--teal-soft, #e3f4f1); border-color: var(--teal); box-shadow: inset 4px 0 0 var(--teal); }
.vm .vm-causerow.is-chosen .vm-btn--current { background: var(--teal); color: #fff; border-color: var(--teal); }
.vm .vm-charintro__listing { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }

/* Give back pages: the email box in the site's own font, filter chips at least 44px to tap, and small meta text at
   13px rather than 12px. */
.vm .vm-supportform input[type=email] { font-family: var(--font-sans); }
.vm .vm-picker .vm-seg button { min-height: 44px; padding-inline: 16px; }
.vm .vm-charity__cause, .vm .vm-charintro__stats span, .vm .vm-mega__causes small, .vm .vm-charhero__credit, .vm .vm-supporthero__credit { font-size: 13px; }

/* Store spotlights, A to Z. */
.vm .vm-spotaz { margin-top: 24px; }
.vm .vm-spotaz h2 { font: 800 24px/1 var(--font-display); color: var(--teal); margin: 0 0 10px; }
.vm .vm-spotaz__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 760px) { .vm .vm-spotaz__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .vm .vm-spotaz__list { grid-template-columns: repeat(3, 1fr); } }
.vm .vm-spotaz__list a { display: grid; gap: 2px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.vm .vm-spotaz__list a:hover { border-color: var(--teal); }
.vm .vm-spotaz__list span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.vm .vm-mega__introlink { position: relative; z-index: 1; display: inline-block; min-height: 24px; color: #fff; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.vm .vm-spotlink { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-weight: 700; }
.vm .vm-spotlink a { color: var(--teal); min-height: 24px; }
.vm .vm-spotlink .vm-ico { width: 16px; height: 16px; color: var(--teal); }

/* Money advice hub bands: Your rights, Christmas money, Deals this week. */
.vm .vm-newsband { margin-top: 48px; }
.vm .vm-newsband .vm-section__head p { margin-top: 4px; color: var(--ink-muted); }
.vm .vm-newsband .vm-cards { margin-top: 16px; }
.vm .vm-newssearch { margin-top: 16px; max-width: 640px; height: 52px; padding-left: 16px; border: 1.5px solid var(--edge); border-radius: var(--radius-md); background: var(--surface); }
.vm .vm-newssearch input { font-family: var(--font-sans); }
.vm .vm-newssearch .vm-btn { min-height: 44px; }
.vm .vm-newssearch__count { margin-top: 8px; font-size: 14px; color: var(--ink-muted); }
.vm .vm-loadmore { margin-top: 24px; text-align: center; }
.vm .vm-newssearch + .vm-chips, .vm .vm-newssearch__count + .vm-chips { margin-top: 16px; }
.vm .vm-article__ad a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vm .vm-rightsbox__list { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.vm .vm-rightsbox__list a { color: var(--teal); font-weight: 600; }
.vm .vm-article__review { margin: 8px 0 0; font-size: 14px; color: var(--ink-muted); } .vm .vm-article__review a { color: var(--teal); font-weight: 600; }

/* Reading: comfortable line length, and tablets get the hub two-up with the featured story still the biggest. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .vm .vm-cards { grid-template-columns: repeat(2, 1fr); }
  .vm .vm-cards--feature { grid-template-columns: 1fr; }
  .vm .vm-cards--feature .vm-card__body h3 { font-size: 28px; line-height: 34px; letter-spacing: -.02em; }
}
/* Article byline line: each "·" belongs to the item after it and is clipped off when that item starts a line. */
.vm .vm-article__meta { column-gap: 20px; overflow: hidden; padding: 3px; margin-left: -3px; margin-right: -3px; }
.vm .vm-article__meta .vm-dot { position: relative; margin-left: -20px; padding-left: 20px; }
.vm .vm-article__meta .vm-dot::before { position: absolute; left: 0; width: 20px; margin: 0; text-align: center; }
.vm .vm-article__meta .vm-byline { position: relative; margin-left: -20px; padding-left: 20px; }
.vm .vm-article__meta .vm-byline::before { position: absolute; left: 0; width: 20px; margin: 0; text-align: center; }

/* Price drops: the results count is the list's heading; sort is a select on phones; the chip row fades at its end. */
.vm .vm-dropsresults__h { margin: 0; font: 400 16px/22px var(--font-sans); }
.vm .vm-dropsresults__h b { font-weight: 800; }
.vm .vm-dropssort__select { display: none; align-items: center; gap: 8px; }
.vm .vm-dropssort__select label { font-size: 14px; color: var(--ink-muted); }
.vm .vm-dropssort__select select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); font: 600 16px/20px var(--font-sans); color: var(--ink); }
@media (max-width: 640.98px) {
  .vm .vm-dropssort__select { display: flex; }
  .vm .vm-dropssort { display: none; }
  .vm .vm-dropsbar__cats { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
}
.vm .vm-product__img.is-placeholder img { object-fit: contain; padding: 24px; background: var(--surface-sunk); }
/* "Skip to products": hidden until focused, so keyboard users don't have to tab through every section chip. */
.vm .vm-skipto { position: absolute; left: -9999px; }
.vm .vm-skipto:focus { position: static; display: inline-block; margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: var(--teal); color: #fff; font-weight: 700; }
.vm #drops-list:focus { outline: none; }
.vm .vm-product__variants { font-size: 13px; color: var(--ink-muted); }

/* Extension page. Phones and other touch-first screens can't run extensions: they get "Extensions work on a computer"
   (send the link, share it) instead of the install buttons, steps and demo. .is-phone is set in the browser from its UA. */
.vm .vm-ext-phone { display: none; }
.vm .vm-ext-phone h2 { margin: 8px 0 4px; font: 800 24px/30px var(--font-display); }
.vm .vm-ext-phone .vm-extnotify__form { margin-top: 12px; }
.vm .vm-ext-phone__wa { margin-top: 12px; min-height: 44px; }
.vm .vm-ext-phone__channel { margin-top: 12px; color: var(--ink-muted); }
.vm .vm-exthero.is-phone .vm-ext-desktop, .vm .vm-exthero.is-phone ~ .vm-section .vm-ext-desktop { display: none; }
.vm .vm-exthero.is-phone .vm-ext-phone { display: block; }
@media (pointer: coarse), (max-width: 767.98px) and (hover: none) {
  .vm .vm-ext-desktop { display: none; }
  .vm .vm-ext-phone { display: block; }
}
.vm .vm-extperms { margin: 10px 0 0; max-width: 52ch; font-size: 14.5px; line-height: 21px; color: var(--ink-muted); }
.vm .vm-extperms summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--teal); }
.vm .vm-extperms p { margin: 4px 0 0; font-size: 14.5px; line-height: 21px; }
.vm .vm-extperms b { color: var(--ink); }
.vm .vm-extnotify__fine { margin: 6px 0 0; font-size: 13px; color: var(--ink-muted); }
/* The demo's steps are buttons (keyboard and click both jump the demo to that part). */
.vm .vm-extsteps li { padding: 0; border: 0; background: none; overflow: visible; }
.vm .vm-extsteps li::after { display: none; }
.vm .vm-extsteps__btn { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; width: 100%; padding: 10px 14px; border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); color: var(--ink-muted); font: inherit; text-align: left; cursor: pointer; }
.vm .vm-extsteps__btn b { display: block; color: var(--ink); font: 700 16px/22px var(--font-display); }
.vm .vm-extsteps__btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; transform-origin: left; transform: scaleX(var(--p, 0)); background: #f5b800; }
.vm .vm-extsteps__btn.is-active { border-color: #0b6e69; box-shadow: 0 0 0 3px rgba(11, 110, 105, .14); }
.vm .vm-extsteps.vm-steps--static .vm-extsteps__btn::after { display: none; }
/* Store spotlights A to Z: jump links, and each store's logo beside its spotlight. */
.vm .vm-spotaz__jump { margin-top: 8px; }
.vm .vm-spotaz__list a { grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.vm .vm-spotaz__logo { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 10px; border: 1px solid var(--edge); font: 800 14px/1 var(--font-display); }
.vm .vm-spotaz__list .vm-spotaz__logo { color: inherit; }
.vm .vm-spotaz__logo img { width: 100%; height: 100%; object-fit: contain; }
.vm .vm-spotaz__text { display: grid; gap: 2px; color: var(--ink); }
.vm .vm-spotaz__text b { color: var(--ink); }
.vm .vm-spotaz :target, .vm .vm-spotaz h2 { scroll-margin-top: calc(var(--header-h, 69px) + 16px); }
/* The extension demo's pause button sits on the video's bottom-right corner. */
.vm .vm-exthero__demo { position: relative; }
.vm .vm-exthero__demo .vm-vhero__toggle { right: 12px; bottom: 12px; }
/* Footer groups: on phones each heading is a 44px row that folds its links; wider, a plain heading. */
.vm .vm-foot__group summary { list-style: none; }
.vm .vm-foot__group summary::-webkit-details-marker { display: none; }
@media (min-width: 1024px) { .vm .vm-foot__group summary { cursor: default; } }
@media (max-width: 639.98px) {
  .vm .vm-foot__group { border-bottom: 1px solid rgba(255,255,255,.14); }
  .vm .vm-foot__group summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; }
  .vm .vm-foot__group summary::after { content: "+"; color: #fff; font: 700 20px/1 var(--font-sans); }
  .vm .vm-foot__group[open] summary::after { content: "–"; }
  .vm .vm-foot__group summary .vm-foot__head { margin: 0; }
  .vm .vm-foot__group ul { padding-bottom: 12px; }
}
@media (max-width: 639.98px) { .vm .vm-foot nav:has(> .vm-foot__group) { grid-column: 1 / -1; } .vm .vm-foot__grid { row-gap: 0; } .vm .vm-foot__brand { margin-bottom: 24px; } }
/* Give back on phones: shoppers first. "Choose a charity or club ↓" in the hero jumps to the picker, and the organiser
   band comes after the picker. */
.vm .vm-givehero__choose { display: none; }
@media (max-width: 640.98px) {
  .vm .vm-givehero__choose { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: var(--radius-pill); background: var(--gleam, #f5b800); color: var(--on-gleam, #1a1400); font-weight: 700; text-decoration: none; }
  .vm .vm-givepage { display: flex; flex-direction: column; }
  .vm .vm-givepage > * { order: 1; min-width: 0; }
  .vm .vm-givepage > .vm-give__org, .vm .vm-givepage > .vm-give__org ~ :not(.vm-give__pick) { order: 2; }
}
/* Small text links with room to tap: About and Share on the cause rows, and the sources on a cause's page. */
.vm .vm-causerow__meta a, .vm .vm-charabout p.vm-muted a { display: inline-block; min-height: 24px; line-height: 24px; overflow-wrap: anywhere; }
/* 44px targets: the "All …" links beside section headings, and the A to Z letters, at every width. */
.vm .vm-section__head .vm-link { display: inline-flex; align-items: center; min-height: 44px; }
.vm .vm-az a, .vm .vm-az span { min-width: 44px; height: 44px; }
/* Extension hero: the plain steps (no video), the popup screenshot, the picture under the heading on narrower screens,
   a pause button that stands out on the video, and supporting text at 15px. */
.vm .vm-extsteps__btn--static { cursor: default; }
.vm .vm-exthero__still img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-lift); }
.vm .vm-exthero__demo .vm-vhero__toggle { background: rgba(0,0,0,.78); box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.35); }
.vm .vm-extsteps__btn > span:last-child { font-size: 15px; line-height: 21px; color: var(--ink-muted); }
.vm .vm-soonfeatures p { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
@media (max-width: 767.98px) {
  .vm .vm-exthero { display: flex; flex-direction: column; }
  .vm .vm-exthero__head { order: 0; }
  .vm .vm-exthero__shot { order: 1; }
  .vm .vm-exthero__copy { order: 2; }
}

/* ---- CSS v3 HIGH (here because redesign.css loads last and holds the rules these replace) ---- */
/* H2: one size formula for every stub value: the stub's width over the value's width in ems (at least 2.2, so "20%"
   and "15%" match), 14px to 40px (32px on store pages). */
.vm .vm-ticket .vm-ticket__stub .vm-ticket__big { font-size: clamp(14px, calc((var(--stub) - 16px) / max(var(--ems, 2.2), 2.2)), 40px) !important; line-height: 1.05 !important; }
.vm .vm-ticket--store .vm-ticket__stub .vm-ticket__big { font-size: clamp(14px, calc((var(--stub) - 16px) / max(var(--ems, 2.2), 2.2)), 32px) !important; }
/* H5: the header search and nav can shrink, so the header never runs past the content edge or scrolls sideways at
   1099-1130px. */
@media (min-width: 1100px) {
  .vm .vm-header .vm-hsearch { min-width: 0; flex: 1 1 160px; }
  .vm .vm-header .vm-header__nav { min-width: 0; }
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .vm .vm-header .vm-header__nav > .vm-drop > a { padding-inline: 10px; }
}
/* H7: the Edge notify form keeps the field and button on one row when the error appears; the note goes under both. */
@media (min-width: 561px) {
  .vm .vm-extnotify__form { flex-wrap: wrap; }
  .vm .vm-extnotify__form input[type=email] { flex: 1 1 0; order: 1; }
  .vm .vm-extnotify__form .vm-btn { order: 2; flex: none; min-height: 48px; }
  .vm .vm-extnotify__form .vm-formnote { order: 3; flex-basis: 100%; }
}

/* ---- CSS v3 MEDIUM ---- */
/* M-G2: the phone menu starts right under the 60px header, with no strip of page showing through. */
@media (max-width: 640.98px) { .vm .vm-header .vm-mobilenav { top: 60px; } }
/* M-G3: on phones the tooltip's arrow points at the cause icon, not the menu button. */
@media (max-width: 479.98px) { .vm .vm-causeicon__tip::before { left: auto; right: 124px; } }
/* M-G4: a 44px logo in the 60px header up to 999px. */
@media (max-width: 999.98px) { .vm .vm-header .vm-logo img, .vm .vm-header .vm-logo svg { height: 44px; width: auto; } }
/* M-G6: four footer columns (sensitive pages) fill the row instead of leaving a fifth empty. */
@media (min-width: 860px) { .vm .vm-foot__grid:not(:has(> :nth-child(5))) { grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(0, 1fr)); } }
/* M-G7: room for the chip focus ring at the start of the row. */
@media (min-width: 768px) { .vm .vm-chips--top { padding-inline: 6px; margin-inline: -6px; scroll-padding-inline: 6px; } }
/* M-H3: no native clear button in the hero and news search boxes (it cut the placeholder short). */
.vm .vm-homesearch input::-webkit-search-cancel-button, .vm .vm-newssearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* M-F1: field errors are orange and bold inside panels too. */
.vm .vm-field-error, .vm .vm-panel .vm-field-error { color: var(--expiring); font-size: 14px; line-height: 20px; font-weight: 600; }
/* M-F2: /give-back cause names line up across a row; About and Share sit together on their own line. */
@media (min-width: 768px) {
  .vm .vm-causerow { align-items: flex-start; }
  .vm .vm-causerow > .vm-btn { align-self: center; }
  .vm .vm-causerow__meta::after { content: ""; flex-basis: 100%; order: 1; }
  .vm .vm-causerow__meta > a { order: 2; }
}
/* M-F3: under the content (below 1000px), sidebar panels sit side by side rather than 680px wide. */
@media (max-width: 999.98px) { .vm .vm-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } }
/* M-F5: two-column form fields line up on their inputs when one label wraps. */
.vm .vm-admin__row { align-items: end; }
/* M-N1: one pager on /news (the server shows Next page on page 1 only); the pager is centred. */
.vm .vm-loadmore:has(+ nav.vm-actions) { display: none; }
.vm nav.vm-actions[aria-label=Pages] { justify-content: center; margin-top: 16px; }
/* M-N2: spotlight product cards: the button stays its own height when there's no price. */
.vm .vm-prose .vm-product__note { grid-row: 3; }
.vm .vm-prose .vm-product__price { grid-row: 4; }
.vm .vm-prose .vm-product__cta { grid-row: 5; align-self: end; }
/* M-N4: the newsletter band's error border shows on the dark band. */
.vm .vm-band input[aria-invalid="true"] { border-color: #ffb4a8; box-shadow: 0 0 0 3px rgba(255,180,168,.35); }

/* ---- CSS v3 LOW ---- */
/* Global */
.vm .vm-mega__soon { margin-left: -16px; }
.vm .vm-dialog__list { scrollbar-width: thin; scrollbar-gutter: stable; }
.vm .vm-picker__search { min-height: 48px; box-sizing: border-box; }
@media (max-width: 559.98px) { .vm .vm-dialog__list { padding-inline: 20px; } .vm .vm-picker .vm-seg { width: 100%; } .vm .vm-picker .vm-seg button { flex: 1; } }
@media (min-width: 768px) { .vm .vm-header #mnav { padding-inline: 24px; } }
html.is-menu-open .vm .vm-header__searchbtn { display: none; }
.vm .vm-ticket .vm-ticket__terms { min-height: 44px; padding-inline: 8px; }
.vm [aria-invalid="true"]:focus-visible { outline-color: var(--expiring); }
/* The proof row's "·" belongs to the Checked part, so it never ends a line on its own; on phones the two parts are
   separate lines, so no dot. */
.vm .vm-ticket__proof { display: flex; flex-wrap: wrap; }
.vm .vm-ticket__proof > .vm-ticket__when::before { margin-right: 6px; }
@media (max-width: 559.98px) { .vm .vm-ticket__proof { display: block; } }
.vm .vm-ticket--expired .vm-ticket__action .vm-btn { cursor: default; }
/* Give back, forms and utility pages */
@media (max-width: 479.98px) { .vm .vm-authorhead .vm-avatar { width: 96px !important; height: 96px !important; } }
.vm .vm-authorhead .vm-eyebrow { margin-bottom: 8px; }
.vm .vm-charstatement { line-height: 20px; margin-bottom: 24px; }
@media (max-width: 479.98px) { .vm .vm-charhero__credit { top: 10px; bottom: auto; } }
.vm .vm-err__excuse > span { display: block; min-height: 3lh; }
.vm .vm-errsummary li { line-height: 22px; }
.vm .vm-errsummary ul { display: grid; gap: 10px; }
.vm .vm-causerow.is-chosen .vm-btn { background: #fff; color: var(--teal); border: 2px solid var(--teal); }
@media (pointer: coarse) { .vm span.vm-charintro__chip { min-height: 32px; } }
.vm .vm-choosecard small, .vm .vm-give__pick .vm-section__head p { text-wrap: balance; }
.vm .vm-tablewrap td { vertical-align: top; }
@media (min-width: 768px) { .vm .vm-teammini a { flex: 1 1 0; min-width: 220px; } }
/* L-404: the 404 is centred on wide screens (it sat 50px from the left, 124px from the right). */
@media (min-width: 1000px) { .vm .vm-err { grid-template-columns: 380px minmax(0, 600px); justify-content: center; column-gap: 48px; } }
/* News, price drops and extension */
.vm .vm-band { align-items: start; }
.vm .vm-exthero { align-items: start; }
@media (max-width: 899.98px) { .vm .vm-exthero { grid-template-columns: 1fr; } }
@media (max-width: 899.98px) { .vm .vm-ext-phone .vm-btn { width: 100%; min-height: 48px; } }
@media (max-width: 479.98px) { .vm .vm-share { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .vm .vm-share__label { grid-column: 1 / -1; } }
.vm .vm-authorbox a { display: inline-flex; align-items: center; min-height: 44px; }
.vm .vm-dropshero__stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* ---- CSS v3 NOT CSS ---- */
/* Ticket titles come in full and are clamped here: three lines (the homepage keeps its two). */
.vm .vm-ticket__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- CSS v4 MEDIUM ---- */
/* 3: the cause-row dots get their 14px slot back ("About · Share", not "About· Share"). */
.vm .vm-causerow__meta { column-gap: 14px; }
/* 4: readable lines on /extension: the tips and the hero copy. */
.vm .vm-exthero__copy p { max-width: 36rem; }
/* The 404 text column fits 320px phones (it sized itself to the search box and ran 17px past the edge). */
.vm .vm-err__text { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.vm .vm-err__actions .vm-search { min-width: 0; max-width: 100%; box-sizing: border-box; }
.vm .vm-err__actions .vm-search input { width: 0; min-width: 0; flex: 1 1 0; }

/* ---- CSS v4 LOW ---- */
/* 6: readable lines for the footer note, /news card text and the price-drops note. */
.vm .vm-foot__note, .vm .vm-card__body p, .vm .vm-dropsnote { max-width: 68ch; }
/* 7: no generated dot in the proof row (it could start a wrapped line); the gap separates the parts. */
.vm .vm-ticket__proof { column-gap: 12px; }
.vm .vm-ticket__proof > .vm-ticket__when::before { content: none; }
/* 8: from 768px the footer headings are plain headings: no tap to fold. */
@media (min-width: 768px) { .vm .vm-foot__group > summary { pointer-events: none; list-style: none; } }
/* 9: 44px tap targets on touch widths. */
@media (max-width: 1023.98px) {
  .vm a.vm-pill { min-height: 44px; display: inline-flex; align-items: center; }
  .vm label:has(> input[type=checkbox]) { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  .vm .vm-dialog__foot .vm-link { display: inline-flex; align-items: center; min-height: 44px; }
  .vm .vm-share a { min-width: 44px; justify-content: center; }
  .vm .vm-towns button { width: 100%; }
  /* Inline text links: taller to tap without moving the text around them. */
  .vm .vm-article__ad a, .vm .vm-formfine a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
/* 10: the 404 search field fills its pill's height, so all of it focuses the field. */
.vm .vm-err .vm-search input { min-height: 44px; }
/* 11: the pinned "You're supporting" bar sits right under the header (the strip above it is covered by its shadow). */
.vm .vm-give__pinned { top: 68px; }
/* 12: the error summary is the same size on every form. */
.vm .vm-panel .vm-errsummary li { font-size: 17px; line-height: 22px; }
/* 13: an invalid field on the dark band gets a matching focus ring, not the yellow one. */
.vm .vm-band input[aria-invalid="true"]:focus-visible { outline-color: #ffb4a8; }
/* 14: the store sidebar's one-line spotlight link spans the row below 1000px. */
@media (max-width: 999.98px) { .vm .vm-side > .vm-spotlink { grid-column: 1 / -1; margin: 0; } }
/* 15: price drops cards are 474px tall. */
.vm .vm-product { contain-intrinsic-size: auto 474px; }

/* ---- CSS v5 ---- */
/* 2: the hero and phone-menu search fields fill their pills, so the whole pill focuses the field. */
.vm .vm-homesearch input[type=search], .vm .vm-mobilenav .vm-search input[type=search] { min-height: 44px; }
/* 4: 44px tap targets on touch widths. Inline links grow with padding and give it back with a negative margin, so the text doesn't move. */
@media (max-width: 1023.98px) {
  .vm .vm-formfine a, .vm .vm-supportform__fine a { padding-block: 13px; margin-block: -13px; }
  .vm .vm-ticket__all { min-height: 44px; }
  .vm .vm-ticket__action .vm-btn { min-height: 44px; }
  .vm .vm-tip a, .vm figcaption a, .vm .vm-prose li > a[href$="/cookies"] { display: inline-block; padding-block: 13px; margin-block: -13px; }
}
/* Reading text fills its column on every page, so the gap on the right matches the padding on the left (no line-length caps). */
.vm .vm-article__stand, .vm .vm-prose, .vm .vm-prose > *, .vm .vm-article__grid, .vm .vm-storeprose p, .vm .vm-whyvm p, .vm .vm-tips li,
.vm .vm-panel details p, .vm .vm-section > p, .vm .vm-authorbox p, .vm .vm-authorgrid .vm-panel p, .vm .vm-wrap > p.vm-muted, .vm .vm-nocode__text > p,
.vm .vm-article__grid > .vm-prose > p, .vm .vm-article__grid > .vm-prose > ul, .vm .vm-article__grid > .vm-prose > ol,
.vm .vm-article__grid > .vm-prose > h2, .vm .vm-article__grid > .vm-prose > h3 { max-width: none; }
/* Lean audit: the last short inline links (contact email, More ways to save, map and photo credits, text links) are 44px tall to tap on touch widths, without moving the text. */
@media (max-width: 1023.98px) {
  .vm .vm-panel p > a, .vm .vm-nocode__text a, .vm .vm-locator__credit a, .vm .vm-charhero__credit a,
  .vm a.vm-link, .vm .vm-tips a, .vm .vm-dropsnote a { display: inline-block; padding-block: 13px; margin-block: -13px; }
}
/* Preview password page (the 404's magpie scene): the error sits under the pill, full width. */
.vm .vm-err__actions .vm-previewform__error { flex: 1 1 100%; margin: 0; }
/* Store page, phones and tablets: the give-back line under the header, where the sidebar box can't be seen. */
/* The "Can't find the code" box: the 50% badge sits beside the heading and the text runs the full width under both. */
.vm .vm-visit:has(.vm-visit__badge) { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; }
.vm .vm-visit .vm-visit__badge { position: static; grid-column: 2; grid-row: 1; align-self: center; }
.vm .vm-visit:has(.vm-visit__badge) > h3 { grid-column: 1; grid-row: 1; align-self: center; min-height: 0; padding-right: 0; }
.vm .vm-visit:has(.vm-visit__badge) > p, .vm .vm-visit:has(.vm-visit__badge) > .vm-btn { grid-column: 1 / -1; padding-right: 0; }
/* Tickets on phones: the stub becomes a band across the top (big text and its label on one line), the perforation runs
   under it with a notch at each side, and the offer gets the card's full width. */
@media (max-width: 559.98px) {
  .vm .vm-ticket__in { --stubh: 56px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--stubh), #0000 97%, #000), radial-gradient(circle var(--notch) at 100% var(--stubh), #0000 97%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle var(--notch) at 0 var(--stubh), #0000 97%, #000), radial-gradient(circle var(--notch) at 100% var(--stubh), #0000 97%, #000); mask-composite: intersect; }
  .vm .vm-ticket__stub, .vm .vm-ticket__stub--long { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; box-sizing: border-box; height: var(--stubh); padding: 0 20px; padding-top: 14px; border-right: 0; border-bottom: 1.5px dashed var(--line-strong); border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; text-align: left; }
  .vm .vm-ticket .vm-ticket__stub .vm-ticket__big, .vm .vm-ticket--store .vm-ticket__stub .vm-ticket__big { font-size: 26px !important; line-height: 1 !important; white-space: nowrap; text-align: left; }
  .vm .vm-ticket .vm-ticket__stub small { margin: 0; font-size: 12px; }
  .vm .vm-ticket__big br { display: none; }
  .vm .vm-ticket--expired .vm-ticket__stub { border-bottom-color: var(--line-strong); }
  .vm .vm-ticket__body { padding: 14px 20px 18px; }
}

/* Store header give line: the chosen cause's logo and what shopping here gives it, at every width (stores/show). */
.vm .vm-hero__give { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 12px; background: #fff4cc; color: var(--ink); font-size: 14px; line-height: 20px; }
.vm .vm-hero__give[hidden] { display: none; }
.vm .vm-hero__givelogo:empty { display: none; }
.vm .vm-hero__give .vm-charity__logo { flex: none; box-shadow: 0 0 0 1px rgba(17,20,24,.08); }
.vm .vm-hero__give > .vm-ico { flex: none; width: 18px; height: 18px; color: var(--teal); fill: var(--teal); }
.vm .vm-hero__give a { font-weight: 700; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.vm .vm-hero__give--none { background: var(--surface-sunk); }
/* The stats stay top right beside the title, with the give line on its own row below. */
@media (min-width: 960px) { .vm .vm-hero > .vm-stats { grid-row: 1; grid-column: 3; } }

/* Phones and small tablets: a small logo beside the title, so the first offer starts within the first screen. */
@media (max-width: 767.98px) {
  .vm .vm-hero { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; row-gap: 14px; align-items: center; padding-top: 12px; }
  .vm .vm-hero__logo { width: 56px; height: 56px; border-radius: 14px; font-size: 18px; }
  .vm .vm-hero__logo.vm-logoimg { padding: 6px !important; }
  .vm .vm-hero__logo img { width: 100%; height: 100%; object-fit: contain; }
  .vm .vm-hero h1 { font-size: 22px; line-height: 1.15; margin: 0; text-wrap: balance; }
  .vm .vm-hero__sub { margin-top: 6px; font-size: 13px; gap: 2px 10px; }
  .vm .vm-hero__sub .vm-avatar, .vm .vm-hero__domain { display: none; }
  .vm .vm-hero > .vm-stats, .vm .vm-hero > .vm-nocode, .vm .vm-hero > .vm-hero__give { grid-column: 1 / -1; }

  /* No-code box: the headline, the link and the button only (the chips below already say what's there). */
  .vm .vm-hero > .vm-nocode--row { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; margin: 0; }
  .vm .vm-nocode--row > .vm-ico { display: none; }
  .vm .vm-nocode__text p { font-size: 15px; line-height: 21px; margin: 0; }
  .vm .vm-nocode__more { display: none; }
  .vm .vm-nocode__go { min-height: 44px; grid-column: 1 / -1; }

  .vm .vm-hero + .vm-chips, .vm .vm-chips--top { margin-top: 4px; }
}

/* Mobile review, step 1: inline links get a taller tap area from vertical padding, which doesn't move the text or break the line. */
@media (max-width: 1023.98px) {
  .vm main p a:not([class]), .vm main li > p a:not([class]), .vm .vm-panel p > a,
  .vm figcaption a, .vm .vm-charhero__credit a, .vm .vm-locator__credit a,
  .vm .vm-nocode__text a { display: inline; padding-block: 12px; margin: 0; }
}
/* Give strip: Change sits at the end of the line. */
.vm .vm-hero__givechange { margin-left: auto; flex: none; font-size: 14px; }
.vm .vm-homehead .vm-hero__give, .vm .vm-pagehead .vm-hero__give { margin-top: 12px; }
/* Mobile menu: the cause you're supporting, at the foot of the menu. */
.vm .vm-mobilenav__cause { display: flex; align-items: center; gap: 10px; min-height: 56px; margin-top: 8px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; }
.vm .vm-mobilenav__cause > span { flex: 1; min-width: 0; }
.vm .vm-mobilenav__cause em { font-style: normal; font-weight: 700; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.vm .vm-mobilenav__cause > .vm-ico { width: 22px; height: 22px; color: var(--teal); }
/* Mobile review, step 3: on phones the give strip and no-code note are open lines, not boxes; the stat tiles repeat the chips, and the byline stops the sub row wrapping. */
@media (max-width: 767.98px) {
  .vm .vm-hero__give { background: none; padding: 0; font-size: 13px; line-height: 18px; gap: 8px; }
  .vm .vm-hero__give img { width: 24px; height: 24px; }
  .vm .vm-nocode { background: none; padding: 0; }
  .vm .vm-hero > .vm-stats { display: none; }
  .vm .vm-hero__byline { display: none; }
}
/* Mobile review, step 4: one heading scale on phones. */
@media (max-width: 767.98px) {
  .vm.vm.vm main h1 { font-size: 28px; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
  .vm.vm.vm main h2:not(.vm-sr) { font-size: 22px; line-height: 1.2; text-wrap: balance; }
  .vm.vm.vm main h3, .vm.vm.vm .vm-panel h2 { font-size: 18px; line-height: 1.25; }
  .vm.vm.vm .vm-cards--feature .vm-card h2, .vm.vm.vm .vm-cards--feature .vm-card h3 { font-size: 20px; }
  .vm.vm.vm .vm-article__stand { font-size: 17px; line-height: 1.5; }
}
/* Mobile review, step 5: fewer boxes on phones. Info panels become open content split by hairlines; only action panels (alerts, visit) keep a box, and nothing has a shadow. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-panel, .vm.vm.vm .vm-causerow, .vm.vm.vm .vm-product, .vm.vm.vm .vm-shopbox { box-shadow: none; }
  .vm.vm.vm .vm-list > .vm-panel:not(.vm-panel--ink),
  .vm.vm.vm .vm-side > .vm-panel:not(.vm-panel--ink):not(.vm-visit) { background: none; border: 0; border-radius: 0; padding: 0; }
  .vm.vm.vm .vm-list__head { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
  .vm.vm.vm .vm-panel--ink, .vm.vm.vm .vm-visit { padding: 16px; border-radius: 16px; }
  .vm.vm.vm .vm-side > .vm-sidearticle { display: none; }
  .vm.vm.vm .vm-section { padding-block: 28px; }
  .vm.vm.vm .vm-section + .vm-section { padding-top: 0; }
}
/* Mobile review, step 6: one Get deal style everywhere, solid teal like Get code. */
.vm .vm-ticket__deal { min-height: 48px; border: 0; border-radius: var(--radius-md); background: var(--teal); color: var(--on-teal, #fff); font-weight: 700; }
.vm .vm-ticket__deal:hover { background: var(--teal-deep, #08524e); color: #fff; }
.vm .vm-ticket__deal .vm-ico { color: currentColor; }
/* Only the top offer keeps the loud yellow stub; the rest are a pale yellow so it stands out. */
.vm .vm-list > .vm-ticket:not(.vm-ticket--expired) ~ .vm-ticket:not(.vm-ticket--expired) .vm-ticket__stub { background: #fff4cc; }
/* Tickets shorter and calmer on phones. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-ticket__stub { padding: 10px 16px 0; }
  .vm.vm.vm .vm-ticket__body { padding: 12px 16px 16px; }
  .vm.vm.vm .vm-ticket__meta { font-size: 12px; line-height: 18px; flex-wrap: wrap; column-gap: 12px; }
}
/* Mobile review, step 7: /give-back. The how-it-works line sits in the hero; the pinned bar's Change is its own button on the right. */
.vm .vm-givehero__steps { margin: 0; font-weight: 700; color: var(--teal-deep, #08504c); }
html .vm .vm-give__pinned { justify-content: space-between; column-gap: 12px; row-gap: 6px; }
.vm .vm-give__pinned .vm-give__change { flex: none; margin-left: auto; min-height: 36px; background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.vm .vm-give__pinned .vm-give__change:hover { background: #fff; color: var(--teal-deep, #08504c); }
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-givehero { margin-top: 12px; padding: 20px; }
  .vm.vm.vm .vm-givehero__organise { border: 0; background: none; padding: 0; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
  .vm.vm.vm .vm-causerow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px; }
  .vm.vm.vm .vm-causerow > .vm-btn { grid-column: 3; grid-row: 1 / span 2; margin: 0; min-height: 44px; padding-inline: 14px; }
  .vm.vm.vm .vm-give__pinned { padding: 8px 12px; font-size: 14px; }
}
/* Cause page: other causes as plain rows, not mini cards. */
.vm .vm-othercauses { list-style: none; margin: 8px 0 0; padding: 0; }
.vm .vm-othercauses li + li { border-top: 1px solid var(--line); }
.vm .vm-othercauses a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; color: var(--ink); text-decoration: none; }
.vm .vm-othercauses a > span { display: grid; min-width: 0; line-height: 1.25; }
.vm .vm-othercauses small { color: var(--ink-muted); font-size: 13px; }
.vm .vm-othercauses a:hover b { color: var(--teal); text-decoration: underline; }
/* Mobile review, step 8: on phones the cause page's Choose button is above the fold. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-charhero__photo { height: 128px; }
  .vm.vm.vm span.vm-charintro__chip { min-height: 30px; padding-inline: 10px; font-size: 13px; }
}
/* Mobile review, step 9: /give-back/join. The form leads on phones; the demo video and the skip link go. */
.vm .vm-form__h { margin: 0 0 4px; font: 700 22px/1.2 var(--font-display); }
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-joinvhero .vm-vhero__media, .vm.vm.vm .vm-skipdemo { display: none; }
}
/* Mobile review, step 10: articles and spotlights on phones. The jump-nav is one swipe strip, the shopbox is open, meta pills are smaller. */
.vm .vm-article__head ~ .vm-shopbox { margin-block: 24px; }
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-picknav { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x mandatory; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .vm.vm.vm .vm-picknav > * { flex: 0 0 140px; scroll-snap-align: start; }
  .vm.vm.vm .vm-shopbox { border: 0; background: none; padding: 0; }
  .vm.vm.vm .vm-article__meta .vm-pill { min-height: 28px; padding: 0 10px; font-size: 12px; }
}
/* Mobile review, step 11: /stores. A filter box and a Popular row above the A-Z; on phones the letters are a sticky swipe strip and stores are slim rows. */
.vm .vm-storefilter { display: grid; gap: 6px; }
.vm .vm-storefilter label { font-weight: 700; }
.vm .vm-store[hidden], .vm .vm-azgroup[hidden] { display: none; }
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-az { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; position: sticky; top: 60px; z-index: 5; background: var(--paper); padding: 8px 16px; margin: 0 -16px; scrollbar-width: none; }
  .vm.vm.vm .vm-az a, .vm.vm.vm .vm-az span { flex: none; min-width: 40px; height: 40px; }
  .vm.vm.vm .vm-grid-stores { gap: 0; }
  .vm.vm.vm .vm-store { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; min-height: 56px; box-shadow: none; }
  .vm.vm.vm .vm-store__logo { border: 0; padding: 0; width: 40px; height: 40px; }
}
/* Mobile review, step 12: price drops show the RRP beside the price and the saving in the corner; the results bar is lighter and the checked line is teal. */
.vm .vm-product__rrp { margin-left: 8px; color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.vm .vm-product__off--rrp { background: var(--teal); color: #fff; }
.vm.vm.vm .vm-dropsresults { border: 0; padding: 0; margin: 4px 0 8px; }
.vm .vm-product__when { color: var(--teal); font-weight: 700; }
/* Cause picker: the partners note and How giving works close the list; on phones the change dialog fills the screen and the list scrolls. */
.vm .vm-dialog__listfoot { display: grid; gap: 8px; padding: 12px 4px 4px; }
.vm .vm-dialog__listfoot .vm-notpartners { margin: 0; }
.vm .vm-dialog.is-change .vm-dialog__foot { display: none; }
@media (max-width: 767.98px) {
  .vm .vm-dialog.is-change { height: calc(100dvh - 16px); max-height: none; }
  .vm .vm-dialog__list { flex: 1 1 auto; min-height: 0; }
}
.vm .vm-foot__bottom { margin-top: 32px; }
/* 404 and other error scenes: the search and actions come before the magpie's excuse. */
.vm .vm-err__actions { order: 3; }
.vm .vm-err__excuse { order: 4; }
.vm .vm-err__more { order: 5; }
.vm .vm-err__art { padding-top: 64px; }
/* Contact and other forms: the submit button runs the full width. */
@media (max-width: 767.98px) { .vm .vm-form .vm-btn--primary { width: 100%; } }
/* /extension: the desktop screenshot is no use on a phone. */
@media (max-width: 767.98px) { .vm .vm-exthero__shot.vm-ext-desktop { display: none; } }

/* Full review 16 Oct (evening), step 2: a tighter store hero on phones, so the first ticket stays in the first screen with the give line. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-hero { row-gap: 10px; }
  .vm.vm.vm .vm-hero__give { min-height: 0; }
  .vm.vm.vm .vm-hero__give a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .vm.vm.vm .vm-hero + .vm-chips, .vm.vm.vm .vm-chips--top { margin-top: 0; }
  .vm.vm.vm .vm-hero__give img { width: 24px; height: 24px; }
}

/* Step 3: price-drop names clamp to 3 lines again (the tap-target padding broke the clamp); the link's tap area comes from ::after, and prices sit on one line across a row. */
@media (max-width: 1023.98px) {
  .vm.vm.vm .vm-product h3 { position: relative; }
  .vm.vm.vm .vm-product h3 a { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-block: 0; margin-block: 0; }
  .vm.vm.vm .vm-product h3 a::after { content: ""; position: absolute; inset: -8px 0; }
}
@media (max-width: 767.98px) {
  .vm.vm.vm main .vm-product__name { font: 600 15px/20px var(--font-sans); letter-spacing: -.01em; }
}
.vm.vm.vm .vm-product__price { margin-top: auto; }

/* Step 4: the /give-back steps line was dark teal on teal (about 1.6:1); white now, and on phones the big stat goes so the picker reaches the first screen. */
.vm.vm.vm .vm-givehero__steps { color: #fff; opacity: 1; font-weight: 600; }
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-givehero__steps { font-size: 15px; line-height: 22px; margin-block: 12px 16px; }
  .vm.vm.vm .vm-givehero__stat { display: none; }
}

/* Step 5: /give-back cause rows on phones keep one line of meta (the cause); the name links to the cause page, which has About and Share. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-causerow__meta > span + span, .vm.vm.vm .vm-causerow__meta > a { display: none; }
  .vm.vm.vm .vm-causerow__meta > span:first-child { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vm.vm.vm .vm-causerow__text { min-width: 0; }
  .vm.vm.vm .vm-causerow__name { padding: 2px 0; font-size: 16px; line-height: 22px; }
  .vm.vm.vm .vm-causerow { padding: 12px 12px 12px 14px; border-radius: 14px; }
}

/* Step 6: the phone menu's cause logo is a fixed circle; the flex:1 meant for the name span stretched it. */
.vm.vm.vm .vm-mobilenav__cause > .vm-charity__logo { flex: 0 0 32px; width: 32px; height: 32px; }
.vm.vm.vm .vm-mobilenav__cause > .vm-charity__logo img { width: 100%; height: 100%; object-fit: contain; }

/* Step 7: the A–Z bar sits outside the page head now, so it sticks on phones; 44px keys and a 44px filter box. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-az a, .vm.vm.vm .vm-az span { min-width: 44px; height: 44px; }
}
.vm.vm.vm .vm-storefilter input { min-height: 44px; }
.vm.vm.vm .vm-pagehead + .vm-az { margin-top: 16px; }

/* Step 8: the give line in the first screen of news, articles, spotlights and price drops. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-pagehead .vm-hero__give, .vm.vm.vm .vm-article__head .vm-hero__give,
  .vm.vm.vm .vm-shopbox .vm-hero__give { background: none; padding: 0; margin-top: 12px; font-size: 13px; line-height: 18px; gap: 8px; }
}
.vm.vm.vm .vm-article__head .vm-hero__give, .vm.vm.vm .vm-shopbox .vm-hero__give { margin-top: 12px; }
.vm.vm.vm .vm-dropshero .vm-hero__give { margin-top: 12px; background: rgba(255,255,255,.08); color: #fff; padding: 8px 12px; border-radius: 12px; font-size: 13px; }
.vm.vm.vm .vm-dropshero .vm-hero__give a, .vm.vm.vm .vm-dropshero .vm-hero__give > .vm-ico { color: #fff; fill: #fff; }

/* Tablets (768–1023) get the phone fixes too: no stat tiles, flat panels, offers without a box around the list. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .vm.vm.vm .vm-hero > .vm-stats { display: none; }
  .vm.vm.vm .vm-panel, .vm.vm.vm .vm-product { box-shadow: none; }
  .vm.vm.vm .vm-list > .vm-panel:not(.vm-panel--ink) { background: none; border: 0; border-radius: 0; padding: 0; }
  .vm.vm.vm .vm-list__head { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
  .vm.vm.vm .vm-exthero__shot { max-width: 560px; margin-inline: auto; }
}
.vm.vm.vm .vm-choosecard .vm-btn { max-width: 360px; }

/* News lists on phones: the first card in a list stays a feature, the rest are thumbnail rows (an author's page is all rows). */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-cards--rows > .vm-card:not(:first-child), .vm.vm.vm .vm-cards--allrows > .vm-card {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: start;
    border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; padding: 16px 0; }
  .vm.vm.vm .vm-cards--rows { gap: 0; }
  .vm.vm.vm .vm-cards--rows > .vm-card:first-child:not(:only-child) { margin-bottom: 16px; }
  .vm.vm.vm .vm-cards--rows > .vm-card:not(:first-child) .vm-card__art, .vm.vm.vm .vm-cards--allrows .vm-card__art { grid-row: 1 / span 3; aspect-ratio: 1; height: auto; border-radius: 12px; overflow: hidden; }
  .vm.vm.vm .vm-cards--rows > .vm-card:not(:first-child) .vm-card__art img, .vm.vm.vm .vm-cards--allrows .vm-card__art img { width: 100%; height: 100%; object-fit: cover; }
  .vm.vm.vm .vm-cards--rows > .vm-card:not(:first-child) .vm-card__body, .vm.vm.vm .vm-cards--allrows .vm-card__body { padding: 0; }
  .vm.vm.vm .vm-cards--rows > .vm-card:not(:first-child) .vm-card__body > p, .vm.vm.vm .vm-cards--rows > .vm-card:not(:first-child) .vm-cardby,
  .vm.vm.vm .vm-cards--allrows .vm-card__body > p, .vm.vm.vm .vm-cards--allrows .vm-cardby { display: none; }
}

/* Phones: no boxes inside boxes. */
@media (max-width: 767.98px) {
  /* Product picks in store and article prose. */
  .vm.vm.vm .vm-pick { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; padding: 24px 0; }
  .vm.vm.vm .vm-pick img { height: 160px; border-radius: 16px; }
  .vm.vm.vm .vm-pick__score, .vm.vm.vm .vm-pick__scoreval { background: none; padding: 0; }
  /* A cause page's "raise more" steps. */
  .vm.vm.vm .vm-raiseband { padding: 20px 16px; border-radius: 16px; }
  .vm.vm.vm .vm-raiseband .vm-actioncard { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 16px 0; }
  .vm.vm.vm .vm-raiseband .vm-actioncard + .vm-actioncard { border-top: 1px solid rgba(0,0,0,.08); }
  /* Spotlights A–Z: rows, not a bordered card per store. */
  .vm.vm.vm .vm-spotaz ul { gap: 0; }
  .vm.vm.vm .vm-spotaz li > a { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; padding: 12px 0; min-height: 64px; }
  /* The cause picker's rows. */
  .vm.vm.vm .vm-dialog__list .vm-charity--btn { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  /* Cause chips all one height; the linked ones keep a 44px tap area. */
  .vm.vm.vm .vm-charintro__chip { min-height: 30px; padding-inline: 10px; font-size: 13px; }
  .vm.vm.vm a.vm-charintro__chip { position: relative; }
  .vm.vm.vm a.vm-charintro__chip::after { content: ""; position: absolute; inset: -7px 0; }
}

/* One H1 across the site: weight 800, 46px on desktop (40px on cause pages). The homepage and video heroes keep their own bigger titles. */
.vm.vm.vm main h1 { font-weight: 800; }
@media (min-width: 1024px) {
  .vm.vm.vm main h1:not(.vmh h1):not(.vm-vhero h1) { font-size: 46px; line-height: 1.08; }
  .vm.vm.vm main .vm-charintro h1:not(.vmh h1):not(.vm-vhero h1) { font-size: 40px; }
}

/* The spotlight shop box shows the store's wordmark at its own shape, not squeezed into a 32px square. */
.vm.vm.vm .vm-shopbox__head .vm-store__logo { width: auto; min-width: 40px; max-width: 112px; height: 40px; padding: 4px 8px; }
.vm.vm.vm .vm-shopbox__head .vm-store__logo img { width: auto; height: 100%; max-width: 96px; object-fit: contain; }

/* Review 16 Oct evening, small fixes. */
.vm.vm.vm .vm-give__pinned .vm-give__change { min-height: 44px; }
.vm .vm-err__excuse { align-self: start; }
/* Links in running text get a taller tap area on touch widths: padding only, inside prose, so cards and tiles built from links keep their layout. */
@media (max-width: 1023.98px) {
  .vm.vm.vm :is(.vm-prose, .vm-storeprose, .vm-qa, .vm-article__body, .vm-glance) a:not([class]) { padding-block: 12px; }
}
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-chips { scroll-padding-inline: 16px; }
  .vm.vm.vm .vm-shopbox > .vm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .vm.vm.vm .vm-shopbox > .vm-actions .vm-btn { width: 100%; }
  .vm.vm.vm .vm-datalist h3 { font-size: 16px; line-height: 1.35; }
  .vm.vm.vm .vm-ext-phone h2 { font-size: 22px; }
}
@media (min-width: 1024px) {
  .vm.vm.vm .vm-az:not(.vm-spotaz__jump) { display: flex; flex-wrap: nowrap; justify-content: space-between; max-width: none; }
  .vm.vm.vm .vm-az:not(.vm-spotaz__jump) a, .vm.vm.vm .vm-az:not(.vm-spotaz__jump) span { flex: 1 1 0; min-width: 0; }
}
.vm .vm-foot__badge { display: inline-block; margin-top: 12px; }
.vm .vm-nowrap { white-space: nowrap; }

/* Review 2, step 7: shorter price-drop cards on phones. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-product__store { min-height: 0; margin-bottom: 2px; }
  .vm.vm.vm .vm-product__img { height: 136px; }
  .vm.vm.vm .vm-product__when { font-size: 12px; }
}
.vm.vm.vm .vm-product__when { text-wrap: balance; }

/* Review 2, step 8: product picks in prose are about half as tall on phones. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-pick__body { padding: 16px 0 0; }
  .vm.vm.vm .vm-prose .vm-pick__media { height: auto; padding: 12px 0; background: none; border: 0; }
  .vm.vm.vm .vm-prose .vm-pick img { height: 140px; max-height: 140px; }
  .vm.vm.vm .vm-pick__tip { display: none; }
}

/* Review 2, step 9: /stores letter jumps land just below the sticky A–Z bar (html already pads 84px for the header), which has a rule under it. */
.vm.vm.vm .vm-azgroup { scroll-margin-top: 36px; }
.vm.vm.vm .vm-az { box-shadow: 0 1px 0 var(--line); }

/* Review 2, step 10: the last boxes on phones. /give-back keeps its teal club band; the sign-up and questions sit on the page.
   The join hero's steps are ruled rows, and a cause page's listing line sits under its chips, small and muted. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-section.vm-givesignup, .vm.vm.vm .vm-give .vm-faq, .vm.vm.vm .vm-faq.vm-panel { border: 0; box-shadow: none; background: none; padding-inline: 0; border-radius: 0; }
}
.vm.vm.vm .vm-charintro__listing { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Review 2, step 11: one primary button per screen on a no-code store page: the hero's Shop link is an outline. */
.vm.vm.vm .vm-nocode--row .vm-btn--primary { background: none; color: var(--teal); box-shadow: inset 0 0 0 1.5px currentColor; }
.vm.vm.vm .vm-err__excuse span { min-height: 0; }
.vm.vm.vm main h2 { font-weight: 800; }

/* Review 3, step 2: price-drop prices level across each row: names reserve their three lines, the button takes the slack. */
.vm.vm.vm .vm-product__body > .vm-product__name { min-height: 60px; }
.vm.vm.vm .vm-product__body > .vm-product__price { margin-top: 0; }
.vm.vm.vm .vm-product__body > .vm-btn { margin-top: auto; }

/* Review 3, step 3: the phone fixes that stopped at 767px reach tablets: one filled button on a no-code store (above, at every width),
   the join steps as ruled rows, /give-back's main button, the cause page's choose card, and the price-drop hero without boxes in it. */
@media (max-width: 1023.98px) {
  .vm.vm.vm .vm-joinvhero .vm-vhero__step { background: none; border: 0; box-shadow: none; border-radius: 0; padding-inline: 0; }
  .vm.vm.vm .vm-joinvhero .vm-vhero__step + .vm-vhero__step { border-top: 1px solid rgba(255,255,255,.12); }
}
@media (min-width: 641px) and (max-width: 1023.98px) {
  .vm.vm.vm .vm-givehero__choose { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 28px;
    border-radius: var(--radius-pill); background: var(--gleam, #f5b800); color: var(--on-gleam, #1a1400); font-weight: 700; text-decoration: none; justify-self: start; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .vm.vm.vm .vm-choosecard > small { text-align: left; }
  .vm.vm.vm .vm-choosecard .vm-charshare { justify-self: start; }
}
@media (min-width: 768px) {
  .vm.vm.vm .vm-dropshero h1 { font-size: 40px; line-height: 1.1; }
  .vm.vm.vm .vm-dropshero__stats > div { background: none; border-radius: 0; padding: 2px 0 2px 16px; box-shadow: inset 1px 0 0 rgba(255,255,255,.2); }
}

/* Review 3, step 4: the /stores A–Z bar sticks on tablets too. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .vm.vm.vm .vm-az:not(.vm-spotaz__jump) { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; position: sticky; top: 68px; z-index: 5;
    background: var(--paper); padding: 8px 24px; margin-inline: -24px; scrollbar-width: none; }
}

/* Review 3, step 5: the last short tap targets reach 44px without moving the layout. */
@media (max-width: 1023.98px) {
  .vm.vm.vm .vm-hero__give .vm-hero__givechange { padding-block: 13px; margin-block: -13px; }
  .vm.vm.vm .vm-nocode__text a:not([class]), .vm.vm.vm .vm-howto li a:not([class]), .vm.vm.vm .vm-help a.vm-link { padding-block: 13px; }
  .vm.vm.vm .vm-products > a.vm-product .vm-product__cta { min-height: 44px; }
}

/* Review 3, step 7: /give-back's pinned Change has no outline poking out of the 40px bar. */
.vm.vm.vm .vm-give__pinned .vm-give__change { border-color: transparent; background: none; box-shadow: none; padding-inline: 8px; }
/* Step 8: /account on phones: the form sits on the page, and the cause list folds into "Choose a cause". */
@media (max-width: 767.98px) { .vm.vm.vm .vm-acctform { border: 0; background: none; box-shadow: none; padding-inline: 0; } }
.vm .vm-acctcause__fold { margin: 4px 0 16px; }
.vm .vm-acctcause__fold > summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--teal); cursor: pointer; }
.vm .vm-acctcause__fold > summary small { margin-left: 6px; font-weight: 400; color: var(--ink-muted); }
.vm .vm-acctcause__fold[open] > summary { margin-bottom: 8px; }

/* Review 3, step 9: spotlight product photos (600x315) fill their frame instead of sitting letterboxed in a square. */
.vm.vm.vm .vm-products > a.vm-product > img { aspect-ratio: 600 / 315; height: auto; object-fit: cover; border-radius: 8px; }
/* Step 10: on phones the club band's buttons are outlines; the hero's Choose is the page's one filled button. */
@media (max-width: 767.98px) { .vm.vm.vm .vm-actioncard .vm-btn--primary { background: none; box-shadow: none; color: var(--ink, #111418); } }

/* Review 3, small fixes. */
@media (min-width: 1024px) {
  .vm.vm.vm .vm-givehero { align-items: center; }
  .vm.vm.vm .vm-givehero__stat b { font-size: 96px; line-height: 1; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .vm.vm.vm .vm-givehero h1, .vm.vm.vm .vm-joinvhero .vm-vhero__title { font-size: 38px; line-height: 1.1; }
}
.vm.vm.vm .vm-authorbio { max-width: none; }
.vm.vm.vm .vm-authorbio > p { color: var(--ink); }
.vm.vm.vm .vm-newsband__h { font-size: 22px; }
.vm.vm.vm .vm-errsummary { margin-bottom: 20px; }
.vm.vm.vm .vm-errsummary:focus { outline-offset: 4px; }

/* Review 4, step 2: the price-drop hero's stats on desktop sit side by side at their own width ("968" and "24" ran together). */
@media (min-width: 1024px) {
  .vm.vm.vm .vm-dropshero__stats { grid-template-columns: repeat(3, max-content); column-gap: 24px; }
  .vm.vm.vm .vm-dropshero__stats > div > span { white-space: nowrap; }
}

/* Review 4, step 6: one H1 size at tablet width (40px), from articles to the 404; video heroes keep their own. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .vm.vm.vm main h1:not(.vmh h1):not(.vm-vhero h1) { font-size: 40px; line-height: 1.1; }
}

/* Review 4, step 8: the spotlights A–Z bar is one row: sticky and scrolling on tablets, spread across on desktop. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .vm.vm.vm .vm-spotaz__jump { flex-wrap: nowrap; overflow-x: auto; position: sticky; top: 68px; z-index: 5;
    background: var(--paper); padding: 8px 24px; margin-inline: -24px; max-width: none; scrollbar-width: none; }
}
@media (min-width: 1024px) {
  .vm.vm.vm .vm-spotaz__jump { display: flex; flex-wrap: nowrap; gap: 4px; max-width: none; width: auto; }
  .vm.vm.vm .vm-spotaz__jump > a { flex: 1 1 0; min-width: 0; height: 40px; }
}

/* Review 4, step 9: the last short tap targets. */
@media (max-width: 767.98px) {
  .vm.vm.vm article.vm-product .vm-product__store { min-height: 44px; margin-block: -12px -4px; }
}
@media (max-width: 1023.98px) {
  .vm.vm.vm .vm-form .vm-formfine a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .vm.vm.vm .vm-formfine > a { padding-block: 13px; }
  .vm.vm.vm .vm-panel p > a { padding-block: 13px; }
  .vm.vm.vm .vm-panel p > a.vm-link { margin-block: -13px; }
  .vm.vm.vm .vm-article__photo figcaption > a { padding-block: 15px; }
  .vm.vm.vm .vm-rightsbox__list { row-gap: 0; }
  .vm.vm.vm .vm-rightsbox__list li > a { display: inline-block; padding-block: 10px; }
}
/* A /give-back cause row is one tap target for its name; the Choose button and meta links sit above it. */
.vm.vm.vm .vm-causerow { position: relative; }
.vm.vm.vm .vm-causerow__name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vm.vm.vm .vm-causerow :is(.vm-btn, .vm-causerow__meta a) { position: relative; z-index: 1; }

/* Review 4, step 11: six spotlight products sit 3 + 3, not 4 + 2. */
@media (min-width: 768px) { .vm.vm.vm .vm-products:has(> a.vm-product:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Review 4, small fixes. */
.vm.vm.vm .vm-seg > button { white-space: nowrap; padding-inline: 8px; }
@media (min-width: 768px) and (max-width: 1023.98px) { .vm.vm.vm .vm-joinvhero .vm-vhero__steps { padding-inline: 0; } }
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-authorlinks { row-gap: 0; }
  .vm.vm.vm .vm-authorlinks > a { padding-block: 10px; }
  .vm.vm.vm .vm-authorbox { display: block; }
  .vm.vm.vm .vm-authorbox > img.vm-avatar { float: left; margin: 0 14px 8px 0; }
  .vm.vm.vm .vm-authorbox > div > p { clear: left; }
}
.vm .vm-qa__more > summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--teal); cursor: pointer; }
.vm .vm-qa__more[open] > summary { margin-bottom: 12px; }
.vm .vm-qa__more { display: grid; gap: 16px; }

/* Review 5, medium fixes. A store hero without stat tiles doesn't keep an empty column on desktop. */
@media (min-width: 960px) { .vm.vm.vm .vm-hero:not(:has(> .vm-stats)) { grid-template-columns: 96px minmax(0, 1fr); } }
/* The featured store ticket's stub is the same width as the others, so its title isn't squeezed to three lines. */
@media (min-width: 620px) { .vm.vm.vm .vm-ticket--featured.vm-ticket--store .vm-ticket__in { --stub: 128px; } }
/* Cause names on narrow phones get the room the Choose button doesn't need. */
@media (max-width: 479.98px) { .vm.vm.vm .vm-causerow > .vm-btn { min-width: 88px; padding-inline: 18px; } }
/* The picks bar starts with a 16px gutter. */
.vm.vm.vm .vm-picknav { scroll-padding-inline: 16px; }
/* Footer at tablet width: "Built in Wales" doesn't sit on top of the Shop column. */
@media (min-width: 768px) and (max-width: 1023.98px) { .vm.vm.vm .vm-foot__grid { row-gap: 40px; } }
/* Last short links: the extension's fine print and "also" links, How prices work, a store's "UK locations" jump. */
@media (max-width: 1023.98px) {
  .vm.vm.vm .vm-extnotify__fine > a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .vm.vm.vm .vm-extalso > a { padding-block: 13px; }
  .vm.vm.vm .vm-dropsnote p > a { padding-block: 13px; }
}
.vm.vm.vm .vm-facts dd > a[href^="#"] { display: inline-block; min-width: 44px; }
.vm.vm.vm .vm-teammini > a { border-radius: var(--radius-lg); }
/* The phone give bar says what supporting means: "Supporting Mind · 50% to them". */
.vm .vm-givebar__share { display: none; }
@media (max-width: 640.98px) { .vm .vm-givebar__share { display: inline; } }
/* /account: a 36px H1 suits its 560px card on desktop. */
@media (min-width: 1024px) { .vm.vm.vm main .vm-acctform h1:not(.vmh h1):not(.vm-vhero h1) { font-size: 36px; } }

/* Review 5, step 12: on phones the price-drop count and the sort select share one row. */
@media (max-width: 767.98px) {
  .vm.vm.vm .vm-dropsresults { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
  .vm.vm.vm .vm-dropsresults__h { flex: 1 1 auto; min-width: 0; }
  .vm.vm.vm .vm-dropssort__select label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vm.vm.vm .vm-dropssort__select select { max-width: 52vw; }
}

/* The store page's "Can't find the code?" panel: straight under the hero on phones and tablets, in the sidebar on desktop.
   Below the sidebar width the hero's own Shop button would repeat its Visit button, so that goes. */
@media (max-width: 959.98px) {
  .vm.vm.vm .vm-visit--side { display: none; }
  .vm.vm.vm .vm-visit--top { margin: 0 0 16px; }
  .vm.vm.vm .vm-hero .vm-nocode__go { display: none; }
}
@media (min-width: 960px) { .vm.vm.vm .vm-visit--top { display: none; } }

/* /how-fundraising-works: the explainer film at the column's full width. */
.vm .vm-explainer__video { display: block; width: 100%; height: auto; margin: 8px 0 16px; border-radius: 16px; background: #000; }
.vm .vm-explainer__payout { color: var(--ink-muted); }

/* Country picker in the footer: one site per country, each on its own domain. */
.vm .vm-foot__country { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; color: #9fbfba; font-size: 14px; }
.vm .vm-foot__country a { display: inline-block; min-height: 32px; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; color: #fff; line-height: 22px; text-decoration: none; }
.vm .vm-foot__country a:hover { border-color: rgba(255, 255, 255, .5); }
.vm .vm-foot__country a[aria-current] { background: #fff; border-color: #fff; color: #0b1f2a; font-weight: 700; }