/* Additions to the Claude Design stylesheet for the Laravel build. */
.vm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vm-hp { opacity: 0; }
.vm-skip { position: absolute; left: -9999px; top: 8px; z-index: 10; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--ink); color: var(--paper); font-weight: 700; }
.vm-skip:focus { left: 8px; }
.vm-flash { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--teal-soft); color: var(--ink); font-weight: 600; }
.vm-formfine { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vm-band .vm-formfine { flex-basis: 100%; color: inherit; opacity: .8; }
.vm-band .vm-formfine a { color: inherit; }
.vm-field textarea { padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 16px/24px var(--font-sans); resize: vertical; }
.vm-field input:not([type=checkbox]), .vm-field select, .vm-field textarea { width: 100%; }
.vm-hero__sub a { color: inherit; }
.vm-prose code { font-family: var(--font-mono); font-size: 14px; }
.vm-btn[disabled] { opacity: .55; cursor: not-allowed; }
a.vm-chip { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- admin ---------- */
.vm-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-md); overflow: hidden; font-size: 15px; }
.vm-table th, .vm-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vm-table th { background: var(--surface-sunk); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); }
.vm-table tr:last-child td { border-bottom: 0; }
.vm-table .is-dim td { opacity: .55; }
.vm-table form { display: inline; }
.vm-tablescroll { overflow-x: auto; }
.vm-admin__stat span { color: var(--ink-muted); font-size: 14px; }
.vm-check { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.vm-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.vm-warn { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--expiring-soft); color: var(--ink); }
.vm-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.vm-linkbtn { border: 0; background: none; padding: 0; color: var(--teal); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.vm-linkbtn--danger { color: var(--expiring); }
.vm-pager nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-4); }

/* ---------- charity picker ---------- */
.vm-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sheet); }
.vm-dialog::backdrop { background: var(--overlay); }
.vm-dialog[open] { display: grid; }
.vm-dialog__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: start; padding: var(--space-5) var(--space-5) 0; }
.vm-dialog__head h2, .vm-dialog__head h3 { font: 800 24px/28px var(--font-display); letter-spacing: -.02em; margin-top: 4px; }
.vm-dialog > p { padding: var(--space-3) var(--space-5) 0; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.vm-dialog__list { display: grid; gap: 6px; padding: var(--space-4) var(--space-5); overflow-y: auto; min-height: 0; }
.vm-dialog__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--space-5); border-top: 1px solid var(--line); }
.vm-charity--btn { width: 100%; text-align: left; background: var(--surface); font: inherit; color: inherit; cursor: pointer; }
.vm-charity--btn .vm-ico { width: 18px; height: 18px; color: var(--ink-muted); }
.vm-charity--btn:hover, .vm-charity--btn:focus-visible { border-color: var(--teal); background: var(--teal-soft); }

/* ---------- charity banner under the header ---------- */
.vm-givebar { background: var(--teal-soft); border-bottom: 1px solid color-mix(in srgb, var(--teal) 25%, transparent); }
.vm-givebar__in { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; line-height: 20px; }
.vm-givebar__in[hidden] { display: none; }
.vm-givebar__in > .vm-ico { width: 18px; height: 18px; color: var(--teal); flex: none; }
.vm-givebar__logo { flex: none; display: grid; place-items: center; border-radius: 50%; }
.vm-givebar__text { flex: 1; min-width: 0; }
.vm-givebar__text a { font-weight: 700; color: var(--ink); }
.vm-givebar__note { color: var(--ink-muted); }
.vm-givebar__action { flex: none; font-weight: 700; color: var(--teal); white-space: nowrap; }
@media (max-width: 640.98px) { .vm-givebar__note { display: none; } }

/* ---------- charity page ---------- */
.vm-charchoose { display: grid; gap: 8px; align-content: center; min-width: 240px; }
.vm-charchoose small { font-size: 13px; line-height: 18px; color: var(--ink-muted); text-align: center; }
.vm-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 12px 0 0; font-size: 15px; }
.vm-facts dt { color: var(--ink-muted); }
.vm-facts dd { margin: 0; font-weight: 600; }

/* ---------- footer (layout after digitalgnome.uk) ---------- */
.vm-foot { background: var(--ink); color: #fff; border-top: 4px solid var(--teal); padding: 56px 0 28px; }
.vm-foot a { color: inherit; }
.vm-foot__grid { display: grid; gap: 40px; }
@media (min-width: 860px) { .vm-foot__grid { grid-template-columns: 1.4fr repeat(5, 1fr); gap: 28px; } }
@media (min-width: 560px) and (max-width: 859.98px) { .vm-foot__grid { grid-template-columns: 1fr 1fr; } .vm-foot__brand { grid-column: 1 / -1; } }
.vm-foot__brand .vm-logo { color: #fff; }
.vm-foot__brand p { margin-top: 16px; max-width: 280px; font-size: 14px; line-height: 22px; color: #b9bfc8; }
.vm-foot__dg { margin-top: 10px !important; }
.vm-foot__dg a { color: #fff; font-weight: 700; text-decoration-color: var(--gleam); text-underline-offset: 3px; }
.vm-foot__wales { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.vm-foot__wales img { width: 28px; height: 19px; border-radius: 3px; object-fit: cover; flex: none; }
.vm-foot__wales span, .vm-foot__head { font: 600 11px/16px var(--font-mono); letter-spacing: .14em; }
.vm-foot__wales span { color: rgba(255,255,255,.8); }
.vm-foot ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.vm-foot ul a { font-size: 14px; color: #d6dae0; text-decoration: none; }
.vm-foot ul a:hover { color: #fff; text-decoration: underline; }
.vm-foot__note { font-size: 13px; line-height: 20px; color: #8a919c; }

/* ---------- cookie notice ---------- */
.vm-cookie { position: fixed; z-index: 20; left: 16px; right: 16px; bottom: 16px; max-width: 460px; display: grid; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); font-size: 14px; line-height: 20px; }
.vm-cookie[hidden] { display: none; }
/* Offer of a visitor's own country's site, across the top of the page. */
.vm-countrybar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--edge); font-size: 14px; line-height: 20px; text-align: center; }
.vm-countrybar[hidden] { display: none; }
.vm-countrybar p { margin: 0; }
.vm-countrybar__actions { display: flex; align-items: center; gap: 16px; }
.vm-cookie__actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.vm-cookie__actions a { color: var(--teal); font-weight: 600; }

/* ---------- article photos ---------- */
.vm-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vm-article__photo { margin: 0; }
.vm-article__photobox > img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; max-height: 440px; object-fit: cover; border-radius: var(--radius-lg); }
.vm-article__photo figcaption { margin-top: 6px; font-size: 12px; color: var(--ink-muted); text-align: right; }
.vm-article__photo figcaption a { color: inherit; }

/* ---------- store logos ---------- */
.vm-logoimg { background: #fff !important; border: 1px solid var(--edge); overflow: hidden; padding: 0 !important; }
.vm-logoimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vm-hero__logo.vm-logoimg { padding: 10px !important; }
.vm-store__logo.vm-logoimg { padding: 4px !important; }

/* Vouchers stay still on hover (only the Get code button reacts). */
@media (hover: hover) { .vm-ticket:hover .vm-ticket__in { transform: none; } .vm-ticket:hover { filter: drop-shadow(var(--shadow-drop)); } }

/* ---------- article header ---------- */
.vm-article__head { gap: var(--space-4); }
.vm-article__head .vm-crumbs { font-weight: 500; }
.vm-article__head .vm-crumbs span { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.vm-article__meta .vm-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--teal-soft); color: var(--teal); font: 700 12px/1 var(--font-sans); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
.vm-article__meta .vm-dot::before { content: "·"; margin-right: 10px; color: var(--line-strong); }

/* ---------- search autocomplete ---------- */
.vm-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); max-height: 70vh; overflow-y: auto; text-align: left; }
.vm-suggest[hidden] { display: none; }
.vm-suggest a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.vm-suggest [aria-selected="true"] a, .vm-suggest a:hover { background: var(--teal-soft); }
.vm-suggest b { display: block; font: 700 15px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-suggest small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.vm-suggest a > span:last-child { min-width: 0; }
.vm-suggest__logo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--edge); background: #fff; overflow: hidden; font: 800 11px/1 var(--font-display); }
.vm-suggest__logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.vm-suggest__logo--category, .vm-suggest__logo--guide { background: var(--surface-sunk); color: var(--teal); font-size: 15px; }
.vm-suggest__empty { padding: 10px 12px; font-size: 14px; color: var(--ink-muted); }
/* One even gap between stacked sections, wherever they appear. */
.vm-section + .vm-section { padding-top: 0; }

/* ---------- store profile sections ---------- */
.vm-storeprose { display: grid; gap: 12px; font-size: 16px; line-height: 26px; }
.vm-glance table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.vm-glance th { width: 34%; text-align: left; vertical-align: top; padding: 10px 16px 10px 0; color: var(--ink-muted); font-weight: 600; }
.vm-glance td { padding: 10px 0; }
.vm-glance tr + tr th, .vm-glance tr + tr td { border-top: 1px solid var(--line); }
.vm-glance__src { margin-top: 10px; font-size: 13px; }
.vm-tips { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 22px; }
.vm-tips li::marker { color: var(--teal); }
.vm-help { display: grid; gap: 20px; }
@media (min-width: 700px) { .vm-help { grid-template-columns: 1fr 1fr; } }
.vm-help h3 { font: 700 16px/22px var(--font-sans); margin-bottom: 8px; }
.vm-help p + p { margin-top: 6px; }
.vm-locator { display: grid; gap: 12px; }
.vm-locator__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.vm-locator__map { height: 380px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunk); }
.vm-locator__near { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.vm-locator__near b { font-weight: 700; }
.vm-towns summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.vm-towns ul { list-style: none; padding: 0; margin: 12px 0 0; columns: 3 160px; column-gap: 16px; font-size: 14px; line-height: 26px; }
.vm-towns li { break-inside: avoid; }
.vm-towns button { border: 0; background: none; padding: 0; font: inherit; color: var(--teal); text-decoration: underline; cursor: pointer; }
.vm-towns span { color: var(--ink-muted); font-size: 12px; }
.vm-locator__credit { font-size: 12px; color: var(--ink-muted); }
.vm-locator__credit a { color: inherit; }
.maplibregl-popup-content { font: 14px/20px var(--font-sans); padding: 10px 12px !important; border-radius: 10px !important; }

/* Filters sit above both columns so the first voucher and the sidebar line up. */
.vm-chips--top { margin: var(--space-5) 0 var(--space-4); }

/* ---------- visit store (top of sidebar) ---------- */
.vm-visit { position: relative; display: grid; gap: 10px; border-color: var(--teal); border-width: 1.5px; overflow: hidden; }
.vm-visit h3 { font: 700 18px/24px var(--font-display); padding-right: 76px; }
.vm-visit p { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.vm-visit p b { color: var(--ink); }
.vm-visit__badge { position: absolute; top: 12px; right: 12px; width: 72px; height: 72px; border-radius: 50%; background: var(--gleam); color: var(--on-gleam); display: grid; place-content: center; text-align: center; transform: rotate(8deg); box-shadow: var(--shadow-rest); }
.vm-visit__badge b { font: 800 22px/22px var(--font-display); letter-spacing: -.02em; }
.vm-visit__badge small { font: 700 9px/11px var(--font-sans); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- team & authors ---------- */
.vm-avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover; font-family: var(--font-display); font-weight: 800; }
.vm-team { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.vm-teamcard { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 28px 20px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); text-decoration: none; }
.vm-teamcard b { font: 700 19px/24px var(--font-display); margin-top: 6px; }
.vm-teamcard p { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.vm-teamcard__role { font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.vm-authorhead { display: flex; align-items: center; gap: 24px; margin-top: 16px; }
.vm-authorhead h1 { font: 800 40px/44px var(--font-display); letter-spacing: -.03em; }
.vm-byline { gap: 8px; color: inherit; text-decoration: none; }
.vm-byline b { color: var(--ink); }
.vm-byline::before { content: "·"; margin-right: 2px; color: var(--line-strong); }
.vm-authorbox { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; padding: 20px; background: var(--surface-sunk); border-radius: var(--radius-lg); }
.vm-authorbox b { display: block; margin-top: 4px; }
.vm-authorbox b a { color: var(--ink); }
.vm-authorbox p { margin-top: 6px; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.vm-cardby { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.vm-teammini { display: flex; flex-wrap: wrap; gap: 12px; }
.vm-teammini a { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-pill); text-decoration: none; color: inherit; }
.vm-teammini b { display: block; font-size: 15px; line-height: 20px; }
.vm-teammini small { display: block; font-size: 12px; color: var(--ink-muted); }
.vm-prose .vm-sources { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.vm-prose .vm-sources a { color: inherit; }
.vm-foot__note { max-width: none; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.vm-suggest__group { padding: 10px 10px 4px; font: 700 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.vm-suggest__group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; }

/* ---------- author's top tip ---------- */
.vm-tip--author { display: grid; gap: 8px; padding: 24px 28px; border-left: 6px solid var(--teal); border-radius: var(--radius-lg); font-size: 18px; line-height: 28px; }
.vm-tip--author .vm-tip__who { display: flex; align-items: center; gap: 12px; font: 800 22px/28px var(--font-display); letter-spacing: -.01em; color: var(--ink); margin-bottom: 4px; }
.vm-tip--author > b { font: 700 13px/18px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }

/* ---------- shopper account ---------- */
.vm-acctpage { padding-top: 24px; }
.vm-acctgrid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .vm-acctgrid { grid-template-columns: 1.2fr 1fr; } }
.vm-acctform { display: grid; gap: 12px; max-width: 560px; }
.vm-acctform h1 { font: 800 30px/36px var(--font-display); letter-spacing: -.02em; }
.vm-acct__pitch h2 { font: 700 22px/28px var(--font-display); margin-bottom: 12px; }
.vm-acctcharity { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vm-acctcharity > div { flex: 1; min-width: 200px; }
.vm-acctcharity h2 { font: 700 22px/28px var(--font-display); }
.vm-acctcharity h2 a { color: inherit; }
.vm-acctcharity p { font-size: 14px; color: var(--ink-muted); }
.vm-trips { overflow-x: auto; }
.vm-trips table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vm-trips th, .vm-trips td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.vm-trips th { color: var(--ink-muted); font-weight: 600; }
.vm-field label small { font-weight: 500; color: var(--ink-muted); }
.vm-authorbio { display: grid; gap: 12px; max-width: 760px; margin-top: 28px; font-size: 17px; line-height: 27px; }
.vm-authorbio h2 { font: 700 20px/26px var(--font-display); }
.vm-authorarticles { margin-top: 24px; border-top: 1px solid var(--edge); }
.vm-acctchip--icon { padding: 0; width: 40px; justify-content: center; border-color: transparent; background: transparent; }
.vm-acctchip--icon i { width: 36px; height: 36px; font-size: 14px; }
/* A–Z: all 26 letters on one row on wider screens. */
@media (min-width: 900px) { .vm-az { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 4px; } .vm-az a, .vm-az span { min-width: 0; height: 38px; } }

/* ---------- account giving tiles + chart ---------- */
.vm-givetiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.vm-givetile { padding: 16px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-md); }
.vm-givetile b { display: block; font: 800 26px/32px var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vm-givetile span { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vm-givetile--hero { background: var(--teal); border-color: var(--teal); color: #fff; }
.vm-givetile--hero span { color: rgba(255,255,255,.85); }
.vm-givechart { display: grid; gap: 12px; }
.vm-givechart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.vm-givechart__head h2 { font: 700 20px/26px var(--font-display); }
.vm-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-sunk); border-radius: var(--radius-pill); }
.vm-seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: var(--radius-pill); font: 600 13px/18px var(--font-sans); color: var(--ink-muted); cursor: pointer; }
.vm-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-rest); }
.vm-givechart__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink); }
.vm-givechart__legend li { display: inline-flex; align-items: center; gap: 6px; }
.vm-givechart__legend i, .vm-gc__tip i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.vm-givechart__plot { position: relative; width: 100%; }
.vm-givechart__plot svg { display: block; width: 100%; height: auto; }
.vm-gc__grid { stroke: var(--line); stroke-width: 1; }
.vm-gc__base { stroke: var(--line-strong); stroke-width: 1; }
.vm-gc__tick { font: 500 11px var(--font-sans); fill: var(--ink-muted); }
.vm-gc__label { font: 600 12px var(--font-sans); fill: var(--ink); }
.vm-gc__cross { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.vm-gc__tip { position: absolute; top: 8px; z-index: 2; min-width: 170px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--shadow-lift); font-size: 13px; line-height: 18px; pointer-events: none; }
.vm-gc__tip b { display: block; margin-bottom: 4px; }
.vm-gc__tip span { display: flex; align-items: center; gap: 6px; }
.vm-gc__tip em { margin-left: auto; padding-left: 12px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.vm-givechart__table summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--teal); }
.vm-givechart__table table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.vm-givechart__table th, .vm-givechart__table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); }

/* ---------- charity logos & page header ---------- */
.vm-charlogo { background: #fff !important; border: 1px solid var(--edge); overflow: hidden; padding: 3px; }
.vm-charlogo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vm-givebar__logo { overflow: hidden; }
.vm-givebar__logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.vm-charhero { margin-top: 8px; }
.vm-charhero__photo { max-height: 340px; border-radius: var(--radius-lg); overflow: hidden; }
.vm-charhero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-charhero__body { position: relative; display: flex; flex-wrap: wrap; }
.vm-charhero__body > .vm-charity__logo { border: 4px solid var(--surface); box-shadow: var(--shadow-lift); background: #fff; }
.vm-charhero__body h1 { font: 800 36px/40px var(--font-display); letter-spacing: -.03em; }
.vm-charhero__body .vm-charchoose { margin-left: auto; }
.vm-charhero__credit { margin-top: 8px; }
@media (max-width: 700px) { .vm-charhero__body h1 { font-size: 28px; line-height: 32px; } .vm-charhero__body .vm-charchoose { margin-left: 0; width: 100%; } }

/* Footer bottom strip: clear gap above the line, disclosure left, copyright right. */
.vm-foot__bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.vm-foot__bottom .vm-foot__note { margin: 0; padding: 0; border: 0; flex: 1 1 520px; max-width: 760px; font-size: 13px; line-height: 20px; color: #8a919c; }
.vm-foot__copy { margin: 0; font-size: 13px; line-height: 20px; color: #8a919c; white-space: nowrap; }
.vm-foot__copy a { color: #d6dae0; }
@media (max-width: 640.98px) { .vm-foot__copy { white-space: normal; } }

/* ---------- store page: active codes table, visible FAQs, compact store grid ---------- */
.vm-activetable { overflow-x: auto; }
.vm-activetable table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.vm-activetable th { text-align: left; padding: 10px 12px 10px 0; color: var(--ink-muted); font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--line-strong); }
.vm-activetable td { border-bottom: 1px solid var(--line); vertical-align: top; }
.vm-activetable tr:last-child td { border-bottom: 0; }
.vm-activetable td:nth-child(2) { font-weight: 700; }
.vm-qa { display: grid; gap: 0; }
.vm-qa > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.vm-qa > div:first-child { padding-top: 0; }
.vm-qa > div:last-child { border-bottom: 0; padding-bottom: 0; }
.vm-qa h3 { font: 700 16px/22px var(--font-sans); margin-bottom: 4px; }
.vm-qa p { font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.vm-grid-stores--compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.vm-charhero__photo { aspect-ratio: auto; width: 100%; height: clamp(180px, 26vw, 340px); }
.vm-howto ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; line-height: 23px; }
.vm-howto ol li::marker { color: var(--teal); font-weight: 700; }
.vm-howto__tip { margin-top: 12px; font-size: 14px; color: var(--ink-muted); }
.vm-howto figure { margin: 16px 0 0; }
.vm-howto figure img { width: 100%; border: 1px solid var(--edge); border-radius: var(--radius-md); }
.vm-howto figcaption { margin-top: 6px; font-size: 13px; color: var(--ink-muted); }
.vm-curated { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 600; text-decoration: none; vertical-align: middle; }
.vm-curator { display: grid; gap: 10px; }
.vm-curator a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.vm-curator b { display: block; font-size: 16px; }
.vm-curator small { display: block; font-size: 13px; color: var(--ink-muted); }
.vm-curator p { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
/* Active codes table: fits its panel, no sideways scroll. */
.vm-activetable { overflow: visible; padding: 6px 16px; }
.vm-activetable table { table-layout: fixed; }
.vm-activetable th:nth-child(1), .vm-activetable td:nth-child(1) { width: auto; overflow-wrap: anywhere; }
.vm-activetable th:nth-child(2), .vm-activetable td:nth-child(2) { width: 92px; }
.vm-activetable th:nth-child(3), .vm-activetable td:nth-child(3) { width: 72px; padding-right: 0; color: var(--ink-muted); }
.vm-activetable td:nth-child(2) { white-space: normal; }
.vm-activetable td { padding: 8px 10px 8px 0; }
.vm-activetable__type { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-sunk); font-size: 11px; line-height: 18px; font-weight: 700; color: var(--ink-muted); vertical-align: 1px; }
@media (max-width: 480px) { .vm-activetable th:nth-child(2), .vm-activetable td:nth-child(2) { width: 70px; } .vm-activetable th:nth-child(3), .vm-activetable td:nth-child(3) { width: 58px; } }

/* Charity header v2: only the logo overlaps the photo; name and button sit below it. */
.vm-charhero { margin: 8px 0 32px; padding-bottom: 28px; }
.vm-charhero__photo { position: relative; }
.vm-charhero__credit { position: absolute; right: 12px; bottom: 10px; margin: 0; padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(17,20,24,.55); color: #fff; font-size: 11px; line-height: 16px; text-align: right; }
.vm-charhero__credit a { color: #fff; }
.vm-charhero__body { margin: 16px 0 0; padding: 0 0 0 24px; gap: 16px 24px; }
.vm-charhero__body > .vm-charity__logo { margin-top: -64px; align-self: flex-start; }
.vm-charhero__body h1 { margin-top: 0; }
.vm-charhero__body .vm-charchoose { min-width: 260px; }
@media (max-width: 700px) { .vm-charhero__body > .vm-charity__logo { margin-top: -52px; width: 80px !important; height: 80px !important; } }
@media (max-width: 700px) { .vm-charhero__body { padding-left: 0; } .vm-charhero__body > .vm-charity__logo { margin-left: 12px; } }
/* Shopping trips: fits its panel, no sideways scroll. */
.vm-trips { overflow: visible; }
.vm-trips table { table-layout: fixed; }
.vm-trips th, .vm-trips td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.vm-trips th:nth-child(1), .vm-trips td:nth-child(1) { width: auto; }
.vm-trips td:nth-child(1) a { font-weight: 700; color: var(--ink); }
.vm-trips td small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vm-trips th:nth-last-child(2), .vm-trips td:nth-last-child(2) { width: 64px; white-space: nowrap; }
.vm-trips th:last-child, .vm-trips td:last-child { width: 84px; }
@media (min-width: 700px) { .vm-trips th:nth-child(2):not(:nth-last-child(2)), .vm-trips td:nth-child(2):not(:nth-last-child(2)) { width: 30%; } }
.vm-trips__for { display: none !important; color: var(--teal) !important; font-weight: 600; }
@media (max-width: 560.98px) { .vm-trips .vm-trips__charity { display: none; } .vm-trips__for { display: block !important; } }
/* ---------- news sections & month archive ---------- */
a.vm-chip[aria-current="page"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.vm-newspager { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.vm-newsarchive { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--edge); }
.vm-newsarchive h2 { font: 700 18px/24px var(--font-display); margin-bottom: 10px; }
.vm-newsarchive ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: 15px; }
.vm-newsarchive a { color: var(--teal); font-weight: 600; }
.vm-newsarchive a[aria-current] { color: var(--ink); text-decoration: none; }
.vm-newsarchive span { color: var(--ink-muted); font-size: 13px; }

/* ---------- store spotlights ---------- */
.vm .vm-newsband__h { margin-top: 48px; margin-bottom: 4px; font: 700 24px/30px var(--font-display); }
.vm-art--store { display: grid; place-items: center; }
.vm-art--store img { max-width: 55%; max-height: 55%; object-fit: contain; background: #fff; padding: 12px; border-radius: 16px; box-shadow: var(--shadow-rest); }
.vm-disclose { padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-sunk); font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.vm-disclose b { color: var(--ink); }
.vm-article__context { padding: 12px 16px; border-left: 3px solid var(--teal); background: var(--surface-sunk); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-weight: 600; }
.vm-shopbox { display: grid; gap: 14px; margin-top: 12px; padding: 22px; border: 1.5px solid var(--teal); border-radius: var(--radius-lg); background: var(--surface); }
.vm-shopbox__head { display: flex; align-items: center; gap: 14px; }
.vm-shopbox__head h2 { margin: 2px 0 0 !important; font: 700 20px/26px var(--font-display) !important; }
.vm-spotlink { display: grid; gap: 6px; text-decoration: none; color: inherit; border-color: var(--teal); }
.vm-spotlink b { font: 700 16px/22px var(--font-display); }

/* Store spotlight article header: the store's logo instead of a placeholder */
.vm-article__art--store{display:block}
.vm-article__art--store .vm-art{aspect-ratio:auto;height:200px;display:flex;align-items:center;justify-content:center;border-radius:16px}
.vm-article__art--store .vm-art img{max-height:110px;max-width:min(320px,70%);width:auto;height:auto;object-fit:contain;padding:18px 26px;background:#fff;border-radius:14px}
@media (max-width: 640.98px){.vm-article__art--store .vm-art{height:150px}.vm-article__art--store .vm-art img{max-height:80px}}

/* Store logo badge sitting over a spotlight photo: fixed height, width follows the logo */
.vm-article__photobox { position: relative; }
.vm-storebadge { position: absolute; left: 14px; bottom: 14px; z-index: 1; display: flex; align-items: center; justify-content: center; height: 64px; min-width: 64px; max-width: calc(100% - 28px); padding: 10px 12px; border-radius: 14px; box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(0,0,0,.22); overflow: hidden; }
.vm-storebadge img { display: block; height: 100%; width: auto; max-width: 200px; object-fit: contain; }
.vm-storebadge b { font-size: 20px; font-weight: 800; }
.vm-storebadge--lg { left: 24px; bottom: 24px; height: 112px; min-width: 112px; padding: 16px 22px; border-radius: 20px; }
.vm-storebadge--lg img { max-width: 360px; }
.vm-storebadge--lg b { font-size: 32px; }
.vm-article__badge { display: block; }
@media (max-width: 640.98px) { .vm-storebadge--lg { left: 14px; bottom: 14px; height: 72px; min-width: 72px; padding: 10px 14px; border-radius: 14px; } .vm-storebadge--lg img { max-width: 220px; } }
@media (max-width: 640.98px) { .vm-article__photobox > img { aspect-ratio: 16 / 9; } }

/* ---------- Responsive and accessibility pass (WCAG 2.2 AA) ---------- */

/* Focus rings that show up on dark and teal backgrounds too (2.4.7, 2.4.11) */
.vm-foot :focus-visible, .vm-givehero :focus-visible, .vm-band :focus-visible, .vm-btn--primary:focus-visible { outline: 3px solid var(--gleam); outline-offset: 2px; }
.vm :focus-visible { outline-width: 3px; }

/* Text contrast on the teal give hero (1.4.3): yellow eyebrow was 3.4:1 */
.vm-givehero .vm-eyebrow { color: #fff; }
.vm-foot__head { font-size: 11px; color: #a3aab4; }

/* Touch targets at least 24px (2.5.8) */
.vm-crumbs a, .vm-givebar__action, .vm-cookie__actions a, .vm-ticket__storelink, .vm-hero__sub a, .vm-foot ul a { display: inline-flex; align-items: center; min-height: 24px; }
.vm-ticket__meta .vm-btn--ghost { min-height: 24px; }
.vm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Phones */
@media (max-width: 559.98px) {
  /* Footer: link groups side by side instead of one long column */
  .vm-foot { padding-top: 40px; }
  .vm-foot__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .vm-foot__brand { grid-column: 1 / -1; }
  .vm-foot ul { gap: 4px; margin-top: 10px; }
  .vm-foot ul a { min-height: 32px; }
  .vm-foot__note { margin-top: 32px; }

  /* Store header: the logo big on its own row, so the title gets the full width */
  .vm-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .vm-hero__logo { width: 80px; height: 80px; }
  .vm-hero h1 { font-size: 26px; line-height: 30px; }

  /* "At a glance": label above value */
  .vm-glance table, .vm-glance tbody, .vm-glance tr, .vm-glance th, .vm-glance td { display: block; width: auto; }
  .vm-glance th { padding: 12px 0 2px; }
  .vm-glance td { padding: 0 0 12px; }

  /* Cookie notice: one compact strip */
  .vm-cookie { left: 8px; right: 8px; bottom: 8px; padding: 12px 14px; gap: 8px; font-size: 13px; line-height: 18px; }

  /* Tickets: a little tighter */
  .vm-ticket__in { --stub: 84px; }
  .vm-ticket__body { gap: 10px; padding: 14px 14px 14px 16px; }
  .vm-ticket__stub .vm-ticket__big { font-size: 28px; line-height: 28px; }

  /* Tickets: narrower stub, and the proof line as two short lines ("Published by…", then "Checked… · Not yet verified") */
  .vm .vm-ticket__in { --stub: 76px; }
  .vm .vm-ticket__stub .vm-ticket__big { font-size: 24px; line-height: 26px; }
  .vm .vm-ticket__title { font-size: 17px; line-height: 22px; }
  .vm .vm-ticket__proof { display: block; font-size: 0; line-height: 0; }
  .vm .vm-ticket__proof > * { font-size: 12px; line-height: 17px; }
  .vm .vm-ticket__proof > b { display: block; margin-bottom: 1px; }
  .vm .vm-ticket__proof > .vm-ico { float: left; margin: 2px 4px 0 0; }
  .vm .vm-ticket__proof > span:has(+ span:not(:last-child))::after { content: " · "; }
  .vm .vm-ticket__proof > span:last-child { display: none; }

  /* Charity bar: one line, smaller button, so the sticky bars take less of the screen */
  .vm .vm-givebar__in { min-height: 40px; gap: 8px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; line-height: 18px; }
  .vm .vm-givebar__text { white-space: nowrap; text-overflow: ellipsis; }
  .vm .vm-givebar__btn { padding: 4px 10px; font-size: 12px; }
}

/* Grid and flex children may shrink below their content, so nothing pushes the page wider than the screen (1.4.10 reflow) */
.vm-layout > *, .vm-article__grid > *, .vm-wrap > *, .vm-prose, .vm-panel { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
/* Small links that aren't inside running text */
.vm-article__photo figcaption a, .vm-byline, .vm-charhero a { display: inline-flex; align-items: center; min-height: 24px; }
.vm-crumbs { align-items: center; }
.vm-dialog__head .vm-iconbtn { display: grid; flex: none; align-self: flex-start; width: 44px; height: 44px; }
/* Toast: a full-width strip on phones so it doesn't cover the code it's talking about */
@media (max-width: 559.98px) {
  .vm-toast { max-width: none; border-radius: 14px; padding: 12px 16px; font-size: 14px; text-align: center; }
}
@media (max-width: 559.98px) { .vm-list__head { flex-wrap: wrap; } .vm-list__head > h2 { flex: 1 1 100%; } }

/* Charity picker on phones: a full-height bottom sheet, compact header, list takes the room */
@media (max-width: 559.98px) {
  .vm-dialog { width: 100vw; max-width: 100vw; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .vm-dialog__head { padding: 14px 16px 0; align-items: center; }
  .vm-dialog__head .vm-eyebrow { display: none; }
  .vm-dialog__head h2, .vm-dialog__head h3 { font-size: 20px; line-height: 24px; margin-top: 0; }
  .vm-dialog > p { padding: 6px 16px 0; font-size: 14px; line-height: 20px; }
  .vm-dialog .vm-long { display: none; }
  .vm-dialog__list { gap: 8px; padding: 12px 16px; overscroll-behavior: contain; }
  .vm-dialog__list .vm-charity--btn { min-height: 60px; padding-block: 10px; }
  .vm-dialog__foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .vm-dialog__foot .vm-btn { min-height: 44px; }
}

.vm-dialog .vm-short { display: none; }
@media (max-width: 559.98px) { .vm-dialog .vm-short { display: inline; } }

/* Admin: networks */
.vm-netier { font: 700 18px/24px var(--font-display); margin: 28px 0 10px; }
.vm-nettable td:first-child { min-width: 260px; max-width: 420px; }
.vm-nettable .vm-muted { font-size: 13px; line-height: 18px; }
.vm-netlinks a { display: block; white-space: nowrap; font-weight: 600; }
.vm-netstate { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 700 12px/18px var(--font-sans); }
.vm-netstate--on { background: #dff3ee; color: #0b5a41; }
.vm-netstate--off { background: #fff3d6; color: #7a4b00; }
.vm-netstate--none { background: var(--surface-sunk); color: var(--ink-muted); }
.vm-netruns { font-size: 13px; line-height: 18px; min-width: 220px; }
.vm-netrun { font-weight: 700; }
.vm-netrun.is-ok { color: #0b5a41; }
.vm-netrun.is-failed { color: #a1260d; }
.vm-netrun.is-skipped { color: var(--ink-muted); }
.vm-nettable td:nth-child(4), .vm-nettable .vm-actions { white-space: nowrap; }
.vm-nettable .vm-actions form { display: block; }

/* Charity landing page (/support/{charity}): simple, for people new to voucher sites */
.vm-supporthero { background: var(--teal); color: var(--on-teal); }
.vm-supporthero__in { display: grid; gap: 28px; padding-block: 40px; align-items: center; }
@media (min-width: 900px) { .vm-supporthero__in { grid-template-columns: 1.1fr .9fr; padding-block: 56px; } }
.vm-supporthero__charity { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 700; }
.vm-supporthero__charity .vm-charlogo, .vm-supporthero__charity > :first-child { background: #fff; border-radius: 50%; }
.vm-supporthero h1 { margin-top: 18px; font: 800 36px/40px var(--font-display); letter-spacing: -.03em; max-width: 18ch; }
@media (min-width: 900px) { .vm-supporthero h1 { font-size: 46px; line-height: 50px; } }
.vm-supporthero .lede { margin-top: 12px; font-size: 18px; line-height: 27px; opacity: .95; max-width: 44ch; }
.vm-supporthero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.vm-supportform { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 24px; max-width: 520px; }
.vm-supportform input[type=email] { min-height: 52px; padding: 0 16px; border: 0; border-radius: 12px; font-size: 16px; color: var(--ink); }
.vm-supportform .vm-btn { min-height: 52px; }
.vm-supportform__fine { grid-column: 1 / -1; font-size: 14px; line-height: 20px; opacity: .92; margin-top: 4px; }
.vm-supporthero a, .vm-supporthero .vm-linkbtn { color: #fff; text-decoration: underline; font-weight: 700; }
@media (max-width: 559.98px) { .vm-supportform { grid-template-columns: 1fr; } }
.vm-supportstores { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.vm-supportstores a { display: grid; place-items: center; height: 64px; padding: 10px 14px; background: #fff; border: 1px solid var(--edge); border-radius: 12px; }
.vm-supportstores img { max-height: 40px; max-width: 100%; object-fit: contain; }
.vm-supportshare { display: grid; gap: 16px; background: var(--teal-soft); border-radius: var(--radius-lg); }
.vm-supportshare__link { display: grid; grid-template-columns: 1fr auto; gap: 8px; max-width: 640px; }
.vm-supportshare__link input { min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 15px; background: #fff; color: var(--ink); min-width: 0; }
.vm-supportshare__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.vm-charstatement { font-size: 13px; padding-top: 16px; }
.vm-givesignup { display: grid; gap: 16px; align-items: center; padding: 24px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg); }
@media (min-width: 900px) { .vm-givesignup { grid-template-columns: 1fr 1fr; } }
.vm-givesignup h2 { font: 800 22px/28px var(--font-display); }
.vm-givesignup p { color: var(--ink-muted); margin-top: 6px; }
.vm-supportform--light { margin-top: 0; }
.vm-supportform--light input[type=email] { border: 1px solid var(--line-strong); }
.vm-charshare { display: inline-flex; align-items: center; min-height: 24px; font-weight: 700; color: var(--teal); }
/* Article titles run the full width, like the photo under them; the standfirst stays readable */
.vm-article__head { max-width: none; }
.vm-article__stand { max-width: 72ch; }
.vm .vm-article__head h1 { text-wrap: pretty; }
.vm-supportshare { padding: 28px; margin-block: 24px 8px; }
.vm-supportshare h2 { font: 800 24px/30px var(--font-display); }
.vm-supportshare p { margin-top: 6px; }

/* Chosen charity: its logo as a faint 45° pattern behind the page, and its colour on a sticky bar */
.vm { position: relative; isolation: isolate; }
/* The chosen cause's logo, repeated on a diagonal, fading out over the last 75px before the content column. */
.vm-charitybg { display: none; position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(50% - 695px), transparent calc(50% - 620px), transparent calc(50% + 620px), #000 calc(50% + 695px));
  mask-image: linear-gradient(to right, #000 calc(50% - 695px), transparent calc(50% - 620px), transparent calc(50% + 620px), #000 calc(50% + 695px)); }
.vm-charitybg::before { content: ""; position: absolute; inset: -60vmax; background-image: var(--charity-tile, var(--charity-logo, none)); background-repeat: repeat; background-size: var(--charity-tile-size, 400px auto); background-position: center; opacity: .10; transform: rotate(-45deg); }
/* The content column: paper, a faint charity-colour edge and a soft glow in its colour. */
.vm-charitycol { display: none; position: fixed; top: 0; bottom: 0; left: 50%; width: 1240px; transform: translateX(-50%); z-index: -1; pointer-events: none; background: var(--paper);
  border-inline: 1px solid color-mix(in srgb, var(--charity) 35%, transparent); }
.vm.has-charity .vm-charitycol { display: block; }
/* Either side of the column the background fades to the page colour over the last 50px, so the pattern never touches the border. */
.vm-charitycol::before { content: ""; position: absolute; top: 0; bottom: 0; left: -51px; right: -51px; z-index: -1;
  background: linear-gradient(to right, transparent 0, var(--paper) 50px, transparent 50px, transparent calc(100% - 50px), var(--paper) calc(100% - 50px), transparent 100%); }
.vm.has-charity .vm-charitybg { display: block; }
.vm.has-charity .vm-givebar { position: sticky; top: var(--header-h, 69px); z-index: 4; background: var(--charity); color: var(--charity-ink); box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.vm.has-charity .vm-givebar__text, .vm.has-charity .vm-givebar__text a, .vm.has-charity .vm-givebar__note, .vm.has-charity .vm-givebar__action, .vm.has-charity .vm-givebar__in > .vm-ico { color: var(--charity-ink); }
.vm.has-charity .vm-givebar__note { opacity: .85; }
.vm.has-charity .vm-givebar :focus-visible { outline-color: var(--charity-ink); }
@media (prefers-reduced-motion: no-preference) { .vm-givebar { transition: background-color .25s ease, color .25s ease; } }
/* Opened from "Change": no "skip, just show me the code" (there's no code waiting) */
.vm-dialog.is-change [data-charity-skip] { display: none; }
/* Admin: store list filters */
.vm-adminfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.vm-adminfilters a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink); background: var(--surface); }
.vm-adminfilters a span { font-weight: 700; color: var(--ink-muted); }
.vm-adminfilters a[aria-current="page"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.vm-adminfilters a[aria-current="page"] span { color: #fff; opacity: .85; }
.vm-sidearticle { display: grid; gap: 10px; text-decoration: none; color: inherit; transition: box-shadow .12s ease-out; }
.vm-sidearticle__art { position: relative; display: block; aspect-ratio: 2 / 1; border-radius: var(--radius-md, 10px); overflow: hidden; background: var(--edge); }
.vm-sidearticle .vm-sidearticle__title { margin: 0; font: 800 17px/22px var(--font-display); letter-spacing: -.02em; }
@media (hover: hover) { .vm-sidearticle:hover { box-shadow: var(--shadow-lift); } .vm-sidearticle:hover .vm-sidearticle__title { text-decoration: underline; text-underline-offset: 3px; } }
/* Store stats: as many equal columns as there are boxes (empty ones are left out). */
.vm-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* Article cards and category tiles: the title is the real link, stretched over the whole card. */
.vm-card { position: relative; }
.vm-card__link { color: inherit; text-decoration: none; }
.vm-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vm-card__link:focus-visible { outline: none; }
.vm-card:has(.vm-card__link:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Share row on store pages and articles */
.vm-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.vm-share__label { font: 800 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-right: 4px; }
.vm-share a, .vm-share button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--edge); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-sans); text-decoration: none; cursor: pointer; }
@media (hover: hover) { .vm-share a:hover, .vm-share button:hover { border-color: var(--teal); color: var(--teal); } }

/* Product cards in store spotlights ("What's worth a look") */
.vm-prose .vm-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 16px 0 8px; }
.vm-prose .vm-product { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 6px; padding: 12px; border: 1px solid var(--edge); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: box-shadow .12s ease-out, transform .12s ease-out; }
@media (hover: hover) { .vm-prose .vm-product:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } }
.vm-prose .vm-product img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: var(--radius-md); background: #fff; margin: 0 0 4px; }
.vm-product__name { letter-spacing: -.01em; }
.vm-product__note { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vm-product__price { font-size: 15px; }
.vm-product__price strong { font: 800 18px/22px var(--font-display); color: var(--ink); }
.vm-product__price s { margin-left: 4px; }
.vm-product__cta { display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 4px; border-radius: var(--radius-pill); background: var(--teal); color: var(--on-teal); font: 700 14px/1 var(--font-sans); }
@media (max-width: 480px) { .vm-prose .vm-products { grid-template-columns: repeat(2, 1fr); gap: 10px; } .vm-product__note { display: none; } }

/* Give back page: room between the sections (".vm-section + .vm-section" removes it elsewhere),
   the sign-up box keeps its own padding, and "Choose" spans the card under About and Share. */
.vm-givehero + .vm-section { padding-top: var(--space-8); }
.vm-section.vm-givesignup { padding: 24px; margin-block: var(--space-4) var(--space-8); }

/* ================= Header, homepage search, carousel and brand bar (2026-10 redesign) ================= */
.vm { --teal-deep: #08504c; }

/* Thin strip above the header */
.vm-topstrip { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 6px 16px; background: var(--teal-deep); color: #fff; font: 600 13px/18px var(--font-sans); text-align: center; }
.vm-topstrip .vm-ico { width: 15px; height: 15px; color: var(--gleam); fill: var(--gleam); }
@media (max-width: 559.98px) { .vm-topstrip__more { display: none; } }

/* Header row: logo, menu, search / charity / account */
.vm-header { background: var(--surface); backdrop-filter: none; }
.vm-header__in { gap: 20px; height: 72px; }
.vm-logo { gap: 8px; color: var(--ink); }
.vm .vm-logo img { width: auto; height: 54px; }
.vm-logo__word { display: grid; font: 800 22px/20px var(--font-display); letter-spacing: -.03em; }
.vm-logo__word b { color: var(--teal); font-weight: 800; }
.vm-header__nav { align-items: center; gap: 0; }
.vm-header__nav > a, .vm-drop > a { padding-block: 8px; }
/* No dead gaps between menu items: each item's hover area runs into the next, so sweeping
   the pointer along the menu keeps a panel open. */
.vm-header__nav > a, .vm-drop { padding-inline: 11px; }
.vm-header__nav { margin-left: 12px; }
.vm-header__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.vm .vm-header__searchbtn { display: grid; margin-left: 0; border-color: transparent; }
.vm-header__searchbtn[aria-expanded="true"] { background: var(--teal-soft); color: var(--teal); }
/* Desktop header in one row: logo, menu, a compact search pill and the round account icon. The cause
   picker lives in the top bar above it. Focusing the search dims the page and drops suggestions down. */
.vm-hsearch, .vm-authlinks { display: none; }
.vm-searchshade { position: fixed; inset: 0; z-index: 4; background: var(--overlay); }
.vm-searchshade[hidden] { display: none; }
@media (min-width: 960px) {
  .vm-hsearch { display: block; order: 2; flex: 1 1 190px; min-width: 130px; max-width: 220px; margin-left: auto; }
  .vm-header__in > .vm-logo { flex: none; }
  .vm .vm-header__in { gap: 16px; }
  .vm .vm-logo img { height: 44px; }
  .vm .vm-logo__word { font-size: 19px; line-height: 18px; }
  .vm .vm-header__nav { margin-left: 4px; }
  .vm .vm-header__nav > a, .vm .vm-drop { padding-inline: 9px; }
  .vm .vm-header__nav > a, .vm .vm-drop > a { white-space: nowrap; }
  .vm-header__end { order: 3; margin-left: 0; }
  .vm .vm-header__searchbtn { display: none; }
  .vm-hsearch .vm-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 4px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
  .vm-hsearch .vm-search > .vm-ico { flex: none; width: 18px; height: 18px; color: var(--ink-muted); }
  .vm-hsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15px/20px var(--font-sans); color: var(--ink); }
  .vm-hsearch input::-webkit-search-cancel-button { display: none; }
  .vm-hsearch__close { display: none; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; }
  .vm-hsearch__close .vm-ico { width: 16px; height: 16px; }
  .vm-header.is-searching .vm-header__nav { display: none; }
  .vm-header.is-searching .vm-hsearch { flex: 1 1 auto; max-width: none; margin-left: 24px; }
  .vm-header.is-searching .vm-hsearch .vm-search { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
  .vm-header.is-searching .vm-hsearch .vm-search > .vm-ico { color: var(--teal); }
  .vm-header.is-searching .vm-hsearch__close { display: grid; }
}
/* The cause bar as the top bar: deep teal with the message, or the cause's own colour once one is chosen. */
.vm.vm.vm .vm-givebar { position: relative; top: auto; z-index: 6; box-shadow: none; }
.vm:not(.has-charity) .vm-givebar { background: var(--teal-deep); border-bottom: 0; color: #fff; }
.vm-givebar__in--off { min-height: 44px; }
.vm-givebar__in--off > .vm-ico { color: var(--gleam); fill: var(--gleam); }
.vm-givebar__in--off .vm-givebar__text b { color: #fff; }
.vm-givebar__in--off .vm-givebar__note { color: rgba(255,255,255,.88); }
.vm .vm-givebar__in--off .vm-givebar__btn { border: 1px solid rgba(255,255,255,.7); }
@media (max-width: 380px) { .vm .vm-logo img { height: 36px; } .vm-logo__word { font-size: 17px; line-height: 15px; } }
/* The full menu needs more room than before: the menu button stays until 1100px. */
@media (min-width: 960px) and (max-width: 1099.98px) {
  .vm .vm-header__nav { display: none; }
  .vm-header .vm-menubtn { display: grid !important; }
  .vm-header .vm-mobilenav:not([hidden]) { display: grid !important; }
}
@media (min-width: 1100px) { .vm-header .vm-menubtn { display: none !important; } }

/* Drop-down menus: open on hover, or with the chevron button (keyboard and touch) */
.vm-drop { position: relative; display: flex; align-items: center; gap: 2px; }
.vm-drop__btn { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-muted); cursor: pointer; }
.vm-drop__btn .vm-ico { width: 16px; height: 16px; transition: transform .15s ease-out; }
.vm-drop__panel { display: none; position: absolute; z-index: 30; top: calc(100% + 12px); left: -18px; min-width: 240px; padding: 16px; gap: 12px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.vm-drop__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.vm-drop[data-open] .vm-drop__panel { display: grid; }
.vm-drop[data-open] .vm-drop__btn .vm-ico { transform: rotate(180deg); }
@media (hover: hover) { .vm-drop:hover .vm-drop__panel { display: grid; } }
.vm-drop__panel .vm-link { justify-self: start; font-size: 14px; }

/* Search row that drops down under the header */
.vm-headsearch { padding: 12px 0 16px; border-top: 1px solid var(--edge); background: var(--surface); }
.vm-headsearch .vm-search { max-width: 720px; margin: 0 auto; }

/* Homepage: intro, big search, carousel, brand bar */
.vm-homehead { padding-block: 24px 8px; }
.vm-homehead__intro { display: grid; gap: 6px; }
.vm-homehead h1 { font: 800 30px/34px var(--font-display); letter-spacing: -.03em; }
.vm-homehead h1 em { font-style: normal; color: var(--teal); }
.vm-homehead__intro p { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.vm-homesearch { height: 60px; margin-top: 18px; padding-left: 20px; border: 1.5px solid var(--edge); border-radius: var(--radius-md); box-shadow: var(--shadow-rest); }
.vm-homesearch .vm-ico { width: 20px; height: 20px; }
.vm .vm-homesearch .vm-btn { min-height: 48px; padding: 0 24px; border-radius: 10px; font-size: 15px; }
@media (min-width: 760px) { .vm-homehead { padding-top: 32px; } .vm-homehead h1 { font-size: 40px; line-height: 44px; } }

.vm-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.vm-slide__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.vm-slide__copy { position: relative; display: grid; gap: 10px; align-content: start; justify-items: start; padding: 20px 20px 64px; }
.vm-slide__logo { display: flex; align-items: center; justify-content: center; height: 64px; min-width: 64px; max-width: 220px; padding: 8px 12px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.vm-slide__logo img { display: block; height: 100%; width: auto; max-width: 196px; object-fit: contain; }
.vm-slide__logo b { font: 800 18px/1 var(--font-display); }
.vm .vm-slide__title { font: 800 26px/30px var(--font-display); letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.vm-slide__sub { font-size: 16px; line-height: 22px; opacity: .9; }
.vm .vm-slide__cta { margin-top: 6px; min-height: 48px; border-radius: var(--radius-pill); padding: 0 22px; }
.vm-slide__cta .vm-ico { width: 18px; height: 18px; }
.vm-slide__badge { display: none; }
@media (min-width: 760px) {
  .vm-slide { display: block; min-height: 380px; }
  .vm-slide__photo { position: absolute; top: 0; right: 0; width: 64%; height: 100%; aspect-ratio: auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 28%); mask-image: linear-gradient(to right, transparent, #000 28%); }
  .vm-slide__copy { width: 52%; min-height: 380px; align-content: center; gap: 12px; padding: 40px 0 56px 48px; }
  .vm .vm-slide__title { font-size: 38px; line-height: 42px; }
  .vm-slide__sub { font-size: 18px; line-height: 26px; }
  .vm-slide__badge { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); display: grid; place-content: center; justify-items: center; gap: 2px; width: 136px; height: 136px; border-radius: 50%; background: rgba(8, 80, 76, .88); color: #fff; font: 600 14px/18px var(--font-sans); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
  .vm-slide__badge b { display: block; font: 800 16px/19px var(--font-display); }
  .vm-slide__badge .vm-ico { width: 20px; height: 20px; color: var(--gleam); fill: var(--gleam); margin-top: 4px; }
}
@media (min-width: 1100px) { .vm-slide, .vm-slide__copy { min-height: 400px; } .vm .vm-slide__title { font-size: 42px; line-height: 46px; } .vm-slide__copy { width: 46%; } }

.vm-homehead .vm-wrap > * { min-width: 0; }

/* Footer logo on the dark footer */
.vm-foot__brand .vm-logo__word { color: #fff; }
.vm-foot__brand .vm-logo__word b { color: #3fd0a4; }
/* Charity bar now only shows once a charity is chosen (the strip above the header covers the rest) */
.vm:not(.has-charity) .vm-givebar { position: sticky; top: var(--header-h, 69px); z-index: 4; }
.vm-foot__brand .vm-logo img { box-sizing: content-box; padding: 4px 8px; background: #fff; border-radius: 12px; }

/* Code cards: a bigger store logo, and a way to every code from that store */
.vm-ticket__store { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; }
.vm-ticket__storelink { gap: 10px; font: 700 15px/20px var(--font-sans); color: var(--ink); }
.vm-ticket__storelink i { width: 56px; height: 56px; border-radius: 12px; font-size: 16px; }
.vm-ticket__storelink .vm-logoimg { padding: 4px !important; }
.vm-ticket__storelink { font-size: 16px; }
.vm-ticket__all { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; font: 700 13px/18px var(--font-sans); color: var(--teal); text-decoration: none; white-space: nowrap; }
.vm-ticket__all .vm-ico { width: 15px; height: 15px; }
.vm-ticket__all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* One badge per ticket ("Hottest" when there's nothing else to say) */
.vm-badge--hot { background: #fff1c2; color: #7a4b00; }
/* Ticket grids: every card the same height; long titles end in "…" (full title on hover) */
.vm-grid-tickets > .vm-ticket, .vm-grid-tickets > .vm-ticket > .vm-ticket__in { height: 100%; }
.vm-grid-tickets .vm-ticket__body { align-content: center; }
.vm-grid-tickets .vm-ticket__text { min-width: 0; }
.vm-grid-tickets .vm-ticket__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-grid-tickets .vm-ticket__meta { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
/* Store pages: each code's evidence in one line (status, when and by whom it was checked, source) */
.vm-ticket__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vm-ticket__proof b { color: var(--ink); font-weight: 700; }
.vm-ticket__proof .vm-ico { width: 14px; height: 14px; color: var(--teal); }
.vm-ticket__proof .vm-ico + b { color: var(--teal); }
.vm-ticket { scroll-margin-top: 120px; }
.vm-ticket:target { filter: drop-shadow(0 0 2px var(--gleam)) drop-shadow(0 0 8px var(--gleam)); }
/* Author pages: full width, bio beside qualifications and contact */
.vm-authorgrid { display: grid; gap: 24px; margin-top: 28px; align-items: start; }
@media (min-width: 960px) { .vm-authorgrid { grid-template-columns: minmax(0, 1fr) var(--sidebar); } }
.vm-authorgrid .vm-authorbio { max-width: none; margin-top: 0; }
.vm-authorgrid .vm-side { gap: 16px; }
.vm-authorgrid .vm-tips { font-size: 14px; line-height: 21px; }
.vm-authorlinks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.vm-authorlinks a { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; color: var(--teal); font-weight: 600; font-size: 15px; }
.vm-authorlinks .vm-ico { width: 14px; height: 14px; }
.vm-howwework .vm-help { margin-top: 4px; }
.vm-howwework .vm-tips b { color: var(--ink); }
/* Newsletter preferences */
.vm-prefs { display: grid; gap: 16px; }
.vm-prefs .vm-panel h2 { font: 700 20px/26px var(--font-display); margin-bottom: 4px; }
.vm-prefs .vm-panel > p { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.vm-prefs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; }
.vm-prefs__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--surface); font-weight: 600; cursor: pointer; }
.vm-prefs__opt:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.vm-prefs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vm-prefs__find { margin: 12px 0; max-width: 420px; }
.vm-prefs__brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; padding: 2px; }
.vm-prefs__bar { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
/* Store pages: the charity note above the codes, and "Why use Voucher Magpie?" after them */
.vm-givenote { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-md); background: var(--teal-soft); font-size: 14px; line-height: 21px; }
.vm-givenote > .vm-ico { width: 18px; height: 18px; margin-top: 2px; color: var(--teal); fill: var(--teal); flex: none; }
.vm-givenote a { color: var(--teal); font-weight: 700; }
.vm-whyvm { display: grid; gap: 10px; margin-top: var(--space-6); }
.vm-whyvm h2 { font: 700 20px/26px var(--font-display); }
.vm-whyvm p { font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.vm-whyvm .vm-link { font-size: 14px; }
/* Footer follow links */
.vm-foot__social { display: flex; gap: 10px; margin-top: 18px !important; }
.vm-foot__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; }
.vm-foot__social a:hover { background: var(--teal); }
.vm-foot__social .vm-ico { width: 18px; height: 18px; }

/* ---------- fundraising pack for clubs, schools and groups ---------- */
.vm-pack h2 { font: 700 22px/28px var(--font-display); }
.vm-pack__text { margin: 0; padding: 12px 14px; white-space: pre-wrap; font: 14px/21px var(--font-sans); background: var(--surface-sunk); border-radius: var(--radius-md); }
.vm-pack__duo { display: grid; gap: 32px; }
@media (min-width: 900px) { .vm-pack__duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.vm-pack__duo .vm-poster { width: 100%; }
.vm-pack__print { margin-top: 16px; }
.vm .vm-pack__duo .vm-pack__print { display: flex; justify-content: center; width: 100%; min-height: 52px; font-size: 16px; }
.vm-pack__tips { display: grid; gap: 16px; }

.vm-clubcta { display: grid; gap: 16px; align-items: center; border-color: var(--teal); border-width: 1.5px; }
.vm-clubcta h2 { font: 700 24px/30px var(--font-display); margin: 6px 0 8px; }
@media (min-width: 900px) { .vm-clubcta { grid-template-columns: 1fr auto; padding: 28px 32px; } }
.vm-supporthero__credit { margin-top: 6px; font-size: 12px; opacity: .8; text-align: right; }
/* Charity and club pickers (give back page and the "choose" pop-up) */
.vm-picker { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 16px; }
.vm-picker__search { flex: 1 1 280px; max-width: 520px; }
.vm-picker--dialog { padding: 12px var(--space-5) 0; margin: 0; }
.vm-picker--dialog .vm-picker__search { max-width: none; }
.vm-dialog[open] { grid-template-rows: auto auto auto 1fr auto; }
.vm-charity--btn[hidden] { display: none !important; }
/* Initials-only logos (no badge yet) need a ring to stand out on the teal hero */
.vm-supporthero__charity .vm-charity__logo:not(.vm-charlogo) { box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.2); }
/* Initials-only badges on the coloured charity bar and the support hero: white disc, readable letters */
.vm-givebar__logo { width: 32px; height: 32px; font: 800 12px/1 var(--font-display); letter-spacing: -.02em; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.vm-supporthero__charity .vm-charity__logo:not(.vm-charlogo) { background: #fff !important; color: var(--teal) !important; }
/* Club About page: three clear next steps, each with its own button */
.vm-actioncards { display: grid; gap: 12px; margin: 4px 0 8px; }
@media (min-width: 700px) { .vm-actioncards { grid-template-columns: repeat(3, 1fr); } }
.vm-actioncard { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 20px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg); font-size: 15px; line-height: 22px; }
.vm-actioncard__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gleam); color: var(--on-gleam); font: 800 14px/1 var(--font-display); }
.vm-actioncard b { font: 700 17px/22px var(--font-display); color: var(--ink); }
.vm-actioncard p { margin: 0; color: var(--ink-muted); }
.vm-actioncard .vm-btn { width: 100%; margin-top: 6px; text-decoration: none; }
/* Club and charity share page: one clear action, sign-up as an optional extra */
.vm-supportchoose { margin-top: 24px; display: grid; gap: 8px; max-width: 520px; }
.vm .vm-supportchoose__btn { min-height: 56px; font-size: 17px; border-radius: var(--radius-pill); }
.vm-supportmore { margin-top: 18px; max-width: 520px; border-top: 1px solid rgba(255,255,255,.25); padding-top: 14px; }
.vm-supportmore summary { cursor: pointer; font-weight: 700; color: #fff; }
.vm-supportform--small { margin-top: 12px; }

/* ================= Mega menu ================= */
/* Each drop-down opens as a full-width panel under the header; the menu items stretch to the
   header's bottom edge so the pointer never crosses a gap on its way into the panel. */
@media (min-width: 1100px) {
  .vm-header__nav { align-self: stretch; }
  .vm-header__nav > a, .vm-drop { display: flex; align-items: center; height: 100%; }
  .vm-drop { position: static; }
  .vm-drop > a { position: relative; }
  .vm-drop[data-open] > a, .vm-drop:hover > a { color: var(--teal); }
}
.vm-mega.vm-drop__panel { left: 0; right: 0; top: 100%; width: auto; min-width: 0; padding: 0; gap: 0; border-radius: 0 0 24px 24px; border: 0; border-top: 1px solid var(--edge); background: var(--surface); box-shadow: 0 28px 60px rgba(17,20,24,.16), 0 2px 6px rgba(17,20,24,.06); }
.vm-mega.vm-drop__panel::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .vm-drop[data-open] .vm-mega, .vm-drop:hover .vm-mega { animation: vm-mega-in .18s ease-out; }
  @keyframes vm-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
.vm-mega__in { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; max-width: var(--content-max); margin: 0 auto; padding: 28px 24px 32px; }
.vm-mega__intro { position: relative; overflow: hidden; display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 20px; background: linear-gradient(150deg, var(--teal) 0%, #08504c 100%); color: #fff; }
.vm-mega__intro::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; border: 28px solid rgba(255,255,255,.07); pointer-events: none; }
.vm-mega__intro .vm-eyebrow { color: var(--gleam); }
.vm-mega__intro b { font: 800 22px/27px var(--font-display); letter-spacing: -.02em; }
.vm-mega__intro p { font-size: 14px; line-height: 21px; opacity: .9; }
.vm-mega__intro .vm-btn { justify-self: start; margin-top: 6px; position: relative; z-index: 1; }
.vm-mega__mine { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.12); }
.vm-mega__az { grid-template-columns: repeat(9, 1fr); position: relative; z-index: 1; }
.vm-mega__head { margin-bottom: 12px; font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.vm-mega__logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.vm-mega__logos a { display: grid; gap: 8px; justify-items: center; padding: 12px 8px 10px; border: 1px solid var(--edge); border-radius: 16px; text-decoration: none; color: var(--ink); font: 600 13px/17px var(--font-sans); text-align: center; transition: transform .15s ease-out, box-shadow .15s ease-out, border-color .15s; }
.vm-mega__logos a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-mega__logos a:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--shadow-lift); }
.vm-mega__logo { display: grid; place-items: center; width: 100%; height: 56px; border-radius: 10px; overflow: hidden; }
.vm-mega__logo img { max-width: 80%; max-height: 40px; object-fit: contain; }
.vm-mega__logo b { font: 800 16px/1 var(--font-display); }
.vm-mega__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vm-mega__cats a { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border-radius: 16px; background: var(--paper); border: 1px solid transparent; text-decoration: none; color: var(--ink); transition: background-color .15s, border-color .15s, transform .15s ease-out; }
.vm-mega__cats a:hover { background: var(--teal-soft); border-color: rgba(11,110,105,.25); transform: translateY(-2px); }
.vm-mega__cats b { font: 700 16px/21px var(--font-display); }
.vm-mega__cats span { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vm-mega__cats i { font: 700 12px/16px var(--font-sans); font-style: normal; color: var(--teal); }
.vm-mega__main--give { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; }
.vm-mega__causes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.vm-mega__causes a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--ink); font: 600 14px/18px var(--font-sans); }
.vm-mega__causes a:hover { background: var(--teal-soft); }
.vm-mega__causes small { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.vm-mega__causes .vm-charity__logo { flex: none; }
.vm-mega__promo { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: #fff7d6; border: 1px solid #f5d76e; }
.vm-mega__promo b { font: 700 15px/20px var(--font-display); }
.vm-mega__promo p { font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.vm-mega__promo .vm-btn { justify-self: start; margin-top: 4px; }
.vm-mega .vm-link { font-size: 14px; }
.vm-drop[data-open] .vm-mega, .vm-drop:hover .vm-mega { display: block; }
.vm-mega__in { width: 100%; box-sizing: border-box; }
.vm-mega__cats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* News mega menu: sections, then the latest stories with photos */
.vm-mega__main--news { display: grid; grid-template-columns: 220px 1fr; gap: 28px; }
.vm-mega__sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vm-mega__sections a { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); font: 600 15px/20px var(--font-sans); }
.vm-mega__sections a:hover { background: var(--teal-soft); color: var(--teal); }
.vm-mega__sections .vm-ico { width: 16px; height: 16px; color: var(--ink-muted); }
.vm-mega__stories { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vm-mega__stories a { display: grid; gap: 6px; text-decoration: none; color: var(--ink); }
.vm-mega__thumb { display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--teal-soft); }
.vm-mega__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease-out; }
.vm-mega__stories a:hover img { transform: scale(1.04); }
.vm-mega__kick { font: 700 12px/16px var(--font-sans); color: var(--teal); }
.vm-mega__stories b { font: 700 15px/20px var(--font-display); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vm-mega__stories a:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* Mega menu: the intro card and the content beside it are always the same height */
.vm-mega__in { align-items: stretch; }
.vm-mega__main:not(.vm-mega__main--give):not(.vm-mega__main--news):not(.vm-mega__main--ext) { display: flex; flex-direction: column; min-height: 100%; }
.vm-mega__logos { flex: 1; grid-auto-rows: 1fr; }
.vm-mega__logos a { align-content: center; }
.vm-mega__az { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 14px; }
.vm-mega__az span { margin-right: 8px; font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.vm-mega__az a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--paper); color: var(--ink); font: 700 12px/1 var(--font-display); text-decoration: none; }
.vm-mega__az a:hover { background: var(--teal); color: #fff; }
.vm-mega__in > .vm-mega__az { grid-column: 1 / -1; flex-wrap: nowrap; justify-content: space-between; margin-top: -12px; padding-top: 14px; border-top: 1px solid var(--line); }
.vm-mega__in > .vm-mega__az a { flex: 1; max-width: 34px; }
/* Charity and club About pages: choose card, step cards, "raise more" band */
.vm-choosecard { padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow-rest); gap: 10px; }
.vm-choosecard__kick { display: flex; align-items: center; gap: 6px; font: 700 13px/18px var(--font-sans); color: var(--teal); }
.vm-choosecard__kick .vm-ico { width: 15px; height: 15px; fill: var(--teal); }
.vm .vm-choosecard .vm-btn { font-size: 16px; }
.vm-choosecard.is-chosen .vm-btn { background: var(--teal); border-color: var(--teal); color: #fff; }
.vm-choosecard small { text-align: center; }
.vm-choosecard .vm-charshare { justify-self: center; gap: 6px; text-decoration: none; }
.vm-choosecard .vm-charshare .vm-ico { width: 15px; height: 15px; }
.vm-prose .vm-howsteps { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 12px; counter-reset: hs; }
@media (min-width: 700px) { .vm-prose .vm-howsteps { grid-template-columns: repeat(3, 1fr); } }
.vm-howsteps li { counter-increment: hs; display: grid; align-content: start; gap: 6px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--edge); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.vm-howsteps li::before { content: counter(hs); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font: 800 14px/1 var(--font-display); }
.vm-howsteps b { font: 700 16px/21px var(--font-display); color: var(--ink); }
.vm-raiseband { margin-top: 12px; padding: 24px; border-radius: 24px; background: var(--teal-soft); }
.vm-raiseband h2 { margin-top: 0 !important; margin-bottom: 14px; }
.vm-raiseband .vm-actioncard { border-color: transparent; box-shadow: var(--shadow-rest); }
.vm-actioncard .vm-btn { white-space: nowrap; border-radius: var(--radius-pill); }
.vm-mega__mine { display: flex; align-items: center; gap: 8px; font-size: 13px !important; line-height: 18px !important; opacity: 1 !important; }
.vm-mega__mine .vm-ico { width: 16px; height: 16px; flex: none; color: var(--gleam); fill: var(--gleam); }
.vm-mega__mine strong { font-weight: 700; }
/* About pages: "How your shopping helps" and "raise more" run the full page width */
.vm-fullhelp { display: grid; gap: 14px; padding-top: 8px; }
.vm-fullhelp > h2 { font: 700 26px/32px var(--font-display); letter-spacing: -.02em; }
.vm-fullhelp > p { font-size: 17px; line-height: 27px; }
.vm-fullhelp .vm-howsteps { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 14px; counter-reset: hs; }
@media (min-width: 700px) { .vm-fullhelp .vm-howsteps, .vm-fullhelp .vm-actioncards { grid-template-columns: repeat(3, 1fr); } }
.vm-fullhelp .vm-raiseband { margin-top: 16px; padding: 28px; }
.vm-fullhelp .vm-raiseband h2 { font: 700 24px/30px var(--font-display); }
/* About page header: description, fact chips and running totals beside the choose card */
.vm-charintro { min-width: 0; display: grid; gap: 12px; flex: 1 1 380px; }
.vm-charintro__blurb { font-size: 17px; line-height: 26px; color: var(--ink-muted); max-width: 60ch; }
.vm-charintro__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vm-charintro__chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--edge); font: 600 13px/18px var(--font-sans); color: var(--ink); text-decoration: none; }
.vm-charintro__chip--main { background: var(--teal-soft); border-color: transparent; color: var(--teal); }
a.vm-charintro__chip:hover { border-color: var(--teal); color: var(--teal); }
.vm-charintro__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.vm-charintro__stats div { min-width: 130px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--edge); }
.vm-charintro__stats b { display: block; font: 800 24px/28px var(--font-display); color: var(--teal); letter-spacing: -.02em; }
.vm-charintro__stats span { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.vm-charhero__body { align-items: flex-start !important; }
.vm-charhero__body .vm-charchoose { margin-top: 0; }

/* ---------- A4 poster (fundraising pack) ----------
   Laid out in units of the poster's own width (cqw), so the preview and the printed A4 page match. */
.vm-poster { container-type: inline-size; width: min(100%, 620px); aspect-ratio: 210 / 297; margin: 0 auto; display: grid; grid-template-rows: 26% 1fr auto; overflow: hidden; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 20px 50px rgba(17,20,24,.18); }
.vm-poster__photo { position: relative; background: linear-gradient(135deg, var(--teal), #08504c); }
.vm-poster__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-poster__badge { position: absolute; right: 5cqw; bottom: -9cqw; width: 22cqw; height: 22cqw; border-radius: 50%; display: grid; place-content: center; text-align: center; padding: 2cqw; background: var(--gleam); color: var(--on-gleam); font: 700 2.1cqw/1.2 var(--font-sans); box-shadow: 0 1.5cqw 4cqw rgba(0,0,0,.25); transform: rotate(-6deg); }
.vm-poster__badge b { display: block; font: 800 7cqw/1 var(--font-display); letter-spacing: -.03em; }
.vm-poster__main { display: grid; align-content: space-evenly; gap: 2cqw; padding: 5cqw 6cqw 3cqw; min-height: 0; }
.vm-poster__kicker { font: 800 3.6cqw/1.2 var(--font-display); color: var(--teal); text-transform: uppercase; letter-spacing: .04em; max-width: 70cqw; }
.vm .vm-poster__name { font: 800 8cqw/1 var(--font-display); letter-spacing: -.035em; color: var(--ink); max-width: 72cqw; }
.vm-poster__lede { font-size: 2.6cqw; line-height: 1.4; color: var(--ink-muted); max-width: 80cqw; }
.vm-poster__how { display: grid; grid-template-columns: 30cqw 1fr; gap: 4cqw; align-items: center; margin-top: 1cqw; padding: 3.2cqw; border-radius: 3cqw; background: var(--teal-soft); }
.vm-poster__qr { display: grid; gap: 1cqw; justify-items: center; padding: 2cqw; border-radius: 2.5cqw; background: #fff; box-shadow: 0 1cqw 3cqw rgba(17,20,24,.08); }
.vm-poster__qr canvas { width: 100%; height: auto; display: block; }
.vm-poster__qr span { font: 800 2.6cqw/1 var(--font-display); color: var(--teal); text-transform: uppercase; letter-spacing: .08em; }
.vm-poster__how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2cqw; counter-reset: ps; }
.vm-poster__how li { counter-increment: ps; position: relative; padding-left: 7.5cqw; font-size: 2.35cqw; line-height: 1.35; color: var(--ink-muted); word-break: break-word; }
.vm-poster__how li::before { content: counter(ps); position: absolute; left: 0; top: 0; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font: 800 2.8cqw/1 var(--font-display); }
.vm-poster__how li b { display: block; font: 700 2.9cqw/1.25 var(--font-display); color: var(--ink); }
.vm-poster__foot { display: flex; align-items: center; gap: 3cqw; padding: 3cqw 6cqw; background: var(--teal); color: #fff; }
.vm-poster__foot img { height: 10cqw; width: auto; padding: 1.2cqw 1.8cqw; border-radius: 2cqw; background: #fff; }
.vm-poster__foot b { display: block; font: 800 5.2cqw/1 var(--font-display); letter-spacing: -.03em; }
.vm-poster__foot b span { color: #7fe0c4; }
.vm-poster__foot small { display: block; margin-top: 1cqw; font-size: 2.3cqw; opacity: .9; }
@media print {
  @page { size: A4 portrait; margin: 0; }
  .vm-poster { width: 210mm !important; height: 297mm; max-width: none; border-radius: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Printing the pack page prints just the poster, on one sheet. */
  body:has(.vm-pack) *:not(:has(.vm-poster)):not(.vm-poster):not(.vm-poster *) { display: none !important; }
  body:has(.vm-pack) :has(.vm-poster) { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
}

/* Search fields: one soft focus ring on the pill, none on the input inside it, and a quiet clear button. */
.vm .vm-search input:focus-visible { outline: none; }
.vm-search { transition: border-color .15s, box-shadow .15s; }
.vm-search:focus-within { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.vm-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; cursor: pointer; border-radius: 50%; background: var(--surface-sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 10px no-repeat; }
.vm-picker__search { height: 48px; box-shadow: var(--shadow-rest); }
.vm-picker__search:focus-within { box-shadow: 0 0 0 4px var(--teal-soft), var(--shadow-rest); }

/* The charity card button once that charity is picked: greyed out, not another call to action. */
.vm-btn--current, .vm-btn--current:hover { background: var(--surface-sunk); color: var(--ink-muted); border: 1px solid var(--edge); box-shadow: none; cursor: default; }

/* Desktop: search is the round icon in the menu row; it opens a search bar under the header
   (the homepage has its own big one). Keeping it closed keeps the header to one clean unit, so
   the breadcrumb and title sit higher on store, category and news pages. */
@media (min-width: 960px) {
  .vm-headsearch .vm-search { max-width: 720px; height: 52px; padding-left: 20px; border: 1px solid var(--edge); box-shadow: var(--shadow-rest); }
  .vm-headsearch .vm-search input { font-size: 16px; }
  .vm-headsearch .vm-search .vm-btn { min-height: 42px; padding: 0 24px; }
}
/* The search bar sits under the sticky header and charity bar, so its suggestions stay above the
   page but below the menus (and the mega menus open over them). */
.vm-headsearch { position: relative; z-index: 3; }
/* Under an article, once the sidebar has ended: share, codes and the author box run full width. */
.vm-article__after { display: grid; gap: 24px; margin-top: 32px; }
.vm-article__after > * { margin: 0; }

/* ================= Categories index: one full-width row per category ================= */
.vm-catjump { flex-wrap: wrap; margin: 4px 0 24px; }
.vm-catjump .vm-chip { min-height: 36px; font-size: 13px; }
.vm-catrows { display: grid; gap: 20px; }
.vm-catrow { display: grid; gap: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); scroll-margin-top: calc(var(--header-h, 72px) + 60px); }
@media (min-width: 1000px) { .vm-catrow { grid-template-columns: 260px minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.vm-catrow__intro { display: grid; gap: 10px; align-content: start; }
.vm-catrow__intro h2 { font: 800 26px/30px var(--font-display); letter-spacing: -.02em; }
.vm-catrow__intro h2 a { color: var(--ink); text-decoration: none; }
.vm-catrow__intro h2 a:hover { color: var(--teal); }
.vm-catrow__intro p { color: var(--ink-muted); font-size: 14px; line-height: 21px; }
.vm-catrow__stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-muted); }
.vm-catrow__stats b { color: var(--teal); font: 800 18px/1 var(--font-display); margin-right: 2px; }
.vm-catrow__intro .vm-btn { justify-self: start; margin-top: 4px; }
.vm-catrow__head { margin-bottom: 10px; font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.vm .vm-catrow__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vm-catrow__logos .vm-mega__logo { height: 48px; }
.vm-catcodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vm-catcodes a { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border: 1px solid var(--edge); border-radius: 14px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s ease-out; }
.vm-catcodes a:hover { border-color: var(--teal); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.vm-catcodes__big { display: grid; place-items: center; align-content: center; height: 56px; border-radius: 10px; background: var(--teal-soft); color: var(--teal); font: 800 18px/1 var(--font-display); text-align: center; overflow: hidden; }
.vm-catcodes__big small { display: block; margin-top: 3px; font: 700 10px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.vm-catcodes__text { display: grid; gap: 2px; min-width: 0; }
.vm-catcodes__text b { font: 700 14px/18px var(--font-sans); }
.vm-catcodes__text span { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vm-catcodes__go { padding: 7px 12px; border-radius: var(--radius-pill); background: var(--teal); color: #fff; font: 700 12px/1 var(--font-sans); white-space: nowrap; }
.vm-cattips { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width: 1000px) { .vm-cattips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vm-cattips h3 { font: 700 16px/21px var(--font-display); margin-bottom: 6px; }
.vm-cattips p { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.vm-pagehead--wide p { max-width: none; }
/* Category page: the top four stores' logos as the hero tile, and links to the other categories. */
.vm-catlogos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; background: var(--surface) !important; border: 1px solid var(--edge); }
.vm-catlogos span { display: grid; place-items: center; border-radius: 8px; overflow: hidden; }
.vm-catlogos img { width: 80%; height: 80%; object-fit: contain; }
.vm-catlogos b { grid-column: 1 / -1; display: grid; place-items: center; font: 800 24px/1 var(--font-display); color: var(--teal); }
.vm-catlinks { display: flex; flex-wrap: wrap; gap: 8px; }
.vm-catlinks a { padding: 6px 12px; border: 1px solid var(--edge); border-radius: var(--radius-pill); font: 600 13px/18px var(--font-sans); color: var(--ink); text-decoration: none; }
.vm-catlinks a:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
/* Coming soon pages */
@media (min-width: 900px) { .vm-soonhero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; padding: 40px; } }
.vm-soonhero h1 { max-width: 20ch; }
.vm-soonhero__form { display: grid; gap: 8px; padding: 20px; border-radius: var(--radius-lg); background: rgba(255,255,255,.1); }
.vm-soonhero__form b { font: 700 18px/24px var(--font-display); }
.vm-soonhero__form p { font-size: 14px; line-height: 20px; }
.vm-soonhero__form input[type=email] { width: 100%; }
.vm-soonfeatures { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vm-soonfeatures .vm-panel { display: grid; gap: 8px; align-content: start; }
.vm-soonfeatures h3 { font: 700 17px/22px var(--font-display); }
.vm-soonfeatures p { color: var(--ink-muted); font-size: 14px; line-height: 21px; }
.vm-soonfeatures__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); }
.vm-soonfeatures__icon .vm-ico { width: 22px; height: 22px; }

/* The charity bar's button: where you pick or change your charity or club (it was in the header). */
.vm-givebar__btn { gap: 4px; padding: 5px 12px; border: 1px solid currentColor; border-radius: var(--radius-pill); text-decoration: none; font-size: 13px; }
.vm-givebar__btn .vm-ico { width: 14px; height: 14px; }
.vm-givebar__btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.vm-givebar__in--off .vm-givebar__btn { background: var(--teal); border-color: var(--teal); color: #fff; }
.vm-givebar__in--off .vm-givebar__btn:hover { background: #095c58; }
/* Coming-soon menu items: the menu is shorter on smaller laptops, where they live in the footer and phone menu. */
@media (max-width: 1239.98px) { .vm-header__nav .vm-drop--soon { display: none; } }
.vm-mega__soon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vm-mega__soon a { display: grid; gap: 8px; align-content: start; height: 100%; padding: 16px; border-radius: 16px; background: var(--paper); text-decoration: none; color: var(--ink); transition: background-color .15s, transform .15s ease-out; }
.vm-mega__soon a:hover { background: var(--teal-soft); transform: translateY(-2px); }
.vm-mega__soon b { font: 700 16px/21px var(--font-display); }
.vm-mega__soon a > span:last-child { font-size: 13px; line-height: 19px; color: var(--ink-muted); }
/* Category pages: after the sidebar, codes and deals run full width, two to a row. */
.vm-catmore { margin-top: 16px; }
@media (min-width: 900px) { .vm-catmore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.vm-catmore__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 20px; font-size: 14px; }
.vm-catmore__foot .vm-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
@media (min-width: 1100px) { .vm-catall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Header icons: sign in as a round account icon, and a round search button, so "Change" is the only labelled button. */
.vm .vm-acctchip--signin { width: 42px; height: 42px; min-height: 0; padding: 0; justify-content: center; }
.vm-acctchip--signin .vm-ico { width: 20px; height: 20px; }
.vm .vm-headsearch .vm-search { padding-left: 22px; }
.vm .vm-headsearch .vm-search__iconbtn { width: 42px; min-height: 42px; height: 42px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.vm-search__iconbtn .vm-ico { width: 20px; height: 20px; color: #fff; }
/* Charity About page hero: the logo sits on the photo's edge, the name and details line up with the
   page's left edge, and the support card lines up with the sidebar below it. */
.vm .vm-charhero__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; margin: 0; padding: 0; align-items: start !important; }
.vm .vm-charhero__body > .vm-charity__logo { margin: -56px 0 0 24px; align-self: start; }
.vm .vm-charhero__body .vm-charchoose { margin: 0; min-width: 0; }
@media (min-width: 960px) {
  .vm .vm-charhero__body { grid-template-columns: minmax(0, 1fr) var(--sidebar); }
  .vm .vm-charhero__body > .vm-charity__logo { grid-column: 1; grid-row: 1; }
  .vm .vm-charhero__body .vm-charintro { grid-column: 1; grid-row: 2; }
  .vm .vm-charhero__body .vm-charchoose { grid-column: 2; grid-row: 1 / span 2; margin-top: 20px; }
}

/* ================= Fundraising pack ================= */
.vm-packhero { display: grid; gap: 20px 32px; margin: 8px 0 24px; padding: 28px; border-radius: var(--radius-lg); background: var(--club, var(--teal)); color: var(--club-ink, #fff); box-shadow: var(--shadow-rest); }
@media (min-width: 960px) { .vm-packhero { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; padding: 36px 40px; } }
.vm-packhero__main { display: flex; gap: 22px; align-items: flex-start; }
.vm-packhero__main > .vm-charity__logo { flex: none; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.35); }
.vm-packhero__eyebrow { display: inline-block; margin-bottom: 6px; font: 700 12px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.vm-packhero h1 { font: 800 clamp(30px, 4vw, 42px)/1.05 var(--font-display); letter-spacing: -.03em; color: inherit; }
.vm-packhero p { margin-top: 10px; max-width: 62ch; font-size: 16px; line-height: 24px; opacity: .92; }
.vm-packhero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vm-packhero__stats div { padding: 14px 16px; border-radius: var(--radius-md); background: rgba(255,255,255,.14); }
.vm-packhero__stats b { display: block; font: 800 26px/30px var(--font-display); letter-spacing: -.02em; }
.vm-packhero__stats span { font-size: 12px; line-height: 16px; opacity: .85; }
.vm-packhero__stats small { grid-column: 1 / -1; font-size: 12px; line-height: 17px; opacity: .8; }
.vm-packhero__nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); }
.vm-packhero__nav a { padding: 6px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); color: inherit; font: 600 13px/18px var(--font-sans); text-decoration: none; }
.vm-packhero__nav a:hover { background: rgba(255,255,255,.26); }
.vm-pack h2[id], .vm-pack section[id] { scroll-margin-top: calc(var(--header-h, 72px) + 60px); }
.vm-packlinkbox { display: grid; gap: 24px; align-items: center; }
@media (min-width: 800px) { .vm-packlinkbox { grid-template-columns: minmax(0, 1fr) 360px; } }
.vm-packlinkbox__text { display: grid; gap: 12px; align-content: start; }
.vm-packlinkbox__text .vm-link { justify-self: start; font-size: 14px; }
.vm-packlinkbox__qr { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 16px; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--edge); }
.vm-packlinkbox__qr canvas { grid-row: span 2; width: 140px; height: 140px; border-radius: 10px; background: #fff; border: 1px solid var(--edge); }
.vm-packlinkbox__qr p { font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.vm-packlinkbox__qr .vm-btn { justify-self: start; }
.vm-packmsgs { display: grid; gap: 16px; }
@media (min-width: 900px) { .vm-packmsgs { grid-template-columns: repeat(6, minmax(0, 1fr)); } .vm-packmsgs__card { grid-column: span 2; } .vm-packmsgs__card:nth-child(n+4) { grid-column: span 3; } }
.vm-packmsgs__card { display: flex; flex-direction: column; gap: 10px; }
.vm-packmsgs__card .vm-pack__text { flex: 1; }
.vm-packmsgs__card .vm-btn { align-self: flex-start; }
.vm-pack__side { display: grid; gap: 32px; align-content: start; }
.vm-pack__duo .vm-section__head { margin-bottom: 18px; }
.vm-pack__duo .vm-section__head p { margin-top: 4px; }
@media (min-width: 900px) { .vm-packmsgs__card:nth-child(4):last-child { grid-column: 1 / -1; } }

/* ================= Support page in the cause's own colours ================= */
.vm-support .vm-supporthero { background: var(--club, var(--teal)); color: var(--club-ink, #fff); }
.vm-support .vm-supporthero a, .vm-support .vm-supportmore summary { color: inherit; }
.vm-supporthero__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vm-supporthero__stats span { padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); font-size: 13px; line-height: 18px; }
.vm-supporthero__stats b { font: 800 16px/1 var(--font-display); margin-right: 3px; }
.vm-support .vm-supportmore { border-top-color: color-mix(in srgb, currentColor 25%, transparent); }
.vm-support .vm-steps3 li { border-top: 4px solid var(--club, var(--teal)); }
.vm-support .vm-steps3 li::before { background: var(--club, var(--teal)); color: var(--club-ink, #fff); }
@media (min-width: 900px) { .vm-support .vm-supportstores { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.vm-support .vm-supportstores a { height: 72px; transition: border-color .15s, transform .15s ease-out, box-shadow .15s; }
.vm-support .vm-supportstores a:hover { border-color: var(--club, var(--teal)); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.vm-supportpack { display: grid; gap: 16px; align-items: center; margin-top: 32px; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--edge); border-left: 6px solid var(--club, var(--teal)); box-shadow: var(--shadow-rest); }
@media (min-width: 760px) { .vm-supportpack { grid-template-columns: auto minmax(0, 1fr) auto; } }
.vm-supportpack b { font: 700 19px/24px var(--font-display); }
.vm-supportpack p { margin-top: 4px; color: var(--ink-muted); font-size: 14px; line-height: 21px; }
.vm-supportpack .vm-charity__logo { background: #fff; border: 1px solid var(--edge); }
.vm-support .vm-supportshare { background: color-mix(in srgb, var(--club, var(--teal)) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--club, var(--teal)) 22%, transparent); }
.vm-support .vm-supportshare__buttons .vm-btn { gap: 8px; }
.vm-support .vm-supportshare__buttons .vm-ico { width: 18px; height: 18px; }
.vm-support .vm-supportshare { margin-bottom: 32px; }
/* Admin: a charity's colours, with a live preview of its bar. */
.vm-colours { display: grid; gap: 12px; margin: 0; padding: 16px; border: 1px solid var(--edge); border-radius: var(--radius-md); }
.vm-colours legend { padding: 0 6px; font-weight: 700; }
.vm-colours input[type=color] { width: 72px; height: 40px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; cursor: pointer; }
.vm-colours input[type=color]:disabled { opacity: .4; cursor: not-allowed; }
.vm-colours__preview { padding: 12px 16px; border-radius: 10px; font-size: 14px; }
.vm-supportsearch { display: grid; gap: 8px; margin-top: 32px; }
.vm-supportsearch h2 { font: 800 24px/30px var(--font-display); }
.vm-supportsearch p { color: var(--ink-muted); }
.vm-supportsearch .vm-search { position: relative; height: 56px; margin-top: 6px; padding-left: 22px; border: 1px solid var(--edge); box-shadow: var(--shadow-rest); }
.vm .vm-supportsearch .vm-search__iconbtn { width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
/* Charity About page: every section runs the full width of its column. */
.vm .vm-charabout { max-width: none; }
.vm .vm-fullhelp > p, .vm .vm-charintro__blurb { max-width: none; }
.vm-fullhelp .vm-supportpack { margin-top: 0; }

/* ================= Price drops ================= */
.vm-dropshero { display: grid; gap: 20px 32px; margin: 8px 0 20px; padding: 28px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--teal), #08504c); color: #fff; }
@media (min-width: 960px) { .vm-dropshero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 36px 40px; } }
.vm-dropshero h1 { font: 800 clamp(28px, 3.6vw, 40px)/1.08 var(--font-display); letter-spacing: -.03em; max-width: 22ch; }
.vm-dropshero p { margin-top: 10px; max-width: 64ch; font-size: 16px; line-height: 24px; opacity: .92; }
.vm-dropshero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vm-dropshero__stats div { padding: 14px 18px; border-radius: var(--radius-md); background: rgba(255,255,255,.12); }
.vm-dropshero__stats b { display: block; font: 800 26px/30px var(--font-display); }
.vm-dropshero__stats span { font-size: 12px; opacity: .85; }
.vm-dropsbar { display: grid; gap: 12px; margin-bottom: 16px; }
.vm-dropsbar__cats { flex-wrap: wrap; }
.vm-dropsbar__cats .vm-chip { min-height: 36px; font-size: 13px; text-decoration: none; }
.vm-dropsbar__cats .vm-chip[aria-current] { background: var(--teal); color: #fff; border-color: var(--teal); }
.vm-dropsbar__cats .vm-chip[aria-current] span { color: inherit; opacity: .75; }
.vm-products { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
@media (min-width: 760px) { .vm-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vm-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vm-product { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); transition: box-shadow .15s, transform .15s ease-out, border-color .15s; }
.vm-product:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--teal) 35%, var(--edge)); }
.vm-product__img { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; padding: 14px; background: #fff; border-bottom: 1px solid var(--edge); }
/* Every photo fills the same square, however tall the store's original is, so the cards in a row line up. */
.vm-product__img img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.vm-product__off { position: absolute; top: 10px; left: 10px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--gleam); color: var(--on-gleam); font: 800 22px/26px var(--font-display); letter-spacing: -.02em; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.vm-product__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px; }
.vm-product__store { font: 700 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--teal); text-decoration: none; }
.vm-product__name { font: 600 14px/20px var(--font-sans); }
.vm-product__name a { color: var(--ink); text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vm-product__price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.vm-product__price b { font: 800 22px/26px var(--font-display); color: var(--ink); }
.vm-product__price s { color: var(--ink-muted); font-size: 14px; }
.vm-product__save { font-size: 13px; font-weight: 700; color: #1f7a2e; }
.vm-product__save i { font-style: normal; color: var(--expiring); }
.vm-product .vm-btn { margin-top: 6px; gap: 6px; }
.vm-product .vm-btn .vm-ico { width: 15px; height: 15px; }
.vm-dropsnote { margin-top: 28px; font-size: 13px; line-height: 19px; }
.vm-mega__drops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vm-mega__drops a { display: grid; gap: 4px; align-content: start; height: 100%; padding: 10px; border: 1px solid var(--edge); border-radius: 16px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s ease-out, box-shadow .15s; }
.vm-mega__drops a:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.vm-mega__dropimg { position: relative; display: grid; place-items: center; height: 120px; margin-bottom: 4px; border-radius: 10px; background: #fff; }
.vm-mega__dropimg img { max-width: 100%; max-height: 110px; object-fit: contain; }
.vm-mega__dropimg i { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--gleam); color: var(--on-gleam); font: 800 12px/16px var(--font-display); font-style: normal; }
.vm-mega__drops small { font: 700 11px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--teal); }
.vm-mega__drops b { font: 600 13px/18px var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vm-mega__drops strong { font: 800 16px/20px var(--font-display); }
.vm-mega__drops s { font-size: 12px; color: var(--ink-muted); }
/* Price drops: result count and sort, between the filters and the products. */
.vm-dropsresults { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 20px 0 16px; padding: 14px 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.vm-dropsresults p { font-size: 15px; color: var(--ink-muted); }
.vm-dropsresults p b { font: 800 20px/1 var(--font-display); color: var(--ink); }
.vm-dropssort { display: flex; align-items: center; gap: 10px; }
.vm-dropssort > span { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.vm-dropssort .vm-seg a { padding: 8px 16px; border-radius: var(--radius-pill); font: 600 14px/18px var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.vm-dropssort .vm-seg a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-rest); }
.vm-pack__posterlink { display: block; color: inherit; text-decoration: none; border-radius: 16px; transition: transform .15s ease-out, box-shadow .15s; }
.vm-pack__posterlink:hover { transform: translateY(-3px); }
.vm-pack__posterlink:hover .vm-poster { box-shadow: var(--shadow-lift); }
/* The footer sits above the chosen cause's fixed background layers. */
.vm-foot { position: relative; z-index: 1; }
/* Money articles: the "not financial advice" note under the article. */
.vm-moneynote { margin: 8px 0 4px; padding: 14px 18px; border-left: 4px solid var(--teal); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--teal-soft); font-size: 15px; line-height: 23px; color: var(--ink); }
.vm-moneynote b { display: block; margin-bottom: 2px; }

/* ================= Review fixes (7 Oct 2026) ================= */
/* With a cause chosen, the coloured bar says it: drop the top strip and the repeat note in lists. */
.vm.has-charity .vm-topstrip, .vm.has-charity .vm-givenote { display: none; }
/* Small text no smaller than 12px. */
.vm .vm-ticket__stub small { letter-spacing: .06em; }
.vm .vm-foot__head { font-size: 12px; }
/* Touch screens: controls at least 44px to tap. */
@media (pointer: coarse) {
  .vm-givebar__btn { min-height: 44px; padding-inline: 16px; }
  .vm-ticket [data-terms], .vm-crumbs a { min-height: 44px; }
}
/* Price drops on phones: sections and sort scroll sideways in one row instead of widening the page. */
@media (max-width: 759.98px) {
  .vm-dropsbar__cats { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; }
  .vm-dropsresults { flex-direction: column; align-items: stretch; }
  .vm-dropsresults > * { min-width: 0; max-width: 100%; }
  .vm-dropssort { min-width: 0; flex-direction: column; align-items: stretch; gap: 8px; }
  .vm-dropssort .vm-seg { display: flex; min-width: 0; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .vm-dropsresults p, .vm-dropssort > span { overflow-wrap: anywhere; }
  .vm-dropssort .vm-seg a { white-space: nowrap; }
}
/* The cause's background: only where there's room for margins, and cheaper to draw. */
@media (max-width: 1279.98px) { .vm .vm-charitycol, .vm .vm-charitybg { display: none !important; } }
.vm-charitybg::before { will-change: transform; }
.vm-charitycol { box-shadow: 0 0 32px 4px color-mix(in srgb, var(--charity) 12%, transparent); }
/* Charity and club pages: a shorter photo, so the name and the choose button are on the first screen. */
.vm .vm-charhero__photo { height: clamp(160px, 22vw, 280px); }
.vm-give .vm-link { white-space: normal; }
.vm-give { grid-template-columns: minmax(0, 1fr); }
/* Price drops: cards below the screen skip layout and painting until they're near it, so a long list scrolls smoothly. */
.vm-product { content-visibility: auto; contain-intrinsic-size: auto 470px; }
/* Homepage: the video hero sits where the slider does. */
.vm-homevhero { margin-top: 20px; }
/* "No charity or club": only when changing an existing choice. */
.vm-charity--none { display: none; margin-top: 8px; }
.vm.has-charity .vm-dialog.is-change .vm-charity--none { display: flex; }
.vm-charity--none > .vm-ico { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--surface-sunk); color: var(--ink-muted); }
/* With the video hero, the search box sits just below it. */
.vm-homevhero + .vm-homesearch { margin-top: 20px; }

/* Header: menu text at 15px with more room, no drop-down arrows.
   The arrow buttons stay in the page for keyboard users (Tab reaches them; they appear when focused),
   so the menus still open without a mouse. */
.vm .vm-header__nav { font-size: 15px; }
/* 5px more room either side of each menu item: 14px on smaller laptops (was 9px), 16px from 1280px (was 11px). */
@media (min-width: 960px) { .vm .vm-header__nav > a, .vm .vm-header__nav .vm-drop { padding-inline: 14px; } }
@media (min-width: 1280px) { .vm .vm-header__nav > a, .vm .vm-header__nav .vm-drop { padding-inline: 16px; } }
.vm .vm-header__nav .vm-drop__btn:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* No frame round the page: a 1px hairline under the header and no lines down the column's sides,
   so the content sits on paper. The chosen cause shows in the top bar, with a 3px deeper shade of its
   colour along the bottom. */
.vm .vm-header { border-bottom: 1px solid var(--edge); }
.vm .vm-charitycol { border-inline: 0; box-shadow: none; }
.vm.has-charity .vm-givebar { border-bottom: 3px solid color-mix(in srgb, var(--charity) 70%, #000); }
/* The logo pattern: fainter, and only from 1400px, where the margins are wide enough to be real margins. */
.vm .vm-charitybg::before { opacity: .05; }
@media (max-width: 1399.98px) { .vm .vm-charitycol, .vm .vm-charitybg { display: none !important; } }
/* No cause chosen: plain teal bar, and a solid gold "Pick a charity" button as its one bright thing. */
.vm .vm-givebar__in--off .vm-givebar__btn { background: var(--gleam); border-color: var(--gleam); color: var(--on-gleam); font-weight: 700; }
.vm .vm-givebar__in--off .vm-givebar__btn:hover { background: #ffc61a; }
/* Store pages: the "you haven't picked a charity" nudge above the codes, which visitors can dismiss. */
.vm-givenote--nudge { align-items: center; }
.vm-givenote--nudge > span { flex: 1; }
.vm-givenote__x { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin: -6px -8px -6px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; }
.vm-givenote__x:hover { background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--ink); }
@media (pointer: coarse) { .vm-givenote__x { width: 44px; height: 44px; margin-block: -12px; } }
.vm-givenote__x .vm-ico { width: 16px; height: 16px; }

/* ================= Browser extension page and menu ================= */
.vm-extbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.vm-extbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 18px 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s; }
.vm-extbtn span { display: flex; flex-direction: column; font: 700 16px/18px var(--font-sans); }
.vm-extbtn small { font: 600 11px/14px var(--font-sans); color: var(--ink-muted); }
.vm-extbtn:hover { transform: translateY(-1px); border-color: var(--teal); box-shadow: var(--shadow-lift); }
.vm-extbtn.is-yours { background: var(--teal); border-color: var(--teal); color: #fff; }
.vm-extbtn.is-yours small { color: rgba(255,255,255,.8); }
.vm-extbtns--small .vm-extbtn { min-height: 44px; width: 100%; }
.vm-extbtn.is-soon { border-style: dashed; color: var(--ink-muted); cursor: default; }
.vm-extbtn.is-soon:hover { transform: none; border-color: var(--line-strong); box-shadow: none; }
.vm-extbtns--small { flex-direction: column; }
.vm-exthero { display: grid; gap: 28px; align-items: center; margin: 8px 0 12px; }
@media (min-width: 960px) { .vm-exthero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; } }
.vm-exthero__copy { display: grid; gap: 16px; align-content: start; }
.vm-exthero__head { display: grid; gap: 12px; }
@media (min-width: 960px) { .vm-exthero { row-gap: 20px; } .vm-exthero__head { grid-column: 1 / -1; } }
.vm-exthero__head .vm-eyebrow { color: var(--teal); }
.vm-exthero__copy .vm-eyebrow { color: var(--teal); }
.vm-exthero h1 { font: 800 clamp(30px, 3.6vw, 44px)/1.08 var(--font-display); letter-spacing: -.03em; }
.vm-exthero p { font-size: 17px; line-height: 27px; color: var(--ink-muted); }
.vm-exthero__shot { margin: 0; }
.vm-exthero__shot img { border: 1px solid var(--edge); }
.vm-extprivacy p { margin-top: 12px; }
.vm-mega__main--ext { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
.vm-mega__main--ext .vm-mega__soon { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-mega__get p { margin-top: 10px; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
/* Join page: the video hero takes the place of the title and intro. */
.vm-joinvhero { margin-top: 12px; }
#join { scroll-margin-top: calc(var(--header-h, 72px) + 20px); }

/* Extension: real browser logos on the install buttons, and the toolbar button with its count badge. */
.vm-extbtn__icon { flex: none; width: 26px; height: 26px; object-fit: contain; }
.vm-extcount { position: relative; display: grid; place-items: center; width: 52px; height: 44px; border-radius: 12px; background: #e8eaed; box-shadow: inset 0 0 0 1px rgba(17,20,24,.08); }
.vm-extcount img { width: 30px; height: 30px; border-radius: 7px; }
.vm-extcount i { position: absolute; top: -6px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--teal); color: #fff; font: 800 12px/22px var(--font-sans); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fff; }
/* The three feature cards line up: same height, titles take the same room, no jump on hover. */
.vm .vm-mega__soon > li { display: flex; }
.vm .vm-mega__soon > li > a { flex: 1; grid-template-rows: auto minmax(42px, auto) 1fr; }

/* ================= Mega menus: a square panel that clearly floats over the page ================= */
.vm .vm-mega.vm-drop__panel { border-radius: 0; border-top: 1px solid var(--edge); border-bottom: 3px solid var(--teal); box-shadow: 0 18px 36px rgba(17,20,24,.12); }
.vm.has-charity .vm-mega.vm-drop__panel { border-bottom-color: var(--charity); }
.vm .vm-mega__intro { border-radius: 12px; }
/* The open menu item gets a tab line that joins it to its panel. */
@media (min-width: 1100px) {
  .vm .vm-header__nav .vm-drop[data-open] > a, .vm .vm-header__nav .vm-drop:hover > a { color: var(--teal); box-shadow: inset 0 -3px 0 var(--teal); }
}
/* A light dim on the page while a menu is open (below the header, and it doesn't catch clicks). */
@media (min-width: 1100px) and (hover: hover) {
  .vm:has(.vm-header__nav .vm-drop:hover .vm-mega, .vm-header__nav .vm-drop[data-open] .vm-mega)::after { content: ""; position: fixed; inset: 0; z-index: 4; background: rgba(17,20,24,.25); pointer-events: none; }
}
/* Category and feature tiles are links, not cards: no fill until hovered, and their last line sits on one baseline. */
.vm .vm-mega__cats { grid-auto-rows: 1fr; gap: 4px; }
.vm .vm-mega__cats a { display: flex; flex-direction: column; gap: 4px; background: transparent; border: 0; border-radius: 12px; transform: none; transition: background-color .12s ease-out; }
.vm .vm-mega__cats a:hover, .vm .vm-mega__cats a:focus-visible { background: var(--surface-sunk); border: 0; transform: none; }
.vm .vm-mega__cats b { font-size: 16px; line-height: 22px; }
.vm .vm-mega__cats span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.vm .vm-mega__cats i { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 700; color: var(--teal); }
.vm .vm-mega__soon a { background: transparent; border-radius: 12px; transform: none; transition: background-color .12s ease-out; }
.vm .vm-mega__soon a:hover, .vm .vm-mega__soon a:focus-visible { background: var(--surface-sunk); transform: none; }
/* Extension buttons for other browsers: shown, but greyed out and not clickable. */
.vm .vm-extbtn.is-off { opacity: .45; filter: grayscale(1); cursor: not-allowed; box-shadow: none; transform: none; border-color: var(--edge); }
.vm .vm-extbtn.is-off:hover { border-color: var(--edge); }
@media (min-width: 1100px) { .vm .vm-header__nav .vm-drop:hover > a[aria-current], .vm .vm-header__nav .vm-drop[data-open] > a[aria-current] { text-decoration: none; } }
/* Extension page: the demo video above the popup screenshot, and "How it works" lighting up in time with it (Claude Design). */
.vm-exthero__shot video,
.vm-exthero__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 600;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(17, 20, 24, 0.16);
  background: #fff;
}

/* Extension hero: 1-2-3 steps beside the demo video, lit in sync with it */
.vm-extsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vm-extsteps li { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); font-size: 14px; line-height: 20px; color: var(--ink-muted); cursor: pointer; transition: border-color .3s ease, box-shadow .3s ease; }
.vm-extsteps li b { display: block; color: var(--ink); font: 700 16px/22px var(--font-display); }
.vm-extsteps__num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gleam); color: var(--on-gleam); font: 800 14px/1 var(--font-display); }
.vm-extsteps li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; transform-origin: left; transform: scaleX(var(--p, 0)); background: #f5b800; }
.vm-extsteps li.is-active { border-color: #0b6e69; box-shadow: 0 0 0 3px rgba(11, 110, 105, .14); }
.vm-extsteps.vm-steps--static li::after { display: none; }

/* Fundraising pack: the club's shareable video, at the top of "2. Messages" */
.vm-packvideo { display: grid; gap: 16px; margin-bottom: 16px; }
/* Same columns as the message cards below: the copy spans two, the video fills the third (as wide as "Newsletter or email"). */
@media (min-width: 900px) { .vm-packvideo { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vm-packvideo__copy { grid-column: span 2; } }
.vm-packvideo__copy { display: flex; flex-direction: column; gap: 12px; }
.vm-packvideo__copy .vm-eyebrow { color: var(--teal); }
.vm-packvideo h3 { font: 800 clamp(22px, 2.4vw, 28px)/1.2 var(--font-display); margin: 0; }
.vm-packvideo p, .vm-packvideo small { color: var(--ink-muted); }
.vm-packvideo__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.vm-packvideo__cols { display: grid; gap: 16px; margin: 4px 0; }
@media (min-width: 640px) { .vm-packvideo__cols { grid-template-columns: 1fr 1fr; gap: 24px; } }
.vm-packvideo h4 { font: 700 15px/20px var(--font-display); color: var(--ink); margin: 0 0 8px; }
.vm-packvideo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.vm-packvideo__list li { position: relative; padding-left: 22px; }
.vm-packvideo__list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--club, var(--teal)); }
.vm-packvideo__caption { display: grid; gap: 10px; justify-items: start; }
.vm-packvideo__caption .vm-pack__text { justify-self: stretch; }
.vm-packvideo__caption h4 { margin: 0; }
.vm-packvideo__player { width: 100%; max-width: 300px; justify-self: center; order: -1; }
@media (min-width: 900px) { .vm-packvideo__player { max-width: none; order: 0; } }
.vm-packvideo__player video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); background: #05211f; box-shadow: var(--shadow-rest); }

/* ---------- error pages: the magpie perched on a voucher showing the code ---------- */
.vm-err { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; padding-block: var(--space-8) var(--space-12); }
.vm-err__art { position: relative; justify-self: center; width: min(100%, 340px); padding-top: 92px; }
.vm-err__bird { position: absolute; top: 0; left: 50%; width: 200px; height: auto; margin-left: -118px; z-index: 1; transform-origin: 40% 100%; animation: vm-err-hop 3.2s ease-in-out infinite; }
.vm-err__ticket { position: relative; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-6) var(--space-6); background: var(--teal); color: var(--on-teal); border-radius: var(--radius-md); transform: rotate(-3deg); box-shadow: var(--shadow-lift);
    -webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.vm-err__ticket::before { content: ""; position: absolute; inset: 10px 26px; border: 2px dashed rgba(255, 255, 255, .45); border-radius: var(--radius-sm); pointer-events: none; }
.vm-err__label { font: 800 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.vm-err__code { font: 600 64px/1 var(--font-mono); letter-spacing: .08em; color: var(--gleam); }
.vm-err__stamp { font: 600 13px/18px var(--font-sans); opacity: .85; }
.vm-err__text { display: grid; gap: var(--space-3); max-width: 600px; }
.vm-err__text .vm-eyebrow { color: var(--teal); }
.vm-err__text h1 { font: 800 32px/38px var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.vm-err__text > p { color: var(--ink-muted); overflow-wrap: anywhere; }
.vm-err__excuse { padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); font-size: 15px; }
.vm-err__excuse b { color: var(--ink); }
.vm-err__more { display: inline; margin-left: var(--space-1); padding: 0; border: 0; background: none; font: 700 15px/1 var(--font-sans); color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vm-err__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.vm-err__actions .vm-search { flex: 1 1 100%; }
@media (min-width: 800px) {
    .vm-err { grid-template-columns: 380px 1fr; gap: var(--space-12); padding-block: var(--space-12); }
    .vm-err__art { width: 380px; padding-top: 108px; }
    .vm-err__bird { width: 236px; margin-left: -140px; }
    .vm-err__code { font-size: 88px; }
    .vm-err__text h1 { font-size: 44px; line-height: 50px; }
}
@keyframes vm-err-hop { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 76% { transform: translateY(-14px) rotate(-4deg); } 82% { transform: translateY(0) rotate(0); } 86% { transform: translateY(-5px) rotate(2deg); } 90% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .vm-err__bird { animation: none; } }

/* ---------- thank-you after picking a cause, with a way into the stores ---------- */
.vm-thanks[open] { grid-template-rows: auto auto auto auto; }
.vm-thanks__body { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.vm-thanks__body .vm-search { position: relative; }
.vm-thanks__stores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vm-thanks__stores a { padding: 8px 6px; }
.vm-thanks__stores .vm-mega__logo { height: 44px; }
.vm-thanks__stores .vm-mega__logo img { max-height: 32px; }
@media (max-width: 759.98px) {
  .vm-dialog.vm-thanks { height: fit-content; }
  .vm-thanks__body { padding: 12px 16px; }
}

/* Phones show one slide with no controls (site.js): no room kept for the bar, logo tucked over the photo. */
@media (max-width: 759.98px) {
  .vm-slide__copy { gap: 8px; padding: 0 18px 20px; }
  .vm-slide__logo { height: 52px; min-width: 52px; margin-top: -26px; padding: 6px 10px; }
  .vm .vm-slide__title { font-size: 22px; line-height: 27px; }
  .vm-slide__sub { font-size: 15px; line-height: 21px; }
  .vm .vm-slide__cta { margin-top: 4px; min-height: 46px; }
}

/* Narrow tickets (phones, and two-up on tablets): compact. Small logo beside the store name, no "All X codes" link
   (the name links there), no badge unless it's the top code, the title on up to two lines, a shorter button.
   Sized by the ticket's own width, not the screen's. */
@container (max-width: 619.98px) {
  .vm .vm-ticket__in { --stub: 68px; }
  .vm .vm-ticket__stub .vm-ticket__big { font-size: 21px; line-height: 23px; }
  .vm .vm-ticket__body { gap: 8px; padding: 12px 12px 12px 14px; }
  .vm .vm-ticket__text { gap: 4px; }
  .vm .vm-ticket__storelink { gap: 8px; font-size: 14px; line-height: 18px; }
  .vm .vm-ticket__storelink i { width: 30px; height: 30px; border-radius: 8px; }
  .vm .vm-ticket__storelink .vm-logoimg { padding: 2px !important; }
  .vm .vm-ticket__all { display: none; }
  .vm .vm-ticket:not(.vm-ticket--featured) .vm-ticket__kick { display: none; }
  .vm .vm-ticket__title { font-size: 16px; line-height: 21px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vm .vm-ticket__meta { font-size: 13px; line-height: 18px; gap: 2px 8px; }
  .vm .vm-ticket__meta .vm-btn--ghost { font-size: 13px; min-height: 32px; }
  .vm .vm-ticket .vm-reveal { min-height: 44px; }
  .vm .vm-ticket__action .vm-btn { min-height: 44px; }
}

/* Two-up tickets on desktop (480-619px wide) keep the compact body but get a fuller stub, so they don't look like phone tickets. */
@container (min-width: 480px) and (max-width: 619.98px) {
  .vm .vm-ticket__in { --stub: 104px; }
  .vm .vm-ticket__stub .vm-ticket__big { font-size: 32px; line-height: 32px; }
}

/* "All X codes" stays at the right of the store row; a long store name shortens instead of pushing it down. */
.vm-ticket__text, .vm-ticket__store { min-width: 0; }
.vm-ticket__store { flex-wrap: nowrap; }
.vm-ticket__storelink { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-ticket__storelink i { flex: none; }
.vm-ticket__all { flex: none; }

/* Today's best codes: two-up from tablet width. */
@media (min-width: 760px) { .vm-grid-tickets { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* Slider: the "Save money. Support charity." badge only where there's room beside the photo. */
@media (max-width: 1099.98px) { .vm-slide__badge { display: none !important; } }

/* Price Drops cards: the store and product name links at least 24px tall to tap (WCAG 2.5.8). */
.vm-product__store { display: inline-flex; align-items: center; align-self: flex-start; min-height: 24px; }
.vm-product__name a { display: block; min-height: 24px; }

/* Privacy: what we collect, one card per kind of data, instead of a wide table. */
.vm-prose .vm-datalist { display: grid; gap: 12px; margin: 16px 0; }
.vm-prose .vm-datalist section { padding: 16px 18px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-md); }
.vm-prose .vm-datalist h3 { margin: 0 0 10px; font: 700 16px/22px var(--font-sans); letter-spacing: 0; }
.vm-prose .vm-datalist dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 15px; line-height: 22px; }
.vm-prose .vm-datalist dt { font-weight: 700; color: var(--ink-muted); }
.vm-prose .vm-datalist dd { margin: 0; }
@media (max-width: 479.98px) { .vm-prose .vm-datalist dl { grid-template-columns: 1fr; gap: 0; } .vm-prose .vm-datalist dd { margin-bottom: 8px; } }

/* Store page: no charity donation at this store (its terms forbid it, e.g. Amazon). */
.vm-nogive { display: grid; gap: 8px; background: var(--expiring-soft); border: 1px solid color-mix(in srgb, var(--expiring) 35%, transparent); border-left: 4px solid var(--expiring); }
.vm-nogive h3 { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--expiring); }
.vm-nogive h3 .vm-ico { width: 20px; height: 20px; flex: none; }
.vm-nogive p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.vm-nogive .vm-nogive__lead { font-weight: 700; color: var(--ink); font-size: 15px; }
.vm-nogive .vm-link { justify-self: start; display: inline-flex; gap: 4px; align-items: center; font-size: 14px; }
.vm-nogive .vm-link .vm-ico { width: 14px; height: 14px; }

/* ---------- month archive: one block per section, each with its own pager ---------- */
.vm-archsec { margin-top: 40px; scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
.vm-archsec[aria-busy="true"] .vm-cards { opacity: .5; transition: opacity .15s; }

/* ---------- article picks: a numbered winner card per product, photo alternating sides, with a jump strip ---------- */
.vm-prose .vm-picknav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 8px 0 4px; }
.vm-prose .vm-picknav__item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .15s ease-out, box-shadow .15s, border-color .15s; }
.vm-prose .vm-picknav__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--teal) 40%, var(--edge)); }
.vm-prose .vm-picknav__img { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 4px; border-radius: 8px; background: #fff; overflow: hidden; }
.vm-prose .vm-picknav__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; margin: 0; }
.vm-prose .vm-picknav__num { position: absolute; top: 4px; left: 4px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--gleam); color: var(--on-gleam); font: 800 13px/1 var(--font-display); }
.vm-prose .vm-picknav__name { font: 700 13px/17px var(--font-display); }
.vm-prose .vm-picknav__price { margin-top: auto; padding-top: 2px; font: 800 14px/18px var(--font-display); color: var(--teal); }
.vm-prose .vm-picknav__score { position: absolute; top: 4px; right: 4px; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--ink); color: #fff; font: 800 11px/16px var(--font-display); }
.vm-prose .vm-pick__score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-sunk); }
.vm-prose .vm-pick__scoreval { grid-row: span 2; font: 700 16px/1 var(--font-display); color: var(--ink-muted); }
.vm-prose .vm-pick__scoreval strong { font: 800 40px/1 var(--font-display); letter-spacing: -.04em; color: var(--teal); }
.vm-prose .vm-pick__scorebar { height: 8px; border-radius: var(--radius-pill); background: var(--edge); overflow: hidden; }
.vm-prose .vm-pick__scorebar i { display: block; width: calc(var(--score) * 10%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--gleam)); }
.vm-prose .vm-pick__verdict { font-size: 14px; line-height: 20px; color: var(--ink); }
.vm-prose .vm-pick__verdict b { color: var(--teal); }

.vm-prose .vm-pick { display: grid; grid-template-columns: 260px minmax(0, 1fr); margin-top: var(--space-6); border: 1px solid var(--edge); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-rest); overflow: hidden; scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
.vm-prose .vm-pick:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) 260px; }
.vm-prose .vm-pick:nth-of-type(even) .vm-pick__media { order: 2; border-right: 0; border-left: 1px solid var(--edge); }
.vm-prose .vm-pick__media { position: relative; display: grid; place-items: center; padding: 40px 24px 24px; background: radial-gradient(circle at 50% 55%, #fff 55%, var(--surface-sunk, #f4f2ec) 100%); border-right: 1px solid var(--edge); }
.vm-prose .vm-pick__media img { width: 100%; height: auto; max-height: 230px; object-fit: contain; margin: 0; transition: transform .25s ease-out; }
.vm-prose .vm-pick:hover .vm-pick__media img { transform: scale(1.05); }
.vm-prose .vm-pick__num { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gleam); color: var(--on-gleam); font: 800 24px/1 var(--font-display); letter-spacing: -.03em; box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.vm-prose .vm-pick__body { display: grid; gap: 12px; align-content: start; padding: 26px 28px 28px; }
.vm-prose .vm-pick__eyebrow { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.vm-prose .vm-pick h2 { margin: 0; font-size: 24px; line-height: 29px; }
.vm-prose .vm-pick__price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vm-prose .vm-pick__price strong { font: 800 34px/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.vm-prose .vm-pick__price s { color: var(--ink-muted); font-size: 16px; }
.vm-prose .vm-pick__save { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--gleam); color: var(--on-gleam); font: 800 13px/16px var(--font-display); letter-spacing: .01em; }
.vm-prose .vm-pick__body > p { margin: 0; font-size: 16px; line-height: 26px; }
.vm-prose .vm-pick__tip { display: grid; gap: 2px; padding: 12px 14px; border-left: 3px solid var(--teal); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--teal-soft); font-size: 15px !important; line-height: 22px !important; }
.vm-prose .vm-pick__tip b { font: 800 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.vm-prose .vm-pick__cta { justify-self: start; margin-top: 4px; }
.vm-prose .vm-pick__cta::after { content: "→"; margin-left: 8px; transition: transform .15s; }
.vm-prose .vm-pick__cta:hover::after { transform: translateX(3px); }
@media (max-width: 760px) {
  .vm-prose .vm-pick, .vm-prose .vm-pick:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .vm-prose .vm-pick .vm-pick__media, .vm-prose .vm-pick:nth-of-type(even) .vm-pick__media { order: 0; border: 0; border-bottom: 1px solid var(--edge); padding: 36px 24px 20px; }
  .vm-prose .vm-pick__media img { max-height: 200px; width: auto; max-width: 70%; }
  .vm-prose .vm-pick__body { padding: 20px; }
  .vm-prose .vm-pick__price strong { font-size: 30px; }
  .vm-prose .vm-pick__cta { justify-self: stretch; }
}

@media (max-width: 560.98px) { .vm-prose .vm-picknav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- article scorecards: each retailer rated out of 5 per category, no sideways scroll ---------- */
.vm-prose .vm-scorecards { display: grid; gap: 12px; margin: 8px 0 4px; }
.vm-prose .vm-scorecard { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--edge); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-rest); }
.vm-prose .vm-scorecard:first-child { border-color: color-mix(in srgb, var(--teal) 45%, var(--edge)); }
.vm-prose .vm-scorecard__head { display: flex; align-items: center; gap: 12px; }
.vm-prose .vm-scorecard__rank { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-sunk); color: var(--ink); font: 800 16px/1 var(--font-display); }
.vm-prose .vm-scorecard:first-child .vm-scorecard__rank { background: var(--gleam); color: var(--on-gleam); }
.vm-prose .vm-scorecard__name { font: 700 20px/24px var(--font-display); letter-spacing: -.01em; }
.vm-prose .vm-scorecard__overall { margin-left: auto; font: 700 14px/1 var(--font-display); color: var(--ink-muted); white-space: nowrap; }
.vm-prose .vm-scorecard__overall strong { font: 800 30px/1 var(--font-display); letter-spacing: -.03em; color: var(--teal); }
.vm-prose .vm-scorecard__rates { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 24px; margin: 0; padding: 0; }
.vm-prose .vm-scorecard__rates li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 28px; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; }
.vm-prose .vm-scorecard__rates b { font: 700 13px/1 var(--font-display); color: var(--ink-muted); text-align: right; }
.vm-prose .vm-rate { display: block; height: 8px; background: linear-gradient(90deg, var(--teal) calc(var(--r) * 20%), var(--edge) 0); -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent 0 20%); mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent 0 20%); }
.vm-prose .vm-scorecard__why { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 21px; color: var(--ink-muted); }
@media (max-width: 559.98px) {
  .vm-prose .vm-scorecard { padding: 14px; }
  .vm-prose .vm-scorecard__rates { grid-template-columns: minmax(0, 1fr); }
}
/* Form errors: a line under each field (empty until there's a problem) and a summary at the top listing them. */
.vm-field-error { margin: 6px 0 0; color: var(--expiring); font-size: 14px; line-height: 20px; font-weight: 600; }
.vm-field-error:empty { display: none; }
.vm-form [aria-invalid="true"] { border-color: var(--expiring); }
.vm-errsummary { padding: 16px 20px; border: 2px solid var(--expiring); border-radius: var(--radius-md, 12px); background: var(--surface, #fff); }
.vm-errsummary:focus { outline: 3px solid var(--focus, #f5b800); outline-offset: 2px; }
.vm-errsummary[hidden] { display: none; }
.vm-errsummary h2 { margin: 0 0 6px; font: 800 20px/26px var(--font-display); }
.vm-errsummary ul { margin: 0; padding-left: 20px; }
.vm-errsummary a { color: var(--expiring); font-weight: 700; }
/* A cause's own page wears that cause's colour (--club): the band under the hero, its main chip and the Choose button.
   Another cause you already support is only a small line. */
.vm-charhero { border-bottom: 4px solid var(--club); }
.vm-charhero__photo { background: var(--club); }
.vm-charhero .vm-charintro__chip--main { background: var(--club); color: var(--club-ink); }
.vm-charhero .vm-choosecard__kick { color: color-mix(in srgb, var(--club) 75%, #111418); }
.vm-charhero .vm-choosecard__kick .vm-ico { fill: var(--club); }
.vm .vm-charhero .vm-choosecard:not(.is-chosen) .vm-btn--gleam { background: var(--club); border-color: var(--club); color: var(--club-ink); }
.vm-choosecard.is-chosen .vm-choosecard__current { display: none; }
.vm .vm-givebar__current { display: block; font-size: 13px; line-height: 18px; opacity: .9; white-space: normal; overflow: visible; text-overflow: clip; }
.vm-skipdemo { margin: 8px 0 0; }
.vm-skipdemo a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 700; color: var(--teal); }
/* Money advice hub on phones: a featured headline that fits, and section chips and topic, store and month links that
   are easy to tap. */
@media (max-width: 639.98px) { .vm .vm-cards--feature .vm-card__body h3 { font-size: 25px; line-height: 31px; } }
.vm-newsarchive a { display: inline-flex; align-items: center; min-height: 44px; }
.vm-newsarchive ul { gap: 0 20px; }
nav.vm-chips .vm-chip { min-height: 44px; }
/* Price drops: "How prices work" folds the price note into the hero; on phones the count and the sort share a row and
   the give-back note is left to the cause bar, so the first product starts on the first screen. */
.vm-dropshero .vm-dropsnote { margin: 0; grid-column: 1 / -1; font-size: 14px; line-height: 20px; }
.vm-dropshero .vm-dropsnote summary { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; cursor: pointer; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vm-dropshero .vm-dropsnote p { margin-top: 8px; color: #fff; opacity: .92; }
.vm-dropshero .vm-dropsnote a { color: #fff; }
@media (max-width: 639.98px) {
  .vm .vm-dropsresults { flex-direction: row; align-items: center; margin: 12px 0 10px; padding: 8px 0; }
  .vm .vm-dropsresults__h { font-size: 16px; }
  .vm .vm-dropssort__select label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* The cause bar at the foot of the page carries the give-back message on phones. */
  .vm .vm-dropsresults + .vm-givenote { display: none; }
}
/* Price drops cards: names up to three lines, the meta line at 13px, and 44px tall store and breadcrumb links
   (the extra height is taken from the space around them, so nothing moves). */
.vm .vm-product__name a { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; }
.vm .vm-product .vm-product__when { font-size: 13px; line-height: 18px; }
.vm .vm-product__store { min-height: 44px; margin-block: -10px; }
.vm .vm-crumbs a { min-height: 44px; margin-block: -10px; }
/* Tap targets: Get code at least 44px everywhere; the desktop header search box at least 24px. */
.vm .vm-reveal { min-height: 44px; }
.vm .vm-hsearch input { min-height: 24px; }
/* Cause pages: the Choose buttons, chosen or not, wear the cause's own colours, never the brand yellow. */
.vm [style*="--club"] .vm-choosecard .vm-btn:not(.vm-btn--secondary), .vm [style*="--club"] .vm-actioncard .vm-btn:not(.vm-btn--secondary) { background: var(--club); border-color: var(--club); color: var(--club-ink); }
/* D3: on cause pages a secondary button is an outline in the cause's colour, so only the main action is filled. */
.vm [style*="--club"] .vm-btn--secondary { background: transparent; border: 1.5px solid var(--club); color: var(--ink); }
.vm [style*="--club"] .vm-btn--secondary:hover { background: color-mix(in srgb, var(--club) 10%, transparent); }
/* Extension buttons: your browser's alone, the others in small print. */
.vm .vm-extalso { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.vm .vm-extalso a { display: inline-block; min-height: 24px; color: inherit; text-decoration: underline; }
.vm .vm-extbtn[hidden], .vm [data-extinstall] [hidden] { display: none; }
.vm .vm-extinstall .vm-extalso { margin-top: -6px; }
.vm .vm-mega .vm-extalso { font-size: 12.5px; line-height: 18px; }
/* Review fixes: the cookie notice's text buttons and one-line product names have 24px+ targets. */
.vm .vm-cookie .vm-linkbtn, .vm-cookie .vm-linkbtn { min-height: 24px; display: inline-flex; align-items: center; }
.vm .vm-product .vm-product__name a { min-height: 24px; }
/* Review fixes: when the page's columns stack (under 1000px) the side panels keep the text column's width, so the two
   line up; the tablet video heroes are a little smaller, so the content under them comes sooner. */
@media (max-width: 999.98px) { .vm .vm-article__grid > .vm-prose { max-width: none; } }
@media (min-width: 768px) and (max-width: 1099.98px) { .vm .vm-vhero .vm-vhero__media { max-width: 420px; } }

/* ---- Live sweep fixes (12 Oct 2026) ---- */
/* H1: cause pages: the action cards' columns may shrink, and their buttons wrap, so a long label can't widen the grid. */
@media (min-width: 700px) { .vm .vm-actioncards, .vm .vm-fullhelp .vm-howsteps, .vm .vm-fullhelp .vm-actioncards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vm .vm-actioncard .vm-btn { text-wrap: balance; text-align: center; }
.vm .vm-section { grid-template-columns: minmax(0, 1fr); }
/* H2: the A to Z is a wrapping row of 44px letters at every width (the 26-column grid had 27 items and overlapped). */
.vm .vm-az { display: flex; flex-wrap: wrap; gap: 6px; }
.vm .vm-az a, .vm .vm-az span { min-width: 44px; height: 44px; }
/* H3: store names in the A to Z (and the 404's popular stores) wrap to two lines instead of being cut off; phones get one
   column. */
.vm .vm-store__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 420px) { .vm .vm-grid-stores { grid-template-columns: minmax(0, 1fr); } .vm .vm-store { gap: 8px; padding: 8px; } }
/* H5: on section views the longer count heading and the sort share the row, wrapping when they don't fit. */
.vm .vm-dropsresults { flex-wrap: wrap; row-gap: 8px; }
.vm .vm-dropssort__select { flex-shrink: 0; max-width: 100%; }
.vm #drops-sort { max-width: 100%; }
/* H6: the popup screenshot keeps its own 16:10 shape (the demo's 780/600 box stretched it). */
.vm .vm-exthero__still img { aspect-ratio: 16 / 10; height: auto; object-fit: contain; }
/* M1: the line under the price always takes two lines' room, so prices line up across a row. */
.vm .vm-product .vm-product__when { min-height: 36px; }
.vm .vm-product__img { flex-shrink: 0; }
/* M2: the chip row fades at its right edge only while there's more to scroll to (site.js sets .is-scrollable/.is-end). */
.vm .vm-dropsbar__cats { -webkit-mask-image: none; mask-image: none; }
.vm .vm-dropsbar__cats.is-scrollable:not(.is-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.vm .vm-dropsbar__cats.is-end, .vm .vm-dropsbar__cats:not(.is-scrollable) { -webkit-mask-image: none; mask-image: none; }
/* M3: focus rings aren't clipped: room inside the scrolling chip rows (taken back with negative margins, so nothing moves),
   the ticket meta row shows overflow, and the cause bar's text clips with a margin. */
.vm .vm-chips { margin-block: -6px; scroll-padding-inline: 6px; }
.vm .vm-givebar__text { overflow: clip; overflow-clip-margin: 4px; }
/* M4: beside the store page's sidebar (900-1180px) tickets have a narrower stub and put the button under the title, so
   titles don't wrap to five lines; small phones clamp titles at three lines. */
@media (min-width: 900px) and (max-width: 1180px) {
  .vm .vm-ticket__in { --stub: 104px; }
  .vm .vm-ticket--featured .vm-ticket__in { --stub: 124px; }
  .vm .vm-ticket--featured .vm-ticket__stub .vm-ticket__big { font-size: 44px; line-height: 40px; }
  .vm .vm-ticket__body { grid-template-columns: minmax(0, 1fr); }
  .vm .vm-ticket__action { justify-self: start; width: min(100%, 280px); }
}
@media (max-width: 400px) { .vm .vm-ticket__title { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }
/* M5: the sidebar runs the full height of its row (so sticking it did nothing); instead its last panel sticks under the
   header as you scroll on, so the right column isn't empty below the fold. */
.vm .vm-side { position: static; }
@media (min-width: 1000px) { .vm .vm-side > :last-child { position: sticky; top: calc(var(--header-h, 69px) + 16px); max-height: calc(100vh - var(--header-h, 69px) - 32px); overflow-y: auto; } }
/* M6: the phone menu is a fixed sheet under the header, covering the page, rather than pushing the page down. */
@media (max-width: 959.98px) {
  .vm .vm-header .vm-mobilenav { position: fixed; inset: var(--header-h, 60px) 0 0; z-index: 6; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); align-content: start; }
  html.is-menu-open .vm .vm-header #mnav.vm-mobilenav { max-height: none; }
}
/* M7: one gutter (16-24px) and one max-width for the header, the page content, the footer and the homepage's sections,
   so their left edges line up at every width. */
:root { --gutter: clamp(16px, 3vw, 24px); }
.vm .vm-wrap, .vm .vm-header__in, .vm .vm-foot .vm-wrap, .vmh .hx-wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 479.98px) { .vm .vm-wrap { padding-inline: var(--gutter); } .vm .vm-dropsbar__cats { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }
@media (max-width: 959.98px) { .vm .vm-dropsbar__cats { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }
/* M8: form controls take the page's font (Figtree) instead of the browser's Arial; :where keeps this at zero
   specificity, so any button that sets its own font still does. */
:where(.vm, .vmh) :where(button, input, select, textarea) { font: inherit; }
.vm .vm-givebar__btn { font-weight: 700; }
/* M9: selects look like the site's other fields on every device: no native styling, a teal chevron and room for it. */
.vm select:not([multiple]), .vmh select:not([multiple]) {
  -webkit-appearance: none; appearance: none;
  background-color: var(--surface, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b6e69' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
  padding-right: 40px;
}
.vm .vm-dropssort__select select, .vm .vm-field select { padding-right: 40px; }
.vm .vm-dropsresults .vm-dropssort__select select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b6e69' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; padding-right: 40px; }
/* M10: readable line lengths on wide screens. */
.vm .vm-article__stand { max-width: 60ch; }
.vm .vm-foot__note { max-width: 90ch; }
/* M11: in two-column card grids (640-1023px) an odd last card spans the row, laid out side by side like the featured one,
   rather than sitting alone. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .vm .vm-cards:not(.vm-cards--feature) > :last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .vm .vm-cards:not(.vm-cards--feature) > :last-child:nth-child(odd) .vm-card__art { aspect-ratio: auto; min-height: 100%; }
}
/* M12: 44px tap targets on phones and tablets (up to 1023px), not only on coarse pointers. */
@media (max-width: 1023.98px) {
  .vm .vm-chip, .vm .vm-locator__bar button, .vm .vm-givebar__action, .vm .vm-givebar__btn,
  .vm .vm-ticket__storelink, .vm .vm-ticket__terms, .vm .vm-share a, .vm .vm-share button,
  .vm .vm-homehead__trust, .vmh .vm-homehead__trust, .vm .vm-causeicon, .vm .vm-foot__social a, .vm .vm-err__more,
  .vm .vm-curated, .vm .vm-list__head .vm-link, .vm .vm-spotlink a, .vm .vm-causerow__meta a,
  .vm .vm-towns summary, .vm .vm-towns button { min-height: 44px; display: inline-flex; align-items: center; }
  .vm .vm-foot li a, .vm .vm-foot__dg { display: inline-block; padding-block: 10px; }
}
@media (max-width: 1023.98px) {
  html body .vm .vm-ticket__terms, html body .vm .vm-curated, html body .vm .vm-causerow__meta a, html body .vmh .vm-homehead .vm-homehead__trust { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 1023.98px) { .vm .vm-ticket .vm-ticket__meta .vm-ticket__terms, .vm .vm-ticket .vm-tmeta .vm-ticket__terms { min-height: 44px; } }
@media (max-width: 1023.98px) { .vm .vm-spotlink a { min-height: 44px; display: inline-flex; align-items: center; } }
@media (max-width: 1023.98px) { .vm p.vm-spotlink a { min-height: 44px; display: inline-flex; align-items: center; } }
/* ---- Live sweep LOW fixes ---- */
/* L1: no text under 12px (the pack preview mock-up stays small; it's aria-hidden). */
.vm .vm-ticket__stub small, .vm .vm-ticket__storelink i, .vm .vm-visit__badge small, .vm .vm-badge--top, .vm .vm-activetable__type, .vm .vm-foot__wales span, .vm .vm-picknav__score, .vm .vm-mega__drops small, .vm .vm-mega__dropimg i, .vm .vm-mega__head { font-size: 12px; }
/* L2: the cause tooltip stays on screen on small phones. */
@media (max-width: 400px) { .vm .vm-causeicon__tip { left: auto; right: 0; max-width: calc(100vw - 32px); } }
/* L6: "✓ You're supporting {cause}" breaks evenly. */
.vm .vm-btn--gleam.vm-btn--block, .vm .vm-choosecard .vm-btn { text-wrap: balance; }
/* L7: ticket meta: a "·" never starts a wrapped line (the row clips the separators of line-start items, with a small
   margin so focus rings still show). */
.vm .vm-ticket .vm-tmeta { overflow: clip; overflow-clip-margin: 3px; }
/* L8: Money advice menu titles get three lines before they're cut. */
.vm .vm-mega__stories a > b, .vm .vm-mega__stories a > span:last-child { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* L10: the cause bar fits on the smallest phones. */
@media (max-width: 379px) { .vm .vm-givebar__in { gap: 6px; } .vm .vm-givebar__btn { padding-inline: 10px; } }
/* B3: on phones the results count repeats the hero's figure, so it's kept for screen readers only and the sort has the
   row to itself; the first product starts within 520px at 390. */
@media (max-width: 639.98px) {
  .vm .vm-dropsresults__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vm .vm-dropsresults { justify-content: flex-end; }
}
/* B4: sort pills are 44px up to 1023px, and the scrolling chip rows keep 6px above and below for focus rings at every
   width. */
@media (max-width: 1023.98px) { .vm .vm-dropssort .vm-seg a { min-height: 44px; display: inline-flex; align-items: center; } }
.vm .vm-chips, .vm .vm-dropsbar__cats { padding-block: 6px; }
.vm .vm-dropsbar .vm-dropsbar__cats { padding-block: 6px; }
/* C1: on tablets the footer's link groups sit in four columns under the brand; they fold like on phones only up to 767px. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .vm .vm-foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
  .vm .vm-foot__brand { grid-column: 1 / -1; margin-bottom: 16px; }
}
/* Sensitive pages have three link groups, not four: three columns, with no empty one. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .vm .vm-foot__grid:not(:has(> :nth-child(5))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 767.98px) {
  .vm .vm-foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
  .vm .vm-foot__brand { grid-column: 1 / -1; margin-bottom: 16px; }
  .vm .vm-foot__group summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.14); }
  .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-top: 8px; }
}
/* C6: small sizes: "Add to" on the extension buttons is 12px; the phone menu's Search button is 44px tall. */
.vm .vm-extbtn small { font-size: 12px; line-height: 15px; }
.vm .vm-mobilenav .vm-search button { min-height: 44px; }
/* D1: the cause bar's buttons are 44px up to 1023px; under 380px it reads "Supporting {name}" with a slimmer button, so
   the name isn't cut off. */
.vm .vm-givebar__lead--short { display: none; }
@media (max-width: 1023.98px) { html body .vm .vm-givebar .vm-givebar__action, html body .vm .vm-givebar .vm-givebar__btn { min-height: 44px; } }
@media (max-width: 379px) {
  .vm .vm-givebar__lead { display: none; }
  .vm .vm-givebar__lead--short { display: inline; }
  html body .vm .vm-givebar .vm-givebar__btn { padding-inline: 10px; }
}
@media (max-width: 640.98px) {
  html body .vm .vm-givebar .vm-givebar__text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 18px; }
  html body .vm .vm-givebar .vm-givebar__note { display: none; }
}
/* D2: 60ch keeps Figtree at about 70 characters a line (70ch gave 85-90). */
.vm .vm-prose > *, .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-formfine, .vm .vm-sources, .vm .vm-givesignup p, .vm .vm-homehead__intro p, .vmh .vm-homehead__intro p { max-width: 60ch; }
.vm .vm-prose > figure, .vm .vm-prose > table, .vm .vm-prose > .vm-pick, .vm .vm-prose > div { max-width: none; }
/* D4: layout leftovers. A cause group with one card spans the row; in three-column card grids (1024px+) a lone last
   card spans the row, photo and text side by side; the A to Z sits in two even rows on wide screens. */
.vm .vm-causerows > :only-child { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .vm .vm-cards:not(.vm-cards--feature) > :last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: none; }
  .vm .vm-cards:not(.vm-cards--feature) > :last-child:nth-child(3n+1) .vm-card__art { aspect-ratio: auto; min-height: 100%; }
}
@media (min-width: 900px) { .vm .vm-az { max-width: calc(14 * 50px); } }
/* D5: small targets. Pager links 44px; the search fields fill their 48px boxes; footer headings 44px at every width; the
   join form's tick box 24px. */
.vm .vm-pager a, .vm .vm-pager span { min-height: 44px; display: inline-flex; align-items: center; }
.vm .vm-picker__search input, .vm .vm-newssearch input { align-self: stretch; height: auto; min-height: 44px; }
.vm .vm-foot__group summary { min-height: 44px; }
.vm .vm-check input[type="checkbox"], .vm #j-auth { width: 24px; height: 24px; flex: none; }
.vm .vm-actions a.vm-link[rel="next"], .vm .vm-actions a.vm-link[rel="prev"] { min-height: 44px; display: inline-flex; align-items: center; }
/* E1/E2: the extension hero is two columns from 768px (the still beside the copy, as on desktop); below that the still
   comes after the steps and the Add button, cropped to the popup so it's readable. */
@media (min-width: 768px) { .vm .vm-exthero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 32px; } .vm .vm-exthero__head { grid-column: 1 / -1; } }
@media (max-width: 767.98px) {
  .vm .vm-exthero .vm-exthero__still { order: 3; }
  .vm .vm-exthero__still img { aspect-ratio: 760 / 660; }
}
@media (max-width: 1023.98px) { .vm .vm-exthero .vm-exthero__still img { aspect-ratio: 760 / 660; } }
/* E3: on the extension page the "Also for …, it's free" line is 15px (the menu's stays small). */
.vm .vm-extinstall .vm-extalso { font-size: 15px; line-height: 22px; }
/* v2 HIGH: hovering a second mega menu never shows two panels; the at-a-glance "Ends" column wraps inside its card;
   town lists scroll inside a box; /how-we-verify's badge table wraps; the newsletter band's note and fine print run
   under both columns so an error doesn't squeeze the input. */
@media (min-width: 1100px) and (hover: hover) {
  .vm .vm-header .vm-header__nav:has(.vm-drop[data-open]) .vm-drop:not([data-open]):hover > .vm-drop__panel { visibility: hidden; opacity: 0; }
}
.vm-activetable th:nth-child(3), .vm-activetable td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 560px) { .vm-activetable th:nth-child(3), .vm-activetable td:nth-child(3) { width: 96px; } }
@media (max-width: 559.98px) { .vm-activetable th:nth-child(3), .vm-activetable td:nth-child(3) { width: 72px; } }
.vm-towns ul { max-height: min(60vh, 480px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
@media (max-width: 559.98px) { .vm-towns ul { columns: 2 120px; } }
.vm-list:not(:has(.vm-ticket:not([hidden]))):not(:has(.vm-empty))::before { content: "No offers match this filter right now."; display: block; padding: 32px 24px; text-align: center; color: var(--ink-muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.vm-list:empty::before { content: none; }
.vm-tablewrap td { white-space: normal; }
.vm-tablewrap td:first-child { white-space: nowrap; }
@media (max-width: 599.98px) { .vm-tablewrap td:first-child { white-space: normal; min-width: 9em; } }
.vm-band form > .vm-formnote, .vm-band form > .vm-formfine { grid-column: 1 / -1; }
.vm-band form .vm-btn { white-space: nowrap; }
/* v2 FORMS: one error state everywhere. The note is bold in the warning colour (pink on the dark band), the field gets a
   warning border and halo, the note sits between the field and the button, and placeholders are the muted ink. */
.vm .vm-formnote, .vm .nx-error { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--expiring); }
.vm .vm-band .vm-formnote { color: #ffb4a8; opacity: 1; }
.vm :is(input, select, textarea)[aria-invalid="true"], .vm .vm-field :is(input, select, textarea):user-invalid { border-color: var(--expiring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--expiring) 22%, transparent); }
.vm .nx-form:has(input[aria-invalid="true"]) { border-color: var(--expiring); }
.vm .nx-form input[aria-invalid="true"] { box-shadow: none; }
.vm .vm-signup input { order: 1; }
.vm .vm-signup .vm-formnote { order: 2; margin-top: -2px; }
.vm .vm-signup .vm-btn { order: 3; }
.vm .vm-signup .vm-formfine, .vm .vm-signup .vm-extnotify__fine { order: 4; }
.vm .vm-check { align-items: flex-start; }
.vm .vm-check input { margin-top: -2px; }
.vm .vm-check + .vm-field-error { margin-top: -10px; padding-left: 32px; }
.vm .vm-check input[aria-invalid="true"] { outline: 2px solid var(--expiring); outline-offset: 2px; box-shadow: none; }
.vm .vm-errsummary li::marker { color: var(--expiring); }
.vm .vm-errsummary:focus { outline-color: var(--ink); }
.vm input::placeholder, .vm textarea::placeholder { color: var(--ink-muted); }
@media (max-width: 560.98px) { .vm .vm-ext-phone .vm-btn, .vm .vm-extnotify .vm-btn { width: 100%; min-height: 48px; } }
.vm .vm-extnotify__fine { line-height: 18px; }
.vm .vm-acctform .vm-formfine { font-size: 13px; line-height: 18px; }
/* v2 FOCUS: the search box gets a visible teal halo; rings on the dark newsletter band are yellow; the cause icon's ring
   is round; an open menu's chevron stays visible (pointing up). */
.vm .vm-search:focus-within { box-shadow: 0 0 0 3px rgba(11, 110, 105, .45); }
.vm .vm-band :focus-visible, .vm .vm-band input:focus-visible { outline: 3px solid var(--gleam); outline-offset: 2px; }
.vm .vm-causeicon { border-radius: 50%; }
.vm .vm-header .vm-header__nav .vm-drop[data-open] .vm-drop__btn { position: static; width: 20px; height: 24px; margin-right: -20px; overflow: visible; clip: auto; opacity: 1; }
.vm .vm-drop[data-open] .vm-drop__btn svg { transform: rotate(180deg); }
/* v2 PANELS: open/closed arrows on the price-drops, extension and towns <details>; town names left-aligned with their
   count beside them; no rule between label and value in the phone at-a-glance table; the menu sheet covers the page
   up to 1099px and the header search hides while it's open; the cause picker marks the cause you support. */
.vm .vm-dropsnote > summary::after, .vm .vm-extperms > summary::after, .vm .vm-towns summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.vm .vm-dropsnote[open] > summary::after, .vm .vm-extperms[open] > summary::after, .vm .vm-towns[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.vm .vm-towns summary { display: flex; align-items: center; list-style: none; min-height: 44px; padding-block: 12px; }
.vm .vm-towns summary::-webkit-details-marker { display: none; }
.vm .vm-towns li { display: flex; align-items: baseline; gap: 4px; }
.vm .vm-towns button { text-align: left; }
@media (max-width: 1023.98px) { .vm .vm-towns button { padding: 8px 0; } }
@media (max-width: 559.98px) { .vm .vm-glance tr + tr td { border-top: 0; } }
@media (max-width: 1099.98px) {
  .vm .vm-header .vm-mobilenav { position: fixed; inset: var(--header-h, 68px) 0 0; z-index: 6; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); align-content: start; }
  html.is-menu-open .vm .vm-header #mnav.vm-mobilenav { max-height: none; }
  html.is-menu-open .vm .vm-hsearch, html.is-menu-open .vm .vm-header__searchbtn { visibility: hidden; }
}
.vm .vm-picker .vm-seg { height: 48px; }
/* The cause you support: a grey row with a teal bar down its left edge, and the tick. */
.vm .vm-dialog__list .vm-charity--btn[aria-current="true"] { background: var(--paper-2, #f1f1ec); box-shadow: inset 3px 0 0 var(--teal); }
.vm .vm-dialog__list .vm-charity--btn[aria-current] > .vm-ico { display: none; }
.vm .vm-dialog__list .vm-charity--btn[aria-current]::after { content: "✓"; grid-column: 3; grid-row: 1; justify-self: center; font: 800 18px/1 var(--font-sans); color: var(--teal); }
.vm .vm-catmore__foot button[aria-busy="true"] { opacity: .6; pointer-events: none; }
.vm .vm-give { scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
/* v2 ALIGNMENT: things in the same row line up. Ticket meta and news-card bylines sit on the bottom edge; Get code fills
   the card; mega-menu drop prices share a row; spotlight prices share a baseline box; the store hero's meta row is
   centred; portrait logos fit their box; menu lists line up with their headings. */
.vmh .bx-tickets .vm-ticket__text { display: flex; flex-direction: column; gap: var(--space-2); }
.vmh .bx-tickets .vm-ticket__meta { margin-top: auto; }
.vm .vmh .bx-tickets .vm-ticket__action, .vmh .bx-tickets .vm-ticket__action { width: auto; justify-self: stretch; }
.vm .vm-card__body { grid-template-rows: auto auto auto 1fr; align-content: stretch; }
.vm .vm-card__body > .vm-cardby { align-self: end; }
.vm .vm-mega__drops a { grid-template-rows: auto auto 1fr auto; }
.vm .vm-prose .vm-product__price { min-height: 28px; display: flex; align-items: baseline; }
.vm .vm-hero__sub { align-items: center; }
.vm .vm-logoimg { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.vm .vm-logoimg img { min-height: 0; max-height: 100%; }
#drop-give .vm-mega__promo { margin-top: 16px; }
.vm .vm-mega__sections { margin-left: -12px; }
.vm .vm-mega__causes { margin-left: -8px; }
.vm .vm-section__head { align-items: baseline; }
/* v2 CHIP ROWS: on phones the filter rows run to the screen edge with room for the first and last focus rings, fade at
   the right while there's more to scroll (site.js), and sit 10px clear of the first ticket. */
@media (max-width: 767.98px) {
  .vm .vm-chips--top, .vmh .bx-filters.bx-filters, .vm .vm-newssearch ~ .vm-chips { margin-inline: -16px; padding: 6px 16px; scroll-padding-inline: 16px; }
  .vm .vm-chips--top.is-scrollable:not(.is-end), .vmh .bx-filters.is-scrollable:not(.is-end), .vm .vm-newssearch ~ .vm-chips.is-scrollable:not(.is-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
}
.vm .vm-chips--top { margin-bottom: 10px; }
/* v2 STICKY: on small phones the cause icon's tooltip is a full-width card under the header; the give-back pinned bar
   covers the strip above it and keeps "Change" on its line; the shadow under the sticky header is a soft dark fade, not
   a pale haze over dark and yellow sections. */
@media (max-width: 479.98px) { .vm .vm-header .vm-causeicon__tip { position: fixed; left: 16px; right: 16px; width: auto; max-width: none; top: calc(var(--header-h, 68px) + 4px); } }
html .vm .vm-give__pinned { box-shadow: 0 -8px 0 var(--paper), var(--shadow-drop); display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
html .vm .vm-give__pinned [data-give-change] { display: inline; min-height: 0; padding-block: 10px; margin-block: -10px; }
html .vm .vm-header::after { background: linear-gradient(rgba(17, 20, 24, .10), transparent); }
/* v2 GIVE BACK ROWS: cause-row meta items are separated by drawn dots with even line spacing (the About/Share links keep a
   44px hit area without spreading the lines); on phones the button sits under the name so the name gets the width; the
   chosen row's monogram stays visible; Choose and Selected are the same width; search and filter are the same height. */
.vm .vm-causerow__meta { display: flex; flex-wrap: wrap; column-gap: 14px; overflow-x: clip; overflow-y: visible; }
.vm .vm-causerow__meta > * { position: relative; margin-left: -14px; padding-left: 14px; }
.vm .vm-causerow__meta > *::before { content: "·"; position: absolute; left: 0; width: 14px; text-align: center; color: var(--ink-muted); }
html .vm .vm-causerow__meta a { display: inline-block; min-height: 0; line-height: 18px; padding-block: 13px; margin-block: -13px; }
.vm .vm-causerow__meta a::before { top: 13px; }
@media (max-width: 479.98px) {
  html .vm .vm-causerow { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: start; }
  html .vm .vm-causerow > .vm-btn { grid-column: 2; justify-self: start; margin-top: 8px; }
}
.vm .vm-causerow.is-chosen .vm-charity__logo { background: #fff; box-shadow: inset 0 0 0 1px var(--teal); }
.vm .vm-causerow .vm-btn--sm { min-width: 108px; justify-content: center; }
.vm .vm-give__pick .vm-seg, .vm .vm-picker .vm-seg { min-height: 48px; box-sizing: border-box; }
.vm .vm-give__pick .vm-muted a { color: var(--teal); }
.vm .vm-choosecard .vm-btn, .vm .vm-actioncard .vm-btn { height: auto; min-height: 48px; padding-block: 12px; border-radius: var(--radius-md); white-space: normal; }
/* One step-badge style: the yellow numbered disc, as on /give-back and the cause pages' action cards. */
.vm .vm-howsteps li::before { background: var(--gleam); color: var(--on-gleam); }
/* READING WIDTH: prose paragraphs, lists and headings fill their column, so the gap on the right matches the padding on the left.
   Numbered lists match bulleted ones, a question heading sits close to its answer, and last lines don't end on one word. */
.vm .vm-prose > p, .vm .vm-prose > ul, .vm .vm-prose > ol, .vm .vm-prose > h2, .vm .vm-prose > h3,
.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,
.vm .vm-charabout p, .vm .vm-clubcta p { max-width: none; }
.vm .vm-prose > nav.vm-picknav, .vm .vm-prose > aside.vm-tip, .vm .vm-prose > .vm-tip { max-width: none; }
.vm .vm-prose ol { margin: 0; padding-left: 26px; display: grid; gap: 6px; }
.vm .vm-prose h3 + p { margin-top: -8px; }
p { text-wrap: pretty; }
/* v2 LAYOUT POLISH. */
/* Tickets: store-page stub values stay readable on phones ("5%" was 12px); long values ("£17.99") leave room in the stub. */
/* Homepage on phones: the links row clears the dashed rule; no native clear button in the search box; category tiles at
   1024 never leave one on its own; popular shop names wrap to two lines instead of being cut. */
.vmh .vm-homehead__links { margin-bottom: 12px; }
.vm-homesearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* Join hero steps on tablets: one column. */
@media (max-width: 900px) { .vm .vm-vhero__steps { grid-template-columns: 1fr; } }
/* Footer: round 44px social buttons on touch widths, one rule on phones, the logo capped at 44px. */
@media (max-width: 1023.98px) { .vm .vm-foot .vm-foot__social a { display: inline-flex; width: 44px; height: 44px; padding: 0; justify-content: center; align-items: center; } }
@media (max-width: 767.98px) { .vm .vm-foot__bottom { border-top: 0; } }
.vm .vm-foot .vm-logo img { height: 44px; width: auto; }
.vm .vm-foot .vm-logo { max-height: 44px; }
/* Toast: full width with a gutter on phones, above the home bar. */
@media (max-width: 559.98px) { .vm-toast { left: 16px; right: 16px; transform: translateY(20px); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .vm-toast.is-on { transform: none; } }
/* A to Z: left-aligned with the page. */
.vm .vm-az { justify-content: flex-start; margin-inline: 0; }
/* Price drops hero: two stats take two slots, on the right. */
@media (min-width: 768px) { .vm .vm-dropshero__stats:not(:has(> div:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 160px)); justify-content: end; } }
/* Articles: product images blend into the gradient; on desktop the image stays in view beside a long pick. */
.vm .vm-pick__media img { mix-blend-mode: multiply; }
@media (min-width: 900px) { .vm .vm-prose .vm-pick__media { align-self: start; position: sticky; top: 96px; } }
/* Store pages. */
@media (pointer: coarse) { .vm .vm-locator .maplibregl-ctrl-group button { width: 44px; height: 44px; } }
.vm .vm-visit__badge { width: 92px; height: 92px; }
@media (max-width: 559.98px) { .vm .vm-share__label { flex-basis: 100%; } }
.vm .vm-stats--nocode { max-width: 240px; justify-self: end; }
.vm .vm-whyvm__links { display: flex; flex-wrap: wrap; column-gap: 20px; }
.vm .vm-whyvm__links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Author page on phones: links inline, a 96px photo. About: team cards full width on phones. */
@media (max-width: 479.98px) {
  .vm .vm-authorlinks a { display: inline; }
  .vm .vm-authorhead .vm-avatar { width: 96px; height: 96px; }
  .vm .vm-teammini a { flex: 1 1 100%; }
}
/* 404: "another excuse" on its own line; the search button 44px. */
.vm .vm-err__more { display: flex; margin-top: 8px; margin-left: 0; }
.vm .vm-err .vm-search button, .vm .vm-search button { min-height: 44px; }
@media (min-width: 768px) and (max-width: 1023.98px) { .vm .vm-foot .vm-foot__group ul { gap: 0; margin-top: 8px; padding-top: 0; } .vm .vm-foot .vm-foot__group summary { min-height: 0; } }
/* v2 TAP TARGETS on touch widths: standalone links get a 44px hit area (padding with matching negative margin, so the
   layout doesn't move); the article's section pill is at least 32px; Terms has room either side. */
@media (max-width: 1023.98px) {
  .vm .vm-givebar__text a, .vm .vm-foot__dg a, .vm .vm-causerow__name, .vm .vm-charshare, .vm .vm-charintro__chip,
  .vm .vm-authorlinks a, .vm .vm-byline, .vm .vm-newssearch__count a, .vm .vm-facts a, .vm .vm-hero__domain,
  .vm .vm-panel > .vm-link, .vm .vm-panel > p > .vm-link, .vm .vm-empty .vm-link, .vmh .tx a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .vm .vm-charintro__chip { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; margin-block: 0; }
  .vmh .tx a { padding-block: 13px; margin-block: -13px; }
  .vm .vm-header .vm-logo { min-height: 44px; display: inline-flex; align-items: center; }
  .vm .vm-header .vm-causeicon { width: 44px; height: 44px; }
  .vm .vm-pill { min-height: 32px; display: inline-flex; align-items: center; }
  html body .vm .vm-ticket .vm-ticket__meta .vm-ticket__terms, html body .vm .vm-ticket .vm-tmeta .vm-ticket__terms { padding-inline: 8px; margin-inline: -8px; }
  .vm .vm-givenote__x { width: 44px; height: 44px; }
}
/* 18+ stores: the notice at the top of the sidebar. */
.vm .vm-agepanel { display: grid; gap: 8px; border-color: var(--ink); }
.vm .vm-agepanel h3 { display: flex; align-items: center; gap: 10px; font: 700 18px/24px var(--font-display); }
.vm .vm-agepanel__badge { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 14px/1 var(--font-display); }
.vm .vm-agepanel p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
/* Sensitive stores: a small 18+ tag on the tile and in the store header; a plain line instead of any cause panel. */
.vm .vm-18tag { display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--radius-pill); background: var(--ink); color: #fff; font: 800 12px/20px var(--font-display); letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.vm .vm-18tag a { color: #fff; margin-left: 4px; text-decoration: underline; text-underline-offset: 2px; }
/* Charity logos in the picker, cause pages, the Charities menu and the picker dialog: the real logo at 40px in a white
   circle with 4px padding, contained, so wide wordmarks (WWF, Barnardo's, RNLI) stay readable. */
.vm .vm-causerow .vm-charity__logo, .vm .vm-mega__causes .vm-charity__logo, .vm .vm-dialog__list .vm-charity__logo,
.vm .vm-charchoose .vm-charity__logo, .vm .vm-panel .vm-stores .vm-charity__logo, .vm .vm-give .vm-charity__logo { width: 40px !important; height: 40px !important; flex: none; }
html .vm .vm-charlogo:not(.vm-charlogo--icon) { border-radius: 50%; background: #fff !important; padding: 4px; box-sizing: border-box; border: 1px solid var(--edge); overflow: hidden; }
.vm .vm-charlogo:not(.vm-charlogo--icon) img { width: 100%; height: 100%; object-fit: contain; padding: 0; }
.vm .vm-notpartners { margin: 10px 0 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vm .vm-dialog .vm-notpartners { margin: 8px 0 0; }
.vm .vm-dialog__list .vm-charity--btn { grid-template-columns: 40px minmax(0, 1fr) 20px; }
/* In the picker dialog, hover and focus are grey, so only the cause you support is teal. */
.vm .vm-dialog__list .vm-charity--btn:not([aria-current]):hover, .vm .vm-dialog__list .vm-charity--btn:not([aria-current]):focus-visible { background: var(--surface-sunk); border-color: var(--line-strong); }
.vm .vm-storeoffers { display: contents; }
/* Articles beside the sidebar: 42rem (about 79 characters a line) so the text doesn't stop 250px short of the sidebar. */
@media (min-width: 1000px) {
  .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: 42rem; }
}

/* ---- CSS v3 HIGH ---- */
/* H1: the towns list is a grid that scrolls down, never sideways (columns + max-height sent the overflow right). */
.vm .vm-towns ul { columns: auto !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 24px; align-content: start; overflow-x: hidden; overflow-y: auto; max-height: 480px; }
@media (max-width: 559.98px) { .vm .vm-towns ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } }
.vm .vm-towns button { line-height: 20px; padding-block: 12px; }
.vm .vm-towns li > span { flex: none; }
/* H3: the "We give 50%" badge has its own room, clear of the text and the Visit button. */
.vm .vm-visit:has(.vm-visit__badge) > h3 { min-height: 84px; }
.vm .vm-visit:has(.vm-visit__badge) > p { padding-right: 76px; }
.vm .vm-visit:not(:has(.vm-visit__badge)) > h3 { padding-right: 0; }
/* H6: clip, not hidden, so the pick card isn't a scroll container and its image sticks under the header. */
@media (min-width: 900px) { .vm .vm-prose .vm-pick { overflow: clip; } }
/* Home screen app banner: the cookie notice's card, led by the app icon. */
.vm-appbanner__head { display: flex; align-items: flex-start; gap: 12px; }
.vm-appbanner__head img { flex: none; border-radius: 10px; box-shadow: var(--shadow-drop); }
.vm-appbanner__head p { margin: 0; }
.vm-appbanner__head b { display: block; }
.vm-appbanner__share { vertical-align: -3px; color: var(--teal); }
.vm-appbanner [hidden] { display: none !important; }
/* Admin charity form: logo and header photo previews. */
.vm-admin__images { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.vm-admin__label { font-weight: 600; font-size: 14px; }
.vm-admin__logo { display: block; max-width: 240px; max-height: 96px; object-fit: contain; padding: 8px; background: #fff; border: 1px solid var(--edge); border-radius: var(--radius-md); }
.vm-admin__tile { display: grid; place-items: center; width: 96px; height: 96px; border-radius: var(--radius-md); font: 800 28px/1 var(--font-display); }
.vm-admin__header { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius-md); }
/* Header photo focus point: the whole photo to click on, with the page's wide crop under it. */
.vm-focus { display: grid; gap: 8px; justify-items: start; }
.vm-focus__pick { position: relative; max-width: 100%; cursor: crosshair; line-height: 0; }
.vm-focus__pick img { display: block; max-width: 100%; max-height: 420px; border-radius: var(--radius-md); }
.vm-focus__dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid #fff; border-radius: 50%; background: rgba(230, 60, 40, .85); box-shadow: 0 0 0 2px rgba(0,0,0,.4); pointer-events: none; }
.vm-focus .vm-admin__header { aspect-ratio: 4 / 1; max-height: none; }
/* ---------- admin shell: dark sidebar, fluid content up to 4600px, cards that flow into as many columns as fit ---------- */
.vm-adminbody { margin: 0; background: #eef0eb; }
.vm-adminshell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.vm-adminshell--guest { display: block; }
.vm-adminside { position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column; gap: 18px; height: 100vh; overflow-y: auto; padding: 20px 14px; background: linear-gradient(180deg, #0f2221 0%, #0a1716 100%); color: #c3d2d0; }
.vm-adminside__brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; text-decoration: none; font: 800 16px/1.15 var(--font-display); }
.vm-adminside__brand img { width: 46px; height: auto; padding: 4px; border-radius: 10px; background: #fff; }
.vm-adminside__brand small { display: block; margin-top: 3px; color: #5fd0c4; font: 700 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.vm-adminside__nav { display: grid; gap: 2px; }
.vm-adminside__country { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 0 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.vm-adminside__country button { flex: 1; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: transparent; color: rgba(255, 255, 255, .7); font: 700 12px/1 var(--font-sans); letter-spacing: .06em; cursor: pointer; }
.vm-adminside__country button:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.vm-adminside__country button[aria-pressed="true"] { background: #5fd0c4; border-color: #5fd0c4; color: #0b1f2a; }
.vm-adminside__country small { flex-basis: 100%; color: rgba(255, 255, 255, .55); font-size: 11px; }
.vm-adminside a, .vm-adminside button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: inherit; font: 600 14px/1 var(--font-sans); text-decoration: none; text-align: left; cursor: pointer; transition: background .12s, color .12s; }
.vm-adminside svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.vm-adminside a:hover, .vm-adminside button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.vm-adminside a:focus-visible, .vm-adminside button:focus-visible { outline: 2px solid #5fd0c4; outline-offset: 2px; }
.vm-adminside a[aria-current] { background: rgba(43, 181, 168, .17); color: #fff; }
.vm-adminside a[aria-current]::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #2bb5a8; }
.vm-adminside a[aria-current] svg { color: #5fd0c4; opacity: 1; }
.vm-adminside__foot { display: grid; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.vm-adminside__foot form { margin: 0; }
.vm-admin__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: var(--radius-pill); background: #e4572e; color: #fff; font: 700 11px/1 var(--font-sans); }

.vm-admin { width: 100%; max-width: 4600px; min-width: 0; padding: 28px clamp(16px, 2.2vw, 56px) 72px; }
.vm-adminshell--guest .vm-admin { max-width: 520px; margin: 0 auto; }
.vm-admin h1 { margin: 0 0 var(--space-4); font: 800 clamp(26px, 1vw + 18px, 40px)/1.15 var(--font-display); letter-spacing: -.01em; }
.vm-admin h2 { margin: var(--space-6) 0 var(--space-3); font: 700 19px/1.3 var(--font-display); }
.vm-admin__head { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: flex-start; margin-bottom: var(--space-6); }
.vm-admin__head h1, .vm-admin__head h2 { margin: 0; }
.vm-admin__eyebrow { margin: 0 0 6px; color: var(--teal); font: 700 12px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.vm-admin > .vm-flash, .vm-admin > .vm-warn, .vm-admin > .vm-warn + .vm-warn { margin: 0 0 var(--space-4); border-radius: 14px; }
.vm-admin > .vm-flash { background: #d7f0eb; box-shadow: inset 4px 0 0 var(--teal); }
.vm-admin__todo { margin: 0 0 var(--space-6); }

.vm-admin__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: var(--space-6); }
.vm-admin__stat { position: relative; overflow: hidden; padding: 18px 20px 20px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-rest); }
.vm-admin__stat::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--teal), #2bb5a8); }
.vm-admin__stat b { display: block; font: 800 34px/1.1 var(--font-display); letter-spacing: -.02em; }

.vm-admin__cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 620px), 1fr)); align-items: start; }
.vm-admin__card { min-width: 0; padding: 20px 22px 22px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-rest); }
.vm-admin__card h2 { margin-top: 0; }
.vm-admin__card .vm-table { box-shadow: none; border: 1px solid var(--line); }

/* Forms: each section is a card; the cards fill the width in as many columns as fit, and the Save bar floats at the bottom. */
.vm-admin__form, .vm-admin__form.vm-panel { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); align-items: start; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.vm-admin__form > :not(fieldset), .vm-admin__group--wide { grid-column: 1 / -1; }
.vm-admin__group, .vm-admin .vm-colours { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: 20px 22px 22px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-rest); }
.vm-admin__group > legend, .vm-admin .vm-colours > legend { float: left; width: 100%; margin: 0; padding: 0; font: 700 17px/1.3 var(--font-display); }
.vm-admin__subset { margin: 0; padding: 0; border: 0; }
.vm-admin__subset > legend { margin-bottom: 6px; padding: 0; font: 700 14px/18px var(--font-sans); }
.vm-admin__form > .vm-actions:last-child { position: sticky; bottom: 16px; z-index: 5; justify-self: start; padding: 10px; border: 1px solid var(--edge); border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-lift); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vm-admin .vm-field input:not([type=checkbox]):not([type=color]):not([type=file]), .vm-admin .vm-field select, .vm-admin .vm-field textarea { border-color: #c9cdc5; background: #fbfbf9; transition: border-color .12s, box-shadow .12s, background .12s; }
.vm-admin .vm-field input:focus, .vm-admin .vm-field select:focus, .vm-admin .vm-field textarea:focus { border-color: var(--teal); outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(11, 110, 105, .2); }
.vm-admin .vm-field input[type=file] { padding: 10px; border: 1.5px dashed #c9cdc5; border-radius: var(--radius-md); background: #fbfbf9; font-size: 14px; }
.vm-admin .vm-field input[readonly] { color: var(--ink-muted); }
.vm-admin__row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Tables and panels. */
.vm-admin .vm-table { border: 0; border-radius: 16px; box-shadow: var(--shadow-rest); }
.vm-admin .vm-table th { padding: 12px 14px; background: #f6f7f3; }
.vm-admin .vm-table td { padding: 12px 14px; }
.vm-admin .vm-table tbody tr:hover td { background: #f4faf9; }
.vm-admin .vm-table td.vm-actions { display: table-cell; white-space: nowrap; }
.vm-admin .vm-table td.vm-actions > * + * { margin-left: 12px; }
.vm-admin .vm-table td.vm-actions form { display: inline-block; }
.vm-admin .vm-nettable td.vm-actions form { display: block; }
.vm-admin .vm-nettable td.vm-actions > * + * { margin-left: 0; }
/* A card holding a table takes the full width, so the table isn't squeezed into a column. */
.vm-admin__card:has(.vm-table) { grid-column: 1 / -1; }
.vm-admin .vm-tablescroll { border-radius: 16px; }
.vm-admin > .vm-panel, .vm-admin .vm-panel { border: 0; border-radius: 16px; }
.vm-admin__thumb { display: block; max-width: 240px; max-height: 160px; border: 1px solid var(--edge); border-radius: var(--radius-sm); object-fit: cover; }
.vm-admin__thumb--round { width: 96px; height: 96px; border-radius: 50%; }
.vm-admin__note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--teal-soft); font-size: 14px; line-height: 21px; }
.vm-admin__who { display: flex; gap: 10px; align-items: flex-start; }
.vm-admin__mini { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 3px; border: 1px solid var(--edge); border-radius: var(--radius-sm); background: #fff; object-fit: contain; font: 800 13px/1 var(--font-display); }

/* Finance: network tabs, date range, status split. */
.vm-fintabs { display: flex; flex-wrap: wrap; gap: 0 4px; margin: var(--space-4) 0 var(--space-4); border-bottom: 1px solid #d9dcd4; }
.vm-fintabs a { flex: none; padding: 12px 16px; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--ink-muted); font: 700 15px/1 var(--font-sans); text-decoration: none; }
.vm-fintabs a:hover { color: var(--ink); }
.vm-fintabs a[aria-current] { border-bottom-color: var(--teal); color: var(--ink); }
.vm-fintabs a.is-sample { font-weight: 500; }
.vm-finrange { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-6); }
.vm-finrange .vm-adminfilters { margin: 0; }
.vm-finrange .vm-adminfilters a[aria-current] { border-color: var(--teal); background: var(--teal); color: #fff; }
.vm-finrange__custom { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.vm-finrange__custom label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.vm-finrange__custom input { min-height: 40px; padding: 0 10px; border: 1px solid #c9cdc5; border-radius: var(--radius-md); background: #fbfbf9; font: 14px var(--font-sans); }
.vm-finsplit { display: flex; height: 14px; overflow: hidden; border-radius: 999px; background: var(--surface-sunk); }
.vm-finstatus { display: grid; gap: 4px; margin: 16px 0 0; }
.vm-finstatus > div { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vm-finstatus dt { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.vm-finstatus dd { margin: 0; font: 800 18px/1.2 var(--font-display); }
.vm-finstatus small { grid-column: 1 / -1; color: var(--ink-muted); font-size: 13px; }
.vm-finstatus dt i { width: 10px; height: 10px; border-radius: 3px; }
.vm-finstatus__give { border-bottom: 0 !important; }
.vm-finstatus__give dd { color: var(--teal); }
.vm-finsplit .is-pending, .vm-finstatus .is-pending { background: var(--gleam); }
.vm-finsplit .is-confirmed, .vm-finstatus .is-confirmed { background: #2bb5a8; }
.vm-finsplit .is-paid, .vm-finstatus .is-paid { background: #1f7a4d; }
.vm-finsplit .is-declined, .vm-finstatus .is-declined { background: #e4572e; }
.vm-fintable td:not(:first-child), .vm-fintable th:not(:first-child) { text-align: right; white-space: nowrap; }
.vm-fintable tfoot th { border-top: 2px solid var(--line-strong); background: #f6f7f3; }

/* Live / Preview / Hidden switch beside Save. */
.vm-publish { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 0; border-radius: 12px; background: var(--surface-sunk); }
.vm-publish label { position: relative; cursor: pointer; }
.vm-publish input { position: absolute; opacity: 0; pointer-events: none; }
.vm-publish span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 9px; color: var(--ink-muted); font: 700 14px/1 var(--font-sans); transition: background .12s, color .12s; }
.vm-publish label:hover span { color: var(--ink); }
.vm-publish input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(17, 20, 24, .14); }
.vm-publish input[value=live]:checked + span, .vm-publish input[value=publish]:checked + span { background: #1f7a4d; color: #fff; }
.vm-publish input[value=preview]:checked + span { background: var(--gleam); color: var(--on-gleam); }
.vm-publish input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Analytics: change against the period before, a bar per day, and share bars. */
.vm-admin__card--wide { grid-column: 1 / -1; }
.vm-admin__stat small.vm-gachange { display: block; margin-top: 6px; color: var(--ink-muted); font-size: 13px; }
.vm-gachange.is-up { color: #1f7a4d; }
.vm-gachange.is-down { color: #b42318; }
.vm-gachart { display: flex; align-items: flex-end; gap: 3px; height: 200px; padding-top: 8px; }
.vm-gachart span { display: flex; flex: 1; align-items: flex-end; height: 100%; }
.vm-gachart i { width: 100%; height: max(var(--h), 2px); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #2bb5a8, var(--teal)); }
.vm-gachart span { position: relative; }
.vm-gachart em { position: absolute; left: 25%; right: 25%; bottom: 0; height: var(--c, 0); border-radius: 3px 3px 0 0; background: var(--gleam); }
.vm-gachart span:hover i { background: var(--ink); }
.vm-gakey { display: flex; gap: 16px; margin: -6px 0 8px; color: var(--ink-muted); font-size: 13px; }
.vm-gakey span { display: inline-flex; align-items: center; gap: 6px; }
.vm-gakey i { width: 10px; height: 10px; border-radius: 3px; background: var(--teal); }
.vm-gakey i.is-clicks { background: var(--gleam); }
.vm-gachart__axis { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 13px; }
.vm-gabar { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 14px; isolation: isolate; }
.vm-gabar + .vm-gabar { margin-top: 4px; }
.vm-gabar i { position: absolute; inset: 0 auto 0 0; z-index: -1; border-radius: 8px; background: var(--teal-soft); }
.vm-gabar b small { margin-left: 4px; color: var(--ink-muted); font-weight: 600; }
.vm-gasetup ol { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 22px; }

@media (max-width: 1023.98px) {
  .vm-adminshell { grid-template-columns: minmax(0, 1fr); }
  .vm-adminside { flex-direction: row; align-items: center; gap: 6px; height: auto; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; }
  .vm-adminside__brand { padding: 0 6px 0 0; border: 0; }
  .vm-adminside__brand span { display: none; }
  .vm-adminside__country { flex-wrap: nowrap; margin: 0; padding: 0 6px 0 0; border: 0; }
  .vm-adminside__country small { display: none; }
  .vm-adminside__nav, .vm-adminside__foot { display: flex; gap: 2px; margin: 0; padding: 0; border: 0; }
  .vm-adminside a, .vm-adminside button { width: auto; min-height: 44px; white-space: nowrap; }
  .vm-adminside a[aria-current]::before { display: none; }
  .vm-admin { padding-top: 20px; }
  .vm-admin__group, .vm-admin .vm-colours, .vm-admin__card { padding: 16px; }
}
/* Account sign-up: the charity list with logos and a search box, scrolling inside its own box. */
.vm-acctcause { display: grid; border: 0; padding: 0; margin: 0; min-width: 0; }
.vm-acctcause legend { padding: 0; margin-bottom: 6px; font: 700 14px/18px var(--font-sans); }
.vm-acctcause legend small { font-size: 13px; }
.vm-acctcause legend small { font-weight: 400; color: var(--ink-muted); }
.vm .vm-acctcause__search { margin: 0 0 8px; }
.vm .vm-acctcause__search .vm-picker__search { max-width: none; }
.vm-acctcause__list { display: grid; gap: 6px; max-height: 312px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.vm-acctcause__list .vm-charity[hidden] { display: none; }
.vm-acctcause__later { background: var(--surface-sunk); color: var(--ink-muted); }
.vm-acctcause__later .vm-ico { width: 18px; height: 18px; }
/* Admin › Merchant sync: a progress card under each network's row, then what happened to every programme. */
.vm-msync__intro { margin-bottom: 16px; }
.vm-msync__all { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vm-msync__small { font-size: 13px; }
.vm-msync .vm-actions { white-space: nowrap; }
.vm-msync .vm-actions .vm-btn + .vm-btn { margin-left: 6px; }
.vm-msync__network + .vm-msync__network > tr:first-child > td { border-top: 1px solid var(--edge); }
.vm-msync__panelrow > td { padding-top: 0; }
.vm-msync__panel { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-sunk); }
.vm-msync__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; }
.vm-msync__head span { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.vm-msync__bar { height: 10px; border-radius: 999px; background: var(--edge); overflow: hidden; }
.vm-msync__bar span { display: block; height: 100%; border-radius: inherit; background: var(--teal); transition: width .4s ease-out; }
.vm-msync__bar.is-waiting span { background: repeating-linear-gradient(-45deg, var(--teal) 0 10px, #2a8f89 10px 20px); background-size: 28px 28px; animation: vm-msync-wait 1s linear infinite; opacity: .55; }
@keyframes vm-msync-wait { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .vm-msync__bar.is-waiting span { animation: none; } .vm-msync__bar span { transition: none; } }
.vm-msync__stage { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.vm-msync__stage.is-failed { color: #a1260d; }
.vm-msync__stage.is-ok { color: #0b5a41; }
.vm-msync__tip { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vm-msync__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vm-msync__chips .vm-chip { min-height: 32px; font-size: 13px; }
.vm-msync__results { max-height: 420px; overflow: auto; border-radius: var(--radius-sm); background: var(--surface); }
.vm-msync__results th { position: sticky; top: 0; background: var(--surface); }
.vm-msync__result { font-size: 13px; font-weight: 600; }
.vm-msync__result.is-new, .vm-msync__result.is-would-create { color: #0b5a41; }
.vm-msync__result.is-matched { color: var(--teal); }
.vm-msync__result.is-listed { color: var(--ink-muted); font-weight: 400; }
.vm-msync__result.is-skipped { color: #7a4b00; }

/* Sortable admin tables: headings sort the rows; the arrow shows the current order. */
.vm-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.vm-sortable:hover { color: var(--teal); }
.vm-sortable::after { content: " ↕"; color: var(--ink-muted); font-weight: 400; }
.vm-sortable[aria-sort="descending"]::after { content: " ↓"; color: var(--teal); }
.vm-sortable[aria-sort="ascending"]::after { content: " ↑"; color: var(--teal); }
.vm-toprank { width: 1%; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* /instagram, the link in our Instagram bio: latest stories as a square photo grid like the profile, then today's codes. */
.vm-insta__head .vm-search { margin-top: var(--space-2); }
.vm-insta__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 700px) { .vm-insta__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } }
.vm-insta__tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--surface-2, #eef0eb); color: #fff; text-decoration: none; }
.vm-insta__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.vm-insta__tile:hover img, .vm-insta__tile:focus-visible img { transform: scale(1.04); }
.vm-insta__tile span { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 24px 8px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); font: 600 12px/1.3 var(--font-sans); }
.vm-insta__tile b { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #ffd75e; }
@media (max-width: 699px) { .vm-insta__tile span { display: none; } }
.vm-insta__more { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-4) 0 var(--space-6); }
.vm-insta__codes h2 { font: 700 24px/1.2 var(--font-display); margin: var(--space-4) 0; }
.vm-agreement { display: grid; gap: var(--space-3); }
.vm-agreement ol { display: grid; gap: 4px; padding-left: 20px; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.vm-joinkinds { display: grid; gap: var(--space-4); }
.vm-joinkinds__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.vm-joinkind { display: grid; gap: 4px; align-content: start; padding: var(--space-4); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.vm-joinkind b { font: 800 17px/22px var(--font-display); letter-spacing: -.02em; }
.vm-joinkind span { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.vm-joinkind:hover, .vm-joinkind:focus-visible { border-color: var(--teal); box-shadow: var(--shadow-lift); }
.vm-joinkinds__change { margin-left: 8px; font-size: 14px; font-weight: 500; }