/* ==========================================================================
   Vantage Point Acupuncture - extra stylesheet
   This file replaces small behaviours that used to be handled by JavaScript
   frameworks. Safe to edit. Loaded on every page after the main stylesheets.
   ========================================================================== */

/* ----- Animate-on-scroll fallback ---------------------------------------
   Elements with data-aos start hidden. assets/js/site.js adds the class
   .aos-animate when the element scrolls into view, which makes it appear. */
[data-aos] {
  transition-property: opacity, transform, clip-path;
  transition-duration: 0.8s;
  transition-timing-function: ease-in-out;
}

/* ----- Testimonial slider (home page) -----------------------------------
   The cards live inside .keen-slider. We turn it into a swipeable row.
   3 cards on desktop, 2 on tablet, 1 on mobile. */
.keen-slider {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 24px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.keen-slider::-webkit-scrollbar {
  display: none;
}
.keen-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  overflow: visible !important;
}
@media (min-width: 768px) {
  .keen-slider__slide {
    flex: 0 0 calc(50% - 12px);
  }
}
@media (min-width: 1024px) {
  .keen-slider__slide {
    flex: 0 0 calc(33.333% - 16px);
  }
}

/* ----- Gallery lightbox --------------------------------------------------
   Simple full-screen image viewer used on the Gallery page. */
.vp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(10, 10, 10, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
}
.vp-lightbox.is-open {
  display: flex;
}
.vp-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.vp-lightbox button {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.vp-lightbox button:hover {
  background: rgba(255, 255, 255, 0.28);
}
.vp-lightbox .vp-lb-close {
  top: 20px;
  right: 20px;
}
.vp-lightbox .vp-lb-prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.vp-lightbox .vp-lb-next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* ----- FAQ accordion -----------------------------------------------------
   Answers are collapsed by default; site.js toggles .vp-open on the wrapper. */
.vp-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
/* .vp-open .vp-faq-answer { max-height: 400px; margin-top: 0.5rem; } */

/* ==========================================================================
   SHOP - product grid and individual product pages
   Added August 2026. Everything below is prefixed .vp- so it cannot clash
   with the main stylesheets. Colours and fonts are the site's own.
   ========================================================================== */

/* ----- Shared shell ----------------------------------------------------- */
.vp-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 640px) {
  .vp-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (min-width: 1024px) {
  .vp-wrap {
    padding-left: 48px;
    padding-right: 48px;
  }
}

.vp-shop-section,
.vp-product-section {
  padding-top: 130px;
  background: #eaf0f0;
  font-family: var(--font-ppneuemontreal);
}
.vp-shop-section .vp-wrap {
  padding-top: 24px;
  padding-bottom: 72px;
}
.vp-product-section .vp-wrap {
  padding-top: 24px;
  padding-bottom: 64px;
}

/* ----- Shop page heading ------------------------------------------------ */
.vp-page-head {
  margin-bottom: 48px;
}
.vp-eyebrow {
  color: #6d6a5f;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: 12px;
}
.vp-page-title {
  color: #2b2b2b;
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1.12;
  font-weight: 400;
  margin: 0;
}
.vp-page-intro {
  color: #625b5a;
  font-size: 17px;
  line-height: 1.65;
  max-width: 620px;
  margin: 18px 0 0;
}

/* ----- Product grid ----------------------------------------------------- */
.vp-shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 28px;
}
@media (min-width: 560px) {
  .vp-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .vp-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .vp-shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.vp-card-media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(11, 61, 145, 0.08);
}
.vp-card-media img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: contain;
  padding: 18px;
  box-sizing: border-box;
  transition: transform 0.5s ease-out;
}
.vp-card-media:hover img,
.vp-card-media:focus-visible img {
  transform: scale(1.06);
}
.vp-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: 16px;
}
.vp-card-brand {
  color: #8d8a80;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.vp-card-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: #2b2b2b;
  margin: 0;
}
.vp-card-title a {
  color: inherit;
  text-decoration: none;
}
.vp-card-title a:hover {
  color: #0b3d91;
}
.vp-card-prices {
  list-style: none;
  margin: 10px 0 18px;
  padding: 0;
}
.vp-card-prices li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 2px;
}
.vp-card-price {
  color: #c59064;
  font-weight: 600;
  font-size: 18px;
}
.vp-card-size {
  color: #8d8a80;
  font-size: 14px;
}
/* margin-top:auto pushes the button to the bottom of the card so buttons
   line up across a row even when product names wrap onto two lines. The gap
   above it comes from .vp-card-prices, so nothing overrides the auto margin. */
.vp-card-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ----- Buttons ---------------------------------------------------------- */
.vp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 13px 28px;
  text-decoration: none !important;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
  cursor: pointer;
}
.vp-btn-outline {
  border: 1px solid #0b3d91;
  color: #0b3d91 !important;
  background: transparent;
}
.vp-btn-outline:hover,
.vp-btn-outline:focus-visible {
  background: #0b3d91;
  color: #fff !important;
}
.vp-btn-navy {
  background: #0b3d91;
  color: #fff !important;
  border: 1px solid #0b3d91;
}
.vp-btn-navy:hover,
.vp-btn-navy:focus-visible {
  background: #072d6d;
  border-color: #072d6d;
}
.vp-btn-peach {
  background: #ffcdb2;
  color: #4d3634 !important;
  border: 1px solid #ffcdb2;
}
.vp-btn-peach:hover,
.vp-btn-peach:focus-visible {
  background: #f7b795;
  border-color: #f7b795;
}

/* ----- Product page: breadcrumb ---------------------------------------- */
.vp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8d8a80;
  margin-bottom: 28px;
}
.vp-breadcrumb a {
  color: #625b5a;
  text-decoration: none;
}
.vp-breadcrumb a:hover {
  color: #0b3d91;
  text-decoration: underline;
}
.vp-breadcrumb span[aria-current] {
  color: #2b2b2b;
}

/* ----- Product page: layout -------------------------------------------- */
.vp-product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
@media (min-width: 900px) {
  .vp-product-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
  .vp-gallery {
    position: sticky;
    top: 120px;
  }
}

.vp-gallery-main {
  background: #fff;
  border: 1px solid rgba(11, 61, 145, 0.08);
  border-radius: 18px;
  overflow: hidden;
}
.vp-gallery-main img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 24px;
  box-sizing: border-box;
}
.vp-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.vp-thumb {
  width: 78px;
  height: 78px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(11, 61, 145, 0.12);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.vp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.vp-thumb.is-active,
.vp-thumb:hover {
  border-color: #0b3d91;
}

/* ----- Product page: information --------------------------------------- */
.vp-brand {
  color: #6d6a5f;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.18em;
  margin: 0 0 12px;
}
.vp-product-title {
  color: #2b2b2b;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 22px;
}
.vp-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.vp-price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(11, 61, 145, 0.1);
  border-radius: 999px;
  padding: 9px 18px;
}
.vp-price-size {
  color: #6d6a5f;
  font-size: 14px;
}
.vp-price-value {
  color: #c59064;
  font-weight: 600;
  font-size: 19px;
}
.vp-rule {
  height: 1px;
  background: rgba(11, 61, 145, 0.12);
  margin: 28px 0;
}
.vp-prose p {
  color: #625b5a;
  font-size: 16.5px;
  line-height: 1.72;
  margin: 0 0 16px;
}
.vp-sub-heading {
  color: #2b2b2b;
  font-size: 18px;
  font-weight: 500;
  margin: 26px 0 10px;
}
.vp-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.vp-list li {
  position: relative;
  padding-left: 24px;
  color: #625b5a;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 9px;
}
.vp-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffcdb2;
  border: 1px solid #c59064;
}
.vp-specs {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: #f9f5ee;
  border-radius: 12px;
}
.vp-specs dt {
  color: #6d6a5f;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.vp-specs dd {
  color: #2b2b2b;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.vp-specs dd:last-child {
  margin-bottom: 0;
}
.vp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.vp-stock-note {
  color: #8d8a80;
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0 0;
}

/* ----- Product page: related ------------------------------------------- */
.vp-related {
  background: #fff;
  font-family: var(--font-ppneuemontreal);
}
.vp-related .vp-wrap {
  padding-top: 64px;
  padding-bottom: 72px;
}
.vp-related-title {
  color: #2b2b2b;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 400;
  margin: 0 0 36px;
}
.vp-related .vp-card-media {
  border-color: rgba(11, 61, 145, 0.1);
  background: #f9f5ee;
}
.vp-related-back {
  margin-top: 44px;
}

/* ----- Accessibility ---------------------------------------------------- */
.vp-btn:focus-visible,
.vp-thumb:focus-visible,
.vp-card-media:focus-visible {
  outline: 2px solid #0b3d91;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .vp-card-media img,
  .vp-btn {
    transition: none;
  }
  .vp-card-media:hover img {
    transform: none;
  }
}

/* ==========================================================================
   TEAM MEMBER POPUP (About page) and DROPDOWN HOVER BRIDGE
   Added August 2026.
   ========================================================================== */

/* ----- Dropdown hover bridge --------------------------------------------
   The dropdown sits 8px below the button (mt-2), and that 8px gap belongs to
   neither element. Moving the cursor down across it counted as leaving the
   menu, so it closed before you could reach it. This invisible strip spans
   the gap so the pointer never leaves the hover area. Nothing about the
   appearance changes. */
#treatments-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
#treatments-menu.vp-dd-open {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ----- Team cards -------------------------------------------------------- */
.vp-member-bio {
  display: none;
}
.vp-member:focus-visible {
  outline: 2px solid #0b3d91;
  outline-offset: 4px;
}

/* ----- Popup ------------------------------------------------------------- */
.vp-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--font-ppneuemontreal);
}
.vp-modal.is-open {
  display: flex;
}
.vp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
.vp-modal-panel {
  position: relative;
  z-index: 1;
  background: #fff;
  width: 100%;
  max-width: 896px;
  border-radius: 8px;
  padding: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
@media (min-width: 640px) {
  .vp-modal-panel {
    padding: 24px;
  }
}
.vp-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #2b2b2b;
  cursor: pointer;
  transition: background 0.2s ease;
}
.vp-modal-close:hover {
  background: #eaf0f0;
}
.vp-modal-close:focus-visible {
  outline: 2px solid #0b3d91;
  outline-offset: 2px;
}

.vp-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1024px) {
  .vp-modal-body {
    flex-direction: row;
  }
}
.vp-modal-media {
  width: 100%;
  height: 250px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .vp-modal-media {
    height: 300px;
  }
}
@media (min-width: 768px) {
  .vp-modal-media {
    height: 400px;
  }
}
@media (min-width: 1024px) {
  .vp-modal-media {
    width: 50%;
    height: 450px;
  }
}
.vp-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vp-modal-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 1024px) {
  .vp-modal-text {
    width: 50%;
  }
}
.vp-modal-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.vp-modal-name-row img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
@media (min-width: 640px) {
  .vp-modal-name-row img {
    width: 24px;
    height: 24px;
  }
}
.vp-modal-name {
  font-size: 20px;
  font-weight: 600;
  color: #2b2b2b;
  margin: 0;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .vp-modal-name {
    font-size: 24px;
  }
}
@media (min-width: 1024px) {
  .vp-modal-name {
    font-size: 26px;
  }
}
.vp-modal-role {
  color: #6d6a5f;
  font-size: 14px;
  margin: 0;
}
@media (min-width: 640px) {
  .vp-modal-role {
    font-size: 16px;
  }
}
.vp-modal-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vp-modal-para {
  color: #6d6a5f;
  font-size: 14px;
  line-height: 1.65;
  text-align: justify;
  margin: 0;
}
.vp-modal-quals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vp-modal-quals li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.vp-modal-quals svg {
  flex-shrink: 0;
  color: #0b3d91;
}
.vp-modal-quals span {
  color: #6d6a5f;
  font-size: 13px;
  line-height: 1.45;
}
@media (min-width: 768px) {
  .vp-modal-quals span {
    font-size: 15px;
  }
}

body.vp-modal-open {
  overflow: hidden;
}

/* ==========================================================================
   SCROLLING MARQUEE BAND
   The blue band under the treatment cards. The original site drew this with
   a JavaScript library that only ran in the browser, so the exported pages
   were left with an empty blue stripe. This is a plain CSS version: same
   wording, same order, scrolls left, pauses when you hover it.
   ========================================================================== */
.vp-marquee {
  overflow: hidden;
  display: flex;
  width: 100%;
}
.vp-marquee-track {
  display: flex;
  width: max-content;
  /* site.js measures the content and sets this to hold a steady 50px per
     second, matching the original. The value here is only a fallback. */
  animation: vp-marquee-scroll var(--vp-marquee-duration, 45s) linear infinite;
  will-change: transform;
}
.vp-marquee:hover .vp-marquee-track {
  animation-play-state: paused;
}
@keyframes vp-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.vp-marquee-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.vp-marquee-item {
  display: flex;
  align-items: center;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.3px;
  font-family: var(--font-ppneuemontreal);
}
.vp-marquee-label {
  margin: 0 1.5rem;
  transition: opacity 0.3s ease;
}
.vp-marquee-label:hover {
  opacity: 0.7;
}
.vp-marquee-sep {
  margin: 0 1.5rem;
  opacity: 0.4;
  font-size: 0.9rem;
}

/* Visitors who ask their system to reduce motion get a static band they can
   swipe or scroll instead of a moving one. */
@media (prefers-reduced-motion: reduce) {
  .vp-marquee {
    overflow-x: auto;
  }
  .vp-marquee-track {
    animation: none;
  }
  .vp-marquee-group[aria-hidden="true"] {
    display: none;
  }
}