/** Shopify CDN: Minification failed

Line 13:14 Expected identifier but found whitespace
Line 13:16 Unexpected "{"
Line 13:26 Expected ":"
Line 13:51 Expected identifier but found whitespace
Line 13:53 Unexpected "{"
Line 13:63 Expected ":"
Line 207:0 Expected percentage but found "."
Line 258:0 Expected "}" to go with "{"

**/
:root{--brand: {{ settings.brand_color }};--accent: {{ settings.brand_accent }}}
body{font-family:-apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0}
a{color:var(--brand)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:10px;background:var(--brand);color:#fff;border:1px solid var(--brand);font-weight:600}
.btn--outline{background:#fff;color:var(--brand)}
.hero{padding:56px 0;background:linear-gradient(180deg, var(--brand), var(--accent));color:#fff}
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:1px solid #eee;border-radius:12px;overflow:hidden}
.card img{width:100%;height:220px;object-fit:cover}
.card__body{padding:14px}
.footer{padding:40px 0;border-top:1px solid #eee;color:#555}/* Breeder Directory Grid */
.emp-breeders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

/* Each Breeder Card */
.emp-breeder-card {
  background: #fff;
  border: 2px solid #ffb6dc;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(255, 182, 220, 0.2);
  transition: all 0.3s ease;
}

/* Hover effect */
.emp-breeder-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(255, 182, 220, 0.4);
}

/* Breeder Image */
.emp-breeder-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* Breeder Name */
.emp-breeder-card h3 {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  margin-bottom: 6px;
}

/* Text Details */
.emp-breeder-card p {
  font-size: 14px;
  color: #666;
  margin: 3px 0;
}

/* View Listings Button */
.emp-breeder-card a {
  display: inline-block;
  margin-top: 10px;
  background-color: #ff4fb3;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.emp-breeder-card a:hover {
  background-color: #ff80c9;
}/* ------------------------------------
   HEADER GRADIENT BANNER
------------------------------------ */
.emp-header-gradient {
  background: linear-gradient(90deg, #ffb6dc, #ff4fb3);
  color: white;
  padding: 40px 20px;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 30px;
  font-family: 'Poppins', sans-serif;
}

.emp-header-gradient h1 {
  font-size: 32px;
  margin: 0;
  font-weight: 600;
}

.emp-header-gradient p {
  font-size: 16px;
  margin-top: 10px;
  opacity: 0.95;
}/* Animated pink gradient for EMP header */
@keyframes empGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.emp-header-gradient {
  /* same look, now animated */
  background: linear-gradient(90deg,#ffb6dc,#ff4fb3,#ff91d0);
  background-size: 300% 300%;
  color:#fff;
  padding:40px 20px;
  text-align:center;
  border-radius:10px;
  margin-bottom:30px;
  animation: empGradientShift 14s ease-in-out infinite;
}

/* Better readability */
.emp-header-gradient h1{font-size:32px;margin:0;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.12);}
.emp-header-gradient p{font-size:16px;margin-top:10px;opacity:.95;text-shadow:0 1px 2px rgba(0,0,0,.08);}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .emp-header-gradient{animation:none;}
}/* === EMP Shimmer Headline === */
.emp-shimmer {
  position: relative;
  display: inline-block;
  background-image:
    linear-gradient(
      90deg,
      currentColor 0%,
      currentColor 40%,
      rgba(255,255,255,0.75) 50%,
      currentColor 60%,
      currentColor 100%
    );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;                 /* reveal gradient through text */
  animation: empShimmer 2.4s linear infinite;
  text-shadow: 0 0 10px rgba(255, 105, 180, 0.35); /* soft glow */
}

/* Optional color themes */
.emp-shimmer.-neon { text-shadow: 0 0 14px rgba(255, 20, 147, 0.55); }
.emp-shimmer.-pastel { text-shadow: 0 0 10px rgba(255, 182, 193, 0.45); }
.emp-shimmer.-diamond { text-shadow: 0 0 12px rgba(255,255,255,0.55); }

/* Animation */
@keyframes empShimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .emp-shimmer { animation: none; background-position: 0 0; }
}.soft-pastel-hero h1,
.soft-pastel-hero .heading,
.soft-pastel-hero .hero-heading {
  animation: sparkleGlow 3s ease-in-out infinite;
  text-shadow: 0 0 4px #ffffff, 0 0 10px #ffb7ff, 0 0 14px #ff99ff;
}

@keyframes sparkleGlow {
  0% {
    text-shadow: 0 0 4px #ffffff, 0 0 12px #ffcfff, 0 0 20px #ffaaff;
  }
  50% {
    text-shadow: 0 0 6px #ffffff, 0 0 16px #ffb7f5, 0 0 24px #ff80ff;
  }
  100% {
    text-shadow: 0 0 4px #ffffff, 0 0 12px #ffcfff, 0 0 20px #ffaaff;
  }
}.soft-pastel-hero h1,
.soft-pastel-hero .heading,
.soft-pastel-hero .hero-heading {
  animation: sparkleGlow 3s ease-in-out infinite;
  text-shadow: 0 0 4px #ffffff, 0 0 10px #ffb7ff, 0 0 14px #ff99ff;
}

@keyframes sparkleGlow {
  0% {
    text-shadow: 0 0 4px #ffffff, 0 0 12px #ffcfff, 0 0 20px #ffaaff;
  }
  50% {
    text-shadow: 0 0 6px #ffffff, 0 0 16px #ffb7f5, 0 0 24px #ff80ff;
  }
  100% {
    text-shadow: 0 0 4px #ffffff, 0 0 12px #ffcfff, 0 0 20px #ffaaff;
  }
  /* Glitter Sweep Animation */
.glitter-text {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.glitter {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* Center the glitter heading */
.glitter-wrapper {
  text-align: center;
}

/* Glitter Sweep Animation */
.glitter {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.glitter::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 100%
  );
  animation: glitter 2.5s infinite;
}

@keyframes glitter {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}