/**
 * MaxOut Nutrition brand layer over the ported Supreme base.
 * Defines the full --sa-* design-token palette (the original theme got these
 * from its companion plugin) mapped to MaxOut brand colors, plus overrides.
 */

:root {
  /* MaxOut palette: navy / blue / lime on white. */
  --sa-bg: #ffffff;
  --sa-bg-alt: #f3f7fa;
  --sa-bg-card: #ffffff;
  --sa-bg-elevated: #ffffff;
  --sa-heading: #07152b;
  --sa-text: #17243a;
  --sa-text-muted: #617085;
  --sa-border: #dae3ea;
  --sa-border-strong: #b9c9d6;
  --sa-accent: #b9f227;          /* MaxOut lime */
  --sa-accent-hover: #a5de1e;
  --sa-accent-ink: #07152b;
  --sa-action: #0b2444;          /* MaxOut navy */
  --sa-action-hover: #1267e9;    /* MaxOut blue */
  --sa-action-ink: #ffffff;
  --sa-danger: #c0392b;
  --sa-focus: #1267e9;
  --sa-input-border: #dae3ea;

  --sa-btn-primary-bg: var(--sa-action);
  --sa-btn-primary-bg-hover: var(--sa-action-hover);
  --sa-btn-primary-ink: #ffffff;
  --sa-btn-secondary-bg: transparent;
  --sa-btn-secondary-border: var(--sa-border-strong);
  --sa-btn-secondary-hover-border: var(--sa-action);
  --sa-btn-secondary-ink: var(--sa-heading);

  --sa-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sa-font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --sa-fs-sm: .8125rem;
  --sa-fs-base: 1rem;
  --sa-fs-2xl: 1.5rem;
  --sa-fs-3xl: clamp(1.75rem, 4vw, 2.5rem);
  --sa-lh-tight: 1.15;
  --sa-lh-snug: 1.35;
  --sa-lh-relaxed: 1.65;
  --sa-tracking-tight: -0.02em;

  --sa-max: 1240px;
  --sa-header-h: 64px;
  --sa-radius: 10px;
  --sa-radius-lg: 14px;
  --sa-btn-h: 44px;
  --sa-btn-h-lg: 52px;
  --sa-btn-px: 1.25rem;
  --sa-btn-radius: 10px;
  --sa-btn-fs: .9rem;
  --sa-btn-fw: 600;
  --sa-input-h: 44px;
  --sa-input-radius: 10px;
  --sa-gap: 1rem;
}

/* Accent text on lime must stay readable. */
.sa-mega__col h4 { color: var(--sa-action); }

/* Research-use strip carried over from the old MaxOut header. */
.sa-rsbar {
  background: var(--sa-bg-alt);
  color: var(--sa-text-muted);
  font-size: .78rem;
  text-align: center;
  padding: .45rem 1rem;
  border-bottom: 1px solid var(--sa-border);
}
.sa-rsbar strong { color: var(--sa-heading); }

/* Logo sizing: MaxOut mark is ~2.5:1, not a wide wordmark. */
.sa-header .sa-logo__img { max-height: 56px; width: auto; }
@media (max-width: 767px) {
  .sa-header .sa-logo__img { max-height: 40px; width: auto; }
}
.sa-foot__logo img, .sa-foot img[src*="maxout-logo"] { height: 64px; width: auto; }

/* Category tiles without an image keep a branded fallback. */
.sa-cat-tile__media:empty,
.sa-cat-tile__media:not(:has(img)) {
  background: linear-gradient(135deg, var(--sa-action) 0%, var(--sa-action-hover) 100%);
}

/* Mobile filter trigger (Supreme's came from its plugin). */
.sa-market__filterbar { display: none; }
@media (max-width: 900px) {
  .sa-market__filterbar {
    display: block;
    position: sticky;
    top: var(--sa-header-h);
    z-index: 30;
    padding: .5rem 1rem;
    background: var(--sa-bg);
    border-bottom: 1px solid var(--sa-border);
  }
  .sa-market__filterbtn { width: 100%; }
}

/* Mobile fixes round 2 (Stage 1.5). */
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 700px) {
  /* Specificity must beat editorial.part3.css (.sa-rsbar__in nowrap), which loads after this file. */
  .sa-rsbar .sa-rsbar__in {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
    justify-content: center;
    text-align: center;
    row-gap: 1px;
    padding: 4px 8px;
    line-height: 1.35;
  }
}

/* Wishlist button (maxout-core) matches theme outline buttons. */
.mx-wishlist.mx-button--outline,
.single-product .mx-wishlist.mx-button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem 1.15rem;
  border: 1.5px solid var(--sa-heading, #0f1b2d);
  border-radius: 10px;
  background: #fff;
  color: var(--sa-heading, #0f1b2d);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.mx-wishlist.mx-button--outline:hover,
.single-product .mx-wishlist.mx-button:hover {
  background: var(--sa-heading, #0f1b2d);
  color: #fff;
}
.mx-wishlist.mx-button--outline.is-active,
.mx-wishlist.mx-button--outline[aria-pressed="true"] {
  background: var(--sa-action, #1d4ed8);
  border-color: var(--sa-action, #1d4ed8);
  color: #fff;
}

/* Variation label wrap: "Concentrations" split its final "s" onto its own line. */
.single-product .variations th.label,
.single-product .variations .label { white-space: nowrap; }