/* ==========================================================================
   AUME – 7) Sloupec "Sleva" u položek v košíku                      [v1]

   Když je v košíku uplatněný slevový kupón, Shoptet u každé položky SÁM
   vyrenderuje buňku .p-discount s procentem slevy – včetně hlavičky
   "Sleva" a bublinové nápovědy (span.show-tooltip s vysvětlením).
   Nic se tedy nedopočítává, jen se odkrývá to, co už na stránce je.

   Šablona (main-13.less.css) ji totiž skrývá, a to natvrdo, bez jakékoli
   media query:

       .cart-table .inline.delete-cart-item,
       .cart-table .p-discount,
       .cart-table .product-table-name-footer { display: none }

   Ověřeno na živém košíku s kupónem SVATBA15: server vrátil
   {"code":200,"message":"Slevový kupón byl úspěšně přidán."}, cena spadla
   z 1 470 Kč na 1 249,50 Kč a v DOM byly obě buňky .p-discount
   ("Sleva" v hlavičce a "Sleva 15 %" u položky) – jen s display:none.

   Bez !important: naše pravidlo má stejnou specificitu jako to v šabloně
   (0,2,0), ale načítá se později, takže v kaskádě vyhraje.
   ========================================================================== */

.cart-table .p-discount {
    display: table-cell;
}

/* --- Mobil ---------------------------------------------------------------
   Pod 768 px se tabulka rozpadá na bloky a řádek je flexbox, ve kterém mají
   buňky přiřazené pořadí: počet 4, cena za m. j. 5, celkem 6. Buňka slevy
   žádné nedostala, zůstala by jí výchozí 0 – a vyskočila by úplně nahoru
   nad název produktu. Proto ji zařadíme za cenu.

   Popisek "Sleva" je na mobilu potřeba: sloupcová hlavička tam není, takže
   bez něj by u položky viselo jen holé procento bez vysvětlení.

   Celkem se tím odsune na vlastní řádek pod trojici počet / cena / sleva.
   Zkoušel jsem i variantu vměstnat všechny čtyři na jeden řádek po 25 %,
   ale ovládání počtu kusů má svoji minimální šířku a překrylo by cenu. */

@media (max-width: 767px) {
    .cart-table .p-discount {
        display: block;
        order: 5;
    }

    .cart-table .p-discount .p-label {
        display: block;
    }
}