/* ==========================================================================
   Košík, objednávka, stránka zákazníka a správa objednávek.
   Navazuje na css/styl.css (proměnné barev, písma, tlačítka) – jen web_2.
   ========================================================================== */

[hidden] { display: none !important; }

/* --- Odkaz na košík v hlavičce ------------------------------------------- */
.kosik-odkaz {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem; padding: .45rem .95rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: 1rem; text-decoration: none;
}
.kosik-odkaz:hover { background: var(--honey-wash); color: var(--ink); }
.kosik-odkaz svg { flex: none; }
.kosik-odkaz__pocet {
  min-width: 1.65rem; padding: 0 .45rem; border-radius: 999px;
  background: var(--red); color: #fff; text-align: center;
  font-size: .875rem; line-height: 1.65rem;
}
@media (prefers-color-scheme: dark) { .kosik-odkaz__pocet { color: #1b120c; } }
/* Do jednoho řádku s menu se košík vejde až od 1280 px (a jen jako ikona).
   Užší okna: logo + košík nahoře, menu pod nimi – jako dosud. */
@media (max-width: 79.99rem) {
  .brand { order: 1; }
  .kosik-odkaz { order: 2; }
  .nav { order: 3; flex-basis: 100%; }
}
@media (min-width: 80rem) {
  .site-header__inner { column-gap: 1rem; }
  .nav a { padding-inline: .62rem; }
}
@media (min-width: 80rem), (max-width: 29.99rem) {
  .kosik-odkaz { padding-inline: .7rem; }
  .kosik-odkaz__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* --- Tlačítko na kartě výrobku ------------------------------------------- */
.product__kosik {
  margin-top: .7rem; align-self: flex-start;
  min-height: 2.75rem; padding: .55rem 1.25rem; font-size: 1rem;
}
.product__vkosiku { font-weight: 500; }

/* --- Hláška „přidáno do košíku“ ------------------------------------------ */
.kosik-toast {
  position: fixed; z-index: 60; left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  width: min(28rem, calc(100% - 2rem));
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .9rem 1.1rem; border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-lift); font-size: 1rem;
}
.kosik-toast p { margin: 0; flex: 1 1 12rem; }
.kosik-toast a { color: var(--paper); font-weight: 700; }
.kosik-toast button {
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  padding: .3rem .4rem; text-decoration: underline;
}

/* --- Formuláře ----------------------------------------------------------- */
.objednavka fieldset {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  padding: 1.1rem clamp(1rem, 3vw, 1.5rem) 1.3rem; margin: 0 0 1.5rem; min-width: 0;
}
.objednavka legend {
  font-family: var(--serif); font-weight: 600; font-size: 1.25rem; padding: 0 .4rem;
}
.pole { margin-bottom: 1.1rem; }
.pole label { display: block; font-weight: 600; margin-bottom: .3rem; line-height: 1.35; }
.pole input, .pole textarea, .pole select, .ks-pole {
  width: 100%; min-height: 3rem; padding: .65rem .85rem;
  font: inherit; font-size: 1.0625rem; line-height: 1.4;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.pole textarea { resize: vertical; }
.pole input:focus-visible, .pole textarea:focus-visible, .pole select:focus-visible, .ks-pole:focus-visible,
.volba input:focus-visible, .mnozstvi input:focus-visible {
  outline: 3px solid var(--honey); outline-offset: 1px;
}
.pole__napoveda { font-size: .9375rem; color: var(--ink-faint); margin: .35rem 0 0; }
.pole__nepovinne { font-weight: 400; color: var(--ink-faint); }
.pole--chyba input, .pole--chyba textarea { border-color: var(--red); border-width: 2px; }
.pole__chyba { color: var(--red); font-weight: 600; font-size: .9375rem; margin: .35rem 0 0; }
/* Dvě pole vedle sebe (IČO + DIČ, datum + doprava). Mřížka místo inline-block:
   mezera mezi inline prvky v HTML by druhé pole odsunula na další řádek. */
.pole-dvojice { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) {
  .pole-dvojice { grid-template-columns: 1fr 1fr; }
  .pole--pul { max-width: calc(50% - .5rem); }
  .pole-dvojice .pole--pul { max-width: none; }
}

.volba { display: flex; gap: .75rem; align-items: flex-start; padding: .45rem 0; }
.volba input { flex: none; width: 1.35rem; height: 1.35rem; margin: .25rem 0 0; accent-color: var(--red); }
.volba label { font-weight: 500; cursor: pointer; }
.volba__cena { font-weight: 700; white-space: nowrap; }

.zasilkovna { margin: .2rem 0 .8rem 2.1rem; }
.zasilkovna__vybrano { margin: .5rem 0 0; font-weight: 600; }
.zasilkovna__vybrano:empty { display: none; }

.objednavka__firma {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: .2rem clamp(1rem, 3vw, 1.5rem); margin: 0 0 1.5rem;
}
.objednavka__firma summary { cursor: pointer; padding: .8rem 0; font-weight: 600; }
.objednavka__firma[open] { padding-bottom: .6rem; }
.objednavka__info { font-size: .9375rem; color: var(--ink-soft); }
.objednavka__chyba, .zprava--chyba {
  background: var(--red-wash); border: 1px solid var(--red); color: var(--ink);
  border-radius: var(--radius-sm); padding: .8rem 1rem; font-weight: 600;
}
.objednavka__odeslat { width: 100%; justify-content: center; font-size: 1.125rem; }
@media (min-width: 40rem) { .objednavka__odeslat { width: auto; } }
.objednavka__odeslat[disabled] { opacity: .6; cursor: progress; }

.zprava {
  background: var(--indigo-wash); border: 1px solid var(--line); border-left: 4px solid var(--indigo);
  border-radius: var(--radius-sm); padding: .8rem 1rem; font-weight: 600;
}

/* --- Košík --------------------------------------------------------------- */
.kosik__nacitani { color: var(--ink-faint); }
.kosik__prazdny { text-align: center; padding: 2rem 0 1rem; }
.kosik__prazdny p { font-size: 1.25rem; color: var(--ink-soft); }
.kosik__obsah { display: grid; gap: 2rem; }
@media (min-width: 64rem) {
  .kosik__obsah { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.kosik__polozky { list-style: none; margin: 0; padding: 0; }
.kosik-polozka {
  display: grid; gap: .3rem 1rem; align-items: center;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  grid-template-areas: "foto info info" "foto mnozstvi soucet" ". odebrat odebrat";
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.kosik-polozka:first-child { border-top: 1px solid var(--line); }
.kosik-polozka__foto {
  grid-area: foto; width: 4.5rem; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--paper-2); border-radius: var(--radius-sm); align-self: start;
}
.kosik-polozka__info { grid-area: info; }
.kosik-polozka__nazev { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; margin: 0; line-height: 1.3; }
.kosik-polozka__cena { margin: 0; color: var(--ink-faint); font-size: .9375rem; }
.kosik-polozka .mnozstvi { grid-area: mnozstvi; justify-self: start; }
.kosik-polozka__soucet { grid-area: soucet; margin: 0; font-weight: 700; white-space: nowrap; }
.kosik-polozka__odebrat { grid-area: odebrat; justify-self: start; }

.mnozstvi { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.mnozstvi button {
  width: 2.75rem; min-height: 2.75rem; border: 0; background: var(--surface); color: var(--ink);
  font: 600 1.25rem/1 var(--sans); cursor: pointer;
}
.mnozstvi button:hover { background: var(--honey-wash); }
.mnozstvi input {
  width: 3rem; border: 0; border-inline: 1px solid var(--line); text-align: center;
  font: 600 1.0625rem var(--sans); color: var(--ink); background: var(--paper);
  -moz-appearance: textfield; appearance: textfield;
}
.mnozstvi input::-webkit-outer-spin-button, .mnozstvi input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.odkaz-tlacitko {
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  color: var(--red); font: inherit; font-size: .9375rem; text-decoration: underline;
  text-underline-offset: .18em;
}

.kosik__souhrn {
  display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem;
  margin: 0 0 1.25rem; padding: 1rem 1.2rem;
  background: var(--honey-wash); border-radius: var(--radius);
}
.kosik__souhrn dt, .kosik__souhrn dd { margin: 0; }
.kosik__souhrn dd { text-align: right; font-weight: 600; white-space: nowrap; }
.kosik__souhrn .celkem { font-size: 1.25rem; font-weight: 700; padding-top: .4rem; border-top: 1px solid var(--line-strong); }

.kosik__hotovo {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(1.3rem, 4vw, 2.2rem); max-width: var(--wrap-text);
}
.kosik__hotovo:focus { outline: none; }

/* --- Stránka objednávky (zákazník) --------------------------------------- */
.osa {
  list-style: none; margin: 1.5rem 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem;
  counter-reset: osa;
}
.osa__krok {
  position: relative; padding-top: 2.1rem; text-align: center;
  font-size: .875rem; color: var(--ink-faint); line-height: 1.3;
}
.osa__krok::before {
  counter-increment: osa; content: counter(osa);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .875rem;
  border: 2px solid var(--line-strong); background: var(--paper); color: var(--ink-faint);
}
.osa__krok--hotovo { color: var(--ink-soft); }
.osa__krok--hotovo::before { content: "✓"; background: var(--honey-wash); border-color: var(--honey); color: var(--honey-ink); }
.osa__krok--ted { color: var(--ink); font-weight: 700; }
.osa__krok--ted::before { background: var(--red); border-color: var(--red); color: #fff; }
@media (prefers-color-scheme: dark) { .osa__krok--ted::before { color: #1b120c; } }
.osa__popis, .osa__datum { display: block; }
@media (max-width: 29.99rem) {
  .osa { gap: .1rem; }
  .osa__krok { font-size: .75rem; }
  .osa__datum { font-size: .6875rem; }
}
@media (max-width: 22rem) { .osa__krok { font-size: .6875rem; letter-spacing: -.01em; } }
.osa__datum { font-weight: 400; font-size: .8125rem; }

.stav-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(1.2rem, 4vw, 1.8rem); margin: 0 0 2rem;
}
.stav-box h2 { font-size: 1.5rem; }
.stav-box--akce { border-left: 5px solid var(--red); }
.stav-box--hotovo { border-left: 5px solid var(--honey); }
.stav-box--pozor { border-left: 5px solid var(--red); background: var(--red-wash); }
.stav-box :last-child { margin-bottom: 0; }
.inline-form { display: inline; margin: 0; }
.vzkaz {
  margin: 0 0 1rem; padding: .8rem 1.1rem; border-left: 3px solid var(--honey);
  background: var(--honey-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic;
}
.vzkaz footer { font-style: normal; font-size: .9375rem; color: var(--ink-faint); margin-top: .3rem; }

.platba { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; margin-top: 1rem; }
.platba__qr { margin: 0; text-align: center; }
.platba__qr img { background: #fff; padding: 4px; border-radius: var(--radius-sm); width: 220px; height: 220px; }
.platba__qr figcaption { font-size: .875rem; color: var(--ink-faint); }
.platba__udaje { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0; }
.platba__udaje dt { color: var(--ink-faint); }
.platba__udaje dd { margin: 0; font-variant-numeric: tabular-nums; }

.objednavka-stranka__nadpis { font-size: 1.5rem; margin-top: 1rem; }
.objednavka-stranka__kontakt { margin-top: 2rem; color: var(--ink-soft); }
.seznam-kusu { margin: 0 0 1.5rem; }

.udaje { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .35rem 1rem; margin: 1.5rem 0; }
.udaje dt { color: var(--ink-faint); }
.udaje dd { margin: 0; overflow-wrap: anywhere; }
.udaje .poznamka { background: var(--honey-wash); padding: .4rem .7rem; border-radius: var(--radius-sm); }

.odstoupeni-box {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.odstoupeni-box h2 { font-size: 1.35rem; }

/* --- Tabulky ------------------------------------------------------------- */
.tabulka { overflow-x: auto; margin: 0 0 1.5rem; }
.tabulka table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabulka th, .tabulka td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tabulka th { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.tabulka .cislo { text-align: right; white-space: nowrap; }
.tabulka tfoot td { border-bottom: 0; }
.tabulka__celkem td { font-weight: 700; font-size: 1.125rem; border-top: 2px solid var(--line-strong); }
.tabulka__zmena td { background: var(--red-wash); }
.zmena { color: var(--red); font-weight: 700; font-size: .9375rem; }
.tabulka del { color: var(--ink-faint); }

/* --- Právní texty -------------------------------------------------------- */
.pravni h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.pravni h3 { font-size: 1.25rem; margin-top: 1.5rem; }
.pravni li { margin-bottom: .35rem; }
mark.doplnit { background: #ffe680; color: #241a12; padding: 0 .25em; border-radius: 3px; }
.vzor { border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem 1.2rem; background: var(--surface); }
.vzor summary { cursor: pointer; padding: .8rem 0; font-weight: 600; }

/* --- Správa objednávek --------------------------------------------------- */
.sprava { background: var(--paper); }
.sprava__hlavicka { background: var(--red); color: #fff; }
.sprava__hlavicka-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; }
.sprava__logo { color: #fff; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; text-decoration: none; }
.sprava__menu { display: flex; gap: 1.2rem; align-items: center; }
.sprava__menu a, .sprava__menu .odkaz-tlacitko { color: #fff; font-size: 1rem; }
@media (prefers-color-scheme: dark) {
  .sprava__hlavicka { background: var(--red-wash); border-bottom: 1px solid var(--line-strong); }
  .sprava__logo, .sprava__menu a, .sprava__menu .odkaz-tlacitko { color: var(--ink); }
}
.sprava__obsah { padding-block: 1.5rem 4rem; max-width: 52rem; }
.sprava h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.4rem); }
.sprava__nadpis small { font-family: var(--sans); font-size: 1.1rem; font-weight: 500; color: var(--ink-soft); }
.sprava__datum { color: var(--ink-faint); font-size: .9375rem; }
.sprava__odkazy { margin: 1.5rem 0; }
.prihlaseni { max-width: 22rem; }

.obj-skupina { margin-bottom: 2rem; }
.obj-skupina h2 { font-size: 1.35rem; display: inline; }
details.obj-skupina summary { cursor: pointer; list-style-position: outside; margin-bottom: .8rem; }
.pocet {
  display: inline-block; min-width: 1.8rem; padding: 0 .5rem; border-radius: 999px;
  background: var(--honey-wash); color: var(--honey-ink); font: 700 1rem/1.8rem var(--sans); text-align: center;
  vertical-align: middle;
}
.obj-seznam { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .6rem; }
.obj-seznam a {
  display: grid; grid-template-columns: auto 1fr auto; gap: .2rem 1rem; align-items: baseline;
  padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
}
.obj-seznam a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); }
.obj-seznam__cislo { font-weight: 700; font-variant-numeric: tabular-nums; }
.obj-seznam__jmeno { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obj-seznam__castka { font-weight: 700; white-space: nowrap; }
.obj-seznam__info { grid-column: 1 / -1; font-size: .9375rem; color: var(--ink-faint); }

.stitek {
  display: inline-block; padding: .05rem .6rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; line-height: 1.6; vertical-align: middle;
  background: var(--indigo-wash); color: var(--indigo); border: 1px solid var(--line);
}
.stitek--nova, .stitek--pozor { background: var(--red-wash); color: var(--red); border-color: var(--red); }
.stitek--zaplacena { background: var(--honey-wash); color: var(--honey-ink); border-color: var(--honey); }
.stitek--odeslana, .stitek--zrusena, .stitek--odstoupeno { background: var(--paper-2); color: var(--ink-faint); }

.krok {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem clamp(1rem, 3vw, 1.5rem) 1.3rem; margin: 1.5rem 0; box-shadow: var(--shadow);
}
.krok h2 { font-size: 1.35rem; }
.krok--pozor { border-left: 5px solid var(--red); }
.krok form > .btn, .krok .pole-dvojice + .btn { margin-top: .25rem; }
.krok details > p, .krok details > form { margin-top: .75rem; }
.obj-korekce { margin: .25rem 0 1.25rem; }
.obj-korekce summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); padding: .4rem 0; }
.obj-korekce[open] summary { margin-bottom: .5rem; }

/* Postup odeslání: očíslované kroky, aktuální zvýrazněný */
.postup { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.postup__krok { display: grid; grid-template-columns: 2.25rem 1fr; gap: .9rem; padding-bottom: 1.25rem; position: relative; }
.postup__krok:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.125rem - 1px); top: 2.4rem; bottom: .2rem; width: 2px; background: var(--line);
}
.postup__cislo {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  font-weight: 700; background: var(--indigo); color: #fff;
}
.postup__krok--hotovo .postup__cislo { background: var(--honey-wash); color: var(--honey-ink); border: 2px solid var(--honey); }
.postup__krok--pak .postup__cislo { background: var(--paper-2); color: var(--ink-faint); border: 1px solid var(--line-strong); }
.postup__obsah { min-width: 0; padding-top: .3rem; }
.postup__obsah > :last-child { margin-bottom: 0; }
.postup h3 { font-family: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1.35; margin: 0 0 .4rem; }
.postup__obsah p { font-size: 1rem; }
.postup__obsah .pole__napoveda { font-size: .9375rem; }
.postup__krok--pak h3 { color: var(--ink-faint); font-weight: 600; }
.postup__misto { margin-bottom: .5rem; }
.postup__vic { margin: .25rem 0 1rem; }
.postup__vic summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; }
.postup__jinak { border-top: 1px solid var(--line); padding-top: 1rem; margin: .5rem 0 0; }
.zasilka__stitek { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.zasilka__stitek .pole { margin: 0; flex: 0 1 14rem; }
.krok--zrusit { box-shadow: none; }
.krok--zrusit summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.krok--zrusit[open] summary { margin-bottom: 1rem; }
.ks-pole { width: 5rem; min-height: 2.75rem; text-align: center; }
.historie { margin-top: 2rem; color: var(--ink-soft); font-size: .9375rem; }
.historie summary { cursor: pointer; font-weight: 600; }
.historie ul { padding-left: 1.2rem; }
.historie time { color: var(--ink-faint); margin-right: .4rem; }
.kod {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .8rem 1rem; overflow-x: auto; font-size: .875rem; white-space: pre-wrap; word-break: break-all;
}

@media print {
  .kosik-odkaz, .kosik-toast, .odstoupeni-box, .inline-form, .btn-row { display: none !important; }
}
.pole__napoveda--pozor { color: var(--red); font-weight: 600; }