:root{
  --c-main:#ab2828;      /* hlavní */
  --c-black:#000000;     /* text */
  --c-white:#ffffff;     /* bílá */
  --c-hover:#756653;     /* doplňková/hover */
  --c-gray:#BDBEC0;      /* šedý akcent */
  --c-bg:#F7F8F8;        /* světle šedé pozadí sekcí */
}

/* ---------- ZÁKLADNÍ SEKCE (šedé pozadí) ---------- */
.tro-prod{background:var(--c-bg);padding:40px 0}

/* ---------- ŘÁDKY (2 sloupce) ---------- */
.tro-row{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:center;
  max-width:1200px;
  margin:0 auto 72px;
  padding:0 20px;
}

/* Média (obrázek/video) bez bílého pozadí */
.tro-media{overflow:hidden;background:transparent}
.tro-media img,.tro-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease
}
.tro-media:hover img{transform:scale(1.02)}

/* Textový obsah */
.tro-body{color:var(--c-black)}
.tro-eyebrow{
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-main);margin-bottom:10px
}
.tro-title{margin:0 0 12px;font-weight:800;font-size:30px;line-height:1.2}
.tro-desc{margin:0 0 18px;font-size:16px;line-height:1.65;color:#222}
.tro-list{margin:0;padding:0;list-style:none}
.tro-list li{position:relative;padding-left:20px;margin:8px 0}
.tro-list li:before{
  content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;background:var(--c-main)
}

/* ---------- 2. ŘÁDEK: SLOŽENÍ | VÝŽIVOVÉ ÚDAJE ---------- */
.tro-row--tables{grid-template-columns:1fr 1fr;align-items:flex-start}
.tro-card{
  background:var(--c-white);
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  overflow:hidden
}
.tro-card h3{
  margin:0;padding:14px 18px;font-weight:800;color:var(--c-main);
  border-bottom:1px solid #eee;background:var(--c-white)
}
.tro-table{width:100%;border-collapse:collapse}
.tro-table td{
  padding:10px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid #f2f2f2
}
.tro-table tr:last-child td{border-bottom:none}
.tro-table td:first-child{font-weight:600;width:40%}
.tro-note{padding:10px 18px;font-size:14px;color:#333}

/* ---------- 3. ŘÁDEK: CELOŠÍŘKOVÁ BÍLÁ SEKCE ---------- */
/* Využijte .tro-section-white kolem 3. řádku, aby od něj dolů bylo bílo */
.tro-section-white{background:var(--c-white);padding:60px 0;margin-top:80px}
.tro-section-white .tro-row{background:var(--c-white);margin-bottom:0;padding:0 20px}

/* ---------- TLAČÍTKO (volitelné) ---------- */
.tro-btn{
  display:inline-block;padding:10px 18px;background:var(--c-main);
  color:var(--c-white);text-decoration:none;font-weight:700
}
.tro-btn:hover{background:var(--c-hover)}

/* ---------- RESPONZIVITA ---------- */
@media (max-width:1024px){
  .tro-row{gap:28px}
  .tro-title{font-size:26px}
}
@media (max-width:820px){
  .tro-row{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
  .tro-row--tables{grid-template-columns:1fr}
  .tro-section-white{padding:40px 0}
}
@media (max-width:460px){
  .tro-title{font-size:22px}
  .tro-desc{font-size:15px}
}