/** Shopify CDN: Minification failed

Line 15:21 Expected ")" to end URL token
Line 139:21 Expected ")" to end URL token
Line 151:23 Expected ")" to end URL token

**/
/* =========================================
   COMING SOON STYLES: DARK BACKGROUND + ANIMATIONS
   ========================================= */

/* 1) Full‐screen dark background (fade‐in) */
body {
  /* Use your uploaded background image */
  background: url({{ 'coming‐soon‐bg.png' | asset_url }}) center center / cover no-repeat fixed;
  margin: 0;
  padding: 0;

  /* Start invisible, then fade in */
  opacity: 0;
  animation: fadeInBackground 1.5s ease-in-out forwards;
}

@keyframes fadeInBackground {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2) Center the coming‐soon content and push it on top of the background */
.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;      /* Full viewport height */
  text-align: center;
  color: #fff;            /* White text */
  padding: 0 1rem;
  position: relative;
  z-index: 10;            /* Ensure content sits above background */
}

/* 3) Logo slide‐down animation */
.cs-logo {
  max-width: 300px;
  height: auto;
  opacity: 0;
  transform: translateY(-40px);
  animation: slideDownLogo 1s ease-out 0.5s forwards;
}

@keyframes slideDownLogo {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4) Headline fade‐in */
.cs-headline {
  font-size: 3rem;
  margin-top: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.2s forwards;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* 5) Subtext fade‐in slightly after headline */
.cs-subtext {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.6s forwards;
}

/* 6) Fade‐in keyframes (used by headline/subtext/form) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 7) Klaviyo form fade‐in last (adjust class name if your form uses a different one) */
.klaviyo-form-UkpD4f {
  opacity: 0;
  animation: fadeIn 1s ease-out 2s forwards;
}
/* ===========================
   HIDE DEFAULT HEADER & FOOTER
   =========================== */

/* Hide the entire header section */
#shopify-section-header-group,
header {
  display: none !important;
}

/* Hide the announcement bar (“Welcome to our store”) if it exists */
.announcement-bar,
#shopify-section-announcement-bar {
  display: none !important;
}

/* Hide any default footer sections */
#shopify-section-footer-group,
footer {
  display: none !important;
}

/* Also hide the “skip-to-content” links or any leftover skip links */
.skip-to-content-link {
  display: none !important;
}
/* =========================================
   COMING SOON & GLOBAL OVERRIDES
   ========================================= */

/* 1) HIDE DEFAULT HEADER, ANNOUNCEMENT BAR, AND FOOTER */
#shopify-section-header-group,
header,
.announcement-bar,
#shopify-section-announcement-bar,
#shopify-section-footer-group,
footer,
.skip-to-content-link {
  display: none !important;
}

/* =========================================
   RESPONSIVE BACKGROUND IMAGE + FADE-IN
   ========================================= */

/* Desktop background */
body {
  background: url({{ 'coming-soon-bg-desktop.png' | asset_url }}) center center / cover no-repeat fixed;
  margin: 0;
  padding: 0;

  /* Start invisible, then fade in */
  opacity: 0;
  animation: fadeInBackground 1.5s ease-in-out forwards;
}

/* Mobile background */
@media screen and (max-width: 767px) {
  body {
    background: url({{ 'coming-soon-bg-mobile.png' | asset_url }}) center center / cover no-repeat fixed;
  }
}

@keyframes fadeInBackground {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================================
   COMING SOON SECTION STYLING & ANIMATIONS
   ========================================= */

/* Ensure the coming-soon content sits above the background */
.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;       /* Full viewport height */
  text-align: center;
  color: #fff;             /* White text */
  padding: 0 1rem;
  position: relative;
  z-index: 10;
}

/* Logo slide-down animation */
.cs-logo {
  max-width: 300px;
  height: auto;
  opacity: 0;
  transform: translateY(-40px);
  animation: slideDownLogo 1s ease-out 0.5s forwards;
}

@keyframes slideDownLogo {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Headline fade-in */
.cs-headline {
  font-size: 3rem;
  margin-top: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.2s forwards;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Subtext fade-in slightly after headline */
.cs-subtext {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.6s forwards;
}

/* Klaviyo form fade-in last (adjust class if yours differs) */
.klaviyo-form-UkpD4f {
  opacity: 0;
  animation: fadeIn 1s ease-out 2s forwards;
}

/* Fade-in keyframes (used by headline, subtext, and form) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ================================
   SHOPIFY NATIVE NEWSLETTER STYLES
   ================================ */

/* Style the input box */
.email-form .newsletter-input {
  padding: 0.75rem;
  border: none;
  border-radius: 4px 0 0 4px;
  width: 250px;
  font-size: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 2s forwards; /* fade in after text */
}

/* Style the subscribe button */
.email-form .newsletter-button {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: #fff;
  color: #000;
  border-radius: 0 4px 4px 0;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  animation: fadeIn 1s ease-out 2s forwards; /* match input animation */
}

/* Center the form if needed */
.email-form {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* =========================================
   COMING SOON STYLES: DARK BACKGROUND + ANIMATIONS
   & SHOPIFY NATIVE FORM STYLING
   ========================================= */

/* (Background + hide header/footer rules omitted for brevity – keep those in place!) */

/* Ensure the coming-soon container sits above the background */
.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  color: #fff;
  padding: 0 1rem;
  position: relative;
  z-index: 10;
}

/* Logo slide-down animation */
.cs-logo {
  max-width: 300px;
  height: auto;
  opacity: 0;
  transform: translateY(-40px);
  animation: slideDownLogo 1s ease-out 0.5s forwards;
}
@keyframes slideDownLogo {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Headline fade-in */
.cs-headline {
  font-size: 3rem;
  margin-top: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.2s forwards;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Subtext fade-in */
.cs-subtext {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.6s forwards;
}

/* Fade-in keyframes (used by headline, subtext, and form) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Shopify newsletter form fade-in */
.email-form .newsletter-input,
.email-form .newsletter-button {
  opacity: 0;
  animation: fadeIn 1s ease-out 2s forwards;
}

/* Style the input box */
.email-form .newsletter-input {
  padding: 0.75rem;
  border: none;
  border-radius: 4px 0 0 4px;
  width: 250px;
  font-size: 1rem;
}

/* Style the subscribe button */
.email-form .newsletter-button {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: #fff;
  color: #000;
  border-radius: 0 4px 4px 0;
  font-size: 1rem;
  cursor: pointer;
}

/* (Keep your “hide header/footer” and background‐fade rules above) */
/* =========================================
   COMING SOON STYLES: DARK BACKGROUND + ANIMATIONS
   & SHOPIFY NATIVE FORM STYLING
   ========================================= */

/* (Hide header/footer and background fade-in rules should be above this.) */

/* Ensure the coming-soon container sits above the background */
.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  color: #fff;
  padding: 0 1rem;
  position: relative;
  z-index: 10;
}

/* Logo slide-down animation */
.cs-logo {
  max-width: 300px;
  height: auto;
  opacity: 0;
  transform: translateY(-40px);
  animation: slideDownLogo 1s ease-out 0.5s forwards;
}
@keyframes slideDownLogo {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Headline fade-in */
.cs-headline {
  font-size: 3rem;
  margin-top: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.2s forwards;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Subtext fade-in */
.cs-subtext {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.6s forwards;
}

/* Fade-in keyframes (used by headline, subtext, and form) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Shopify native form fade-in at ~2s */
.email-form .newsletter-input,
.email-form .newsletter-button {
  opacity: 0;
  animation: fadeIn 1s ease-out 2s forwards;
}

/* Style the input box */
.email-form .newsletter-input {
  padding: 0.75rem;
  border: none;
  border-radius: 4px 0 0 4px;
  width: 250px;
  font-size: 1rem;
}

/* Style the subscribe button */
.email-form .newsletter-button {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: #fff;
  color: #000;
  border-radius: 0 4px 4px 0;
  font-size: 1rem;
  cursor: pointer;
}

/* (Keep your hide-header/footer and background rules above.) */
/* =========================================
   COMING SOON STYLES: BACKGROUND + ANIMATIONS
   & SHOPIFY NATIVE FORM STYLING
   ========================================= */

/* (1) Background, hide header, etc. — keep those above) */

/* Ensure the coming-soon container sits above the background */
.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  color: #fff;
  padding: 0 1rem;
  position: relative;
  z-index: 10;
}

/* Logo slide-down */
.cs-logo {
  max-width: 300px;
  height: auto;
  opacity: 0;
  transform: translateY(-40px);
  animation: slideDownLogo 1s ease-out 0.5s forwards;
}
@keyframes slideDownLogo {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Headline fade-in */
.cs-headline {
  font-size: 3rem;
  margin-top: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.2s forwards;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Subtext fade-in */
.cs-subtext {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.6s forwards;
}

/* Fade-in keyframes (used by headline, subtext, and form) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Shopify form fade-in at ~2s */
.email-form .newsletter-input,
.email-form .newsletter-button {
  opacity: 0;
  animation: fadeIn 1s ease-out 2s forwards;
}

/* Style the input box */
.email-form .newsletter-input {
  padding: 0.75rem;
  border: none;
  border-radius: 4px 0 0 4px;
  width: 250px;
  font-size: 1rem;
}

/* Style the subscribe button */
.email-form .newsletter-button {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: #fff;
  color: #000;
  border-radius: 0 4px 4px 0;
  font-size: 1rem;
  cursor: pointer;
}

/* (Keep your “hide header/footer” and “background fade-in” rules above) */