/* Plošná ryba: vzhled webu. Vlastní panelový styl: zaoblené lokty, pilulková tlačítka, barevné segmenty, jako
   ovládací panel z bílého, černého a červeného PETG. Písmo Rumburak na nadpisy a popisky, text systémový.
   Kontrast (WCAG AA): bílá na #D7262E 5 : 1, #A51D24 na bílé 7,5 : 1 a na #F5F4F0 6,8 : 1, #1B1B1D na #9A9CA1
   6,2 : 1, #DCDCD8 na #2E2F33 9,8 : 1, #55575C na bílé 7,3 : 1, #1B1B1D na #35C46A 7,6 : 1 a na #F2B705 9,5 : 1.
   Červená s černým textem ani bílá na šedé #9A9CA1 nestačí, proto tyhle dvojice nepoužíváme. */

@font-face {
  font-family: "Rumburak";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/rumburak-round-1-1.woff2) format("woff2");
}
@font-face {
  font-family: "Rumburak Pixel";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/rumburak-pixel-1-1.woff2) format("woff2");
}

:root {
  color-scheme: light;
  --cervena: #D7262E;
  --cervena-tmava: #A51D24;
  --cerna: #1B1B1D;
  --grafit: #2E2F33;
  --seda: #9A9CA1;
  --seda-svetla: #DCDCD8;
  --bila-mat: #F5F4F0;
  --bila: #FFFFFF;
  --zelena: #35C46A;
  --zluta: #F2B705;
  --text: var(--cerna);
  /* Odvozená tmavší šedá jen na vedlejší text, #9A9CA1 má na bílé málo kontrastu */
  --text-tlumeny: #55575C;
  --linka: var(--seda-svetla);
  --linka-pole: var(--grafit);

  --pismo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pismo-nadpis: "Rumburak", var(--pismo);
  --pismo-pixel: "Rumburak Pixel", var(--pismo-kod);
  --pismo-kod: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --prostrkani: 0.06em;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.2rem;
  --t-xl: 1.45rem;
  --t-2xl: 1.8rem;
  --t-3xl: clamp(1.6rem, 4.6vw, 2.6rem);

  --m-1: 4px;
  --m-2: 8px;
  --m-3: 12px;
  --m-4: 16px;
  --m-5: 24px;
  --m-6: 32px;
  --m-7: 48px;
  --m-8: 72px;

  --r-s: 4px;
  --r-m: 8px;
  --r-l: 14px;
  --spara: 4px;
  --loket: 40px;
  --sirka: 1120px;
  --sirka-text: 72ch;
  --fokus-barva: var(--cervena-tmava);
  --stin: 4px 4px 0 0 var(--cerna);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--m-4);
}

body {
  margin: 0;
  background: var(--bila);
  color: var(--text);
  font-family: var(--pismo);
  font-size: var(--t-m);
  line-height: 1.6;
}

::selection {
  background: var(--zluta);
  color: var(--cerna);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--pismo-nadpis);
  font-weight: 400;
  color: var(--cerna);
  line-height: 1.15;
  margin: 0 0 var(--m-4);
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--t-3xl);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

h2 {
  font-size: var(--t-2xl);
  margin-top: var(--m-7);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

h3 {
  font-size: var(--t-l);
  margin-top: var(--m-5);
  letter-spacing: 0.02em;
}

/* Nadpis stránky: pod ním segmentovaný pruh (červená, světlá šedá, grafit), mezery dělá průhledný padding */
main h1::after {
  content: "";
  display: block;
  max-width: 26rem;
  height: 10px;
  margin-top: var(--m-3);
  padding: 0 var(--spara);
  background: var(--seda-svetla) content-box;
  border-left: 3.5rem solid var(--cervena);
  border-right: 1.75rem solid var(--grafit);
  border-radius: 999px;
}

/* Nadpis sekce: červená čepička vlevo, za textem pruh zakončený šedou pilulkou */
main h2 {
  display: flex;
  align-items: center;
  gap: 0.45em;
  overflow-wrap: anywhere;
}

main h2::before {
  content: "";
  flex: 0 0 1.4em;
  height: 0.75em;
  background: var(--cervena);
  border-radius: 999px 0 0 999px;
}

main h2::after {
  content: "";
  flex: 1 1 3em;
  min-width: 2.8em;
  height: 0.4em;
  padding-right: var(--spara);
  background: var(--grafit) content-box;
  border-right: 1.4em solid var(--seda);
  border-radius: 0 999px 999px 0;
}

main .karta h2,
main .souhrn h2,
main .nakup h2,
main .hero h1 {
  display: block;
}

main .karta h2::before,
main .karta h2::after,
main .souhrn h2::before,
main .souhrn h2::after,
main .nakup h2::before,
main .nakup h2::after,
main .hero h1::after,
main .chyba-404 h1::after {
  content: none;
}

/* Rumburak je široký, dlouhá slova ve verzálkách by na mobilu přetekla */
@media (max-width: 480px) {
  h2,
  .obsah h2 {
    font-size: 1.2rem;
  }

  h1 {
    font-size: 1.5rem;
  }
}

p,
ul,
ol {
  margin: 0 0 var(--m-4);
}

a {
  color: var(--cervena-tmava);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--cerna);
}

:focus-visible {
  outline: 3px solid var(--fokus-barva);
  outline-offset: 2px;
}

code,
pre {
  font-family: var(--pismo-kod);
  font-size: 0.9em;
}

code {
  background: var(--bila-mat);
  border: 1px solid var(--linka);
  padding: 0.05em 0.35em;
  border-radius: var(--r-s);
}

pre {
  background: var(--cerna);
  color: var(--bila-mat);
  padding: var(--m-4) var(--m-4) var(--m-4) var(--m-5);
  border-left: 8px solid var(--cervena);
  border-radius: var(--r-l) var(--r-s) var(--r-s) var(--r-l);
  overflow-x: auto;
  line-height: 1.45;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 var(--m-5);
  font-size: var(--t-s);
  background: var(--bila);
}

th,
td {
  text-align: left;
  padding: var(--m-2) var(--m-3);
  border-bottom: 1px solid var(--linka);
  vertical-align: top;
}

th {
  font-weight: 600;
  color: var(--cerna);
}

thead th {
  font-family: var(--pismo-nadpis);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--prostrkani);
  background: var(--grafit);
  color: var(--bila);
}

.obal {
  max-width: var(--sirka);
  margin: 0 auto;
  padding: 0 var(--m-4);
}

.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--zluta);
  color: var(--cerna);
  padding: var(--m-2) var(--m-4);
  border-radius: 0 999px 999px 0;
  z-index: 100;
}

.preskocit:focus {
  left: var(--m-4);
}

.skryte {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hlavička: loket vlevo nahoře (logo) přechází do vodorovné lišty s účtem a košíkem, pod ní menu ----- */

.hlava {
  --fokus-barva: var(--zluta);
  position: relative;
  z-index: 50;
  background: var(--grafit);
  color: var(--bila);
  padding: var(--m-3) 0;
}

.hlava__obal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}

.logo {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-end;
  gap: var(--m-2);
  min-height: 92px;
  padding: var(--m-4) var(--m-5) var(--m-3) var(--m-5);
  background: var(--seda-svetla);
  color: var(--cerna);
  border-radius: var(--loket) 0 0 0;
  text-decoration: none;
  font-family: var(--pismo-nadpis);
  font-size: var(--t-l);
  line-height: 1.1;
  white-space: nowrap;
}

.logo:hover {
  color: var(--cerna);
  background: var(--bila);
}

.logo img {
  width: 54px;
  height: 36px;
}

.hlava__pruh {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  gap: var(--spara);
  min-height: 34px;
}

/* Vnitřní zaoblení lokte: šedý čtverec pod tmavým čtvercem se zaobleným rohem */
.hlava__pruh::before,
.hlava__pruh::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.hlava__pruh::before {
  background: var(--seda-svetla);
}

.hlava__pruh::after {
  background: var(--grafit);
  border-top-left-radius: 22px;
}

.hlava__segment {
  flex: 1 1 auto;
  min-width: var(--m-4);
  background: var(--seda-svetla);
}

.hlava__segment--kratky {
  flex: 0 0 56px;
  background: var(--seda);
}

.hlava__akce {
  display: flex;
  gap: var(--spara);
}

.jazyk {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.9em 0;
  background: var(--bila);
  color: var(--cerna);
  font-family: var(--pismo-nadpis);
  font-size: var(--t-xs);
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
  text-decoration: none;
}

.jazyk:hover {
  background: var(--zluta);
  color: var(--cerna);
}

.kosik-odkaz {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--m-2);
  padding: 0.2em 1.1em 0 0.9em;
  border-radius: 0 999px 999px 0;
  background: var(--cervena);
  color: var(--bila);
  text-decoration: none;
  font-family: var(--pismo-nadpis);
  font-size: var(--t-xs);
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
}

.kosik-odkaz svg {
  margin-top: -0.2em;
}

.kosik-odkaz:hover {
  background: var(--cervena-tmava);
  color: var(--bila);
}

.kosik-odkaz__pocet {
  background: var(--bila);
  color: var(--cerna);
  border-radius: 999px;
  min-width: 1.6em;
  padding: 0.1em 0.4em 0;
  text-align: center;
  font-family: var(--pismo-pixel);
  font-size: var(--t-xs);
  letter-spacing: 0;
}

.menu {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--m-3) 0 0 var(--m-5);
}

.menu__prepinac {
  display: none;
  padding: 0.5em 1.2em 0.4em;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: var(--bila-mat);
  color: var(--cerna);
  font-family: var(--pismo-nadpis);
  font-size: var(--t-s);
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
  cursor: pointer;
}

.menu__prepinac::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-left: 0.6em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-0.2em) rotate(45deg);
}

.menu--otevrene .menu__prepinac {
  background: var(--zluta);
}

.menu--otevrene .menu__prepinac::after {
  transform: translateY(0.1em) rotate(225deg);
}

.menu__seznam {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__seznam a {
  display: block;
  padding: 0.6em 1.05em 0.5em 0.7em;
  border-radius: 0 999px 999px 0;
  background: var(--bila-mat);
  color: var(--cerna);
  font-family: var(--pismo-nadpis);
  font-size: var(--t-xs);
  line-height: 1.1;
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
  text-decoration: none;
}

.menu__seznam a:hover {
  background: var(--seda-svetla);
  color: var(--cerna);
}

.menu__seznam a[aria-current="page"] {
  background: var(--cervena);
  color: var(--bila);
}

@media (max-width: 1060px) and (min-width: 861px) {
  .logo span {
    display: none;
  }
}

@media (max-width: 860px) {
  .logo {
    min-height: 80px;
    padding: var(--m-3) var(--m-3) var(--m-2) var(--m-4);
    border-radius: 28px 0 0 0;
  }

  .logo span,
  .hlava__segment--kratky {
    display: none;
  }

  .hlava__pruh {
    min-height: 30px;
  }

  .hlava__pruh::before,
  .hlava__pruh::after {
    width: 16px;
    height: 16px;
  }

  .hlava__pruh::after {
    border-top-left-radius: 16px;
  }

  .jazyk {
    padding: 0.2em 0.7em 0;
  }

  .kosik-odkaz {
    padding: 0.2em 0.9em 0 0.7em;
  }

  .menu {
    position: static;
    padding: var(--m-3) 0 0 var(--m-5);
  }

  .menu__prepinac {
    display: inline-flex;
    align-items: center;
  }

  .menu__seznam {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: var(--spara);
    background: var(--grafit);
    border-bottom: 6px solid var(--cervena);
    padding: 0 var(--m-4) var(--m-4) calc(var(--m-4) + 28px);
  }

  .menu--otevrene .menu__seznam {
    display: flex;
  }

  .menu__seznam a {
    padding: 0.7em 1.2em 0.6em;
  }
}

@media (max-width: 380px) {
  .kosik-odkaz span:not(.kosik-odkaz__pocet) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Hlášky: bílá plocha s barevným stavovým pruhem vlevo ---------------------------------- */

.hlaska {
  padding: var(--m-3) var(--m-4);
  border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-s);
  margin: var(--m-4) 0;
  border: 2px solid var(--grafit);
  border-left-width: 10px;
  background: var(--bila);
  color: var(--cerna);
  font-weight: 500;
}

.hlaska > :last-child {
  margin-bottom: 0;
}

.hlaska--chyba {
  border-color: var(--cervena);
  color: var(--cervena-tmava);
  font-weight: 600;
}

.hlaska--info,
.hlaska--ok {
  border-color: var(--seda-svetla);
  border-left-color: var(--zelena);
}

.hlaska--varovani {
  border-color: var(--seda-svetla);
  border-left-color: var(--zluta);
}

/* Tlačítka: pilulka s plochým levým koncem a tvrdým stínem ----------------------------- */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-2);
  padding: 0.75em 1.5em 0.65em 1.1em;
  border-radius: 0 999px 999px 0;
  border: 2px solid var(--cerna);
  background: var(--cervena);
  color: var(--bila);
  font-family: var(--pismo-nadpis);
  font-size: var(--t-s);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--stin);
}

.tlacitko:hover {
  background: var(--cervena-tmava);
  color: var(--bila);
}

.tlacitko:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--cerna);
}

.tlacitko--obrys {
  background: var(--bila);
  border-color: var(--cerna);
  color: var(--cerna);
}

.tlacitko--obrys:hover {
  background: var(--bila-mat);
  color: var(--cerna);
}

.tlacitko--med {
  border-color: var(--cervena);
  box-shadow: 4px 4px 0 0 var(--seda);
}

.tlacitko--med:hover {
  border-color: var(--cervena-tmava);
}

.tlacitko--svetle {
  background: transparent;
  border-color: var(--bila);
  color: var(--bila);
  box-shadow: none;
}

.tlacitko--svetle:hover {
  background: var(--bila);
  border-color: var(--bila);
  color: var(--cerna);
}

.tlacitko--male {
  padding: 0.5em 1.1em 0.4em 0.8em;
  font-size: var(--t-xs);
  box-shadow: 2px 2px 0 0 var(--cerna);
}

.tlacitko[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Úvod: hlavní obrazovka panelu. Černá obrazovka v grafitovém rámu, vlevo sloupec z barevných bloků,
   nahoře a dole lišty s lokty --------------------------------------------------------------------- */

.hero {
  --fokus-barva: var(--zluta);
  background: var(--grafit);
  color: var(--bila);
  padding: var(--m-5) 0 var(--m-7);
  position: relative;
  overflow: hidden;
}

.hero h1 {
  color: var(--bila);
  max-width: 20ch;
  font-size: clamp(1.7rem, 4.8vw, 2.9rem);
  text-shadow: 3px 3px 0 var(--cervena);
}

.hero p {
  max-width: 56ch;
  font-size: var(--t-l);
  color: var(--seda-svetla);
}

.hero a:not(.tlacitko) {
  color: var(--bila);
}

.hero__cesty {
  position: absolute;
  right: -40px;
  top: 0;
  width: 520px;
  height: 100%;
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 720px) {
  .hero__cesty {
    display: none;
  }
}

.hero__panel {
  position: relative;
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}

.hero__ramec {
  grid-column: 2;
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--spara);
  height: 20px;
}

.hero__ramec--horni {
  grid-row: 1;
}

.hero__ramec--dolni {
  grid-row: 3;
}

.hero__ramec span {
  flex: 0 0 3.5rem;
  background: var(--seda);
}

.hero__ramec span:first-child {
  flex: 1 1 auto;
  background: var(--cervena);
}

.hero__ramec span:nth-child(2) {
  flex-basis: 7rem;
  background: var(--seda-svetla);
}

.hero__ramec span:last-child {
  flex-basis: 2.5rem;
  background: var(--cervena);
  border-radius: 0 10px 10px 0;
}

.hero__ramec--dolni span:first-child {
  background: var(--seda);
}

.hero__ramec--dolni span:nth-child(3) {
  background: var(--cervena);
}

.hero__ramec--dolni span:last-child {
  background: var(--seda-svetla);
}

.hero__ramec::before,
.hero__ramec::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 24px;
}

.hero__ramec--horni::before,
.hero__ramec--horni::after {
  top: 100%;
}

.hero__ramec--horni::before {
  background: var(--cervena);
}

.hero__ramec--horni::after {
  background: var(--cerna);
  border-top-left-radius: 24px;
}

.hero__ramec--dolni::before,
.hero__ramec--dolni::after {
  bottom: 100%;
}

.hero__ramec--dolni::before {
  background: var(--seda);
}

.hero__ramec--dolni::after {
  background: var(--cerna);
  border-bottom-left-radius: 24px;
}

.hero__odznaky.odznaky {
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--spara);
  margin: 0;
}

.hero__odznaky .odznak {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 4.5rem;
  padding: var(--m-2) var(--m-3);
  border: 0;
  border-radius: 0;
  background: var(--seda-svetla);
  color: var(--cerna);
  font-family: var(--pismo-nadpis);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: var(--prostrkani);
  text-align: right;
  text-transform: uppercase;
}

.hero__odznaky .odznak:first-child {
  min-height: 7rem;
  background: var(--cervena);
  color: var(--bila);
  border-top-left-radius: 3rem;
}

.hero__odznaky .odznak:last-child {
  min-height: 7rem;
  background: var(--seda);
  color: var(--cerna);
  border-bottom-left-radius: 3rem;
}

.hero__mrizka {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  display: grid;
  gap: var(--m-6);
  align-items: center;
  padding: var(--m-6) var(--m-6) var(--m-6) var(--m-6);
  border-radius: 0 var(--r-l) var(--r-l) 0;
  /* Černá obrazovka s jemným rastrem z teček */
  background: var(--cerna) radial-gradient(rgba(220, 220, 216, 0.12) 1px, transparent 1.5px) 0 0 / 16px 16px;
}

.hero__akce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-4);
  margin-top: var(--m-5);
}

@media (min-width: 960px) {
  .hero--ilustrace .hero__mrizka {
    grid-template-columns: 1fr 1fr;
  }

  .hero--ilustrace h1 {
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  }

  .hero--ilustrace .hero__cesty {
    display: none;
  }
}

@media (max-width: 720px) {
  .hero {
    padding: var(--m-4) 0 var(--m-6);
  }

  .hero p {
    font-size: var(--t-m);
  }

  .hero__panel {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
  }

  .hero__panel::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / -1;
    background: var(--cervena);
    border-radius: 1.25rem 0 0 1.25rem;
  }

  .hero__ramec {
    height: 14px;
  }

  .hero__ramec--dolni {
    grid-row: 4;
  }

  .hero__ramec span:nth-child(2) {
    flex-basis: 3rem;
  }

  .hero__ramec span:nth-child(3) {
    flex-basis: 1.5rem;
  }

  .hero__ramec--dolni span:first-child,
  .hero__ramec--dolni::before {
    background: var(--cervena);
  }

  .hero__ramec::before,
  .hero__ramec::after {
    width: 16px;
    height: 16px;
  }

  .hero__ramec--horni::after {
    border-top-left-radius: 16px;
  }

  .hero__ramec--dolni::after {
    border-bottom-left-radius: 16px;
  }

  .hero__odznaky.odznaky {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--m-5) var(--m-4) 0;
    background: var(--cerna);
  }

  .hero__odznaky .odznak,
  .hero__odznaky .odznak:first-child,
  .hero__odznaky .odznak:last-child {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0.4em 0.9em 0.3em 0.6em;
    border-radius: 0 999px 999px 0;
  }

  .hero__mrizka {
    grid-row: 3;
    padding: var(--m-4) var(--m-4) var(--m-5);
    border-radius: 0;
  }
}

.odznaky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--m-5);
}

.odznak {
  display: inline-flex;
  align-items: center;
  gap: var(--m-2);
  padding: 0.35em 0.95em 0.25em 0.7em;
  border-radius: 0 999px 999px 0;
  border: 2px solid currentColor;
  font-family: var(--pismo-nadpis);
  font-size: var(--t-xs);
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
}

.odznaky--svetle {
  color: var(--cerna);
}

.odznaky--svetle .odznak:first-child {
  background: var(--cervena);
  border-color: var(--cervena);
  color: var(--bila);
}

.sekce {
  padding: var(--m-7) 0;
}

.sekce--svetla {
  background: var(--bila-mat);
}

.sekce > .obal > h2:first-child {
  margin-top: 0;
}

/* Karty: bílý panel s barevnou čepičkou nahoře (dva segmenty) a tvrdým stínem ----------------- */

.mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--m-5);
}

.karta {
  --karta-barva: var(--grafit);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bila);
  border: 2px solid var(--seda-svetla);
  border-radius: 18px 18px var(--r-l) var(--r-l);
  padding: calc(var(--m-5) + 12px) var(--m-5) var(--m-5);
  text-decoration: none;
  color: var(--text);
  box-shadow: 4px 4px 0 0 var(--seda-svetla);
}

.karta::before,
.karta::after {
  content: "";
  position: absolute;
  top: 0;
  height: 12px;
  pointer-events: none;
}

.karta::before {
  left: 0;
  right: calc(3.5rem + var(--spara));
  background: var(--karta-barva);
}

.karta::after {
  right: 0;
  width: 3.5rem;
  background: var(--grafit);
}

.mrizka > .karta:nth-child(4n+1) {
  --karta-barva: var(--cervena);
}

.mrizka > .karta:nth-child(4n+2) {
  --karta-barva: var(--seda);
}

.mrizka > .karta:nth-child(4n+3) {
  --karta-barva: var(--cervena-tmava);
}

.mrizka > .karta:nth-child(4n+4) {
  --karta-barva: var(--seda-svetla);
}

a.karta:hover {
  border-color: var(--cerna);
  color: var(--text);
  box-shadow: 4px 4px 0 0 var(--cerna);
}

a.karta:hover h3,
a.karta:hover h2 {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.karta h3 {
  margin-top: 0;
  font-size: 1.1rem;
  line-height: 1.25;
}

.karta__kod {
  font-family: var(--pismo-pixel);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tlumeny);
}

.karta__cena {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--m-2);
  margin-top: auto;
  padding-top: var(--m-3);
  font-family: var(--pismo-pixel);
  font-size: var(--t-l);
  color: var(--cerna);
}

/* Rámy obrázků: vlevo nahoře loket ze silného rámečku, vpravo dole tvrdý stín jako druhý loket */
.karta__obrazek,
.vyrobek-obrazek,
.ilustrace,
.hero__ilustrace,
.render img {
  border-style: solid;
  border-color: var(--ramec-a, var(--cervena));
  border-width: 10px 0 0 22px;
  border-radius: 38px var(--r-s) 18px var(--r-s);
  box-shadow: 6px 6px 0 0 var(--ramec-b, var(--grafit));
}

.karta__obrazek {
  --ramec-a: var(--karta-barva);
  aspect-ratio: 4 / 3;
  background: var(--bila-mat);
  margin-bottom: var(--m-4);
  margin-right: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-width: 6px 0 0 14px;
  border-radius: 26px var(--r-s) 14px var(--r-s);
  box-shadow: 5px 5px 0 0 var(--grafit);
}

.karta__obrazek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Štítky: malá pilulka se stavovým světlem (žlutá čeká, zelená skladem) */
.stitek {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--pismo-pixel);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25em 0.8em 0.2em 0.55em;
  border-radius: 0 999px 999px 0;
  border: 2px solid var(--cerna);
  background: var(--bila);
  color: var(--cerna);
}

.stitek::before {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--zluta);
  box-shadow: 0 0 0 1px var(--cerna);
}

.stitek--skladem::before {
  background: var(--zelena);
}

.kroky {
  counter-reset: krok;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--m-5);
  list-style: none;
  padding: 0;
}

.kroky li {
  counter-increment: krok;
  background: var(--bila);
  border: solid var(--grafit);
  border-width: 8px 2px 2px 16px;
  border-radius: 30px var(--r-l) var(--r-l) var(--r-l);
  padding: var(--m-4) var(--m-5) var(--m-5);
  box-shadow: 4px 4px 0 0 var(--seda-svetla);
}

.kroky li::before {
  content: counter(krok, decimal-leading-zero);
  display: inline-block;
  padding: 0.2em 0.9em 0.1em 0.6em;
  border-radius: 0 999px 999px 0;
  background: var(--cervena);
  color: var(--bila);
  font-family: var(--pismo-pixel);
  font-size: var(--t-l);
  margin-bottom: var(--m-3);
}

.kroky h3 {
  margin-top: 0;
}

/* Výrobek ----------------------------------------------------------------------------- */

.vyrobek-hlava {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--m-7);
  align-items: start;
  padding: var(--m-6) 0 var(--m-5);
}

.vyrobek-hlava__perex {
  font-size: var(--t-l);
  color: var(--text-tlumeny);
}

.vyrobek-obrazek {
  aspect-ratio: 4 / 3;
  background: var(--grafit);
  margin-right: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.vyrobek-obrazek--ilustrace {
  aspect-ratio: 16 / 9;
  background: var(--bila-mat);
}

.vyrobek-obrazek img,
.vyrobek-obrazek > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Panel s loktem vlevo nahoře: nákup, souhrn košíku, skupiny formuláře */
.nakup,
.souhrn,
fieldset {
  background: var(--bila);
  border: solid var(--grafit);
  border-width: 10px 2px 2px 18px;
  border-radius: 34px var(--r-l) var(--r-l) var(--r-l);
  box-shadow: 4px 4px 0 0 var(--seda-svetla);
}

.nakup {
  padding: var(--m-5);
  margin-top: var(--m-5);
}

@media (max-width: 560px) {
  .nakup,
  .souhrn,
  fieldset {
    border-width: 8px 2px 2px 10px;
    border-radius: 24px var(--r-m) var(--r-m) var(--r-m);
  }

  .nakup,
  .souhrn {
    padding: var(--m-4);
  }
}

.nakup__cena {
  font-family: var(--pismo-pixel);
  font-size: var(--t-2xl);
  line-height: 1.2;
  color: var(--cerna);
}

.nakup__text {
  margin-top: var(--m-3);
}

.nakup__formular {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-3);
  align-items: end;
  margin-top: var(--m-4);
}

.nakup__formular input[type="number"] {
  width: 5em;
}

.nakup__poznamka {
  font-size: var(--t-s);
  color: var(--text-tlumeny);
  margin: var(--m-3) 0 0;
}

/* Volby zájmu (Kdo jste?): pilulky s přepínačem */
.zajem-volby {
  flex: 1 1 100%;
  margin: 0 0 var(--m-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.zajem-volby legend {
  margin-bottom: var(--m-2);
  padding: 0;
  background: none;
  color: var(--cerna);
  font-size: var(--t-s);
}

.zajem-volby__volba {
  display: flex;
  gap: var(--m-3);
  align-items: center;
  margin-bottom: var(--spara);
  padding: 0.55em 1.2em 0.55em 0.8em;
  border: 2px solid var(--grafit);
  border-left-width: 8px;
  border-radius: 0 999px 999px 0;
  font-weight: 400;
  cursor: pointer;
}

.zajem-volby__volba:hover {
  background: var(--bila-mat);
}

.zajem-volby__volba:has(input:checked) {
  border-color: var(--cerna);
  border-left-color: var(--cervena);
  background: var(--bila-mat);
  box-shadow: 3px 3px 0 0 var(--cerna);
}

.zajem-volby__volba input {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  accent-color: var(--cervena);
}

@media (max-width: 860px) {
  .vyrobek-hlava {
    grid-template-columns: 1fr;
    gap: var(--m-5);
  }
}

.obsah {
  max-width: var(--sirka-text);
}

.obsah h2 {
  font-size: var(--t-xl);
}

.obsah img {
  border-radius: var(--r-m);
}

@media (max-width: 720px) {
  .obsah table {
    display: block;
    overflow-x: auto;
  }
}

.kotva {
  margin-left: 0.3em;
  color: var(--seda);
  text-decoration: none;
  font-weight: 400;
}

h2:hover .kotva,
h3:hover .kotva {
  color: var(--cervena-tmava);
}

.parametry th {
  width: 38%;
}

.parametry tr:nth-child(odd) {
  background: var(--bila-mat);
}

.faq details {
  margin-bottom: var(--spara);
  padding: var(--m-3) var(--m-4);
  background: var(--bila-mat);
  border-left: 8px solid var(--seda);
  border-radius: 0 var(--r-l) var(--r-l) 0;
}

.faq details[open] {
  border-left-color: var(--cervena);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--cerna);
  font-size: var(--t-m);
}

.faq details p {
  margin: var(--m-3) 0 0;
}

.drobecky {
  font-family: var(--pismo-nadpis);
  font-size: var(--t-xs);
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
  color: var(--text-tlumeny);
  padding-top: var(--m-5);
}

.drobecky a {
  color: var(--cervena-tmava);
}

.rendery {
  display: grid;
  gap: var(--m-6);
  margin-top: var(--m-5);
}

@media (min-width: 720px) {
  .rendery {
    grid-template-columns: 1fr 1fr;
  }
}

.render {
  margin: 0;
}

@media (min-width: 720px) {
  .render--souprava {
    grid-column: 1 / -1;
  }
}

.legenda {
  display: grid;
  gap: var(--m-3);
  padding-left: 1.4em;
  margin: 0;
}

.legenda li::marker {
  font-family: var(--pismo-pixel);
  color: var(--cervena-tmava);
}

@media (min-width: 960px) {
  .legenda {
    grid-template-columns: repeat(5, 1fr);
  }
}

.render img {
  display: block;
  width: calc(100% - 6px);
  height: auto;
  background: var(--bila-mat);
}

.render figcaption {
  margin-top: var(--m-3);
  font-size: var(--t-s);
  color: var(--text-tlumeny);
}

.ilustrace {
  display: block;
  width: calc(100% - 6px);
  height: auto;
  background: var(--bila-mat);
  margin: var(--m-4) 0 var(--m-6);
}

.hero__ilustrace {
  --ramec-a: var(--seda-svetla);
  --ramec-b: var(--cervena);
  display: block;
  width: calc(100% - 6px);
  height: auto;
}

/* Blog a návody ------------------------------------------------------------------------ */

.clanek-hlava {
  padding: var(--m-6) 0 var(--m-4);
}

.clanek-hlava__datum {
  font-family: var(--pismo-pixel);
  color: var(--text-tlumeny);
  font-size: var(--t-s);
}

.rozlozeni-navod {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--m-7);
  padding: var(--m-6) 0;
}

/* Boční menu jako sloupec panelových tlačítek */
.navody-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spara);
  list-style: none;
  padding: 0;
  margin: 0;
  position: sticky;
  top: var(--m-4);
}

.navody-menu a {
  display: block;
  padding: 0.6em 1.2em 0.5em 0.9em;
  border-left: 10px solid var(--seda);
  border-radius: 0 999px 999px 0;
  background: var(--bila-mat);
  text-decoration: none;
  color: var(--cerna);
  font-family: var(--pismo-nadpis);
  font-size: var(--t-s);
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
}

.navody-menu li:first-child a {
  border-top-left-radius: var(--m-5);
}

.navody-menu a:hover {
  background: var(--seda-svetla);
  color: var(--cerna);
}

.navody-menu a[aria-current="page"] {
  background: var(--grafit);
  border-left-color: var(--cervena);
  color: var(--bila);
}

@media (max-width: 860px) {
  .rozlozeni-navod {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--m-4);
  }

  .navody-menu {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Formuláře ---------------------------------------------------------------------------- */

label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--m-1);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  font: inherit;
  padding: 0.6em 0.75em;
  border: 2px solid var(--linka-pole);
  border-radius: var(--r-m);
  background: var(--bila);
  color: var(--text);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--cerna);
}

textarea {
  min-height: 6em;
}

.pole {
  margin-bottom: var(--m-4);
}

.pole__chyba {
  color: var(--cervena-tmava);
  font-size: var(--t-s);
  font-weight: 600;
  margin-top: var(--m-1);
}

.pole--chyba input,
.pole--chyba select {
  border-color: var(--cervena);
  box-shadow: inset 6px 0 0 var(--cervena);
}

.pole__napoveda {
  font-size: var(--t-s);
  color: var(--text-tlumeny);
  margin-top: var(--m-1);
}

.zaskrtavatko {
  display: flex;
  gap: var(--m-2);
  align-items: flex-start;
  font-weight: 400;
}

.zaskrtavatko input {
  margin-top: 0.35em;
  flex: none;
  accent-color: var(--cervena);
}

.mrizka-formulare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--m-4);
}

@media (max-width: 640px) {
  .mrizka-formulare {
    grid-template-columns: 1fr;
  }
}

fieldset {
  padding: var(--m-4) var(--m-5) var(--m-5);
  margin: 0 0 var(--m-5);
  min-width: 0;
}

legend {
  font-family: var(--pismo-nadpis);
  color: var(--bila);
  background: var(--grafit);
  padding: 0.35em 1.1em 0.25em 0.8em;
  border-radius: 0 999px 999px 0;
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
}

@media (max-width: 560px) {
  fieldset {
    padding: var(--m-3) var(--m-3) var(--m-4);
  }

  legend {
    font-size: var(--t-s);
  }

  .volba {
    padding: var(--m-3);
  }
}

details > summary {
  cursor: pointer;
}

.volba {
  display: flex;
  gap: var(--m-3);
  align-items: flex-start;
  border: 2px solid var(--seda-svetla);
  border-left-width: 8px;
  border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-s);
  padding: var(--m-3) var(--m-4);
  margin-bottom: var(--m-2);
  font-weight: 400;
  cursor: pointer;
}

.volba:hover {
  border-color: var(--seda);
}

.volba:has(input:checked) {
  border-color: var(--cerna);
  border-left-color: var(--cervena);
  background: var(--bila-mat);
}

.volba input {
  margin-top: 0.35em;
  accent-color: var(--cervena);
}

.volba__cena {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}

.novinky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-3);
  max-width: 560px;
}

.novinky input[type="email"],
.novinky input[type="text"] {
  flex: 1 1 240px;
  width: auto;
}

/* Košík, pokladna, objednávka ---------------------------------------------------------- */

.kosik-rozlozeni {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--m-6);
  align-items: start;
  padding: var(--m-5) 0 var(--m-7);
}

@media (max-width: 900px) {
  .kosik-rozlozeni {
    grid-template-columns: minmax(0, 1fr);
  }
}

.polozky {
  list-style: none;
  padding: 0;
  margin: 0;
}

.polozka {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--m-4);
  align-items: center;
  padding: var(--m-4);
  margin-bottom: var(--spara);
  background: var(--bila);
  border: 2px solid var(--seda-svetla);
  border-left: 8px solid var(--cervena);
  border-radius: 0 var(--r-l) var(--r-l) 0;
}

.polozka__nazev {
  font-weight: 600;
}

.polozka__mnozstvi {
  display: flex;
  gap: var(--m-2);
  align-items: center;
}

.polozka__mnozstvi input {
  width: 4.5em;
}

.polozka__cena {
  font-family: var(--pismo-pixel);
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 560px) {
  .polozka {
    grid-template-columns: 1fr auto;
  }

  .polozka__mnozstvi {
    grid-column: 1 / -1;
  }
}

.souhrn {
  padding: var(--m-5);
  position: sticky;
  top: var(--m-4);
}

.souhrn h2 {
  margin-top: 0;
  font-size: var(--t-l);
}

.souhrn dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--m-2) var(--m-3);
  margin: 0 0 var(--m-4);
}

.souhrn dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

.souhrn__celkem {
  font-family: var(--pismo-nadpis);
  font-size: var(--t-xl);
  color: var(--cerna);
  padding-top: var(--m-2);
  border-top: 4px solid var(--cervena);
}

dd.souhrn__celkem {
  font-family: var(--pismo-pixel);
  font-weight: 400;
}

/* Kroky nákupu jako segmentovaný pruh */
.kroky-nakupu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spara);
  list-style: none;
  padding: 0;
  margin: var(--m-5) 0 var(--m-4);
  font-family: var(--pismo-nadpis);
  font-size: var(--t-xs);
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
  color: var(--cerna);
}

.kroky-nakupu li {
  padding: 0.45em 1em 0.35em;
  background: var(--seda-svetla);
}

.kroky-nakupu li:first-child {
  border-radius: 999px 0 0 999px;
  padding-left: 1.2em;
}

.kroky-nakupu li:last-child {
  border-radius: 0 999px 999px 0;
  padding-right: 1.3em;
}

@media (max-width: 480px) {
  .kroky-nakupu {
    font-size: 0.75rem;
  }

  .kroky-nakupu li {
    padding: 0.45em 0.7em 0.35em;
  }
}

.kroky-nakupu li[aria-current="step"] {
  background: var(--cervena);
  color: var(--bila);
}

.qr {
  width: 200px;
  height: 200px;
  background: var(--bila);
  padding: var(--m-2);
  border: solid var(--grafit);
  border-width: 6px 2px 2px 12px;
  border-radius: 22px var(--r-m) var(--r-m) var(--r-m);
}

.stav-objednavky {
  display: flex;
  gap: var(--spara);
  list-style: none;
  padding: 0;
  margin: var(--m-4) 0;
  flex-wrap: wrap;
}

.stav-objednavky li {
  padding: 0.35em 1em 0.25em;
  background: var(--bila);
  border: 2px solid var(--seda);
  font-family: var(--pismo-nadpis);
  font-size: var(--t-xs);
  letter-spacing: var(--prostrkani);
  text-transform: uppercase;
}

.stav-objednavky li:first-child {
  border-radius: 999px 0 0 999px;
}

.stav-objednavky li:last-child {
  border-radius: 0 999px 999px 0;
}

.stav-objednavky li.hotovo {
  background: var(--grafit);
  border-color: var(--grafit);
  color: var(--bila);
}

/* Patička: zrcadlový loket vlevo dole, sloupec shora přechází do spodní lišty ------------------- */

.pata {
  --fokus-barva: var(--zluta);
  background: var(--grafit);
  color: var(--seda-svetla);
  padding: var(--m-6) 0 var(--m-5);
  margin-top: var(--m-7);
  font-size: var(--t-s);
}

.pata a {
  color: var(--bila);
}

.pata a:hover {
  color: var(--zluta);
}

.pata h2 {
  color: var(--bila);
  font-size: var(--t-m);
  letter-spacing: var(--prostrkani);
  margin: 0 0 var(--m-3);
}

.pata__panel {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  grid-template-rows: 1fr auto;
}

.pata__sloupec {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spara);
}

.pata__sloupec span {
  min-height: 2.75rem;
  background: var(--seda);
}

.pata__sloupec span:first-child {
  background: var(--cervena);
  border-radius: var(--r-s) var(--r-s) 0 0;
}

.pata__sloupec span:last-child {
  flex: 1 1 auto;
  background: var(--seda-svetla);
}

.pata__obsah {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  padding: 0 0 var(--m-6) var(--m-6);
}

.pata__obsah::before,
.pata__obsah::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
}

.pata__obsah::before {
  background: var(--seda-svetla);
}

.pata__obsah::after {
  background: var(--grafit);
  border-bottom-left-radius: 24px;
}

.pata__sloupce {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--m-5);
}

.pata ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pata li {
  margin-bottom: var(--m-1);
}

.pata__otevreny {
  margin: var(--m-6) 0 0;
  max-width: 60ch;
}

.pata__spodek {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35em 1.6rem 0.2em;
  background: var(--seda-svetla);
  color: var(--cerna);
  border-radius: 0 1.375rem 1.375rem 2.75rem;
  font-family: var(--pismo-nadpis);
  font-size: var(--t-xs);
  letter-spacing: var(--prostrkani);
}

.pata__spodek p {
  margin: 0;
}

@media (max-width: 720px) {
  .pata__panel {
    grid-template-columns: 1.25rem minmax(0, 1fr);
  }

  .pata__sloupec span {
    min-height: 1.5rem;
  }

  .pata__obsah {
    padding: 0 0 var(--m-5) var(--m-4);
  }

  .pata__obsah::before,
  .pata__obsah::after {
    width: 16px;
    height: 16px;
  }

  .pata__obsah::after {
    border-bottom-left-radius: 16px;
  }

  .pata__spodek {
    border-radius: 0 1.375rem 1.375rem 1.25rem;
    padding-right: 1.2rem;
  }
}

.chyba-404 {
  padding: var(--m-8) 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  .tlacitko:active {
    transform: none;
  }
}

@media print {
  .hlava,
  .pata,
  .nakup,
  .tlacitko {
    display: none !important;
  }
}

/* Výběr výdejního místa (frontend/src/pokladna/zasilkovna.ts) */

.vydejni-misto {
  border: 2px dashed var(--grafit);
  border-radius: var(--r-m);
  padding: var(--m-4);
  margin: var(--m-3) 0;
}

.vydejni-misto--chyba {
  border-color: var(--cervena);
}

.misto-dialog {
  border: solid var(--grafit);
  border-width: 10px 2px 2px 18px;
  border-radius: 34px var(--r-l) var(--r-l) var(--r-l);
  padding: var(--m-5);
  max-width: 520px;
  width: calc(100% - 32px);
}

.misto-dialog::backdrop {
  background: rgba(27, 27, 29, 0.6);
}

.misto-dialog__seznam {
  list-style: none;
  padding: 0;
  margin: var(--m-4) 0;
  display: grid;
  gap: var(--m-2);
}

.misto-dialog__misto {
  width: 100%;
  text-align: left;
  font: inherit;
  padding: var(--m-3);
  border: 2px solid var(--seda-svetla);
  border-radius: var(--r-m);
  background: var(--bila);
  cursor: pointer;
  display: grid;
}

.misto-dialog__misto[aria-current="true"],
.misto-dialog__misto:hover {
  border-color: var(--cerna);
  background: var(--bila-mat);
}