/* ======================================================================
   bloky-test-2.css  —  REDESIGN sandbox (minimalistická verze)
   ----------------------------------------------------------------------
   Aktivuje se wrapperem `.fn-test-2`. Nezasahuje do ostrého ani test 1.

   Filozofie:
     • bílá / #fafafa pozadí, žádné color-blocky
     • jediný akcent: tlumená zelená #2d5016
     • tenké linky 1px #e5e5e5 místo barevných ploch
     • light/regular typografie (300–400)
     • emoji v HTML jsou stripnuté → kde dává smysl, přidaná SVG line ikona
       přes mask-image (monochrome, dědí accent přes background-color)
====================================================================== */


/* ======================================================================
   ŠTÍTEK SANDBOX (vizuální indikátor že koukáš na redesign)
====================================================================== */

.fn-test-2 {
  position: relative;
  outline: 2px dashed rgba(124, 58, 237, 0.55);
  outline-offset: 6px;
  border-radius: 4px;
  padding-top: 8px;

  /* design tokens */
  --accent: #2d5016;
  --text: #1a1a1a;
  --text-soft: #4a4a4a;
  --text-muted: #8a8a8a;
  --border: #e5e5e5;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --warn: #b45309;
  --danger: #b91c1c;
}

.fn-test-2::before {
  content: "🎨 REDESIGN sandbox";
  position: sticky;
  top: 12px;
  z-index: 50;
  display: inline-block;
  margin: 0 0 12px 12px;
  padding: 6px 14px;
  background: #7c3aed;
  color: #fff;
  font-family: 'Dosis', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


/* ======================================================================
   TYPOGRAFIE
====================================================================== */

.fn-test-2 .fn { gap: 24px; }

.fn-test-2 .fn h2 {
  color: var(--text);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin: 0 0 18px;
}

.fn-test-2 .fn p {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.7;
}

.fn-test-2 .fn-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin: 0 0 14px;
}


/* ======================================================================
   ROW (image + text) — bílá karta s tenkou linkou
====================================================================== */

.fn-test-2 .fn-row,
.fn-test-2 .fn-bg-1,
.fn-test-2 .fn-bg-2,
.fn-test-2 .fn-bg-3,
.fn-test-2 .fn-bg-4,
.fn-test-2 .fn-bg-5 {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 48px;
  gap: 48px;
}

.fn-test-2 .fn-row > img {
  border-radius: 4px;
  width: 42%;
}


/* ======================================================================
   SVG IKONY (přes mask-image, dědí accent přes background-color)
   Helper utility class .fn-test-2 [data-icon] — ale primárně přes
   pseudo-elementy v listech níž.
====================================================================== */

/* --- Checklist (✓) — tenká line check SVG --- */
.fn-test-2 .fn-checks li {
  margin-bottom: 14px;
  color: var(--text-soft);
}
.fn-test-2 .fn-checks li::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
  margin-top: 4px;
  font-size: 0;
}

/* --- Arrow list (→) — line arrow SVG --- */
.fn-test-2 .fn-arrows li {
  margin-bottom: 14px;
  color: var(--text-soft);
}
.fn-test-2 .fn-arrows li::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") no-repeat center / contain;
  margin-top: 3px;
  font-size: 0;
}

/* --- Bullet list (•) — malá CSS tečka --- */
.fn-test-2 .fn-bullets li {
  margin-bottom: 12px;
  color: var(--text-soft);
}
.fn-test-2 .fn-bullets li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  margin-top: 9px;
  font-size: 0;
}


/* ======================================================================
   STEPS (číslované) — tenké kruhy s číslem v accentu
====================================================================== */

.fn-test-2 .fn-steps li::before {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 500;
  width: 30px;
  height: 30px;
  font-size: 13px;
}
.fn-test-2 .fn-steps li p {
  color: var(--text-soft);
  padding-top: 4px;
}


/* ======================================================================
   INGREDIENCE — leaf SVG ikona vlevo
====================================================================== */

.fn-test-2 .fn-ingredient {
  position: relative;
  padding-left: 26px;
  margin-bottom: 16px;
}
.fn-test-2 .fn-ingredient::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.96c1.4 9.3-3.36 15.55-8.2 17.04Z'/><path d='M2 21c0-3 1.85-5.36 5.08-6'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.96c1.4 9.3-3.36 15.55-8.2 17.04Z'/><path d='M2 21c0-3 1.85-5.36 5.08-6'/></svg>") no-repeat center / contain;
}
.fn-test-2 .fn-ingredient-name {
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 2px;
}
.fn-test-2 .fn-ingredient-desc {
  color: var(--text-soft);
}


/* ======================================================================
   HERO — flat sekce
====================================================================== */

.fn-test-2 .fn-hero {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 64px 40px;
}
.fn-test-2 .fn-hero h2 {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.5px;
}
.fn-test-2 .fn-hero p {
  color: var(--text-soft);
}

.fn-test-2 .fn-badges span {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-weight: 500;
  font-size: 13px;
  padding: 6px 16px;
}


/* ======================================================================
   TABULKA — bez color blocků, jen řádky
====================================================================== */

.fn-test-2 .fn-table {
  border-radius: 0;
  overflow: visible;
}
.fn-test-2 .fn-table th {
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--text);
  padding: 12px 0;
}
.fn-test-2 .fn-table tbody td,
.fn-test-2 .fn-table tbody tr:nth-child(odd) td,
.fn-test-2 .fn-table tbody tr:nth-child(even) td {
  background: transparent;
  border-bottom: 1px solid var(--border);
  color: var(--text-soft);
  padding: 12px 0;
  font-weight: 400;
}
.fn-test-2 .fn-table tbody td:last-child {
  color: var(--text);
  font-weight: 500;
}
.fn-test-2 .fn-table tr.fn-sub td:first-child {
  padding-left: 16px;
  color: var(--text-muted);
  font-size: 13px;
}


/* ======================================================================
   TAGS — outline pilulky
====================================================================== */

.fn-test-2 .fn-tags span {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-weight: 500;
  font-size: 12px;
  padding: 4px 12px;
}


/* ======================================================================
   BENEFITS — bílá karta s linkou (bez levého akcent borderu)
====================================================================== */

.fn-test-2 .fn-benefits { gap: 16px; }
.fn-test-2 .fn-benefit {
  background: transparent;
  border: 1px solid var(--border);
  border-left-width: 1px;
  border-radius: 4px;
  padding: 20px 22px;
}
.fn-test-2 .fn-benefit-name {
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.2px;
}
.fn-test-2 .fn-benefit-desc {
  color: var(--text-soft);
}


/* ======================================================================
   INFO GRIDY (Výrobce, Skladování, …) — flat
====================================================================== */

.fn-test-2 .fn-info,
.fn-test-2 .fn-info--alt,
.fn-test-2 .fn-info--light {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px;
}
.fn-test-2 .fn-info-grid { gap: 16px; }

.fn-test-2 .fn-info-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left-width: 1px;
  border-radius: 4px;
  padding: 20px 22px;
}
.fn-test-2 .fn-info-card .fn-eyebrow {
  color: var(--text-muted);
  margin-bottom: 8px;
}
.fn-test-2 .fn-info-card p {
  color: var(--text-soft);
  font-size: 14px;
}

.fn-test-2 .fn-mfg-name {
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -0.5px;
  color: var(--text);
}


/* ======================================================================
   NOTE (INCI box) — bez color blocku
====================================================================== */

.fn-test-2 .fn-note {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left-width: 1px;
  border-radius: 4px;
  padding: 24px;
}
.fn-test-2 .fn-note p {
  color: var(--text-soft);
  font-size: 14px;
}


/* ======================================================================
   WARN (alergeny) — outline + warning SVG před labelem
====================================================================== */

.fn-test-2 .fn-warn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 2px solid var(--warn);
  border-radius: 4px;
  padding: 24px 28px;
}
.fn-test-2 .fn-warn .fn-eyebrow {
  color: var(--warn);
  margin-bottom: 16px;
}
.fn-test-2 .fn-warn-label {
  color: var(--warn);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.fn-test-2 .fn-warn-label::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--warn);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>") no-repeat center / contain;
  display: inline-block;
  flex-shrink: 0;
}

.fn-test-2 .fn-tag-danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-weight: 500;
  font-size: 12px;
  padding: 3px 10px;
}
.fn-test-2 .fn-tag-warn {
  background: transparent;
  border: 1px solid var(--warn);
  color: var(--warn);
  font-weight: 500;
  font-size: 12px;
  padding: 3px 10px;
}


/* ======================================================================
   CERTIFIKÁTY
====================================================================== */

.fn-test-2 .fn-certs {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px;
}
.fn-test-2 .fn-cert {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 18px;
  letter-spacing: 0.2px;
}