/* ===== VELORA HERO — LAYER 2 (homepage full-bleed hero) 2026-07-19, reworked 2026-07-21 =====
   Scoped to the homepage hero container 079f55b + its child widgets.
   Reversible: delete everything from this marker to the END HERO marker. */

/* ---------------------------------------------------------------- tokens --
   Scoped to the homepage top container so nothing leaks to other templates. */
.elementor-element-741f550{
  --v-ink:#14170f; --v-ink-2:#1c2016;
  --v-cream:#f6efe0; --v-dim:#c9bfa6;
  --v-gold:#e7a73c; --v-gold-bright:#f2bd57;
  --v-ease:cubic-bezier(.22,.61,.36,1);
  /* the page's base black -> the brand's warm near-black (hero + strip sit on it) */
  background-image:none !important;
  background-color:var(--v-ink) !important;
}

/* ============================================================================
   TRANSPARENT HEADER (homepage only)
   The header bar is position:fixed site-wide and solid spice-dark (velora-
   global.css). On the homepage we want it transparent over the dark hero and
   fading to the dark blurred bar once you scroll — matching velora-home-v2.html.

   Gated behind html.v-js: with JavaScript off the header stays solid (the
   default from velora-global), so the cream nav never floats unreadable over a
   cream section. The .v-scrolled class is toggled by the script in the
   Velora Design System mu-plugin (front page only, scrollY > 40).
   ========================================================================== */

/* Let the hero reach the very top — drop the offset that reserves space for the
   fixed header (Astra sets margin-top on .site-content = header height). */
.home #content.site-content{ margin-top:0 !important; }

/* Transparent at the top of the page */
html.v-js .home .main-header-bar,
html.v-js .home .ast-primary-header-bar,
html.v-js .home .ast-main-header-wrap .main-header-bar,
html.v-js .home #ast-mobile-header,
html.v-js .home .ast-mobile-header-wrap .main-header-bar{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  transition:background-color .45s var(--v-ease), box-shadow .45s var(--v-ease) !important;
}

/* Scrolled: fade in the dark, blurred bar */
html.v-js .home.v-scrolled .main-header-bar,
html.v-js .home.v-scrolled .ast-primary-header-bar,
html.v-js .home.v-scrolled .ast-main-header-wrap .main-header-bar,
html.v-js .home.v-scrolled #ast-mobile-header,
html.v-js .home.v-scrolled .ast-mobile-header-wrap .main-header-bar{
  background:rgba(20,23,15,.82) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--v-ink-3), 0 18px 40px -30px #000 !important;
}

/* While the mobile menu is open, keep the bar solid so the dropdown reads even
   at the very top of the page. */
html.v-js .home .main-header-bar.ast-header-custom-item-active,
html.v-js .home .ast-mobile-header-wrap.toggled .main-header-bar,
html.v-js .home.ast-main-header-nav-open .main-header-bar{
  background:rgba(20,23,15,.94) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
}

@media(prefers-reduced-motion:reduce){
  html.v-js .home .main-header-bar,
  html.v-js .home .ast-primary-header-bar{ transition:none !important; }
}

/* ============================================================================
   HERO  (container 079f55b: eyebrow+h1 ea9d1fe / sub d05321c / CTA 6d2401a /
   microline aadc4fa)
   ========================================================================== */
.elementor-element-079f55b{
  position:relative;
  min-height:clamp(620px,90vh,980px) !important;
  background-position:center 44% !important;
  isolation:isolate;
}

/* Directional scrim: the copy side gets a genuine dark bed, the right side
   stays open so the pouch, cup and spice board keep their light. */
/* Elementor paints its own brown->black overlay on this container's ::before,
   with a specificity/!important that beats a plain declaration — hence the
   !important here. */
.elementor-element-079f55b::before{
  content:"" !important; position:absolute !important; inset:0 !important;
  z-index:0 !important; pointer-events:none; opacity:1 !important;
  background-color:transparent !important;
  background-image:
    linear-gradient(180deg, rgba(20,23,15,.80) 0%, rgba(20,23,15,.30) 14%, rgba(20,23,15,0) 32%),
    linear-gradient(100deg,
      rgba(20,23,15,.94) 0%,  rgba(20,23,15,.88) 22%,
      rgba(20,23,15,.58) 40%, rgba(20,23,15,.18) 56%,
      rgba(20,23,15,0)   72%),
    linear-gradient(0deg, rgba(20,23,15,.92) 0%, rgba(20,23,15,.35) 18%, rgba(20,23,15,0) 42%) !important;
}

.elementor-element-079f55b > .e-con-inner{
  position:relative; z-index:1;
  justify-content:flex-end !important;
  padding-top:clamp(7rem,15vh,10rem) !important;
  padding-bottom:clamp(4.5rem,9vh,7rem) !important;
}

/* ---- Copy column ---------------------------------------------------------
   Elementor pinned these three widgets to ~469px, which forced the headline
   into four one-word lines. Widen them; the scrim above is what keeps the
   longer measure legible over the photograph. */
.elementor-element-ea9d1fe{ width:min(100%,46rem) !important; max-width:none !important; position:relative; }
.elementor-element-d05321c,
.elementor-element-aadc4fa{ width:min(100%,34rem) !important; max-width:none !important; }

/* Eyebrow — gold rule + tracked caps, drawn on the heading widget */
.elementor-element-ea9d1fe::before{
  content:"Premium saffron green tea  ·  Handcrafted in small batches";
  display:block; padding-left:3.4rem;
  background:linear-gradient(var(--v-gold),var(--v-gold)) left .55em/2.25rem 1px no-repeat;
  font-family:"Jost",sans-serif; font-weight:500;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--v-gold-bright); margin-bottom:1.35rem;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* Headline. The markup wraps the line in <b>; Marcellus has a single weight,
   so that was rendering as synthetic bold — reset it. */
.elementor-element-ea9d1fe h1{
  font-size:clamp(2.5rem,5.2vw,4.9rem) !important;
  line-height:1.04 !important; letter-spacing:-.018em !important;
  text-wrap:balance;
  text-shadow:0 2px 44px rgba(0,0,0,.55);
}
.elementor-element-ea9d1fe h1 b{ font-weight:400 !important; }
.elementor-element-ea9d1fe h1 .saffron-red-word{ color:var(--v-gold) !important; }

/* Sub-copy — was Roboto 20px near-white; give it the brand serif and let it breathe */
.elementor-element-d05321c,
.elementor-element-d05321c p{
  font-family:"Spectral",Georgia,serif !important;
  font-size:clamp(1.05rem,.5vw + .95rem,1.25rem) !important;
  line-height:1.66 !important;
  color:var(--v-dim) !important;
  max-width:44ch !important;
}
.elementor-element-d05321c{ margin-top:1.5rem !important; }

/* Primary CTA — the mockup's gold button, at a size that carries a 5rem headline */
.elementor-element-6d2401a{ margin-top:2.1rem !important; }
.elementor-element-6d2401a a.elementor-button{
  background-color:var(--v-gold) !important; color:var(--v-ink) !important;
  border-color:transparent !important;
  font-size:.82rem !important; letter-spacing:.16em !important;
  padding:1.15em 2.1em !important; border-radius:4px !important;
  transition:transform .5s var(--v-ease), background-color .35s var(--v-ease),
             box-shadow .5s var(--v-ease) !important;
}
.elementor-element-6d2401a a.elementor-button .elementor-button-text::after{
  content:" \2192"; display:inline-block; margin-left:.15em;
  transition:transform .5s var(--v-ease);
}
.elementor-element-6d2401a a.elementor-button:hover{
  background-color:var(--v-gold-bright) !important;
  transform:translateY(-3px);
  box-shadow:0 16px 36px -14px rgba(231,167,60,.65);
}
.elementor-element-6d2401a a.elementor-button:hover .elementor-button-text::after{
  transform:translateX(4px);
}
.elementor-element-6d2401a a.elementor-button svg{ fill:var(--v-ink) !important; }

/* Microline: hairline above, Jost voice, plus the 1% promise */
.elementor-element-aadc4fa{ margin-top:1.9rem !important; position:relative; }
.elementor-element-aadc4fa::before{
  content:""; display:block; width:3.5rem; height:1px;
  background:var(--v-gold); opacity:.55; margin-bottom:.85rem;
}
.elementor-element-aadc4fa,
.elementor-element-aadc4fa p{
  font-family:"Jost",sans-serif !important; font-weight:400 !important;
  font-size:.92rem !important; letter-spacing:.05em !important;
  line-height:1.6 !important; color:var(--v-dim) !important;
}
.elementor-element-aadc4fa p::after{ content:"  \00b7  1% of profits donated"; }

/* Scroll cue — a drawn gold thread, decorative only */
.elementor-element-079f55b::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  left:50%; bottom:1.5rem; width:1px; height:46px;
  background:linear-gradient(var(--v-gold),rgba(231,167,60,0));
  transform-origin:top; animation:vHeroCue 2.6s var(--v-ease) infinite;
}
@keyframes vHeroCue{
  0%,100%{ transform:scaleY(.35); opacity:.35; }
  50%    { transform:scaleY(1);   opacity:.95; }
}

@media(max-width:1024px){
  /* The copy no longer clears the pouch, so wash the whole frame instead of
     one side — the photograph stays readable underneath, the type stays legible. */
  .elementor-element-079f55b::before{
    background-image:
      linear-gradient(180deg,
        rgba(20,23,15,.86) 0%,  rgba(20,23,15,.52) 16%,
        rgba(20,23,15,.58) 42%, rgba(20,23,15,.76) 70%,
        rgba(20,23,15,.92) 100%) !important;
  }
  .elementor-element-ea9d1fe{ width:100% !important; }

  /* Elementor reorders these widgets below its tablet breakpoint; restore the
     intended reading order (headline -> promise -> action -> terms). */
  .elementor-element-ea9d1fe{ order:1 !important; }
  .elementor-element-d05321c{ order:2 !important; }
  .elementor-element-6d2401a{ order:3 !important; margin-top:1.9rem !important; }
  .elementor-element-aadc4fa{ order:4 !important; margin-top:1.5rem !important; }
}
@media(max-width:768px){
  .elementor-element-079f55b{
    min-height:clamp(580px,86vh,780px) !important;
    background-position:center 40% !important;
  }
  .elementor-element-ea9d1fe::before{
    font-size:.62rem; letter-spacing:.2em;
    padding-left:2.4rem; background-size:1.5rem 1px;
  }
  .elementor-element-ea9d1fe h1{ font-size:clamp(2.3rem,8.4vw,3.2rem) !important; }
  .elementor-element-079f55b::after{ display:none; }
}
@media(max-width:560px){
  /* The full eyebrow needs two lines at this width; say the shorter thing. */
  .elementor-element-ea9d1fe::before{ content:"Premium saffron green tea"; }
}

@media(prefers-reduced-motion:reduce){
  .elementor-element-079f55b::after{ animation:none; opacity:.6; transform:scaleY(.8); }
  .elementor-element-6d2401a a.elementor-button,
  .elementor-element-6d2401a a.elementor-button .elementor-button-text::after{ transition:none !important; }
  .elementor-element-6d2401a a.elementor-button:hover{ transform:none; }
}

/* ===== END HERO — LAYER 2 ===== */