/** Shopify CDN: Minification failed

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

**/
{% comment %}
  Logo Carousel Styles
  Modern, smooth logo carousel with hover effects
{% endcomment %}

/* Logo Carousel Variables */
:root {
  --logo-carousel-height: 180px; /* Increased from 120px */
  --logo-carousel-gap: 5rem; /* Increased from 4rem */
  --logo-carousel-opacity: 0.6;
  --logo-carousel-opacity-hover: 1;
  --logo-carousel-scale: 1;
  --logo-carousel-scale-hover: 1.05;
}

/* Logo Carousel Section */
.logo-carousel-section {
  background: rgb(var(--color-background));
  position: relative;
  overflow: hidden;
}

.logo-carousel-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--color-foreground)), transparent);
  opacity: 0.1;
}

.logo-carousel-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--color-foreground)), transparent);
  opacity: 0.1;
}

/* Header */
.logo-carousel-header {
  text-align: center;
  margin-bottom: 3rem;
}

.logo-carousel-title {
  color: rgb(var(--color-foreground));
  margin-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.logo-carousel-subtitle {
  color: rgba(var(--color-foreground), 0.7);
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}

/* Container */
.logo-carousel-container {
  position: relative;
  height: var(--logo-carousel-height);
  overflow: hidden;
  mask: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

/* Track */
.logo-carousel-track {
  display: flex;
  height: 100%;
  animation: logo-carousel-scroll 20s linear infinite;
  animation-play-state: running;
}

.logo-carousel-track:hover {
  animation-play-state: paused;
}

/* Container */
.logo-carousel-container {
  position: relative;
}

/* Center Light Effect - REMOVED */

/* Slide */
.logo-carousel-slide {
  display: flex;
  align-items: center;
  gap: var(--logo-carousel-gap);
  flex-shrink: 0;
  height: 100%;
  padding-right: var(--logo-carousel-gap);
}

/* Item */
.logo-carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: var(--logo-carousel-opacity);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(var(--logo-carousel-scale));
  position: relative;
  z-index: 3;
}

.logo-carousel-item:hover {
  opacity: var(--logo-carousel-opacity-hover);
  transform: scale(var(--logo-carousel-scale-hover));
}

/* Center Highlight Effects */
.logo-carousel-item.logo-center-highlight {
  opacity: 0.8;
  transform: scale(1.02);
}

.logo-carousel-item.logo-center-focus {
  opacity: 1;
  transform: scale(1.05);
}

.logo-carousel-item.logo-center-focus .logo-carousel-img {
  filter: grayscale(0%) brightness(1.2) contrast(1.1);
}

.logo-carousel-item.logo-center-focus .logo-carousel-name {
  color: rgb(var(--color-foreground));
  font-weight: 800;
}

/* Image */
.logo-carousel-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.logo-carousel-img {
  max-height: 120px; /* Increased from 80px */
  max-width: 300px; /* Increased from 200px */
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-carousel-item:hover .logo-carousel-img {
  filter: grayscale(0%) brightness(1);
}

/* Text Logo */
.logo-carousel-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.logo-carousel-name {
  font-size: 2rem; /* Increased from 1.5rem */
  font-weight: 700;
  color: rgb(var(--color-foreground));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 0.25rem;
}

.logo-carousel-item:hover .logo-carousel-name {
  color: rgb(var(--color-button));
}

/* Placeholder Styling */
.logo-carousel-placeholder {
  border: 2px dashed rgba(var(--color-foreground), 0.3);
  border-radius: 8px;
  padding: 1.5rem; /* Increased from 1rem */
  background: rgba(var(--color-foreground), 0.02);
  position: relative;
  min-width: 300px; /* Increased from 200px */
  min-height: 120px; /* Increased from 80px */
}

.logo-carousel-placeholder-text {
  font-size: 0.75rem;
  color: rgba(var(--color-foreground), 0.5);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 0.25rem;
}

.logo-carousel-placeholder:hover {
  border-color: rgb(var(--color-button));
  background: rgba(var(--color-button), 0.05);
}

.logo-carousel-placeholder:hover .logo-carousel-placeholder-text {
  color: rgb(var(--color-button));
}

/* Editor Mode Styling */
.logo-carousel-placeholder::before {
  content: '📷';
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1rem;
  opacity: 0.3;
}

.logo-carousel-placeholder:hover::before {
  opacity: 0.6;
}

/* Link */
.logo-carousel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-carousel-link:hover {
  transform: translateY(-2px);
}

/* Animation */
@keyframes logo-carousel-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive Design */
@media screen and (max-width: 749px) {
  :root {
    --logo-carousel-height: 150px; /* Increased from 120px to make it much larger on mobile */
    --logo-carousel-gap: 4rem; /* Increased from 3rem for more spacing */
  }
  
  .logo-carousel-header {
    margin-bottom: 2.5rem; /* Increased from 2rem */
  }
  
  .logo-carousel-title {
    font-size: 1.8rem; /* Increased from 1.5rem */
  }
  
  .logo-carousel-subtitle {
    font-size: 1rem; /* Increased from 0.9rem */
  }
  
  .logo-carousel-img {
    max-height: 120px; /* Increased from 90px - same as desktop */
    max-width: 250px; /* Increased from 200px */
  }
  
  .logo-carousel-name {
    font-size: 1.8rem; /* Increased from 1.5rem - closer to desktop size */
  }
  
  .logo-carousel-container {
    mask: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
    -webkit-mask: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
  }
}

@media screen and (max-width: 479px) {
  :root {
    --logo-carousel-height: 120px; /* Increased from 80px - much larger on small mobile */
    --logo-carousel-gap: 3rem; /* Increased from 2rem for more spacing */
  }
  
  .logo-carousel-img {
    max-height: 100px; /* Increased from 60px - much larger */
    max-width: 200px; /* Increased from 150px */
  }
  
  .logo-carousel-name {
    font-size: 1.5rem; /* Increased from 1.2rem - much larger text */
  }
  
  .logo-carousel-title {
    font-size: 1.6rem; /* Added larger title for small mobile */
  }
  
  .logo-carousel-subtitle {
    font-size: 0.95rem; /* Increased from default */
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .logo-carousel-track {
    animation: none;
  }
  
  .logo-carousel-item:hover {
    transform: none;
  }
  
  .logo-carousel-link:hover {
    transform: none;
  }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
  .logo-carousel-img {
    filter: none;
  }
  
  .logo-carousel-item {
    opacity: 1;
  }
  
  .logo-carousel-item:hover {
    opacity: 1;
  }
}

/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
  .logo-carousel-img {
    filter: grayscale(100%) brightness(1.2);
  }
  
  .logo-carousel-item:hover .logo-carousel-img {
    filter: grayscale(0%) brightness(1);
  }
}