/* ============================================================
   Nakupni kosik
   /css/kosik.css

   Sirku a mezeru nad obsahem dava stranka.css, tady jsou
   jen barvy a rozlozeni polozek.
   ============================================================ */

.kos {
  --k-modra:   var(--modra, #1A75AD);
  --k-tmava:   var(--modra-tmava, #12557C);
  --k-svetla:  var(--modra-svetla, #EAF5FC);
  --k-inkoust: var(--inkoust, #0B3047);
  --k-text2:   var(--text-2, #5A6B78);
  --k-linka:   var(--linka, #D8E3EB);
  --k-plocha:  var(--plocha, #FFFFFF);

  color: var(--k-inkoust); font-size: 15px; line-height: 1.5;
  box-sizing: border-box;
}
.kos *, .kos *::before, .kos *::after { box-sizing: inherit; }

/* ---------- zahlavi ---------- */
.kos-hlava { margin-bottom: 22px; }
.kos-hlava h1 {
  margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.02em;
}
.kos-hlava p { margin: 6px 0 0; color: var(--k-text2); font-size: 14.5px; }

/* ---------- prazdny kosik ---------- */
.kos-prazdny {
  padding: 54px 30px; text-align: center;
  border: 1px dashed var(--k-linka); border-radius: 16px;
  background: var(--k-plocha); color: var(--k-text2);
}
.kos-prazdny svg { color: var(--k-linka); }
.kos-prazdny h2 { margin: 14px 0 6px; font-size: 21px; color: var(--k-inkoust); }
.kos-prazdny p { margin: 0 0 20px; }

/* ---------- rozlozeni ---------- */
.kos-obsah {
  display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start;
}

/* ---------- polozky ---------- */
.kos-polozky { display: flex; flex-direction: column; gap: 12px; }

.kos-radek {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 120px 150px 140px 36px;
  gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--k-plocha);
  border: 1px solid var(--k-linka); border-radius: 14px;
}

.kos-obrazek {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; overflow: hidden;
  border: 1px solid var(--k-linka); border-radius: 10px; background: #fff;
}
.kos-obrazek img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kos-bez-obrazku { color: var(--k-linka); font-size: 26px; font-weight: 700; }

.kos-popis { min-width: 0; }
.kos-nazev {
  display: block; color: var(--k-inkoust); text-decoration: none;
  font-weight: 600; line-height: 1.35;
}
.kos-nazev:hover { color: var(--k-modra); text-decoration: underline; }
.kos-kod { font-size: 13px; color: var(--k-text2); margin-top: 3px; }
.kos-poznamka { font-size: 12.5px; color: var(--k-text2); margin-top: 2px; }

.kos-popisek {
  display: block; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--k-text2); margin-bottom: 3px;
}

.kos-jednotkova strong { font-weight: 600; font-size: 15px; }

.kos-castka { text-align: right; }
.kos-castka strong { display: block; font-size: 17px; }
.kos-bez-dph { display: block; font-size: 12.5px; color: var(--k-text2); margin-top: 2px; }

/* ---------- mnozstvi ---------- */
.kos-mnozstvi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kos-mnozstvi .kos-popisek { flex: 1 0 100%; margin-bottom: 0; }
.kos-mnozstvi input {
  width: 72px; height: 36px; padding: 0 9px; font: inherit; font-size: 15px;
  border: 1px solid var(--k-linka); border-radius: 8px; background: #fff;
  color: var(--k-inkoust);
}
.kos-ulozit {
  height: 36px; padding: 0 11px; font: inherit; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--k-linka); border-radius: 8px;
  background: var(--k-svetla); color: var(--k-tmava); cursor: pointer;
}
.kos-ulozit:hover { background: #DDEEF9; }

/* ---------- odebrani ---------- */
.kos-odebrat button {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--k-linka); border-radius: 8px;
  background: #fff; color: var(--k-text2); cursor: pointer;
}
.kos-odebrat button:hover { border-color: #E8B4B6; color: #C4262C; background: #FDF4F4; }

/* ---------- souhrn ---------- */
.kos-souhrn {
  position: sticky; top: 16px;
  padding: 20px 22px;
  background: var(--k-plocha);
  border: 1px solid var(--k-linka); border-radius: 14px;
}
.kos-souhrn h2 { margin: 0 0 14px; font-size: 19px; }

.kos-radka-souctu {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 14.5px;
}
.kos-drobne { font-size: 12.5px; color: var(--k-text2); padding-top: 0; }
.kos-celkem {
  margin-top: 8px; padding-top: 13px; border-top: 1px solid var(--k-linka);
  font-size: 16px;
}
.kos-celkem strong { font-size: 21px; }

.kos-doprava-pozn { margin: 10px 0 16px; font-size: 12.5px; color: var(--k-text2); }

.kos-tlacitko {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  border-radius: 10px; text-decoration: none; font-weight: 700;
  background: var(--k-modra); color: #fff;
}
.kos-tlacitko:hover { background: var(--k-tmava); }
.kos-tlacitko-hlavni { width: 100%; }

.kos-zpet {
  display: block; text-align: center; margin-top: 12px;
  color: var(--k-modra); text-decoration: none; font-size: 14.5px;
}
.kos-zpet:hover { text-decoration: underline; }

.kos-vyprazdnit { margin-top: 16px; text-align: center; }
.kos-vyprazdnit button {
  border: 0; background: none; padding: 4px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--k-text2); text-decoration: underline;
}
.kos-vyprazdnit button:hover { color: #C4262C; }

/* ============================================================
   Uzsi displeje
   ============================================================ */

@media (max-width: 1080px) {
  .kos-obsah { grid-template-columns: 1fr; }
  .kos-souhrn { position: static; }
}

@media (max-width: 760px) {
  /* Z radku se stane karta: obrazek a nazev nahore,
     cena a mnozstvi pod tim. */
  .kos-radek {
    grid-template-columns: 64px minmax(0, 1fr) 36px;
    grid-template-areas:
      "obrazek popis odebrat"
      "jednotkova jednotkova jednotkova"
      "mnozstvi mnozstvi mnozstvi"
      "castka castka castka";
    gap: 10px 12px;
  }
  .kos-obrazek    { grid-area: obrazek; width: 64px; height: 64px; }
  .kos-popis      { grid-area: popis; }
  .kos-odebrat    { grid-area: odebrat; }
  .kos-jednotkova { grid-area: jednotkova; }
  .kos-mnozstvi   { grid-area: mnozstvi; }
  .kos-castka     { grid-area: castka; text-align: left;
                    padding-top: 10px; border-top: 1px solid var(--k-linka); }
  .kos-castka strong { display: inline; }
  .kos-bez-dph { display: inline; margin-left: 8px; }
  .kos-hlava h1 { font-size: 24px; }
}