/** Shopify CDN: Minification failed

Line 202:13 Expected identifier but found whitespace
Line 202:15 Unexpected "{"
Line 202:24 Expected ":"
Line 203:10 Expected identifier but found whitespace
Line 203:12 Unexpected "{"
Line 203:21 Expected ":"
Line 203:51 Expected ":"
Line 318:13 Expected identifier but found whitespace
Line 318:15 Unexpected "{"
Line 318:24 Expected ":"
... and 4 more hidden warnings

**/


/* CSS from section stylesheet tags */
.hero-top-carousel-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  background: transparent;
  padding: 0 20px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.hero-top-carousel-image {
  flex: 1 1 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.hero-top-carousel-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.hero-top-carousel-carousel {
  flex: 1 1 60%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 20px 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.hero-top-carousel-item {
  scroll-snap-align: start;
  position: relative;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  width: 220px;
}

.hero-top-carousel-item:hover {
  transform: scale(1.05);
}

.hero-top-carousel-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  max-width: 220px;
}

.hero-top-carousel-title {
  text-align: center;
  font-size: 14px;
  margin-top: 8px;
  color: inherit;
}

/* Placeholder styling */
.placeholder-box {
  width: 220px;
  height: 300px;
  background: #f4f4f4;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #aaa;
  font-style: italic;
  font-size: 14px;
}

/* Responsive for mobile */
@media screen and (max-width: 749px) {
  .hero-top-carousel-wrapper {
    flex-direction: row;
    padding: 0 10px;
  }

  .hero-top-carousel-image {
    flex: 1 1 45%;
    padding: 10px 5px;
  }

  .hero-top-carousel-carousel {
    flex: 1 1 55%;
    gap: 12px;
    padding: 10px 0;
  }

  .hero-top-carousel-item {
    width: 140px;
  }

  .hero-top-carousel-item img {
    max-width: 140px;
    border-radius: 6px;
  }

  .placeholder-box {
    width: 140px;
    height: 200px;
    font-size: 12px;
  }
}
/* --------------------------------------------------
   Badge trigger and layout
   -------------------------------------------------- */
.info-badge-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.info-badge-wrapper.text-left   { justify-content: flex-start; }
.info-badge-wrapper.text-center { justify-content: center;    }
.info-badge-wrapper.text-right  { justify-content: flex-end;   }

.info-badge-button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease;
}
.info-badge-button:hover .info-badge-icon {
  transform: scale(1.1);
}
.info-badge-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* --------------------------------------------------
   Full-page blur (exact same timing as your modal.liquid)
   -------------------------------------------------- */
body.info-badge-open > *:not(.info-badge-popover) {
  /* match your other modal.liquid blur exactly */
  filter: blur(40px);
  transition: filter 0.5s ease, opacity 0.5s ease;
}

/* --------------------------------------------------
   Popover overlay (fixed full-screen)
   -------------------------------------------------- */
.info-badge-popover {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    backdrop-filter 0.5s ease,
    background-color 0.5s ease;
}
.info-badge-popover.visible {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: saturate(180%) blur(40px);
  background-color: rgba(0,0,0,0.35);
}

/* --------------------------------------------------
   Popover panel
   -------------------------------------------------- */
.info-badge-popover-content {
  position: relative;
  background: {{ section.settings.section_bg }};
  padding: {{ section.settings.popover_padding }}px;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.info-badge-popover.visible .info-badge-popover-content {
  transform: translateY(0);
  opacity: 1;
}

/* --------------------------------------------------
   Close button
   -------------------------------------------------- */
.popover-close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #000;
  color: #fff;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
}

/* --------------------------------------------------
   Widgets grid & individual widget
   -------------------------------------------------- */
.popover-widgets {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}
.widget {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  flex: 1 1 200px;
  box-sizing: border-box;
}
.widget--transparent { background: transparent !important; box-shadow: none !important; }
.widget--frameless   { background: none !important;       box-shadow: none !important; }
.widget--autosize    { flex: 0 0 auto; }
/* --------------------------------------------------
   Badge trigger and layout
   -------------------------------------------------- */
.info-badge-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.info-badge-wrapper.text-left   { justify-content: flex-start; }
.info-badge-wrapper.text-center { justify-content: center;    }
.info-badge-wrapper.text-right  { justify-content: flex-end;   }

.info-badge-button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease;
}
.info-badge-button:hover .info-badge-icon { transform: scale(1.1); }

.info-badge-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* --------------------------------------------------
   Popover overlay
   -------------------------------------------------- */
.info-badge-popover {
  position: fixed;
  inset: 0;
  /* win every stacking battle (carousels, transforms, etc.) */
  z-index: 2147483646;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    -webkit-backdrop-filter 0.5s ease,
    backdrop-filter 0.5s ease,
    background-color 0.5s ease;
}
.info-badge-popover.visible {
  opacity: 1;
  pointer-events: auto;
  -webkit-backdrop-filter: saturate(180%) blur(40px);
          backdrop-filter: saturate(180%) blur(40px);
  background-color: rgba(0,0,0,0.35);
}

/* --------------------------------------------------
   Popover panel
   -------------------------------------------------- */
.info-badge-popover-content {
  position: relative;
  background: {{ section.settings.section_bg }};
  padding: {{ section.settings.popover_padding }}px;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;               /* scroll inside if long */
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.info-badge-popover.visible .info-badge-popover-content {
  transform: translateY(0);
  opacity: 1;
}

/* Close button */
.popover-close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #000;
  color: #fff;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Widgets grid */
.popover-widgets {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}

/* Individual widget */
.widget {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  flex: 1 1 200px;
  box-sizing: border-box;
}
.widget--transparent { background: transparent !important; box-shadow: none !important; }
.widget--frameless   { background: none !important;       box-shadow: none !important; }
.widget--autosize    { flex: 0 0 auto; }