/* Native horizontal scrolling remains available without JavaScript. */
@media (min-width: 761px) {
  .lifestyle .section-heading { display: block; }
  .lifestyle .section-intro { max-width: 720px; margin-top: 22px; }
}
.lifestyle .scene-grid {
  display: flex;
  gap: 23px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y pinch-zoom;
  scrollbar-width: thin;
  scrollbar-color: #c3b8aa transparent;
}
.lifestyle .scene-grid::-webkit-scrollbar { display: block; height: 5px; }
.lifestyle .scene-grid::-webkit-scrollbar-thumb { background: #c3b8aa; border-radius: 5px; }
.lifestyle .scene {
  flex: 0 0 calc((100% - 46px) / 2.35);
  min-width: 0;
  scroll-snap-align: center;
}
.lifestyle .scene-image img { -webkit-user-drag: none; }
.lifestyle .scene-grid.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.lifestyle .scene-grid.is-dragging * { cursor: grabbing; }
.lifestyle .scene-pagination { display: none; }
.lifestyle .scene-pagination.is-enhanced { display: flex; justify-content: center; gap: 0; margin-top: 12px; }
.lifestyle .scene-pagination button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.lifestyle .scene-pagination button::after { content: ''; position: absolute; left: 19px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: #c3b8aa; }
.lifestyle .scene-pagination button[aria-pressed="true"]::after { background: var(--wine); }
.lifestyle .scene-controls { display: none; }
.lifestyle .scene-controls.is-enhanced { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 18px; }
.lifestyle .scene-controls .scene-pagination { display: flex; margin: 0; }
/* JavaScript owns horizontal gestures and swipe settling; vertical page
   scrolling and browser pinch zoom remain native. */
.lifestyle .scene-grid.is-enhanced { scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y pinch-zoom; }
@media (hover: hover) and (pointer: fine) {
  .lifestyle .scene-grid { cursor: grab; }
  .lifestyle .scene-grid.is-dragging { cursor: grabbing; }
  .lifestyle .scene-grid :is(a, button, input, select, textarea, [contenteditable], [role="button"]) { cursor: auto; }
}
@media (max-width: 760px) {
  .lifestyle .scene-grid {
    gap: 14px;
    max-width: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 14px;
    scroll-padding: 0 var(--gutter);
  }
  .lifestyle .scene { flex-basis: 86%; }
}
@media (prefers-reduced-motion: reduce) {
  .lifestyle .scene-grid { scroll-behavior: auto; }
}
/* Dots and arrows provide position/navigation without a second progress line. */
.lifestyle .scene-grid { scrollbar-width: none; padding-bottom: 0; }
.lifestyle .scene-grid::-webkit-scrollbar { display: none; }
.lifestyle .scene-controls.is-enhanced { gap: clamp(4px, 2vw, 20px); }
.lifestyle .scene-pagination button { width: clamp(30px, 8vw, 44px); }
.lifestyle .scene-pagination button::after { left: calc(50% - 3px); }

/* The dots stay under the photos; the arrows sit over the photos' edges (owner, 2026-10-07). */
.lifestyle .scene-controls.is-enhanced { gap: 6px; max-width: 480px; margin-inline: auto; }
.lifestyle .scene-controls .scene-pagination { flex: 1 1 auto; min-width: 0; }
.lifestyle .scene-pagination button { flex: 1 1 24px; width: auto; min-width: 24px; max-width: 44px; height: 44px; }

.lifestyle-research-prompt { margin-top: 24px; text-align: center; }
.lifestyle .lifestyle-tagline { margin-top: 14px; color: var(--aelo-blue, #092e3e); font-weight: 600; }
.lifestyle-research-prompt a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 0; font-size: 14px; line-height: 1.5; color: var(--aelo-blue, #092e3e); text-decoration: underline; text-underline-offset: 4px; }

/* Round edge arrows, shared by the lifestyle photos and the research carousel. */
.carousel-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 1px solid #d6d6d6;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--aelo-blue, #092e3e);
  box-shadow: 0 2px 10px rgba(9, 46, 62, .14);
  cursor: pointer;
  transition: opacity .2s, background-color .2s, border-color .2s;
}
.carousel-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .carousel-arrow:hover { background: #fff; border-color: var(--aelo-blue, #092e3e); } }
.carousel-arrow:focus-visible { outline: 2px solid #995238; outline-offset: 3px; }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.carousel-arrow[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .carousel-arrow { transition: none; } }
@media (max-width: 760px) {
  .carousel-arrow { width: 34px; height: 34px; margin-top: -17px; }
  .carousel-arrow svg { width: 16px; height: 16px; }
}

/* Lifestyle photos: arrows over the left and right photo edges, centred on the photos (not the captions). */
.lifestyle .scene-stage { position: relative; container-type: inline-size; }
.lifestyle .scene-stage .carousel-arrow { display: none; top: calc((100cqw - 46px) / 2.35 * .6248); }
.lifestyle .scene-stage:has(> .scene-grid.is-enhanced) .carousel-arrow { display: grid; }
.lifestyle .scene-stage .carousel-arrow-prev { left: 12px; }
.lifestyle .scene-stage .carousel-arrow-next { right: 12px; }
@media (max-width: 760px) {
  .lifestyle .scene-stage .carousel-arrow { top: calc(100cqw * .86 * .6248); }
  .lifestyle .scene-stage .carousel-arrow-prev { left: 8px; }
  .lifestyle .scene-stage .carousel-arrow-next { right: 8px; }
}