:root {
  --vv-mauve: #6b2a58;
  --vv-mauve-dark: #552047;
  --vv-light-green: #9CAC3E; /* Vineyard Voyages signature green */
  --vv-dark-green: #496E3E;
  --vv-darkest-green: #3D5F36;
  --vv-cream: #fbf8f0;
  --vv-soft-cream: #f3eee4;
  --vv-warm-white: #fffdf9;
  --vv-white: #ffffff;
  --vv-ink: #30292d;
  --vv-muted: #675f64;
  --vv-line: rgba(73, 110, 62, 0.18);
  --vv-shadow: 0 14px 36px rgba(46, 32, 41, 0.11);
  --vv-radius: 18px;
  --vv-header-height: 94px;
  --vv-font-heading: "Philosopher", Georgia, "Times New Roman", serif;
  --vv-font-body: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Compatibility variables for redesigned page bodies created during the Elementor era. */
  --e-global-typography-text-font-family: "Poppins";
  --e-global-typography-primary-font-family: "Philosopher";
  --e-global-typography-secondary-font-family: "Philosopher";
  --e-global-color-primary: #6b2a58;
  --e-global-color-secondary: #496E3E;
  --e-global-color-accent: #9CAC3E;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--vv-header-height) + 20px);
}

body {
  background: var(--vv-cream);
  color: var(--vv-ink);
  font-family: var(--vv-font-body);
  line-height: 1.7;
  margin: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.vv-nav-open {
  overflow: hidden;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--vv-mauve);
  text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
  color: var(--vv-dark-green);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--vv-light-green);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--vv-font-heading);
  line-height: 1.08;
  margin-top: 0;
  text-wrap: balance;
}

p,
ul,
ol {
  margin-top: 0;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.vv-skip-link {
  background: var(--vv-white);
  border-radius: 0 0 8px 8px;
  color: var(--vv-mauve);
  font-weight: 800;
  left: 16px;
  padding: 12px 18px;
  position: fixed;
  top: -80px;
  z-index: 100000;
}

.vv-skip-link:focus {
  top: 0;
}

.vv-site-main {
  min-height: 55vh;
}

.vv-content-shell {
  margin-inline: auto;
  max-width: 1080px;
  padding-inline: 22px;
  width: 100%;
}

.vv-content-shell--wide {
  max-width: 1240px;
}

.vv-content-shell--article {
  max-width: 820px;
}

/* Header */
.vv-site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  left: 0;
  min-height: var(--vv-header-height);
  position: fixed;
  right: 0;
  top: 0;
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease;
  z-index: 1000;
}

.vv-site-header.is-scrolled,
.vv-header-solid .vv-site-header,
body.vv-nav-open .vv-site-header {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(73, 110, 62, 0.97);
  border-bottom-color: rgba(156, 172, 62, 0.72);
  box-shadow: 0 8px 24px rgba(35, 50, 30, 0.22);
}

.vv-header-solid .vv-site-main {
  padding-top: var(--vv-header-height);
}

.admin-bar .vv-site-header {
  top: 32px;
}

.admin-bar .vv-navigation-panel {
  top: calc(var(--vv-header-height) + 32px);
}

.vv-header-overlay .vv-site-main > :first-child {
  margin-top: 0;
}

.vv-header-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 1560px;
  min-height: var(--vv-header-height);
  padding: 7px 22px;
  width: 100%;
}

.vv-site-branding {
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0;
}

.vv-brand-link,
.vv-footer-logo {
  color: var(--vv-mauve);
  display: inline-flex;
  text-decoration: none;
}

.custom-logo-link {
  align-items: center;
  display: inline-flex;
  line-height: 0;
  opacity: 1;
  visibility: visible;
}

.vv-site-header .custom-logo,
.vv-brand-image--header {
  display: block;
  filter: drop-shadow(0 3px 10px rgba(20, 28, 18, 0.34));
  height: auto;
  max-height: 78px;
  max-width: 270px;
  object-fit: contain;
  transition: max-height 220ms ease, max-width 220ms ease, filter 220ms ease;
  width: auto;
}

.vv-site-header.is-scrolled .vv-brand-image--header,
.vv-header-solid .vv-brand-image--header,
body.vv-nav-open .vv-brand-image--header {
  max-height: 68px;
  max-width: 235px;
}

.vv-brand-link {
  align-items: center;
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}

.vv-brand-image {
  display: block;
  height: auto;
  object-fit: contain;
}

.vv-brand-mark {
  align-items: center;
  background: var(--vv-light-green);
  border-radius: 50%;
  color: var(--vv-darkest-green);
  display: inline-flex;
  flex: 0 0 42px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.vv-brand-mark svg {
  fill: none;
  height: 28px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 28px;
}

.vv-brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vv-brand-name {
  font-family: var(--vv-font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
}

.vv-brand-tagline {
  color: var(--vv-dark-green);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  margin-top: 4px;
  max-width: 280px;
  text-transform: uppercase;
}

.vv-navigation-panel {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  min-width: 0;
}

.vv-primary-navigation .menu,
.vv-primary-navigation .sub-menu,
.vv-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vv-primary-navigation > .menu {
  align-items: center;
  display: flex;
  gap: 2px;
}

.vv-primary-navigation .menu-item {
  position: relative;
}

.vv-primary-navigation .menu-item > a {
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.94);
  display: block;
  font-family: var(--vv-font-heading);
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 12px 9px;
  text-decoration: none;
}

.vv-primary-navigation .current-menu-item > a,
.vv-primary-navigation .current-menu-ancestor > a,
.vv-primary-navigation .menu-item > a:hover,
.vv-primary-navigation .menu-item > a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5d3;
}

.vv-primary-navigation .menu-item-has-children > a {
  padding-right: 24px;
  position: relative;
}

.vv-primary-navigation .menu-item-has-children > a::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 6px;
  position: absolute;
  right: 10px;
  top: calc(50% - 5px);
  transform: rotate(45deg);
  width: 6px;
}

.vv-primary-navigation .sub-menu {
  background: var(--vv-warm-white);
  border: 1px solid rgba(73, 110, 62, 0.2);
  border-radius: 14px;
  box-shadow: var(--vv-shadow);
  left: 0;
  min-width: 250px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 7px);
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  visibility: hidden;
}

.vv-primary-navigation .sub-menu a {
  border-radius: 9px;
  color: var(--vv-dark-green);
  font-family: var(--vv-font-heading);
  font-size: 0.9rem;
  padding: 11px 12px;
}

.vv-primary-navigation .sub-menu a:hover,
.vv-primary-navigation .sub-menu a:focus-visible {
  background: rgba(156, 172, 62, 0.16);
  color: var(--vv-mauve);
}

.vv-primary-navigation .menu-item:hover > .sub-menu,
.vv-primary-navigation .menu-item:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.vv-header-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}

.vv-header-utility {
  align-items: center;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  display: inline-flex;
  font-family: var(--vv-font-heading);
  font-size: 0.93rem;
  font-weight: 700;
  gap: 7px;
  justify-content: center;
  line-height: 1.1;
  min-height: 46px;
  padding: 11px 15px;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
  white-space: nowrap;
}

.vv-header-utility--gift {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.82);
  color: var(--vv-white);
}

.vv-header-utility--book {
  background: var(--vv-light-green);
  border-color: var(--vv-light-green);
  color: #24321f;
}

.vv-header-utility--gift:hover,
.vv-header-utility--gift:focus-visible {
  background: var(--vv-white);
  border-color: var(--vv-white);
  box-shadow: 0 9px 20px rgba(25, 37, 22, 0.2);
  color: var(--vv-mauve);
  transform: translateY(-1px);
}

.vv-header-utility--book:hover,
.vv-header-utility--book:focus-visible {
  background: #b5c45a;
  border-color: #b5c45a;
  box-shadow: 0 9px 20px rgba(25, 37, 22, 0.2);
  color: #24321f;
  transform: translateY(-1px);
}

.vv-action-icon {
  fill: none;
  flex: 0 0 19px;
  height: 19px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 19px;
}

.vv-header-button,
.vv-button,
.vv-footer-cta {
  align-items: center;
  background: var(--vv-mauve);
  border: 2px solid var(--vv-mauve);
  border-radius: 999px;
  color: var(--vv-white);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 800;
  justify-content: center;
  line-height: 1.15;
  min-height: 46px;
  padding: 12px 18px;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.vv-header-button:hover,
.vv-header-button:focus-visible,
.vv-button:hover,
.vv-button:focus-visible,
.vv-footer-cta:hover,
.vv-footer-cta:focus-visible {
  background: var(--vv-mauve-dark);
  border-color: var(--vv-mauve-dark);
  box-shadow: 0 9px 20px rgba(107, 42, 88, 0.18);
  color: var(--vv-white);
  transform: translateY(-1px);
}

.vv-header-button--outline,
.vv-button--outline {
  background: transparent;
  color: var(--vv-mauve);
}

.vv-header-button--outline:hover,
.vv-header-button--outline:focus-visible,
.vv-button--outline:hover,
.vv-button--outline:focus-visible {
  color: var(--vv-white);
}

button.vv-menu-toggle {
  -webkit-appearance: none !important;
  appearance: none !important;
  align-items: center;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--vv-white) !important;
  cursor: pointer;
  display: none;
  flex: 0 0 48px;
  height: 48px;
  justify-content: center;
  margin: 0 !important;
  min-width: 48px !important;
  padding: 0 !important;
  position: relative;
  width: 48px;
  z-index: 1004;
}

button.vv-menu-toggle:hover,
button.vv-menu-toggle:active {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  color: var(--vv-white) !important;
  transform: none !important;
}

button.vv-menu-toggle:focus {
  outline: none !important;
}

button.vv-menu-toggle:focus-visible {
  border-color: var(--vv-light-green) !important;
  box-shadow: 0 0 0 3px rgba(156, 172, 62, 0.42) !important;
  outline: none !important;
}

.vv-menu-icon {
  fill: none;
  height: 26px;
  pointer-events: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
  width: 26px;
}

.vv-menu-icon--close {
  display: none;
}

.vv-menu-toggle[aria-expanded="true"] .vv-menu-icon--open {
  display: none;
}

.vv-menu-toggle[aria-expanded="true"] .vv-menu-icon--close {
  display: block;
}

.vv-submenu-toggle {
  display: none;
}

.vv-menu-backdrop {
  background: rgba(25, 18, 23, 0.58);
  inset: var(--vv-header-height) 0 0;
  position: fixed;
  z-index: 999;
}

.vv-menu-backdrop[hidden] {
  display: none !important;
}

.admin-bar .vv-menu-backdrop {
  top: calc(var(--vv-header-height) + 32px);
}

/* Elementor migration bridge */
.vv-elementor-bridge {
  background: var(--vv-cream);
  overflow: hidden;
}

.vv-elementor-bridge > .elementor {
  width: 100%;
}

.vv-bridge-title {
  background: linear-gradient(145deg, var(--vv-soft-cream), var(--vv-warm-white));
  padding: 46px 0 40px;
}

.vv-bridge-title h1 {
  color: var(--vv-mauve);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  margin: 0;
}

body.vv-elementor-bridge-active .elementor-location-header,
body.vv-elementor-bridge-active .elementor-location-footer {
  display: none !important;
}

/* Standard pages */
.vv-standard-page {
  padding: 64px 0 72px;
}

.vv-entry-header {
  margin-bottom: 30px;
  max-width: 850px;
}

.vv-entry-title {
  color: var(--vv-mauve);
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  margin-bottom: 0;
}

.vv-entry-content {
  font-size: 1.03rem;
}

.vv-entry-content > * + * {
  margin-top: 1.15em;
}

.vv-entry-content h2 {
  color: var(--vv-mauve);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-top: 1.6em;
}

.vv-entry-content h3 {
  color: var(--vv-dark-green);
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-top: 1.35em;
}

.vv-entry-content img {
  border-radius: 14px;
}

.vv-entry-content blockquote {
  background: var(--vv-soft-cream);
  border-left: 5px solid var(--vv-light-green);
  border-radius: 0 12px 12px 0;
  margin: 1.6em 0;
  padding: 20px 24px;
}

.vv-entry-content table {
  border-collapse: collapse;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

.vv-entry-content th,
.vv-entry-content td {
  border: 1px solid var(--vv-line);
  padding: 10px 12px;
  text-align: left;
}

/* Blog and archives */
.vv-blog-index {
  background: linear-gradient(180deg, var(--vv-soft-cream) 0, var(--vv-cream) 300px);
  padding: 64px 0 76px;
}

.vv-archive-header {
  margin: 0 auto 42px;
  max-width: 860px;
  text-align: center;
}

.vv-kicker {
  color: var(--vv-dark-green);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.vv-archive-header h1,
.vv-single-hero h1,
.vv-error-page h1 {
  color: var(--vv-mauve);
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  margin-bottom: 16px;
}

.vv-archive-header > p:last-child {
  color: var(--vv-muted);
  font-size: 1.1rem;
}

.vv-post-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vv-post-card {
  background: var(--vv-white);
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-radius);
  box-shadow: 0 10px 28px rgba(46, 32, 41, 0.07);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.vv-post-card-image {
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, rgba(156, 172, 62, 0.2), rgba(107, 42, 88, 0.16));
  display: block;
  overflow: hidden;
}

.vv-post-card-image img {
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease;
  width: 100%;
}

.vv-post-card:hover .vv-post-card-image img {
  transform: scale(1.025);
}

.vv-post-card-placeholder {
  display: block;
  height: 100%;
}

.vv-post-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.vv-post-card-meta,
.vv-post-meta {
  color: var(--vv-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.vv-post-card h2 {
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  margin: 10px 0 12px;
}

.vv-post-card h2 a {
  color: var(--vv-mauve);
  text-decoration: none;
}

.vv-post-card-excerpt {
  color: var(--vv-muted);
  font-size: 0.94rem;
}

.vv-text-link {
  font-weight: 800;
  margin-top: auto;
  padding-top: 8px;
  text-decoration: none;
}

.navigation.pagination {
  margin-top: 42px;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.page-numbers {
  align-items: center;
  background: var(--vv-white);
  border: 1px solid var(--vv-line);
  border-radius: 999px;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
  min-width: 42px;
  padding: 8px 13px;
  text-decoration: none;
}

.page-numbers.current {
  background: var(--vv-mauve);
  border-color: var(--vv-mauve);
  color: var(--vv-white);
}

/* Single post */
.vv-single-hero {
  background: linear-gradient(145deg, var(--vv-soft-cream), var(--vv-warm-white));
  padding: 64px 0 54px;
  text-align: center;
}

.vv-single-hero .vv-content-shell {
  max-width: 920px;
}

.vv-post-meta {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.vv-single-featured {
  margin-top: -24px;
}

.vv-single-featured img {
  aspect-ratio: 16 / 8;
  border-radius: 20px;
  box-shadow: var(--vv-shadow);
  object-fit: cover;
  width: 100%;
}

.vv-single-post .vv-content-shell--article {
  padding-bottom: 72px;
  padding-top: 50px;
}

.vv-post-taxonomy {
  border-top: 1px solid var(--vv-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 42px;
  padding-top: 22px;
}

.vv-post-taxonomy a {
  background: var(--vv-soft-cream);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 6px 11px;
  text-decoration: none;
}

.vv-post-navigation {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 38px;
}

.vv-post-nav-item {
  background: var(--vv-white);
  border: 1px solid var(--vv-line);
  border-radius: 14px;
  padding: 18px;
}

.vv-post-nav-item span {
  color: var(--vv-muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vv-post-nav-item a {
  display: block;
  font-family: var(--vv-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 4px;
  text-decoration: none;
}

.vv-post-nav-item--next {
  text-align: right;
}

/* Search and 404 */
.search-form {
  display: flex;
  gap: 9px;
  margin: 24px auto 0;
  max-width: 660px;
}

.search-field {
  background: var(--vv-white);
  border: 1px solid rgba(73, 110, 62, 0.28);
  border-radius: 999px;
  min-height: 50px;
  min-width: 0;
  padding: 10px 18px;
  width: 100%;
}

.search-submit {
  background: var(--vv-mauve);
  border: 0;
  border-radius: 999px;
  color: var(--vv-white);
  cursor: pointer;
  font-weight: 800;
  min-height: 50px;
  padding: 10px 22px;
}

.vv-error-page {
  background: radial-gradient(circle at 15% 15%, rgba(156, 172, 62, 0.14), transparent 30%), var(--vv-soft-cream);
  padding: 90px 0;
  text-align: center;
}

.vv-error-page .vv-content-shell {
  max-width: 780px;
}

.vv-error-page > .vv-content-shell > p:not(.vv-kicker) {
  color: var(--vv-muted);
  font-size: 1.1rem;
}

.vv-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 28px 0;
}

.vv-no-results {
  background: var(--vv-white);
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-radius);
  margin: 0 auto;
  max-width: 760px;
  padding: 34px;
  text-align: center;
}

/* Footer */
.vv-site-footer {
  background: var(--vv-darkest-green);
  color: rgba(255, 255, 255, 0.86);
}

.vv-footer-main {
  padding: 58px 22px 50px;
}

.vv-footer-grid {
  display: grid;
  gap: 38px;
  grid-template-columns: 1.15fr 0.75fr 0.85fr 1.25fr;
  margin-inline: auto;
  max-width: 1320px;
}

.vv-footer-brand p {
  font-size: 0.91rem;
  max-width: 38ch;
}

.vv-footer-logo {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--vv-white);
  margin-bottom: 18px;
  max-width: 320px;
  padding: 0;
}

.vv-footer-logo .vv-brand-link {
  align-items: center;
  display: inline-flex;
  line-height: 0;
  max-width: 100%;
}

.vv-brand-image--footer {
  display: block;
  filter: drop-shadow(0 3px 10px rgba(20, 28, 18, 0.22));
  height: auto;
  max-height: 86px;
  max-width: 300px;
  object-fit: contain;
  width: auto;
}

.vv-footer-column h2 {
  color: var(--vv-white);
  font-size: 1.24rem;
  margin-bottom: 17px;
}

.vv-footer-menu,
.vv-footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vv-footer-menu li + li,
.vv-footer-contact li + li {
  margin-top: 8px;
}

.vv-footer-menu a,
.vv-footer-contact a,
.vv-pickup a,
.vv-current-schedule,
.vv-footer-bottom a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
  text-decoration-color: rgba(255, 255, 255, 0.32);
}

.vv-footer-menu a:hover,
.vv-footer-menu a:focus-visible,
.vv-footer-contact a:hover,
.vv-footer-contact a:focus-visible,
.vv-pickup a:hover,
.vv-pickup a:focus-visible,
.vv-current-schedule:hover,
.vv-current-schedule:focus-visible,
.vv-footer-bottom a:hover,
.vv-footer-bottom a:focus-visible {
  color: var(--vv-white);
  text-decoration-color: var(--vv-light-green);
}

.vv-footer-cta {
  background: var(--vv-light-green);
  border-color: var(--vv-light-green);
  color: #24321f;
  margin-top: 20px;
}

.vv-footer-cta:hover,
.vv-footer-cta:focus-visible {
  background: #b3c259;
  border-color: #b3c259;
  color: #24321f;
}

.vv-pickup + .vv-pickup {
  margin-top: 18px;
}

.vv-pickup strong,
.vv-pickup span,
.vv-pickup a {
  display: block;
}

.vv-pickup strong {
  color: var(--vv-white);
  font-size: 0.92rem;
}

.vv-pickup span {
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 3px 0 5px;
}

.vv-current-schedule {
  display: inline-block;
  font-weight: 800;
  margin-top: 20px;
}

.vv-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.vv-social-links a {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: var(--vv-white);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 7px;
  justify-content: center;
  line-height: 1;
  min-height: 40px;
  padding: 8px 12px;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.vv-social-links a:hover,
.vv-social-links a:focus-visible {
  background: var(--vv-light-green);
  border-color: var(--vv-light-green);
  color: #24321f;
  transform: translateY(-2px);
}

.vv-social-icon {
  display: block;
  fill: currentColor;
  flex: 0 0 17px;
  height: 17px;
  stroke: none;
  width: 17px;
}

.vv-social-icon--facebook {
  height: 18px;
  width: 12px;
}

.vv-social-icon--youtube {
  fill: none;
  height: 19px;
  overflow: visible;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 21px;
}

.vv-social-icon--youtube .vv-youtube-play {
  fill: currentColor;
  stroke: none;
}

.vv-social-icon--tripadvisor {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
  width: 20px;
}

.vv-social-label {
  white-space: nowrap;
}

.vv-footer-bottom {
  background: rgba(20, 37, 18, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 22px;
}

.vv-footer-bottom-inner {
  align-items: center;
  display: flex;
  font-size: 0.78rem;
  gap: 20px;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 1320px;
}

.vv-footer-bottom p {
  margin: 0;
}

@media (max-width: 1370px) {
  .vv-header-inner {
    padding-inline: 18px;
  }

  .vv-navigation-panel {
    gap: 10px;
  }

  .vv-site-header .custom-logo,
  .vv-brand-image--header {
    max-height: 72px;
    max-width: 246px;
  }

  .vv-primary-navigation .menu-item > a {
    font-size: 0.86rem;
    padding-inline: 7px;
  }

  .vv-header-utility {
    font-size: 0.85rem;
    padding-inline: 11px;
  }
}

@media (max-width: 1024px) {
  :root {
    --vv-header-height: 84px;
  }

  .vv-site-header {
    z-index: 1002;
  }

  button.vv-menu-toggle {
    display: inline-flex;
  }

  .vv-site-header .custom-logo,
  .vv-brand-image--header {
    max-height: 64px;
    max-width: 218px;
  }

  .vv-navigation-panel {
    align-items: stretch;
    background: linear-gradient(180deg, #496E3E 0%, #3D5F36 100%);
    bottom: 0;
    box-shadow: -16px 0 36px rgba(25, 18, 23, 0.26);
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 430px;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 22px 28px;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: var(--vv-header-height);
    transform: translateX(100%);
    transition: transform 220ms ease, opacity 180ms ease, visibility 220ms ease;
    visibility: hidden;
    width: min(92vw, 430px);
    z-index: 1001;
  }

  .vv-navigation-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
  }

  .vv-primary-navigation > .menu {
    align-items: stretch;
    display: block;
  }

  .vv-primary-navigation .menu-item > a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    color: var(--vv-white);
    font-size: 1.08rem;
    padding: 15px 48px 15px 4px;
  }

  .vv-primary-navigation .menu-item > a:hover,
  .vv-primary-navigation .menu-item > a:focus-visible,
  .vv-primary-navigation .current-menu-item > a,
  .vv-primary-navigation .current-menu-ancestor > a {
    background: transparent;
    color: #edf2ce;
  }

  .vv-primary-navigation .menu-item-has-children > a::after {
    display: none;
  }

  .vv-submenu-toggle {
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px;
    box-shadow: none !important;
    color: var(--vv-white) !important;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    z-index: 2;
  }

  .vv-submenu-toggle::before {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    height: 8px;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 160ms ease;
    width: 8px;
  }

  .vv-submenu-toggle[aria-expanded="true"]::before {
    transform: rotate(225deg) translate(-1px, -1px);
  }

  .vv-submenu-toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--vv-light-green) !important;
    outline: none;
  }

  .vv-primary-navigation .sub-menu {
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: none;
    display: none;
    left: auto;
    min-width: 0;
    opacity: 1;
    padding: 4px 10px 10px 18px;
    pointer-events: auto;
    position: static;
    transform: none;
    visibility: visible;
  }

  .vv-primary-navigation .menu-item:hover > .sub-menu,
  .vv-primary-navigation .menu-item:focus-within > .sub-menu {
    display: none;
  }

  .vv-primary-navigation .menu-item.is-submenu-open > .sub-menu,
  .vv-primary-navigation .menu-item.is-submenu-open:hover > .sub-menu,
  .vv-primary-navigation .menu-item.is-submenu-open:focus-within > .sub-menu {
    display: block;
  }

  .vv-primary-navigation .sub-menu a {
    border-bottom: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.98rem;
    padding: 11px 8px;
  }

  .vv-header-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-top: 22px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  .vv-header-utility {
    font-size: 1rem;
    min-height: 52px;
    padding-inline: 12px;
  }

  .vv-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .vv-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vv-standard-page,
  .vv-blog-index {
    padding: 48px 0 58px;
  }

  .vv-single-hero {
    padding: 50px 0 44px;
  }

  .vv-single-featured img {
    border-radius: 14px;
  }

  .vv-footer-main {
    padding-top: 48px;
  }
}

@media (max-width: 560px) {
  :root {
    --vv-header-height: 74px;
  }

  .vv-header-inner {
    min-height: var(--vv-header-height);
    padding: 6px 12px;
  }

  .vv-site-header .custom-logo,
  .vv-brand-image--header {
    max-height: 56px;
    max-width: min(188px, calc(100vw - 82px));
  }

  .vv-site-header.is-scrolled .vv-brand-image--header,
  .vv-header-solid .vv-brand-image--header,
  body.vv-nav-open .vv-brand-image--header {
    max-height: 54px;
    max-width: min(184px, calc(100vw - 82px));
  }

  .vv-brand-link,
  .vv-site-branding .custom-logo-link {
    max-width: calc(100vw - 82px);
    overflow: visible;
  }

  button.vv-menu-toggle {
    flex-basis: 46px;
    height: 46px;
    min-width: 46px !important;
    width: 46px;
  }

  .vv-menu-icon {
    height: 25px;
    width: 25px;
  }

  .vv-navigation-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    left: 0;
    max-width: none;
    padding: 12px 20px 26px;
    right: 0;
    transform: translateY(-18px);
    width: 100%;
  }

  .vv-navigation-panel.is-open {
    transform: translateY(0);
  }

  .vv-primary-navigation .menu-item > a {
    font-size: 1.04rem;
    padding-block: 14px;
  }

  .vv-header-actions {
    grid-template-columns: 1fr;
  }

  .vv-content-shell {
    padding-inline: 18px;
  }

  .vv-post-grid,
  .vv-footer-grid,
  .vv-post-navigation {
    grid-template-columns: 1fr;
  }

  .vv-post-card-body {
    padding: 20px;
  }

  .vv-post-nav-item--next {
    text-align: left;
  }

  .search-form {
    align-items: stretch;
    flex-direction: column;
  }

  .search-submit {
    width: 100%;
  }

  .vv-error-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .vv-button {
    width: 100%;
  }

  .vv-footer-logo {
    max-width: 270px;
  }

  .vv-brand-image--footer {
    max-height: 78px;
    max-width: 270px;
  }

  .vv-footer-bottom-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}


@media (max-width: 390px) {
  .vv-site-header .custom-logo,
  .vv-brand-image--header,
  .vv-site-header.is-scrolled .vv-brand-image--header,
  .vv-header-solid .vv-brand-image--header,
  body.vv-nav-open .vv-brand-image--header {
    max-width: min(172px, calc(100vw - 78px));
  }

  .vv-navigation-panel {
    padding-inline: 16px;
  }
}


@media (max-width: 782px) {
  .admin-bar .vv-site-header {
    top: 46px;
  }

  .admin-bar .vv-navigation-panel {
    top: calc(var(--vv-header-height) + 46px);
  }

  .admin-bar .vv-menu-backdrop {
    top: calc(var(--vv-header-height) + 46px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* v3.6: bulletproof mobile navigation viewport.
 * The panel is a fixed viewport layer.  Mobile disables backdrop filtering on
 * the header because filtered ancestors can trap fixed descendants inside the
 * header box in Chromium/WebKit.
 */
@media (max-width: 1024px) {
  .vv-site-header,
  .vv-site-header.is-scrolled,
  .vv-header-solid .vv-site-header,
  body.vv-nav-open .vv-site-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    contain: none !important;
    filter: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.vv-nav-open .vv-site-header {
    background: #496E3E !important;
  }

  .vv-navigation-panel {
    align-items: stretch !important;
    background: linear-gradient(180deg, #496E3E 0%, #3D5F36 100%) !important;
    bottom: auto !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: calc(100vh - var(--vv-header-height)) !important;
    height: calc(100dvh - var(--vv-header-height)) !important;
    inset: var(--vv-header-height) 0 auto 0 !important;
    justify-content: flex-start !important;
    max-height: calc(100vh - var(--vv-header-height)) !important;
    max-height: calc(100dvh - var(--vv-header-height)) !important;
    max-width: none !important;
    min-height: 0 !important;
    opacity: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 14px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    pointer-events: none !important;
    position: fixed !important;
    transform: translateY(-10px) !important;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
    visibility: hidden !important;
    width: 100vw !important;
    z-index: 1001 !important;
  }

  .vv-navigation-panel.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }

  .vv-navigation-panel .vv-primary-navigation,
  .vv-navigation-panel .vv-primary-navigation > .menu,
  .vv-navigation-panel .vv-primary-navigation .menu-item {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
    width: 100% !important;
  }

  .vv-navigation-panel .vv-primary-navigation {
    flex: 0 0 auto !important;
  }

  .vv-navigation-panel .vv-primary-navigation .menu-item > a {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .vv-navigation-panel .vv-header-actions {
    flex: 0 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .vv-menu-backdrop {
    display: none !important;
  }
}

@media (max-width: 782px) {
  .admin-bar .vv-navigation-panel {
    height: calc(100vh - var(--vv-header-height) - 46px) !important;
    height: calc(100dvh - var(--vv-header-height) - 46px) !important;
    inset: calc(var(--vv-header-height) + 46px) 0 auto 0 !important;
    max-height: calc(100vh - var(--vv-header-height) - 46px) !important;
    max-height: calc(100dvh - var(--vv-header-height) - 46px) !important;
  }
}

@media (max-width: 560px) {
  .vv-navigation-panel {
    padding: 10px 18px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .vv-navigation-panel .vv-primary-navigation .menu-item > a {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    min-height: 50px !important;
    padding: 14px 50px 14px 4px !important;
  }

  .vv-navigation-panel .vv-header-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
    margin-top: 18px !important;
  }
}


/* v3.7: desktop dropdown interaction correction.
 * Preserve the visual breathing room under the parent link while extending the
 * parent's hover target across that gap. This prevents the submenu from closing
 * before the pointer can reach its links.
 */
@media (min-width: 1025px) {
  .vv-primary-navigation .menu-item-has-children {
    isolation: isolate;
  }

  .vv-primary-navigation .menu-item-has-children::before {
    content: "";
    height: 14px;
    left: 0;
    position: absolute;
    right: 0;
    top: calc(100% - 2px);
    z-index: 1004;
  }

  .vv-primary-navigation .sub-menu {
    top: calc(100% + 7px);
    z-index: 1005;
  }

  .vv-primary-navigation .menu-item.is-desktop-submenu-open > .sub-menu,
  .vv-primary-navigation .menu-item.is-desktop-submenu-open:hover > .sub-menu,
  .vv-primary-navigation .menu-item.is-desktop-submenu-open:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }
}

/* v3.8: completely separate desktop and mobile navigation systems. */
.vv-desktop-header {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  min-width: 0;
}

.vv-desktop-navigation .menu,
.vv-desktop-navigation .sub-menu,
.vv-mobile-navigation .menu,
.vv-mobile-navigation .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vv-desktop-navigation > .menu {
  align-items: center;
  display: flex;
  gap: 2px;
}

.vv-desktop-navigation .menu-item {
  position: relative;
}

.vv-desktop-navigation .menu-item > a {
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.96);
  display: block;
  font-family: var(--vv-font-heading);
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 12px 9px;
  text-decoration: none;
  white-space: nowrap;
}

.vv-desktop-navigation .current-menu-item > a,
.vv-desktop-navigation .current-menu-ancestor > a,
.vv-desktop-navigation .menu-item > a:hover,
.vv-desktop-navigation .menu-item > a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5d3;
}

.vv-desktop-navigation .menu-item-has-children {
  isolation: isolate;
}

.vv-desktop-navigation .menu-item-has-children > a {
  padding-right: 24px;
  position: relative;
}

.vv-desktop-navigation .menu-item-has-children > a::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 6px;
  position: absolute;
  right: 10px;
  top: calc(50% - 5px);
  transform: rotate(45deg);
  width: 6px;
}

.vv-desktop-navigation .menu-item-has-children::before {
  content: "";
  height: 18px;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(100% - 2px);
  z-index: 1004;
}

.vv-desktop-navigation .sub-menu {
  background: var(--vv-warm-white);
  border: 1px solid rgba(73, 110, 62, 0.2);
  border-radius: 14px;
  box-shadow: var(--vv-shadow);
  left: 0;
  min-width: 250px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 7px);
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  visibility: hidden;
  z-index: 1005;
}

.vv-desktop-navigation .sub-menu a {
  border-radius: 9px;
  color: var(--vv-dark-green);
  display: block;
  font-family: var(--vv-font-heading);
  font-size: 0.9rem;
  padding: 11px 12px;
  text-decoration: none;
  white-space: normal;
}

.vv-desktop-navigation .sub-menu a:hover,
.vv-desktop-navigation .sub-menu a:focus-visible {
  background: rgba(156, 172, 62, 0.16);
  color: var(--vv-mauve);
}

.vv-desktop-navigation .menu-item:hover > .sub-menu,
.vv-desktop-navigation .menu-item:focus-within > .sub-menu,
.vv-desktop-navigation .menu-item.is-desktop-submenu-open > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.vv-desktop-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}

.vv-mobile-navigation-panel {
  display: none;
}

@media (max-width: 1024px) {
  .vv-desktop-header {
    display: none !important;
  }

  button.vv-menu-toggle {
    display: flex !important;
  }

  .vv-site-header,
  .vv-site-header.is-scrolled,
  .vv-header-solid .vv-site-header,
  body.vv-nav-open .vv-site-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    contain: none !important;
    filter: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.vv-nav-open .vv-site-header {
    background: #496E3E !important;
  }

  .vv-mobile-navigation-panel {
    align-items: stretch;
    background: linear-gradient(180deg, #496E3E 0%, #3D5F36 100%);
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--vv-header-height));
    inset: var(--vv-header-height) 0 auto 0;
    max-height: calc(100dvh - var(--vv-header-height));
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 20px calc(28px + env(safe-area-inset-bottom));
    pointer-events: none;
    position: fixed;
    transform: translateY(-10px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    visibility: hidden;
    width: 100%;
    z-index: 1001;
  }

  .vv-mobile-navigation-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .vv-mobile-navigation > .menu,
  .vv-mobile-navigation .menu-item {
    display: block;
    width: 100%;
  }

  .vv-mobile-navigation .menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    position: relative;
  }

  .vv-mobile-navigation .menu-item > a {
    color: rgba(255, 255, 255, 0.96);
    display: block;
    font-family: var(--vv-font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    min-height: 52px;
    padding: 14px 52px 14px 6px;
    text-decoration: none;
  }

  .vv-mobile-navigation .menu-item > a:hover,
  .vv-mobile-navigation .menu-item > a:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: var(--vv-white);
  }

  .vv-mobile-navigation .menu-item-has-children > a::after {
    display: none;
  }

  .vv-mobile-navigation .vv-submenu-toggle {
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--vv-white) !important;
    cursor: pointer;
    display: flex;
    height: 52px;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    z-index: 2;
  }

  .vv-mobile-navigation .vv-submenu-toggle::before {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    height: 8px;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 160ms ease;
    width: 8px;
  }

  .vv-mobile-navigation .vv-submenu-toggle[aria-expanded="true"]::before {
    transform: rotate(225deg) translate(-1px, -1px);
  }

  .vv-mobile-navigation .sub-menu {
    background: rgba(255, 255, 255, 0.08);
    display: none;
    padding: 4px 10px 10px 18px;
  }

  .vv-mobile-navigation .menu-item.is-submenu-open > .sub-menu {
    display: block;
  }

  .vv-mobile-navigation .sub-menu .menu-item {
    border-bottom: 0;
  }

  .vv-mobile-navigation .sub-menu a {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.98rem;
    min-height: 44px;
    padding: 11px 8px;
  }

  .vv-mobile-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-top: 22px;
  }

  .vv-mobile-actions .vv-header-utility {
    font-size: 1rem;
    min-height: 52px;
    padding-inline: 12px;
  }

  .vv-menu-backdrop {
    display: none !important;
  }
}

@media (max-width: 782px) {
  .admin-bar .vv-mobile-navigation-panel {
    height: calc(100dvh - var(--vv-header-height) - 46px);
    inset: calc(var(--vv-header-height) + 46px) 0 auto 0;
    max-height: calc(100dvh - var(--vv-header-height) - 46px);
  }
}

@media (max-width: 560px) {
  .vv-mobile-navigation-panel {
    padding: 10px 18px calc(24px + env(safe-area-inset-bottom));
  }

  .vv-mobile-actions {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }
}

@media (min-width: 1025px) {
  button.vv-menu-toggle,
  .vv-mobile-navigation-panel {
    display: none !important;
  }
}

@media (min-width: 1025px) and (max-width: 1370px) {
  .vv-desktop-header {
    gap: 10px;
  }

  .vv-desktop-navigation .menu-item > a {
    font-size: 0.86rem;
    padding-inline: 7px;
  }

  .vv-desktop-actions .vv-header-utility {
    font-size: 0.85rem;
    padding-inline: 11px;
  }
}

/* v3.9: desktop/mobile breakpoint correction.
 * Desktop navigation begins at 1025 CSS pixels. This prevents a desktop
 * browser using 125%-150% zoom from being misclassified as a mobile device.
 * Mobile navigation is strictly limited to 1024 CSS pixels and below.
 */
@media (min-width: 1025px) {
  :root {
    --vv-header-height: 94px;
  }

  .vv-desktop-header {
    display: flex !important;
  }

  button.vv-menu-toggle,
  .vv-mobile-navigation-panel,
  .vv-menu-backdrop {
    display: none !important;
  }

  .vv-site-header,
  .vv-site-header.is-scrolled,
  .vv-header-solid .vv-site-header {
    contain: none !important;
    filter: none !important;
    overflow: visible !important;
    transform: none !important;
  }
}

/* Compact desktop treatment for laptops and desktop browsers at elevated zoom. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .vv-header-inner {
    padding-inline: 12px;
  }

  .vv-site-header .custom-logo,
  .vv-brand-image--header {
    max-height: 62px;
    max-width: 180px;
  }

  .vv-desktop-header {
    gap: 7px;
  }

  .vv-desktop-navigation > .menu {
    gap: 0;
  }

  .vv-desktop-navigation .menu-item > a {
    font-size: 0.76rem;
    padding: 11px 5px;
  }

  .vv-desktop-navigation .menu-item-has-children > a {
    padding-right: 18px;
  }

  .vv-desktop-navigation .menu-item-has-children > a::after {
    right: 7px;
  }

  .vv-desktop-actions {
    gap: 6px;
  }

  .vv-desktop-actions .vv-header-utility {
    font-size: 0.76rem;
    gap: 4px;
    min-height: 42px;
    padding: 9px 9px;
  }

  .vv-desktop-actions .vv-action-icon {
    height: 16px;
    width: 16px;
  }
}

@media (max-width: 1024px) {
  .vv-desktop-header {
    display: none !important;
  }

  button.vv-menu-toggle {
    display: flex !important;
  }
}

/* v4.2.4: keep desktop dropdown chevrons in normal layout flow.
 * The prior correction targeted the retired .vv-primary-navigation selector,
 * while the live desktop menu uses .vv-desktop-navigation.  At laptop widths
 * the absolutely positioned chevron could therefore overlap the last letters
 * in “Private Tours” and “About.”  A flex-aligned chevron cannot overlap text.
 */
@media (min-width: 1025px) {
  .vv-desktop-navigation .menu-item-has-children > a {
    align-items: center;
    display: flex;
    gap: 7px;
    padding-right: 9px;
  }

  .vv-desktop-navigation .menu-item-has-children > a::after {
    flex: 0 0 6px;
    margin-left: 1px;
    position: static;
    right: auto;
    top: auto;
  }
}

@media (min-width: 1025px) and (max-width: 1240px) {
  .vv-desktop-navigation .menu-item-has-children > a {
    gap: 5px;
    padding-right: 5px;
  }
}


/* v4.2.6: intent-based header CTA and compact-desktop safeguards. */
.vv-header-utility--cta {
  text-align: center;
}

.vv-header-utility--cta span {
  white-space: nowrap;
}

@media (min-width: 1025px) and (max-width: 1240px) {
  .vv-desktop-actions .vv-header-utility--gift {
    flex: 0 0 42px;
    min-width: 42px;
    padding-inline: 9px;
  }

  .vv-desktop-actions .vv-header-utility--gift span {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
  }

  .vv-desktop-actions .vv-header-utility--cta {
    font-size: 0.72rem;
    line-height: 1.15;
    padding-inline: 8px;
  }

  .vv-desktop-actions .vv-header-utility--cta .vv-action-icon {
    display: none;
  }
}

@media (max-width: 1024px) {
  .vv-mobile-actions .vv-header-utility {
    text-align: center;
    white-space: normal;
  }

  .vv-mobile-actions .vv-header-utility--cta span {
    white-space: normal;
  }
}

/* v4.2.7: clearer labels and more readable desktop header typography. */
@media (min-width: 1371px) {
  .vv-desktop-header {
    gap: 16px;
  }

  .vv-desktop-navigation > .menu {
    gap: 3px;
  }

  .vv-desktop-navigation .menu-item > a {
    font-size: 1rem;
    padding-inline: 9px;
  }

  .vv-desktop-navigation .sub-menu a {
    font-size: 0.96rem;
  }

  .vv-desktop-actions .vv-header-utility {
    font-size: 0.96rem;
  }
}

@media (min-width: 1241px) and (max-width: 1370px) {
  .vv-desktop-header {
    gap: 10px;
  }

  .vv-desktop-navigation .menu-item > a {
    font-size: 0.94rem;
    padding-inline: 7px;
  }

  .vv-desktop-navigation .sub-menu a {
    font-size: 0.92rem;
  }

  .vv-desktop-actions .vv-header-utility {
    font-size: 0.92rem;
    padding-inline: 10px;
  }
}

@media (min-width: 1121px) and (max-width: 1240px) {
  .vv-desktop-navigation .menu-item > a {
    font-size: 0.88rem;
    padding-inline: 5px;
  }

  .vv-desktop-navigation .sub-menu a {
    font-size: 0.88rem;
  }

  .vv-desktop-actions .vv-header-utility--cta {
    font-size: 0.82rem;
  }
}

@media (min-width: 1025px) and (max-width: 1120px) {
  .vv-header-inner {
    padding-inline: 9px;
  }

  .vv-desktop-navigation .menu-item > a {
    font-size: 0.82rem;
    padding-inline: 4px;
  }

  .vv-desktop-navigation .sub-menu a {
    font-size: 0.86rem;
  }

  .vv-desktop-actions .vv-header-utility--cta {
    font-size: 0.78rem;
    padding-inline: 7px;
  }
}



/* v4.2.12: ambient Vineyard Voyages glow for the sitewide availability CTA. */
.vv-header-utility--cta {
  isolation: isolate;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(251, 248, 240, 0.42),
    0 4px 12px rgba(107, 42, 88, 0.18);
}

.vv-header-utility--cta::before {
  animation: vv-header-cta-glow 8s ease-in-out infinite alternate;
  background: conic-gradient(
    from 205deg,
    rgba(156, 172, 62, 0.62),
    rgba(246, 216, 151, 0.66),
    rgba(107, 42, 88, 0.54),
    rgba(246, 216, 151, 0.58),
    rgba(156, 172, 62, 0.62)
  );
  border-radius: inherit;
  content: "";
  filter: blur(7px);
  inset: -4px;
  opacity: 0.30;
  pointer-events: none;
  position: absolute;
  transform: scale(0.99) rotate(-1deg);
  transform-origin: center;
  z-index: -1;
}

@keyframes vv-header-cta-glow {
  0% {
    opacity: 0.22;
    transform: scale(0.99) rotate(-1deg);
  }
  55% {
    opacity: 0.38;
    transform: scale(1.015) rotate(1deg);
  }
  100% {
    opacity: 0.27;
    transform: scale(1.005) rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vv-header-utility--cta::before {
    animation: none;
    opacity: 0.24;
    transform: scale(1);
  }
}

/* v4.2.13: opt-in ambient background and elevated editorial panels. */
#vv-landing-page.vv-ambient-page {
  /* v4.2.15: static ambient gradients avoid full-page repaints and long main-thread tasks. */
  animation: none;
  background-color: var(--vv-cream);
  background-image:
    radial-gradient(circle at 12% 12%, rgba(156, 172, 62, 0.22), transparent 34%),
    radial-gradient(circle at 88% 28%, rgba(107, 42, 88, 0.18), transparent 36%),
    radial-gradient(circle at 24% 78%, rgba(246, 216, 151, 0.30), transparent 38%),
    radial-gradient(circle at 86% 92%, rgba(73, 110, 62, 0.16), transparent 34%);
  background-position: 0% 0%, 100% 12%, 10% 100%, 100% 88%;
  background-repeat: no-repeat;
  background-size: 145% 145%, 150% 150%, 155% 155%, 145% 145%;
}

#vv-landing-page.vv-ambient-page > .vv-ambient-panel {
  background: rgba(255, 253, 249, 0.90);
  border: 1px solid rgba(107, 42, 88, 0.15);
  border-radius: 26px;
  box-shadow:
    0 18px 48px rgba(48, 41, 45, 0.11),
    0 0 44px rgba(156, 172, 62, 0.10),
    0 0 58px rgba(107, 42, 88, 0.08);
  margin: 28px auto;
  max-width: 1200px;
  position: relative;
  width: calc(100% - 40px);
}

#vv-landing-page.vv-ambient-page > .vv-ambient-panel--green {
  border-color: rgba(73, 110, 62, 0.24);
  box-shadow:
    0 18px 48px rgba(48, 41, 45, 0.10),
    0 0 50px rgba(156, 172, 62, 0.16);
}

#vv-landing-page.vv-ambient-page > .vv-ambient-panel--mauve {
  border-color: rgba(107, 42, 88, 0.24);
  box-shadow:
    0 18px 48px rgba(48, 41, 45, 0.10),
    0 0 50px rgba(107, 42, 88, 0.14);
}

#vv-landing-page.vv-ambient-page > .vv-ambient-panel--gold {
  border-color: rgba(196, 151, 73, 0.24);
  box-shadow:
    0 18px 48px rgba(48, 41, 45, 0.10),
    0 0 52px rgba(246, 216, 151, 0.22);
}

/* Keep ambient-panel content visible if a scroll observer is delayed or skipped. */
#vv-landing-page.vv-ambient-page .vv-reveal,
#vv-landing-page.vv-ambient-page .vv-scroll-reveal {
  opacity: 1 !important;
  transform: none !important;
}

@keyframes vv-ambient-page-drift {
  0% {
    background-position: 0% 0%, 100% 12%, 10% 100%, 100% 88%;
  }
  50% {
    background-position: 10% 8%, 90% 2%, 0% 90%, 92% 100%;
  }
  100% {
    background-position: 18% 2%, 82% 16%, 14% 82%, 100% 94%;
  }
}

@media (max-width: 768px) {
  #vv-landing-page.vv-ambient-page {
    animation: none;
    background-position: 0% 0%, 100% 20%, 0% 76%, 100% 100%;
    background-size: 185% 185%, 190% 190%, 190% 190%, 185% 185%;
  }

  #vv-landing-page.vv-ambient-page > .vv-ambient-panel {
    border-radius: 20px;
    box-shadow:
      0 12px 30px rgba(48, 41, 45, 0.10),
      0 0 30px rgba(156, 172, 62, 0.09),
      0 0 34px rgba(107, 42, 88, 0.07);
    margin: 18px auto;
    width: calc(100% - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #vv-landing-page.vv-ambient-page {
    animation: none;
  }
}


/* v4.2.16: sitewide ambient cards, color transitions, and form containment. */
#vv-landing-page {
  background-color: var(--vv-cream);
  background-image:
    radial-gradient(circle at 12% 12%, rgba(156, 172, 62, 0.22), transparent 34%),
    radial-gradient(circle at 88% 28%, rgba(107, 42, 88, 0.18), transparent 36%),
    radial-gradient(circle at 24% 78%, rgba(246, 216, 151, 0.30), transparent 38%),
    radial-gradient(circle at 86% 92%, rgba(73, 110, 62, 0.16), transparent 34%);
  background-position: 0% 0%, 100% 12%, 10% 100%, 100% 88%;
  background-repeat: no-repeat;
  background-size: 145% 145%, 150% 150%, 155% 155%, 145% 145%;
  display: flow-root;
}

#vv-landing-page > section:not(.vv-hero):not(.vv-gallery-hero) {
  background-color: rgba(255, 253, 249, 0.92) !important;
  border: 1px solid rgba(107, 42, 88, 0.14);
  border-radius: 26px;
  box-shadow:
    0 18px 48px rgba(48, 41, 45, 0.10),
    0 0 46px rgba(156, 172, 62, 0.10),
    0 0 56px rgba(107, 42, 88, 0.07);
  box-sizing: border-box;
  margin: 28px auto !important;
  max-width: 1200px !important;
  position: relative;
  width: calc(100% - 40px) !important;
}

#vv-landing-page > section.vv-section--soft,
#vv-landing-page > section.vv-section--stone,
#vv-landing-page > section.vv-section--blush,
#vv-landing-page > section.vv-category-section,
#vv-landing-page > section.vv-routing-section {
  background-color: rgba(250, 246, 238, 0.90) !important;
  border-color: rgba(156, 172, 62, 0.20);
}

#vv-landing-page > section.vv-section--mauve,
#vv-landing-page > section.vv-section--green,
#vv-landing-page > section.vv-section--forest,
#vv-landing-page > section.vv-section.vv-contact-section {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 20px 52px rgba(48, 41, 45, 0.15),
    0 0 56px rgba(107, 42, 88, 0.10);
}

#vv-landing-page > section.vv-section--mauve,
#vv-landing-page > section.vv-section.vv-contact-section {
  background-image: linear-gradient(
    to bottom,
    rgba(107, 42, 88, 0.16) 0%,
    rgba(107, 42, 88, 0.96) 13%,
    rgb(107, 42, 88) 28%,
    rgb(107, 42, 88) 72%,
    rgba(107, 42, 88, 0.96) 87%,
    rgba(107, 42, 88, 0.16) 100%
  ) !important;
}

#vv-landing-page > section.vv-section--green,
#vv-landing-page > section.vv-section--forest {
  background-image: linear-gradient(
    to bottom,
    rgba(73, 110, 62, 0.14) 0%,
    rgba(73, 110, 62, 0.96) 13%,
    rgb(73, 110, 62) 28%,
    rgb(73, 110, 62) 72%,
    rgba(73, 110, 62, 0.96) 87%,
    rgba(73, 110, 62, 0.14) 100%
  ) !important;
}

#vv-landing-page .vv-form-shell,
#vv-landing-page .vv-form-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(107, 42, 88, 0.16) !important;
  border-radius: 22px !important;
  box-shadow:
    0 18px 42px rgba(48, 41, 45, 0.14),
    0 0 32px rgba(156, 172, 62, 0.10) !important;
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 720px;
  min-width: 0;
  overflow: clip;
  padding: clamp(10px, 1.7vw, 20px) !important;
  width: 100%;
}

#vv-landing-page .vv-form-viewport {
  background: #ffffff !important;
  border-radius: 14px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: clip !important;
  width: 100%;
}

#vv-landing-page iframe[src*="sibforms.com"],
#vv-landing-page iframe[id^="xola-embedded"] {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 14px;
  box-sizing: border-box;
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

#vv-landing-page #vv-faq-search-form,
#vv-landing-page #vv-faq-search-form .vv-search-box {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

#vv-landing-page #vv-faq-search-form .vv-search-box {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(107, 42, 88, 0.16);
  box-shadow: 0 12px 30px rgba(48, 41, 45, 0.08);
}

.vv-site-footer {
  margin-top: 72px;
  position: relative;
}

.vv-site-footer::before {
  background:
    linear-gradient(to bottom, rgba(61, 95, 54, 0) 0%, rgba(61, 95, 54, 0.16) 24%, rgb(61, 95, 54) 100%),
    radial-gradient(circle at 16% 12%, rgba(156, 172, 62, 0.20), transparent 45%),
    radial-gradient(circle at 84% 8%, rgba(107, 42, 88, 0.12), transparent 42%);
  content: "";
  height: 72px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -72px;
}

@media (max-width: 768px) {
  #vv-landing-page {
    background-position: 0% 0%, 100% 20%, 0% 76%, 100% 100%;
    background-size: 185% 185%, 190% 190%, 190% 190%, 185% 185%;
  }

  #vv-landing-page > section:not(.vv-hero):not(.vv-gallery-hero) {
    border-radius: 20px;
    box-shadow:
      0 12px 30px rgba(48, 41, 45, 0.10),
      0 0 30px rgba(156, 172, 62, 0.08),
      0 0 34px rgba(107, 42, 88, 0.06);
    margin: 18px auto !important;
    width: calc(100% - 24px) !important;
  }

  #vv-landing-page .vv-form-shell,
  #vv-landing-page .vv-form-panel {
    border-radius: 18px !important;
    padding: 8px !important;
  }

  #vv-landing-page iframe[src*="sibforms.com"],
  #vv-landing-page iframe[id^="xola-embedded"] {
    border-radius: 12px;
  }

  .vv-site-footer {
    margin-top: 52px;
  }

  .vv-site-footer::before {
    height: 52px;
    top: -52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #vv-landing-page {
    scroll-behavior: auto;
  }
}


/* ------------------------------------------------------------------
   "Why groups book Vineyard Voyages" value-prop block.
   Used on the private-tour landing pages, inserted directly after the
   hero. Lives here rather than in each page body so the copy and the
   styling can be changed in one place.
   ------------------------------------------------------------------ */
#vv-landing-page .vv-whyus,
body #vv-landing-page > section.vv-whyus.vv-whyus {
  background-color: var(--vv-soft-cream, #f3eee4) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 56px 0;
}

#vv-landing-page .vv-whyus-inner {
  margin: 0 auto;
  max-width: 1060px;
  padding: 0 24px;
}

#vv-landing-page .vv-whyus-head {
  margin: 0 auto 30px;
  max-width: 760px;
  text-align: center;
}

#vv-landing-page .vv-whyus-eyebrow {
  color: var(--vv-mauve, #6b2a58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

#vv-landing-page .vv-whyus h2 {
  color: var(--vv-ink, #30292d);
  font-family: var(--vv-font-heading, "Philosopher", Georgia, serif);
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.15;
  margin: 0 0 12px;
}

#vv-landing-page .vv-whyus-lead {
  color: var(--vv-muted, #675f64);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

#vv-landing-page .vv-whyus-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  #vv-landing-page .vv-whyus-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#vv-landing-page .vv-whyus-card {
  background: var(--vv-white, #ffffff);
  border: 1px solid rgba(107, 42, 88, 0.10);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(48, 41, 45, 0.06);
  padding: 24px 22px;
}

#vv-landing-page .vv-whyus-card h3 {
  color: var(--vv-dark-green, #496E3E);
  font-family: var(--vv-font-heading, "Philosopher", Georgia, serif);
  font-size: 1.18rem;
  line-height: 1.25;
  margin: 0 0 8px;
}

#vv-landing-page .vv-whyus-card p {
  color: var(--vv-muted, #675f64);
  font-size: 0.96rem;
  line-height: 1.6;
  margin: 0;
}

/* ===== Sitewide CSS moved here from Custom Code snippet 10162 (Sitewide CSS - VV customisations) on September 2, 2026 so it ships in the cached stylesheet instead of inline on every page. If you upload a new theme zip, keep this block. ===== */
/* ===================================================================
   Vineyard Voyages site customisations — moved out of the theme.

   These rules used to live at the end of assets/css/global.css. Uploading
   a new theme zip replaces that folder and deletes them (this happened on
   Aug 10 2026, wiping the section fades, the ambient panel system, the
   header CTA glow and the footer rule). Keeping them here stores them in
   the database instead, so they survive every future theme upload.

   Captured from global.css at theme VERSION 4.2.15 on Aug 12 2026.
   If you edit the theme zip to include these, delete this snippet so the
   rules are not defined twice.
   =================================================================== */

/* v4.2.12: ambient Vineyard Voyages glow for the sitewide availability CTA. */
.vv-header-utility--cta {
  isolation: isolate;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(251, 248, 240, 0.42),
    0 4px 12px rgba(107, 42, 88, 0.18);
}

.vv-header-utility--cta::before {
  animation: vv-header-cta-glow 8s ease-in-out infinite alternate;
  background: conic-gradient(
    from 205deg,
    rgba(156, 172, 62, 0.62),
    rgba(246, 216, 151, 0.66),
    rgba(107, 42, 88, 0.54),
    rgba(246, 216, 151, 0.58),
    rgba(156, 172, 62, 0.62)
  );
  border-radius: inherit;
  content: "";
  filter: blur(7px);
  inset: -4px;
  opacity: 0.30;
  pointer-events: none;
  position: absolute;
  transform: scale(0.99) rotate(-1deg);
  transform-origin: center;
  z-index: -1;
}

@keyframes vv-header-cta-glow {
  0% {
    opacity: 0.22;
    transform: scale(0.99) rotate(-1deg);
  }
  55% {
    opacity: 0.38;
    transform: scale(1.015) rotate(1deg);
  }
  100% {
    opacity: 0.27;
    transform: scale(1.005) rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vv-header-utility--cta::before {
    animation: none;
    opacity: 0.24;
    transform: scale(1);
  }
}

/* v4.2.13: opt-in ambient background and elevated editorial panels. */
#vv-landing-page.vv-ambient-page {
  /* v4.2.15: static ambient gradients avoid full-page repaints and long main-thread tasks. */
  animation: none;
  background-color: var(--vv-cream);
  background-image:
    radial-gradient(circle at 12% 12%, rgba(156, 172, 62, 0.22), transparent 34%),
    radial-gradient(circle at 88% 28%, rgba(107, 42, 88, 0.18), transparent 36%),
    radial-gradient(circle at 24% 78%, rgba(246, 216, 151, 0.30), transparent 38%),
    radial-gradient(circle at 86% 92%, rgba(73, 110, 62, 0.16), transparent 34%);
  background-position: 0% 0%, 100% 12%, 10% 100%, 100% 88%;
  background-repeat: no-repeat;
  background-size: 145% 145%, 150% 150%, 155% 155%, 145% 145%;
}

#vv-landing-page.vv-ambient-page > .vv-ambient-panel {
  background: rgba(255, 253, 249, 0.90);
  border: 1px solid rgba(107, 42, 88, 0.15);
  border-radius: 26px;
  box-shadow:
    0 18px 48px rgba(48, 41, 45, 0.11),
    0 0 44px rgba(156, 172, 62, 0.10),
    0 0 58px rgba(107, 42, 88, 0.08);
  margin: 28px auto;
  max-width: 1200px;
  position: relative;
  width: calc(100% - 40px);
}

#vv-landing-page.vv-ambient-page > .vv-ambient-panel--green {
  border-color: rgba(73, 110, 62, 0.24);
  box-shadow:
    0 18px 48px rgba(48, 41, 45, 0.10),
    0 0 50px rgba(156, 172, 62, 0.16);
}

#vv-landing-page.vv-ambient-page > .vv-ambient-panel--mauve {
  border-color: rgba(107, 42, 88, 0.24);
  box-shadow:
    0 18px 48px rgba(48, 41, 45, 0.10),
    0 0 50px rgba(107, 42, 88, 0.14);
}

#vv-landing-page.vv-ambient-page > .vv-ambient-panel--gold {
  border-color: rgba(196, 151, 73, 0.24);
  box-shadow:
    0 18px 48px rgba(48, 41, 45, 0.10),
    0 0 52px rgba(246, 216, 151, 0.22);
}

/* Keep ambient-panel content visible if a scroll observer is delayed or skipped. */
#vv-landing-page.vv-ambient-page .vv-reveal,
#vv-landing-page.vv-ambient-page .vv-scroll-reveal {
  opacity: 1 !important;
  transform: none !important;
}

@keyframes vv-ambient-page-drift {
  0% {
    background-position: 0% 0%, 100% 12%, 10% 100%, 100% 88%;
  }
  50% {
    background-position: 10% 8%, 90% 2%, 0% 90%, 92% 100%;
  }
  100% {
    background-position: 18% 2%, 82% 16%, 14% 82%, 100% 94%;
  }
}

@media (max-width: 768px) {
  #vv-landing-page.vv-ambient-page {
    animation: none;
    background-position: 0% 0%, 100% 20%, 0% 76%, 100% 100%;
    background-size: 185% 185%, 190% 190%, 190% 190%, 185% 185%;
  }

  #vv-landing-page.vv-ambient-page > .vv-ambient-panel {
    border-radius: 20px;
    box-shadow:
      0 12px 30px rgba(48, 41, 45, 0.10),
      0 0 30px rgba(156, 172, 62, 0.09),
      0 0 34px rgba(107, 42, 88, 0.07);
    margin: 18px auto;
    width: calc(100% - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #vv-landing-page.vv-ambient-page {
    animation: none;
  }
}


/* v4.2.16: sitewide ambient cards, color transitions, and form containment. */
#vv-landing-page {
  background-color: transparent !important;
  background-image: none !important;
  display: flow-root;
  position: relative;
}

html {
  background-color: #f2ead9 !important;
  background-image: none !important;
}

body {
  background-color: #f2ead9 !important;
  background-image:
    radial-gradient(ellipse 70% 40% at 8% 3%, rgba(122, 143, 46, 0.72), transparent 62%),
    radial-gradient(ellipse 60% 36% at 94% 8%, rgba(107, 42, 88, 0.58), transparent 60%),
    radial-gradient(ellipse 75% 42% at 4% 97%, rgba(214, 168, 92, 0.72), transparent 64%),
    radial-gradient(ellipse 65% 38% at 98% 93%, rgba(182, 93, 124, 0.52), transparent 62%),
    radial-gradient(ellipse 90% 55% at 50% 50%, rgba(255, 253, 248, 0.55), transparent 70%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: scroll !important;
}

.vv-site-main,
.vv-site-main-inner,
main.vv-site-main {
  background-color: transparent !important;
  background-image: none !important;
}

/* Flat fills: no gradient fades on mauve panels or above the footer. */
.vv-final,
#vv-tour-inquiry,
.vv-section--mauve,
.vv-cta-band {
  background-color: #6b2a58 !important;
  background-image: none !important;
}

.vv-site-footer::after {
  display: none !important;
}

/* Divider rules: 5px solid mauve between hero, page and footer. */
#vv-landing-page > .vv-hero {
  border-bottom: 5px solid #6b2a58 !important;
  position: relative;
}

.vv-site-footer {
  border-top: 5px solid #6b2a58 !important;
}

.vv-site-footer::before {
  display: none !important;
}

/* No gradient fills inside cards or panels. */
#vv-landing-page .vv-routing-section,
#vv-landing-page section.vv-section--mauve,
#vv-landing-page section.vv-section--green,
#vv-landing-page .vv-form-section,
#vv-landing-page .vv-ticket-top,
#vv-landing-page .vv-availability-card-top,
#vv-landing-page .vv-pickup-head,
#vv-landing-page .vv-trust-card,
#vv-landing-page .vv-guide-art,
#vv-landing-page .vv-stat,
#vv-landing-page .vv-branch-card {
  background-image: none !important;
}

#vv-landing-page section.vv-section--mauve,
#vv-landing-page .vv-form-section {
  background-color: #6b2a58 !important;
}

#vv-landing-page section.vv-section--green {
  background-color: #496e3e !important;
}

/* Remaining gradient panels found in the theme stylesheet and page styles. */
#vv-floating-cta {
  background-color: #6b2a58 !important;
  background-image: none !important;
}

.vv-post-card-image {
  background-color: #ead9b8 !important;
  background-image: none !important;
}

.vv-blog-index,
.vv-error-page {
  background-color: transparent !important;
  background-image: none !important;
}

/* Higher specificity than the page-level !important rules on the colour bands. */
html body #vv-landing-page section.vv-section.vv-section--mauve,
html body #vv-landing-page section.vv-section.vv-section--green,
html body #vv-landing-page section.vv-section.vv-form-section {
  background-image: none !important;
}

html body #vv-landing-page section.vv-section.vv-section--mauve,
html body #vv-landing-page section.vv-section.vv-form-section {
  background-color: #6b2a58 !important;
}

html body #vv-landing-page section.vv-section.vv-section--green {
  background-color: #496e3e !important;
}

/* REMOVED Sept 2, 2026 - a blanket background-image:none across every element in every
   section also stripped legitimate background PHOTOS, not just gradients. That blanked the
   Connoisseur ticket card, the Metro pickup card and the homepage occasion cards, all of
   which had white text sitting on a background this rule deleted. Gradients are removed by
   the targeted rules above and below instead. Do not reintroduce a blanket rule here. */

/* Every remaining gradient, flattened. */
.vv-bridge-title,
.vv-single-hero,
.vv-navigation-panel,
.vv-mobile-navigation-panel {
  background-image: none !important;
}

.vv-bridge-title {
  background-color: #fffdf8 !important;
}

.vv-single-hero {
  background-color: #6b2a58 !important;
}

.vv-navigation-panel,
.vv-mobile-navigation-panel {
  background-color: #fffdf8 !important;
}

.vv-header-utility--cta::before {
  display: none !important;
}

/* Hero copy sits over photography, so it carries its own shadow. */
#vv-landing-page > .vv-hero h1,
#vv-landing-page > .vv-hero h2,
#vv-landing-page > .vv-hero p,
#vv-landing-page > .vv-hero li,
#vv-landing-page > .vv-hero span,
#vv-landing-page > .vv-hero strong {
  text-shadow: 0 1px 2px rgba(24, 12, 20, 0.60), 0 4px 20px rgba(24, 12, 20, 0.50) !important;
}

#vv-landing-page > .vv-hero .vv-button,
#vv-landing-page > .vv-hero .vv-nx-btn,
#vv-landing-page > .vv-hero a[class*="button"],
#vv-landing-page > .vv-hero a[class*="btn"] {
  text-shadow: none !important;
}

/* A departure date should be the loudest fact in the block. */
#vv-landing-page .vv-when {
  color: var(--vv-mauve, #6b2a58);
  display: block;
  font-family: "Philosopher", Georgia, serif;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.08;
  margin: 14px 0 0;
}

#vv-landing-page .vv-when small {
  color: var(--vv-muted, #6b6167);
  display: block;
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  margin-top: 8px;
  text-transform: uppercase;
}

/* REMOVED Sept 2, 2026 - the colour-variety rule was written against SECTIONS, not cards.
   Christian asked for variety in the cards. Applied to sections it repainted ones that were
   designed dark, leaving their white text on a pale ground (found on /clubs-associations,
   9 unreadable items in one section). Card-level variety can be added later, scoped to cards. */


#vv-landing-page > .vv-trust-widget-section {
  background-image: none !important;
}

#vv-landing-page > .vv-trust-widget-section::before,
#vv-landing-page > .vv-trust-widget-section::after {
  display: none !important;
}

#vv-landing-page > section:not(.vv-hero):not(.vv-gallery-hero):not(.vv-final):not(.vv-cta-band) {
  background-color: #fffdf8 !important;
  border: 1px solid rgba(107, 42, 88, 0.14);
  border-radius: 26px;
  box-shadow:
    0 18px 48px rgba(48, 41, 45, 0.10),
    0 0 46px rgba(156, 172, 62, 0.10),
    0 0 56px rgba(107, 42, 88, 0.07);
  box-sizing: border-box;
  margin: 28px auto !important;
  max-width: 1200px !important;
  position: relative;
  width: calc(100% - 40px) !important;
}

#vv-landing-page > section.vv-section--soft,
#vv-landing-page > section.vv-section--stone,
#vv-landing-page > section.vv-section--blush,
#vv-landing-page > section.vv-category-section,
#vv-landing-page > section.vv-routing-section {
  background-color: rgba(250, 246, 238, 0.90) !important;
  border-color: rgba(156, 172, 62, 0.20);
}

#vv-landing-page > section.vv-section--mauve,
#vv-landing-page > section.vv-section--green,
#vv-landing-page > section.vv-section--forest,
#vv-landing-page > section.vv-section.vv-contact-section {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 20px 52px rgba(48, 41, 45, 0.15),
    0 0 56px rgba(107, 42, 88, 0.10);
}

#vv-landing-page > section.vv-section--mauve,
#vv-landing-page > section.vv-section.vv-contact-section {
  background-image: linear-gradient(
    to bottom,
    rgba(107, 42, 88, 0.16) 0%,
    rgba(107, 42, 88, 0.96) 13%,
    rgb(107, 42, 88) 28%,
    rgb(107, 42, 88) 72%,
    rgba(107, 42, 88, 0.96) 87%,
    rgba(107, 42, 88, 0.16) 100%
  ) !important;
}

#vv-landing-page > section.vv-section--green,
#vv-landing-page > section.vv-section--forest {
  background-image: linear-gradient(
    to bottom,
    rgba(73, 110, 62, 0.14) 0%,
    rgba(73, 110, 62, 0.96) 13%,
    rgb(73, 110, 62) 28%,
    rgb(73, 110, 62) 72%,
    rgba(73, 110, 62, 0.96) 87%,
    rgba(73, 110, 62, 0.14) 100%
  ) !important;
}

#vv-landing-page .vv-form-shell,
#vv-landing-page .vv-form-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(107, 42, 88, 0.16) !important;
  border-radius: 22px !important;
  box-shadow:
    0 18px 42px rgba(48, 41, 45, 0.14),
    0 0 32px rgba(156, 172, 62, 0.10) !important;
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 720px;
  min-width: 0;
  overflow: clip;
  padding: clamp(10px, 1.7vw, 20px) !important;
  width: 100%;
}

#vv-landing-page .vv-form-viewport {
  background: #ffffff !important;
  border-radius: 14px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: clip !important;
  width: 100%;
}

#vv-landing-page iframe[src*="sibforms.com"],
#vv-landing-page iframe[id^="xola-embedded"] {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 14px;
  box-sizing: border-box;
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

#vv-landing-page #vv-faq-search-form,
#vv-landing-page #vv-faq-search-form .vv-search-box {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

#vv-landing-page #vv-faq-search-form .vv-search-box {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(107, 42, 88, 0.16);
  box-shadow: 0 12px 30px rgba(48, 41, 45, 0.08);
}

.vv-site-footer {
  margin-top: 72px;
  position: relative;
}

.vv-site-footer::before {
  background:
    linear-gradient(to bottom, rgba(61, 95, 54, 0) 0%, rgba(61, 95, 54, 0.16) 24%, rgb(61, 95, 54) 100%),
    radial-gradient(circle at 16% 12%, rgba(156, 172, 62, 0.20), transparent 45%),
    radial-gradient(circle at 84% 8%, rgba(107, 42, 88, 0.12), transparent 42%);
  content: "";
  height: 72px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -72px;
}

@media (max-width: 768px) {
  #vv-landing-page {
    background-position: 0% 0%, 100% 20%, 0% 76%, 100% 100%;
    background-size: 185% 185%, 190% 190%, 190% 190%, 185% 185%;
  }

  #vv-landing-page > section:not(.vv-hero):not(.vv-gallery-hero) {
    border-radius: 20px;
    box-shadow:
      0 12px 30px rgba(48, 41, 45, 0.10),
      0 0 30px rgba(156, 172, 62, 0.08),
      0 0 34px rgba(107, 42, 88, 0.06);
    margin: 18px auto !important;
    width: calc(100% - 24px) !important;
  }

  #vv-landing-page .vv-form-shell,
  #vv-landing-page .vv-form-panel {
    border-radius: 18px !important;
    padding: 8px !important;
  }

  #vv-landing-page iframe[src*="sibforms.com"],
  #vv-landing-page iframe[id^="xola-embedded"] {
    border-radius: 12px;
  }

  .vv-site-footer {
    margin-top: 52px;
  }

  .vv-site-footer::before {
    height: 52px;
    top: -52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #vv-landing-page {
    scroll-behavior: auto;
  }
}


/* ------------------------------------------------------------------
   "Why groups book Vineyard Voyages" value-prop block.
   Used on the private-tour landing pages, inserted directly after the
   hero. Lives here rather than in each page body so the copy and the
   styling can be changed in one place.
   ------------------------------------------------------------------ */
#vv-landing-page .vv-whyus,
body #vv-landing-page > section.vv-whyus.vv-whyus {
  background-color: var(--vv-soft-cream, #f3eee4) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 56px 0;
}

#vv-landing-page .vv-whyus-inner {
  margin: 0 auto;
  max-width: 1060px;
  padding: 0 24px;
}

#vv-landing-page .vv-whyus-head {
  margin: 0 auto 30px;
  max-width: 760px;
  text-align: center;
}

#vv-landing-page .vv-whyus-eyebrow {
  color: var(--vv-mauve, #6b2a58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

#vv-landing-page .vv-whyus h2 {
  color: var(--vv-ink, #30292d);
  font-family: var(--vv-font-heading, "Philosopher", Georgia, serif);
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.15;
  margin: 0 0 12px;
}

#vv-landing-page .vv-whyus-lead {
  color: var(--vv-muted, #675f64);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

#vv-landing-page .vv-whyus-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  #vv-landing-page .vv-whyus-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#vv-landing-page .vv-whyus-card {
  background: var(--vv-white, #ffffff);
  border: 1px solid rgba(107, 42, 88, 0.10);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(48, 41, 45, 0.06);
  padding: 24px 22px;
}

#vv-landing-page .vv-whyus-card h3 {
  color: var(--vv-dark-green, #496E3E);
  font-family: var(--vv-font-heading, "Philosopher", Georgia, serif);
  font-size: 1.18rem;
  line-height: 1.25;
  margin: 0 0 8px;
}

#vv-landing-page .vv-whyus-card p {
  color: var(--vv-muted, #675f64);
  font-size: 0.96rem;
  line-height: 1.6;
  margin: 0;
}


/* ------------------------------------------------------------------
   Collapsible detail sections (.vv-collapse).
   Used to shorten long interior pages without deleting content:
   the section heading stays visible, the body sits behind a click.
   Uses native <details>/<summary> — no JS, keyboard and screen-reader
   accessible by default.
   ------------------------------------------------------------------ */
#vv-landing-page .vv-collapse {
  border-top: 1px solid var(--vv-line, rgba(73,110,62,.18));
  margin: 18px auto 0;
  max-width: 900px;
}
#vv-landing-page .vv-collapse > summary {
  cursor: pointer;
  font-family: var(--vv-font-heading, "Philosopher", Georgia, serif);
  font-size: 1.16rem;
  line-height: 1.35;
  list-style: none;
  padding: 19px 56px 19px 20px;
  position: relative;
}
#vv-landing-page .vv-collapse > summary::-webkit-details-marker { display: none; }
#vv-landing-page .vv-collapse > summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
#vv-landing-page .vv-collapse[open] > summary::after { content: "2212"; }
#vv-landing-page .vv-collapse > .vv-collapse-body { padding: 0 0 22px; }


/* Mobile header quick actions - phone + Book, revised 2026-08-31 */
/* Solid fills only: the homepage header is transparent over the hero video,
   so outlines and mid-tone fills disappear there. */
@media (max-width: 859px) {
  .vv-mobile-quick { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 10px; }
  .vv-mobile-quick__tel,
  .vv-mobile-quick__book {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; text-decoration: none; flex: 0 0 auto; border: 0;
    box-shadow: 0 3px 14px rgba(28, 14, 24, 0.38);
  }
  .vv-mobile-quick__tel { width: 42px; height: 42px; background: #552047; color: #fbf8f0; }
  .vv-mobile-quick__tel svg { width: 19px; height: 19px; fill: currentColor; }
  .vv-mobile-quick__book {
    min-height: 42px; padding: 0 18px;
    background: #fbf8f0; color: #552047;
    font-family: var(--vv-font-heading); font-weight: 700; font-size: 15px; line-height: 1;
    white-space: nowrap;
  }
  .vv-mobile-quick__tel:hover, .vv-mobile-quick__tel:focus-visible { background: #6b2a58; color: #ffffff; }
  .vv-mobile-quick__book:hover, .vv-mobile-quick__book:focus-visible { background: #ffffff; color: #552047; }
  .vv-mobile-quick__tel:focus-visible, .vv-mobile-quick__book:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
  .vv-brand-image--header { max-width: 138px; height: auto; }
}
@media (max-width: 380px) {
  .vv-mobile-quick { gap: 6px; margin-right: 8px; }
  .vv-mobile-quick__book { padding: 0 14px; font-size: 14px; }
  .vv-brand-image--header { max-width: 118px; }
}

/* Hero legibility, every page. A flat mauve wash from the brand palette sits over the
   hero photo or video so white text always has ground under it. Flat, not a gradient. */
html body #vv-landing-page section.vv-hero::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: none !important;
  background-color: rgba(48, 22, 41, 0.62) !important;
}

/* Heroes with no photo or video are already a solid brand panel - no wash needed.
   Written as a removal so that a browser without :has() still gets the wash everywhere,
   which is the safe direction to fail in. */
html body #vv-landing-page section.vv-hero:not(:has(img, video))::after {
  display: none !important;
}
html body #vv-landing-page section.vv-hero .vv-hero-content,
html body #vv-landing-page section.vv-hero .vv-hero-content h1,
html body #vv-landing-page section.vv-hero .vv-hero-content p,
html body #vv-landing-page section.vv-hero .vv-hero-content span {
  text-shadow: 0 1px 2px rgba(20, 10, 16, 0.75), 0 3px 14px rgba(20, 10, 16, 0.55) !important;
}
html body #vv-landing-page section.vv-hero .vv-hero-content a.vv-button {
  text-shadow: none !important;
}

/* Hero text must never depend on requestAnimationFrame. The page script adds vv-hero-ready
   inside a double rAF, which never fires while a tab is backgrounded, leaving the H1 at
   opacity 0 permanently. Force the final state; the entrance fade is dropped on purpose. */
html body #vv-landing-page.vv-motion-ready .vv-hero-enter {
  opacity: 1 !important;
  transform: none !important;
}

/* Photo band: 2 columns on every narrow width. The page CSS used 3 columns from 641-1024px,
   which leaves one empty cell on a 10-photo grid. Two columns divides evenly. */
@media (max-width: 1024px) {
  html body #vv-landing-page .vv-photoband__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Tap targets (WCAG 2.2 SC 2.5.8). Standalone footer links measured 19-22px tall.
   Links inline inside a sentence are exempt and are deliberately left alone. */
.vv-site-footer .vv-footer-menu a,
.vv-site-footer .vv-footer-contact a,
.vv-site-footer .vv-pickup a,
.vv-site-footer a.vv-current-schedule,
.vv-site-footer .vv-footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Hero small print sat at 78-90 percent white over the wash. Solid white on dark ground. */
html body #vv-landing-page section.vv-hero .vv-hero-meta,
html body #vv-landing-page section.vv-hero .vv-hero-inclusions,
html body #vv-landing-page section.vv-hero .vv-private-path {
  color: #ffffff !important;
}

/* Brevo proposal form: the embed is a fixed-height iframe, so too short means a nested
   scrollbar inside the page. Measured content height is 1431px at a 505px form width.
   Desktop is set from that measurement; the narrow value is an estimate to verify on a phone. */
html body iframe[title="Request a private tour proposal"],
html body iframe[title="Request a corporate tour proposal"],
html body iframe[title="Request a bachelorette tour proposal"] {
  height: 1500px !important;
  min-height: 1500px !important;
}
@media (max-width: 640px) {
  html body iframe[title="Request a private tour proposal"],
  html body iframe[title="Request a corporate tour proposal"],
  html body iframe[title="Request a bachelorette tour proposal"] {
    height: 1900px !important;
    min-height: 1900px !important;
  }
}

/* Solid replacements for the two card headers whose gradient was removed. Both hold white
   text baked into the page, so with no fill they rendered white-on-white and looked blank.
   Found Sept 2, 2026 on /the-tour (Connoisseur card and the Metro pickup card). */
html body #vv-landing-page .vv-ticket-card--featured .vv-ticket-top,
html body #vv-landing-page .vv-pickup-card:first-of-type .vv-pickup-head {
  background-color: #6b2a58 !important;
}

/* Clubs & Associations page spacing. Sections sat 28px apart with 30px internal padding,
   and the trust/stats strip had no margin at all, so it butted straight into the panel above.
   Scoped to this page only until Christian says to roll it out. */
html body.page-id-9724 #vv-landing-page > section:not(.vv-hero) {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}
html body.page-id-9724 #vv-landing-page .vv-trust-wrap {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

/* Photo bands removed Sept 2, 2026 - replaced by photos inside the cards. */

/* Photos inside cards. Card padding is 25px 21px, so the media is pulled out to the card
   edge and the icon badge lifts up to overlap it. */
html body #vv-landing-page .vv-card-media {
  margin: -25px -21px 0;
  border-radius: var(--vv-radius-md) var(--vv-radius-md) 0 0;
  overflow: hidden;
  align-self: stretch;
  line-height: 0;
}
html body #vv-landing-page .vv-card-media img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}
html body #vv-landing-page .vv-style-card .vv-card-media img {
  height: 230px;
}
html body #vv-landing-page .vv-audience-card .vv-card-media + .vv-icon {
  margin-top: -34px;
  position: relative;
  z-index: 1;
  background: #fffdf8;
  box-shadow: 0 6px 16px rgba(52, 41, 48, 0.18);
}
html body #vv-landing-page .vv-style-card .vv-card-media {
  margin-top: -25px;
}

/* Why-us panel: was a full-width 1200x512 block with square corners, out of step with
   every other panel on the site. Tightened and rounded, with icons on the three cards. */
html body.page-id-9724 #vv-landing-page section.vv-whyus {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
html body #vv-landing-page .vv-icon--whyus {
  margin: 0 0 16px !important;
  height: 60px !important;
  width: 60px !important;
}
html body #vv-landing-page .vv-icon--whyus svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

/* Sept 2, 2026 - illustrated day timeline on /the-tour */
html body #vv-landing-page .vv-day-list li.vv-day-li--photo { grid-template-columns: 140px minmax(0, 1fr) 190px; align-items: start; }
html body #vv-landing-page .vv-day-photo { grid-column: 3; grid-row: 1; margin: 0; align-self: center; }
html body #vv-landing-page .vv-day-photo img { display: block; width: 100%; height: 126px; object-fit: cover; border-radius: 14px; box-shadow: 0 8px 20px rgba(52, 41, 48, 0.18); }
@media (max-width: 900px) {
  html body #vv-landing-page .vv-day-list li.vv-day-li--photo { grid-template-columns: 140px minmax(0, 1fr); }
  html body #vv-landing-page .vv-day-photo { grid-column: 1 / -1; grid-row: auto; margin-top: 12px; }
  html body #vv-landing-page .vv-day-photo img { height: 180px; }
}

/* Sept 2, 2026 - photo banner on the pickup-point cards */
html body #vv-landing-page .vv-pickup-media { margin: 0; line-height: 0; }
html body #vv-landing-page .vv-pickup-media img { display: block; width: 100%; height: 180px; object-fit: cover; }

/* Sept 2, 2026 - photos inside the four homepage step cards */
html body #vv-landing-page .vv-steps li.vv-step-li--photo { display: flex; flex-direction: column; padding-top: 0; overflow: hidden; }
html body #vv-landing-page .vv-steps li.vv-step-li--photo::before { order: 2; margin-top: -30px; position: relative; z-index: 1; box-shadow: 0 6px 16px rgba(52, 41, 48, 0.22); }
html body #vv-landing-page .vv-step-media { order: 1; margin: 0 -26px; line-height: 0; }
html body #vv-landing-page .vv-step-media img { display: block; width: 100%; height: 150px; object-fit: cover; }
html body #vv-landing-page .vv-steps li.vv-step-li--photo strong { order: 3; margin-top: 14px; }
html body #vv-landing-page .vv-steps li.vv-step-li--photo span { order: 4; }

/* Sept 2, 2026 - keep the homepage photo band on clean rows at every width */
@media (max-width: 1024px) {
  html body #vv-landing-page .vv-photoband__grid .vv-photoband__item:nth-child(n+15) { display: none; }
}


/* Sept 2, 2026 - section-level accordions (.vv-sc).
   Deliberately NOT named .vv-collapse: that class carries a
   summary::after "+" / minus rule whose selector outranks anything
   written here, which turned the chevron into a rotating glyph.
   The chevron is an inline SVG in the markup for the same reason. */
html body #vv-landing-page details.vv-sc { margin: 24px auto 0; max-width: 580px; }
html body #vv-landing-page details.vv-sc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 26px;
  border: 1px solid rgba(107, 42, 88, 0.30);
  border-radius: 999px;
  background: #fffdf8;
  color: #6b2a58;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html body #vv-landing-page details.vv-sc > summary::-webkit-details-marker { display: none; }
html body #vv-landing-page details.vv-sc > summary::marker { content: none; }
html body #vv-landing-page details.vv-sc > summary::after,
html body #vv-landing-page details.vv-sc > summary::before { content: none !important; display: none !important; }
html body #vv-landing-page .vv-sc-label { display: block; }
html body #vv-landing-page .vv-sc-chev { flex: none; width: 20px; height: 20px; transition: transform 0.2s ease; }
html body #vv-landing-page details.vv-sc[open] > summary .vv-sc-chev { transform: rotate(180deg); }
html body #vv-landing-page details.vv-sc > summary:hover { background: #f2ead9; border-color: rgba(107, 42, 88, 0.55); }
html body #vv-landing-page details.vv-sc > summary:active { background: #ead9b8; border-color: #6b2a58; box-shadow: inset 0 2px 6px rgba(52, 41, 48, 0.14); }
html body #vv-landing-page details.vv-sc > summary:focus-visible { outline: 3px solid #9cac3e; outline-offset: 3px; }
html body #vv-landing-page details.vv-sc[open] > summary { margin-bottom: 28px; }
html body #vv-landing-page .vv-sc-body { animation: vvScIn 0.28s ease both; }
@keyframes vvScIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html body #vv-landing-page .vv-sc-body { animation: none; }
  html body #vv-landing-page .vv-sc-chev { transition: none; }
}
@media (max-width: 640px) {
  html body #vv-landing-page details.vv-sc { max-width: none; }
  html body #vv-landing-page details.vv-sc > summary { padding: 15px 20px; }
}

/* Sept 2, 2026 - FIX: the closing CTA band was painting warm white while its
   heading, paragraph and phone button are all white, so the whole block read
   as blank. The band is meant to be mauve. The flat-fill rule earlier in this
   file uses a bare class selector and was losing the cascade, so this one is
   scoped harder and sits last. */
/* Doubled class so this outranks the section-card rules, which use two
   :not() classes and were repainting the band warm white. background-image is
   deliberately left alone so the page-level mauve gradient still paints. */
html body #vv-landing-page section.vv-final.vv-final,
html body #vv-landing-page section.vv-cta-band.vv-cta-band {
  background-color: #6b2a58 !important;
  border-color: transparent !important;
}
html body #vv-landing-page section.vv-final h2,
html body #vv-landing-page section.vv-cta-band h2 { color: #ffffff !important; }

/* Sept 2, 2026 - FIX: FAQ rows were white cards with a 14px radius and a
   hairline, floating on a warm-white ground. Flattened so they sit in the page:
   no fill, no radius, one divider between rows, marker reduced to the glyph. */
html body #vv-landing-page .vv-faq-list { gap: 0 !important; row-gap: 0 !important; }
html body #vv-landing-page .vv-faq-list > details {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(107, 42, 88, 0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
html body #vv-landing-page .vv-faq-list > details:first-of-type { border-top: 0 !important; }
html body #vv-landing-page .vv-faq-list > details > summary {
  padding-left: 0 !important;
  padding-right: 42px !important;
}
html body #vv-landing-page .vv-faq-list > details > summary::after {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(107, 42, 88, 0.62) !important;
  right: 2px !important;
}
html body #vv-landing-page .vv-faq-list > details > .vv-faq-answer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ==================================================================================
   Sept 15, 2026 - MOBILE OVERHAUL. Phones and small tablets only; desktop untouched.
   Everything below is scoped to max-width media queries and sits last in the file so
   it wins the cascade. To roll back the whole overhaul, delete from this line to EOF
   and bump VERSION in functions.php.
   ================================================================================== */

/* 1. Mobile menu. The "Every remaining gradient, flattened" block above repaints the
   mobile panel warm white (#fffdf8) while the links stayed white, so the menu was
   invisible on every phone. Dark green panel restored, links solid white, bigger rows. */
@media (max-width: 1024px) {
  html body .vv-mobile-navigation-panel,
  html body .vv-navigation-panel {
    background-color: #3D5F36 !important;
    background-image: linear-gradient(180deg, #496E3E 0%, #3D5F36 100%) !important;
    padding: 6px 18px calc(28px + env(safe-area-inset-bottom)) !important;
  }
  html body .vv-mobile-navigation .menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  }
  html body .vv-mobile-navigation .sub-menu .menu-item {
    border-bottom: 0 !important;
  }
  html body .vv-mobile-navigation .menu-item > a {
    color: #ffffff !important;
    font-size: 1.22rem !important;
    line-height: 1.2 !important;
    min-height: 58px !important;
    padding: 17px 60px 17px 8px !important;
    text-shadow: none !important;
  }
  html body .vv-mobile-navigation .menu-item > a:hover,
  html body .vv-mobile-navigation .menu-item > a:focus-visible,
  html body .vv-mobile-navigation .current-menu-item > a {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5d3 !important;
  }
  html body .vv-mobile-navigation .vv-submenu-toggle {
    color: #ffffff !important;
    height: 58px !important;
    width: 58px !important;
  }
  html body .vv-mobile-navigation .vv-submenu-toggle::before {
    border-color: #d8e08a !important;
    height: 10px !important;
    width: 10px !important;
  }
  html body .vv-mobile-navigation .sub-menu {
    background: rgba(0, 0, 0, 0.18) !important;
    border-radius: 12px !important;
    margin: 0 0 10px !important;
    padding: 6px 10px 8px 16px !important;
  }
  html body .vv-mobile-navigation .sub-menu a {
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 1.02rem !important;
    min-height: 46px !important;
    padding: 11px 8px !important;
  }
  html body .vv-mobile-actions {
    gap: 10px !important;
    margin-top: 20px !important;
  }
  html body .vv-mobile-actions .vv-header-utility--gift {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    color: #ffffff !important;
  }
  html body .vv-mobile-actions .vv-header-utility--book,
  html body .vv-mobile-actions .vv-header-utility--cta {
    background: #9CAC3E !important;
    border-color: #9CAC3E !important;
    color: #24321f !important;
  }
}

@media (max-width: 768px) {

  /* Backstop: nothing may pan the page sideways on a phone. */
  html {
    overflow-x: clip !important;
  }

  /* 2. Page ground. The four colored radial blobs read as smudges on a phone.
     Flat soft cream, one soft shadow per card, tighter gutters. */
  html body {
    background-color: #f3eee4 !important;
    background-image: none !important;
  }
  html body #vv-landing-page > section:not(.vv-hero):not(.vv-gallery-hero) {
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(48, 41, 45, 0.09) !important;
    margin: 14px auto !important;
    padding: 30px 14px !important;
    width: calc(100% - 16px) !important;
  }
  html body #vv-landing-page > section.vv-trust,
  html body #vv-landing-page > section.vv-trust-widget-section {
    padding: 14px 10px !important;
  }
  html body #vv-landing-page > section:not(.vv-hero) > .vv-shell,
  html body #vv-landing-page > section:not(.vv-hero) > .vv-nx-shell,
  html body #vv-landing-page > section:not(.vv-hero) > [class*="-shell"],
  html body #vv-landing-page > section:not(.vv-hero) > [class*="-inner"] {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* 3. Type density. Class-based page rules still win over these element defaults;
     only unclassed body copy and line-height are touched. */
  html body #vv-landing-page h2 {
    font-size: clamp(1.55rem, 6.8vw, 1.95rem) !important;
    line-height: 1.12 !important;
  }
  html body #vv-landing-page h3 {
    line-height: 1.2 !important;
  }
  html body #vv-landing-page p,
  html body #vv-landing-page li {
    line-height: 1.5 !important;
  }
  html body #vv-landing-page p:not([class]),
  html body #vv-landing-page li:not([class]) {
    font-size: 0.95rem !important;
  }

  /* 4. Hero. Christian's call, Sept 15, 2026: the hero paragraph is hidden on phones.
     Kicker + headline + two buttons side by side + next departures. */
  html body #vv-landing-page section.vv-hero .vv-hero-copy,
  html body #vv-landing-page section.vv-hero .vv-hero__copy,
  html body #vv-landing-page section.vv-hero .vv-hero-subtitle,
  html body #vv-landing-page section.vv-hero .vv-lead {
    display: none !important;
  }
  html body #vv-landing-page section.vv-hero {
    min-height: 0 !important;
  }
  /* The hero used to center its copy inside a tall min-height; with that gone the copy
     needs its own clearance under the fixed header. */
  html body #vv-landing-page section.vv-hero .vv-hero-content {
    padding-bottom: 36px !important;
    padding-top: calc(var(--vv-header-height) + 30px) !important;
  }
  html body #vv-landing-page section.vv-hero h1 {
    font-size: clamp(2rem, 8.4vw, 2.5rem) !important;
    line-height: 1.06 !important;
    margin: 0 0 18px !important;
  }
  html body #vv-landing-page section.vv-hero .vv-eyebrow,
  html body #vv-landing-page section.vv-hero .vv-kicker {
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 10px !important;
  }
  html body #vv-landing-page section.vv-hero .vv-button-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  html body #vv-landing-page section.vv-hero .vv-button-row > a {
    flex: 1 1 calc(50% - 5px) !important;
    font-size: 0.9rem !important;
    min-height: 48px !important;
    padding: 12px 10px !important;
    width: auto !important;
  }

  /* 5. Swipe rails. Every card grid that stacked into a long vertical list becomes a
     horizontal scroll-snap rail; the next card peeks in from the right as the cue. */
  html body #vv-landing-page .vv-branch-grid,
  html body #vv-landing-page ol.vv-steps,
  html body #vv-landing-page .vv-occ,
  html body #vv-landing-page .vv-route-grid,
  html body #vv-landing-page .vv-review-grid,
  html body #vv-landing-page .vv-process-grid,
  html body #vv-landing-page .vv-values-grid,
  html body #vv-landing-page .vv-team-grid,
  html body #vv-landing-page .vv-experience-grid,
  html body #vv-landing-page .vv-check-grid,
  html body #vv-landing-page .vv-vibe-grid,
  html body #vv-landing-page .vv-personal-grid,
  html body #vv-landing-page .vv-use-grid,
  html body #vv-landing-page .vv-area-grid,
  html body #vv-landing-page .vv-location-hub-grid,
  html body #vv-landing-page .vv-audience-grid,
  html body #vv-landing-page .vv-style-grid,
  html body #vv-landing-page .vv-occasion-grid,
  html body #vv-landing-page .vv-whyus-grid,
  html body #vv-landing-page .vv-facts-grid,
  html body #vv-landing-page .vv-winery-list,
  html body #vv-landing-page .vv-standard-grid,
  html body #vv-landing-page .vv-path-grid,
  html body #vv-landing-page .vv-theme-strip,
  html body #vv-landing-page .vv-profile-list,
  /* Sept 16, 2026: itineraries (.vv-day-list, .vv-itinerary-grid, .vv-portugal-day-list) are
     deliberately NOT rails - each step is a multi-column grid that collapses badly at 82 percent
     width, and a day plan reads top to bottom anyway. */
  html body .vv-post-grid {
    -webkit-overflow-scrolling: touch;
    /* Sept 16, 2026: contain:inline-size stops a rail from pushing its min-content width
       into a parent grid track. Without it /the-tour's trust card grew to 695px on a
       412px phone and the whole page panned sideways. */
    contain: inline-size;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    padding: 8px 4px 22px !important;
    scroll-padding-left: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  html body #vv-landing-page .vv-branch-grid::-webkit-scrollbar,
  html body #vv-landing-page ol.vv-steps::-webkit-scrollbar,
  html body #vv-landing-page .vv-occ::-webkit-scrollbar,
  html body #vv-landing-page .vv-route-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-review-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-process-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-values-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-team-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-experience-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-check-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-vibe-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-personal-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-use-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-area-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-location-hub-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-audience-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-style-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-occasion-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-whyus-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-facts-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-winery-list::-webkit-scrollbar,
  html body #vv-landing-page .vv-standard-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-path-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-theme-strip::-webkit-scrollbar,
  html body #vv-landing-page .vv-profile-list::-webkit-scrollbar,
  html body .vv-post-grid::-webkit-scrollbar {
    display: none;
  }
  html body #vv-landing-page .vv-branch-grid > *,
  html body #vv-landing-page ol.vv-steps > *,
  html body #vv-landing-page .vv-route-grid > *,
  html body #vv-landing-page .vv-review-grid > *,
  html body #vv-landing-page .vv-process-grid > *,
  html body #vv-landing-page .vv-values-grid > *,
  html body #vv-landing-page .vv-team-grid > *,
  html body #vv-landing-page .vv-experience-grid > *,
  html body #vv-landing-page .vv-check-grid > *,
  html body #vv-landing-page .vv-vibe-grid > *,
  html body #vv-landing-page .vv-personal-grid > *,
  html body #vv-landing-page .vv-use-grid > *,
  html body #vv-landing-page .vv-area-grid > *,
  html body #vv-landing-page .vv-location-hub-grid > *,
  html body #vv-landing-page .vv-audience-grid > *,
  html body #vv-landing-page .vv-style-grid > *,
  html body #vv-landing-page .vv-whyus-grid > *,
  html body #vv-landing-page .vv-facts-grid > *,
  html body #vv-landing-page .vv-winery-list > *,
  html body #vv-landing-page .vv-standard-grid > *,
  html body #vv-landing-page .vv-path-grid > *,
  html body #vv-landing-page .vv-theme-strip > *,
  html body #vv-landing-page .vv-profile-list > *,
  html body .vv-post-grid > * {
    flex: 0 0 82% !important;
    margin: 0 !important;
    max-width: 330px !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    width: 82% !important;
  }
  /* Small image tiles: two visible per screen. */
  html body #vv-landing-page .vv-occ > *,
  html body #vv-landing-page .vv-occasion-grid > * {
    flex: 0 0 46% !important;
    max-width: 220px !important;
    scroll-snap-align: start;
    width: 46% !important;
  }
  /* Long paragraphs inside rail cards are trimmed so cards stay one screen tall. */
  html body #vv-landing-page .vv-branch-grid > * p:not([class*="price"]),
  html body #vv-landing-page .vv-route-grid > * p:not([class*="price"]),
  html body #vv-landing-page .vv-review-grid > * p:not([class*="price"]),
  html body #vv-landing-page .vv-team-grid > * p:not([class*="price"]),
  html body #vv-landing-page .vv-winery-list > * p:not([class*="price"]) {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    display: -webkit-box;
    overflow: hidden;
  }
  /* Homepage experience cards: photo, title, one line, price, buttons. Bullets off. */
  html body #vv-landing-page .vv-branch-grid > * ul {
    display: none !important;
  }

  /* Homepage photo band: two rows that swipe sideways instead of a 14-photo column. */
  html body #vv-landing-page .vv-photoband__grid {
    display: grid !important;
    gap: 8px !important;
    grid-auto-columns: 44% !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, 128px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 12px !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  html body #vv-landing-page .vv-photoband__grid::-webkit-scrollbar {
    display: none;
  }
  html body #vv-landing-page .vv-photoband__grid .vv-photoband__item,
  html body #vv-landing-page .vv-photoband__grid .vv-photoband__item:nth-child(n+15) {
    border-radius: 12px;
    display: block !important;
    height: 128px !important;
    margin: 0 !important;
    overflow: hidden;
    scroll-snap-align: start;
  }
  html body #vv-landing-page .vv-photoband__grid .vv-photoband__item img {
    height: 100% !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  /* 6. FAQ rows tighter. */
  html body #vv-landing-page .vv-faq-list > details > summary {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    padding-bottom: 12px !important;
    padding-top: 12px !important;
  }

  /* 7. Footer: link lists in two columns, less padding. */
  html body .vv-footer-main {
    padding: 34px 18px 28px !important;
  }
  html body .vv-footer-grid {
    gap: 26px !important;
  }
  html body .vv-footer-menu {
    column-gap: 16px;
    columns: 2;
  }
  html body .vv-footer-menu li {
    break-inside: avoid;
  }
  html body .vv-footer-menu li + li {
    margin-top: 6px !important;
  }
  html body .vv-site-footer {
    margin-top: 28px !important;
  }
}


/* ==================================================================================
   Sept 16, 2026 - MOBILE HERO + HEADER PASS (phones only). Follows the overhaul above.
   Research basis: one primary CTA, hero at 50-70 percent of the phone screen, copy
   anchored to the bottom so the video shows, header 60-80px.
   ================================================================================== */
@media (max-width: 560px) {
  :root {
    --vv-header-height: 64px;
  }
  html body .vv-header-inner {
    min-height: 64px !important;
    padding: 4px 12px !important;
  }
  html body .vv-site-header .custom-logo,
  html body .vv-brand-image--header,
  html body .vv-site-header.is-scrolled .vv-brand-image--header,
  html body .vv-header-solid .vv-brand-image--header,
  html body.vv-nav-open .vv-brand-image--header {
    max-height: 48px !important;
  }
}

@media (max-width: 768px) {
  /* Hero: video shows in the top two thirds, copy sits at the bottom on a lighter wash. */
  html body #vv-landing-page section.vv-hero {
    min-height: 66svh !important;
    min-height: 66vh;
  }
  html body #vv-landing-page section.vv-hero > .vv-shell {
    align-self: flex-end !important;
    width: 100%;
  }
  html body #vv-landing-page section.vv-hero .vv-hero-content {
    align-self: flex-end !important;
    margin-inline: auto !important;
    padding-bottom: 26px !important;
    padding-top: calc(var(--vv-header-height) + 14px) !important;
    text-align: center !important;
  }
  /* Doubled class: the Sitewide CSS snippet (10162) prints the 0.62 wash after this
     stylesheet, so equal specificity loses on source order. */
  html body #vv-landing-page section.vv-hero.vv-hero::after {
    background-color: rgba(48, 22, 41, 0.36) !important;
  }
  html body #vv-landing-page section.vv-hero .vv-eyebrow,
  html body #vv-landing-page section.vv-hero .vv-kicker {
    display: none !important;
  }
  html body #vv-landing-page section.vv-hero h1 {
    font-size: clamp(2.35rem, 10vw, 3rem) !important;
    margin-bottom: 18px !important;
    text-align: center !important;
    text-shadow: 0 2px 4px rgba(20, 10, 16, 0.70), 0 6px 22px rgba(20, 10, 16, 0.55) !important;
  }
  html body #vv-landing-page section.vv-hero .vv-hero-content p,
  html body #vv-landing-page section.vv-hero .vv-hero-content .vv-nd {
    text-align: center !important;
  }
  /* One primary button; the second action becomes a text link. */
  html body #vv-landing-page section.vv-hero .vv-button-row {
    align-items: center !important;
    flex-direction: column !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  html body #vv-landing-page section.vv-hero .vv-button-row > a:first-child {
    flex: 0 0 auto !important;
    font-size: 1rem !important;
    min-height: 52px !important;
    padding: 14px 18px !important;
    width: 100% !important;
  }
  html body #vv-landing-page section.vv-hero .vv-button-row > a:nth-child(n+2) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    flex: 0 0 auto !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    min-height: 40px !important;
    padding: 8px 6px !important;
    text-decoration: underline !important;
    text-underline-offset: 0.2em;
    width: auto !important;
  }
  /* Homepage: the departures block is moved out of the hero by a page script and
     becomes a slim strip under it. */
  html body #vv-landing-page > .vv-nd--strip:not([hidden]) {
    align-items: stretch;
    display: block;
    margin: 4px auto 0;
    padding: 12px 14px 2px;
    width: calc(100% - 16px);
  }
  html body #vv-landing-page > .vv-nd--strip .vv-nd-label {
    color: #496E3E !important;
    display: block !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    margin: 0 0 8px !important;
    text-shadow: none !important;
    text-transform: uppercase;
  }
  html body #vv-landing-page > .vv-nd--strip .vv-nd-dates {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    padding: 2px 0 6px !important;
    scrollbar-width: none;
  }
  html body #vv-landing-page > .vv-nd--strip .vv-nd-dates::-webkit-scrollbar {
    display: none;
  }
  html body #vv-landing-page > .vv-nd--strip .vv-nd-dates > * {
    background: #fffdf8 !important;
    border: 1px solid rgba(107, 42, 88, 0.30) !important;
    border-radius: 999px !important;
    color: #6b2a58 !important;
    flex: 0 0 auto !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    text-shadow: none !important;
    white-space: nowrap !important;
  }
  html body #vv-landing-page > .vv-nd--strip .vv-nd-dates > * * {
    color: inherit !important;
    text-shadow: none !important;
  }
  html body #vv-landing-page > .vv-nd--strip .vv-nd-date span {
    color: #496E3E !important;
    margin-left: 6px;
  }
  html body #vv-landing-page > .vv-nd--strip .vv-nd-all {
    color: #6b2a58 !important;
    display: inline-block !important;
    font-weight: 800 !important;
    margin: 4px 0 0 !important;
    text-shadow: none !important;
  }
}


/* ==================================================================================
   Sept 16, 2026 - /the-tour PHONE PASS: ticket cards, day plan, pickup cards.
   Christian: "the 2 ticket options and pickup spots are WAY too dense and need to be
   condensed and scrollable"; the day plan collapsed into a 140px column on phones.
   ================================================================================== */
@media (max-width: 768px) {
  /* Tickets and pickups: side-by-side swipe rails. */
  html body #vv-landing-page .vv-ticket-grid,
  html body #vv-landing-page .vv-pickup-grid {
    -webkit-overflow-scrolling: touch;
    contain: inline-size;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 4px 22px !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  html body #vv-landing-page .vv-ticket-grid::-webkit-scrollbar,
  html body #vv-landing-page .vv-pickup-grid::-webkit-scrollbar {
    display: none;
  }
  html body #vv-landing-page .vv-ticket-grid > *,
  html body #vv-landing-page .vv-pickup-grid > * {
    flex: 0 0 84% !important;
    margin: 0 !important;
    max-width: 330px !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    width: 84% !important;
  }

  /* Ticket cards condensed: short photo, no chips, 2-line blurb, 3 checklist lines. */
  html body #vv-landing-page .vv-ticket-media {
    height: 130px !important;
    overflow: hidden !important;
  }
  html body #vv-landing-page .vv-pickup-media {
    height: 120px !important;
    overflow: hidden !important;
  }
  html body #vv-landing-page .vv-ticket-media img {
    height: 130px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
  html body #vv-landing-page .vv-ticket-chip-row {
    display: none !important;
  }
  html body #vv-landing-page .vv-ticket-top > p {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    font-size: 0.92rem !important;
    overflow: hidden;
  }
  html body #vv-landing-page .vv-ticket-top,
  html body #vv-landing-page .vv-ticket-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body #vv-landing-page .vv-ticket-top {
    padding-bottom: 12px !important;
    padding-top: 14px !important;
  }
  html body #vv-landing-page .vv-ticket-body {
    padding-bottom: 14px !important;
    padding-top: 12px !important;
  }
  html body #vv-landing-page .vv-ticket-card .vv-check-list li:nth-child(n+4) {
    display: none !important;
  }
  html body #vv-landing-page .vv-ticket-card .vv-check-list li {
    font-size: 0.9rem !important;
  }
  html body #vv-landing-page .vv-ticket-note {
    font-size: 0.82rem !important;
    margin-top: 10px !important;
    padding: 10px 12px !important;
  }

  /* Day plan: one column per step - time, title, text, then a short photo. */
  html body #vv-landing-page .vv-day-list li,
  html body #vv-landing-page .vv-day-list li.vv-day-li--photo {
    align-items: start !important;
    column-gap: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 0 0 20px 34px !important;
    row-gap: 4px !important;
  }
  html body #vv-landing-page .vv-day-list .vv-day-time {
    color: #6b2a58 !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    margin: 0 !important;
    text-transform: uppercase !important;
  }
  html body #vv-landing-page .vv-day-list li h3 {
    font-size: 1.12rem !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
  }
  html body #vv-landing-page .vv-day-list li p {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }
  html body #vv-landing-page .vv-day-list .vv-day-photo {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin: 8px 0 0 !important;
    width: 100% !important;
  }
  html body #vv-landing-page .vv-day-list .vv-day-photo img {
    border-radius: 12px !important;
    height: 120px !important;
    width: 100% !important;
  }

  /* Pickup cards condensed: short photo, no bullets, one button. */
  html body #vv-landing-page .vv-pickup-media img {
    height: 120px !important;
  }
  html body #vv-landing-page .vv-pickup-body > ul {
    display: none !important;
  }
  html body #vv-landing-page .vv-pickup-actions .vv-button--primary {
    display: none !important;
  }
  html body #vv-landing-page .vv-pickup-actions {
    margin-top: 10px !important;
  }
  html body #vv-landing-page .vv-pickup-head,
  html body #vv-landing-page .vv-pickup-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body #vv-landing-page .vv-pickup-head h3 {
    font-size: 1.1rem !important;
  }
}


/* ==================================================================================
   Sept 16, 2026 - HERO SMALL PRINT + SECTION DENSITY, phones. Hero on phones is
   headline, one short meta line, one button, one text link. Section leads run three
   lines at most; collapsible prose is set smaller.
   ================================================================================== */
@media (max-width: 768px) {
  html body #vv-landing-page section.vv-hero .vv-hero-inclusions,
  html body #vv-landing-page section.vv-hero .vv-campaign-line,
  html body #vv-landing-page section.vv-hero .vv-private-path,
  html body #vv-landing-page section.vv-hero .vv-hero-note,
  html body #vv-landing-page section.vv-hero .vv-meta-more {
    display: none !important;
  }
  html body #vv-landing-page section.vv-hero .vv-hero-meta {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 12px auto 0 !important;
    max-width: 36ch !important;
    opacity: 0.92;
    text-align: center !important;
  }
  html body #vv-landing-page .vv-lead,
  html body #vv-landing-page .vvr-lede {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    overflow: hidden;
  }
  html body #vv-landing-page .vv-collapse-body p,
  html body #vv-landing-page .vv-collapse-body li {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
  }
  html body #vv-landing-page .vv-trust-card .vv-trust-links {
    display: none !important;
  }
}