/* Source: src/styles/fonts.css */
/* Every typeface on the site comes from /fonts/new-fonts/ (pulled from the
   live ignitetabs.com reference) — Bebas Neue for display/headings, Inter
   for body copy, Teko as a secondary display accent (kickers, some CTAs).
   Each ships one real style (upright, regular weight); components that
   request italic/bold on top of that are relying on browser synthesis —
   that's what the reference site itself does (verified against its
   shipped CSS), not an approximation. */

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/fonts/new-fonts/bebas-neue-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Teko";
  src: url("../fonts/fonts/new-fonts/teko-light.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/fonts/new-fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/fonts/new-fonts/inter-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Source: src/styles/variables.css */
:root {
  /* Color — base */
  --color-bg: #08070a;
  --color-surface: #0f0d10;
  --color-text: #f6f4f2;
  --color-text-muted: rgba(246, 244, 242, 0.64);
  --color-border: rgba(255, 255, 255, 0.1);

  /* Color — glass */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-blur: 22px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

  /* Color — accent (brand fire gradient, matches the Ignite logo/packaging) */
  --color-accent-amber: #ffb020;
  --color-accent-ember: #ff3d1a;
  --gradient-accent: linear-gradient(135deg, var(--color-accent-amber), var(--color-accent-ember));
  --color-accent-on: #170800;

  /* Color — flavor accents, sourced from the product line art */
  --color-flavor-tropical: #3ddc84; /* Tropical Blast */
  --color-flavor-red: #ff2d4a; /* Red Slushy Ice */

  /* Type — both from /fonts/new-fonts/, the only fonts this site uses.
     Bebas Neue has no italic/bold cut of its own; where a component wants
     that treatment it requests font-style/weight and lets the browser
     synthesize it (see fonts.css). */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Radius */
  --radius-full: 999px;
  --radius-lg: 24px;
  --radius-md: 16px;

  /* Layout */
  --container-max: 1360px;
  --container-pad: clamp(20px, 5vw, 48px);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Source: src/styles/reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul {
  list-style: none;
}

/* Source: src/styles/layout.css */
/* Shared content-width container — every section wraps its inner
   content in this so the max-width/gutter logic lives in one place.
   Maps directly to an Elementor Container's "content width" + padding
   settings when this gets rebuilt as a WP theme. */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Source: src/styles/sections.css */
/* Shared section-intro pattern (eyebrow + heading + subcopy) — reused by
   every content section below the hero so they read as one system.
   Maps to a small reusable "Section Header" widget/template in Elementor. */

.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-amber);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: rgba(255, 176, 32, 0.1);
  border: 1px solid rgba(255, 176, 32, 0.3);
}

.section-heading {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.section-heading--accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-subcopy {
  margin-top: 16px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Source: src/components/Header/Header.css */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 24px var(--container-pad) 0;
}

.site-header__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 20px;
  padding: 8px 8px 8px 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.site-header--scrolled .site-header__inner {
  background: var(--glass-bg-strong);
}

/* Brand — the Ignite logotype is a flat wordmark, not a badge shape,
   so it sits directly in the pill rather than inside a circular clip. */

.site-header__logo {
  display: flex;
  align-items: center;
  height: 44px;
  padding-left: 10px;
  flex-shrink: 0;
  justify-self: start;
}

.site-header__logo img {
  height: 26px;
  width: auto;
}

/* Menu (nav + actions) — a single block on desktop via display: contents,
   so its children sit as direct, individually-aligned grid columns. */

.site-header__menu {
  display: contents;
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-self: center;
}

.site-header__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color 0.2s var(--ease-out);
}

.site-header__links a:hover {
  color: var(--color-text);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.site-header__cta {
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.site-header__cta:hover {
  background: rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.site-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  color: var(--color-accent-on);
  transition: transform 0.25s var(--ease-out);
}

.site-header__icon-btn:hover {
  transform: translateY(-1px) scale(1.04);
}

/* Mobile toggle */

.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  justify-self: end;
}

.site-header__toggle span {
  width: 18px;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

.site-header__toggle--open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.site-header__toggle--open span:nth-child(2) {
  opacity: 0;
}

.site-header__toggle--open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Responsive */

@media (max-width: 860px) {
  .site-header__inner {
    grid-template-columns: auto auto;
    padding: 8px;
  }

  .site-header__toggle {
    display: flex;
  }

  /* Positioned absolutely so it drops below the pill without affecting
     the header's own height or the logo/toggle grid placement. */
  .site-header__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: rgba(10, 10, 11, 0.85);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
  }

  .site-header__menu--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-header__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }

  .site-header__links a {
    display: block;
    width: 100%;
    padding: 10px 4px;
  }

  .site-header__actions {
    width: 100%;
  }

  .site-header__cta {
    flex-grow: 1;
    text-align: center;
  }
}

/* Source: src/components/Hero/Hero.css */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-bg);
  padding-bottom: 96px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Portrait — pinned to the right edge, bleeding off the top/bottom/right.
   Every knob you'd want to tweak (scale, rotation, nudge) is its own
   custom property here — change a value below, nothing else.
   This maps 1:1 to Elementor's Advanced > Transform controls
   (scale / rotate / offset) once this becomes a widget. */
.hero__portrait {
  --portrait-scale: 1.6; /* 1 = base size below; bump up to zoom in further */
  --portrait-rotate: 0deg;
  --portrait-x: 0px; /* + moves right, - moves left */
  --portrait-y: 0px; /* + moves down, - moves up */

  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: min(640px, 55vw); /* base size — the actual "how big" knob */
  height: auto;
  transform-origin: bottom right;
  transform: translate(var(--portrait-x), var(--portrait-y)) rotate(var(--portrait-rotate))
    scale(var(--portrait-scale));
  pointer-events: none;

  /* Source photo sits on a flat white background — fade it into the
     scene instead of showing a hard rectangle. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
  mask-image: linear-gradient(to right, transparent 0%, black 30%);
}

@media (max-width: 720px) {
  .hero__portrait {
    width: min(360px, 70vw);
  }
}

/* Darkens the background for text legibility. pointer-events: none so
   clicks pass straight through to the Hyperspeed canvas underneath —
   the click-and-hold speed-up interaction keeps working. */
.hero__overlay {
  --overlay-opacity: 0.40; /* 0 = fully transparent, 1 = fully opaque */

  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 7, 10, var(--overlay-opacity));
  pointer-events: none;
}

/* Washes the neutral starfield with the brand's fire colors. */
.hero__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 24% 18%, rgba(255, 61, 26, 0.5), transparent 55%),
    radial-gradient(circle at 78% 65%, rgba(255, 176, 32, 0.4), transparent 55%);
  mix-blend-mode: color;
}

/* Darkens the edges so header text and hero copy stay legible over the
   starfield, and fades the bottom into the next section's background. */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 35%, transparent 0%, rgba(8, 7, 10, 0.55) 70%),
    linear-gradient(to bottom, rgba(8, 7, 10, 0.15) 0%, rgba(8, 7, 10, 0.95) 100%);
}

.hero__grid {
  position: relative;
  z-index: 3;
  padding-top: 140px;
}

.hero__copy--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Copy */

.hero__kicker {
  margin-top: 18px;
  /* Teko only ships one (regular) cut — font-style: italic here is the
     browser synthesizing a slant, same trick the reference site uses. */
  font-family: "Teko", var(--font-display);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
}

.hero__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-amber);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: rgba(255, 176, 32, 0.1);
  border: 1px solid rgba(255, 176, 32, 0.3);
}

.hero__heading {
  margin-top: 24px;
  /* Bebas Neue only ships one (regular, upright) cut, so getting the slant
     needs a synthesized italic or a manual transform. font-style: italic
     looks right on its own, but combined with background-clip: text it's a
     known Chromium/WebKit bug: the browser skews the glyph outlines at
     paint time, while the gradient background is still sized to the
     *unskewed* box — so the trailing edge of slanted glyphs (worst on the
     last character) has no gradient under it and reads as clipped.
     A real transform: skewX() shears the whole already-gradient-filled
     text as one flat layer, after painting — no mismatch. */
  font-family: "Bebas Neue", var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(48px, 8.5vw, 95px);
  line-height: 0.79;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ff9e2c 0%, #ff3f00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: skewX(-8deg);
  display: inline-block;
}

.hero__subcopy {
  margin-top: 24px;
  max-width: 460px;
  font-family: "Inter", var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}

.hero__cta-row--center {
  justify-content: center;
}

/* Flavor CTAs — each button is just two custom properties:
   --flavor-gradient (the button's background) and --flavor-glow (the
   color its hover/shadow glows). Point them at a different flavor and
   everything else follows. Radius/padding/font match the reference
   site's buttons exactly (rounded-rect, not a full pill). */
.hero__cta-flavor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px 9px;
  border-radius: 10px;
  background: var(--flavor-gradient);
  color: #fff;
  font-family: "Teko", var(--font-display);
  font-size: 18px;
  font-weight: 400;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--flavor-glow) 45%, transparent);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), filter 0.25s var(--ease-out);
}

.hero__cta-flavor:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--flavor-glow) 55%, transparent);
}

.hero__cta-primary {
  padding: 16px 32px;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  color: var(--color-accent-on);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.hero__cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 61, 26, 0.3);
}

.hero__cta-secondary {
  padding: 16px 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.hero__cta-secondary:hover {
  background: var(--glass-bg);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Scroll cue */

.hero__scroll-cue {
  position: absolute;
  z-index: 3;
  left: var(--container-pad);
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero__scroll-line {
  width: 40px;
  height: 1px;
  background: var(--color-text-muted);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-accent);
  transform: translateX(-100%);
  animation: hero-scroll-line 2.2s var(--ease-out) infinite;
}

@keyframes hero-scroll-line {
  to {
    transform: translateX(100%);
  }
}

/* Responsive */

@media (max-width: 960px) {
  .hero__grid {
    padding-top: 120px;
  }

  .hero__scroll-cue {
    display: none;
  }
}

@media (max-width: 520px) {
  .hero__cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta-primary,
  .hero__cta-secondary {
    text-align: center;
  }
}

/* Source: src/components/TiltedCard/TiltedCard.css */
.tilted-card-figure {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tilted-card-mobile-alert {
  position: absolute;
  top: 1rem;
  text-align: center;
  font-size: 0.875rem;
  display: none;
}

@media (max-width: 640px) {
  .tilted-card-mobile-alert {
    display: block;
  }
  .tilted-card-caption {
    display: none;
  }
}

.tilted-card-inner {
  position: relative;
  transform-style: preserve-3d;
}

.tilted-card-img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  border-radius: 15px;
  will-change: transform;
  transform: translateZ(0);
}

.tilted-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  will-change: transform;
  transform: translateZ(30px);
}

.tilted-card-caption {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 4px;
  background-color: #fff;
  padding: 4px 10px;
  font-size: 10px;
  color: #2d2d2d;
  opacity: 0;
  z-index: 3;
}


/* Source: src/components/ChooseFlavor/ChooseFlavor.css */
.choose-flavor {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg);
  padding: 120px 0 100px;
}

/* Silk shader background. Sits behind everything, dimmed so section copy
   keeps its contrast — the texture reads as material, not as an image. */
.choose-flavor__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
}

.choose-flavor__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--color-bg) 0%, rgba(8, 7, 10, 0.45) 30%, rgba(8, 7, 10, 0.45) 70%, var(--color-bg) 100%);
}

.choose-flavor__inner {
  position: relative;
  z-index: 1;
}

/* Text block */

.choose-flavor__copy {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.choose-flavor__label {
  font-family: "Teko", var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent-ember);
}

.choose-flavor__heading {
  margin-top: 8px;
  font-family: var(--font-display);
  /* Bebas Neue ships one real weight; 700 is browser-synthesized bold,
     same technique as the hero heading. */
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
}

.choose-flavor__body {
  margin: 20px auto 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* Full-bleed product photo — edge to edge, natural 16:9, nothing cropped. */

.choose-flavor__visual {
  margin-top: 56px;
}

.choose-flavor__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* Cards */

.choose-flavor__cards {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

/* TiltedCard's overlay is shrink-to-fit by default; scoped here so the
   caption bar can anchor to the bottom of the card face. */
.choose-flavor__cards .tilted-card-overlay {
  inset: 0;
  display: flex;
  align-items: flex-end;
}

.choose-flavor__cards .tilted-card-img {
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* Bottom caption bar: name + price left, CTA right. */
.flavor-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 26px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(to top, rgba(4, 3, 6, 0.95) 0%, rgba(4, 3, 6, 0.75) 55%, rgba(4, 3, 6, 0) 100%);
}

.flavor-bar__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.flavor-bar__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

.flavor-bar__price {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  color: var(--flavor-color);
}

.flavor-bar__cta {
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  background: var(--flavor-color);
  color: #05040a;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: filter 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.flavor-bar__cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .choose-flavor__cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .choose-flavor {
    padding: 88px 0 72px;
  }

  .choose-flavor__visual {
    margin-top: 40px;
  }

  .choose-flavor__cards {
    margin-top: 44px;
  }

  .flavor-bar {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flavor-bar__cta {
    transition: none;
  }
}

/* Source: src/components/Flavors/Flavors.css */
.flavors {
  padding: 120px 0;
  background: var(--color-bg);
}

.flavors__header {
  max-width: 640px;
}

.flavors__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.flavor-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.flavor-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--flavor-color) 50%, var(--glass-border));
}

.flavor-card__image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 12px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--flavor-color) 20%, transparent), transparent 70%);
}

.flavor-card__image-wrap img {
  width: 100%;
  max-width: 180px;
  height: auto;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s var(--ease-out);
}

.flavor-card:hover .flavor-card__image-wrap img {
  transform: scale(1.05);
}

.flavor-card__body {
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flavor-card__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flavor-card__dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--flavor-color);
  box-shadow: 0 0 12px var(--flavor-color);
}

.flavor-card__name {
  font-size: 17px;
  font-weight: 600;
}

.flavor-card__blurb {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  min-height: 42px;
}

.flavor-card__footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flavor-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text);
}

.flavor-card__cta {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--flavor-color) 60%, var(--glass-border));
  color: var(--flavor-color);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.flavor-card__cta:hover {
  background: var(--flavor-color);
  color: #fff;
}

@media (max-width: 1080px) {
  .flavors__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .flavors {
    padding: 88px 0;
  }

  .flavors__grid {
    grid-template-columns: 1fr;
  }
}

/* Source: src/components/Specs/Specs.css */
.specs {
  padding: 100px 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.specs__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  align-items: center;
  gap: 64px;
}

.specs__image-wrap {
  display: flex;
  justify-content: center;
}

.specs__image-wrap img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5));
}

.specs__facts {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.specs__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 16px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  text-align: center;
}

.specs__fact-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.specs__fact-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .specs__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .specs__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .specs__facts {
    grid-template-columns: repeat(2, 1fr);
    max-width: 420px;
  }
}

@media (max-width: 480px) {
  .specs {
    padding: 72px 0;
  }
}

/* Source: src/components/FAQ/FAQ.css */
.faq {
  padding: 120px 0;
  background: var(--color-bg);
}

.faq__header {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.faq__header .section-subcopy {
  margin-left: auto;
  margin-right: auto;
}

.faq__list {
  margin: 56px auto 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  transition: border-color 0.25s var(--ease-out);
}

.faq-item--open {
  border-color: rgba(255, 176, 32, 0.35);
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.faq-item__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--glass-bg-strong);
  color: var(--color-accent-amber);
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

.faq-item--open .faq-item__icon {
  transform: rotate(180deg);
  background: var(--gradient-accent);
  color: var(--color-accent-on);
}

/* max-height transition — deliberately not the CSS grid-rows 0fr/1fr trick:
   that collapses correctly by every layout metric (scrollHeight/clientHeight
   confirm it) but does not reliably clip the painted text in some rendering
   paths. A generous max-height cap, comfortably above any real answer's
   height, is the boring option but paints correctly everywhere. */
.faq-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-out);
}

.faq-item--open .faq-item__panel {
  max-height: 300px;
}

.faq-item__answer {
  padding: 0 24px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  .faq {
    padding: 88px 0;
  }
}

/* Source: src/components/CTABanner/CTABanner.css */
.cta-banner {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

/* Same tunable-knob pattern as the hero portrait: scale/rotate/nudge are
   all separate custom properties, and it maps 1:1 to Elementor's
   Advanced > Transform controls later. */
.cta-banner__portrait {
  --portrait-scale: 1;
  --portrait-rotate: 0deg;
  --portrait-x: 0px;
  --portrait-y: 0px;

  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  transform-origin: bottom left;
  transform: translate(var(--portrait-x), var(--portrait-y)) rotate(var(--portrait-rotate))
    scale(var(--portrait-scale));
  pointer-events: none;

  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 35%);
  mask-image: linear-gradient(to left, transparent 0%, black 35%);
}

.cta-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(15, 13, 16, 0.4) 0%, var(--color-surface) 55%);
}

.cta-banner__content {
  position: relative;
  z-index: 2;
  margin-left: auto;
  max-width: 520px;
  text-align: right;
}

.cta-banner__heading {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  text-transform: uppercase;
}

.cta-banner__heading-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta-banner .section-subcopy {
  margin-left: auto;
}

.cta-banner__actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
}

.cta-banner__btn {
  padding: 16px 32px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s var(--ease-out);
}

.cta-banner__btn--primary {
  background: var(--gradient-accent);
  color: var(--color-accent-on);
}

.cta-banner__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 61, 26, 0.3);
}

.cta-banner__btn--secondary {
  border: 1px solid var(--glass-border);
  color: var(--color-text);
}

.cta-banner__btn--secondary:hover {
  background: var(--glass-bg);
  border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 720px) {
  .cta-banner {
    min-height: 0;
    padding: 96px 0 72px;
  }

  .cta-banner__portrait {
    opacity: 0.3;
  }

  .cta-banner__scrim {
    background: linear-gradient(to top, var(--color-surface) 30%, rgba(15, 13, 16, 0.3) 100%);
  }

  .cta-banner__content {
    margin: 0 auto;
    text-align: center;
  }

  .cta-banner .section-subcopy,
  .cta-banner__actions {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}

/* Source: src/components/Footer/Footer.css */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 64px var(--container-pad) 32px;
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-border);
}

/* Brand */

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-footer__logo {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

.site-footer__brand-tagline {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Nav */

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.site-footer__nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease-out);
}

.site-footer__nav a:hover {
  color: var(--color-text);
}

/* Signup */

.site-footer__signup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-footer__signup-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.site-footer__signup-field {
  display: flex;
  align-items: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: 5px 5px 5px 18px;
  gap: 8px;
}

.site-footer__signup-field input {
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--color-text);
  width: 190px;
  max-width: 40vw;
}

.site-footer__signup-field input::placeholder {
  color: var(--color-text-muted);
}

.site-footer__signup-field button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  color: var(--color-accent-on);
  transition: transform 0.25s var(--ease-out);
}

.site-footer__signup-field button:hover {
  transform: translateX(2px);
}

/* Bottom bar */

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
}

.site-footer__bottom p {
  font-size: 13px;
  color: var(--color-text-muted);
}

.site-footer__legal {
  display: flex;
  gap: 24px;
}

.site-footer__legal a {
  font-size: 13px;
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease-out);
}

.site-footer__legal a:hover {
  color: var(--color-text);
}

@media (max-width: 720px) {
  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__signup {
    width: 100%;
  }

  .site-footer__signup-field {
    width: 100%;
  }

  .site-footer__signup-field input {
    width: 100%;
    max-width: none;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* WordPress + Elementor compatibility */

body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.site,
.site-main,
.app {
  background: var(--color-bg);
}

.ignite-content {
  min-height: 60vh;
  padding: 160px 0 96px;
  background: var(--color-bg);
}

.ignite-full-width {
  background: var(--color-bg);
}

.entry-content {
  margin-top: 24px;
  color: var(--color-text-muted);
}

.entry-content a {
  color: var(--color-accent-amber);
}

.custom-logo {
  height: 26px;
  width: auto;
}

.site-footer__nav .menu,
.site-footer__nav ul,
.site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.elementor-section-editable {
  --elementor-editable-section: 1;
}

.elementor-page .site-main > .container,
.elementor-template-full-width .site-main > .container,
.page-template-elementor_header_footer .site-main > .container {
  max-width: none;
  padding: 0;
}

/* Lightweight replacements for the React/WebGL background components. */

.ignite-hyperspeed {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 91, 0, 0.28), transparent 30%),
    linear-gradient(90deg, rgba(216, 86, 191, 0.18), transparent 26%, transparent 74%, rgba(3, 179, 195, 0.2)),
    #000;
  perspective: 700px;
}

.ignite-hyperspeed::before,
.ignite-hyperspeed::after,
.ignite-hyperspeed span {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 2px;
  height: 145%;
  border-radius: 999px;
  transform-origin: 50% 100%;
  opacity: 0.82;
  animation: ignite-light-rush 1.45s linear infinite;
}

.ignite-hyperspeed::before {
  transform: translateX(-420px) rotateX(72deg) rotateZ(-18deg);
  background: linear-gradient(to top, rgba(216, 86, 191, 0), #d856bf 38%, rgba(216, 86, 191, 0));
  box-shadow: -80px 0 0 #6750a2, -155px 0 0 rgba(194, 71, 172, 0.78), -245px 0 0 rgba(255, 91, 0, 0.55);
}

.ignite-hyperspeed::after {
  transform: translateX(420px) rotateX(72deg) rotateZ(18deg);
  background: linear-gradient(to top, rgba(3, 179, 195, 0), #03b3c3 38%, rgba(3, 179, 195, 0));
  box-shadow: 80px 0 0 #0e5ea5, 155px 0 0 rgba(50, 69, 85, 0.86), 245px 0 0 rgba(0, 168, 255, 0.55);
}

.ignite-hyperspeed span:nth-child(1) {
  transform: translateX(-260px) rotateX(70deg) rotateZ(-7deg);
  background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation-duration: 1.1s;
}

.ignite-hyperspeed span:nth-child(2) {
  transform: translateX(260px) rotateX(70deg) rotateZ(7deg);
  background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation-duration: 1.2s;
}

.ignite-hyperspeed span:nth-child(3) {
  transform: translateX(-70px) rotateX(70deg) rotateZ(-2deg);
  background: linear-gradient(to top, transparent, rgba(255, 176, 32, 0.8), transparent);
  animation-duration: 1.65s;
}

.ignite-hyperspeed span:nth-child(4) {
  transform: translateX(70px) rotateX(70deg) rotateZ(2deg);
  background: linear-gradient(to top, transparent, rgba(255, 61, 26, 0.8), transparent);
  animation-duration: 1.55s;
}

.ignite-hyperspeed--react::before,
.ignite-hyperspeed--react::after,
.ignite-hyperspeed--react span {
  display: none;
}

.ignite-hyperspeed #lights {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  inset: 0;
}

.ignite-hyperspeed #lights canvas {
  width: 100%;
  height: 100%;
}

.ignite-silk {
  background:
    radial-gradient(circle at 20% 35%, rgba(255, 91, 0, 0.32), transparent 28%),
    radial-gradient(circle at 74% 60%, rgba(63, 182, 255, 0.2), transparent 30%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 16px),
    linear-gradient(135deg, #160806, #3a1408 45%, #08070a);
  filter: saturate(120%);
  animation: ignite-silk-flow 10s ease-in-out infinite alternate;
}

.tilted-card-inner {
  transition: transform 0.35s var(--ease-out);
}

@keyframes ignite-light-rush {
  0% {
    opacity: 0;
    filter: blur(8px);
  }
  18% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    filter: blur(1px);
    translate: 0 -34%;
  }
}

@keyframes ignite-silk-flow {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 4% -3%, -5% 4%, 120px 80px, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ignite-hyperspeed::before,
  .ignite-hyperspeed::after,
  .ignite-hyperspeed span,
  .ignite-silk {
    animation: none;
  }
}

/* Elementor-native homepage bridges */

.elementor-widget-text-editor p,
.elementor-widget-heading .elementor-heading-title {
  margin: 0;
}

.ignite-hero-bg-widget,
.ignite-section-bg-widget {
  position: static;
  margin: 0;
}

.hero.elementor-element,
.choose-flavor.elementor-element,
.flavors.elementor-element,
.specs.elementor-element,
.faq.elementor-element,
.cta-banner.elementor-element {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
  --gap: 0;
}

.hero.elementor-element {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  padding-bottom: 96px !important;
  background: var(--color-bg) !important;
}

.hero.elementor-element > .elementor-element {
  position: relative;
}

.hero__grid.elementor-element,
.choose-flavor__inner.elementor-element,
.choose-flavor__copy.elementor-element,
.choose-flavor__visual.elementor-element,
.choose-flavor__cards.elementor-element,
.flavors__grid.elementor-element,
.specs__grid.elementor-element,
.specs__facts.elementor-element,
.faq__list.elementor-element,
.cta-banner__actions.elementor-element {
  --gap: 0;
}

.hero__grid.elementor-element {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 140px var(--container-pad) 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero__copy.elementor-element,
.choose-flavor__copy.elementor-element,
.faq__header.elementor-element,
.specs__copy.elementor-element,
.cta-banner__content.elementor-element {
  --gap: 0;
}

.hero__copy.elementor-element {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.hero__copy.elementor-element > .elementor-element {
  width: auto !important;
  max-width: 100% !important;
}

.hero__heading {
  margin: 24px 0 0 !important;
  text-align: center !important;
}

.elementor-widget-heading.hero__heading {
  background: none;
  color: inherit;
  transform: none;
  width: auto !important;
  max-width: 100% !important;
}

.hero__heading .elementor-heading-title {
  font-family: "Bebas Neue", var(--font-display) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: clamp(48px, 8.5vw, 95px) !important;
  line-height: 0.79 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, #ff9e2c 0%, #ff3f00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  transform: skewX(-8deg) !important;
  display: inline-block !important;
  max-width: min(100%, 920px) !important;
}

.hero__kicker .elementor-widget-container,
.hero__kicker p {
  margin: 18px 0 0 !important;
  font-family: "Teko", var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: #fff !important;
}

.hero__subcopy .elementor-widget-container,
.hero__subcopy p {
  margin: 24px auto 0 !important;
  max-width: 460px !important;
  font-family: "Inter", var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.hero__cta-row.elementor-element {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 36px auto 0 !important;
}

.hero__cta-row.elementor-element > .elementor-widget-button {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
}

.hero__cta-flavor--sugar,
.ignite-hero-cta--sugar {
  --flavor-gradient: linear-gradient(281deg, #ff9e2c 20%, #ff5b00 100%);
  --flavor-glow: #ff5b00;
}

.hero__cta-flavor--blue,
.ignite-hero-cta--blue {
  --flavor-gradient: linear-gradient(281deg, #00a8ff 0%, #005bff 100%);
  --flavor-glow: #005bff;
}

.elementor-widget-button.hero__cta-flavor .elementor-button,
.elementor-widget-button.ignite-hero-cta .elementor-button,
.elementor-widget-button.flavor-bar__cta .elementor-button,
.elementor-widget-button.flavor-card__cta .elementor-button,
.elementor-widget-button.cta-banner__btn .elementor-button {
  border: 0;
  box-shadow: none;
  text-decoration: none;
}

.elementor-widget-button.hero__cta-flavor .elementor-button,
.elementor-widget-button.ignite-hero-cta .elementor-button {
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 15px 9px !important;
  border-radius: 10px !important;
  background: var(--flavor-gradient) !important;
  color: #fff !important;
  font-family: "Teko", var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--flavor-glow) 45%, transparent) !important;
}

.elementor-widget-button.hero__cta-flavor .elementor-button-content-wrapper,
.elementor-widget-button.ignite-hero-cta .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.elementor-widget-button.hero__cta-flavor .elementor-button-text,
.elementor-widget-button.ignite-hero-cta .elementor-button-text {
  flex-grow: 0 !important;
  white-space: nowrap !important;
}

.hero__cta-flavor--sugar .elementor-button-content-wrapper::before,
.hero__cta-flavor--blue .elementor-button-content-wrapper::before,
.ignite-hero-cta--sugar .elementor-button-content-wrapper::before,
.ignite-hero-cta--blue .elementor-button-content-wrapper::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
}

.hero__cta-flavor--sugar .elementor-button-content-wrapper::before,
.ignite-hero-cta--sugar .elementor-button-content-wrapper::before {
  clip-path: path("M8 1.5c.6 2 1.9 2.9 3 4.1 1.1 1.2 1.7 2.5 1.7 3.9 0 3-2.1 5-4.7 5s-4.7-1.8-4.7-4.4c0-1.6.6-2.9 1.6-4 .1 1 .5 1.7 1.2 2.2.1-1.5.6-2.9 1.9-3.7-.2 1-.1 1.9.5 2.6C8.9 6.6 8.5 5 8 1.5z");
}

.hero__cta-flavor--blue .elementor-button-content-wrapper::before,
.ignite-hero-cta--blue .elementor-button-content-wrapper::before {
  clip-path: path("M8.8 1L3 9h3.6l-1.4 6L13 7H9.2l1.6-6H8.8z");
}

.choose-flavor__label p,
.choose-flavor__label .elementor-widget-container {
  font-family: "Teko", var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent-ember);
}

.choose-flavor__heading .elementor-heading-title,
.section-heading .elementor-heading-title,
.cta-banner__heading .elementor-heading-title,
.flavor-bar__name .elementor-heading-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
}

.elementor-widget-heading.choose-flavor__heading,
.elementor-widget-heading.section-heading,
.elementor-widget-heading.cta-banner__heading,
.elementor-widget-heading.flavor-bar__name,
.elementor-widget-heading.flavor-card__name,
.elementor-widget-heading.faq-item__trigger {
  margin: 0;
  background: none;
  color: inherit;
}

.choose-flavor__heading .elementor-heading-title {
  margin-top: 8px;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.1;
  text-wrap: balance;
  color: #fff;
}

.choose-flavor__body p,
.choose-flavor__body .elementor-widget-container {
  margin: 20px auto 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.choose-flavor__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.tilted-card-figure.elementor-element {
  height: clamp(380px, 34vw, 460px);
  width: 100%;
  perspective: 800px;
}

.tilted-card-inner.elementor-element {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease-out);
}

.tilted-card-img.elementor-widget-image {
  position: absolute;
  inset: 0;
}

.tilted-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.tilted-card-overlay.elementor-element {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  transform: translateZ(30px);
}

.flavor-card--sugar,
.flavor-card--sugar .flavor-bar {
  --flavor-color: #ff9e2c;
}

.flavor-card--blue,
.flavor-card--blue .flavor-bar {
  --flavor-color: #3fb6ff;
}

.flavor-card--tropical {
  --flavor-color: #3ddc84;
}

.flavor-card--blue-grid {
  --flavor-color: #2f8fff;
}

.flavor-card--red {
  --flavor-color: #ff2d4a;
}

.flavor-card--pink {
  --flavor-color: #e0399e;
}

.flavor-bar__name .elementor-heading-title {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  color: #fff;
}

.flavor-bar__price p,
.flavor-card__price p,
.specs__fact-value p {
  font-family: var(--font-display);
  font-weight: 700;
}

.flavor-bar__price p {
  font-size: 20px;
  line-height: 1.1;
  color: var(--flavor-color);
}

.elementor-widget-button.flavor-bar__cta .elementor-button {
  padding: 12px 24px;
  border-radius: var(--radius-full);
  background: var(--flavor-color);
  color: #05040a;
  font-size: 14px;
  font-weight: 700;
}

.section-heading .elementor-heading-title {
  margin-top: 20px;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.section-heading--accent .elementor-heading-title {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-subcopy p,
.section-subcopy .elementor-widget-container {
  margin-top: 16px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.flavor-card__image img {
  width: 100%;
  max-width: 180px;
  height: auto;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5));
}

.flavor-card__name .elementor-heading-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
}

.flavor-card__blurb p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.flavor-card__price p {
  font-size: 18px;
  color: var(--color-text);
}

.elementor-widget-button.flavor-card__cta .elementor-button {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--flavor-color) 60%, var(--glass-border));
  background: transparent;
  color: var(--flavor-color);
  font-size: 13px;
  font-weight: 600;
}

.specs__image img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5));
}

.section-eyebrow p,
.section-eyebrow .elementor-widget-container {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-amber);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: rgba(255, 176, 32, 0.1);
  border: 1px solid rgba(255, 176, 32, 0.3);
}

.specs__fact-value p {
  font-size: 26px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.specs__fact-label p {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.faq-item__trigger .elementor-heading-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.faq-item__answer p {
  padding: 0 24px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.cta-banner__portrait.elementor-widget-image {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
}

.cta-banner__portrait img {
  height: 100%;
  width: auto;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 35%);
  mask-image: linear-gradient(to left, transparent 0%, black 35%);
}

.cta-banner__heading .elementor-heading-title {
  margin-top: 20px;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  color: var(--color-text);
}

.elementor-widget-button.cta-banner__btn .elementor-button {
  padding: 16px 32px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.elementor-widget-button.cta-banner__btn--primary .elementor-button {
  background: var(--gradient-accent);
  color: var(--color-accent-on);
}

.elementor-widget-button.cta-banner__btn--secondary .elementor-button {
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--color-text);
}

/* Critical hero lock: loaded after Elementor, with broad selectors that match
   Elementor's nested wrapper markup while keeping every widget editable. */

.hero .ignite-hero-bg-widget,
.hero .ignite-hero-bg-widget .elementor-widget-container {
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.hero .hero__bg,
.hero .hero__overlay {
  position: absolute !important;
  inset: 0 !important;
}

.hero .hero__bg {
  z-index: 0 !important;
}

.hero .hero__overlay {
  z-index: 1 !important;
}

.ignite-hyperspeed__mount,
.ignite-hyperspeed__mount > div {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.ignite-hyperspeed:not(.ignite-hyperspeed--react)::before,
.ignite-hyperspeed:not(.ignite-hyperspeed--react)::after,
.ignite-hyperspeed:not(.ignite-hyperspeed--react) span {
  display: block !important;
}

.hero .hero__grid,
.hero .hero__copy {
  box-sizing: border-box !important;
}

.hero .hero__grid {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 140px var(--container-pad) 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero .hero__copy {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0 !important;
  --gap: 0 !important;
  --row-gap: 0 !important;
  --column-gap: 0 !important;
}

.hero .hero__copy > .elementor-element {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin-bottom: 0 !important;
}

.hero .hero__heading {
  width: auto !important;
  max-width: 920px !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.hero .hero__heading .elementor-heading-title,
.hero h1.hero__heading,
.hero .hero__heading h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Bebas Neue", var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(48px, 8.5vw, 95px) !important;
  line-height: 0.79 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, #ff9e2c 0%, #ff3f00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  transform: skewX(-8deg) !important;
  display: inline-block !important;
}

.hero .hero__kicker {
  margin: 18px auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.hero .hero__kicker,
.hero .hero__kicker p,
.hero .hero__kicker .elementor-widget-container {
  margin-bottom: 0 !important;
  font-family: "Teko", var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  color: #fff !important;
}

.hero .hero__subcopy {
  width: 100% !important;
  max-width: 460px !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.hero .hero__subcopy,
.hero .hero__subcopy p,
.hero .hero__subcopy .elementor-widget-container {
  margin-bottom: 0 !important;
  font-family: "Inter", var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.hero .hero__cta-row {
  width: auto !important;
  max-width: 100% !important;
  margin: 36px auto 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  --gap: 16px !important;
  --row-gap: 16px !important;
  --column-gap: 16px !important;
}

.hero .hero__cta-row > .elementor-element,
.hero .hero__cta-row .elementor-widget-button,
.hero .ignite-hero-cta {
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero .ignite-hero-cta .elementor-widget-container {
  width: auto !important;
  max-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero .ignite-hero-cta .elementor-button {
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 15px 9px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--flavor-gradient) !important;
  color: #fff !important;
  font-family: "Teko", var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--flavor-glow) 45%, transparent) !important;
}

.hero .ignite-hero-cta .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.hero .ignite-hero-cta .elementor-button-text {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* Last-mile Elementor button override: target by hero CTA row position so
   Elementor global button colors cannot turn these green. */
.hero .hero__cta-row .elementor-widget-button:nth-of-type(1),
.hero .hero__cta-row .elementor-widget-button:nth-of-type(1) .elementor-widget-container,
.hero .hero__cta-row .elementor-widget-button:nth-of-type(2),
.hero .hero__cta-row .elementor-widget-button:nth-of-type(2) .elementor-widget-container {
  width: auto !important;
  max-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero .hero__cta-row .elementor-widget-button:nth-of-type(1) .elementor-button,
.hero .hero__cta-row .elementor-widget-button:nth-of-type(2) .elementor-button {
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 15px 9px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: "Teko", var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.hero .hero__cta-row .elementor-widget-button:nth-of-type(1) .elementor-button {
  background: linear-gradient(281deg, #ff9e2c 20%, #ff5b00 100%) !important;
  box-shadow: 0 10px 24px rgba(255, 91, 0, 0.45) !important;
}

.hero .hero__cta-row .elementor-widget-button:nth-of-type(2) .elementor-button {
  background: linear-gradient(281deg, #00a8ff 0%, #005bff 100%) !important;
  box-shadow: 0 10px 24px rgba(0, 91, 255, 0.45) !important;
}

.hero .hero__cta-row .elementor-widget-button .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.hero .hero__cta-row .elementor-widget-button .elementor-button-text {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Elementor FAQ accordion lock: mirrors the React FAQ component. */
.faq.elementor-element,
.faq {
  padding: 120px 0 !important;
  background: var(--color-bg) !important;
}

.faq > .container.elementor-element,
.faq .container {
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--container-pad) !important;
  --gap: 0 !important;
}

.faq__header.elementor-element,
.faq__header {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  --gap: 0 !important;
}

.faq__header .section-subcopy,
.faq__header .section-subcopy .elementor-widget-container,
.faq__header .section-subcopy p {
  margin-left: auto !important;
  margin-right: auto !important;
}

.faq__list.elementor-element,
.faq__list,
.ignite-elementor-faq-list {
  width: 100% !important;
  max-width: 760px !important;
  margin: 56px auto 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  --gap: 12px !important;
}

.faq-item.elementor-element,
.faq-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border-radius: var(--radius-md) !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  overflow: hidden !important;
  transition: border-color 0.25s var(--ease-out) !important;
  --gap: 0 !important;
}

.faq-item.faq-item--open {
  border-color: rgba(255, 176, 32, 0.35) !important;
}

.faq-item__trigger.elementor-element,
.faq-item__trigger {
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  text-align: left !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  --gap: 16px !important;
}

.faq-item__question.elementor-widget-heading,
.faq-item__question {
  width: auto !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.faq-item__question .elementor-heading-title,
.faq-item__trigger .elementor-heading-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Inter", var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  color: var(--color-text) !important;
}

.faq-item__icon-widget.elementor-widget-html,
.faq-item__icon-widget .elementor-widget-container {
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.faq-item__icon {
  flex: 0 0 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--radius-full) !important;
  background: var(--glass-bg-strong) !important;
  color: var(--color-accent-amber) !important;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out) !important;
}

.faq-item.faq-item--open .faq-item__icon {
  transform: rotate(180deg) !important;
  background: var(--gradient-accent) !important;
  color: var(--color-accent-on) !important;
}

.faq-item__panel.elementor-element,
.faq-item__panel {
  width: 100% !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  transition: max-height 0.35s var(--ease-out) !important;
  --gap: 0 !important;
}

.faq-item.faq-item--open .faq-item__panel {
  max-height: 300px !important;
}

.faq-item__answer,
.faq-item__answer .elementor-widget-container,
.faq-item__answer p {
  margin: 0 !important;
}

.faq-item__answer p {
  padding: 0 24px 20px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--color-text-muted) !important;
}

/* Elementor product card lock: mirrors the React ChooseFlavor and Flavors cards. */
.flavors .flavors__grid,
.ignite-product-grid-lock,
.choose-flavor__cards.elementor-element {
  width: 100% !important;
  display: grid !important;
}

.choose-flavor__cards.elementor-element {
  max-width: var(--container-max) !important;
  margin: 64px auto 0 !important;
  padding: 0 var(--container-pad) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 32px !important;
  --gap: 32px !important;
}

.choose-flavor__cards .tilted-card-figure.elementor-element {
  position: relative !important;
  width: 100% !important;
  height: clamp(380px, 34vw, 460px) !important;
  min-height: clamp(380px, 34vw, 460px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  perspective: 800px !important;
  transform-style: preserve-3d !important;
  overflow: visible !important;
  --gap: 0 !important;
}

.choose-flavor__cards .tilted-card-inner.elementor-element {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transition: transform 0.3s var(--ease-out) !important;
  overflow: visible !important;
  --gap: 0 !important;
}

.choose-flavor__cards .tilted-card-img.elementor-widget-image,
.choose-flavor__cards .tilted-card-img .elementor-widget-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.choose-flavor__cards .tilted-card-img img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: var(--radius-lg) !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}

.choose-flavor__cards .tilted-card-overlay.elementor-element {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: stretch !important;
  width: 100% !important;
  height: 100% !important;
  transform: translateZ(30px) !important;
  pointer-events: auto !important;
  --gap: 0 !important;
}

.choose-flavor__cards .flavor-bar.elementor-element {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 26px !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  background: linear-gradient(to top, rgba(4, 3, 6, 0.95) 0%, rgba(4, 3, 6, 0.75) 55%, rgba(4, 3, 6, 0) 100%) !important;
  --gap: 16px !important;
}

.flavors.elementor-element {
  padding: 120px 0 !important;
  background: var(--color-bg) !important;
}

.flavors.elementor-element > .container.elementor-element {
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--container-pad) !important;
  --gap: 0 !important;
}

.flavors__header.elementor-element {
  max-width: 640px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  --gap: 0 !important;
}

.flavors__grid.elementor-element {
  width: 100% !important;
  margin: 56px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  --gap: 24px !important;
}

.flavors .flavors__grid,
.ignite-product-grid-lock {
  margin: 56px 0 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  --gap: 24px !important;
}

.flavors .flavors__grid > *,
.ignite-product-grid-lock > * {
  min-width: 0 !important;
}

.flavors .flavor-card,
.ignite-product-card-lock,
.flavor-card.elementor-element {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-lg) !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  overflow: hidden !important;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out) !important;
  --gap: 0 !important;
}

.flavors .flavor-card:hover,
.ignite-product-card-lock:hover,
.flavor-card.elementor-element:hover {
  transform: translateY(-6px) !important;
  border-color: color-mix(in srgb, var(--flavor-color) 50%, var(--glass-border)) !important;
}

.flavors .flavor-card__image-wrap,
.ignite-product-card-lock .flavor-card__image-wrap,
.flavor-card__image-wrap.elementor-element {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 28px 20px 12px !important;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--flavor-color) 20%, transparent), transparent 70%) !important;
  --gap: 0 !important;
}

.flavors .flavor-card__image,
.flavors .flavor-card__image .elementor-widget-container,
.flavor-card__image.elementor-widget-image,
.flavor-card__image .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.flavor-card__image img {
  display: block !important;
  width: 100% !important;
  max-width: 180px !important;
  height: auto !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5)) !important;
  transition: transform 0.3s var(--ease-out) !important;
}

.flavors .flavor-card:hover .flavor-card__image img,
.ignite-product-card-lock:hover .flavor-card__image img,
.flavor-card.elementor-element:hover .flavor-card__image img {
  transform: scale(1.05) !important;
}

.flavors .flavor-card__body,
.ignite-product-card-lock .flavor-card__body,
.flavor-card__body.elementor-element {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 24px 28px !important;
  --gap: 10px !important;
}

.flavors .flavor-card__title-row,
.ignite-product-card-lock .flavor-card__title-row,
.flavor-card__title-row.elementor-element {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  --gap: 10px !important;
}

.flavors .flavor-card__title-row .elementor-widget-html,
.flavor-card__title-row .elementor-widget-html {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.flavor-card__dot {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 10px !important;
  border-radius: var(--radius-full) !important;
  background: var(--flavor-color) !important;
  box-shadow: 0 0 12px var(--flavor-color) !important;
}

.flavors .flavor-card__name.elementor-widget-heading,
.flavor-card__name.elementor-widget-heading {
  width: auto !important;
  margin: 0 !important;
}

.flavor-card__name .elementor-heading-title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--color-text) !important;
}

.flavor-card__blurb,
.flavor-card__blurb .elementor-widget-container,
.flavor-card__blurb p {
  margin: 0 !important;
}

.flavor-card__blurb p {
  min-height: 42px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--color-text-muted) !important;
}

.flavors .flavor-card__footer,
.ignite-product-card-lock .flavor-card__footer,
.flavor-card__footer.elementor-element {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  --gap: 14px !important;
}

.flavors .flavor-card__price,
.flavors .flavor-card__price .elementor-widget-container,
.flavors .flavor-card__price p,
.flavor-card__price,
.flavor-card__price .elementor-widget-container,
.flavor-card__price p {
  width: auto !important;
  margin: 0 !important;
}

.flavor-card__price p {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  color: var(--color-text) !important;
}

.flavors .elementor-widget-button.flavor-card__cta,
.elementor-widget-button.flavor-card__cta {
  width: auto !important;
  margin: 0 !important;
}

.flavors .elementor-widget-button.flavor-card__cta .elementor-button,
.elementor-widget-button.flavor-card__cta .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 8px 18px !important;
  border-radius: var(--radius-full) !important;
  border: 1px solid color-mix(in srgb, var(--flavor-color) 60%, var(--glass-border)) !important;
  background: transparent !important;
  color: var(--flavor-color) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out) !important;
}

.flavors .elementor-widget-button.flavor-card__cta .elementor-button:hover,
.elementor-widget-button.flavor-card__cta .elementor-button:hover {
  background: var(--flavor-color) !important;
  color: #fff !important;
}

@media (max-width: 720px) {
  .hero .hero__grid {
    padding-top: 120px !important;
  }
}

@media (max-width: 1080px) {
  .flavors .flavors__grid,
  .ignite-product-grid-lock,
  .flavors__grid.elementor-element {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .choose-flavor__cards.elementor-element {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .choose-flavor__cards.elementor-element {
    margin-top: 44px !important;
  }

  .choose-flavor__cards .flavor-bar.elementor-element {
    padding: 20px !important;
  }

  .flavors.elementor-element {
    padding: 88px 0 !important;
  }

  .faq.elementor-element,
  .faq {
    padding: 88px 0 !important;
  }

  .flavors__grid.elementor-element {
    grid-template-columns: 1fr !important;
  }

  .flavors .flavors__grid,
  .ignite-product-grid-lock {
    grid-template-columns: 1fr !important;
  }
}