/* Раздел «Гвозди» (views/gvozd.pug, gvozd-cat.pug, gvozd-card.pug, gvozd-product.pug).
   Маленькие карточки — свои классы .gv-* (без общих .product-* из style.css): вся карточка — одна ссылка,
   слева фото и плашка наличия под ним, справа название, фасовка (если в группе их несколько) и цена.
   На карточке товара — цена упаковки. */
.gv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 10px 0 24px; }
.gv-card { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 4px;
  background: #fff; color: #333e48; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.gv-card:hover, .gv-card:focus { border-color: #3b5473; box-shadow: 0 2px 10px rgba(59, 84, 115, .12); color: #333e48; text-decoration: none; }
.gv-card__media { flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gv-card__media img { display: block; width: 76px; height: 76px; object-fit: contain; }
.gv-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 4px; }
.gv-card__name { color: #3b5473; font-weight: 500; font-size: 15px; line-height: 1.25; }
/* подсветка названия при наведении на карточку — как ссылки в подвале (footer.css .sf-dir ul a): линия
   «выезжает» слева направо; внутренний строчный span — чтобы линия шла по тексту, а не по ширине колонки */
.gv-card__name-text { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .25s; padding-bottom: 1px; }
.gv-card:hover .gv-card__name-text, .gv-card:focus .gv-card__name-text { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { .gv-card__name-text { transition: none; } }
.gv-card__pack { color: #6b7280; font-size: 13px; }
.gv-card__price { margin-top: 4px; font-size: 15px; font-weight: 600; color: #333e48; }
.gv-card__price--none { font-weight: 400; color: #9ca3af; }
.gv-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; background: #f1f3f5; color: #6b7280;
  font-size: 11px; line-height: 17px; white-space: nowrap; }
.gv-badge--yes { background: #e8f6ee; color: #1f7a45; }

/* телефон: две колонки, внутри карточки всё столбиком (фото → плашка → размер → цена) */
@media (max-width: 575px) {
  .gv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gv-card { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; }
  .gv-card__media { flex: none; flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .gv-card__media img { width: 64px; height: 64px; }
  .gv-card__body { padding-top: 0; gap: 2px; }
  .gv-card__name { font-size: 14px; }
  .gv-card__price { margin-top: 2px; font-size: 14px; }
}

.gv-pane .title1 a { color: inherit; }
.gv-pane .title1 a:hover { color: #3b5473; }
.gv-pane-stock { color: #1f7a45; }
.gv-note { color: #6b7280; font-size: 14px; }
.gv-back { margin: 10px 0 30px; }

.gv-total-pcs { margin-left: 18px; white-space: nowrap; }
@media (max-width: 575px) { .gv-total-pcs { display: block; margin: 4px 0 0; } }

.gv-packprice { margin: -4px 0 10px; font-size: 15px; color: #333e48; }