/**
 * Veganuary Special Offers V2
 * Scoped under .vso2 so it cannot leak into the rest of the theme.
 */

.vso2 {
  /* Design tokens (sampled from the new Payload design) */
  --vso2-ink: #2c2f32;
  --vso2-ink-soft: #5a5d60;
  --vso2-accent: #7d003c;      /* deep raspberry: brand names, links, prices */
  --vso2-pink: #ff287d;        /* primary buttons */
  --vso2-pink-dark: #e01e6a;
  --vso2-pink-soft: #ffe6f0;   /* hero background */
  --vso2-line: #e6ebf0;
  --vso2-chip-bg: #f2f4f7;
  --vso2-bg: #ffffff;
  --vso2-radius: 8px;
  /* ProgramOT is the Payload design's display font — the theme already
     @font-face's it (weight 700 only, so headings must be 700, never 800,
     or the browser fakes the bold). Poppins matches the Payload body and
     falls back to the theme's Eina when not loaded. */
  --vso2-font: 'Poppins', 'Eina', Helvetica, sans-serif;
  --vso2-font-head: 'ProgramOT', 'Poppins', 'Eina', Helvetica, sans-serif;

  font-family: var(--vso2-font);
  color: var(--vso2-ink);
  background: var(--vso2-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.vso2 *,
.vso2 *::before,
.vso2 *::after { box-sizing: border-box; }

.vso2 img { max-width: 100%; display: block; }

.vso2 button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.vso2-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* ---------------------------------------------------------------- Hero */

.vso2-hero {
  background: var(--vso2-pink-soft);
  padding: 48px 0 24px;
}

/* Featured carousel sits on the same pink wash as the hero, like the
   Next.js version — the two sections read as one band. */
.vso2-featured-band {
  background: var(--vso2-pink-soft);
  padding: 4px 0 36px;
}

.vso2-featured-band .vso2-section-head { margin-top: 0; padding-top: 8px; }

.vso2-hero__kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vso2-accent);
}

.vso2-hero__title {
  margin: 0;
  font-family: var(--vso2-font-head);
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--vso2-ink);
}

.vso2-hero__sub {
  margin: 14px 0 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--vso2-ink-soft);
}

@media (min-width: 640px) {
  .vso2-hero__sub { font-size: 18px; }
}

.vso2-hero__submit {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--vso2-ink-soft);
}

.vso2-hero__submit a {
  color: var(--vso2-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ Sections */

.vso2-app { padding-bottom: 56px; }

.vso2-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 32px 0 14px;
}

.vso2-section-head::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vso2-pink);
}

.vso2-section-head h2 {
  margin: 0;
  font-family: var(--vso2-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vso2-ink);
}

.vso2-section-head .vso2-carousel-nav {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.vso2-swipe {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vso2-ink-soft);
}

@media (max-width: 639px) {
  .vso2-section-head .vso2-carousel-nav { display: none; }
  .vso2-swipe { display: inline-flex; }
}

.vso2-carousel-nav button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--vso2-line);
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--vso2-ink);
  transition: background 0.15s, color 0.15s;
}

.vso2-carousel-nav button:hover:not(:disabled) {
  background: var(--vso2-ink);
  color: #fff;
}

.vso2-carousel-nav button:disabled { opacity: 0.35; cursor: default; }

/* ------------------------------------------------------------ Carousel */

.vso2-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.vso2-carousel::-webkit-scrollbar { display: none; }

.vso2-carousel > * {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
}

@media (max-width: 639px) {
  .vso2-carousel > * { width: 64vw; max-width: 260px; }
}

/* ---------------------------------------------------------------- Card */

.vso2-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: var(--vso2-radius);
  overflow: hidden;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Extra specificity: themes commonly reset button borders/radius globally,
   which erased the card outline on the live site. */
.vso2 button.vso2-card {
  border: 1px solid #dfe5ec;
  border-radius: var(--vso2-radius);
  background: #fff;
}

.vso2-card:hover,
.vso2-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(44, 47, 50, 0.1);
}

.vso2-card:focus-visible { outline: 2px solid var(--vso2-pink); outline-offset: 2px; }

.vso2-card__media {
  position: relative;
  height: 150px;
  background: var(--vso2-chip-bg);
  overflow: hidden;
  border-bottom: 1px solid rgba(223, 229, 236, 0.7);
}

.vso2-card__media img.vso2-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Logo used as the main image (no photo supplied): letterboxed, not cropped */
.vso2-card__media img.vso2-card__logo-main {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  background: #fff;
}

.vso2-pill-flag {
  position: absolute;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--vso2-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.vso2-pill-flag--featured { left: 8px; }

.vso2-pill-flag--code {
  right: 8px;
  background: #fff;
  color: var(--vso2-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.vso2-card__avatar {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--vso2-line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 4px;
}

.vso2-card__avatar img { max-height: 100%; width: auto; object-fit: contain; }

.vso2-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 14px 14px;
}

.vso2-card__brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vso2-accent);
}

.vso2-card__title {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--vso2-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 640px) {
  .vso2-card__title { font-size: 15px; }
}

.vso2-card__discount {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--vso2-accent);
}

.vso2-card__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
}

.vso2-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--vso2-chip-bg);
  border: 1px solid var(--vso2-line);
  color: var(--vso2-ink);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.vso2-modal .vso2-chip { font-size: 10px; }

.vso2-card__view {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--vso2-accent);
  white-space: nowrap;
}

/* -------------------------------------------------------------- Toolbar */

.vso2-toolbar {
  padding: 24px 0 0;
}

.vso2-toolbar__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vso2-toolbar__actions {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

.vso2-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 48px;
  background: #fff;
  border: 1px solid var(--vso2-line);
  border-radius: 999px;
  padding: 0 18px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.vso2-search:focus-within {
  border-color: var(--vso2-pink);
  box-shadow: 0 0 0 4px rgba(255, 40, 125, 0.15);
}

.vso2-search svg { flex: 0 0 auto; color: var(--vso2-ink-soft); }

.vso2-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--vso2-ink);
  padding: 0;
}

.vso2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--vso2-line);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--vso2-ink);
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

a.vso2-btn,
a.vso2-btn:hover,
a.vso2-btn:focus { text-decoration: none; }

a.vso2-btn--primary,
a.vso2-btn--primary:hover,
a.vso2-btn--primary:visited { color: #fff; }

.vso2-btn:hover { border-color: var(--vso2-pink); }

.vso2-btn[aria-pressed="true"],
.vso2-btn--active {
  background: var(--vso2-accent);
  border-color: var(--vso2-accent);
  color: #fff;
}

/* Defensive re-assertion: the theme resets button borders/backgrounds
   globally (same reset that erased the card outline), which left the filter
   pills borderless and the primary button as bare text on the live site.
   Element+class selectors outrank the theme's resets. */
.vso2 button.vso2-btn,
.vso2 a.vso2-btn {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid var(--vso2-line);
  border-radius: 999px;
  color: var(--vso2-ink);
  box-shadow: none;
  text-transform: none;
}

.vso2 button.vso2-btn:hover,
.vso2 a.vso2-btn:hover { border-color: var(--vso2-pink); }

.vso2 button.vso2-btn--primary,
.vso2 a.vso2-btn--primary {
  background: var(--vso2-pink);
  border-color: var(--vso2-pink);
  color: #fff;
}

.vso2 button.vso2-btn--primary:hover,
.vso2 a.vso2-btn--primary:hover {
  background: var(--vso2-pink-dark);
  border-color: var(--vso2-pink-dark);
  color: #fff;
}

.vso2 button.vso2-btn[aria-pressed="true"] {
  background: var(--vso2-accent);
  border-color: var(--vso2-accent);
  color: #fff;
}

.vso2 button.vso2-dd__btn--on {
  background: var(--vso2-pink-soft);
  border-color: var(--vso2-accent);
}

.vso2-btn--primary {
  background: var(--vso2-pink);
  border-color: var(--vso2-pink);
  color: #fff;
  font-weight: 700;
}

.vso2-btn--primary:hover { background: var(--vso2-pink-dark); border-color: var(--vso2-pink-dark); }

/* Filter dropdowns */

.vso2-filters {
  display: grid;
  grid-template-columns: repeat(var(--vso2-filter-cols, 4), minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.vso2-dd { position: relative; min-width: 0; }

.vso2-dd__btn {
  width: 100%;
  height: auto;
  min-height: 44px;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 13px;
}

.vso2-dd__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.vso2-dd__label { color: var(--vso2-ink-soft); font-weight: 700; }

.vso2-dd__value { color: var(--vso2-ink); font-weight: 700; }

.vso2-dd__btn > span[aria-hidden="true"] {
  transition: transform 0.15s;
  flex: 0 0 auto;
  color: var(--vso2-ink);
}

/* Carets scale up so the rows clearly read as dropdowns. */
.vso2-dd__btn > span[aria-hidden="true"] svg {
  width: 15px;
  height: 15px;
  display: block;
}

.vso2-dd__btn[aria-expanded="true"] { border-color: var(--vso2-pink); }

.vso2-dd__btn[aria-expanded="true"] > span[aria-hidden="true"] { transform: rotate(180deg); }

.vso2-dd__btn:hover { background: rgba(255, 40, 125, 0.05); }

.vso2-dd__btn--on { border-color: var(--vso2-accent); background: var(--vso2-pink-soft); }

.vso2-dd__btn--on .vso2-dd__value,
.vso2-dd__btn--on .vso2-dd__label { color: var(--vso2-accent); }

.vso2-dd__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 220px;
  max-height: 300px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--vso2-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(44, 47, 50, 0.16);
  padding: 6px;
}

.vso2-dd__menu[hidden] { display: none; }

/* Keep the last column's floating menu inside the viewport on desktop. */
.vso2-filters:not(.vso2-filters--sheet) .vso2-dd:last-child .vso2-dd__menu {
  left: auto;
  right: 0;
}

.vso2-dd__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--vso2-ink);
}

.vso2-dd__option:hover { background: var(--vso2-chip-bg); }

.vso2-dd__option .vso2-dd__box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #b9c2cb;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 11px;
  line-height: 1;
}

.vso2-dd__option[aria-checked="true"] .vso2-dd__box {
  background: var(--vso2-pink);
  border-color: var(--vso2-pink);
  color: #fff;
}

.vso2-dd__option--radio .vso2-dd__box { border-radius: 50%; }

.vso2-dd__clear {
  width: 100%;
  text-align: center;
  padding: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--vso2-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--vso2-accent);
}

.vso2-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--vso2-ink-soft);
  margin: 16px 0 12px;
}

.vso2-clear-all {
  font-size: 12px;
  font-weight: 700;
  color: var(--vso2-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 10px;
}

/* ---------------------------------------------------------------- Grid */

.vso2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.vso2-layout--map { grid-template-columns: minmax(0, 1fr) 360px; }

@media (max-width: 991px) {
  .vso2-layout--map { grid-template-columns: minmax(0, 1fr); }
}

.vso2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

@media (max-width: 639px) {
  .vso2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vso2-card__media { height: 120px; }
  .vso2-card__title { font-size: 14px; }
}

/* Stays two-up on phones, matching the Next.js version's 50vw cards. */

/* ----------------------------------------------------------------- Map */

.vso2-map-panel {
  position: sticky;
  top: 76px;
}

@media (max-width: 991px) {
  .vso2-map-panel { position: static; order: 2; }
}

.vso2-map {
  width: 100%;
  height: 420px;
  border-radius: var(--vso2-radius);
  border: 1px solid var(--vso2-line);
  overflow: hidden;
  background: var(--vso2-chip-bg);
  transition: height 0.25s ease;
  z-index: 1;
}

.vso2-map--expanded { height: 620px; }

.vso2-map-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.vso2-map-note {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--vso2-ink-soft);
  background: var(--vso2-chip-bg);
  border: 1px solid var(--vso2-line);
  border-radius: 999px;
  padding: 7px 14px;
  text-align: center;
}

.vso2 .vso2-cluster {
  background: var(--vso2-pink);
  color: #fff;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.vso2 .vso2-pin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vso2-accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.vso2 .leaflet-popup-content { margin: 10px 12px; font-size: 13px; }
.vso2 .leaflet-popup-content .vso2-pop-brand { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--vso2-accent); }
.vso2 .leaflet-popup-content .vso2-pop-title { font-weight: 700; margin: 2px 0 6px; }
.vso2 .leaflet-popup-content button { color: var(--vso2-accent); font-weight: 700; font-size: 12px; text-decoration: underline; padding: 0; }

/* ----------------------------------------------------------- Promo tiles */

.vso2-promo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  min-height: 100%;
  padding: 20px;
  border-radius: var(--vso2-radius);
  color: #fff;
}

.vso2-promo--pink { background: var(--vso2-pink); }
.vso2-promo--raspberry { background: var(--vso2-accent); }
.vso2-promo--dark { background: var(--vso2-ink); }
.vso2-promo--green { background: #1e9e6a; }

.vso2-promo__heading {
  margin: 0;
  font-family: var(--vso2-font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
}

.vso2-promo__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.vso2 a.vso2-promo__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--vso2-ink);
  text-decoration: none;
  white-space: nowrap;
}

.vso2-promo--pink .vso2-promo__btn { color: var(--vso2-pink-dark); }
.vso2-promo--raspberry .vso2-promo__btn { color: var(--vso2-accent); }
.vso2-promo--green .vso2-promo__btn { color: #157a51; }

/* --------------------------------------------------------- Gold sponsors */
/* Matches the register_v2_sponsors block on the sign-up page. */

.vso2-sponsors {
  background: #fee9f1;
  margin-top: 40px;
  padding: 40px 16px 50px;
  text-align: center;
}

.vso2-sponsors__heading {
  margin: 0 0 28px;
  font-family: var(--vso2-font-head);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: #f52878;
}

.vso2-sponsors__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.vso2-sponsors__logos img {
  max-height: 80px;
  max-width: 160px;
  width: auto;
  height: auto;
  display: inline-block;
}

/* ----------------------------------------------------------- No results */

.vso2-empty {
  text-align: center;
  padding: 48px 16px;
  border: 1px dashed var(--vso2-line);
  border-radius: var(--vso2-radius);
}

.vso2-empty h3 { margin: 0 0 6px; font-size: 18px; color: var(--vso2-ink); }
.vso2-empty p { margin: 0 0 14px; color: var(--vso2-ink-soft); font-size: 14px; }

/* ---------------------------------------------------------------- Modal */

.vso2-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.vso2-modal[hidden] { display: none; }

.vso2-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 26, 28, 0.6);
}

.vso2-modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: min(86vh, 700px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.vso2-modal__media {
  position: relative;
  height: 180px;
  background: var(--vso2-chip-bg);
}

.vso2-modal__media img { width: 100%; height: 100%; object-fit: cover; }
.vso2-modal__media img.vso2-contain { object-fit: contain; padding: 22px; background: #fff; }

.vso2-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
}

.vso2-modal__body { padding: 18px 20px 22px; }

.vso2-modal__brandrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vso2-modal__brandrow .vso2-card__avatar {
  position: static;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.vso2-modal__brand {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vso2-accent);
}

.vso2-modal__title {
  margin: 10px 0 0;
  font-family: var(--vso2-font-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--vso2-ink);
}

.vso2-modal__discount {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--vso2-accent);
}

.vso2-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.vso2-modal__desc {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--vso2-ink-soft);
}

.vso2-modal__availability {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--vso2-ink-soft);
}

.vso2-code {
  margin-top: 16px;
  border: 1.5px dashed var(--vso2-accent);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--vso2-pink-soft);
}

.vso2-code__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vso2-accent);
}

.vso2-code__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.vso2-code__value {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--vso2-ink);
  user-select: all;
}

.vso2-code__copy {
  font-size: 12px;
  font-weight: 700;
  color: var(--vso2-accent);
  border: 1px solid var(--vso2-accent);
  border-radius: 999px;
  padding: 5px 12px;
  background: #fff;
}

.vso2-modal__actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.vso2-modal__actions .vso2-btn { justify-content: center; padding: 12px 16px; font-size: 14px; }

/* ----------------------------------------------- Mobile bottom bar + sheet */

.vso2-mobilebar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99990;
  background: var(--vso2-accent);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
  padding-bottom: env(safe-area-inset-bottom);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.vso2-mobilebar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 700;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.vso2-mobilebar button:first-child { border-left: 0; }

.vso2-mobilebar button[aria-pressed="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* Filters bottom sheet */

.vso2-sheet {
  position: fixed;
  inset: 0;
  z-index: 100000;
}

.vso2-sheet[hidden] { display: none; }

.vso2-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 47, 50, 0.4);
  backdrop-filter: blur(4px);
  border: 0;
  cursor: default;
}

.vso2-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.25);
  padding-bottom: env(safe-area-inset-bottom);
}

.vso2-sheet__handle {
  width: 40px;
  height: 6px;
  border-radius: 999px;
  background: var(--vso2-line);
  margin: 8px auto 4px;
  flex: 0 0 auto;
}

.vso2-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--vso2-line);
}

.vso2-sheet__head h2 {
  margin: 0;
  font-family: var(--vso2-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--vso2-ink);
}

.vso2-sheet__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--vso2-ink-soft);
  font-size: 15px;
}

.vso2-sheet__close:hover { background: var(--vso2-chip-bg); }

.vso2-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.vso2-sheet__body .vso2-search { margin-bottom: 14px; }

/* One filter per row in the sheet: full-width buttons never truncate their
   labels, and the menu accordions open underneath at full width. */
.vso2-filters--sheet {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 0;
  align-items: start;
}

.vso2-filters--sheet .vso2-dd__btn {
  min-height: 50px;
  padding: 12px 18px;
  font-size: 14px;
}

/* Inside the sheet, menus open inline (accordion-style) instead of floating:
   a floating menu gets clipped by the sheet body's scroll area. */
.vso2-filters--sheet .vso2-dd__menu {
  position: static;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  max-height: 264px;
  box-shadow: none;
  border-radius: 14px;
  padding: 8px;
}

.vso2-filters--sheet .vso2-dd__option {
  padding: 11px 12px;
  font-size: 14px;
}

.vso2-filters--sheet .vso2-dd__clear {
  padding: 12px;
  font-size: 13px;
}

.vso2-sheet__foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--vso2-line);
  padding: 14px 20px;
}

.vso2-sheet__show { width: 100%; justify-content: center; }

html.vso2-lock,
html.vso2-lock body { overflow: hidden; }

@media (max-width: 767px) {
  .vso2-mobilebar { display: grid; }
  .vso2-toolbar { display: none; }
  .vso2-app { padding-bottom: 24px; }
  /* The fixed bar overlaps whatever sits at the page bottom (sponsor strip,
     footer), so the page reserves space for it. The class is added by the
     app when the bar exists. */
  body.vso2-has-bar { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}

@media (min-width: 768px) {
  .vso2-sheet { display: none; }
}

/* ---------------------------------------------------------------- Toast */

.vso2-toast {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 100001;
  background: var(--vso2-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.vso2-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* -------------------------------------------------------------- Helpers */

.vso2-noscript { padding: 32px 0; }

.vso2 .vso2-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .vso2 * { transition: none !important; scroll-behavior: auto !important; }
}