/* "Încă 3 persoane se uită acum la acest produs" - inc/live/.

   The slot is rendered `hidden`, so while nobody else is here it takes no
   space at all. When it is shown it opens from zero height rather than
   appearing at full height: the delivery panel below slides down instead
   of jumping. grid-template-rows 0fr -> 1fr is what animates a height that
   is not known in advance.

   It sits inside the add-to-cart form, which is a wrapping flex row with a
   10px row gap. The negative margin cancels that gap while the slot is
   closed and eases back to a small positive one as the line opens - so
   nothing moves by even 10px before the line itself starts to show.
   (Padding cannot do this job: a grid row does not shrink below the
   padding of what is in it.)

   [hidden] is restated because display:grid would otherwise beat the
   browser's own rule for it, and a hidden slot would still take space. */
.af-live{
  flex:0 0 100%;
  width:100%;
  margin-top:-10px;
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1),margin-top .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease;
}
.af-live[hidden]{display:none}
.af-live.is-on{grid-template-rows:1fr;margin-top:4px;opacity:1}

.af-live .af-live__line{
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  font-size:17px;
  line-height:1.47;
  color:#1d1d1f;
}
/* The same type, green and stroke as the lorry in the delivery line below,
   so the two read as one family of facts rather than a badge and a panel. */
.af-live .af-live__line svg{flex:0 0 auto;margin-top:2px;color:#2e7d32}

@media (prefers-reduced-motion:reduce){
  .af-live{transition:none}
}