<style>
    .table,
    .td,
    .th {
        
        text-align: left;
    }

    .table {
        
        width: 100%;
    }

    .th,
    .td {
        padding: 0;
    }
</style>

<div style="display:block; width: 100%;">

    <?php foreach ($productos as $row) : ?>

        <h3 style="text-align: center; display:block; width: 100%;font-size:20px;"><?= $row['nombre'] ?></h3>
        <?php if ( count($row['productos'])>0) :  ?>
            <table width="100%" CELLPADDING=0 CELLSPACING=0 style="border:1px solid  #007C7A;"> 
                <thead>
                    <tr style="background-color:#007C7A;">
                        <th style="border-right:1px solid #fff;"></th>
                        <th style="border-right:1px solid #fff;color: white;font-size:16px;padding-top:20px;padding-bottom:20px;text-align: left;padding-left:10px">Descripci&oacute;n</th>
                        <th style="text-align:left;padding-left:10px;" width="20%"><p style="color: white;font-size:16px;">Precio</p></th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($row['productos'] as $pro) :  
                        $i++;
                          if($i % 2 == 0) {
                              $color='rgba(0, 173, 173, 0.25)';
                          }else{
                              $color='rgba(0, 173, 173, 0.10)';
                              
                          }

                    ?>
                        <tr style="">
                            <td style="border-right:none;border-bottom:1px solid #007C7A;text-align: center;width: 100px; max-height: 100px;color:#1A1A1A;"><img style="width: 60px; max-height: 60px;padding:5px;" src="<?= $pro['imagen'] ?>"></td>
                            <td style="background:<?php echo$color;?>;border-bottom:1px solid #007C7A;text-align: left;padding-left:10px;font-size:14px;color:#1A1A1A;"><?= $pro['descripcion'] ?></td>
                            <td style="background:<?php echo$color;?>;border-bottom:1px solid #007C7A;text-align: left;font-size:16px;color:#000041;padding-left:10px;"><?= $pro['tarifa'] ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php endif; ?>
        <?php foreach ($row['subcategorias'] as $row1) : ?>

            <table width="100%"  CELLPADDING=0 CELLSPACING=0  border=0 style="border:1px solid  #007C7A;">
                <thead>
                     <tr style="background:#007C7A;font-size:18px;padding-top:10px;padding-bottom:10px;">
                        <th style="border-bottom:1px solid #fff;"></th>
                        <th style="border-bottom:1px solid #fff;color: #fff;font-size:18px;padding-top:10px;padding-bottom:10px;"><?= $row1['subcategoria'] ?></th>
                        <th style="border-bottom:1px solid #fff;"></th>
                    </tr>
                    <tr style="background: #007C7A;;">
                        <th style="border-right:1px solid #fff;"></th>
                        <th style="border-right:1px solid #fff;color: white;font-size:16px;padding-top:10px;padding-bottom:10px;text-align: left;padding-left:10px;">Descripci&oacute;n</th>
                        <th style="color: white;font-size:16px;padding-top:10px;padding-bottom:10px;text-align: left;padding-left:10px;" width="20%">Precio</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($row1['productos'] as $pro) :  
                          $k++;
                          if($k % 2 == 0) {
                              $color='rgba(0, 173, 173, 0.25)';
                          }else{
                              $color='rgba(0, 173, 173, 0.10)';
                              
                          }
                    
                    ?>
                        <tr style="background:<?php echo$color;?>;">
                            <td style="border-bottom:1px solid #007C7A;text-align: center;width: 100px; max-height: 100px;background:#fff;"><img style="width: 60px; max-height: 60px;padding:10px;" src="<?= $pro['imagen'] ?>"></td>
                            <td style="border-bottom:1px solid #007C7A;text-align: left; padding-left:10px;font-size:14px;color:#000;"><?= $pro['descripcion'] ?></td>
                            <td style="border-bottom:1px solid #007C7A;text-align: left;font-size:16px;font-weinght:600;color:#000;padding-left:10px;"><?= $pro['tarifa'] ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>

        <?php endforeach; ?>
        <br><br>

    <?php endforeach; ?>

</div>
