/** Shopify CDN: Minification failed

Line 118:52 Expected ")" to end URL token

**/
/* ========== Vigor & Veda – consolidated theme polish (safe merge) ========== */

/* =========================================
   VIGOR & VEDA – MOBILE HERO OVERLAY FIX
   Safe, minimal, non-destructive
   ========================================= */

@media (max-width: 768px) {

  /* Fix hero text overlay stacking */
  .hero__content,
  .hero-animated__content,
  .image-banner__content,
  .banner__content,
  .slideshow__text,
  .slideshow__text-wrapper {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    padding: 16px !important;
    margin: 0 !important;
    z-index: 3 !important;
  }

  /* Remove hero logo overlay ONLY (not header logo) */
  .hero__content .logo,
  .hero-animated__content .logo,
  .image-banner__content .logo {
    display: none !important;
  }

  /* Improve headline readability */
  .hero h1,
  .hero__title,
  .banner__heading,
  .slideshow__title {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
  }

  /* Clean CTA spacing */
  .hero .button,
  .hero__content .button,
  .slideshow__buttons .button {
    margin-top: 12px !important;
  }

}

:root{
  --vv-gold:#E7B300;
    --vv-gold-dark:#C99A00;
      --vv-charcoal:#333333;
        --vv-off:#FAFAF7;
          --vv-soft:#EDEAE3;
          }

          /* Canvas & base type */
          body{ background:var(--vv-off); color:var(--vv-charcoal); }

          /* Headings/body tuning */
          h1,h2,h3,strong { letter-spacing:.2px; }
          h1{ font-weight:700; }

          /* Buttons – keep brand CTA look */
          .button, .button--primary, button[type="submit"], .shopify-payment-button__button {
            background:var(--vv-gold)!important;
              border-color:var(--vv-gold)!important;
                color:#111!important;
                  border-radius:12px!important;
                    padding:12px 18px!important;
                      transition:transform .06s ease, background .2s ease;
                      }
                      .button:hover, .button--primary:hover, .shopify-payment-button__button:hover {
                        background:var(--vv-gold-dark)!important; transform:translateY(-1px);
                        }

                        /* Section breathing room */
                        .section, .shopify-section { padding-top:48px; padding-bottom:48px; }
                        @media (max-width: 768px){ .section, .shopify-section { padding-top:36px; padding-bottom:36px; } }

                        /* Product media carding */
                        .product__media-wrapper { background:#fff; border:1px solid #eee; border-radius:16px; padding:8px; }

                        /* Cards & tiles */
                        .card, .product-grid__item, .collection-product-card {
                          background:#fff; border:1px solid #eee; border-radius:16px;
                            box-shadow:0 4px 14px rgba(0,0,0,.04); overflow:hidden;
                            }

                            /* Announcement & marquee subtler */
                            .announcement-bar { background:var(--vv-soft)!important; color:#222!important; }
                            .marquee, .scrolling-text { background:#fff; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; }

                            /* Newsletter block unified */
                            .newsletter, .footer__newsletter { background:#fff; border:1px solid #eee; border-radius:16px; padding:24px; }

                            /* Footer premium */
                            .site-footer, .footer, .footer__content { background:#1f1f1f!important; color:#e9e9e9!important; }
                            .site-footer a { color:#fff!important; opacity:.9; }
                            .site-footer .button, .footer .button { background:var(--vv-gold)!important; color:#111!important; }

                            /* PDP buy area + sticky fallback (works with our JS or solo) */
                            .product-form { background:#fff; border:1px solid #eee; border-radius:14px; padding:16px; }
                            @media (max-width: 999px){
                              .template-product .product-form { position:sticky; bottom:0; z-index:50; border-radius:14px 14px 0 0; }
                              }

                              /* Optional lion watermark container (only where you add class vv-watermark) */
                              .vv-watermark{ position:relative; isolation:isolate; }
                              .vv-watermark:after{
                                content:""; position:absolute; inset:0; z-index:-1;
                                  background:url({{ 'vv-lion-watermark.png' | asset_url }}) no-repeat right -40px center/420px auto;
                                    opacity:.06; pointer-events:none;
                                    }

                                    /* Benefit icons grid (used by vv-icons) */
                                    .vv-icons{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
                                    @media (max-width:768px){ .vv-icons{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
                                    .vv-icon{ background:#fff; border:1px solid #eee; border-radius:16px; padding:16px; text-align:center; }
                                    .vv-icon svg{ width:36px; height:36px; margin-bottom:8px; }

                                    /* Sticky ATC bar fallback IF our JS injects it (only if theme lacks one) */
                                    .vv-sticky-atc {
                                      position:fixed; left:0; right:0; bottom:0; z-index:60;
                                        background:#fff; border-top:1px solid #eee; padding:12px 16px;
                                          display:flex; gap:8px; align-items:center; justify-content:space-between;
                                          }
                                          .vv-sticky-atc .button { flex:1; }

                                          /* Free‑shipping progress bar (for vv-free-shipping) */
                                          .vv-free-ship { background:#fff; border:1px solid #eee; border-radius:12px; padding:12px 14px; margin:8px 0; font-size:14px; }
                                          .vv-bar{ height:8px; background:#eee; border-radius:999px; overflow:hidden; margin-top:8px; }
                                          .vv-bar > span{ display:block; height:100%; width:0; background:var(--vv-gold); transition:width .3s ease; }

                                          /* SOFTEN any full-bleed brand/gold sections from the theme */
                                          .bg--brand, .section--brand { background:var(--vv-soft)!important; }
/* Vigor & Veda - Announcement bar styling */
.announcement-bar {
  background:#EDEAE3 !important;
    color:#222 !important;
    }
    /* Vigor & Veda - Announcement bar styling */
    .announcement-bar {
      background:#EDEAE3 !important;
        color:#222 !important;
        }

        /* Make sure all links inherit the text color */
        .announcement-bar a {
          color:#222 !important;
            text-decoration:none;
              transition: color 0.3s ease;
              }

              /* Hover effect: saffron-gold */
              .announcement-bar a:hover {
                color:#D4AF37 !important;
                }
                /* Vigor & Veda - Announcement bar polish */
                .announcement-bar {
                  background:#EDEAE3 !important;
                    color:#222 !important;
                      font-size: 15px;              /* Slightly larger text */
                        font-weight: 500;             /* Medium weight for better readability */
                          padding: 10px 0;              /* Adds vertical breathing room */
                            letter-spacing: 0.3px;        /* Subtle spacing for a premium feel */
                              text-align: center;           /* Ensures it centers cleanly */
                              }

                              /* Links inherit default text color */
                              .announcement-bar a {
                                color:#222 !important;
                                  text-decoration:none;
                                    transition: color 0.3s ease;
                                    }

                                    /* Hover effect: saffron-gold */
                                    .announcement-bar a:hover {
                                      color:#D4AF37 !important;
                                      }

                                      /* Mobile adjustments */
                                      @media (max-width: 768px) {
                                        .announcement-bar {
                                            font-size: 14px;           /* Slightly smaller text for mobile */
                                                padding: 12px 5px;         /* A bit taller, easier to tap links */
                                                  }
                                                  }
                                                  /* Remove gradient/fade background from header logo area */
                                                  .header,
                                                  .header::before,
                                                  .header::after {
                                                    background: #FFFFFF !important;  /* solid white */
                                                      background-image: none !important; /* kill gradient */
                                                        box-shadow: none !important; /* remove shadow if present */
                                                        }

                                                        /* Optional: tighten spacing */
                                                        .header {
                                                          padding-top: 10px !important;
                                                            padding-bottom: 10px !important;
                                                            }
                                                            /* Vigor & Veda - force tertiary button brand color */
a.btn.btn--tertiary {
  background-color: #E7B300 !important;
  border: 1px solid #E7B300 !important;
  color: #FFFFFF !important;
}

a.btn.btn--tertiary:hover {
  background-color: #a17417 !important; /* darker saffron hover */
  border-color: #a17417 !important;
  color: #FFFFFF !important;
}

/* =========================================================
   VIGOR & VEDA – FIX MOBILE HERO OVERLAP (hero-animated)
   - Restores nav + keeps hero image
   - Removes the giant logo overlay inside the hero
   - Forces headline + CTA to a clean mobile position
   ========================================================= */

@media (max-width: 768px) {

  /* --- Target the Hydration hero section reliably --- */
  section[id^="shopify-section-hero-animated"],
  div[id^="shopify-section-hero-animated"],
  #shopify-section-hero-animated {
    overflow: hidden !important;
  }

  /* --- 1) REMOVE the hero overlay logo (NOT the header logo) --- */
  section[id^="shopify-section-hero-animated"] svg {
  display: none !important;
}
  section[id^="shopify-section-hero-animated"] .logo,
  section[id^="shopify-section-hero-animated"] .brand-logo,
  section[id^="shopify-section-hero-animated"] .site-logo,
  section[id^="shopify-section-hero-animated"] [class*="logo"],
  section[id^="shopify-section-hero-animated"] img[src*="VW_Logo"],
  section[id^="shopify-section-hero-animated"] img[src*="Vw_Logo"],
  section[id^="shopify-section-hero-animated"] img[src*="vv_logo"],
  section[id^="shopify-section-hero-animated"] img[alt*="VIGOR"],
  section[id^="shopify-section-hero-animated"] img[alt*="Vigor"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* FORCE REMOVE hero logo background layer */
  section[id^="shopify-section-hero-animated"] [style*="background-image"],
  section[id^="shopify-section-hero-animated"] [class*="logo"],
  section[id^="shopify-section-hero-animated"]::before,
  section[id^="shopify-section-hero-animated"]::after {
    background-image: none !important;
    content: none !important;
  }
  /* --- 2) Force hero text/CTA to behave on mobile (no weird centering) --- */
  section[id^="shopify-section-hero-animated"] .hero__content,
  section[id^="shopify-section-hero-animated"] .hero-content,
  section[id^="shopify-section-hero-animated"] .hero-animated__content,
  section[id^="shopify-section-hero-animated"] [class*="__content"],
  section[id^="shopify-section-hero-animated"] [class*="content"],
  section[id^="shopify-section-hero-animated"] [class*="overlay"] {
    position: absolute !important;     /* keep overlay behavior */
    left: 16px !important;
    right: 16px !important;
    top: 18px !important;              /* put it near top */
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 5 !important;
    max-width: 92vw !important;
  }

  /* --- 3) Make headline readable + prevent it from sitting under icons --- */
  section[id^="shopify-section-hero-animated"] h1,
  section[id^="shopify-section-hero-animated"] .hero__title,
  section[id^="shopify-section-hero-animated"] [class*="heading"],
  section[id^="shopify-section-hero-animated"] [class*="title"] {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    margin: 0 0 12px 0 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.25) !important; /* gentle contrast */
  }

  /* --- 4) CTA sizing/spacing --- */
  section[id^="shopify-section-hero-animated"] .button,
  section[id^="shopify-section-hero-animated"] a.button,
  section[id^="shopify-section-hero-animated"] [class*="button"] {
    margin-top: 8px !important;
  }
}
/* =========================================================
   FIX: Header brand area should navigate home.
   The logo image link only occupied part of the cream header block, so clicks
   on the surrounding brand area appeared dead. Keep the logo visible and let
   the home link cover the whole logo item.
   ========================================================= */
.template-index .site-header__logo {
  display: block !important;
}

.header-item--logo {
  position: relative;
}

.header-item--logo .site-header__logo-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

.header-item--logo .site-header__logo-link {
  cursor: pointer;
}
/* Product card benefit tagline (under title) */
.grid-product__benefit {
  margin-top: 12px;
  font-size: 0.85rem;
  line-height: 1.3;
  color: #6b6b6b;
}

/* V&V loading-motion kill switch — customer-facing homepage.
   This lives in custom-vv.css because it loads independently of theme.css edge cache. */
.template-index .image-wrap,
.template-index .skrim__link,
.template-index .placeholder-content,
.template-index .hero,
.template-index .hero *,
.template-index .slideshow-wrapper,
.template-index .slideshow-wrapper *,
.template-index .flickity-slider,
.template-index .flickity-slider *,
.template-index [class*="hero__image"],
.template-index [class*="slideshow__slide"] {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

.template-index .image-wrap,
.template-index .skrim__link,
.template-index .placeholder-content,
.template-index .hero {
  background-image: none !important;
}

.template-index .hero__image,
.template-index .image-element,
.template-index .aos-init,
.template-index [class*="appear-delay"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Stop duplicate/offscreen slideshow backgrounds from playing behind the page. */
.template-index .hero.flickity-enabled .slideshow__slide:not(.is-selected),
.template-index .hero:not(.flickity-enabled) .slideshow__slide:not(:first-child) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.template-index .hero.flickity-enabled .slideshow__slide.is-selected,
.template-index .hero:not(.flickity-enabled) .slideshow__slide:first-child {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.template-index .hero__image-wrapper {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.template-index .hero .slideshow__slide.animate-out,
.template-index .hero.flickity-enabled .slideshow__slide:not(.is-selected),
.template-index .hero:not(.flickity-enabled) .slideshow__slide:not(:first-child) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}