/** Shopify CDN: Minification failed

Line 10:0 Unexpected "{"
Line 10:1 Expected identifier but found "%"

**/


/* CSS from section stylesheet tags */
{% stylesheet %}
.split-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

@media (max-width: 768px) {
  .split-image-grid {
    grid-template-columns: 1fr; /* stack images on mobile */
  }
}

.split-image-item {
  position: relative;
  aspect-ratio: 1 / 1; /* keeps them square */
  overflow: hidden;
}

.split-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.split-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.split-image-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  padding: 1rem;
}

.split-image-wrapper:hover {
  background: #000; /* black bg on hover */
}

.split-image-wrapper img {
  opacity: 0.8; /* make image semi-transparent so bg shows through */
  transition: opacity 0.3s ease-in-out;
}

.split-image-wrapper:hover img {
  opacity: 0.5; /* fade image so background becomes visible */
}

.split-image-overlay p {
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

/* Default: Mobile first → h2 always visible */
.split-image-overlay h2 {
  opacity: 1; /* always visible on mobile */
  transition: opacity 0.3s ease-in-out; /* smooth fade both in & out */
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
  -spec-filter: blur(1px);
  filter: blur(0.5px);
  color: #FFF;
  font-size: 1.45rem;
  text-shadow: -1px -1px 0 #fff, -2px -2px 2px gold, 0 1px 2px #000000;
}


/* ✅ Turn OFF background effect on mobile */
@media (max-width: 768px) {
  .split-image-wrapper {
    background: transparent !important;
  }

  .split-image-wrapper img,
  .split-image-wrapper:hover img {
    opacity: 1 !important; /* keep image normal */
  }
}

/* Desktop only → hidden initially, fade in/out on hover */
@media (min-width: 769px) {
  .split-image-overlay h2 {
    opacity: 0; /* hidden initially on desktop */
  }

  .split-image-wrapper:hover .split-image-overlay h2 {
    opacity: 1; /* fade in on hover */
  }
}

.split-btn {
  display: inline-block;
  background: black;
  color: white;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
}