/* ═══════════════════════════════════════════════════════════════
   Concern Hero — product-specific intro banner for the PDP.
   Visual language mirrors SingleHero (same overlay/typography tokens,
   same <picture><source media="(max-width:767px)"> desktop/mobile
   fallback technique) but is its own, independent, lighter section —
   no video/parallax/CTA, since this field set never had them.
   Content source: PRODUCT_ATTRIBUTE (per-product) → Studio fallback →
   empty, resolved in index.tsx. This file only renders what it's given.
   ═══════════════════════════════════════════════════════════════ */

.cc_zRr7AL87AP_aF6a0KUINZ .concern-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  color: var(--concern-hero-text-color, #ffffff);
  display: flex;
  min-height: 60vh;
}

.cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Desktop/tablet (>=768px — mobile gets its own full-width override
   below). Brand-tinted (dark green, not generic black) overlay,
   concentrated where the text actually sits (bottom-left, per
   __container's align-items:flex-end + __content's left alignment)
   instead of a flat band across the whole image — the radial gradient
   carries the contrast the heading/description need, while the much
   lighter linear gradient only lifts the very bottom edge. Everything
   above/right of the text keeps the lab photo's own bright, premium
   look. Opacity stops nudged up slightly (0.62->0.68, 0.28->0.34,
   0.22->0.28, 0.08->0.11) for a bit more contrast right behind the
   text; ellipse geometry and stop positions are unchanged, so the
   gradient's footprint — and how much of the rest of the image stays
   untouched — is identical to before. */
.cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(
      ellipse 90% 70% at 0% 100%,
      rgba(20, 38, 28, 0.68) 0%,
      rgba(20, 38, 28, 0.34) 45%,
      rgba(20, 38, 28, 0) 75%
    ),
    linear-gradient(
      to top,
      rgba(47, 91, 67, 0.28) 0%,
      rgba(47, 91, 67, 0.11) 40%,
      rgba(47, 91, 67, 0) 75%
    );
}

/* Opt-in per-product override (see useLeftGradient in index.tsx) — a
   plain left-to-right gradient instead of the bottom-left-anchored
   radial above, for a product whose hero photo is busy across the
   whole left side (where the text sits), not just the bottom-left
   corner. Strongest at the far left (~55% dark), softening through the
   middle, fully clear by 60% width — the right ~40% of the frame
   (pipette/droplet/texture) is left at the photo's own original
   brightness. >=768px only: this component already hides the overlay
   entirely on mobile (see the <767px rule further below), so this
   never needs its own mobile variant. */
@media (min-width: 768px) {
  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero--left-gradient .concern-hero__overlay {
    background-image: linear-gradient(
      to right,
      rgba(20, 38, 28, 0.55) 0%,
      rgba(20, 38, 28, 0.3) 28%,
      rgba(20, 38, 28, 0.1) 45%,
      rgba(20, 38, 28, 0) 60%
    );
  }
}

/* Mobile: the content column spans nearly the full viewport width (its
   640px max-width never actually binds below ~700px), so a corner-
   anchored radial leaves the right portion of a wrapped line
   uncovered. A plain full-width "to top" gradient has no horizontal
   variation, so every word gets the same contrast regardless of where
   it falls in the line. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__overlay {
    background-image: linear-gradient(
      to top,
      rgba(20, 38, 28, 0.72) 0%,
      rgba(20, 38, 28, 0.5) 35%,
      rgba(20, 38, 28, 0.22) 65%,
      rgba(20, 38, 28, 0) 100%
    );
  }
}

.cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl) clamp(16px, 5vw, 80px);
  display: flex;
  align-items: flex-end;
}

.cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 640px;
}

@media (max-width: 767px) {
  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__content {
    gap: var(--space-xs);
  }
}

.cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-metallic, #c4a96b);
}

/* Heading size: explicit px per breakpoint (not the shared --text-h1/h2/h3
   tokens) — this hero needs its own 48/38/30px scale, distinct from those
   tokens' other users elsewhere in the theme (e.g. SingleHero). Scoped to
   this one component only. Tablet's value lives here, in the unqueried
   base rule, since neither the <768px nor the >=1024px block below
   touches it — this IS the ~768-1023px value. */
.cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.15;
  color: var(--concern-hero-text-color, #ffffff);
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__description {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--concern-hero-text-color, #ffffff);
  opacity: 0.92;
  max-width: 560px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* Mobile-only size reduction, scoped so it can never touch tablet/
   desktop: base .concern-hero__heading/__description above stay at
   38px/16px for >=768px (the >=1024px block further below still raises
   them to 48px/17px, untouched). Kept even though .concern-hero__content
   is hidden on mobile below it, in case that hide is ever revisited —
   harmless either way. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__heading {
    font-size: 30px;
  }

  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__description {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* Mobile only: no text over the image at all — hide the entire text
   block (eyebrow + heading + description together) and the contrast
   overlay that existed only to support it, so the lab photo shows
   clean and alone. .concern-hero__media/__image (the actual image) are
   untouched - this never removes or alters the image itself, its crop,
   or the section's height. Desktop/tablet (>=768px) are completely
   unaffected: both rules above this one stay scoped to this same
   max-width:767px query only. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__overlay, .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__content {
    display: none;
  }
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero {
    min-height: 70vh;
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero {
    min-height: 80vh;
  }

  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__content {
    max-width: 720px;
  }

  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__heading {
    font-size: 48px;
  }

  .cc_zRr7AL87AP_aF6a0KUINZ .concern-hero__description {
    font-size: 17px;
  }
}