From 4bd3da085f60dbf23e23d5c617041bfce5f1861f Mon Sep 17 00:00:00 2001
From: maksim <maksim@good-production.ru>
Date: Wed, 11 Jun 2025 01:10:27 +0300
Subject: [PATCH] =?UTF-8?q?Maks=20|=20wip:=20=D0=BD=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D1=8F=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D0=B0=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=A0=D0=95=D0=9A=D0=9E=D0=9C=D0=95=D0=9D=D0=94?=
 =?UTF-8?q?=D0=90=D0=A6=D0=98=D0=98=20=D0=9F=D0=9E=20=D0=9A=D0=9E=D0=A0?=
 =?UTF-8?q?=D0=9C=D0=9B=D0=95=D0=9D=D0=98=D0=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/css/gp-style-desktop.css           |   8 ++
 .../single-product/component-template.twig    | 122 +++++++++++++++---
 2 files changed, 110 insertions(+), 20 deletions(-)

diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css
index a48707c..8900568 100644
--- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css
+++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css
@@ -1147,11 +1147,19 @@ main{
   opacity: .6;
 }
 
+
+/* End | Toggle */
+
+
 .radio-button{
 }
 .radio-button__input{
   display: none;
 }
+
+
+
+
 /* detail */
 
 /* gallery */
diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig b/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig
index 07e40e9..e765802 100644
--- a/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig
+++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig
@@ -179,26 +179,106 @@
                             </p>
                             <div class="toggle__block-content">
                                 <div class="toggle__content">
+
+
+                                    <style>
+                                        .toggle__table {
+                                            width: 100%;
+                                            border-collapse: collapse;
+                                            table-layout: fixed;
+                                        }
+
+                                        .toggle__table th,
+                                        .toggle__table td {
+                                            width: 33.33%;
+                                            vertical-align: top;
+                                            padding: 8px;
+                                            text-align: left;
+                                        }
+
+                                        .toggle-table__title {
+                                            font-weight: bold;
+                                            font-size: 16px;
+                                        }
+
+                                        .toggle-table__item {
+                                            position: relative;
+                                            padding-bottom: 10px;
+                                        }
+
+                                        .toggle-table__item p {
+                                            display: inline-block;
+                                            margin: 0;
+                                            background: #fff; /* подложка, если нужно перекрыть линию */
+                                            padding-right: 4px;
+                                            z-index: 1;
+                                            position: relative;
+                                        }
+
+                                        /* Линия-многоточие */
+                                        .toggle-table-item__line {
+                                            position: absolute;
+                                            left: 0;
+                                            bottom: 4px;
+                                            width: 100%;
+                                            border-bottom: 1px dotted #aaa;
+                                            z-index: 0;
+                                        }
+
+                                        /* Адаптив */
+                                        @media (max-width: 768px) {
+                                            .toggle__table th,
+                                            .toggle__table td {
+                                                font-size: 14px;
+                                                padding: 6px;
+                                            }
+                                        }
+
+                                        /* Maks */
+                                        .toggle__table tbody,
+                                        .toggle__table thead,
+                                        .toggle__table thead tr{
+                                            width: 100%;
+                                        }
+                                        .toggle__table thead tr{
+                                            display:flex;
+                                        }
+                                        .toggle__table tbody tr{
+                                            display: flex;
+                                            gap: 8px;
+                                        }
+                                    </style>
                                     
-                                    {# <table  class="toggle__table">
-                                        <tr>
-                                            <th class="toggle-table__title">Россия</th>
-                                            <th class="toggle-table__title">Великобритания</th>
-                                            <th class="toggle-table__title">Европа</th>
-                                        </tr>
-                                        <tr>
-                                            <td class="toggle-table__item">
-                                                <p>34,5</p>
-                                                <div class="toggle-table-item__line"></div>
-                                            </td>
-                                            <td class="toggle-table__item">
-                                                <p>34,5</p>
-                                                <div class="toggle-table-item__line"></div>
-                                            </td>
-                                        </tr>
-                                    </table> #}
-
-                                    <div class="toggle__table toggle__table--three">
+                                    
+                                    <table class="toggle__table toggle__table--three">
+                                        {% if product_meta.feeding_recommendations_table.header is defined %}
+                                            <thead>
+                                                <tr>
+                                                    {% for col in product_meta.feeding_recommendations_table.header %}
+                                                        <th class="toggle-table__title">{{ col.c }}</th>
+                                                    {% endfor %}
+                                                </tr>
+                                            </thead>
+                                        {% endif %}
+                                        <tbody>
+                                            {% for row in product_meta.feeding_recommendations_table.body %}
+                                                <tr>
+                                                    {% for cell in row %}
+                                                        <td class="toggle-table__item">
+                                                            <p>{{ cell.c }}</p>
+                                                            <div class="toggle-table-item__line"></div>
+                                                        </td>
+                                                    {% endfor %}
+                                                </tr>
+                                            {% endfor %}
+                                        </tbody>
+                                    </table>
+    
+
+
+
+                                    {# Старая таблица #}
+                                    {# <div class="toggle__table toggle__table--three">
                                         {% if product_meta.feeding_recommendations_table.header %}
                                             <div class="toggle-table__block">
                                                 <p class="toggle-table__title">{{ product_meta.feeding_recommendations_table.header.0 is iterable ? product_meta.feeding_recommendations_table.header.0|join(', ') : product_meta.feeding_recommendations_table.header.0 }}</p>
@@ -227,7 +307,9 @@
                                                 {% endfor %}
                                             </div>
                                         {% endif %}
-                                    </div>
+                                    </div> #}
+
+
                                 </div>
                             </div>
                         </div>