/* Блок U1.2: табличный список товаров. Компьютер — таблица с миниатюрой 48×48
   и динамическими колонками характеристик; телефон — карточки, где остаются
   только наименование, цена, наличие, количество и кнопка. */

.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable th,
.ptable td { padding: 8px 10px; border-bottom: 1px solid #e6e8ec; text-align: left;
             vertical-align: middle; }
.ptable thead th { font-size: 12px; font-weight: 600; color: #5a6472;
                   text-transform: uppercase; letter-spacing: .02em;
                   border-bottom: 2px solid #d6dae1; white-space: nowrap; }
.ptable tbody tr:hover { background: #f7f9fb; }

.ptable .c-img { width: 56px; padding-right: 0; }
.ptable .c-img img { width: 48px; height: 48px; object-fit: contain; display: block;
                     background: #fff; border: 1px solid #eceff3; border-radius: 4px; }

.ptable .c-name { min-width: 260px; }
.ptable .c-name a { color: #16324f; text-decoration: none; font-weight: 500;
                    display: block; }
.ptable .c-name a:hover { text-decoration: underline; }
.ptable .c-name .cap { display: block; margin-top: 2px; font-size: 12px;
                       font-style: normal; color: #7a8493; }

.ptable .c-attr { white-space: nowrap; color: #24303f; }
.ptable .c-stock { white-space: nowrap; font-size: 13px; color: #3c7a3c; }
.ptable .c-price { white-space: nowrap; text-align: right; font-weight: 600; }
.ptable .c-btn { width: 190px; }
.ptable .cart-cell { display: flex; gap: 6px; align-items: center; }
.ptable .qty-input { width: 62px; padding: 5px 6px; border: 1px solid #c8cfd8;
                     border-radius: 4px; font-size: 13px; }
.ptable .c-btn .btn { padding: 6px 10px; font-size: 13px; white-space: nowrap; }

/* Узкое окно: таблица прокручивается по горизонтали, а не ломает вёрстку. */
#productsBox { overflow-x: auto; }

/* Планшет и небольшой ноутбук: скрываем миниатюру, чтобы колонки не сжимались. */
@media (max-width: 1100px) {
  .ptable { font-size: 13px; }
  .ptable .c-img { display: none; }
  .ptable .c-btn { width: 150px; }
}

/* Телефон: каждая строка — карточка. Наименование, цена, наличие,
   количество и кнопка остаются; характеристики скрыты. */
@media (max-width: 640px) {
  .ptable thead { display: none; }
  .ptable,
  .ptable tbody,
  .ptable tr,
  .ptable td { display: block; width: 100%; }
  .ptable tr { border: 1px solid #e0e4ea; border-radius: 6px; margin-bottom: 10px;
               padding: 10px 12px; background: #fff; }
  .ptable td { border: none; padding: 2px 0; }
  .ptable .c-img { display: none; }
  .ptable .c-attr { display: none; }
  .ptable .c-name { min-width: 0; }
  .ptable .c-name a { font-size: 15px; }
  .ptable .c-price { text-align: left; font-size: 17px; margin-top: 6px; }
  .ptable .c-stock { margin-top: 2px; }
  .ptable .c-btn { width: auto; margin-top: 8px; }
  .ptable .cart-cell { gap: 8px; }
  .ptable .c-btn .btn { flex: 1 1 auto; padding: 10px 12px; font-size: 14px; }
  .ptable .qty-input { width: 72px; padding: 9px 8px; font-size: 14px; }
}