/* ==========================================================================
   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;
}