/* STAG local polish v1 — contrast, typography and responsive containment. */
:root {
  --stag-ink: #17130f;
  --stag-ink-soft: #2b2621;
  --stag-paper: #f8f4ee;
  --stag-gold-accessible: #8a6228;
  --stag-display: "Roboto Slab", Georgia, serif;
  --stag-body: "Manrope", Arial, sans-serif;
}

body,
.elementor,
.elementor-button,
.elementor-widget-text-editor,
.elementor-widget-nav-menu {
  font-family: var(--stag-body) !important;
}

/* Roboto Slab is bundled locally; this removes the unintended Times New Roman yedek. */
.stag8-hero-title .elementor-heading-title,
.stag8-formula-no .elementor-heading-title,
.stag8-formula-title .elementor-heading-title,
.stag8-control-title .elementor-heading-title,
.stag8-control-point-no .elementor-heading-title,
.elementor-20 .stag8-hero-title .elementor-heading-title,
.elementor-20 .stag8-formula-no .elementor-heading-title,
.elementor-20 .stag8-formula-title .elementor-heading-title,
.elementor-20 .stag8-control-title .elementor-heading-title,
.elementor-20 .stag8-control-point-no .elementor-heading-title {
  font-family: var(--stag-display) !important;
  text-rendering: optimizeLegibility;
}

.elementor-20 .elementor-button,
.elementor-20 .elementor-button .elementor-button-text,
.elementor-20 .elementor-button .elementor-button-content-wrapper {
  font-family: var(--stag-body) !important;
}

/* Light surfaces use dark text throughout. Gold remains an accent on rules and dark surfaces. */
.stag8-features,
.stag8-formula {
  color: var(--stag-ink);
}

.stag8-formula-no .elementor-heading-title,
.elementor-20 .stag8-formula-no .elementor-heading-title,
.stag8-formula-index-top,
.stag8-formula-index-top p,
.stag8-formula-index-bottom,
.stag8-formula-index-bottom p,
.stag8-formula-index-bottom span,
.elementor-20 .stag8-formula-index-top,
.elementor-20 .stag8-formula-index-top p,
.elementor-20 .stag8-formula-index-bottom,
.elementor-20 .stag8-formula-index-bottom p,
.elementor-20 .stag8-formula-index-bottom span {
  color: var(--stag-ink) !important;
}

.stag8-formula-text,
.stag8-formula-text p,
.stag8-feature-text,
.stag8-feature-text p {
  color: var(--stag-ink-soft) !important;
}

.stag8-formula-title .elementor-heading-title,
.elementor-20 .stag8-formula-title .elementor-heading-title {
  color: var(--stag-ink) !important;
  font-size: clamp(2.35rem, 3.2vw, 4rem) !important;
  line-height: .98 !important;
}

.stag8-formula-no .elementor-heading-title {
  font-size: clamp(3.5rem, 5.4vw, 5.75rem) !important;
  line-height: .85 !important;
}

.stag8-formula-text,
.stag8-formula-text p {
  font-size: clamp(1rem, 1.05vw, 1.18rem) !important;
  line-height: 1.6 !important;
}

.stag8-feature-title .elementor-heading-title {
  color: var(--stag-ink) !important;
  font-size: clamp(1.1rem, 1.25vw, 1.4rem) !important;
  line-height: 1.12 !important;
}

.stag8-feature-text,
.stag8-feature-text p {
  font-size: clamp(.95rem, 1vw, 1.08rem) !important;
  line-height: 1.45 !important;
}

/* Keep an accessible accent on the light section without using gold for body copy. */
.stag8-formula-index-line .elementor-divider-separator,
.stag8-formula-cta .elementor-button {
  border-color: var(--stag-gold-accessible) !important;
}
.stag8-formula-cta .elementor-button {
  color: var(--stag-ink) !important;
}

/* Prevent transparent art layers from expanding mobile layout or clipping sibling content. */
.stag8-hero-stage,
.stag8-formula-inner,
.stag8-control-inner {
  min-width: 0;
}
.stag8-hero-ground img,
.stag8-hero-product img,
.stag8-control-left-visual img,
.stag8-control-product img,
.stag8-formula-product img {
  max-width: 100%;
}

/* Elementor's saved precision scale made the decorative ground nearly twice
   as wide as the hero on narrow screens. Keep it inside the stage. */
.stag8-hero-ground {
  scale: 1 !important;
  translate: 0 0 !important;
}
.stag8-control-product {
  scale: 1 !important;
  translate: 0 0 !important;
}

@media (max-width: 767px) {
  .stag8-hero-ground {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }
  .stag8-hero-ground img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .stag8-hero-product {
    left: 50% !important;
    right: auto !important;
    width: min(78vw, 300px) !important;
    max-width: calc(100% - 28px) !important;
    transform: translateX(-50%) !important;
  }
  .stag8-control-product {
    scale: 1 !important;
    translate: 0 0 !important;
  }
  .stag8-formula-index-top,
  .stag8-formula-index-top p {
    font-size: .78rem !important;
    line-height: 1.45 !important;
    letter-spacing: .12em !important;
  }
  .stag8-formula-index-bottom,
  .stag8-formula-index-bottom p,
  .stag8-formula-index-bottom span {
    color: var(--stag-ink) !important;
  }
  .stag8-formula-title .elementor-heading-title,
  .elementor-20 .stag8-formula-title .elementor-heading-title {
    font-size: clamp(2.25rem, 9vw, 2.8rem) !important;
  }
  .stag8-formula-text,
  .stag8-formula-text p {
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }
  .stag8-control-left-visual,
  .stag8-control-product {
    max-width: 100% !important;
    overflow: hidden;
  }
  .stag8-control-left-visual img,
  .stag8-control-product img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* The tablet crop places the transparent formula artwork over the dark next
   section. Give the copy its own paper surface so black text never lands on
   black artwork while the product image remains visible beside it. */
@media (min-width: 768px) and (max-width: 1024px) {
  .stag8-formula-copy {
    align-self: flex-start !important;
    height: auto !important;
    margin-top: 28px !important;
    padding: 28px 26px 30px !important;
    background: rgba(248, 244, 238, .98) !important;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .16);
  }
  .stag8-formula-copy > .e-con-inner {
    height: auto !important;
  }
}

@media (min-width: 768px) {
  .stag8-hero-ground,
  .stag8-hero-product,
  .stag8-control-left-visual,
  .stag8-control-product {
    max-width: 100%;
  }
}

@media (prefers-contrast: more) {
  .stag8-formula-index-top,
  .stag8-formula-index-bottom,
  .stag8-formula-text,
  .stag8-formula-text p,
  .stag8-feature-text,
  .stag8-feature-text p {
    color: #000 !important;
  }
}

/* Editorial pages share the same local type system as the landing page. */
.single-post .stag-article-page,
.archive .stag-archive-page,
.page .stag9000-policy {
  overflow-wrap: anywhere;
  word-break: normal;
}

.single-post .stag9000-article,
.single-post .stag-trust-note,
.single-post .stag-related,
.archive .stag-archive-shell,
.page .stag9000-policy {
  min-width: 0;
}

.single-post .stag9000-article > h1,
.single-post .stag9000-article h2,
.single-post .stag9000-article h3,
.single-post .stag-related > h2,
.single-post .stag-related__card h3,
.archive .stag-archive-title,
.archive .stag-archive-card-title,
.page .stag9000-policy h1,
.page .stag9000-policy h2 {
  font-family: var(--stag-display) !important;
  text-wrap: balance;
}

.single-post .stag9000-article img,
.page .stag9000-policy img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.single-post .stag9000-article pre,
.single-post .stag9000-article code,
.single-post .stag9000-article table,
.page .stag9000-policy pre,
.page .stag9000-policy code,
.page .stag9000-policy table {
  max-width: 100%;
}

.single-post .stag9000-article pre,
.page .stag9000-policy pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.single-post .stag9000-article table,
.page .stag9000-policy table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.single-post .stag-trust-note__sources a,
.single-post .stag-related__card h3 a,
.archive .stag-archive-card-title a,
.page .stag9000-policy a {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .elementor,
  .elementor-section,
  .e-con,
  .e-con-inner,
  .elementor-widget,
  .elementor-widget-container {
    min-width: 0;
  }

  .stag8-hero,
  .stag8-features,
  .stag8-formula,
  .stag8-control,
  .stag8-usage,
  .stag8-cta {
    overflow-x: clip;
  }

  .elementor-20 .elementor-button {
    max-width: 100%;
    white-space: normal;
  }

  .single-post .stag-article-page,
  .archive .stag-archive-page {
    padding-inline: 14px;
  }

  .single-post .stag9000-article > h1,
  .page .stag9000-policy h1 {
    font-size: clamp(2.25rem, 10vw, 3rem);
    line-height: 1.04;
  }

  .single-post .stag9000-article h2,
  .page .stag9000-policy h2 {
    font-size: clamp(1.7rem, 7.8vw, 2.25rem);
    line-height: 1.1;
  }

  .single-post .stag9000-article h3 {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .single-post .stag-trust-note__sources {
    align-items: flex-start;
    flex-direction: column;
  }

  .single-post .stag-trust-note__sources span[aria-hidden="true"] {
    display: none;
  }
}

/* 2026-11-08 - Homepage correction: keep the couple, remove only the blurred overlap, lift left info. */
.elementor-20 .stag8-control-left-visual {
  display: block !important;
}

@media (min-width: 768px) {
  .elementor-20 .stag8-formula-index {
    padding-top: 2% !important;
  }

  .elementor-20 .stag8-formula-index-top,
  .elementor-20 .stag8-formula-index-bottom,
  .elementor-20 .stag8-formula-index-top p,
  .elementor-20 .stag8-formula-index-bottom p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .elementor-20 .stag8-formula-index-top p,
  .elementor-20 .stag8-formula-index-bottom p {
    margin: 0 !important;
  }

  .elementor-20 .stag8-formula-index-top {
    margin-top: 8px !important;
    transform: translateY(-45px);
  }

  .elementor-20 .stag8-formula-index-bottom {
    margin-top: 4px !important;
    transform: translateY(-35px);
  }

  .elementor-20 .stag8-formula-index-bottom::before {
    display: none !important;
  }
}

/* 2026-11-08 - Formula product emphasis and device-safe responsive sizing. */
.elementor-20 .stag8-formula-product-area {
  overflow: visible !important;
}

.elementor-20 .stag8-formula-product {
  position: relative;
  z-index: 7;
  transform-origin: 58% 82%;
  filter: contrast(1.06) saturate(1.03) drop-shadow(0 18px 24px rgba(43, 28, 12, .22));
}

.elementor-20 .stag8-formula-product img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

@media (min-width: 1200px) {
  .elementor-20 .stag8-formula-product {
    width: 112% !important;
    max-width: 760px !important;
    margin-right: -4% !important;
    transform: translate3d(2%, -2%, 0) rotate(-1.6deg) scale(1.06);
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .elementor-20 .stag8-formula-product {
    width: 106% !important;
    max-width: 620px !important;
    margin-right: -2% !important;
    transform: translate3d(1%, -1%, 0) rotate(-1.2deg) scale(1.04);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-20 .stag8-formula-product-area > .e-con-inner {
    justify-content: center !important;
  }

  .elementor-20 .stag8-formula-product {
    width: min(98%, 500px) !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    transform: rotate(-1deg) scale(1.02);
  }
}

@media (max-width: 767px) {
  .elementor-20 .stag8-formula-product-area {
    min-height: clamp(330px, 104vw, 430px) !important;
    overflow: visible !important;
  }

  .elementor-20 .stag8-formula-product-area > .e-con-inner {
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .elementor-20 .stag8-formula-product {
    width: min(92vw, 360px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 auto 8px !important;
    transform: rotate(-.8deg) scale(1.015);
    filter: contrast(1.06) saturate(1.03) drop-shadow(0 12px 18px rgba(43, 28, 12, .2));
  }
}

@media (max-width: 390px) {
  .elementor-20 .stag8-formula-product-area {
    min-height: 340px !important;
  }

  .elementor-20 .stag8-formula-product {
    width: min(92vw, 330px) !important;
  }
}

@media (max-width: 340px) {
  .elementor-20 .stag8-formula-product-area {
    min-height: 315px !important;
  }

  .elementor-20 .stag8-formula-product {
    width: min(90vw, 290px) !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .elementor-20 .stag8-formula-product-area {
    min-height: 300px !important;
  }

  .elementor-20 .stag8-formula-product {
    width: min(55vw, 360px) !important;
  }
}



/* 2026-11-08 - Enlarge the diagonal product while keeping every viewport contained. */
.elementor-20 .stag8-control {
  overflow: hidden !important;
}

.elementor-20 .stag8-control-product {
  z-index: 5 !important;
  transform-origin: 100% 100% !important;
  filter: contrast(1.11) saturate(1.04) drop-shadow(-18px 22px 24px rgba(0, 0, 0, .34));
  will-change: transform;
}

@media (min-width: 1200px) {
  .elementor-20 .stag8-control-product {
    transform: translate3d(-2%, -1%, 0) scale(1.28) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .elementor-20 .stag8-control-product {
    transform: translate3d(-2%, 0, 0) scale(1.18) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-20 .stag8-control-product {
    right: -1% !important;
    transform: translate3d(-2%, 0, 0) scale(1.11) !important;
  }
}

@media (max-width: 767px) {
  .elementor-20 .stag8-control-product {
    right: -2% !important;
    max-width: 46vw !important;
    transform: translate3d(-2%, 0, 0) scale(1.06) !important;
    filter: contrast(1.1) saturate(1.04) drop-shadow(-10px 14px 16px rgba(0, 0, 0, .3));
  }
}

@media (max-width: 390px) {
  .elementor-20 .stag8-control-product {
    max-width: 44vw !important;
    transform: translate3d(-1%, 0, 0) scale(1.03) !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .elementor-20 .stag8-control-product {
    max-width: 34vw !important;
    transform: translate3d(-2%, 0, 0) scale(1.03) !important;
  }
}


/* 2026-11-08 - Anchor the visible diagonal bottle to the lower seam. */
.elementor-20 .stag8-control-product img {
  object-position: 100% 100% !important;
}

@media (min-width: 1200px) {
  .elementor-20 .stag8-control-product {
    right: 0 !important;
    bottom: 0 !important;
    transform: translate3d(-1%, 0, 0) scale(1.38) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .elementor-20 .stag8-control-product {
    right: 0 !important;
    bottom: 0 !important;
    transform: translate3d(-1%, 0, 0) scale(1.26) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-20 .stag8-control-product {
    right: -1% !important;
    bottom: 0 !important;
    transform: translate3d(-1%, 0, 0) scale(1.18) !important;
  }
}

@media (max-width: 767px) {
  .elementor-20 .stag8-control-product {
    right: 0 !important;
    bottom: 0 !important;
    max-width: 50vw !important;
    transform: translate3d(-1%, 0, 0) scale(1.42) !important;
  }
}

@media (max-width: 390px) {
  .elementor-20 .stag8-control-product {
    max-width: 48vw !important;
    transform: translate3d(-1%, 0, 0) scale(1.34) !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .elementor-20 .stag8-control-product {
    max-width: 36vw !important;
    transform: translate3d(-1%, 0, 0) scale(1.14) !important;
  }
}


/* 2026-11-08 - Final phone containment and lower product anchoring. */
@media (max-width: 767px) {
  html, body, .stag-page, .elementor-20 {
    max-width: 100%;
    overflow-x: clip !important;
  }

  .elementor-20 .stag8-features,
  .elementor-20 .stag8-features-inner,
  .elementor-20 .stag8-formula,
  .elementor-20 .stag8-formula-inner,
  .elementor-20 .stag8-formula-copy,
  .elementor-20 .stag8-formula-copy > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .elementor-20 .stag8-features-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .elementor-20 .stag8-feature-item {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .elementor-20 .stag8-formula-copy {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .elementor-20 .stag8-formula-text,
  .elementor-20 .stag8-formula-text .elementor-widget-container,
  .elementor-20 .stag8-formula-text p {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .elementor-20 .stag8-control-product {
    right: 0 !important;
    bottom: 0 !important;
    max-width: 52vw !important;
    transform: translate3d(-1%, 18%, 0) scale(1.50) !important;
  }
}

@media (max-width: 390px) {
  .elementor-20 .stag8-control-product {
    max-width: 50vw !important;
    transform: translate3d(-1%, 18%, 0) scale(1.43) !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .elementor-20 .stag8-control-product {
    max-width: 36vw !important;
    transform: translate3d(-1%, 8%, 0) scale(1.16) !important;
  }
}


/* 2026-11-08 - Set the visible mobile bottle directly on the section seam. */
@media (max-width: 767px) {
  .elementor-20 .stag8-control-product {
    transform: translate3d(-1%, 60%, 0) scale(1.50) !important;
  }
}
@media (max-width: 390px) {
  .elementor-20 .stag8-control-product {
    transform: translate3d(-1%, 60%, 0) scale(1.43) !important;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .elementor-20 .stag8-control-product {
    transform: translate3d(-1%, 32%, 0) scale(1.16) !important;
  }
}