/* === Dýško v košíku – kompaktní mobil === */
/* Doplněk k kosik-dysko-4.js – nemění skript, jen dolaďuje rozložení. */

@media (max-width: 767px) {

  /* Celý blok trochu utáhnout */
  html body .vj-dysko { padding: 12px !important; }
  html body .vj-head { margin-bottom: 10px !important; }
  html body .vj-title { font-size: 15px !important; }
  html body .vj-sub { font-size: 12px !important; line-height: 1.3 !important; }

  /* Řádek: [emoji] [popis + cena] [tlačítko] – vše na jednom řádku */
  html body .vj-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 4px 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }

  /* Emoji vlevo, přes oba řádky */
  html body .vj-row .vj-emo {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  /* Popis */
  html body .vj-row .vj-lbl {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  /* Cena pod popisem */
  html body .vj-row .vj-amt {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    font-size: 12px !important;
    padding: 2px 8px !important;
  }

  /* Tlačítko vpravo, přes oba řádky */
  html body .vj-row form {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    margin: 0 !important;
  }
  html body .vj-row .vj-add {
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
}

/* Velmi úzký telefon – ještě o kus menší */
@media (max-width: 380px) {
  html body .vj-row { padding: 9px 10px !important; gap: 3px 8px !important; }
  html body .vj-row .vj-lbl { font-size: 11.5px !important; }
  html body .vj-row .vj-add { font-size: 12px !important; padding: 7px 10px !important; }
}