/* ── CSS vars (Squarespace runtime vars, needed by inline section CSS) ── */
:root {
  --sqs-site-max-width: 1500px;
  --sqs-site-gutter: 4vw;
  --sqs-mobile-site-gutter: 6vw;
  --sqs-site-gutter-px: 60px;
}

/* ════════════════════════════════════════════════════════════════════════
   BACKGROUND IMAGES
   SQS CSS sets .background-image-fx { visibility: hidden } and renders
   to a canvas via JS. We bypass the canvas and force the img visible.
   ═══════════════════════════════════════════════════════════════════════ */

.page-section {
  position: relative !important;
  overflow: hidden;
}

.section-background,
.section-background .section-background-content,
.section-background .section-background-canvas,
.section-background .section-background-overlay {
  position: absolute !important;
  inset: 0 !important;
}

.section-background {
  overflow: hidden !important;
  z-index: 0 !important;
}

/* Force the real image visible; hide the empty canvas */
.background-image-fx {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

.background-fx-canvas {
  display: none !important;
}

/* Overlay sits on top of the image */
.section-background-overlay {
  z-index: 2 !important;
}

/* Content must be above the bg layers */
.content-wrapper {
  position: relative !important;
  z-index: 3 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENT IMAGES — Fluid Engine image blocks
   SQS JS normally:
     • adds vsize-N / sqs-stretched classes to give blocks their height
     • transitions sqs-image-content opacity from 0 → 1 after "load"
   We bypass all of that here.
   ═══════════════════════════════════════════════════════════════════════ */

/* Propagate height from CSS-Grid cell (.fe-block) down through the block chain */
.fe-block .sqs-block,
.fe-block .sqs-block-content {
  height: 100% !important;
}

/* The fluid-image-component-root and its children need 100% height */
.sqs-block-image .design-layout-fluid,
.sqs-block-image .design-layout-fluid .fluid-image-animation-wrapper,
.sqs-block-image .design-layout-fluid .sqs-image,
.sqs-block-image .design-layout-fluid .fluid-image-container {
  height: 100% !important;
  width: 100% !important;
  min-height: 1px;
}

/* Images inside fluid layout use absolute positioning — restore that */
.sqs-block-image .design-layout-fluid img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

/* Kill entrance animation — images must show without JS running */
.sqs-image-content {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transition: none !important;
}

/* Show all fluid image wrapper layers */
.fluid-image-container,
.fluid-image-animation-wrapper,
.sqs-image,
.sqs-image-content,
.sqs-block-image,
.image-block-outer-wrapper {
  display: block !important;
  visibility: visible !important;
}

/* Fallback for non-fluid images (e.g. masonry gallery) */
.sqs-image img,
.fluid-image-container img,
.js-image-container img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
}

/* The visitor-mode class is set by SQS JS — without it images may be hidden */
.js-image-container {
  display: block !important;
  visibility: visible !important;
  overflow: hidden !important;
}

/* Squarespace sets images to 0 opacity pending JS load. Bypass this. */
.js-content-mode-element-wrapper,
.js-content-mode-element {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   JS-GATED VISIBILITY — bypass all SQS scroll/load show patterns
   SQS JS adds attributes/classes (data-show, .loaded, .rendered) to
   reveal elements. Without JS they stay hidden. Force them all visible.
   ═══════════════════════════════════════════════════════════════════════ */

/* Gallery masonry / grid / strips — all need data-show attribute */
.gallery-masonry-item .gallery-masonry-item-wrapper,
.gallery-grid-item .gallery-grid-item-wrapper,
.gallery-strips-item .gallery-strips-item-wrapper {
  opacity: 1 !important;
  animation: none !important;
}

/* Gallery block grid images — need .loaded class */
.sqs-gallery-block-grid img {
  opacity: 1 !important;
}

/* Newsletter block — needs .rendered class */
.newsletter-block {
  opacity: 1 !important;
}

/* Fluid Engine text/block entrance animations — various .block-animation-* */
[class*="block-animation-"] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transition: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   BURGER / MOBILE MENU
   ═══════════════════════════════════════════════════════════════════════ */

.header--menu-open .header-menu {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.header--menu-open .js-header-burger-open-title { display: none; }
.header--menu-open .js-header-burger-close-title { display: block !important; }

body.header-menu-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════════
   GALLERY — MASONRY (CSS columns, no JS required)
   ═══════════════════════════════════════════════════════════════════════ */

.gallery-masonry-wrapper {
  columns: 3 !important;
  column-gap: 8px !important;
  display: block !important;
}

@media (max-width: 767px) {
  .gallery-masonry-wrapper { columns: 2 !important; }
}

.gallery-masonry-item {
  break-inside: avoid !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* SQS JS adds data-show on scroll; without it wrappers stay opacity:0 */
.gallery-masonry-item .gallery-masonry-item-wrapper {
  opacity: 1 !important;
  animation: none !important;
}

.gallery-masonry-item img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════ */

.gallery-lightbox-outer-wrapper { display: none; }

.gallery-lightbox-outer-wrapper.is-open {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: center !important;
}

.gallery-lightbox-background {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.92) !important;
}

.gallery-lightbox {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gallery-lightbox-wrapper {
  position: relative !important;
  z-index: 2 !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
}

.gallery-lightbox-list { display: block !important; }
.gallery-lightbox-item { display: none !important; }
.gallery-lightbox-item.is-selected { display: block !important; }

.gallery-lightbox-item img {
  max-width: 90vw !important;
  max-height: 88vh !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* SQS CSS gates lightbox content on data-active / data-loaded attrs — bypass */
.gallery-lightbox-item,
.gallery-lightbox-item-img,
.gallery-lightbox-item-src,
.gallery-lightbox-item-wrapper {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.gallery-lightbox-header {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  padding: 16px !important;
}

.gallery-lightbox-close-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: white !important;
  font-size: 24px !important;
  padding: 8px !important;
  line-height: 1 !important;
}

.gallery-lightbox-controls {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 16px !important;
}

.gallery-lightbox-control-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: white !important;
  font-size: 32px !important;
  padding: 8px 16px !important;
  opacity: 0.8 !important;
}

.gallery-lightbox-control-btn:hover { opacity: 1 !important; }

body.lightbox-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════════
   MISC FIXES
   ═══════════════════════════════════════════════════════════════════════ */

/* Fluid engine needs the section to have a known height when full-bleed */
.full-bleed-section.section-height--medium { min-height: 70vh; }
.full-bleed-section.section-height--small  { min-height: 40vh; }
.full-bleed-section.section-height--large  { min-height: 90vh; }

/* Social icons in header */
.header-actions-action--social .icon { display: inline-flex !important; }

/* The floatingCart SQS injects is hidden by default — keep it hidden */
#floatingCart { display: none !important; }