/*!
 * WIZIO brand layer
 * Initial motion states are scoped to .wz-motion-on — applied by JS only once GSAP
 * is confirmed running, so content stays visible if scripts fail or are blocked.
 */

:root {
  --wz-green: #3A7D2C;
  --wz-deep: #1E5128;
  --wz-fresh: #8BC34A;
  --wz-light: #A8D66F;
  --wz-black: #0E0E0E;
  --wz-off: #F5F7F2;
  --wz-text: #2B2B2B;
  --wz-muted: #6B7280;
  --wz-line: #E3E8DD;
  --wz-radius: 22px;
  --wz-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------
 * Base
 * ------------------------------------------------------------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.wizio { overflow-x: hidden; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------------------------------------------------------------
 * Motion initial states (only when GSAP is live)
 * ------------------------------------------------------------- */
.wz-motion-on .wz-reveal,
.wz-motion-on .wz-reveal-left,
.wz-motion-on .wz-reveal-right,
.wz-motion-on .wz-reveal-scale,
.wz-motion-on .wz-words { opacity: 0; will-change: transform, opacity; }

.wz-motion-on .wz-stagger > * { opacity: 0; }
.wz-motion-on .wz-hero-fade { opacity: 0; }
.wz-motion-on .wz-hero-bottle { opacity: 0; }

/* Word split — mask each line so words rise out of it */
.wz-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.wz-w > span { display: inline-block; will-change: transform; }

/* Editor canvas + no-JS: force everything visible */
body.wizio-no-motion .wz-reveal,
body.wizio-no-motion .wz-reveal-left,
body.wizio-no-motion .wz-reveal-right,
body.wizio-no-motion .wz-reveal-scale,
body.wizio-no-motion .wz-words,
body.wizio-no-motion .wz-stagger > *,
body.wizio-no-motion .wz-hero-fade,
body.wizio-no-motion .wz-hero-bottle { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .wz-reveal, .wz-reveal-left, .wz-reveal-right, .wz-reveal-scale,
  .wz-stagger > *, .wz-hero-fade, .wz-hero-bottle { opacity: 1 !important; transform: none !important; }
  .wz-float { animation: none !important; }
}

/* ---------------------------------------------------------------
 * Marquee ribbon
 * ------------------------------------------------------------- */
.wz-marquee { overflow: hidden; width: 100%; }
.wz-marquee .wz-marquee-track,
.wz-marquee > .e-con-inner { display: flex; flex-wrap: nowrap !important; width: max-content; }

/* ---------------------------------------------------------------
 * Mega menu
 * ------------------------------------------------------------- */
.wz-mega .e-n-menu-title { font-weight: 500 !important; letter-spacing: 0.02em; }
.wz-mega .e-n-menu-dropdown-icon svg { transition: transform 0.35s var(--wz-ease); }
.wz-mega .e-n-menu-title[aria-expanded="true"] .e-n-menu-dropdown-icon svg { transform: rotate(180deg); }

.wz-mega-panel {
  box-shadow: 0 32px 80px -24px rgba(14, 14, 14, 0.28);
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
  overflow: hidden;
}

.wz-mega-card {
  transition: transform 0.45s var(--wz-ease), background-color 0.45s var(--wz-ease);
  border-radius: 16px;
}
.wz-mega-card:hover { transform: translateY(-4px); background-color: rgba(139, 195, 74, 0.10) !important; }

/* Blurb icon pill */
.wz-blurb-icon .elementor-icon {
  transition: transform 0.5s var(--wz-ease), background-color 0.4s var(--wz-ease);
}
.wz-mega-card:hover .wz-blurb-icon .elementor-icon { transform: scale(1.08) rotate(-4deg); }

/* ---------------------------------------------------------------
 * Header
 * ------------------------------------------------------------- */
.wz-header {
  transition: background-color 0.4s var(--wz-ease), box-shadow 0.4s var(--wz-ease), padding 0.4s var(--wz-ease);
}
.wz-header.wz-stuck {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 10px 34px -18px rgba(14, 14, 14, 0.35);
}

/* ---------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------- */
.wizio .elementor-button {
  transition: background-color 0.4s var(--wz-ease), color 0.4s var(--wz-ease),
              box-shadow 0.4s var(--wz-ease), transform 0.4s var(--wz-ease);
}
.wz-btn-primary .elementor-button:hover { box-shadow: 0 18px 38px -14px rgba(58, 125, 44, 0.62); }
.wz-btn-ghost .elementor-button:hover { background-color: var(--wz-deep) !important; color: #fff !important; }

/* ---------------------------------------------------------------
 * Product cards
 * ------------------------------------------------------------- */
.wz-card {
  border-radius: var(--wz-radius);
  overflow: hidden;
  transition: box-shadow 0.5s var(--wz-ease);
}
.wz-card:hover { box-shadow: 0 30px 60px -30px rgba(14, 14, 14, 0.34); }
.wz-card img { transition: transform 0.7s var(--wz-ease); }
.wz-card:hover img { transform: scale(1.05); }

/* Sale badge */
.wz-badge {
  display: inline-block;
  background: var(--wz-fresh);
  color: var(--wz-black);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 100px;
}

/* ---------------------------------------------------------------
 * WooCommerce price presentation
 * ------------------------------------------------------------- */
.wz-price-from { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; margin-right: 4px; }
.wizio .price del { opacity: 0.45; font-weight: 400; margin-right: 8px; }
.wizio .price ins { text-decoration: none; font-weight: 600; }
.wizio .star-rating { color: var(--wz-fresh); }

/* Woo buttons inherit the brand pill */
.wizio .woocommerce a.button,
.wizio .woocommerce button.button,
.wizio .woocommerce .button.alt {
  background: var(--wz-green);
  color: #fff;
  border-radius: 100px;
  padding: 15px 34px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  transition: background-color 0.35s var(--wz-ease), box-shadow 0.35s var(--wz-ease);
}
.wizio .woocommerce a.button:hover,
.wizio .woocommerce button.button:hover,
.wizio .woocommerce .button.alt:hover {
  background: var(--wz-deep);
  box-shadow: 0 16px 34px -14px rgba(30, 81, 40, 0.6);
}

/* ---------------------------------------------------------------
 * Verse block (Arabic)
 * ------------------------------------------------------------- */
.wz-verse-ar {
  font-family: 'Traditional Arabic', 'Scheherazade New', 'Amiri', serif;
  direction: rtl;
  line-height: 2;
}

/* ---------------------------------------------------------------
 * Dark section polish
 * ------------------------------------------------------------- */
.wz-dark { color: #fff; }
.wz-dark h1, .wz-dark h2, .wz-dark h3, .wz-dark h4 { color: #fff; }
.wz-dark p { color: rgba(255, 255, 255, 0.72); }

/* Soft radial glow behind the bottle.
   No filter: blur() — blurring a large layer that sits behind scroll-driven
   transforms forces a full re-rasterise every frame and stalls the compositor. */
.wz-glow { position: relative; }
.wz-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(139, 195, 74, 0.28) 0%, rgba(139, 195, 74, 0.08) 45%, rgba(139, 195, 74, 0) 70%);
  z-index: 0;
  pointer-events: none;
}
.wz-glow > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
 * Grid containers
 * ------------------------------------------------------------- */
/* Elementor's Grid container emits `grid-template-rows: repeat(N, auto)` with
   N defaulting to 2. With three items in three columns that leaves an entire
   empty row of dead space below the cards. Let rows size to content instead;
   extra items still flow into implicit rows normally. */
.e-grid { grid-template-rows: auto !important; }

/* ---------------------------------------------------------------
 * Footer — explicit stacking so columns never squeeze into one row
 * ------------------------------------------------------------- */
.wz-footer-cols,
.wz-footer-cols > .e-con-inner { flex-wrap: wrap !important; align-items: flex-start !important; }

@media (max-width: 1024px) {
  .wz-footer-cols .wz-footer-col { width: 47% !important; }
  .wz-footer-cols .wz-footer-col:first-child { width: 100% !important; }
}
@media (max-width: 767px) {
  .wz-footer-cols .wz-footer-col { width: 100% !important; }
  .wz-footer-certs,
  .wz-footer-certs > .e-con-inner,
  .wz-footer-bottom,
  .wz-footer-bottom > .e-con-inner {
    flex-direction: column !important;
    text-align: center;
    gap: 12px;
  }
  .wz-footer-bottom .elementor-widget { text-align: center; width: 100%; }
  .wz-footer-certs .elementor-widget-heading { text-align: center; }
}

/* ---------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------- */
.wizio .elementor-field-group .elementor-field {
  border-radius: 12px !important;
  transition: border-color 0.35s var(--wz-ease), box-shadow 0.35s var(--wz-ease);
}
.wizio .elementor-field-group .elementor-field:focus {
  border-color: var(--wz-green) !important;
  box-shadow: 0 0 0 4px rgba(58, 125, 44, 0.13) !important;
  outline: none;
}

/* ---------------------------------------------------------------
 * Pinned scroll stage — the bottle is the persistent hero element
 * ------------------------------------------------------------- */
/* Must be block, not flex: a flex parent squashes ScrollTrigger's pin-spacer,
   which stops the stage from ever actually pinning. */
.wz-stage-wrap { position: relative; padding: 0 !important; display: block !important; }

.wz-stage {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  padding: 0 !important;
  display: block !important;
}

/* Soft radial light behind the product.
   No filter: blur() here — a gradient is already soft, and blurring a large
   animated layer every frame is what makes scrolling stutter. */
.wz-stage-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; padding: 0 !important; }
.wz-stage-glow::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 64vh; height: 64vh;
  margin: -32vh 0 0 -32vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,195,74,0.30) 0%, rgba(139,195,74,0.10) 45%, rgba(139,195,74,0) 72%);
}

/* Bottle */
.wz-bottle-layer {
  position: absolute; inset: 0;
  display: flex !important; align-items: center; justify-content: center;
  z-index: 3; pointer-events: none; padding: 0 !important;
}
.wz-bottle {
  margin: 0 !important;
  will-change: transform;
  transform: translateZ(0);
  position: relative;
}
/* Contact shadow as a painted ellipse rather than filter: drop-shadow(),
   which would re-rasterise the PNG on every animated frame. */
.wz-bottle::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -2%;
  width: 78%; height: 7%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 72%);
  z-index: -1;
}
.wz-bottle img {
  height: 62vh; width: auto; max-width: none;
  display: block;
}

/* Text panels stack on top of one another; GSAP cross-fades them */
/* Boxed content column, centred in the viewport (matches the 1240px site grid)
   rather than being pinned to the far edge of the screen. */
.wz-panel {
  position: absolute !important; inset: 0;
  display: flex !important; flex-direction: column; justify-content: center;
  z-index: 4; pointer-events: none;
  padding: 0 max(24px, calc((100% - 1240px) / 2)) !important;
  max-width: none !important;
}
/* !important is required — Elementor sets .elementor-widget { max-width: 100% } */
.wz-panel > * { pointer-events: auto; max-width: 560px !important; width: 100%; }
/* Act 1 — centred editorial block: headline first, bottle beneath it.
   Copy sits in the upper 45%, the bottle fills the lower half. */
.wz-panel-1 {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: 7vh !important;
  padding-bottom: 0 !important;
}
.wz-panel-1 > * { max-width: 860px !important; }
.wz-panel-1 .wz-cta-row { margin-top: 8px; }
/* Wide enough that both CTAs stay on one line — wrapping them costs ~56px of
   vertical space and pushes the bottle off the bottom of the stage. */
.wz-panel .wz-cta-row { max-width: 920px !important; }

/* Act 2 — copy sits to the right of the bottle */
.wz-panel-2 { align-items: flex-end; }
.wz-panel-2 > * { max-width: 430px !important; }

/* Act 3 — copy sits to the left of the bottle */
.wz-panel-3 { align-items: flex-start; }
.wz-panel-3 > * { max-width: 600px !important; }

/* Keep the copy clear of the bottle on wide screens */
@media (min-width: 1600px) {
  .wz-panel > * { max-width: 620px !important; }
}

/* Panels 2 and 3 start hidden only once motion is confirmed live */
.wz-motion-on .wz-panel-2,
.wz-motion-on .wz-panel-3 { opacity: 0; }

.wz-scroll-cue { opacity: 0.75; }

.wz-btn-outline .elementor-button:hover { color: #0E0E0E !important; }

/* ---------------------------------------------------------------
 * Header
 * ------------------------------------------------------------- */
.wz-header .elementor-button,
.wz-header .elementor-button-text { white-space: nowrap; }
.wz-header .e-con { min-height: 0; }

/* Three-part bar that never wraps: logo | menu | actions.
   A boxed Elementor container nests children inside .e-con-inner, so both
   levels are targeted. */
.wz-header-bar,
.wz-header-bar > .e-con-inner {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 24px;
}
.wz-header-bar > .e-con-inner > .elementor-widget-theme-site-logo,
.wz-header-bar > .elementor-widget-theme-site-logo,
.wz-header-bar > .e-con-inner > .wz-header-actions,
.wz-header-bar > .wz-header-actions {
  flex: 0 0 auto !important;
  width: auto !important;
}
.wz-header-bar > .e-con-inner > .elementor-widget-n-menu,
.wz-header-bar > .elementor-widget-n-menu {
  flex: 1 1 auto !important;
  min-width: 0;
  width: auto !important;
}
.wz-logo img { display: block; width: 104px; height: auto; }
@media (max-width: 767px) { .wz-logo img { width: 86px; } }

@media (max-width: 1400px) {
  .wz-mega .e-n-menu-title { font-size: 13.5px !important; }
}

/* Announcement ribbon: keep it to one line, drop the least critical claims
   as space runs out rather than letting it stack four rows deep. */
.wz-announce .elementor-icon-list-items { flex-wrap: nowrap !important; }
@media (max-width: 1024px) {
  .wz-announce .elementor-icon-list-item:nth-child(n+4) { display: none !important; }
}
@media (max-width: 767px) {
  .wz-announce { padding: 8px 12px !important; }
  .wz-announce .elementor-icon-list-item:nth-child(n+3) { display: none !important; }
  .wz-announce .elementor-icon-list-item span { font-size: 10.5px !important; }
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */

/* Tablet and below: no pinning — the stage becomes a normal stacked hero */
@media (max-width: 1024px) {
  .wz-stage { height: auto; min-height: 0; overflow: visible; }
  .wz-stage-glow { display: none; }

  .wz-bottle-layer { position: relative; inset: auto; padding: 34px 0 10px !important; }
  .wz-bottle img { height: 42vh; min-height: 300px; }

  .wz-panel {
    position: relative !important; inset: auto;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0 6vw 46px !important;
    opacity: 1 !important; transform: none !important;
  }
  .wz-panel > * { max-width: none; }
  .wz-panel-2, .wz-panel-3 {
    background: #0E0E0E;
    padding-top: 46px !important;
  }
  .wz-panel-2 { margin-top: 12px; }
  .wz-panel-1 { padding-top: 40px !important; }
}
@media (max-width: 1024px) {
  .wz-glow::before { width: 80%; }
}
@media (max-width: 767px) {
  .wz-marquee { font-size: 13px; }
  .wz-card:hover img { transform: none; }
}