/* SJ Fitness brand tokens.
   base.css is the Variety Discounted design system, copied byte-for-byte.
   Everything brand-specific lives here, so base.css stays diffable against
   D:\VarietyDiscounted\theme-live\assets\base.css.

   In the Shopify theme these values came from Liquid settings. On Cloudflare
   there is no Liquid, so they are declared here. */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&family=Barlow+Condensed:wght@600;700&display=swap');

:root {
  /* Type: same families as the source theme */
  --font-body: 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body-weight: 400;
  --font-body-weight-medium: 600;
  --font-body-weight-bold: 700;
  --font-heading: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-heading-weight: 700;
  --heading-scale: 1;

  /* Palette: athletic, not the VD discount red/yellow.
     To make this a visual twin of varietydiscounted.com instead, set
     --c-primary #D5212E, --c-accent #FFD31A, --c-accent-ink #16130F. */
  --c-ink: #14161A;
  --c-bg: #FFFFFF;
  --c-surface: #F2F3F5;
  --c-border: #D8DBE0;
  --c-primary: #14161A;
  --c-primary-ink: #FFFFFF;
  --c-accent: #D7FF3E;
  --c-accent-ink: #14161A;
  --c-sale: #C8102E;
  --c-good: #16794A;

  --radius: 6px;
  --page-width: 1440px;
  --logo-width: 200px;
}

/* Text-led hero.
   The source theme fills .hero__media with a price-tag illustration, which
   belongs to a discount brand, not this one. Until real product photography
   arrives, the hero runs full width as type. Drop an <img class="hero__img">
   into a .hero__media block and remove .hero--text-only to switch back to the
   two-column layout. */
.hero--text-only .hero__content { justify-items: start; }

@media (min-width: 990px) {
  .hero--text-only .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero--text-only .hero__heading { max-width: 20ch; }
  .hero--text-only .hero__text { font-size: 1.15rem; }
}

/* The source theme sizes the wordmark from Liquid settings. */
.wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
}

.wordmark__tag {
  background: var(--c-ink);
  color: var(--c-bg);
  padding: 0.1em 0.3em 0.14em;
  border-radius: 3px;
}

.wordmark__rest { color: var(--c-ink); }

.wordmark--footer { font-size: 24px; }
.wordmark--footer .wordmark__tag { background: var(--c-bg); color: var(--c-ink); }
.wordmark--footer .wordmark__rest { color: var(--c-bg); }

@media (min-width: 750px) {
  .wordmark { font-size: 34px; }
}