/* =========================================================================
   FITRADE — 02 · ALAPOK, a .ftr konténeren BELÜL

   Miért van mindenre `.ftr` előtag:
   a prototípus önálló oldal volt, ott a `body`-ra és a bare elemekre
   írt szabályok veszélytelenek. Egy élő WooCommerce-oldalon viszont egy
   globális `ul { list-style: none }` vagy `a { text-decoration: none }`
   szétverné a kosarat, a pénztárt és az admin sávot.

   Ezért: minden FITRADE-szekció külső konténere kap egy `ftr` osztályt,
   és minden itteni szabály azon belül érvényes. A téma aktiválása így
   önmagában semmit nem változtat a meglévő oldalakon.

       <div class="ftr">
         <section class="color-background-4"> … </section>
       </div>
   ========================================================================= */

/* --- A színsémák alkalmazása (a változókat a 01-tokens.css adja) --------- */
.ftr,
.ftr .color-background-1,
.ftr .color-background-2,
.ftr .color-background-3,
.ftr .color-background-4 {
  color: rgb(var(--color-foreground));
  background: rgb(var(--color-background));
}

/* -------------------------------------------------------------------------
   FONT-SMOOTHING — mérés alapján a legnagyobb egyetlen nyereség.
   A Zap globálisan `antialiased`-et tesz a body-ra; macOS-en ez vékonyít.
   Sötét háttéren ez a betűszár tömör magjának 11-22 százalékpontjába kerül
   (lásd 07-torzsszoveg-font-meres.md) — vagyis többet ront, mint amennyit
   egy teljes súlylépcső javítana. Ezért felületenként állítjuk.
   ------------------------------------------------------------------------- */
.ftr .color-background-1,
.ftr .color-background-2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ftr .color-background-3,
.ftr .color-background-4 {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* --- Tipográfia a FITRADE felületeken ------------------------------------ */
.ftr {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
}
:where(.ftr) h1, :where(.ftr) h2, :where(.ftr) h3,
:where(.ftr) h4, :where(.ftr) h5, :where(.ftr) h6 {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--font-heading-letter-spacing);
  line-height: var(--font-heading-line-height);
  text-transform: var(--font-heading-text-transform);
  word-break: break-word;
}

/* Light súly nagy szövegre — a méret-küszöbök mérésből.
   ⚠️ A Light (300) jelenleg NINCS a Typekit kitben — be kell válogatni,
   addig a böngésző a 400-at szintetizálja vagy azt használja. */
.ftr .ftr-body-xl,
.ftr .ftr-body-large { font-weight: var(--font-body-light-weight, 300); }
.ftr .color-background-3 .ftr-body-large,
.ftr .color-background-4 .ftr-body-large { font-weight: 400; }

/* -------------------------------------------------------------------------
   A .word szavankénti belépéshez tartozó alapállapot.
   JS nélkül (vagy ha a JS hibázik) a szöveg LÁTHATÓ marad — ezért az
   opacity:0 csak akkor kapcsol be, ha a JS kitette a `ftr-js` osztályt.
   ------------------------------------------------------------------------- */
.ftr-js .ftr .word,
.ftr-js .ftr .reveal-item { opacity: 0; transform: translateY(20px); }
.ftr .is-revealed .word {
  animation: ftr-fade-in .45s cubic-bezier(.5, 0, 0, 1) forwards;
  animation-delay: calc(var(--word-index, 0) * .09s);
}
.ftr .is-revealed .reveal-item {
  animation: ftr-fade-in .45s cubic-bezier(.5, 0, 0, 1) forwards;
  animation-delay: calc(.18s + var(--item-index, 0) * .09s);
}
.ftr .word { display: inline-block; white-space: nowrap; }
@keyframes ftr-fade-in { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .ftr-js .ftr .word,
  .ftr-js .ftr .reveal-item {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* =========================================================================
   TERMÉKVONAL-JELÖLŐK
   NEW ERA (500 ml) · ORIGIN LINE (1 L, sportkupak) · SHOTOK (külön kategória)
   Ezek a shop-rácsban és a termékoldalon is kellenek, ezért NEM `.ftr`-hez
   kötöttek — viszont saját, ütközésmentes osztálynévvel.
   ========================================================================= */
.line-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--font-badge-card-family);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--border-radius-badge);
}
.line-badge--new-era { background: #000; color: #e49a00; }   /* 8,92:1 ✓ */
.line-badge--origin  { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px #000; }
.line-badge--size    { background: rgba(0, 0, 0, .08); color: #000; }
.line-badge--shot    { background: rgba(0, 0, 0, .08); color: #000; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35); }