тут очень много с карточкой товара и импортом.

public/admin/import-old-site.php

@@ -170,6 +170,28 @@ function execute_old_site_import_batch(string $sqlPath, string $progressPath, ar
     ];
 }
 
+function normalize_old_site_product_categories(PDO $pdo): void
+{
+    $pdo->exec(
+        "UPDATE products p
+         SET p.category_id = (
+             SELECT pcl.category_id
+             FROM product_category_links pcl
+             INNER JOIN categories c ON c.id = pcl.category_id
+             WHERE pcl.product_id = p.id
+               AND c.is_active = 1
+             ORDER BY c.parent_id IS NULL, pcl.sort_order, pcl.category_id
+             LIMIT 1
+         )
+         WHERE p.legacy_path LIKE '/katalog/product/view/1/%'
+           AND EXISTS (
+               SELECT 1
+               FROM product_category_links pcl_exists
+               WHERE pcl_exists.product_id = p.id
+           )"
+    );
+}
+
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     try {
         $action = (string) ($_POST['action'] ?? 'start');
@@ -186,6 +208,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         $progress = execute_old_site_import_batch($sqlPath, $progressPath, $progress);
 
         if (!empty($progress['done'])) {
+            normalize_old_site_product_categories(Database::pdo());
             $message = 'Импорт выполнен. SQL-команд выполнено: ' . (int) $progress['executed'] . '.';
         } else {
             $message = 'Импорт продолжается: ' . (float) $progress['percent'] . '%, команд за этот шаг: ' . (int) $progress['batch_executed'] . '.';

public/assets/css/app.css

@@ -1007,7 +1007,13 @@ a:hover {
     font-weight: 700;
 }
 
-.product-grid,
+.product-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 16px;
+    align-items: stretch;
+}
+
 .admin-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
@@ -1024,6 +1030,13 @@ a:hover {
     box-shadow: 0 10px 24px rgba(22, 60, 43, 0.05);
 }
 
+.product-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
 .product-card-image {
     display: block;
     overflow: hidden;
@@ -1044,6 +1057,23 @@ a:hover {
     transform: scale(1.025);
 }
 
+.product-card-image-placeholder {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 4 / 3;
+    color: var(--brand-green);
+    font-weight: 900;
+    background:
+        linear-gradient(135deg, rgba(23, 61, 44, 0.08), rgba(196, 61, 49, 0.08)),
+        #eef4ea;
+}
+
+.product-card-image-placeholder span {
+    display: inline-flex;
+    border-bottom: 2px solid var(--brand-red);
+    padding-bottom: 3px;
+}
+
 .product-card p {
     margin: 0 0 10px;
     font-size: 14px;
@@ -1051,15 +1081,33 @@ a:hover {
 }
 
 .product-card .product-category {
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
     margin-bottom: 8px;
     font-size: 12px;
+    line-height: 1.2;
     font-weight: 700;
     text-transform: uppercase;
     color: #7a856f;
 }
 
+.product-card h3 {
+    display: -webkit-box;
+    overflow: hidden;
+    min-height: 50px;
+    margin-bottom: 12px;
+    line-height: 1.22;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+
 .price-line {
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 6px;
+    align-items: baseline;
+    min-height: 22px;
     margin-bottom: 6px;
     font-size: 14px;
     color: #2d372f;
@@ -1067,25 +1115,58 @@ a:hover {
 
 .package-price-line {
     position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px 7px;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto 22px;
+    gap: 6px;
     align-items: center;
+    min-height: 30px;
+    border-top: 1px solid #e3e8de;
+    padding-top: 10px;
+    font-size: 14px;
+}
+
+.package-price-label {
+    min-width: 0;
+    color: #2d372f;
+}
+
+.package-price-values {
+    display: inline-flex;
+    gap: 6px;
+    align-items: baseline;
+    justify-content: flex-end;
+    min-width: 0;
+    color: var(--brand-green);
+    white-space: nowrap;
+}
+
+.package-price-note {
+    display: block;
+    margin: 3px 0 8px;
+    font-size: 12px;
+    line-height: 1.25;
+    color: var(--muted);
 }
 
 .old-price {
     display: inline-block;
-    margin-right: 8px;
+    margin-right: 0;
     font-size: 13px;
     font-weight: 400;
     color: #8b9485;
     text-decoration: line-through;
+    white-space: nowrap;
 }
 
 .variant-choice {
     display: grid;
+    align-self: start;
     gap: 7px;
-    margin-top: 12px;
+    min-height: 76px;
+    margin: 0 0 12px;
+    border-top: 0;
+    border-bottom: 1px solid #edf1e9;
+    padding-bottom: 10px;
 }
 
 .variant-choice > span {
@@ -1098,20 +1179,27 @@ a:hover {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
+    align-items: flex-start;
+    min-height: 32px;
 }
 
 .variant-choice-button {
     appearance: none;
+    max-width: 100%;
+    box-sizing: border-box;
     min-height: 30px;
     border: 1px solid #cfd8c9;
     border-radius: 7px;
     padding: 6px 9px;
     font: inherit;
-    font-size: 13px;
+    font-size: 12px;
+    line-height: 1.15;
     font-weight: 800;
     color: var(--brand-green);
     background: #ffffff;
     cursor: pointer;
+    overflow-wrap: anywhere;
+    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
 }
 
 .variant-choice-button:hover,
@@ -1123,11 +1211,12 @@ a:hover {
 
 .add-to-cart-button {
     appearance: none;
+    align-self: end;
     width: 100%;
     min-height: 40px;
     border: 0;
     border-radius: 8px;
-    margin-top: 14px;
+    margin-top: 0;
     padding: 10px 12px;
     font: inherit;
     font-size: 14px;
@@ -1141,11 +1230,58 @@ a:hover {
     background: #102f21;
 }
 
+.product-card-actions {
+    display: grid;
+    grid-template-columns: minmax(96px, 0.44fr) minmax(0, 1fr);
+    gap: 8px;
+    align-items: stretch;
+    min-height: 40px;
+    margin-top: auto;
+}
+
+.quantity-stepper {
+    display: grid;
+    grid-template-columns: 30px minmax(32px, 1fr) 30px;
+    min-width: 0;
+    overflow: hidden;
+    border: 1px solid #cfd8c9;
+    border-radius: 8px;
+    background: #ffffff;
+}
+
+.quantity-stepper button,
+.quantity-stepper input {
+    min-width: 0;
+    border: 0;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 900;
+    text-align: center;
+    color: var(--brand-green);
+    background: transparent;
+}
+
+.quantity-stepper button {
+    cursor: pointer;
+}
+
+.quantity-stepper button:hover {
+    color: #ffffff;
+    background: var(--brand-green);
+}
+
+.quantity-stepper input {
+    border-inline: 1px solid #e3e8de;
+    padding: 0 3px;
+}
+
 .price-tier-trigger {
     appearance: none;
-    display: inline-grid;
+    display: none;
     place-items: center;
+    justify-self: end;
     width: 20px;
+    min-width: 20px;
     height: 20px;
     border: 1px solid #b9c6b1;
     border-radius: 50%;
@@ -1153,11 +1289,16 @@ a:hover {
     font: inherit;
     font-size: 12px;
     font-weight: 900;
+    line-height: 1;
     color: var(--brand-green);
     background: #ffffff;
     cursor: help;
 }
 
+body[data-payment-mode="cash"] .price-tier-trigger {
+    display: inline-grid;
+}
+
 .cart-link span {
     display: inline-grid;
     place-items: center;
@@ -1174,9 +1315,9 @@ a:hover {
 
 .price-tier-popover {
     position: absolute;
-    left: 16px;
     right: 16px;
-    bottom: 58px;
+    bottom: 62px;
+    left: 16px;
     z-index: 8;
     display: grid;
     gap: 9px;
@@ -1188,20 +1329,17 @@ a:hover {
     box-shadow: 0 18px 44px rgba(23, 61, 44, 0.18);
     opacity: 0;
     visibility: hidden;
-    transform: translateY(6px);
     pointer-events: none;
+    transform: translateY(6px);
     transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
 }
 
-.product-card {
-    position: relative;
-}
-
-.product-card:hover .price-tier-popover,
-.product-card:focus-within .price-tier-popover {
+body[data-payment-mode="cash"] .package-price-line:has(.price-tier-trigger:hover) + .price-tier-popover,
+body[data-payment-mode="cash"] .price-tier-popover:hover {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
+    pointer-events: auto;
 }
 
 .price-tier-popover strong {
@@ -1218,7 +1356,7 @@ a:hover {
 .price-tier-popover div {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
-    gap: 10px;
+    gap: 8px;
     align-items: baseline;
 }
 
@@ -1226,6 +1364,7 @@ a:hover {
     font-size: 12px;
     line-height: 1.25;
     color: var(--muted);
+    white-space: nowrap;
 }
 
 .price-tier-popover dd {
@@ -1320,7 +1459,7 @@ a:hover {
 
 .variant-row {
     display: grid;
-    grid-template-columns: minmax(0, 1.2fr) minmax(130px, 0.7fr) minmax(110px, 0.55fr) minmax(120px, 0.55fr);
+    grid-template-columns: minmax(0, 1.2fr) minmax(130px, 0.7fr) minmax(110px, 0.55fr) minmax(220px, 0.75fr);
     gap: 12px;
     align-items: center;
     border: 1px solid var(--line);
@@ -1329,6 +1468,10 @@ a:hover {
     background: #f8faf5;
 }
 
+.variant-row .product-card-actions {
+    margin-top: 0;
+}
+
 .variant-row b {
     color: var(--brand-green);
     text-align: right;
@@ -2338,6 +2481,10 @@ a:hover {
         grid-template-columns: 1fr;
     }
 
+    .product-card-actions {
+        grid-template-columns: 1fr;
+    }
+
     .variant-row b {
         text-align: left;
     }