/** Shopify CDN: Minification failed

Line 85:1 Unexpected ";"

**/
/* ================================================================
   Bee Natural — Animation Layer v3
   Source of truth: lavble.config 0.0 / src/
   Strategy: work WITH Horizon internals, not against them.
   ================================================================

   Index:
     0.  Design tokens
     1.  Header — transparent → scrolled
     2.  Grain overlay
     3.  Hero entrance animations
     4.  Scroll reveal — per element
     5.  Gold hover system
     6.  Product card hover
     7.  Collection card hover
     8.  Glow pulse utility
     9.  Custom scrollbar
    10.  Text selection
    11.  Prefers-reduced-motion kill-switch
   ================================================================ */


/* ----------------------------------------------------------------
   0. DESIGN TOKENS
   Prototype: hsl(38, 80%, 55%) = #E6A93D (honey/gold)
   ---------------------------------------------------------------- */
:root {
  --bn-gold:       hsl(38, 80%, 55%);   /* #E6A93D — base gold    */
  --bn-gold-light: hsl(38, 85%, 60%);   /* #F2B84B — hover gold   */
  --bn-gold-glow:  hsla(38, 80%, 55%, 0.2);
  --bn-reveal-duration: 1.2s;
  --bn-reveal-ease:     ease-out;
  --bn-hover-duration:  0.3s;
  --bn-hover-ease:      ease-out;
}


/* ----------------------------------------------------------------
   1. HEADER — Transparent → Scrolled
   ----------------------------------------------------------------
   Prototype: Navigation.tsx
     scrollY > 80  → bg-background/90 backdrop-blur-md py-4
     scrollY ≤ 80  → bg-transparent py-8
     transition-all duration-700 cubic-bezier(0.4, 0, 0.2, 1)

   Shopify approach:
     JS adds .bn-scrolled to header-component[transparent] when
     scrollY > 80. CSS drives all visual changes from that class.
   ---------------------------------------------------------------- */

/* A. Kill the theme's underlay height-wipe — we own the bg */
header-component[transparent] .header__underlay-closed {
  height: 0 !important;
  transition: none !important;
}

/* B. Transparent base state */
/*    rgba(rgb-values, 0) avoids the black-flash that `transparent`
      keyword causes (transparent = rgba(0,0,0,0)) */
header-component[transparent] {
  background-color: rgba(var(--color-background-rgb), 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition:
    background-color 700ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter  700ms cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 700ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* C. Scrolled state — semi-opaque bg + blur */
header-componentheader-component[transparent].bn-scrolled {
  background-color: #191512 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
header-component[transparent].bn-scrolled .header__underlay-closed,
header-component[transparent].bn-scrolled .header__underlay-open {
  height: 100% !important;
  background: #191512 !important;
};
}

/* D. Header row — smooth padding shrink (prototype: py-8 → py-4) */
header-component[transparent] .header__row--top {
  transition:
    padding 700ms cubic-bezier(0.4, 0, 0.2, 1),
    color   700ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 700ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

header-component[transparent]:not(.bn-scrolled) .header__row--top {
  padding-block: 0.5rem !important;
}

header-component[transparent].bn-scrolled .header__row--top {
  padding-block: 0.25rem !important;
}

/* E. Smooth color/opacity on all header children */
header-component[transparent] .header__row--top *,
header-component[transparent] .header__row--top a,
header-component[transparent] .header__row--top button,
header-component[transparent] .header__row--top svg {
  transition:
    color   700ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
    fill    700ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke  700ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* F. Strip any background from the outer section wrapper */
.header-section {
  background-color: transparent;
}


/* ----------------------------------------------------------------
   2. GRAIN OVERLAY
   Prototype: .grain-overlay::after { opacity: 0.04; ... }
   Usage in liquid: class="bn-grain"
   ---------------------------------------------------------------- */
.bn-grain {
  position: relative;
}

.bn-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}


/* ----------------------------------------------------------------
   3. HERO ENTRANCE ANIMATIONS
   Prototype: HeroSection.tsx + index.css
     animate-breathe     → bn-breathe     (8s scale 1 → 1.05)
     animate-slow-fade-in → applied to hero__content-wrapper
     animate-slow-fade-in-delayed → subtitle / scroll indicator
   ---------------------------------------------------------------- */

@keyframes bn-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

@keyframes bn-fade-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bn-fade-in-delayed {
  0%,  40% { opacity: 0; transform: translateY(20px); }
  100%     { opacity: 1; transform: translateY(0); }
}

/* Background breathe — auto-applied to hero media */
.hero .hero__media img,
.hero .hero__media video {
  animation: bn-breathe 8s ease-in-out infinite;
  will-change: transform;
}

/* Hero content — fade-in on load */
.hero .hero__content-wrapper {
  opacity: 0;
  animation: bn-fade-in 1.4s ease-out 0.3s forwards;
}

/* Utility classes */
.bn-breathe {
  animation: bn-breathe 8s ease-in-out infinite;
}

.bn-fade-in {
  opacity: 0;
  animation: bn-fade-in 1.5s ease-out forwards;
}

.bn-fade-in-delayed {
  opacity: 0;
  animation: bn-fade-in-delayed 2.5s ease-out forwards;
}


/* ----------------------------------------------------------------
   4. SCROLL REVEAL — Per Element
   ----------------------------------------------------------------
   Prototype: .reveal / .reveal.visible in index.css
     opacity: 0; transform: translateY(40px);
     transition: opacity 1.2s ease-out, transform 1.2s ease-out;

   JS (initScrollReveal) auto-injects .bn-reveal + transitionDelay
   on individual text elements (h2, h3, p, labels, rte blocks).
   Fires .bn-visible when element enters viewport trigger zone.
   ---------------------------------------------------------------- */

/* Primary per-element reveal — matches prototype .reveal exactly */
.bn-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   var(--bn-reveal-duration) var(--bn-reveal-ease),
    transform var(--bn-reveal-duration) var(--bn-reveal-ease);
  will-change: opacity, transform;
}

.bn-reveal.bn-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback section-level reveal — used only where
   per-element injection is not possible */
.bn-section-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   1s var(--bn-reveal-ease),
    transform 1s var(--bn-reveal-ease);
  will-change: opacity, transform;
}

.bn-section-reveal.bn-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------------------------------
   5. GOLD HOVER SYSTEM
   ----------------------------------------------------------------
   Prototype: .nav-link:hover { color: hsl(var(--honey)); }
   Gold: hsl(38, 80%, 55%) = #E6A93D
   Hover: hsl(38, 85%, 60%) = #F2B84B

   Applied to:
     A. Navigation menu links
     B. Footer links
     C. Inline brand name span (injected by JS)
     D. "In Collaboration" / "Featured In" items (utility class)
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   GOLD HOVER — Heading-block links (Featured In, In Collaboration)
   Targets any <a> inside a heading block that is NOT inside a card,
   nav, or hero. Covers: Winnipeg Free Press, St. Norbert Farmers'
   Market, CTV Morning Live, University of Manitoba, Andrew Sikorsky,
   1967 Digital Agency, Alina Grechko, Kolo Shop, House of Lokal,
   Phil Veldhuis.
   ---------------------------------------------------------------- */
.heading-block a,
.heading-block a:visited,
h1 a, h2 a, h3 a, h4 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease-out;
}
.heading-block a:hover,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
  color: var(--bn-gold); /* #E6A93D — same as button/brand accent */
}

/* Exclude hero, cards, nav from the rule above (they have their own hover) */
.hero h1 a:hover, .hero h2 a:hover,
.collection-card h2 a:hover, .collection-card h3 a:hover,
.bn-product-card h3 a:hover,
header-component h1 a:hover, header-component h2 a:hover {
  color: inherit;
}

/* A. Navigation links
      Prototype: .nav-link { transition: color 0.5s ease; }
                 .nav-link:hover { color: hsl(var(--honey)); } */
.header__menu-item a,
.header__menu-item button,
.menu-list__link-title,
.header-actions__action a {
  transition: color var(--bn-hover-duration) var(--bn-hover-ease) !important;
}

.header__menu-item a:hover,
.header__menu-item button:hover,
.menu-list__link-title:hover,
.header-actions__action a:hover {
  color: var(--bn-gold) !important;
}

/* B. Footer navigation links — ALL current & future menu buttons
      Prototype: hover:text-cream (prototype uses cream)
      We use gold (--bn-gold) for Shopify brand consistency.

      Future-proof selectors:
        • footer a / button / [role="link"]   — any link semantic
        • .menu-list__link-title              — Horizon menu class
        • .shopify-section-group-footer-group — wraps every footer
          section added via theme editor, so new menu blocks are
          covered automatically
        • :focus-visible                      — keyboard parity */
footer a,
footer button,
footer [role="link"],
footer .menu-list__link-title,
footer .link,
.footer__content a,
.footer__content button,
.footer__links a,
.shopify-section-group-footer-group a,
.shopify-section-group-footer-group button,
.shopify-section-group-footer-group .menu-list__link-title {
  transition: color var(--bn-hover-duration) var(--bn-hover-ease);
}

footer a:hover,
footer a:focus-visible,
footer button:hover,
footer button:focus-visible,
footer [role="link"]:hover,
footer .menu-list__link-title:hover,
footer .link:hover,
.footer__content a:hover,
.footer__content button:hover,
.footer__links a:hover,
.shopify-section-group-footer-group a:hover,
.shopify-section-group-footer-group a:focus-visible,
.shopify-section-group-footer-group button:hover,
.shopify-section-group-footer-group .menu-list__link-title:hover {
  color: var(--bn-gold) !important;  /* #E6A93D */
}

/* Icons inside footer links inherit gold via currentColor */
footer a:hover svg,
footer button:hover svg,
.shopify-section-group-footer-group a:hover svg {
  color: var(--bn-gold);
  fill: currentColor;
}

/* C. Brand name partial hover (injected by JS into copyright line)
      "© 2026 Bee Natural by Viktoria" — only the brand name glows */
.bn-hover-gold {
  transition: color var(--bn-hover-duration) var(--bn-hover-ease);
  cursor: default;
}

.bn-hover-gold:hover {
  color: var(--bn-gold);
}

/* D. Utility — add class="bn-collab-link" to any element
      for gold hover (collaboration names, featured-in items) */
.bn-collab-link,
.bn-collab-link a,
.bn-featured-link,
.bn-featured-link a {
  transition: color var(--bn-hover-duration) var(--bn-hover-ease);
}

.bn-collab-link:hover,
.bn-collab-link a:hover,
.bn-featured-link:hover,
.bn-featured-link a:hover {
  color: var(--bn-gold);
}


/* ----------------------------------------------------------------
   6. PRODUCT CARD HOVER
   Prototype: CollectionSection.tsx
     .product-card → box-shadow 0.6s ease, transform 0.6s ease
     :hover        → translateY(-4px) + gold glow shadow
     img           → transition-transform duration-1000 scale-105
   ---------------------------------------------------------------- */
.bn-product-card {
  transition: box-shadow 0.6s ease, transform 0.6s ease;
}

.bn-product-card:hover {
  box-shadow: 0 0 50px -10px var(--bn-gold-glow);
  transform: translateY(-4px);
}

/* Image zoom */
.bn-product-card .media img,
.bn-product-card .card__media img,
.bn-product-card .product-card__image img {
  transition: transform 1s ease;
}

.bn-product-card:hover .media img,
.bn-product-card:hover .card__media img,
.bn-product-card:hover .product-card__image img {
  transform: scale(1.05);
}

/* Card title + description — gold on hover
   Transition defined on base state so it applies both IN and OUT */
.bn-product-card h2,
.bn-product-card h3,
.bn-product-card h4,
.bn-product-card .card__heading,
.bn-product-card [class*="title"],
.bn-product-card [class*="heading"],
.bn-product-card .card__information p,
.bn-product-card [class*="description"] {
  transition: color var(--bn-hover-duration) var(--bn-hover-ease);
}

.bn-product-card:hover h2,
.bn-product-card:hover h3,
.bn-product-card:hover h4,
.bn-product-card:hover .card__heading,
.bn-product-card:hover [class*="title"],
.bn-product-card:hover [class*="heading"] {
  color: var(--bn-gold);
}

.bn-product-card:hover .card__information p,
.bn-product-card:hover [class*="description"] {
  color: var(--bn-gold-light);
}


/* ----------------------------------------------------------------
   7. COLLECTION CARD HOVER
   ----------------------------------------------------------------
   JS injects .bn-collection-card on .collection-card elements.
   Horizon renders collection-card blocks with .collection-card.

   VISIBILITY RULE: Inner text must NEVER be hidden by bn-reveal.
   Collection cards animate as a unit (lift + glow). Title and
   description are always visible; only their COLOR transitions.
   ---------------------------------------------------------------- */

/* Safety: if tree-walker ever touches inner elements despite the
   skip guard in JS, force them visible */
.collection-card .bn-reveal,
.collection-card .bn-section-reveal,
.bn-collection-card .bn-reveal,
.bn-collection-card .bn-section-reveal {
  opacity: 1 !important;
  transform: none !important;
  /* Keep color transition so hover gold still works */
  transition: color var(--bn-hover-duration) var(--bn-hover-ease) !important;
}

/* Card lift + glow */
.bn-collection-card,
.bn-collection-card .card-wrapper,
.bn-collection-card .card,
.bn-collection-card .card__media,
.bn-collection-card .media {
  border-radius: var(--style-border-radius-card, 16px);
}

.bn-collection-card {
  transition: box-shadow 0.5s ease, transform 0.5s ease;
  border-radius: var(--style-border-radius-card, 16px);
}

.bn-collection-card:hover {
  box-shadow: 0 0 40px -8px hsla(38, 80%, 55%, 0.25);
  transform: translateY(-3px);
  border-radius: var(--style-border-radius-card, 16px);
}

/* Image zoom */
.bn-collection-card .media img,
.bn-collection-card .card__media img,
.bn-collection-card img {
  transition: transform 1s ease;
}

.bn-collection-card:hover .media img,
.bn-collection-card:hover .card__media img,
.bn-collection-card:hover img {
  transform: scale(1.04);
}

/* ── Inner text ──────────────────────────────────────────────────
   Transition defined on BASE state → smooth both IN and OUT.
   Broad selectors cover Horizon's actual rendered HTML
   (collection-title block renders via div/span, not always h3).
   ─────────────────────────────────────────────────────────────── */
.bn-collection-card h2,
.bn-collection-card h3,
.bn-collection-card h4,
.bn-collection-card p,
.bn-collection-card span,
.bn-collection-card div,
.bn-collection-card [class*="title"],
.bn-collection-card [class*="heading"],
.bn-collection-card [class*="description"],
.bn-collection-card [class*="name"],
.bn-collection-card [class*="label"],
/* Also target direct .collection-card without bn- prefix
   (in case JS hasn't run yet) */
.collection-card h2,
.collection-card h3,
.collection-card h4,
.collection-card p,
.collection-card [class*="title"],
.collection-card [class*="heading"],
.collection-card [class*="description"] {
  transition: color var(--bn-hover-duration) var(--bn-hover-ease);
}

/* Title → gold on hover */
.bn-collection-card:hover h2,
.bn-collection-card:hover h3,
.bn-collection-card:hover h4,
.bn-collection-card:hover [class*="title"],
.bn-collection-card:hover [class*="heading"],
.collection-card:hover h2,
.collection-card:hover h3,
.collection-card:hover h4,
.collection-card:hover [class*="title"],
.collection-card:hover [class*="heading"] {
  color: var(--bn-gold) !important;
}

/* Description → lighter gold on hover */
.bn-collection-card:hover p,
.bn-collection-card:hover [class*="description"],
.collection-card:hover p,
.collection-card:hover [class*="description"] {
  color: var(--bn-gold-light) !important;
}


/* ----------------------------------------------------------------
   8. GLOW PULSE — utility
   Prototype: .animate-glow-pulse in index.css
   Usage: class="bn-glow-pulse"
   ---------------------------------------------------------------- */
@keyframes bn-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 hsla(38, 80%, 55%, 0); }
  50%       { box-shadow: 0 0 40px 10px hsla(38, 80%, 55%, 0.15); }
}

.bn-glow-pulse {
  animation: bn-glow-pulse 4s ease-in-out infinite;
}


/* ----------------------------------------------------------------
   9. CUSTOM SCROLLBAR
   Prototype: index.css — 4px width, charcoal track, border thumb
   ---------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border, hsl(30 15% 20%));
  border-radius: 2px;
}


/* ----------------------------------------------------------------
  10. TEXT SELECTION
   Prototype: selection { background: hsla(38, 80%, 55%, 0.3) }
   ---------------------------------------------------------------- */
::selection {
  background: hsla(38, 80%, 55%, 0.3);
  color: var(--color-foreground);
}


/* ----------------------------------------------------------------
  11. PREFERS REDUCED MOTION — global kill-switch
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bn-reveal,
  .bn-section-reveal,
  .bn-fade-in,
  .bn-fade-in-delayed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .hero .hero__media img,
  .hero .hero__media video,
  .hero .hero__content-wrapper {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .bn-breathe,
  .bn-glow-pulse {
    animation: none !important;
  }

  .bn-product-card,
  .bn-collection-card {
    transition: none !important;
  }
  
  header-component[transparent],
header-component[transparent] .header__row--top,
header-component[transparent] .header__columns {
  min-height: 0 !important;
  --header-height: 30px !important;
  --top-row-height: 30px !important;
}
header-component[transparent].bn-scrolled,
header-component[transparent].bn-scrolled .header__row--top,
header-component[transparent].bn-scrolled .header__columns {
  --header-height: 20px !important;
  --top-row-height: 20px !important;
}
}