/* Перекрёстная связь рилс ↔ масло.
   Блок «Масло из рилса» на странице истории (/live/<slug>/)
   и блок «Истории с этим маслом» на карточке товара. */

/* ── На странице рилса: карточка масла ── */
.st-linked { margin: 30px 0 4px; }
.st-linked-label {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
  color: #6aa61f; margin: 0 0 14px;
}
.st-linked-list { display: flex; flex-direction: column; gap: 12px; }
.st-linked-card {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid #e6ebe0; border-radius: 18px;
  padding: 14px 20px 14px 14px; text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.st-linked-card:hover {
  border-color: #a3e043; box-shadow: 0 10px 26px rgba(60,90,20,.10);
  transform: translateY(-2px);
}
.st-linked-thumb {
  width: 68px; height: 68px; flex: none; border-radius: 14px;
  background: #f2f5ec; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.st-linked-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-linked-body { display: flex; flex-direction: column; gap: 4px; }
.st-linked-name { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 17px; color: #1b2b15; }
.st-linked-go { font-size: 14px; font-weight: 600; color: #6aa61f; }

/* ── На карточке товара: блок историй ── */
.pd-stories { margin: 44px 0 0; }
.pd-stories .pd-about-label { }
.pd-stories-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px; margin-top: 18px;
}
.pd-story-card {
  display: flex; align-items: center; gap: 16px;
  background: #f5f7f3; border: 1px solid #e6ebe0; border-radius: 20px;
  padding: 14px; text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.pd-story-card:hover {
  border-color: #a3e043; box-shadow: 0 12px 28px rgba(60,90,20,.10);
  transform: translateY(-2px);
}
.pd-story-thumb {
  position: relative; width: 84px; height: 108px; flex: none;
  border-radius: 14px; overflow: hidden; background: #dfe6d6;
}
.pd-story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-story-play {
  position: absolute; inset: 0; margin: auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,36,19,.62); border-radius: 50%; color: #fff;
}
.pd-story-play svg { width: 15px; height: 15px; margin-left: 2px; }
.pd-story-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pd-story-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 16px; color: #1b2b15; line-height: 1.25; }
.pd-story-desc {
  font-size: 13.5px; color: #5a6650; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-story-go { font-size: 13px; font-weight: 600; color: #6aa61f; margin-top: 2px; }

@media (max-width: 600px) {
  .pd-stories-list { grid-template-columns: 1fr; }
  .st-linked-card { padding: 12px; gap: 14px; }
}