/** Shopify CDN: Minification failed

Line 14:0 All "@import" rules must come first

**/
/* ============================================================
   za-lux-base.css
   Shared foundation for the Vibit PULSE product page.
   Scoped to .za-lux so other theme pages are NOT affected.
   ============================================================ */

html { scroll-behavior: smooth; }

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ---- Exact background-contrast values for the new schemes ----
   Dawn derives --color-background-contrast from brightness; these
   overrides restore the precise values from the design spec.
   Only the new scheme ids are targeted, so existing schemes are
   untouched. */
.za-lux {
  --za-cta-bg: #477B68;
  --za-cta-hover: #35665A;
  --za-compare-at: #C24444;
  --za-stock-in: #2E7D32;
  --za-stock-out: #C0392B;
}

/* ---- Scoped design tokens (override Dawn globals only inside .za-lux) ---- */
.za-lux {
  --lux-font: 'DM Sans', Helvetica Neue, Arial, sans-serif;

  /* Component shape/spacing tokens from the design spec */
  --buttons-radius: 10px;
  --buttons-radius-outset: 11px;
  --buttons-border-width: 1px;
  --buttons-border-opacity: 0.55;
  --inputs-radius: 10px;
  --inputs-border-width: 1px;
  --inputs-border-opacity: 0.55;
  --variant-pills-radius: 26px;
  --variant-pills-border-width: 1px;
  --variant-pills-border-opacity: 0.2;
  --badge-corner-radius: 2rem;
  --text-boxes-radius: 24px;
  --collection-card-corner-radius: 1.2rem;
  --media-radius: 0px;
  --media-border-width: 0px;

  /* Inner content width. The spec's --page-width is 120rem; kept as a
     full-bleed background allowance while inner content is capped at a
     readable measure. Adjust --lux-container to widen. */
  --lux-page-width: 120rem;
  --lux-container: 1200px;
  --lux-gap-d: 40px;   /* desktop grid spacing */
  --lux-gap-m: 20px;   /* mobile grid spacing */

  font-family: var(--lux-font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.za-lux *,
.za-lux *::before,
.za-lux *::after { box-sizing: border-box; }

/* Responsive images — prevent overflow on ALL devices.
   Three selectors ensure NO za-lux section image escapes this rule:
   1. .za-lux class (most sections)
   2. [id^="za-lux-"] (sections that may be missing the class)
   3. [id^="za-hero-"] (hero sections)
   NOTE: we intentionally omit height:auto. The CSS default for <img>
   is already height:auto, and setting it explicitly creates a
   specificity war with per-component height:100% rules (images
   inside parent aspect-ratio containers need height:100% to fill).
   Those rules live in za-polish.css Section 8A with !important.
   Do NOT add height:auto here — it will silently break image rendering.
   ============================================================ */
.za-lux img,
[id^="za-lux-"] img,
[id^="za-hero-"] img {
  max-width: 100%;
  /* height:auto is the CSS default � explicitly setting it creates a
     specificity war with per-component height:100% rules, forcing
     za-polish.css Section 8A to use !important everywhere. */
}

/* Headings use DM Sans per spec */
.za-lux h1, .za-lux h2, .za-lux h3, .za-lux h4, .za-lux h5, .za-lux h6,
.za-lux .lux-h1, .za-lux .lux-h2, .za-lux .lux-h3 {
  font-family: var(--lux-font);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.za-lux strong, .za-lux b { font-weight: 700; }

/* Shared layout primitives */
.za-lux__container {
  max-width: var(--lux-container);
  margin-inline: auto;
  padding-inline: var(--lux-gap-d);
  width: 100%;
}
.za-lux__section { padding-block: 64px; }

.za-lux__eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
  margin: 0 0 .6rem;
}
.za-lux__heading {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  margin: 0 0 .5rem;
}
.za-lux__subheading {
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  line-height: 1.6;
  opacity: .8;
  max-width: 60ch;
  margin: 0 auto;
}

/* Shared button (uses scheme button colors) */
.za-lux__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border: var(--buttons-border-width) solid rgba(var(--color-button), var(--buttons-border-opacity));
  border-radius: var(--buttons-radius);
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-family: var(--lux-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.za-lux__btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(.92); box-shadow: 0 6px 20px rgba(var(--color-shadow), .22); }
.za-lux__btn:disabled { opacity: .45; cursor: not-allowed; }

/* Blue focus ring for all interactive elements */
.za-lux :focus-visible {
  outline: 2px solid #477B68;
  outline-offset: 2px;
}

/* Subtle hover lift for cards */
.za-lux .za-lux-faq__item:hover,
.za-lux .za-lux-feature-grid__card:hover {
  transform: translateY(-2px);
  transition: transform .15s ease;
}

/* Respect reduced motion globally for lux sections */
@media (prefers-reduced-motion: reduce) {
  .za-lux *, .za-lux *::before, .za-lux *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile spacing */
@media (max-width: 749px) {
  .za-lux__container { padding-inline: var(--lux-gap-m); }
  .za-lux__section { padding-block: 40px; }

  /* ── Mobile image sizing ──
     Prevents uploaded images from dominating the viewport.
     Sections use aspect-ratio containers; these floor values keep
     images substantial without forcing excessive scrolling. */
  .za-lux img {
    max-width: 100%;
  }

  /* Containers that hold user-uploaded images: cap at reasonable height */
  [class*="za-lux"][class*="__media"],
  [class*="za-lux"][class*="__img-wrap"],
  [class*="za-lux"][class*="__frame"] {
    max-height: 520px;
  }
}