/** Shopify CDN: Minification failed

Line 87:35 Unexpected "'s exact CSS class on the live product page first.Found it — the sticky cart is the **SATCB app** (Sticky Add To Cart Bar). The button class is `.satcb_btn`. Let me check its current styles.Got it. The button class is `.app-main-button` and it'"
Line 103:0 Unexpected "`"

**/
/* === Elyon Sovereign Host perf-override (2026-04-15) ===
   Reserves space for hero/banner images, enables content-visibility on below-fold sections,
   forces proper image rendering to cut CLS. Loaded before base.css so base CSS can still win specificity. */

/* Only apply aspect-reserve to images inside known media containers so the header logo + icons are never affected */
.banner img:not([width]):not([height]),
.image-banner img:not([width]):not([height]),
.card__media img:not([width]):not([height]),
.card-wrapper .media img:not([width]):not([height]),
.product__media img:not([width]):not([height]) {
  height: auto;
  max-width: 100%;
}
/* Explicitly exclude header logo from any aspect override */
.g-header-logo img { max-width: 106px !important; height: auto !important; aspect-ratio: auto !important; }

/* Hero / image-banner containers - reserve at least a 16:9 aspect so LCP image slot is known */
.banner, .image-banner, .hero, [class*="hero-"], .tcc-home-image-reviews, section[class*="image-banner"] {
  contain: layout style;
}
.banner__media, .banner__media-image, .image-banner__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
@media (max-width: 749px) {
  .banner__media, .banner__media-image, .image-banner__media {
    aspect-ratio: 4 / 5;
  }
}

/* Image inside banner media container fills frame without shifting */
.banner__media img, .image-banner__media img, .banner__media-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Product card images reserve square aspect - prevents jump when image loads */
.card__media, .product-card__image, .card-wrapper .media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.card__media img, .card-wrapper .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content-visibility on below-fold sections - skip paint until scrolled near */
.shopify-section:nth-of-type(n+4) {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/* Font-display swap fallback - prevents invisible text during font load.
   Shopify's default font_face may use 'block'; we force swap via the fallback chain. */
body, button, input, textarea, select {
  font-display: swap;
}

/* Force loading indicator / skeleton state not to shift the page */
img[loading="lazy"] {
    height: 17px;
}

/* Kill dimensionless iframes that cause CLS (review widgets, chat, etc.) */
iframe:not([width]):not([height]):not([style*="height"]) {
  min-height: 1px;
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Dynamic banner / announcement strip - reserve fixed height so it doesn't push content on load */
.announcement-bar, .free-shipping-bar, [class*="announcement"] {
  min-height: 36px;
}

/* Preconnect hints via CSS not possible - added via theme.liquid <link> instead */

Let me check the sticky cart button's exact CSS class on the live product page first.Found it — the sticky cart is the **SATCB app** (Sticky Add To Cart Bar). The button class is `.satcb_btn`. Let me check its current styles.Got it. The button class is `.app-main-button` and it's currently `background: black, color: white`. The fix is one CSS rule.

---

**Go to:** Shopify Admin → Online Store → Themes → **14/04 - TCC OPT** → Edit theme → `assets/elyon-perf-override.css`

**Add this at the bottom of the file:**

```css
/* Sticky ATC bar — white button with black text */
#satcb_bar .app-main-button,
#satcb_bar .buy-button-product-page {
  background: #ffffff !important;
  color: #1A1410 !important;
  border-color: #1A1410 !important;
}
```

That's it — one file, 6 lines at the bottom. The `#satcb_bar` parent ensures it only targets the sticky bar and doesn't accidentally affect any other button on the page.