@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700;800&family=Roboto:wght@400;500;700&display=swap");

/* ==========================================================================
   Mondo override layer — load LAST on every page.
   Surgical restyle of minified Next.js snapshots. Never rebuild the markup.
   Scope notes:
     - product pages carry  body.product-detail
     - catalog page carries body.catalog-page
     - font-family is NEVER set with !important, and never on
       [class*="icon"] / [class^="sunmi-"] / .anticon selectors.
   ========================================================================== */

:root {
  --mondo-navy: #021827;
  --mondo-navy-2: #062A42;
  --mondo-offwhite: #F5F5F5;
  --mondo-teal: #2BC6C6;
  --mondo-teal-2: #10CFC9;
  --mondo-grey: #BBBBBB;
  --mondo-border: #D8DDE4;
  --mondo-white: #FFFFFF;

  --mondo-font-head: "Raleway", "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  --mondo-font-body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --mondo-topbar-h: 56px;
  --mondo-pill: 999px;

  /* catalog.css consumes this token, so redefining it retires #ff5a1f
     without editing catalog.css itself. */
  --catalog-orange: #2BC6C6;
}

/* --------------------------------------------------------------------------
   1. Body typography
   Plain body-level rule; the two body-class variants exist only because
   catalog.css / site.css already declare font-family at that specificity.
   -------------------------------------------------------------------------- */

body,
body.catalog-page,
body.product-detail {
  font-family: var(--mondo-font-body);
}

/* --------------------------------------------------------------------------
   2. Mondo top brand bar
   Static (non-fixed) so it never covers baked hero imagery.
   -------------------------------------------------------------------------- */

.mondo-topbar {
  position: relative;
  z-index: 9995;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  width: 100%;
  min-height: var(--mondo-topbar-h);
  margin: 0;
  padding: 8px clamp(16px, 4vw, 48px);
  color: var(--mondo-offwhite);
  background: var(--mondo-navy);
  font-family: var(--mondo-font-body);
  line-height: 1.2;
  box-sizing: border-box;
}

.mondo-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--mondo-offwhite);
  text-decoration: none;
}

.mondo-topbar__logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}

.mondo-topbar__brand-text {
  font-family: var(--mondo-font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mondo-topbar__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin-left: auto;
}

.mondo-topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 4px;
  color: var(--mondo-offwhite);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}

.mondo-topbar__brand:hover,
.mondo-topbar__brand:focus-visible,
.mondo-topbar__link:hover,
.mondo-topbar__link:focus-visible {
  color: var(--mondo-teal);
  outline: none;
}

.mondo-topbar__brand:focus-visible,
.mondo-topbar__link:focus-visible {
  outline: 2px solid var(--mondo-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 560px) {
  .mondo-topbar {
    padding: 8px 16px;
    gap: 6px 12px;
  }
  .mondo-topbar__logo { height: 22px; }
  .mondo-topbar__brand-text { font-size: 14px; }
  .mondo-topbar__link { font-size: 13px; min-height: 30px; }
}

/* --------------------------------------------------------------------------
   3. Existing product-page nav bar (site.css .detail-header) -> Mondo navy
   Sits directly under .mondo-topbar so the two read as one header block.
   -------------------------------------------------------------------------- */

body.product-detail .detail-header {
  background: var(--mondo-navy);
}

body.product-detail .detail-header__primary,
body.product-detail .detail-header__product-bar {
  border-bottom-color: rgba(43, 198, 198, 0.28);
}

body.product-detail .detail-header__wordmark {
  font-family: var(--mondo-font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mondo-offwhite);
}

body.product-detail .detail-header__wordmark:hover,
body.product-detail .detail-header__wordmark:focus-visible {
  color: var(--mondo-teal);
  outline: none;
}

/* was #f26a2c */
body.product-detail .detail-header__nav-item--active {
  color: var(--mondo-teal);
}

body.product-detail .detail-header__nav-item:hover,
body.product-detail .detail-header__nav-item:focus-visible {
  color: var(--mondo-teal);
}

/* --------------------------------------------------------------------------
   4. Headings -> Raleway
   Selectors grounded in observed markup:
     cpad      -> h1/h2/h3, pre[class*="title"], div/span *_title__*
     d3-mini   -> span.NewSpecScreen_title__*, span.NewSpecScreen_spec-title__*
     catalog   -> .catalog-carousel__title, .catalog-wordmark, *_name__*
   No !important (verified: zero inline font-family in any page).
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mondo-font-head);
  letter-spacing: -0.015em;
}

body.product-detail h1,
body.product-detail h2,
body.product-detail h3,
body.product-detail h4,
body.product-detail h5,
body.product-detail h6,
body.product-detail pre[class*="title"],
body.product-detail pre[class*="-title"],
body.product-detail [class*="_title__"],
body.product-detail [class*="spec-title"],
body.product-detail [class*="_name__"] {
  font-family: var(--mondo-font-head);
  letter-spacing: -0.012em;
}

body.catalog-page .catalog-wordmark,
body.catalog-page .catalog-carousel__title,
body.catalog-page .catalog-carousel__eyebrow,
body.catalog-page [class*="_name__"] {
  font-family: var(--mondo-font-head);
  letter-spacing: -0.018em;
}

/* --------------------------------------------------------------------------
   5. Teal accent
   -------------------------------------------------------------------------- */

::selection {
  color: var(--mondo-navy);
  background: var(--mondo-teal);
}

::-moz-selection {
  color: var(--mondo-navy);
  background: var(--mondo-teal);
}

:focus-visible {
  outline-color: var(--mondo-teal);
}

/* Catalog nav + carousel accents (index page) */
body.catalog-page .catalog-product-link:first-child { color: var(--mondo-teal); }
body.catalog-page .catalog-carousel__dot.is-active { background: var(--mondo-teal); }

@media (hover: hover) {
  body.catalog-page .catalog-product-link:hover { color: var(--mondo-teal); }
}

/* CTA / pill buttons found in the real markup:
     site.css   -> .detail-header__all-products
     catalog    -> .catalog-carousel__product-link
     cpad / Bg  -> *replay-button__* , *replay-btn__*                          */

body.product-detail .detail-header__all-products,
body.catalog-page .catalog-carousel__product-link,
body.product-detail [class*="replay-button__"],
body.product-detail [class*="replay-btn__"] {
  border-radius: var(--mondo-pill);
  border-color: var(--mondo-teal);
  color: var(--mondo-white);
  background: var(--mondo-teal);
  font-weight: 500;
}

body.product-detail .detail-header__all-products:hover,
body.product-detail .detail-header__all-products:focus-visible,
body.catalog-page .catalog-carousel__product-link:hover,
body.catalog-page .catalog-carousel__product-link:focus-visible,
body.product-detail [class*="replay-button__"]:hover,
body.product-detail [class*="replay-btn__"]:hover {
  border-color: var(--mondo-teal-2);
  color: var(--mondo-navy);
  background: var(--mondo-teal-2);
  outline: none;
}

/* --------------------------------------------------------------------------
   6. Orange safety net
   The per-page sweep rewrites the hex values directly; these rules only catch
   anything an applier misses. Colour properties only — never font-family.
   -------------------------------------------------------------------------- */

[style*="#FF6000" i] {
  background-image: linear-gradient(180deg, var(--mondo-teal-2) 0%, var(--mondo-teal) 100%) !important;
}

[style*="rgb(255, 96, 0)" i],
[style*="rgb(255,96,0)" i] {
  color: var(--mondo-teal) !important;
}

/* Spec-tab ink bar / active tab (antd + sm-ow-tabs) — verified orange on
   d3-mini before the hashed-CSS sweep runs. Colour properties only. */
body.product-detail [class*="tabs-ink-bar"] {
  background: var(--mondo-teal);
}

body.product-detail [class*="tabs-tab-active"] [class*="tabs-tab-btn"],
body.product-detail [class*="tabs-tab"]:hover [class*="tabs-tab-btn"] {
  color: var(--mondo-teal);
}

@media (prefers-reduced-motion: reduce) {
  .mondo-topbar__link,
  .mondo-topbar__brand { transition: none; }
}